/* Tilde - stilark. Tokens og komponenter følger designet (.claude/skills/tilde-design). Ingen tabelstyling: lister og kort bruges i stedet. */

@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/figtree-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/figtree-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --tekst: #16201C;
  --tekst-2: #3D4844;
  --daempet: #5C6662;
  --deaktiveret: #8A928E;   /* tekst på en knap, der ikke kan bruges lige nu (som i prototypen; forklaringen står ved siden af) */
  --baggrund: #FFFFFF;
  --flade: #F5F7F6;
  --flade-2: #F2F4F3;
  --kant: #E8ECEA;
  --linje: #EEF0EF;
  --felt-kant: #DDE2DF;
  --accent: #17352B;
  --accent-tint: #E6F0EA;
  --paa-accent: #FFFFFF;   /* tekst på accentfladen */
  --logo-tegn: #FFD569;    /* logoets tre gule prikker på accentfladen */
  --resume: #F1F6F3;
  --sol: #FFC94A;
  --advarsel-flade: #FFF8E6;
  --maaler-advarsel: #C98A0B;   /* søjlen i forbrugsmåleren over advarselsgrænsen */
  --maaler-advarsel-tekst: #8A5A00;   /* procenten i forbrugsmåleren over advarselsgrænsen */
  --fejl: #A12A2A;
  --fejl-flade: #FDEEEE;
  --fejl-kant: #F0CACA;
  --kurve: #2E6B52;
  --stigning: #1A6B43;   /* "18 % flere" på Overblik og "Aktiv, logget ind …" på Brugere */
  --afventer: #7A5600;   /* "Har ikke logget ind endnu" på Brugere */

  /* Svarniveauer: farve og chip (flade/tekst). */
  --niveau-fandt: #1A7F4B;
  --niveau-fandt-flade: #E5F3EB;
  --niveau-fandt-tekst: #146B3E;
  --niveau-forsigtigt: #E9B949;
  --niveau-forsigtigt-flade: #FBF1D6;
  --niveau-forsigtigt-tekst: #6B4E00;
  --niveau-login: #3B5BDB;
  --niveau-login-flade: #E9EDFB;
  --niveau-login-tekst: #2C46B8;
  --niveau-intet: #CDD3D0;
  --niveau-intet-flade: #EEF0EF;
  --niveau-intet-tekst: #3D4844;

  /* Forside og offentlige sider. */
  --tekst-3: #4A5450;
  --kant-2: #E3E8E5;
  --knap-kant: #CBD3CF;
  --hero-flade: #EEF3EF;
  --laast-flade: #FFF6DA;
  --laast-kant: #F0DFA8;
  --laast-tekst: #5A4A1A;
  --moerk-tekst: #E4EEE9;
  --moerk-tekst-2: #CFE0D8;
  /* Indsigt (prototypen "5 · Indsigt i søgningen"): lyse skillelinjer i listerne og på den gule "Muligheder"-flade. */
  --linje-let: #F0F3F1;
  --linje-gul: #F3E6C2;
  --assistent-laast-kant: #C9D1CD;   /* det låste felt "Spørg assistenten (med i Pro)" (prototypen "4 · Assistent") */
  --assistent-laast-flade: #F7F9F8;
  --udkast-kant: #B9C4BF;   /* den stiplede kant om assistentens udkast (prototypen "4 · Assistent") */

  --menu-bredde: 222px;
  --medlem-flade: #FFF8E3;   /* boksen "Medlemsindhold: kun teaseren er gemt" på Indhold (prototypen "9 · Indhold") */
  --medlem-tekst: #4A3E14;   /* teaseren i boksen */
  --medlem-note: #6B5A20;    /* noten i boksen */
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--baggrund);
  color: var(--tekst);
  font-family: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.55;
}

a { color: var(--accent); }

h1 { margin: 0 0 20px; font-size: 30px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
h2 { margin: 0 0 12px; font-size: 20px; font-weight: 600; line-height: 1.3; }
p { margin: 0 0 14px; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
h1:focus { outline: none; }

/* ---- Skal: menu til venstre, indhold til højre ---- */

.skal { display: flex; min-height: 100vh; }
.side { flex: 1 1 0; min-width: 0; }

/* Ens indholdsbredde og top-luft på alle sider: 1104 px minus 2 × 32 px luft giver 1040 px indhold (som i prototypen). */
main { max-width: 1104px; margin: 0 auto; padding: 44px 32px 64px; box-sizing: border-box; }

.spring-over {
  position: absolute; left: 12px; top: -64px; z-index: 10;
  padding: 10px 14px; border-radius: 12px; background: var(--accent); color: var(--paa-accent); text-decoration: none; font-weight: 600;
}
.spring-over:focus { top: 12px; }

/* ---- Menu ---- */

.menu {
  flex: 0 0 var(--menu-bredde); width: var(--menu-bredde);
  position: sticky; top: 0; align-self: flex-start; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column;
  padding: 22px 14px; background: var(--baggrund); border-right: 1px solid var(--linje); color: var(--tekst); line-height: 1.4;
}

.menu-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 20px; }

.logo-flade { fill: var(--accent); }
.logo-tegn { fill: var(--logo-tegn); }
.logo { display: flex; align-items: center; gap: 10px; padding: 0 12px; min-height: 44px; text-decoration: none; color: var(--tekst); font-weight: 700; font-size: 18px; letter-spacing: -0.01em; }

.menu-indhold { flex: 1 1 auto; display: flex; flex-direction: column; gap: 20px; min-height: 0; }
.menu-indhold > * { flex-shrink: 0; }

.menu-knap {
  display: none; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px;
  border: 1px solid var(--felt-kant); border-radius: 12px; background: var(--baggrund); color: var(--tekst);
  font: inherit; font-weight: 600; cursor: pointer;
}
.menu-knap .ord-luk, .menu-knap .ikon-luk { display: none; }
.menu-knap[aria-expanded="true"] .ord-luk, .menu-knap[aria-expanded="true"] .ikon-luk { display: inline; }
.menu-knap[aria-expanded="true"] .ord-menu, .menu-knap[aria-expanded="true"] .ikon-menu { display: none; }

/* Kundevælgeren: én knap med navn og domæne (og en pil, når der er flere kunder at vælge imellem). */
.kunde-knap {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; padding: 0 14px;
  border: 1px solid var(--kant-2); border-radius: 12px; background: var(--baggrund); color: var(--tekst); text-align: left;
}
summary.kunde-knap { cursor: pointer; list-style: none; }
summary.kunde-knap::-webkit-details-marker { display: none; }
summary.kunde-knap:hover, .kundevaelger[open] > summary.kunde-knap { background: var(--flade); }
.kunde-tekst { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.kunde-tekst .kundenavn { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
/* Domænet på én linje: et langt domæne afkortes med "…" (hele domænet står i title) i stedet for at blive brudt ved bindestregen. */
.kunde-tekst .kundedomaene { font-size: 13px; color: var(--daempet); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kunde-pil { flex: 0 0 14px; color: var(--daempet); }
/* Den udfoldede liste: én linje pr. kunde og site (navn og domæne som på knappen); den valgte linje er markeret som menuens aktive punkt. */
.kundevaelger .kunde-liste { margin: 6px 0 0; padding: 0; }
.kundevaelger .kunde-liste > li { min-height: 0; padding: 0; border-top: 0; }
.kunde-linje { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; min-height: 48px; padding: 6px 14px; box-sizing: border-box; border-radius: 12px; color: var(--tekst); text-decoration: none; }
.kunde-linje:hover { background: var(--flade); }
.kunde-linje.valgt { background: var(--accent-tint); }
.kunde-linje.valgt .kundenavn { color: var(--accent); }

.menu-gruppe > p { margin: 0 14px 6px; font-size: 13px; font-weight: 600; color: var(--daempet); }
.menu-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.menu-liste a {
  display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 0 14px; border-radius: 12px;
  color: var(--tekst-2); text-decoration: none; overflow-wrap: anywhere;
}
.menu-liste a:hover { background: var(--flade); }
.menu-liste a[aria-current="page"] { background: var(--accent-tint); color: var(--accent); font-weight: 600; }
.ikon { flex: 0 0 19px; width: 19px; height: 19px; }

/* Brugermenuen nederst: kun brugeren; et tryk åbner sprogvalg og "Log ud" over knappen (på mobil under den). */
.menu-bund { margin-top: auto; padding-top: 12px; }
.brugermenu { position: relative; }
.menu-bruger { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 12px; border-radius: 12px; cursor: pointer; list-style: none; }
.menu-bruger::-webkit-details-marker { display: none; }
.menu-bruger:hover, .brugermenu[open] > .menu-bruger { background: var(--flade); }
.menu-bruger .avatar { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; background: var(--accent-tint); color: var(--accent); display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.menu-bruger .bruger-tekst { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.menu-bruger .bruger-navn { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.menu-bruger .bruger-rolle { font-size: 13px; color: var(--daempet); }
.brugermenu-panel {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); z-index: 5;
  display: flex; flex-direction: column; gap: 8px; padding: 8px;
  border: 1px solid var(--kant); border-radius: 12px; background: var(--baggrund); box-shadow: 0 12px 32px -12px rgba(22, 32, 28, .28);
}
.brugermenu-panel .sprogvalg, .brugermenu-panel .logud { margin: 0; }

.sprogvalg { display: flex; gap: 4px; padding: 3px; margin: 0 12px; border-radius: 12px; background: var(--flade-2); }
.sprogvalg button { flex: 1 1 0; min-height: 36px; border: 0; border-radius: 10px; background: transparent; color: var(--tekst-2); font: inherit; font-size: 13px; cursor: pointer; }
.sprogvalg button[aria-pressed="true"] { background: var(--baggrund); color: var(--tekst); font-weight: 600; }
.logud { margin: 0 12px; }
.logud .knap { width: 100%; }

/* ---- Kort, knapper, lister ---- */

.kort { border: 1px solid var(--kant); border-radius: 20px; padding: 22px 24px; background: var(--baggrund); }
.kort + .kort { margin-top: 16px; }

.knap {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px;
  border: 1px solid var(--accent); border-radius: 12px; background: var(--accent); color: var(--paa-accent);
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
}
.knap.sekundaer { background: var(--baggrund); color: var(--tekst); border-color: var(--felt-kant); }
.knap:hover { filter: brightness(1.12); }
.knap.sekundaer:hover { background: var(--flade); filter: none; }
/* En knap, der ikke kan bruges lige nu (fx "Læs nu" på Domæner): grå som i prototypen. */
.knap:disabled, .knap[disabled] { background: var(--flade); color: var(--deaktiveret); border-color: var(--kant-2); cursor: not-allowed; filter: none; }

.liste { list-style: none; margin: 0; padding: 0; }
.liste > * { min-height: 52px; padding: 12px 0; border-top: 1px solid var(--linje); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; overflow-wrap: anywhere; min-width: 0; }
.liste > :first-child { border-top: 0; }
.liste .rolle { color: var(--daempet); font-size: 13px; }

.kort, .kort * { overflow-wrap: anywhere; min-width: 0; }

.fejl { padding: 14px 18px; border-radius: 14px; background: var(--fejl-flade); color: var(--fejl); border: 1px solid var(--fejl-kant); }
.fejl-handlinger { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 20px; }
.fejl-handlinger .sprogvalg, .fejl-handlinger .logud { margin: 0; }

/* ---- Mobil: topbjælke med "Menu"-knap ---- */

@media (max-width: 860px) {
  .skal { display: block; }

  .menu { position: static; width: 100%; height: auto; overflow: visible; padding: 10px 14px; border-right: 0; border-bottom: 1px solid var(--linje); }
  .menu-top { margin-bottom: 0; }
  /* Knappen findes kun med JavaScript: uden den er menuen bare synlig, og der er intet at trykke på. */
  .js .menu-knap { display: inline-flex; }
  .menu-indhold { padding-top: 14px; }
  /* Uden JavaScript er menuen synlig under topbjælken; med JavaScript (klassen "js") foldes den ind, til knappen åbner den. */
  .js .menu-indhold[data-aaben="false"] { display: none; }
  /* Brugermenuens panel ligger i flowet under knappen. */
  .brugermenu-panel { position: static; margin-top: 6px; box-shadow: none; }
}

/* ---- Delte komponenter ---- */

.kun-skaermlaeser { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Den runde send-knap (prøvefeltet på Overblik og feltet på Prøv). */
.proev-knap { flex: 0 0 auto; width: 48px; height: 48px; border: 0; border-radius: 16px; background: var(--accent); color: var(--paa-accent); display: grid; place-items: center; cursor: pointer; }
.proev-knap:hover { filter: brightness(1.12); }

/* Segmenteret valg (Prøv: Søgning/Chat; Svar og beskeder). */
.segment { align-self: flex-start; display: flex; padding: 3px; border-radius: 12px; background: var(--flade-2); }
.segment button { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent; font: inherit; font-weight: 600; color: var(--tekst); cursor: pointer; }
.segment button[aria-checked="true"] { background: var(--baggrund); box-shadow: 0 1px 3px rgba(22, 32, 28, .15); }
.segment button[aria-disabled="true"] { color: var(--daempet); cursor: not-allowed; }
.segment button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Sidehovedet (SideHoved) på alle portalsider som i prototypen: h1 med linjehøjden 1,55 og introen 4 px under i 15 px dæmpet tekst uden max-bredde.
   Har siden en handling (fx "Inviter bruger"), står den til højre for titlen; på smalle skærme under teksten. 28 px til indholdet. */
.side-hoved { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 28px; }
.side-hoved h1 { margin: 0; line-height: 1.55; }
.side-hoved .intro { margin: 4px 0 0; color: var(--daempet); font-size: 15px; }
/* Sider for hele kunden ved flere sites: "Gælder hele DBI – alle sites" under introen (sitet vælges i menuen). */
.side-hoved .omfang { margin: 4px 0 0; color: var(--daempet); font-size: 14px; }
.side-hoved-handlinger { display: flex; flex-wrap: wrap; gap: 8px; }
.side-hoved-handlinger .knap { min-height: 46px; padding: 0 20px; border-radius: 14px; }

.felt { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.felt label, .felt .etiket { font-weight: 600; }
.felt .stjerne { color: var(--daempet); }
.felt input, .felt select, .felt textarea {
  min-height: 44px; padding: 8px 14px; border: 1px solid var(--felt-kant); border-radius: 12px; background: var(--baggrund); color: var(--tekst); font: inherit;
}
.felt.har-fejl input, .felt.har-fejl select, .felt.har-fejl textarea, .felt input[aria-invalid="true"] { border-color: var(--fejl); }
.hjaelp { margin: 0; font-size: 13px; color: var(--daempet); }
.felt-fejl { margin: 0; font-size: 13px; font-weight: 600; color: var(--fejl); }

.fejl p:last-child { margin-bottom: 0; }

.besked { padding: 14px 18px; border-radius: 14px; margin-bottom: 16px; }
.besked.ok { background: var(--accent-tint); color: var(--accent); border: 1px solid var(--kant); }
.besked.advarsel { background: var(--advarsel-flade); color: var(--niveau-forsigtigt-tekst); border: 1px solid var(--niveau-forsigtigt); }

.laast { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 14px 18px; border-radius: 14px; background: var(--flade); border: 1px solid var(--kant); color: var(--tekst-2); }
.pakke-maerke { display: inline-block; padding: 2px 9px; border-radius: 999px; background: var(--accent); color: var(--baggrund); font-size: 11px; font-weight: 700; line-height: 1.6; }
.laast .spoerg { font-weight: 600; }

/* Resumé-boksen (ResumeBoks): assistentens tekst på Overblik og Indsigt. Mål efter prototypen. Isolationen (K6) kommer af, at hvert afsnit er sin egen blok (<p>); unicode-bidi: isolate er kun en ekstra sikring. Inline-AI-felter skal selv isoleres med <bdi> eller unicode-bidi: isolate på inline-elementet. */
.resume-boks { display: flex; gap: 16px; padding: 24px 26px; border-radius: 22px; background: var(--resume); color: var(--tekst); }
.resume-ikon { flex: 0 0 auto; margin-top: 3px; color: var(--accent); }
.resume-indhold { display: flex; flex-direction: column; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.resume-indhold h2 { margin: 0; font-size: 17px; font-weight: 600; }
.resume-tekst { margin: 0; font-size: 16px; line-height: 1.65; unicode-bidi: isolate; }
.resume-fod { margin: 4px 0 0; font-size: 13px; color: var(--daempet); }

.chip { display: inline-block; padding: 2px 11px; border-radius: 999px; font-size: 13px; font-weight: 600; line-height: 1.6; }
.chip.niveau-fandt { background: var(--niveau-fandt-flade); color: var(--niveau-fandt-tekst); }
.chip.niveau-forsigtigt { background: var(--niveau-forsigtigt-flade); color: var(--niveau-forsigtigt-tekst); }
.chip.niveau-login { background: var(--niveau-login-flade); color: var(--niveau-login-tekst); }
.chip.niveau-intet { background: var(--niveau-intet-flade); color: var(--niveau-intet-tekst); }

.sidenavigation { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.sidenavigation p { margin: 0; color: var(--daempet); }
.sidenavigation-links { display: flex; gap: 8px; }
/* Med sidetal (Indhold, Spørgsmål og svar) som i prototypen: lette links, den aktuelle side på en grå flade. */
.sidenavigation.med-sidetal { margin-top: 0; font-size: 14px; }
.sidenavigation.med-sidetal .sidenavigation-links { gap: 6px; }
.sidenavigation.med-sidetal a { display: grid; place-items: center; min-width: 40px; min-height: 40px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; color: var(--tekst-2); font-size: 14px; font-weight: 400; text-decoration: none; }
.sidenavigation.med-sidetal a.sidetal { padding: 0; }
.sidenavigation.med-sidetal a:hover { background: var(--flade); filter: none; }
.sidenavigation.med-sidetal a[aria-current="page"] { background: var(--flade-2); color: var(--tekst); font-weight: 600; }
.intet { color: var(--daempet); }
.brydbar { overflow-wrap: anywhere; word-break: break-word; min-width: 0; }

.bekraeft { display: flex; flex-direction: column; gap: 12px; padding: 14px 18px; border-radius: 14px; background: var(--flade); border: 1px solid var(--kant); }
.bekraeft p { margin: 0; }
.bekraeft-handlinger { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---- pauselinje (PauseLinje): AI-hjælpen holder pause - én kort grå linje i stedet for AI-indholdet, uden ramme (K4; intet forlæg i prototypen) ---- */
.pause-linje { margin: 0; font-size: 14px; line-height: 1.55; color: var(--daempet); }

/* ---- analyse (BesoegendesOrd, Opfoelgninger, AnalyseGrupper, AnalyseVindue): assistentens analyser som lister efter prototypen "5 · …" og "6 · …" (C2 Task 3) ---- */
/* Hvert AI-felt står i sit eget <bdi> (isoleret retning); unicode-bidi: isolate er en ekstra sikring. Lange ord brydes. */
.analyse { min-width: 0; overflow-wrap: anywhere; }
.analyse h2 { margin: 0 0 4px; font-size: 17px; font-weight: 600; }
.analyse-undertekst { margin: 0 0 12px; font-size: 14px; color: var(--daempet); }
.analyse-vindue { margin: -8px 0 12px; font-size: 13px; color: var(--daempet); }
.analyse-liste { list-style: none; margin: 0; padding: 0; }
.analyse-liste li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 10px 0; border-top: 1px solid var(--linje-let); }
.analyse-besoeg { flex: 1 1 140px; min-width: 0; font-weight: 600; }
.analyse-besoeg bdi, .analyse-jeres, .analyse-titel, .analyse-emner .uden-svar-emne { unicode-bidi: isolate; }
.analyse-pil { flex: 0 0 auto; }
.analyse-jeres { flex: 1 1 140px; min-width: 0; color: var(--tekst-2); }
.analyse-antal { font-size: 13px; color: var(--daempet); white-space: nowrap; overflow-wrap: normal; }
.analyse-opfoelg li { flex-wrap: nowrap; gap: 12px; }
.analyse-titel { flex: 1 1 auto; min-width: 0; }
.analyse-andel { flex: 0 0 auto; font-size: 14px; color: var(--daempet); white-space: nowrap; overflow-wrap: normal; }

/* ---- assistent-svar (AssistentSvarVisning, UdkastVisning, GrundlagListe): assistentens svar efter prototypen "4 · Assistent", delen "Eksempel fra Pro" (C2 Task 4) ---- */
/* Al tekst er ren tekst: linjeskift bevares (pre-line i svaret, pre-wrap i udkastet, så "Kopiér" giver teksten uændret), og lange ord og adresser brydes på 390 px.
   Hvert AI-felt står i sit eget <bdi>; unicode-bidi: isolate er en ekstra sikring. */
.assistent-svar-visning { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.assistent-svar-visning bdi { unicode-bidi: isolate; }
.assistent-spoergsmaal { align-self: flex-end; max-width: 85%; margin: 0; padding: 12px 16px; border-radius: 18px 18px 4px 18px; background: var(--flade-2); overflow-wrap: anywhere; unicode-bidi: isolate; }
.assistent-svar { white-space: pre-line; overflow-wrap: anywhere; margin: 0; font-size: 16px; line-height: 1.7; unicode-bidi: isolate; }
.assistent-ikke-daekket-hjaelp { margin: -8px 0 0; color: var(--tekst-2); }
.assistent-forslag-blok { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.assistent-forslag-titel { margin: 0; font-weight: 600; }
.assistent-forslag { display: flex; flex-direction: column; gap: 8px; margin: 0; padding-left: 22px; overflow-wrap: anywhere; }
.assistent-note, .udkast-note { margin: 0; font-size: 13px; color: var(--afventer); }
.udkast-boks { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 18px 20px; border: 1px dashed var(--udkast-kant); border-radius: 16px; }
.udkast-hoved { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.udkast-titel { margin: 0; font-weight: 600; }
.udkast-kopier.knap { min-height: 36px; padding: 0 12px; border-radius: 10px; font-size: 14px; }
.udkast-kopier[hidden] { display: none; }
.udkast-navn { margin: 0; font-weight: 600; overflow-wrap: anywhere; unicode-bidi: isolate; }
.udkast { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; font: inherit; color: var(--tekst-2); unicode-bidi: isolate; }
.udkast-opret { margin: 4px 0 0; }
.udkast-opret .knap { min-height: 40px; font-size: 14px; }
.grundlag { font-size: 14px; color: var(--tekst-2); overflow-wrap: anywhere; }
.grundlag summary { min-height: 28px; color: var(--daempet); cursor: pointer; }
.grundlag-liste { display: flex; flex-direction: column; gap: 4px; margin: 8px 0 0; padding-left: 20px; }
.assistent-links { display: flex; flex-wrap: wrap; gap: 8px; }
.assistent-links .knap { min-height: 40px; padding: 0 14px; border-radius: 12px; font-size: 14px; text-decoration: none; }
.assistent-fodnote { margin: 0; font-size: 13px; color: var(--daempet); }

/* ---- Kundevælgeren (/portal): ét kort pr. kunde ---- */

.kunde-kort-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.kunde-kort {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 12px; min-height: 84px;
  padding: 22px 24px; border: 1px solid var(--kant); border-radius: 20px; background: var(--baggrund);
  color: var(--tekst); text-decoration: none;
}
.kunde-kort:hover { background: var(--flade); border-color: var(--felt-kant); }
.kunde-navn { grid-column: 1; font-size: 17px; font-weight: 600; overflow-wrap: anywhere; }
.kunde-rolle { grid-column: 1; font-size: 13px; color: var(--daempet); }
.kunde-pil { grid-column: 2; grid-row: 1 / span 2; color: var(--accent); }
/* Topbjælken: logo til venstre, sprog (diskret, som på de offentlige sider) og "Log ud" til højre. Rykket 22 px op, så logoet står som på de offentlige sider. */
.kundevalg-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: -22px 0 24px; }
.kundevalg-logo { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 19px; font-weight: 800; letter-spacing: -0.01em; }
.kundevalg-handlinger { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.kundevalg-top .sprogvalg { margin: 0; padding: 0; background: none; }
.kundevalg-top .sprogvalg button { flex: 0 0 auto; min-height: 44px; padding: 0 10px; border-radius: 8px; color: var(--daempet); font-size: 14px; }
.kundevalg-top .sprogvalg button:hover { color: var(--tekst); }
.kundevalg-top .sprogvalg button[aria-pressed="true"] { display: none; }
.kundevalg-top .logud { margin: 0; }
/* Ingen luft til højre: "Log ud" flugter med indholdets højre kant. */
.kundevalg-top .logud .tekstknap { border: 0; background: none; font: inherit; font-size: 14px; padding: 0 0 0 10px; cursor: pointer; }

/* ---- Offentlige sider (forside, log ind og forklaringssider): eget layout uden portalmenu ---- */

.offentlig {
  min-height: 100vh; display: flex; flex-direction: column; background: var(--baggrund);
}
.offentlig-kort { background: var(--flade); }
.offentlig main { max-width: none; margin: 0; padding: 0; flex: 1 1 auto; }

.offentlig-top {
  width: 100%; max-width: 1160px; margin: 0 auto; padding: 22px 28px; display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 16px;
}
.offentlig-logo { display: flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; color: var(--tekst); font-size: 20px; font-weight: 800; letter-spacing: -0.01em; }
.offentlig-top-hoejre { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
/* Sprogvælgeren (krav: dansk og engelsk) så diskret som muligt: kun det andet sprog som et lille, dæmpet link ved siden af knappen. Det valgte sprog er siden selv og vises ikke. */
.offentlig .sprogvalg { margin: 0; padding: 0; background: none; }
.offentlig .sprogvalg button { flex: 0 0 auto; min-height: 44px; padding: 0 6px; border-radius: 8px; color: var(--daempet); font-size: 14px; }
.offentlig .sprogvalg button:hover { color: var(--tekst); }
.offentlig .sprogvalg button[aria-pressed="true"] { display: none; }
.offentlig-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.offentlig-nav a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; color: var(--tekst-2); text-decoration: none; font-size: 16px; }
.offentlig-nav a:hover { color: var(--tekst); }
.offentlig-nav a.pille { padding: 0 20px; margin-left: 8px; border-radius: 999px; background: var(--accent); color: var(--paa-accent); font-weight: 700; }
.offentlig-nav a.pille:hover { filter: brightness(1.12); }
.tilbage { display: flex; align-items: center; min-height: 44px; font-size: 15px; }

.offentlig-bund { width: 100%; max-width: 1160px; margin: 0 auto; padding: 8px 28px 28px; text-align: center; font-size: 14px; color: var(--daempet); }
.offentlig-bund a { margin-left: 8px; }

/* Forklaringssiderne: ét hvidt kort midt på siden (som mockuppen af log ind). */
/* Samme indholdsbredde (1040 px) og top-luft som portalen (44 px ved alle bredder): kortet ligger øverst, ikke midt i højden.
   Forsiden er en bevidst undtagelse: den er en markedsføringsside med egen, bredere opbygning (1160 px) og eget layout uden kort.
   Kortet som prototypens log ind: 440 px (360 px indhold), 24 px til kanten og 44/40 px luft også på mobil, 16 px tekst og introen 8 px under h1. */
.offentlig-kort .offentlig-top, .offentlig-kort .offentlig-bund { max-width: 1040px; }
.offentlig-kort main { display: grid; justify-items: center; align-items: start; padding: 44px 24px 64px; }
.offentlig-boks {
  width: 100%; max-width: 440px; padding: 44px 40px; border-radius: 28px; background: var(--baggrund); font-size: 16px; line-height: 1.6;
  box-shadow: 0 24px 60px -36px rgba(22, 32, 28, .35);
}
.offentlig-boks.bred { max-width: 680px; }
.offentlig-boks h1 { margin: 0 0 8px; font-size: 30px; font-weight: 800; }
.offentlig-boks h2 { margin: 26px 0 8px; font-size: 18px; }
.offentlig-boks p { color: var(--tekst-3); }
.offentlig-boks .intro-lille { margin-bottom: 22px; }
.offentlig-boks .hjaelp { margin-bottom: 8px; }
.offentlig-boks .handlinger { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.offentlig-boks .handlinger:empty { display: none; }
.knap.stor { width: 100%; min-height: 54px; border-radius: 14px; font-weight: 700; }
.knap.microsoft { gap: 12px; margin-bottom: 22px; }
.foldud { padding-top: 18px; border-top: 1px solid var(--kant-2); }
.foldud summary { cursor: pointer; min-height: 32px; font-weight: 700; }
.foldud p { margin: 10px 0 0; font-size: 15px; color: var(--tekst-2); }
.trin-liste { margin: 0 0 8px; padding-left: 22px; color: var(--tekst-3); }
.trin-liste li { margin-bottom: 6px; }
.kode-boks { margin: 0 0 14px; padding: 12px 14px; border-radius: 12px; background: var(--flade); border: 1px solid var(--kant); }
.kode-boks code { font-size: 13px; overflow-wrap: anywhere; word-break: break-all; }

/* Forsiden */
.forside-hero {
  max-width: 1160px; margin: 0 auto; padding: 72px 28px 96px; display: flex; flex-wrap: wrap; align-items: center; gap: 56px;
  font-size: 17px; line-height: 1.6;
}
.forside-hero-tekst { flex: 1 1 440px; min-width: 0; }
.forside-hero h1 { margin: 0; font-size: 58px; line-height: 1.06; font-weight: 800; letter-spacing: -0.035em; }
.forside-intro { max-width: 520px; margin: 24px 0 0; font-size: 20px; color: var(--tekst-3); }
.forside-knapper { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; }
.knap-sol, .knap-kant {
  display: flex; align-items: center; min-height: 52px; padding: 0 26px; border-radius: 999px; text-decoration: none; color: var(--tekst); font-weight: 700;
}
.knap-sol { background: var(--sol); font-weight: 800; }
.knap-kant { border: 1.5px solid var(--knap-kant); }
.knap-sol:hover { filter: brightness(.96); }
.knap-kant:hover { background: var(--flade); }

/* 476 px = prototypens 420 px + 2 × 28 px padding (prototypens figur er content-box, portalen border-box): samme kolonnebredder. */
.forside-eksempel { flex: 1 1 476px; min-width: 0; margin: 0; padding: 28px; border-radius: 32px; background: var(--hero-flade); }
.eksempel-vindue { display: flex; flex-direction: column; gap: 14px; padding: 22px; border-radius: 22px; background: var(--baggrund); box-shadow: 0 18px 40px -24px rgba(22, 32, 28, .35); }
.eksempel-soeg { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border: 1px solid var(--felt-kant); border-radius: 14px; }
.eksempel-soeg svg { flex: 0 0 18px; color: var(--daempet); }
.eksempel-svar { margin: 0; font-size: 16px; line-height: 1.6; color: var(--tekst); }
.eksempel-kilder { display: flex; flex-direction: column; gap: 8px; }
.eksempel-kilde { padding: 12px 14px; border-radius: 12px; background: var(--flade); font-size: 15px; }
.eksempel-kilde strong { display: flex; align-items: center; gap: 6px; }
.eksempel-kilde span { color: var(--daempet); }
.eksempel-kilde.laast-kilde { background: var(--laast-flade); }
.eksempel-kilde.laast-kilde span { color: var(--laast-tekst); }

.forside-bad { background: var(--flade); font-size: 17px; line-height: 1.6; }
.forside-indre { max-width: 1160px; margin: 0 auto; padding: 88px 28px; box-sizing: border-box; font-size: 17px; line-height: 1.6; }
.forside-afsnit { padding-top: 96px; padding-bottom: 96px; }
.forside-h2 { margin: 0 0 40px; font-size: 38px; line-height: 1.15; font-weight: 800; letter-spacing: -0.025em; }
.forside-h2.smal { max-width: 640px; }
.forside-gitter { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 40px; list-style: none; margin: 0; padding: 0; }
.forside-gitter h3 { margin: 0 0 8px; font-size: 20px; font-weight: 700; }
.forside-gitter p { margin: 0; color: var(--tekst-3); }
.forside-gitter.trin { gap: 24px; }
.trin > li { padding: 28px; border: 1px solid var(--kant-2); border-radius: 24px; }
.trin > li h3 { margin: 18px 0 6px; }
.trin-nr { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: var(--paa-accent); font-weight: 800; }
.forside-gitter.pakker { gap: 20px; }
.pakke { padding: 30px; border-radius: 24px; background: var(--baggrund); }
.pakke h3 { font-size: 24px; font-weight: 800; }
.pakke .pakke-intro { margin: 6px 0 20px; }
.pakke ul { margin: 0; padding-left: 20px; color: var(--tekst-2); display: flex; flex-direction: column; gap: 6px; }
.pakke.moerk { background: var(--accent); color: var(--paa-accent); }
.pakke.moerk .pakke-intro { color: var(--moerk-tekst-2); }
.pakke.moerk ul { color: var(--moerk-tekst); }
.pris-note { margin: 24px 0 0; color: var(--tekst-3); }

.forside-kontakt { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px; padding-top: 72px; padding-bottom: 56px; }
.kontakt-tekst { max-width: 520px; }
.kontakt-tekst h2 { margin: 0 0 10px; font-size: 30px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.6; }
.kontakt-tekst p { margin: 0; color: var(--tekst-3); }
/* Telefonnummeret brydes aldrig midt i (smalle skærme). */
.tel-nummer { white-space: nowrap; }
.kontakt-links { display: flex; flex-direction: column; gap: 6px; font-size: 15px; }

/* Prototypen har ingen mobilregler for forsiden, log ind og kortet: samme skrift, luft og kort ved alle bredder. Kun menuens ombrydning er tilpasset. */
@media (max-width: 860px) {
  .offentlig-nav a.pille { margin-left: 0; }
  /* Sprogvælgeren ved siden af "Log ind" i stedet for på egen linje: menuens punkter og sprogvælgeren ombrydes som én række. */
  .offentlig-nav { display: contents; }
  .offentlig-forside .offentlig-top-hoejre { column-gap: 8px; }
}

/* ==== side-overblik ==== */
/* Overblik som i prototypen (skærm 3): hilsen og prøvefelt, to talkort og tre lige brede statusfelter, 36 px mellem sektionerne. */

.side-overblik .overblik { display: flex; flex-direction: column; gap: 36px; }
.side-overblik .overblik > .intet { margin: 0; }
.side-overblik .hilsen { display: flex; flex-direction: column; gap: 18px; }
/* Hilsenen er prototypens egen overskrift (34 px, linjehøjde 1,2) uden intro; afstanden til prøvefeltet er hilsenens 18 px. */
.side-overblik .hilsen .side-hoved { margin: 0; }
.side-overblik .hilsen h1 { margin: 0; font-size: 34px; letter-spacing: -0.025em; line-height: 1.2; }

.side-overblik .proevfelt { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 20px; border: 1px solid var(--felt-kant); border-radius: 22px; box-shadow: 0 6px 24px -14px rgba(22, 32, 28, .25); }
.side-overblik .proevfelt input { flex: 1 1 auto; min-width: 0; text-overflow: ellipsis; min-height: 48px; border: 0; background: transparent; font: inherit; font-size: 17px; color: var(--tekst); }
.side-overblik .proevfelt input:focus-visible { outline: none; }
.side-overblik .proevfelt:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.side-overblik .proevfelt input::placeholder { color: var(--daempet); }

/* Talkortene: titel og "Se indsigt", stort tal + enhed med den lille kurve til højre, og én linje med udviklingen og detaljen. Hele kortet kan klikkes som i prototypen
   (linket "Se indsigt" strækkes over kortet); låst eller med fejl har kortet intet link. */
.side-overblik .tal-kort-gitter { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 16px; }
.side-overblik .tal-kort-gitter .kort { position: relative; display: flex; flex-direction: column; gap: 14px; }
.side-overblik .tal-kort-gitter .kort + .kort { margin-top: 0; }
.side-overblik .tal-kort-gitter .kort:has(.talkort-link:hover) { border-color: var(--felt-kant); }
.side-overblik .talkort-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.side-overblik .tal-kort-gitter .kort h2 { margin: 0; font-size: 17px; }
.side-overblik .talkort-link { flex: 0 0 auto; font-size: 14px; font-weight: 600; color: var(--accent); text-decoration: none; }
.side-overblik .talkort-link::after { content: ""; position: absolute; inset: 0; border-radius: 20px; }
.side-overblik .talkort-link:focus-visible { outline: none; }
.side-overblik .talkort-link:focus-visible::after { outline: 2px solid var(--accent); outline-offset: 2px; }
.side-overblik .talkort-krop { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.side-overblik .talkort-krop .tal { margin: 0; font-size: 32px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.side-overblik .talkort-krop .enhed { margin: 2px 0 0; font-size: 14px; color: var(--daempet); }
.side-overblik .talkort-krop .graf-lille { max-width: 100%; }
.side-overblik .talkort-krop .graf-tom { font-size: 14px; text-align: right; }
.side-overblik .talkort-linje { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 14px; color: var(--tekst-2); }
.side-overblik .talkort-linje .udvikling.op { color: var(--stigning); font-weight: 600; }

/* "Det kunne Tilde ikke svare på": rammen med titel og "Se alle", forklaringen og de 3 største grupper (UdenSvarListe), som i prototypen. */
.side-overblik .overblik-uden-svar { display: flex; flex-direction: column; gap: 6px; padding-bottom: 10px; }
.side-overblik .overblik-uden-svar-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; }
.side-overblik .overblik-uden-svar h2 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.side-overblik .overblik-se-alle { font-size: 14px; font-weight: 600; }
.side-overblik .overblik-uden-svar-intro { margin: 0 0 8px; color: var(--daempet); }
.side-overblik .overblik-uden-svar .uden-svar-raekke { min-height: 56px; gap: 8px 16px; padding: 8px 0; }
.side-overblik .overblik-uden-svar .uden-svar-emne { flex-basis: 220px; }
.side-overblik .overblik-uden-svar .uden-svar-tom { padding-bottom: 12px; }
.side-overblik .overblik-uden-svar .analyse-vindue { margin: -8px 0 4px; }
.side-overblik .overblik-uden-svar .laast, .side-overblik .overblik-uden-svar .fejl { margin-bottom: 12px; }

/* Statusrækken: tre lige brede felter (under hinanden på mobil); en fed overskrift og teksten under. */
.side-overblik .overblik-status { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; font-size: 14px; color: var(--tekst-2); }
.side-overblik .status-kort { min-width: 0; padding: 16px 18px; border-radius: 16px; background: var(--flade); overflow-wrap: anywhere; }
.side-overblik .status-kort.advarsel { background: var(--advarsel-flade); }
.side-overblik .status-kort > strong { display: block; color: var(--tekst); }
.side-overblik .status-kort .laast, .side-overblik .status-kort .fejl { margin-top: 6px; }

/* ==== side-proev ==== */
/* Som prototypens "8 · Prøv": titel med kontrollerne til højre, samtalen, feltet nederst. Panelet (.proev) er en interaktiv ø med display: contents,
   så dets elementer lægger sig i sidens række ved siden af titlen (på smalle skærme under teksten). */

.side-proev .proev-side { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 28px 16px; }
.side-proev .proev-side > *, .side-proev .proev > * { flex: 1 1 100%; min-width: 0; }
.side-proev .proev { display: contents; }
.side-proev .proev-hoved { flex: 1 1 auto; }
.side-proev .proev-hoved .side-hoved { margin: 0; }
.side-proev .proev > .besked, .side-proev .proev > .fejl, .side-proev .proev-side > noscript .besked { margin: 0; }
.side-proev .proev-henter { margin: 0; color: var(--daempet); }

.side-proev .proev-valg { flex: 0 1 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.side-proev .proev-vaelger { min-height: 44px; max-width: 100%; padding: 0 12px; border: 1px solid var(--felt-kant); border-radius: 12px; background: var(--baggrund); font: inherit; color: var(--tekst); }
.side-proev .proev-vaelger[aria-invalid="true"] { border-color: var(--fejl); }
.side-proev .proev-hint { margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--flade-2); color: var(--tekst-2); font-size: 15px; }
.side-proev .proev > .felt-fejl { margin-top: -18px; }
.side-proev .log-ind-igen { font-weight: 600; }

.side-proev .samtale, .side-proev .tur { display: flex; flex-direction: column; gap: 22px; }
.side-proev .sporgsmaal { align-self: flex-end; max-width: 80%; padding: 12px 16px; border-radius: 18px 18px 4px 18px; background: var(--flade-2); overflow-wrap: anywhere; }
.side-proev .svar { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.side-proev .svar .chip { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 0 10px; line-height: 1.2; }
.side-proev .svar .chip::before { content: ""; flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--niveau-intet); }
.side-proev .svar .chip.niveau-fandt::before { background: var(--niveau-fandt); }
.side-proev .svar .chip.niveau-forsigtigt::before { background: var(--niveau-forsigtigt); }
.side-proev .svar .chip.niveau-login::before { background: var(--niveau-login); }
.side-proev .svar .chip.niveau-intet::before { background: var(--daempet); }
.side-proev .svar-tekst { margin: 0; font-size: 16px; line-height: 1.65; white-space: pre-line; overflow-wrap: anywhere; }
.side-proev .svar-intet { margin: 0; font-size: 16px; color: var(--daempet); }
.side-proev .kilder { display: grid; grid-template-columns: repeat(auto-fit, minmax(max(220px, calc((100% - 8px) / 2)), 1fr)); gap: 8px; }
.side-proev .kilde { display: block; min-width: 0; padding: 12px 14px; border: 1px solid var(--kant-2); border-radius: 12px; color: var(--tekst); text-decoration: none; overflow-wrap: anywhere; }
.side-proev a.kilde:hover { background: var(--flade); }
.side-proev .kilde-titel { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.side-proev .kilde-adresse { display: block; overflow: hidden; font-size: 13px; color: var(--daempet); white-space: nowrap; text-overflow: ellipsis; }
.side-proev .kilde.laast-kort { padding: 14px 16px; border-color: var(--laast-kant); background: var(--laast-flade); }
.side-proev a.kilde.laast-kort:hover { background: var(--laast-flade); border-color: var(--laast-tekst); }
.side-proev .kilde.laast-kort .ikon { flex: 0 0 13px; width: 13px; height: 13px; }
.side-proev .kilde-teaser { display: block; margin-top: 4px; font-size: 14px; color: var(--laast-tekst); }
.side-proev .kilde-krav { display: block; margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--laast-tekst); }

.side-proev .hvorfor { font-size: 14px; color: var(--tekst-2); }
.side-proev .hvorfor summary { min-height: 28px; color: var(--daempet); cursor: pointer; }
.side-proev .hvorfor dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 8px 0 0; }
.side-proev .hvorfor dt { color: var(--daempet); }
.side-proev .hvorfor dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 480px) {
  /* Smal skærm (review M4): etiket over værdi, så de lange forklaringer ikke presses ind i en smal kolonne. */
  .side-proev .hvorfor dl { grid-template-columns: 1fr; gap: 0; }
  .side-proev .hvorfor dd { margin-bottom: 8px; }
}
/* Prototypens grå boks under "Hvorfor dette svar?": FAQ'erne som folde-ud og nederst de brugte instruktioner (B2 Task 13). */
.side-proev .svar-ekstra { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin-top: 4px; padding: 16px 18px; border-radius: 14px; background: var(--flade); }
.side-proev .faq-overskrift { margin: 0; font-size: 14px; font-weight: 600; }
.side-proev .faq-fra { font-weight: 400; color: var(--daempet); }
.side-proev .svar-ekstra details.faq { padding-top: 8px; border-top: 1px solid var(--kant-2); }
.side-proev .svar-ekstra details.faq summary { min-height: 32px; font-weight: 600; cursor: pointer; overflow-wrap: anywhere; }
.side-proev .faq-svar { margin: 6px 0 4px; color: var(--tekst-2); white-space: pre-line; overflow-wrap: anywhere; }
.side-proev .brugt-instruktion { margin: 4px 0 0; font-size: 13px; color: var(--daempet); overflow-wrap: anywhere; }

.side-proev .proev-bund { display: flex; flex-direction: column; gap: 10px; }
.side-proev .proev-bund .felt { margin-bottom: 0; }
.side-proev .proev-bund .felt-fejl { padding: 0 20px; }
.side-proev .proev-tom { margin: 0; padding: 0 20px; font-size: 14px; color: var(--daempet); }
.side-proev .proev-form { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 20px; border: 1px solid var(--felt-kant); border-radius: 22px; box-shadow: 0 6px 24px -14px rgba(22, 32, 28, .25); }
.side-proev .proev-form:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.side-proev .proev-form input { flex: 1 1 auto; min-width: 0; min-height: 48px; padding: 0; border: 0; border-radius: 0; background: transparent; font-size: 16px; text-overflow: ellipsis; }
.side-proev .proev-form input:focus-visible { outline: none; }
.side-proev .proev-form input::placeholder { color: var(--daempet); }
.side-proev .proev-form .proev-knap:disabled { opacity: .55; cursor: progress; }
.side-proev .ny-samtale { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 0; border-radius: 12px; background: transparent; font: inherit; color: var(--tekst-2); cursor: pointer; }
.side-proev .ny-samtale .ny-ikon { display: none; }
.side-proev .ny-samtale:hover { background: var(--flade); }
@media (max-width: 860px) {
  /* Kontrollerne under teksten med prototypens 16 px luft. */
  .side-proev .proev-valg { margin-top: -12px; }
  /* Smal skærm: kun et plus (aria-label giver det fulde navn), så pladsholderen i feltet ikke klippes. */
  .side-proev .ny-samtale { min-width: 44px; padding: 0 10px; justify-content: center; }
  .side-proev .ny-samtale .ny-tekst { display: none; }
  .side-proev .ny-samtale .ny-ikon { display: block; }
}

/* ==== side-indhold ==== */
/* Indhold som i prototypen (skærm 9): søgefeltet og kategorien i én kompakt række (etiketter kun til skærmlæsere; "Vis" kun uden JavaScript). Listen og den valgte side
   står side om side (ListeOgPanel, B2 Task 9): over listen tælleren, én række pr. side (lås, titel fed og den korte adresse dæmpet under; den valgte på en grå flade),
   og panelet med titel, adresse, fakta i et gitter, medlemsboksen eller afsnittene, brugen og "Prøv et spørgsmål om siden". 22 px mellem blokkene. */

.side-indhold .filtre { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 22px; }
.side-indhold .in-soeg { flex: 1 1 260px; min-width: 0; min-height: 44px; box-sizing: border-box; padding: 0 14px; border: 1px solid var(--felt-kant); border-radius: 12px; background: var(--baggrund); color: var(--tekst); font: inherit; }
.side-indhold .in-soeg::placeholder { color: var(--daempet); }
.side-indhold .in-soeg[aria-invalid="true"] { border-color: var(--fejl); }
.side-indhold .in-soeg-fejl { flex: 1 1 100%; }
.side-indhold .filtre select { min-height: 44px; max-width: 100%; padding: 0 12px; border: 1px solid var(--felt-kant); border-radius: 12px; background: var(--baggrund); color: var(--tekst); font: inherit; }
.side-indhold .filtre .knap { min-height: 44px; }
.side-indhold .filtre .knap[hidden] { display: none; }
.side-indhold .filtre ~ .fejl { margin: 0 0 22px; }
.side-indhold .antal { margin: 0 0 8px; color: var(--daempet); font-size: 14px; overflow-wrap: anywhere; }
.side-indhold .indholdsliste { list-style: none; margin: 0 0 24px; padding: 0; border-top: 1px solid var(--linje); }
.side-indhold .indholdsraekke { border-bottom: 1px solid var(--linje); }
.side-indhold .indhold-link { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 14px 12px; border-radius: 12px; color: var(--tekst); text-decoration: none; }
.side-indhold .indhold-link:hover, .side-indhold .indhold-link[aria-current="true"] { background: var(--flade-2); }
.side-indhold .indhold-titel { display: flex; align-items: baseline; gap: 6px; min-width: 0; font-weight: 600; overflow-wrap: anywhere; word-break: break-word; }
.side-indhold .indhold-titel .titel { min-width: 0; }
.side-indhold .indhold-link .adresse { min-width: 0; font-size: 13px; color: var(--daempet); }
.side-indhold .laas-maerke { flex: 0 0 13px; display: inline-flex; align-self: center; color: var(--afventer); }
.side-indhold .laas-maerke .ikon { flex: 0 0 13px; width: 13px; height: 13px; stroke-width: 2.4; }

/* Panelet (B2 Task 9) som prototypens "9 · Indhold". */
.side-indhold .ind-ukendt { margin: 0; color: var(--daempet); }
.side-indhold .ind-hoved { display: flex; flex-direction: column; }
.side-indhold .ind-titel { margin: 0; font-size: 20px; font-weight: 600; }
.side-indhold .ind-adresse { font-size: 14px; }
.side-indhold span.ind-adresse { color: var(--daempet); }
.side-indhold .ind-fakta { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.side-indhold .ind-fakta dt { font-size: 13px; color: var(--daempet); }
.side-indhold .ind-fakta dd { margin: 2px 0 0; font-weight: 600; overflow-wrap: anywhere; }
.side-indhold .ind-medlem { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border-radius: 14px; background: var(--medlem-flade); }
.side-indhold .ind-medlem p { margin: 0; }
.side-indhold .ind-medlem-titel { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.side-indhold .ind-medlem-titel .ikon { flex: 0 0 14px; width: 14px; height: 14px; color: var(--afventer); stroke-width: 2.4; }
.side-indhold .ind-teaser { color: var(--medlem-tekst); font-size: 14px; }
.side-indhold .ind-medlem-note { color: var(--medlem-note); font-size: 13px; }
.side-indhold .ind-afsnit { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.side-indhold .ind-afsnit p { margin: 0; }
.side-indhold .ind-afsnit-titel { font-weight: 600; }
.side-indhold .ind-afsnit-antal { font-weight: 400; color: var(--daempet); }
.side-indhold .ind-afsnit-tekst { align-self: stretch; padding: 12px 14px; border-radius: 12px; background: var(--flade); color: var(--tekst-2); font-size: 14px; }
.side-indhold .ind-ingen-afsnit, .side-indhold .ind-flere { color: var(--daempet); font-size: 14px; }
.side-indhold .ind-vis-alle { font-size: 14px; font-weight: 600; }
.side-indhold .ind-brugt { margin: 0; font-size: 14px; color: var(--tekst-2); }
.side-indhold .ind-handlinger { display: flex; flex-wrap: wrap; gap: 8px; }
.side-indhold .ind-handlinger .knap { min-height: 40px; padding: 0 14px; font-size: 14px; }

/* ==== side-spoergsmaal ==== */
/* Spørgsmål og svar som i prototypen (skærm 7): søgefeltet i fuld bredde, derunder periode og udfald i én kompakt række (etiketter kun til skærmlæsere; "Vis" kun uden JavaScript).
   Listen og det valgte spørgsmål står side om side (ListeOgPanel, brugerens beslutning 3): én række pr. spørgsmål (spørgsmålet fed, svaret på én linje, under det niveau, test,
   kanal og tid) med sidetal i bunden, og panelet med detaljen opbygget som prototypens "9 · Indhold". 24 px mellem blokkene. */

.side-spoergsmaal .filtre { display: flex; flex-direction: column; gap: 14px; margin: 0 0 24px; }
.side-spoergsmaal .sp-soeg { width: 100%; min-height: 46px; padding: 0 16px; border: 1px solid var(--felt-kant); border-radius: 12px; background: var(--baggrund); color: var(--tekst); font: inherit; font-size: 16px; }
.side-spoergsmaal .sp-soeg::placeholder { color: var(--daempet); }
.side-spoergsmaal .sp-soeg[aria-invalid="true"] { border-color: var(--fejl); }
/* Prototypens 10 px mellem søgefeltet og rækken (resten af formularen har 14 px). */
.side-spoergsmaal .sp-soeg + .sp-filterraekke, .side-spoergsmaal .sp-soeg-fejl + .sp-filterraekke { margin-top: -4px; }
.side-spoergsmaal .sp-soeg-fejl { margin-top: -6px; }
.side-spoergsmaal .sp-filterraekke { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.side-spoergsmaal .sp-filterraekke select { min-height: 44px; max-width: 100%; padding: 0 12px; border: 1px solid var(--felt-kant); border-radius: 12px; background: var(--baggrund); color: var(--tekst); font: inherit; }
.side-spoergsmaal .filtre .knap { min-height: 44px; }
.side-spoergsmaal .filtre .knap[hidden] { display: none; }
.side-spoergsmaal .udfald-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.side-spoergsmaal .filter-chip { display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px; border: 1px solid var(--felt-kant); border-radius: 999px; background: var(--baggrund); color: var(--tekst-2); font: inherit; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; }
.side-spoergsmaal .filter-chip:hover { background: var(--flade); }
.side-spoergsmaal .filter-chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--paa-accent); }
.side-spoergsmaal .sp-datoer { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 20px; }
.side-spoergsmaal .sp-datoer .felt { flex: 0 1 240px; min-width: 0; margin: 0; }
.side-spoergsmaal .sp-datoer .felt input { max-width: 100%; }
.side-spoergsmaal .sp-datoer .knap { margin-top: 29px; }
.side-spoergsmaal .filtre ~ .besked { margin: 0 0 24px; }
.side-spoergsmaal .filtre ~ .fejl { margin: 0 0 24px; }

.side-spoergsmaal .spoergsmaalsliste { list-style: none; margin: 0 0 24px; padding: 0; border-top: 1px solid var(--linje); }
.side-spoergsmaal .spoergsmaalsraekke { border-bottom: 1px solid var(--linje); }
/* Hele rækken er et link (vælger spørgsmålet i panelet); den valgte står på en grå flade som den valgte side i prototypens "9 · Indhold". */
.side-spoergsmaal .sp-raekke { display: flex; flex-wrap: wrap; gap: 6px 20px; padding: 14px 12px; border-radius: 12px; color: var(--tekst); text-decoration: none; }
.side-spoergsmaal .sp-raekke:hover, .side-spoergsmaal .sp-raekke[aria-current="true"] { background: var(--flade-2); }
.side-spoergsmaal .sp-tekst { display: flex; flex-direction: column; flex: 1 1 100%; min-width: 0; }
.side-spoergsmaal .sp-tekst .spoergsmaal { font-weight: 600; }
.side-spoergsmaal .sp-tekst .svar-uddrag { margin-top: 2px; color: var(--daempet); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-spoergsmaal .sp-meta { flex: 1 1 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; min-width: 0; font-size: 13px; color: var(--daempet); }
/* Niveau-mærket med farvet prik, som på Prøv (også i panelet). */
.side-spoergsmaal .chip { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 0 10px; font-size: 13px; line-height: 1.2; }
.side-spoergsmaal .chip::before { content: ""; flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--daempet); }
.side-spoergsmaal .chip.niveau-fandt::before { background: var(--niveau-fandt); }
.side-spoergsmaal .chip.niveau-forsigtigt::before { background: var(--niveau-forsigtigt); }
.side-spoergsmaal .chip.niveau-login::before { background: var(--niveau-login); }
.side-spoergsmaal .test-maerke, .side-spoergsmaal .spd-test { display: inline-flex; align-items: center; min-height: 26px; padding: 0 8px; border: 1px dashed var(--knap-kant); border-radius: 8px; color: var(--tekst-2); font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.side-spoergsmaal .sp-fodnote { margin: 16px 0 0; }

/* Panelet: spørgsmålet som overskrift, svaret, fakta i et gitter som prototypens "9 · Indhold", kilder som kort, brugte instruktioner og "Prøv igen". */
.side-spoergsmaal .spd-ukendt { margin: 0; color: var(--daempet); }
.side-spoergsmaal .spd-hoved { display: flex; flex-direction: column; gap: 10px; }
.side-spoergsmaal .spd-maerker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.side-spoergsmaal .spd-spoergsmaal { margin: 0; font-size: 20px; font-weight: 600; }
.side-spoergsmaal .spd-svar { margin: 0; font-size: 15px; line-height: 1.6; white-space: pre-line; }
.side-spoergsmaal .spd-svar-tomt { color: var(--daempet); }
.side-spoergsmaal .spd-fakta { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.side-spoergsmaal .spd-fakta dt { font-size: 13px; color: var(--daempet); }
.side-spoergsmaal .spd-fakta dd { margin: 2px 0 0; font-weight: 600; }
/* "0,74 (godt svar fra 0,55)" brydes ikke midt i formen: feltet får hele rækken (review M2). */
.side-spoergsmaal .spd-fakta .spd-bred { grid-column: 1 / -1; }
.side-spoergsmaal .spd-afsnit { display: flex; flex-direction: column; gap: 10px; }
.side-spoergsmaal .spd-afsnit h3 { margin: 0; font-size: 15px; font-weight: 600; }
.side-spoergsmaal .spd-kilder { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.side-spoergsmaal .spd-kilde, .side-spoergsmaal .spd-faq { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; padding: 12px 14px; border-radius: 12px; background: var(--flade); color: var(--tekst-2); font-size: 14px; text-decoration: none; overflow-wrap: anywhere; }
.side-spoergsmaal a.spd-kilde:hover { background: var(--flade-2); }
.side-spoergsmaal .spd-kilde .ikon { flex: 0 0 13px; width: 13px; height: 13px; color: var(--afventer); }
.side-spoergsmaal .spd-adresse { min-width: 0; }
.side-spoergsmaal a.spd-kilde .spd-adresse { color: var(--accent); text-decoration: underline; }
.side-spoergsmaal .spd-kraever { font-size: 13px; font-weight: 600; color: var(--laast-tekst); }
.side-spoergsmaal .spd-faq { flex-direction: column; align-items: flex-start; gap: 2px; }
.side-spoergsmaal .spd-faq-fra { font-size: 13px; color: var(--daempet); }
.side-spoergsmaal .spd-faq-spoergsmaal { font-weight: 600; color: var(--tekst); }
.side-spoergsmaal .spd-instruktioner { margin: 0; font-size: 14px; color: var(--tekst-2); overflow-wrap: anywhere; }
.side-spoergsmaal .spd-etiket { color: var(--daempet); }
.side-spoergsmaal .spd-handlinger { display: flex; flex-wrap: wrap; gap: 8px; }
.side-spoergsmaal .spd-handlinger .knap { min-height: 40px; padding: 0 14px; font-size: 14px; }
.side-spoergsmaal .spd-hjaelp { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 1px solid var(--felt-kant); border-radius: 12px; font-size: 14px; font-weight: 600; color: var(--tekst-2); text-decoration: none; }
/* "Få hjælp" (C2 Task 7) som prototypens lille knap med mærket "Pro" i rækken: ved siden af rækkens link (aldrig inde i det), nederst til højre ved metadata. Låst (pakken mangler Pro):
   lås, samme mærke og link til Pakke og indstillinger; ikke i aftalen: kun låsen uden link. */
.side-spoergsmaal .spoergsmaalsraekke:has(.sp-hjaelp) { display: flex; align-items: flex-end; gap: 0 8px; }
.side-spoergsmaal .spoergsmaalsraekke:has(.sp-hjaelp) .sp-raekke { flex: 1 1 0; min-width: 0; }
.side-spoergsmaal .sp-hjaelp { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 34px; margin: 0 4px 10px 0; padding: 0 10px; border: 1px solid var(--felt-kant); border-radius: 10px; background: var(--baggrund); font-size: 13px; font-weight: 600; color: var(--tekst-2); text-decoration: none; white-space: nowrap; }
.side-spoergsmaal a.sp-hjaelp:hover, .side-spoergsmaal a.spd-hjaelp:hover { background: var(--flade); }
.side-spoergsmaal a.sp-hjaelp:focus-visible, .side-spoergsmaal a.spd-hjaelp:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.side-spoergsmaal .sp-hjaelp .pakke-maerke, .side-spoergsmaal .spd-hjaelp .pakke-maerke { padding: 1px 7px; }
.side-spoergsmaal .laast-hjaelp .ikon { flex: 0 0 13px; width: 13px; height: 13px; }
/* Markeringen af den valgte række (og hover) dækker også knappen (review M3): fladen ligger på rækken, når den har "Få hjælp". */
.side-spoergsmaal .spoergsmaalsraekke:has(.sp-hjaelp) { border-radius: 12px; }
.side-spoergsmaal .spoergsmaalsraekke:has(.sp-raekke:hover), .side-spoergsmaal .spoergsmaalsraekke:has(.sp-raekke[aria-current="true"]) { background: var(--flade-2); }
/* Smal skærm (review M3, som prototypen): knappen står under rækken, venstrestillet ved teksten, så spørgsmål og svar beholder hele bredden. */
@media (max-width: 860px) {
  .side-spoergsmaal .spoergsmaalsraekke:has(.sp-hjaelp) { flex-wrap: wrap; align-items: flex-start; }
  .side-spoergsmaal .spoergsmaalsraekke:has(.sp-hjaelp) .sp-raekke { flex: 1 1 100%; }
  .side-spoergsmaal .sp-hjaelp { margin: -6px 0 12px 12px; }
}
@media (max-width: 860px) {
  .side-spoergsmaal .sp-datoer .felt { flex: 1 1 100%; }
  .side-spoergsmaal .sp-datoer .knap { margin-top: 0; }
}

/* ==== side-spoergsmaal-hjaelp ==== */
/* Hjælp til ét spørgsmål (C2 Task 7) som prototypens "7b": tilbage-linket, spørgsmålet som overskrift med etiketten og mærket "Pro" over og mærkerne under, "Det fik den besøgende
   at vide" i en blød boks, forklaringen med assistent-ikonet og assistentens svar (forslag, udkast, grundlag), linkene adskilt af en tynd linje og noten. 26 px mellem delene. */
.side-spoergsmaal-hjaelp .hj-side { display: flex; flex-direction: column; gap: 26px; min-width: 0; }
.side-spoergsmaal-hjaelp .hj-tilbage { display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; min-height: 40px; font-size: 14px; font-weight: 600; text-decoration: none; }
.side-spoergsmaal-hjaelp .hj-tilbage:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.side-spoergsmaal-hjaelp .hj-titel { margin: 0; font-size: 30px; line-height: 1.25; font-weight: 600; letter-spacing: -0.02em; }
.side-spoergsmaal-hjaelp .hj-hoved { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.side-spoergsmaal-hjaelp .hj-etiket-raekke { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; }
.side-spoergsmaal-hjaelp .hj-etiket { margin: 0; font-size: 13px; font-weight: 600; color: var(--daempet); }
.side-spoergsmaal-hjaelp .hj-etiket-raekke .pakke-maerke { font-size: 12px; }
.side-spoergsmaal-hjaelp .hj-spoergsmaal { margin: 0; font-size: 28px; line-height: 1.25; font-weight: 600; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.side-spoergsmaal-hjaelp .hj-spoergsmaal bdi, .side-spoergsmaal-hjaelp .hj-fik bdi, .side-spoergsmaal-hjaelp .hj-hvorfor-tekst bdi, .side-spoergsmaal-hjaelp .hj-eksempler bdi { unicode-bidi: isolate; }
.side-spoergsmaal-hjaelp .hj-maerker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: 14px; color: var(--daempet); }
.side-spoergsmaal-hjaelp .chip { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 0 10px; font-size: 14px; line-height: 1.2; }
.side-spoergsmaal-hjaelp .chip::before { content: ""; flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--daempet); }
.side-spoergsmaal-hjaelp .chip.niveau-fandt::before { background: var(--niveau-fandt); }
.side-spoergsmaal-hjaelp .chip.niveau-forsigtigt::before { background: var(--niveau-forsigtigt); }
.side-spoergsmaal-hjaelp .chip.niveau-login::before { background: var(--niveau-login); }
.side-spoergsmaal-hjaelp .hj-ukendt, .side-spoergsmaal-hjaelp .hj-kun-forsigtige, .side-spoergsmaal-hjaelp .hj-budget, .side-spoergsmaal-hjaelp .hj-ikke-daekket { margin: 0; color: var(--tekst-2); }
.side-spoergsmaal-hjaelp .hj-side > .pause-linje, .side-spoergsmaal-hjaelp .hj-side > .intet { margin: 0; }
.side-spoergsmaal-hjaelp .hj-handling, .side-spoergsmaal-hjaelp .hj-resultat { display: flex; flex-direction: column; gap: 26px; min-width: 0; }
.side-spoergsmaal-hjaelp .hj-handling { gap: 14px; }
.side-spoergsmaal-hjaelp .hj-handling:focus, .side-spoergsmaal-hjaelp .hj-resultat:focus { outline: none; }
.side-spoergsmaal-hjaelp .hj-intro, .side-spoergsmaal-hjaelp .hj-afvist, .side-spoergsmaal-hjaelp .assistent-skriver { margin: 0; color: var(--tekst-2); }
.side-spoergsmaal-hjaelp .hj-form { margin: 0; }
.side-spoergsmaal-hjaelp .hj-fik { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border-radius: 16px; background: var(--flade); }
.side-spoergsmaal-hjaelp .hj-fik h2 { margin: 0; font-size: 15px; font-weight: 600; color: var(--tekst-2); }
.side-spoergsmaal-hjaelp .hj-fik p { margin: 0; color: var(--tekst-2); white-space: pre-line; overflow-wrap: anywhere; }
.side-spoergsmaal-hjaelp .hj-hvorfor { display: flex; gap: 14px; min-width: 0; }
.side-spoergsmaal-hjaelp .hj-hvorfor > .ikon { flex: 0 0 22px; width: 22px; height: 22px; margin-top: 3px; color: var(--accent); }
.side-spoergsmaal-hjaelp .hj-hvorfor-indhold { display: flex; flex: 1 1 auto; flex-direction: column; gap: 14px; min-width: 0; }
.side-spoergsmaal-hjaelp .hj-hvorfor h2 { margin: 0; font-size: 20px; font-weight: 600; }
.side-spoergsmaal-hjaelp .hj-hvorfor-tekst { margin: 0; font-size: 16px; line-height: 1.7; white-space: pre-line; overflow-wrap: anywhere; }
.side-spoergsmaal-hjaelp .grundlag-liste li.hj-eksempler, .side-spoergsmaal-hjaelp .grundlag-liste li.hj-grundlag-match { overflow-wrap: anywhere; }
.side-spoergsmaal-hjaelp .hj-links { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 8px; border-top: 1px solid var(--linje); }
.side-spoergsmaal-hjaelp .hj-links .knap { min-height: 44px; }
.side-spoergsmaal-hjaelp .hj-note, .side-spoergsmaal-hjaelp .assistent-side-fodnote { margin: -14px 0 0; font-size: 13px; color: var(--daempet); }
.side-spoergsmaal-hjaelp .hj-note + .assistent-side-fodnote { margin-top: -20px; }

/* ==== side-kategorier ==== */

.side-kategorier .pro-banner { margin: 0 0 20px; }
/* Lås-boksen som prototypen: grå flade uden kant, lås og en 14 px tekst, der slutter med "Se jeres pakke". */
.side-kategorier .kat-laas { display: flex; gap: 12px; align-items: flex-start; padding: 14px 18px; border-radius: 14px; background: var(--flade); color: var(--tekst-2); }
.side-kategorier .kat-laas .ikon { flex: 0 0 16px; width: 16px; height: 16px; margin-top: 3px; }
.side-kategorier .kat-laas p { margin: 0; font-size: 14px; color: var(--tekst-2); }
.side-kategorier .faner { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 20px; border-bottom: 1px solid var(--linje); }
.side-kategorier .faner a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-bottom: 2px solid transparent; color: var(--daempet); font-weight: 600; text-decoration: none; }
.side-kategorier .faner a:hover { color: var(--tekst); }
.side-kategorier .faner a[aria-current="page"] { color: var(--tekst); border-bottom-color: var(--accent); }
.side-kategorier .fane-intro { margin: 0 0 16px; color: var(--daempet); font-size: 14px; }
.side-kategorier .faner ~ .fejl { margin-bottom: 16px; }

.side-kategorier .kat-ny { margin: 0 0 20px; padding: 20px; border: 1px solid var(--kant); border-radius: 18px; }
.side-kategorier .kat-ny h2 { margin: 0 0 12px; font-size: 17px; }
.side-kategorier .tilfoej-form, .side-kategorier .navn-form { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 20px; margin: 0 0 20px; }
.side-kategorier .kat-ny .tilfoej-form { margin-bottom: 0; }
.side-kategorier .tilfoej-form .felt, .side-kategorier .navn-form .felt { flex: 1 1 240px; margin-bottom: 0; }
.side-kategorier .tilfoej-form .knap, .side-kategorier .navn-form .knap { margin-top: 29px; }
.side-kategorier .navn-form { margin: 0; }

.side-kategorier .kat-liste { border-top: 1px solid var(--linje); border-bottom: 1px solid var(--linje); }
/* Direkte under fanerne (ingen formular imellem): ingen ekstra linje over første række, som prototypen (fanernes linje er nok). */
.side-kategorier .faner + .kat-liste { border-top: 0; }
.side-kategorier .kat-liste > .kat-raekke, .side-kategorier .regel-liste > .regel-raekke { padding: 14px 4px; align-items: center; justify-content: flex-start; gap: 8px 20px; }
.side-kategorier .kat-navn { flex: 1 1 260px; min-width: 0; }
.side-kategorier .kat-navn p { margin: 0; }
.side-kategorier .kat-navn .navn { font-weight: 600; }
.side-kategorier .kat-navn .navn .andet { font-weight: 400; color: var(--daempet); }
.side-kategorier .kat-navn .noegle { font-size: 13px; color: var(--daempet); }
.side-kategorier .chip.mangler { background: var(--niveau-forsigtigt-flade); color: var(--niveau-forsigtigt-tekst); }
.side-kategorier .kat-antal { flex: 0 0 110px; text-align: right; font-size: 14px; color: var(--daempet); }
.side-kategorier .kat-handlinger { flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; }
.side-kategorier .kat-handlinger:has(.bekraeft) { flex: 1 1 100%; }
.side-kategorier .kat-handlinger .bekraeft { flex: 1 1 100%; }
.side-kategorier .kat-ret { flex: 1 1 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px 20px; padding: 14px 16px; border-radius: 14px; background: var(--flade); }

.side-kategorier .regel-liste { border-top: 1px solid var(--linje); }
.side-kategorier .regel-fra, .side-kategorier .regel-til { flex: 1 1 200px; min-width: 0; }
.side-kategorier .regel-til { font-weight: 600; }
.side-kategorier .regel-mellem { color: var(--daempet); }
.side-kategorier .regel-fra.moenster { font-family: ui-monospace, Consolas, monospace; font-size: 14px; }

.side-kategorier .ukendte { margin: 24px 0 0; padding: 20px; border: 1px solid var(--laast-kant); border-radius: 18px; background: var(--advarsel-flade); }
.side-kategorier .ukendte h2 { margin: 0 0 8px; font-size: 17px; }
.side-kategorier .ukendte p { margin: 0; font-size: 14px; color: var(--laast-tekst); }
.side-kategorier .tag-liste { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.side-kategorier .tag { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-height: 36px; padding: 2px 12px; border: 1px solid var(--laast-kant); border-radius: 999px; background: var(--baggrund); font-size: 14px; }
.side-kategorier .tag-antal { font-size: 12px; color: var(--laast-tekst); }
.side-kategorier .tag-form { margin: 0; }
.side-kategorier .tag .knap { min-height: 32px; padding: 0 12px; font-size: 13px; }

@media (max-width: 860px) {
  .side-kategorier .kat-antal { flex: 1 1 100%; text-align: left; }
  .side-kategorier .tilfoej-form .knap, .side-kategorier .navn-form .knap { margin-top: 0; }
}

/* ---- Formularfelter og valg (delt af Svar og beskeder, Domæner, Kategorier og Pakke og indstillinger) ---- */

.rolle-hint { margin: 0 0 20px; font-size: 14px; }
.frisk-vaerdi { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.felt textarea { resize: vertical; line-height: 1.5; }
.felt textarea[readonly], .felt input[readonly] { background: var(--flade); }

.valg-gruppe { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.valg-gruppe legend { padding: 0; margin-bottom: 6px; font-size: 14px; font-weight: 600; }
.valg { align-self: flex-start; display: flex; flex-wrap: wrap; padding: 3px; border-radius: 12px; background: var(--flade-2); }
.valg label { position: relative; display: inline-flex; }
.valg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.valg span { display: inline-flex; align-items: center; min-height: 38px; padding: 0 16px; border-radius: 9px; font-weight: 600; color: var(--tekst); }
.valg label:has(input:checked) span { background: var(--baggrund); box-shadow: 0 1px 3px rgba(22, 32, 28, .15); }
.valg label:has(input:focus-visible) span { outline: 2px solid var(--accent); outline-offset: 2px; }
.valg label:has(input:disabled) span { color: var(--daempet); }
.valg label:has(input:disabled) input { cursor: not-allowed; }
.valg-gruppe.har-fejl .valg { outline: 2px solid var(--fejl); }

/* En knap uden flade ("Fortryd" som i prototypen). */
.tekstknap { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border-radius: 12px; color: var(--tekst-2); text-decoration: none; }
.tekstknap:hover { background: var(--flade); color: var(--tekst); }

/* ==== side-svar-og-beskeder ==== */
/* Svar og beskeder som i prototypen (skærm 11), men uden site-vælger (sitet vælges i menuen, brugerens beslutning 2026-10-22): de faste beskeder i tre grupper med dansk og engelsk
   side om side, svarstilen med en grå note, samtalehukommelsen med et lille talfelt, en grå boks med grænserne og bunden med "Gem ændringer" og "Fortryd". 44 px mellem afsnittene. */

.side-svar-og-beskeder .side-hoved { margin-bottom: 44px; }
.side-svar-og-beskeder .beskeder-form { margin: 0; }
.side-svar-og-beskeder .beskeder-indhold { display: flex; flex-direction: column; gap: 44px; }
.side-svar-og-beskeder .beskeder-indhold h2 { margin: 0; font-size: 20px; font-weight: 600; }
.side-svar-og-beskeder .beskeder-indhold h3 { margin: 0; font-size: 16px; font-weight: 600; }
.side-svar-og-beskeder .besked-sektion { display: flex; flex-direction: column; gap: 28px; }
.side-svar-og-beskeder .site-laas { margin: 0; }

.side-svar-og-beskeder .besked-gruppe { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.side-svar-og-beskeder .besked-gruppe legend { padding: 0; margin-bottom: 4px; font-size: 16px; font-weight: 600; }
.side-svar-og-beskeder .gruppe-hjaelp { margin-top: -4px; font-size: 14px; }
.side-svar-og-beskeder .sprog-par { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px; }
.side-svar-og-beskeder .sprog-par .felt { margin-bottom: 0; min-width: 0; }
.side-svar-og-beskeder .sprog-par .felt label { font-size: 13px; font-weight: 400; color: var(--daempet); }
.side-svar-og-beskeder .sprog-par textarea { padding: 12px 14px; }
.side-svar-og-beskeder .brug-standard-linje { margin: -8px 0 0; font-size: 14px; }
.side-svar-og-beskeder .brug-standard-hjaelp { margin: 4px 0 0; }

.side-svar-og-beskeder .stil-sektion { display: flex; flex-direction: column; gap: 18px; }
.side-svar-og-beskeder .stil-intro { margin: 4px 0 0; font-size: 14px; }
/* Svarstilen som fri tekst (B2 Task 10): feltet, "Tilføj:" med forslagene som små piller og tælleren til højre, som i prototypen. */
.side-svar-og-beskeder .svarstil-blok { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; border-top: 1px solid var(--linje); min-width: 0; }
.side-svar-og-beskeder .svarstil-blok .felt { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.side-svar-og-beskeder .svarstil-blok .felt label { font-weight: 600; }
.side-svar-og-beskeder .svarstil-blok textarea { padding: 12px 14px; }
.side-svar-og-beskeder .svarstil-blok h3 { font-size: 15px; }
.side-svar-og-beskeder .svarstil-tekst { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--tekst-2); }
.side-svar-og-beskeder .svarstil-linje { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.side-svar-og-beskeder .svarstil-forslag { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; flex: 1 1 auto; min-width: 0; }
.side-svar-og-beskeder .svarstil-forslag .tilfoej { font-size: 13px; color: var(--daempet); }
.side-svar-og-beskeder .forslag { min-height: 32px; padding: 0 12px; border: 1px solid var(--kant-2); border-radius: 999px; background: var(--baggrund); font: inherit; font-size: 13px; color: var(--tekst-2); cursor: pointer; }
.side-svar-og-beskeder .forslag:hover { background: var(--flade); color: var(--tekst); }
.side-svar-og-beskeder .forslag:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.side-svar-og-beskeder .taeller { margin-left: auto; font-size: 13px; color: var(--daempet); white-space: nowrap; }
.side-svar-og-beskeder .taeller.for-lang { color: var(--fejl); font-weight: 600; }
/* Standardknappen (Enter gemmer): findes i formularen, men ses ikke og nås ikke med tastatur eller skærmlæser. */
.side-svar-og-beskeder .standardknap { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.side-svar-og-beskeder .stil-note { margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--flade); color: var(--tekst-2); font-size: 14px; }

.side-svar-og-beskeder .hukommelse { display: flex; flex-direction: column; gap: 10px; }
.side-svar-og-beskeder .hukommelse .felt { margin: 0; }
.side-svar-og-beskeder .hukommelse .felt label { font-size: 14px; font-weight: 400; color: var(--daempet); }
.side-svar-og-beskeder .minutter { display: flex; align-items: center; gap: 10px; }
.side-svar-og-beskeder .minutter input { width: 110px; }

.side-svar-og-beskeder .graenser { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border-radius: 16px; background: var(--flade); }
.side-svar-og-beskeder .graenser h2 { display: flex; align-items: center; gap: 8px; font-size: 16px; }
.side-svar-og-beskeder .graenser h2 .ikon { flex: 0 0 14px; width: 14px; height: 14px; color: var(--tekst-2); }
.side-svar-og-beskeder .graenser p { margin: 0; font-size: 14px; color: var(--tekst-2); }

.side-svar-og-beskeder .beskeder-handlinger { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-top: 20px; border-top: 1px solid var(--linje); }
.side-svar-og-beskeder .beskeder-handlinger .knap { min-height: 48px; padding: 0 24px; border-radius: 14px; }
.side-svar-og-beskeder .beskeder-handlinger .tekstknap { min-height: 48px; border-radius: 14px; }

/* ==== side-domaener ==== */

.side-domaener .domaener { display: flex; flex-direction: column; gap: 28px; }
.side-domaener .domaene { border: 1px solid var(--kant-2); border-radius: 20px; padding: 24px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.side-domaener .domaene-hoved { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px; }
.side-domaener .domaene-navn { min-width: 0; flex: 1 1 260px; }
.side-domaener .domaene h2 { margin: 0; font-size: 19px; font-weight: 600; overflow-wrap: anywhere; }
.side-domaener .domaene .start { margin: 2px 0 0; color: var(--daempet); font-size: 14px; overflow-wrap: anywhere; }
.side-domaener .status { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 600; }
.side-domaener .status .prik { width: 7px; height: 7px; border-radius: 50%; }
.side-domaener .status.aktiv { background: var(--niveau-fandt-flade); color: var(--niveau-fandt-tekst); }
.side-domaener .status.aktiv .prik { background: var(--niveau-fandt); }
.side-domaener .status.inaktiv { background: var(--niveau-intet-flade); color: var(--niveau-intet-tekst); }
.side-domaener .status.inaktiv .prik { background: var(--daempet); }
.side-domaener .domaene .inaktiv-tekst { margin: 0; font-size: 14px; color: var(--daempet); }
.side-domaener .fra-cms { margin: 0; font-size: 14px; color: var(--daempet); }
/* Et domæne, der ikke læses automatisk: kompakt kort som prototypens CMS-kort (14 px mellem hovedet og teksten). */
.side-domaener .domaene.ikke-automatisk { gap: 14px; }
.side-domaener .fakta { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.side-domaener .fakta dt { font-size: 13px; color: var(--daempet); }
.side-domaener .fakta dd { margin: 2px 0 0; font-weight: 600; overflow-wrap: anywhere; }
.side-domaener .domaene > .besked, .side-domaener .domaene > .fejl { margin: 0; }
.side-domaener .domaene-handlinger { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.side-domaener .laes-nu-form { margin: 0; }
.side-domaener .laes-nu-hint { font-size: 14px; color: var(--daempet); }
.side-domaener .plan-form { margin: 0; padding: 18px; border-radius: 16px; background: var(--flade); display: flex; flex-direction: column; gap: 14px; }
.side-domaener .plan-form .felt { margin-bottom: 0; }
.side-domaener .plan-form .felt select { align-self: flex-start; min-width: 140px; }
.side-domaener .plan-valg legend { font-size: 15px; }
.side-domaener .plan-valg .valg { background: var(--baggrund); border: 1px solid var(--felt-kant); }
.side-domaener .plan-valg .valg span { gap: 8px; }
.side-domaener .plan-valg small.ikke-i-aftalen { font-weight: 500; font-size: 12px; }
.side-domaener .plan-handlinger { display: flex; flex-wrap: wrap; gap: 8px; }
.side-domaener .domaene-laas { margin: 0 0 20px; }
.side-domaener .domaene-note { margin: 28px 0 0; font-size: 14px; color: var(--daempet); }
.side-domaener .domaener ~ .domaene-note { margin-top: 28px; }
.side-domaener .plan-valg .valg span.pakke-maerke, .side-domaener .plan-valg .valg label:has(input:disabled) span.pakke-maerke { min-height: 0; padding: 2px 9px; border-radius: 999px; color: var(--paa-accent); }

/* ---- Ændringer: hver ændring som en sætning (delt af Handlingslog og Pakke og indstillinger) ---- */
/* Handlingslog: klokkeslæt, sætning (og gammel → ny værdi under) og person, som i prototypen (skærm 14). Kompakt (skærm 15): sætning, person og tid til højre. */

.hl-liste { list-style: none; margin: 0; padding: 0; }
.hl-post { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 4px 16px; padding: 14px 0; border-bottom: 1px solid var(--linje); }
.hl-tid { flex: 0 0 52px; font-size: 14px; color: var(--daempet); }
.hl-indhold { flex: 1 1 360px; min-width: 0; }
.hl-hvad { margin: 0; }
.hl-site { color: var(--daempet); }
/* Lange værdier: højst to linjer med "…" (hele teksten står i title). */
.hl-fratil { margin: 2px 0 0; font-size: 14px; color: var(--daempet); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.hl-hvem { flex: 0 1 240px; min-width: 0; font-size: 14px; color: var(--tekst-2); }
.hl-kompakt { gap: 4px 20px; padding: 12px 0; }
.hl-kompakt .hl-hvad { flex: 1 1 280px; min-width: 0; }
.hl-kompakt .hl-hvem { flex: 0 1 260px; }
.hl-kompakt .hl-tid { flex: 0 0 110px; text-align: right; }

/* ==== side-pakke ==== */
/* Pakke og indstillinger som i prototypen (skærm 15): "I har Plus" med "Spørg om Pro" til højre, funktionerne i fire kolonner (to på mobil) med flueben eller lås,
   den grå boks med grænserne, forbruget som to måleskalaer side om side (farven sidder på skalaen og procenten), kunden og ændringerne. 44 px mellem afsnittene. */

.side-pakke .pakke-side { display: flex; flex-direction: column; gap: 44px; }
.side-pakke .pakke-side section > h2 { margin: 0; font-size: 20px; font-weight: 600; }
.side-pakke .pakke-hoved { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 16px; }
.side-pakke .spoerg-pro { font-size: 14px; font-weight: 600; }
.side-pakke .funktioner { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 24px; }
.side-pakke .funktion { display: flex; flex-wrap: nowrap; align-items: center; gap: 10px; min-width: 0; }
.side-pakke .funktion .ikon { flex: 0 0 16px; width: 16px; height: 16px; stroke-width: 2.4; }
.side-pakke .funktion.har .ikon { color: var(--niveau-fandt); }
.side-pakke .funktion.laast-funktion { color: var(--daempet); }
.side-pakke .funktion.laast-funktion .ikon { color: var(--daempet); stroke-width: 2.4; }
.side-pakke .funktion-indhold { min-width: 0; flex: 1 1 auto; overflow-wrap: anywhere; }
.side-pakke .pakke-laas { margin: 0 0 18px; }
.side-pakke .graenser { margin: 4px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; padding: 18px 20px; border-radius: 16px; background: var(--flade); }
.side-pakke .graenser > div { min-width: 0; }
.side-pakke .graenser dt { font-size: 13px; color: var(--daempet); }
.side-pakke .graenser dd { margin: 2px 0 0; font-weight: 600; overflow-wrap: anywhere; }

.side-pakke .pakke-side section.forbrug > h2 { margin-bottom: 16px; }
.side-pakke .maalere { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.side-pakke .maaler { min-width: 0; }
.side-pakke .maaler-top { display: flex; justify-content: space-between; gap: 8px; font-weight: 600; }
.side-pakke .maaler.advarsel .maaler-procent { color: var(--maaler-advarsel-tekst); }
.side-pakke .maaler.naaet .maaler-procent { color: var(--fejl); }
.side-pakke .maaler-bar { margin: 8px 0; height: 8px; border-radius: 999px; background: var(--linje); overflow: hidden; }
.side-pakke .maaler-fyld { height: 100%; border-radius: 999px; background: var(--niveau-fandt); }
.side-pakke .maaler.advarsel .maaler-fyld { background: var(--maaler-advarsel); }
.side-pakke .maaler.naaet .maaler-fyld { background: var(--fejl); }
.side-pakke .maaler p { margin: 0; font-size: 14px; color: var(--daempet); }
.side-pakke .forbrug-forklaring { margin: 16px 0 0; font-size: 14px; }

.side-pakke .pakke-side section.kunde > h2 { margin-bottom: 16px; }
.side-pakke .kunde-form { display: flex; flex-direction: column; }
.side-pakke .kunde-indhold .felt:last-of-type { margin-bottom: 0; }
.side-pakke .kunde-indhold .felt input { min-height: 46px; }
.side-pakke .kunde-handlinger { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 18px; }
.side-pakke .kunde-handlinger .knap { min-height: 46px; padding: 0 22px; border-radius: 14px; }
.side-pakke .kunde-handlinger .tekstknap { min-height: 46px; border-radius: 14px; }
.side-pakke .kunde-visning input[readonly] { background: var(--flade); color: var(--tekst-2); }

.side-pakke .pakke-side section.aendringer > h2 { margin-bottom: 8px; }
.side-pakke .aendringer .flere { margin: 12px 0 0; font-size: 14px; }
@media (max-width: 860px) {
  .side-pakke .funktioner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Under 480 px brydes ord som "samtalehukommelse" midt i ved to kolonner: én kolonne som i prototypen. */
@media (max-width: 480px) {
  .side-pakke .funktioner { grid-template-columns: minmax(0, 1fr); }
}

/* ==== side-handlingslog ==== */
/* Handlingslog som i prototypen (skærm 14): søgefeltet, "Hvem" og perioden i én kompakt række (etiketterne kun til skærmlæsere; "Vis" kun uden JavaScript), område-knapperne under, dagene med en lille
   grå overskrift og "Viser 1–50 af 214" med Forrige/Næste som lette links nederst. 22 px mellem blokkene. */

.side-handlingslog .hl-filtre { display: flex; flex-direction: column; gap: 14px; margin: 0 0 22px; }
.side-handlingslog .hl-filterraekke { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.side-handlingslog .hl-filterraekke select { min-height: 44px; padding: 0 12px; border: 1px solid var(--felt-kant); border-radius: 12px; background: var(--baggrund); color: var(--tekst); font: inherit; max-width: 100%; }
.side-handlingslog .hl-filtre .knap { min-height: 44px; }
.side-handlingslog .hl-filtre .knap[hidden] { display: none; }
.side-handlingslog .hl-soeg { flex: 1 1 220px; min-width: 0; min-height: 44px; padding: 0 14px; border: 1px solid var(--felt-kant); border-radius: 12px; background: var(--baggrund); color: var(--tekst); font: inherit; }
.side-handlingslog .hl-soeg::placeholder { color: var(--daempet); }
.side-handlingslog .hl-soeg[aria-invalid="true"] { border-color: var(--fejl); }
.side-handlingslog .hl-soeg-fejl { margin: -6px 0 0; }
.side-handlingslog .hl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.side-handlingslog .filter-chip { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid var(--felt-kant); border-radius: 999px; background: var(--baggrund); color: var(--tekst-2); font: inherit; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; }
.side-handlingslog .filter-chip:hover { background: var(--flade); }
.side-handlingslog .filter-chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--paa-accent); }
.side-handlingslog .hl-datoer { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 20px; }
.side-handlingslog .hl-datoer .felt { flex: 0 1 240px; min-width: 0; margin: 0; }
.side-handlingslog .hl-datoer .felt input { max-width: 100%; }
.side-handlingslog .hl-datoer .knap { margin-top: 29px; }
.side-handlingslog .hl-dag { margin: 0 0 22px; }
.side-handlingslog .hl-dag h2 { margin: 0 0 4px; font-size: 14px; font-weight: 600; color: var(--daempet); }
.side-handlingslog .sidenavigation { margin-top: 0; font-size: 14px; }
.side-handlingslog .sidenavigation .knap { min-height: 40px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; color: var(--accent); font-size: 14px; font-weight: 400; text-decoration: none; }
.side-handlingslog .sidenavigation .knap:hover { background: var(--flade); }
@media (max-width: 860px) {
  .side-handlingslog .hl-datoer .felt { flex: 1 1 100%; }
  .side-handlingslog .hl-datoer .knap { margin-top: 0; }
}

/* ==== side-brugere ==== */
/* Brugere som i prototypen (skærm 13): "Inviter bruger" i sidehovedet, invitationen i et gråt felt bag knappen, én kompakt række pr. bruger
   (avatar, navn og mail, status som farvet tekst, rollevælger og en ikonknap med handlingerne) og rollerne nederst. 26 px mellem blokkene. */

.side-brugere .brugere { display: flex; flex-direction: column; gap: 26px; }
.side-brugere .brugere > .besked, .side-brugere .brugere > .fejl, .side-brugere .brugere > .intet { margin: 0; }

/* Invitationen: skjult (hidden), til knappen åbner den; mail, navn og rolle på én række (under hinanden på smalle skærme). */
.side-brugere .inviter { padding: 20px; border-radius: 18px; background: var(--flade); }
.side-brugere .inviter[hidden] { display: none; }
.side-brugere .inviter-form { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.side-brugere .inviter-felter { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; }
.side-brugere .inviter-felter .felt { flex: 1 1 180px; min-width: 0; margin: 0; }
.side-brugere .inviter-felter .felt:first-child { flex: 2 1 260px; }
.side-brugere .inviter-felter .felt input, .side-brugere .inviter-felter .felt select { min-height: 46px; }
.side-brugere .inviter-forklaring { margin: 0; font-size: 14px; color: var(--daempet); }
.side-brugere .inviter .fejl { margin: 0; }
.side-brugere .inviter-knapper { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.side-brugere .inviter-knapper .annuller { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 12px; color: var(--tekst-2); text-decoration: none; }
.side-brugere .inviter-knapper .annuller:hover { background: var(--flade-2); }

/* Rækkerne: person, status, rolle og handlinger på én linje; på smalle skærme person, så status, så rolle og ikon. */
/* Listen er en container: om rækken brydes, afhænger af listens bredde (ikke skærmens), og forklaringen under rækken følger det (se eneste-hjaelp).
   Uden container queries (Safari før 16) gælder de regler ikke: forklaringen står under navnet, og ikonet kan stå alene på næste linje ved ~1060-1120 px. */
.side-brugere .bruger-liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linje); container-type: inline-size; container-name: bruger-liste; }
.side-brugere .bruger-raekke { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 14px 4px; border-bottom: 1px solid var(--linje); }
.side-brugere .bruger-raekke .felt-celle { min-width: 0; }
.side-brugere .bruger-person { flex: 1 1 280px; display: flex; align-items: center; gap: 20px; }
.side-brugere .avatar { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--flade-2); color: var(--accent); font-weight: 700; font-size: 14px; }
.side-brugere .avatar.farve-1 { background: var(--accent-tint); }
.side-brugere .avatar.farve-2 { background: var(--niveau-login-flade); }
.side-brugere .avatar.farve-3 { background: var(--niveau-forsigtigt-flade); }
.side-brugere .bruger-tekst { min-width: 0; }
.side-brugere .bruger-tekst p { margin: 0; overflow-wrap: anywhere; }
.side-brugere .bruger-tekst .navn { font-weight: 600; }
.side-brugere .bruger-tekst .mail, .side-brugere .bruger-tekst .under { font-size: 14px; color: var(--daempet); }
.side-brugere .bruger-tekst .ascii { font-size: 13px; color: var(--daempet); }
.side-brugere .bruger-status { flex: 0 1 200px; font-size: 14px; }
.side-brugere .bruger-status p { margin: 0; }
.side-brugere .status-koblet { color: var(--stigning); }
.side-brugere .status-koblet.laenge-siden { color: var(--daempet); }
.side-brugere .status-ikke-logget-ind { color: var(--afventer); }
.side-brugere .status-kontoskift { color: var(--fejl); }
.side-brugere .status-spaerret { color: var(--daempet); }
.side-brugere .bruger-status .hjaelp { margin-top: 2px; }
.side-brugere .bruger-rolle { flex: 0 0 auto; }
/* Fast bredde på rollekolonnen på alle rækker (vælger 134 + mellemrum 8 + "Gem rolle" 104 = 246 px), så "Gem rolle" på egen række ikke skubber status og ikon ud af flugt. Kun på desktop; på mobil er layoutet uændret (lodret). */
/* Er listen for smal til alle fire felter på én linje (under 836 px: person 280 + status 200 + rolle 246 + ikon 42 + tre mellemrum 60 + rækkens luft 8), brydes
   rækken altid som person og status / rolle og ikon. Ellers ville ikonet alene ryge på næste linje mellem ~1060 og ~1120 px skærmbredde. */
@media (min-width: 861px) {
  .side-brugere .bruger-rolle { flex: 0 0 246px; }
  @container bruger-liste (max-width: 835.98px) {
    .side-brugere .bruger-person { flex-basis: calc(100% - 221px); }
  }
}
.side-brugere .rolle-form { display: flex; align-items: center; gap: 8px; margin: 0; }
.side-brugere .rolle-form select { min-height: 42px; padding: 0 10px; border: 1px solid var(--felt-kant); border-radius: 12px; background: var(--baggrund); font: inherit; color: var(--tekst); }
.side-brugere .rolle-form select:disabled { color: var(--daempet); }
.side-brugere .rolle-form .knap { min-height: 42px; }
.side-brugere .rolle-form .knap[hidden] { display: none; }
/* Eneste administrator: forklaringen på egen linje under hele rækken (under navnet), så rollekolonnen er lige så bred som i de andre rækker.
   Brydes rækken (listen under 836 px: på mobil og op til ~1120 px skærmbredde), står den under rollevælgeren og flugter med dens venstre kant. */
.side-brugere .eneste-hjaelp { flex: 1 1 100%; margin: -6px 0 0; padding-left: 60px; }
@container bruger-liste (max-width: 835.98px) {
  .side-brugere .eneste-hjaelp { padding-left: 0; }
}

/* Handlingerne: en ikonknap (samme plads som prototypens skraldespand) med en lille menu under. */
.side-brugere .bruger-flere { flex: 0 0 42px; position: relative; }
.side-brugere .ikon-knap { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: var(--daempet); cursor: pointer; list-style: none; }
.side-brugere .ikon-knap::-webkit-details-marker { display: none; }
.side-brugere .ikon-knap:hover, .side-brugere .flere[open] > .ikon-knap { background: var(--flade); color: var(--tekst); }
.side-brugere .flere-menu {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 5; display: flex; flex-direction: column; min-width: 210px;
  border: 1px solid var(--kant); border-radius: 12px; background: var(--baggrund); box-shadow: 0 12px 32px -12px rgba(22, 32, 28, .28); overflow: hidden;
}
.side-brugere .flere-menu form { margin: 0; }
.side-brugere .menu-punkt { display: flex; align-items: center; width: 100%; min-height: 44px; padding: 0 16px; border: 0; border-top: 1px solid var(--linje); background: transparent; color: var(--tekst); font: inherit; text-align: left; text-decoration: none; cursor: pointer; box-sizing: border-box; }
.side-brugere .flere-menu > :first-child .menu-punkt, .side-brugere .flere-menu > .menu-punkt:first-child { border-top: 0; }
.side-brugere .menu-punkt:hover { background: var(--flade); }
.side-brugere .menu-punkt:disabled { color: var(--daempet); cursor: not-allowed; }
.side-brugere .menu-punkt:disabled:hover { background: transparent; }
.side-brugere .menu-punkt.fjern { color: var(--fejl); }
.side-brugere .bruger-fejl, .side-brugere .bruger-bekraeft { flex: 1 1 100%; }
.side-brugere .bruger-fejl .fejl { margin: 0; }

/* Rollerne nederst: et gråt felt med de tre roller side om side (under hinanden på smalle skærme). */
.side-brugere .roller { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; padding: 20px; border-radius: 18px; background: var(--flade); }
.side-brugere .roller h2 { grid-column: 1 / -1; margin: 0; font-size: 16px; font-weight: 600; }
.side-brugere .roller p { margin: 0; }
.side-brugere .roller .rolle-navn { font-weight: 600; }
.side-brugere .roller .rolle-tekst { margin-top: 2px; font-size: 14px; color: var(--tekst-3); }

/* ---- liste-og-panel ---- */
/* Delt komponent (Komponenter/Delt/ListeOgPanel.razor) til Spørgsmål og svar og Indhold (brugerens beslutning 3): listen til venstre og detaljen i et panel til højre,
   mål som prototypens "9 · Indhold". Rækken brydes, når der ikke er plads til begge (smalle skærme): så står panelet under listen. Klasserne starter med .liste-og-panel og .lp-. */
.liste-og-panel { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.lp-liste { flex: 1 1 360px; min-width: 0; }
.lp-panel { flex: 1.4 1 420px; min-width: 0; box-sizing: border-box; padding: 24px; border: 1px solid var(--kant-2); border-radius: 20px; display: flex; flex-direction: column; gap: 18px; overflow-wrap: anywhere; }
.lp-panel:focus { outline: none; }
.lp-panel:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
/* Desktop: panelet følger med, når man ruller i en lang liste (review I1); 24 px luft over det. */
@media (min-width: 861px) {
  .lp-panel { position: sticky; top: 24px; }
}
@media (max-width: 860px) {
  .lp-panel { padding: 20px; }
}

/* ---- grafer ---- */
/* Delte grafer (Indsigt, Overblik): SVG-komponenterne i Komponenter/Grafer. Alle klasser starter med .graf-, og intet styres med inline style. Mål efter prototypen. */
.graf-ramme { position: relative; }
.graf-tom { margin: 0; color: var(--daempet); }
.graf-linje-svg { display: block; width: 100%; height: 190px; overflow: visible; }
.graf-lille { display: block; flex: 0 0 auto; }
.graf-akse { display: flex; justify-content: space-between; margin-top: 14px; font-size: 12px; color: var(--daempet); }
.graf-soejler + .graf-akse { margin-top: 8px; }
.graf-soejler { display: flex; align-items: flex-end; gap: 4px; height: 150px; }
.graf-soejle { display: block; flex: 1 1 0; min-width: 0; width: 0; height: 150px; }
.graf-soejler-taet { gap: 1px; }
.graf-soejler-uden-luft { gap: 0; }
.graf-varme { display: flex; flex-direction: column; gap: 3px; }
.graf-varme-raekke { display: flex; align-items: center; gap: 3px; }
.graf-varme-dag { flex: 0 0 34px; font-size: 12px; color: var(--daempet); }
.graf-varme-felt { display: block; flex: 1 1 0; min-width: 0; width: 0; height: 20px; }
.graf-varme-akse { display: flex; justify-content: space-between; padding-left: 37px; font-size: 12px; color: var(--daempet); }
.graf-bjaelke { display: flex; height: 14px; gap: 3px; }
.graf-bjaelke-del { display: block; flex: 0 1 auto; min-width: 0; height: 14px; }
.graf-forklaring { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.graf-forklaring li { display: flex; align-items: center; gap: 8px; }
.graf-forklaring-navn { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.graf-prik { flex: 0 0 auto; }
.graf-bjaelke-forklaring { margin-top: 14px; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px 16px; }
.graf-forklaring strong { white-space: nowrap; }
.graf-bjaelke-forklaring li { justify-content: space-between; }
.graf-ring-ramme { display: flex; align-items: center; gap: 22px; }
.graf-ring { flex: 0 0 auto; }
.graf-ring-forklaring { display: flex; flex-direction: column; gap: 8px; }

/* ---- indsigt: nøgletal og spørgsmål uden svar ---- */
/* Delte komponenter (Noegletal, UdenSvarListe) til Indsigt i søgningen og chatten (og Overblik fra Task 6). Mål efter prototypen "5 · Indsigt i søgningen". */
.noegletal { min-width: 0; padding: 18px 20px; border: 1px solid var(--kant); border-radius: 18px; overflow-wrap: anywhere; }
.noegletal p { margin: 0; }
.noegletal-etiket { font-size: 14px; color: var(--daempet); }
.noegletal .noegletal-vaerdi { margin: 4px 0 2px; font-size: 30px; font-weight: 600; letter-spacing: -0.02em; }
.noegletal-udvikling { font-size: 13px; font-weight: 600; color: var(--tekst-2); }
.noegletal-udvikling.god { color: var(--stigning); }
.noegletal .noegletal-hjaelp { margin-top: 4px; font-size: 13px; color: var(--daempet); }
.uden-svar-tom { margin: 0; color: var(--daempet); }
.uden-svar-liste { list-style: none; margin: 0; padding: 0; }
.uden-svar-raekke { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 0; border-top: 1px solid var(--linje); }
.uden-svar-emne { flex: 1 1 160px; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.uden-svar-antal { font-size: 14px; color: var(--daempet); white-space: nowrap; }
/* "Få forslag" (C2 Task 6): samme pille på Overblik (hvid flade, med kant som i prototypen) og Indsigt i søgningen (hvid pille på den gule flade, kanten skjult). */
.uden-svar-forslag { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: 1px solid var(--linje); border-radius: 10px; background: var(--baggrund); font-size: 14px; font-weight: 600; color: var(--tekst-2); text-decoration: none; }
a.uden-svar-forslag:hover { background: var(--flade); }
a.uden-svar-forslag:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ==== side-indsigt-soegning ==== */
/* Indsigt i søgningen som i prototypen (skærm 5): periodeknapper til højre for titlen, nøgletal, søgninger pr. dag og et gitter af kort (to kolonner, én på mobil). 28 px mellem blokkene. */

.side-indsigt-soegning .is-indhold { display: flex; flex-direction: column; gap: 28px; }
.side-indsigt-soegning .is-perioder { margin: 0; }
.side-indsigt-soegning .is-perioder .segment button { padding: 0 12px; }
.side-indsigt-soegning .is-perioder .segment button[aria-pressed="true"] { background: var(--baggrund); }
.side-indsigt-soegning .is-perioder, .side-indsigt-soegning .is-perioder .segment { max-width: 100%; }
.side-indsigt-soegning .is-perioder .segment { flex-wrap: wrap; }
.side-indsigt-soegning .is-data-fra { margin: 0; font-size: 14px; color: var(--daempet); }
.side-indsigt-soegning .is-noegletal { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 12px; }
.side-indsigt-soegning .is-ingen-forrige { margin: -16px 0 0; font-size: 13px; color: var(--daempet); }
.side-indsigt-soegning .kort + .kort { margin-top: 0; }
.side-indsigt-soegning .kort h2 { margin: 0 0 4px; font-size: 17px; font-weight: 600; }
.side-indsigt-soegning .is-prdag { display: flex; flex-direction: column; gap: 14px; }
.side-indsigt-soegning .is-prdag h2 { margin: 0; }
.side-indsigt-soegning .is-kort-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px; }
.side-indsigt-soegning .is-forklaring { list-style: none; margin: 0; padding: 0; display: flex; gap: 16px; font-size: 13px; color: var(--daempet); }
.side-indsigt-soegning .is-forklaring li { display: inline-flex; align-items: center; gap: 6px; }
.side-indsigt-soegning .is-gitter { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 16px; }
/* Ingen huller (A5, C2 Task 3): antallet af kort afhænger af rolle (Muligheder), pakke og AI-laget (De besøgendes ord). Gitteret har 2 kolonner fra 656 px og 3 fra 992 px
   (320 px + 16 px mellemrum); det sidste kort fylder resten af sin række. Måles på indholdet (container), ikke på skærmen, fordi menuen tager plads. */
.side-indsigt-soegning .is-indhold { container-type: inline-size; container-name: is-indhold; }
@container is-indhold (min-width: 656px) and (max-width: 991.98px) {
  .side-indsigt-soegning .is-gitter > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@container is-indhold (min-width: 992px) {
  .side-indsigt-soegning .is-gitter > :last-child:nth-child(3n+1) { grid-column: 1 / -1; }
  .side-indsigt-soegning .is-gitter > :last-child:nth-child(3n+2) { grid-column: span 2; }
}
.side-indsigt-soegning .is-undertekst { margin: 0 0 12px; font-size: 14px; color: var(--daempet); }
.side-indsigt-soegning .is-hvornaar .is-undertekst, .side-indsigt-soegning .is-temaer .is-undertekst { margin-bottom: 14px; }
.side-indsigt-soegning .is-tom { margin: 0; color: var(--daempet); }
.side-indsigt-soegning .is-temaliste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.side-indsigt-soegning .is-tema-top { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; }
.side-indsigt-soegning .is-tema-navn { min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.side-indsigt-soegning .is-tema-andel { flex: 0 0 auto; color: var(--daempet); white-space: nowrap; overflow-wrap: normal; }
.side-indsigt-soegning .is-tema-bjaelke { display: block; margin-top: 5px; }
.side-indsigt-soegning .is-medlemsliste { list-style: none; margin: 0; padding: 0; }
.side-indsigt-soegning .is-medlemsliste li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--linje-let); }
.side-indsigt-soegning .is-laas { flex: 0 0 auto; }
.side-indsigt-soegning .is-medlem-titel { flex: 1 1 auto; min-width: 0; }
.side-indsigt-soegning .is-medlem-antal { flex: 0 0 auto; font-size: 14px; font-weight: 600; white-space: nowrap; overflow-wrap: normal; }
.side-indsigt-soegning .is-sideliste { margin: 0; padding: 0 0 0 22px; }
.side-indsigt-soegning .is-sideliste li { padding: 8px 0; border-top: 1px solid var(--linje-let); }
.side-indsigt-soegning .is-side-raekke { display: flex; justify-content: space-between; gap: 12px; }
.side-indsigt-soegning .is-side-raekke a, .side-indsigt-soegning .is-side-titel { min-width: 0; font-weight: 600; text-decoration: none; }
.side-indsigt-soegning .is-side-antal { flex: 0 0 auto; font-size: 14px; color: var(--daempet); white-space: nowrap; overflow-wrap: normal; }
.side-indsigt-soegning .is-muligheder { min-width: 0; padding: 22px 24px; border-radius: 20px; background: var(--advarsel-flade); overflow-wrap: anywhere; }
.side-indsigt-soegning .is-muligheder h2 { margin: 0 0 4px; font-size: 17px; font-weight: 600; }
.side-indsigt-soegning .is-muligheder .is-undertekst { color: var(--laast-tekst); }
.side-indsigt-soegning .is-muligheder .uden-svar-raekke { border-top-color: var(--linje-gul); }
.side-indsigt-soegning .is-muligheder .uden-svar-antal { color: var(--laast-tekst); }
.side-indsigt-soegning .is-muligheder .uden-svar-forslag { border-color: transparent; }
.side-indsigt-soegning .is-muligheder .analyse-vindue { color: var(--laast-tekst); }
.side-indsigt-soegning .is-muligheder-fra { margin: -4px 0 12px; font-size: 13px; color: var(--laast-tekst); }
/* "Se spørgsmål uden svar" (Task 6): under emnerne, kun for Redaktør. */
.side-indsigt-soegning .is-se-uden-svar { display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px; font-size: 14px; font-weight: 600; color: var(--laast-tekst); }
/* Smalle skærme: periodeknapperne ("3 months", "12 months" på engelsk) flugter med indholdskanten (review M1). */
@media (max-width: 420px) {
  .side-indsigt-soegning .is-perioder .segment button { padding: 0 9px; }
}

/* ==== side-indsigt-chat ==== */
/* Indsigt i chatten som i prototypen (skærm 6): periodeknapper til højre for titlen, nøgletal, samtaler pr. dag og et gitter af kort (længder, afslutninger, sprog). 28 px mellem blokkene. */

.side-indsigt-chat .ic-indhold { display: flex; flex-direction: column; gap: 28px; }
.side-indsigt-chat .ic-perioder { margin: 0; }
.side-indsigt-chat .ic-perioder .segment button { padding: 0 12px; }
.side-indsigt-chat .ic-perioder .segment button[aria-pressed="true"] { background: var(--baggrund); }
.side-indsigt-chat .ic-perioder, .side-indsigt-chat .ic-perioder .segment { max-width: 100%; }
.side-indsigt-chat .ic-perioder .segment { flex-wrap: wrap; }
.side-indsigt-chat .ic-data-fra { margin: 0; font-size: 14px; color: var(--daempet); }
.side-indsigt-chat .ic-noegletal { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 12px; }
.side-indsigt-chat .ic-ingen-forrige { margin: -16px 0 0; font-size: 13px; color: var(--daempet); }
.side-indsigt-chat .kort + .kort { margin-top: 0; }
.side-indsigt-chat .kort h2 { margin: 0 0 4px; font-size: 17px; font-weight: 600; }
.side-indsigt-chat .ic-prdag h2 { margin: 0 0 16px; }
.side-indsigt-chat .ic-gitter { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 16px; }
.side-indsigt-chat .ic-gitter .kort { min-width: 0; overflow-wrap: anywhere; }
/* Ingen huller (A6, C2 Task 3): med "Det spørger de om bagefter" er der fire kort; det sidste fylder resten af sin række (samme regel som Indsigt i søgningen). */
.side-indsigt-chat .ic-indhold { container-type: inline-size; container-name: ic-indhold; }
@container ic-indhold (min-width: 656px) and (max-width: 991.98px) {
  .side-indsigt-chat .ic-gitter > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@container ic-indhold (min-width: 992px) {
  .side-indsigt-chat .ic-gitter > :last-child:nth-child(3n+1) { grid-column: 1 / -1; }
  .side-indsigt-chat .ic-gitter > :last-child:nth-child(3n+2) { grid-column: span 2; }
}
.side-indsigt-chat .ic-undertekst { margin: 0 0 14px; font-size: 14px; color: var(--daempet); }
.side-indsigt-chat .ic-tom { margin: 0; color: var(--daempet); }
.side-indsigt-chat .ic-laengdeliste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.side-indsigt-chat .ic-laengdeliste li { display: grid; grid-template-columns: 110px minmax(0, 1fr) 44px; align-items: center; gap: 10px; font-size: 14px; }
.side-indsigt-chat .ic-laengde-bjaelke { display: block; }
.side-indsigt-chat .ic-laengde-andel { text-align: right; color: var(--tekst-2); white-space: nowrap; overflow-wrap: normal; }
.side-indsigt-chat .ic-sprog-note { margin: 14px 0 0; font-size: 13px; color: var(--daempet); }
/* Smalle skærme: periodeknapperne ("3 months", "12 months" på engelsk) flugter med indholdskanten, som på Indsigt i søgningen. */
@media (max-width: 420px) {
  .side-indsigt-chat .ic-perioder .segment button { padding: 0 9px; }
}

/* ==== side-instruktioner-og-faq ==== */
/* Instruktioner og FAQ som i prototypen (skærm 11b): sidehovedet med pakkens tæller og "Ny instruktion" til højre, faner med antal, en grå forklaring, formularen med
   accentkant over kortene og kortene i et gitter (mindst 300 px). 24 px mellem afsnittene som prototypens gap. */
.side-instruktioner-og-faq .side-hoved { margin-bottom: 24px; }
/* Tæller og knap i en højrekolonne (knappen øverst, tælleren under), så knappen står, hvor prototypen har den, uanset tællerens længde (review A-a);
   teksten ved siden af må krympe og brydes. På mobil venstrestillet under introen som prototypen (A-b). */
.side-instruktioner-og-faq .side-hoved-tekst { flex: 1 1 360px; min-width: 0; }
.side-instruktioner-og-faq .instr-hoved { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; max-width: 480px; }
.side-instruktioner-og-faq .instr-hoved .graense-taeller { order: 1; }
.side-instruktioner-og-faq .instr-hoved .overlap { order: 2; }
.side-instruktioner-og-faq .instr-hoved .knap { min-height: 46px; padding: 0 20px; border-radius: 14px; }
.side-instruktioner-og-faq .graense-taeller { margin: 0; font-size: 14px; color: var(--daempet); white-space: nowrap; }
.side-instruktioner-og-faq .instr-hoved .overlap { flex: 1 1 100%; text-align: right; }
.side-instruktioner-og-faq .instr-hoved .laast { flex: 1 1 280px; }
/* Låst "Ny instruktion": hele bredden under introen, tælleren og noten over låsen (som pakkelåsene på de andre sider). */
.side-instruktioner-og-faq .side-hoved-handlinger:has(.laast) { flex: 1 1 100%; }
.side-instruktioner-og-faq .instr-hoved:has(.laast) { flex-direction: row; flex-wrap: wrap; align-items: center; max-width: none; justify-content: flex-start; gap: 8px 14px; }
.side-instruktioner-og-faq .instr-hoved:has(.laast) .graense-taeller { order: -1; }
.side-instruktioner-og-faq .instr-hoved:has(.laast) .graense-taeller, .side-instruktioner-og-faq .instr-hoved:has(.laast) .overlap { flex: 1 1 100%; text-align: left; }

.side-instruktioner-og-faq .faner { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 24px; border-bottom: 1px solid var(--linje); }
.side-instruktioner-og-faq .faner a { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 14px; border-bottom: 2px solid transparent; color: var(--daempet); font-weight: 600; text-decoration: none; }
.side-instruktioner-og-faq .faner a:hover { color: var(--tekst); }
.side-instruktioner-og-faq .faner a[aria-current="page"] { color: var(--tekst); border-bottom-color: var(--accent); }
.side-instruktioner-og-faq .faner .antal { min-width: 22px; padding: 0 7px; border-radius: 999px; background: var(--flade-2); font-size: 12px; line-height: 1.6; color: var(--tekst-2); text-align: center; box-sizing: border-box; }

.side-instruktioner-og-faq .instruktioner { display: flex; flex-direction: column; gap: 24px; }
/* "Gælder hele DBI - alle sites" (U4) tæt under fanerne. */
.side-instruktioner-og-faq .instruktioner > .omfang { margin: -12px 0 0; color: var(--daempet); font-size: 14px; }
.side-instruktioner-og-faq .instr-forklaring { margin: 0; padding: 14px 18px; border-radius: 14px; background: var(--flade); color: var(--tekst-2); font-size: 14px; }
.side-instruktioner-og-faq .instr-laast .laast, .side-instruktioner-og-faq .instr-ukendt .fejl { margin: 0; }

/* Formularen: accentkant og 16 px mellem felterne som prototypen. */
.side-instruktioner-og-faq .instr-formular { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 22px 24px; border: 1px solid var(--accent); border-radius: 20px; min-width: 0; }
.side-instruktioner-og-faq .instr-formular h2 { margin: 0; font-size: 18px; font-weight: 600; }
.side-instruktioner-og-faq .instr-formular .felt { margin: 0; }
.side-instruktioner-og-faq .instr-formular textarea { padding: 12px 14px; }
.side-instruktioner-og-faq .instr-formular .besked, .side-instruktioner-og-faq .instr-formular .fejl { margin: 0; }
.side-instruktioner-og-faq .instr-kun-fra { margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--advarsel-flade); color: var(--niveau-forsigtigt-tekst); font-size: 14px; }
/* Banneret over en formular, der er forudfyldt fra assistentens udkast (C2 Task 8, beslutning 13; intet forlæg i prototypen): assistentens grønne flade og udkastets stiplede kant. */
.side-instruktioner-og-faq .udkast-banner { margin: 0; padding: 10px 14px; border: 1px dashed var(--udkast-kant); border-radius: 12px; background: var(--resume); color: var(--accent); font-size: 14px; font-weight: 600; }
.side-instruktioner-og-faq .instr-omfang { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.side-instruktioner-og-faq .instr-omfang legend { padding: 0; margin-bottom: 8px; font-weight: 600; }
.side-instruktioner-og-faq .instr-omfang .stjerne { color: var(--daempet); }
.side-instruktioner-og-faq .instr-omfang .fejl { margin: 0; }
.side-instruktioner-og-faq .instr-radioer { display: flex; flex-wrap: wrap; gap: 8px; }
.side-instruktioner-og-faq .radio-valg { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 14px; border: 1px solid var(--felt-kant); border-radius: 12px; cursor: pointer; }
.side-instruktioner-og-faq .radio-valg input { margin: 0; accent-color: var(--accent); }
.side-instruktioner-og-faq .radio-valg:has(input:checked) { border-color: var(--accent); font-weight: 600; }
.side-instruktioner-og-faq .radio-valg:has(input:disabled) { color: var(--daempet); cursor: not-allowed; }
.side-instruktioner-og-faq .radio-valg .pakke-maerke { margin-left: 2px; }
.side-instruktioner-og-faq .instr-omfang.har-fejl .radio-valg { border-color: var(--fejl); }
/* Kategorierne som chips (afkrydsningsfelter, der også virker uden JavaScript): valgt = accent med hvid tekst. */
.side-instruktioner-og-faq .instr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
/* Chipsene vises kun ved "Udvalgte kategorier" (som prototypen), også uden JavaScript; ved "Alle spørgsmål" ignorerer serveren dem. */
.side-instruktioner-og-faq .instr-omfang:has(input[value="alle"]:checked) .instr-chips { display: none; }
.side-instruktioner-og-faq .chip-valg { position: relative; display: inline-flex; }
.side-instruktioner-og-faq .chip-valg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.side-instruktioner-og-faq .chip-valg span { display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border: 1px solid var(--felt-kant); border-radius: 999px; font-size: 14px; }
.side-instruktioner-og-faq .chip-valg:has(input:checked) span { background: var(--accent); border-color: var(--accent); color: var(--paa-accent); font-weight: 600; }
.side-instruktioner-og-faq .chip-valg:has(input:focus-visible) span { outline: 2px solid var(--accent); outline-offset: 2px; }
.side-instruktioner-og-faq .taeller.for-lang { color: var(--fejl); font-weight: 600; }
.side-instruktioner-og-faq .instr-knapper { display: flex; flex-wrap: wrap; gap: 8px; }

/* Kortene: navn og status øverst, områderne som grå mærker, teksten og en fod med brugen, "Ret" og "..."-menuen. */
.side-instruktioner-og-faq .instr-gitter { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.side-instruktioner-og-faq .instr-kort { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px; border: 1px solid var(--kant); border-radius: 20px; min-width: 0; overflow-wrap: anywhere; }
.side-instruktioner-og-faq .instr-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.side-instruktioner-og-faq .instr-top h2 { margin: 0; font-size: 16px; font-weight: 600; min-width: 0; }
.side-instruktioner-og-faq .instr-status { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px; font-size: 13px; font-weight: 600; }
.side-instruktioner-og-faq .instr-status.aktiv { background: var(--niveau-fandt-flade); color: var(--niveau-fandt-tekst); }
.side-instruktioner-og-faq .instr-status.fra { background: var(--niveau-intet-flade); color: var(--niveau-intet-tekst); }
.side-instruktioner-og-faq .instr-omraader { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.side-instruktioner-og-faq .instr-omraader li { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px; background: var(--flade-2); font-size: 13px; font-weight: 600; color: var(--tekst-2); }
.side-instruktioner-og-faq .instr-tekst { margin: 0; color: var(--tekst-2); white-space: pre-wrap; }
.side-instruktioner-og-faq .instr-fod { margin-top: auto; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding-top: 8px; border-top: 1px solid var(--linje-let); }
.side-instruktioner-og-faq .instr-brug { flex: 1 1 120px; font-size: 13px; color: var(--daempet); }
.side-instruktioner-og-faq .instr-handlinger { flex: 0 0 auto; margin-left: auto; display: flex; align-items: center; gap: 4px; }
.side-instruktioner-og-faq .instr-ret { min-height: 36px; padding: 0 12px; border-radius: 10px; font-size: 14px; }
.side-instruktioner-og-faq .instr-fejl .fejl { margin: 0; }
/* "..."-menuen som på Brugere: en ikonknap med en lille menu under. */
.side-instruktioner-og-faq .flere { position: relative; }
.side-instruktioner-og-faq .ikon-knap { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: var(--daempet); cursor: pointer; list-style: none; }
.side-instruktioner-og-faq .ikon-knap::-webkit-details-marker { display: none; }
.side-instruktioner-og-faq .ikon-knap:hover, .side-instruktioner-og-faq .flere[open] > .ikon-knap { background: var(--flade); color: var(--tekst); }
.side-instruktioner-og-faq .flere-menu {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 5; display: flex; flex-direction: column; min-width: 180px;
  border: 1px solid var(--kant); border-radius: 12px; background: var(--baggrund); box-shadow: 0 12px 32px -12px rgba(22, 32, 28, .28); overflow: hidden;
}
.side-instruktioner-og-faq .flere-menu form { margin: 0; }
.side-instruktioner-og-faq .menu-punkt { display: flex; align-items: center; width: 100%; min-height: 44px; padding: 0 16px; border: 0; border-top: 1px solid var(--linje); background: transparent; color: var(--tekst); font: inherit; text-align: left; text-decoration: none; cursor: pointer; box-sizing: border-box; }
.side-instruktioner-og-faq .flere-menu > :first-child .menu-punkt, .side-instruktioner-og-faq .flere-menu > .menu-punkt:first-child { border-top: 0; }
.side-instruktioner-og-faq .menu-punkt:hover { background: var(--flade); }
.side-instruktioner-og-faq .menu-punkt.fjern { color: var(--fejl); }

/* FAQ-fanen (B2 Task 12) som i prototypen: forklaringen i en grå boks, formularen (samme ramme som instruktionernes) med spørgsmål og svar i et gitter
   (mindst 280 px pr. felt), "Søg i FAQ" i fuld bredde og en liste med en række pr. FAQ: teksten til venstre, mærker, sprog, "Vist N gange", "Ret" og "..."-menuen til højre. */
.side-instruktioner-og-faq .faq { display: flex; flex-direction: column; gap: 24px; }
.side-instruktioner-og-faq .faq-forklaring { margin: 0; padding: 14px 18px; border-radius: 14px; background: var(--flade); color: var(--tekst-2); font-size: 14px; }
.side-instruktioner-og-faq .faq > .intet { margin: 0; color: var(--daempet); }
.side-instruktioner-og-faq .faq-laast .laast, .side-instruktioner-og-faq .faq-ukendt .fejl, .side-instruktioner-og-faq .faq > .fejl { margin: 0; }
.side-instruktioner-og-faq .faq-sprogfelter { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.side-instruktioner-og-faq .faq-sprogfelter > .hjaelp { margin: 0; }
.side-instruktioner-og-faq .faq-felter { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 12px; }
.side-instruktioner-og-faq .faq-note { margin: 0; }
.side-instruktioner-og-faq .faq-soeg { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.side-instruktioner-og-faq .faq-soeg input[type="search"] { width: 100%; min-height: 44px; padding: 0 14px; box-sizing: border-box; border: 1px solid var(--felt-kant); border-radius: 12px; font: inherit; color: var(--tekst); background: var(--baggrund); }
.side-instruktioner-og-faq .faq-soeg input[type="search"]::placeholder { color: var(--daempet); }
.side-instruktioner-og-faq .faq-soeg input[aria-invalid="true"] { border-color: var(--fejl); }
.side-instruktioner-og-faq .faq-soeg .felt-fejl { margin: 0; }
.side-instruktioner-og-faq .faq-liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linje); container-type: inline-size; container-name: faq-liste; }
.side-instruktioner-og-faq .faq-raekke { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 16px 4px; border-bottom: 1px solid var(--linje); overflow-wrap: anywhere; }
.side-instruktioner-og-faq .faq-tekst { flex: 1 1 420px; min-width: 0; }
.side-instruktioner-og-faq .faq-spoergsmaal { margin: 0; font-weight: 600; }
.side-instruktioner-og-faq .faq-svar { margin: 2px 0 0; color: var(--daempet); font-size: 14px; }
.side-instruktioner-og-faq .faq-meta { flex: 0 1 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 13px; color: var(--daempet); }
.side-instruktioner-og-faq .faq-kategori { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px; background: var(--flade-2); font-weight: 600; color: var(--tekst-2); }
.side-instruktioner-og-faq .faq-status.fra { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px; background: var(--niveau-intet-flade); color: var(--niveau-intet-tekst); font-weight: 600; }
.side-instruktioner-og-faq .faq-meta .faq-sprog { font-weight: 600; color: var(--tekst-2); }
.side-instruktioner-og-faq .faq-handlinger { display: inline-flex; align-items: center; gap: 4px; }
.side-instruktioner-og-faq .faq-ret { min-height: 34px; padding: 0 12px; border-radius: 10px; font-size: 13px; }
.side-instruktioner-og-faq .faq-fejl, .side-instruktioner-og-faq .faq-bekraeft { flex: 1 1 100%; }
.side-instruktioner-og-faq .faq-fejl .fejl, .side-instruktioner-og-faq .faq-forsvundet .fejl { margin: 0; }
.side-instruktioner-og-faq .faq-raekke.er-fra .faq-spoergsmaal { color: var(--tekst-2); }
/* Slutreview M2/N2: er listen selv for smal til spørgsmålet (420 px) og metalinjen side om side (container query, uanset skærm og sidemenu), står metalinjen altid
   på egen linje, og "Ret" og "…" står altid i højre side af den – på samme linje, når der er plads, ellers højrestillet på næste linje. */
@container faq-liste (max-width: 860px) {
  .side-instruktioner-og-faq .faq-meta { flex: 1 1 100%; }
  .side-instruktioner-og-faq .faq-handlinger { margin-left: auto; }
}
/* Slutreview N2-rettelse: så smal, at metalinjen og "Ret …" ikke altid kan stå på én linje: "Ret …" står altid på egen linje, højrestillet, i alle rækker. */
@container faq-liste (max-width: 480px) {
  .side-instruktioner-og-faq .faq-handlinger { flex: 1 1 100%; justify-content: flex-end; }
}
@media (max-width: 860px) {
  .side-instruktioner-og-faq .instr-hoved { align-items: flex-start; }
  .side-instruktioner-og-faq .instr-hoved .overlap { text-align: left; }
}

/* ==== side-assistent ==== */
/* Som prototypens "4 · Assistent": titel og intro, de to pakkekort, svaret, spørgsmålsknapperne i én række, feltet med send-knap og fodnoten, 26 px mellem delene. */
.side-assistent .assistent { display: flex; flex-direction: column; gap: 26px; min-width: 0; }
.side-assistent .assistent > .intet, .side-assistent .assistent > .pause-linje { margin: 0; }
.side-assistent .assistent-pakkekort-raekke { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 12px; }
.side-assistent .assistent-pakkekort { min-width: 0; padding: 16px 18px; border-radius: 16px; overflow-wrap: anywhere; }
.side-assistent .assistent-pakkekort.har { background: var(--resume); }
.side-assistent .assistent-pakkekort.laast-kort { border: 1px solid var(--kant-2); }
.side-assistent .assistent-pakkekort-titel { margin: 0; display: flex; align-items: center; gap: 8px; font-weight: 600; }
.side-assistent .assistent-pakkekort-titel .ikon { flex: 0 0 auto; width: 16px; height: 16px; }
.side-assistent .assistent-pakkekort.har .assistent-pakkekort-titel .ikon { color: var(--niveau-fandt); }
.side-assistent .assistent-pakkekort.laast-kort .assistent-pakkekort-titel .ikon { width: 14px; height: 14px; color: var(--tekst-2); }
.side-assistent .assistent-pakkekort-tekst { margin: 4px 0 0; font-size: 14px; color: var(--tekst-2); }
/* Svaret, knapperne og feltet hører sammen (ankeret efter et tryk): samme afstand som siden. */
.side-assistent .assistent-samtale { display: flex; flex-direction: column; gap: 26px; min-width: 0; }
.side-assistent .assistent-samtale:focus { outline: none; }
.side-assistent .assistent-skriver, .side-assistent .assistent-kort-besked { margin: 0; color: var(--daempet); }
/* De færdige spørgsmål og eksemplerne i én række, der brydes; formularen lægger sig i rækken (display: contents). Lange spørgsmål brydes på flere linjer. */
.side-assistent .assistent-knapper { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.side-assistent .assistent-knapper > form { display: contents; }
.side-assistent .assistent-knap { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; max-width: 100%; padding: 6px 14px; border: 1px solid var(--kant-2); border-radius: 999px; background: var(--baggrund); color: var(--tekst-2); font: inherit; font-size: 14px; line-height: 1.4; text-align: left; text-decoration: none; overflow-wrap: anywhere; cursor: pointer; }
.side-assistent .assistent-knap:hover { background: var(--flade); }
.side-assistent .assistent-knap:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.side-assistent .assistent-knap:disabled { cursor: not-allowed; }
.side-assistent .assistent-knap:disabled:hover { background: var(--baggrund); }
.side-assistent .assistent-knap .pakke-maerke { flex: 0 0 auto; padding: 1px 7px; }
.side-assistent .assistent-knap bdi { unicode-bidi: isolate; }
/* Feltet som prøvefeltet på Overblik: ét linjefelt med rund send-knap og let skygge; etiket og hjælpetekst over og under (CLAUDE.md). */
.side-assistent .assistent-spoerg .felt { margin-bottom: 0; }
.side-assistent .assistent-felt { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 20px; border: 1px solid var(--felt-kant); border-radius: 22px; background: var(--baggrund); box-shadow: 0 6px 24px -14px rgba(22, 32, 28, .25); }
.side-assistent .assistent-felt input { flex: 1 1 auto; min-width: 0; min-height: 48px; padding: 0; border: 0; border-radius: 0; background: transparent; font: inherit; font-size: 16px; color: var(--tekst); text-overflow: ellipsis; }
.side-assistent .assistent-felt input:focus-visible { outline: none; }
.side-assistent .assistent-felt:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.side-assistent .assistent-felt input::placeholder { color: var(--daempet); }
.side-assistent .felt.har-fejl .assistent-felt { border-color: var(--fejl); }
.side-assistent .assistent-felt.laast-felt { border: 1px dashed var(--assistent-laast-kant); background: var(--assistent-laast-flade); box-shadow: none; }
.side-assistent .assistent-felt.laast-felt .ikon { flex: 0 0 auto; width: 16px; height: 16px; color: var(--daempet); }
.side-assistent .assistent-felt.laast-felt .knap { flex: 0 0 auto; min-height: 44px; padding: 0 16px; border-radius: 14px; font-size: 14px; }
/* "Få forslag" (Task 6): emnet som prototypens boble og knappen under den til højre; efter trykket svaret (AssistentSvarVisning). */
.side-assistent .assistent-forslag-emne { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.side-assistent .assistent-forslag-form { display: flex; justify-content: flex-end; margin: 0; }
.side-assistent .assistent-forslag-emne .assistent-spoergsmaal bdi { unicode-bidi: isolate; }
.side-assistent .assistent-side-fodnote { margin: -14px 0 0; font-size: 13px; color: var(--daempet); }