/* Indeholder webappens farver, layout, komponenter og mobiltilpasning. */
:root {
  --bg: #0b1316; --flade: #142126; --flade2: #1b2d34; --kant: #26393f; --tekst: #e8f0f2; --dæmpet: #8fa5ad;
  --accent: #34b3a0; --accent-tekst: #04201b; --fare: #ef6a58; --advarsel: #e8b04a; --ok: #4cc38a;
  --skygge: 0 8px 30px rgba(0, 0, 0, .45);
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: #f2f6f7; --flade: #ffffff; --flade2: #e9f0f2; --kant: #d3dee2; --tekst: #12242a; --dæmpet: #5a6f77;
    --accent: #0f7f70; --accent-tekst: #ffffff; --fare: #c0392b; --advarsel: #9a6a00; --ok: #1d8a57;
    --skygge: 0 8px 30px rgba(0, 0, 0, .15);
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--tekst); }
body { font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
[hidden] { display: none !important; }
a { color: var(--accent); }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .6rem; }
h1 { font-size: 1.6rem; } h2 { font-size: 1.2rem; } h3 { font-size: 1rem; }
.dæmpet { color: var(--dæmpet); }
.midte { text-align: center; padding: 3rem 1rem; }

/* knapper og felter */
button, .knap { font: inherit; color: var(--tekst); background: var(--flade2); border: 1px solid var(--kant); border-radius: 8px; padding: .5rem .9rem; cursor: pointer; text-decoration: none; display: inline-block; }
button:hover, .knap:hover { border-color: var(--accent); }
button.primær, .knap.primær { background: var(--accent); border-color: var(--accent); color: var(--accent-tekst); font-weight: 600; }
button.fare { color: var(--fare); border-color: var(--fare); background: transparent; }
.lille { padding: .25rem .6rem; font-size: .85rem; }
button:disabled { opacity: .5; cursor: default; }
button:focus-visible, .knap:focus-within, input:focus-visible, select:focus-visible, a:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
input, select, textarea { font: inherit; color: var(--tekst); background: var(--bg); border: 1px solid var(--kant); border-radius: 8px; padding: .5rem .7rem; max-width: 100%; }
input[type=checkbox] { width: 1.1rem; height: 1.1rem; padding: 0; vertical-align: middle; }
label.felt { display: block; margin: .7rem 0; font-weight: 600; font-size: .9rem; }
label.felt input, label.felt select { display: block; width: 100%; margin-top: .25rem; font-weight: 400; }
.række-knapper { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin: .6rem 0; }
.skjult-fil { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* login og kort */
.kort { background: var(--flade); border: 1px solid var(--kant); border-radius: 14px; padding: 1.25rem; margin: 0 0 1rem; }
.login { max-width: 26rem; margin: 10vh auto; padding: 0 1rem; }
.logo-stor { font-size: 2rem; font-weight: 800; letter-spacing: .02em; color: var(--accent); margin-bottom: 1rem; }
.logo-stor::before, .logo::before { content: ""; display: inline-block; width: 1.4em; height: 1.4em; margin-right: .3em; background: url("/skyikon.svg") center / contain no-repeat; vertical-align: -.35em; }
.fejl { color: var(--fare); min-height: 1.4rem; }
.info { background: var(--flade2); border-left: 4px solid var(--accent); padding: .6rem .8rem; border-radius: 6px; margin: .8rem 0; }
.advarsel { background: var(--flade2); border-left: 4px solid var(--advarsel); padding: .6rem .8rem; border-radius: 6px; margin: .8rem 0; }
.kode { font-family: ui-monospace, Menlo, Consolas, monospace; word-break: break-all; background: var(--bg); border: 1px dashed var(--kant); padding: .5rem .7rem; border-radius: 8px; user-select: all; }

/* topbar */
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: .8rem; padding: .6rem 1rem; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--kant); }
.logo { font-weight: 800; font-size: 1.25rem; color: var(--accent); text-decoration: none; letter-spacing: .02em; }
.logo::before { width: 1.2em; height: 1.2em; vertical-align: -.28em; }
.nav { display: flex; gap: .2rem; overflow-x: auto; flex: 1; scrollbar-width: none; }
.nav a { color: var(--dæmpet); text-decoration: none; padding: .35rem .7rem; border-radius: 999px; white-space: nowrap; }
.nav a.aktiv, .nav a:hover { color: var(--tekst); background: var(--flade2); }
.søg { width: 11rem; }
.indhold { max-width: 1400px; margin: 0 auto; padding: 1rem; }

/* rækker som i Netflix */
.række { margin: 0 0 1.6rem; }
.række-hoved { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .4rem; }
.række-liste { display: flex; gap: .6rem; overflow-x: auto; padding-bottom: .6rem; scroll-snap-type: x proximity; scrollbar-width: thin; }
.række-liste > * { scroll-snap-align: start; flex: 0 0 auto; }
.flise { position: relative; padding: 0; overflow: hidden; border-radius: 10px; background: var(--flade2); border: 1px solid var(--kant); text-align: left; transition: transform .15s; }
.flise:hover { transform: scale(1.03); border-color: var(--accent); }
.række-liste .flise.film { width: 250px; } .række-liste .flise.foto { width: 160px; }
.flise.film { aspect-ratio: 16 / 9; } .flise.foto { aspect-ratio: 1; }
.flise-billede { width: 100%; height: 100%; object-fit: cover; display: block; }
.flise-tom { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 2rem; color: var(--dæmpet); }
.flise-titel { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.4rem .6rem .45rem; font-size: .85rem; color: #fff; background: linear-gradient(transparent, rgba(0, 0, 0, .8)); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.flise.foto .flise-titel { display: none; }
.mærke { position: absolute; top: 6px; left: 6px; background: rgba(0, 0, 0, .65); color: #fff; font-size: .7rem; padding: 1px 7px; border-radius: 4px; }
.fremdrift { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255, 255, 255, .25); }
.fremdrift-fyld { display: block; height: 100%; background: var(--accent); }
.gitter { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.gitter.film { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.gitter .flise { width: 100%; }
.måned { margin: 1.4rem 0 .5rem; color: var(--dæmpet); text-transform: capitalize; font-size: 1rem; }
.faner { display: flex; gap: .3rem; flex-wrap: wrap; margin: .4rem 0 1rem; }
.faner button.aktiv { background: var(--accent); color: var(--accent-tekst); border-color: var(--accent); }
.app-fliser { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.app-flise { display: block; background: var(--flade); border: 1px solid var(--kant); border-radius: 10px; padding: .9rem; color: var(--tekst); text-decoration: none; }
.app-flise:hover { border-color: var(--accent); }
.drop { border: 2px dashed var(--kant); border-radius: 12px; padding: .8rem; text-align: center; color: var(--dæmpet); margin: .6rem 0; }
.drop.over { border-color: var(--accent); color: var(--tekst); }
.overførsel { display: grid; grid-template-columns: 1fr 8rem; gap: .2rem .8rem; font-size: .85rem; margin: .3rem 0; }
progress { width: 100%; accent-color: var(--accent); }

/* visning */
.viser { position: fixed; inset: 0; z-index: 50; background: rgba(0, 0, 0, .94); display: flex; flex-direction: column; }
.viser-top, .viser-bund { display: flex; gap: .5rem; align-items: center; padding: .6rem .9rem; color: #fff; }
.viser-top { padding-top: calc(.6rem + env(safe-area-inset-top)); }
.viser-bund { justify-content: center; flex-wrap: wrap; padding-bottom: calc(.6rem + env(safe-area-inset-bottom)); }
.viser-titel { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viser-indhold { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.viser-indhold img, .viser-indhold video { max-width: 100%; max-height: 100%; object-fit: contain; }
.viser-besked { color: #fff; text-align: center; padding: 2rem; }

/* tabeller og admin */
.tabel { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabel th, .tabel td { text-align: left; padding: .45rem .5rem; border-bottom: 1px solid var(--kant); vertical-align: middle; }
.tabel th { color: var(--dæmpet); font-weight: 600; }
.rullende { overflow-x: auto; }
.pille { display: inline-block; padding: 0 .55rem; border-radius: 999px; font-size: .78rem; background: var(--flade2); border: 1px solid var(--kant); }
.pille.ok { color: var(--ok); border-color: var(--ok); } .pille.dårlig { color: var(--fare); border-color: var(--fare); } .pille.gul { color: var(--advarsel); border-color: var(--advarsel); }
.tjek { display: flex; gap: .6rem; padding: .5rem 0; border-bottom: 1px solid var(--kant); }
.tjek-ikon { font-weight: 800; width: 1.4rem; text-align: center; }
.tjek.ok .tjek-ikon { color: var(--ok); } .tjek.dårlig .tjek-ikon { color: var(--fare); }
.valg { display: block; padding: .7rem; border: 1px solid var(--kant); border-radius: 10px; margin: .4rem 0; cursor: pointer; }
.valg.vælgt { border-color: var(--accent); background: var(--flade2); }
.toasts { position: fixed; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom)); display: grid; gap: .5rem; z-index: 99; max-width: calc(100vw - 2rem); }
.toast { background: var(--flade); border: 1px solid var(--kant); border-left: 4px solid var(--ok); padding: .6rem .9rem; border-radius: 8px; box-shadow: var(--skygge); }
.toast.fejl { border-left-color: var(--fare); color: var(--tekst); min-height: 0; }
@media (max-width: 640px) { .søg { width: 7rem; } .logo { font-size: 1.05rem; } .række-liste .flise.film { width: 200px; } }

/* opsætningsguide */
.guide { max-width: 46rem; margin: 0 auto; }
.trin-prikker { display: flex; gap: .4rem; margin: .4rem 0 1rem; }
.trin-prik { flex: 1; height: 6px; border-radius: 3px; background: var(--kant); }
.trin-prik.færdig { background: var(--accent); opacity: .55; }
.trin-prik.aktiv { background: var(--accent); }
button.valg { width: 100%; text-align: left; color: inherit; font: inherit; background: var(--flade); }
.kode.blok { white-space: pre-wrap; user-select: text; }

/* Offentlig, skrivebeskyttet arkitekturvisning */
.udvikling { max-width: 64rem; padding-top: 2rem; }
.udvikling-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.udvikling-intro { max-width: 48rem; margin-bottom: 1.5rem; }
.udvikling-gitter { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: .75rem; margin: 1rem 0 1.5rem; }
.simulering-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.simulering-top > div { flex: 1 1 24rem; }
.simulering-top p { margin-bottom: 0; color: var(--dæmpet); }
.simulerings-gitter { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: .75rem; margin-top: 1rem; }
.simulerings-bibliotek { margin: 0; background: var(--bg); }
.simulerings-bibliotek-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.simulerings-bibliotek-top h3 { margin: .2rem 0 .6rem; }
.simulerings-nye { flex: 0 0 auto; color: var(--accent); background: var(--flade2); }
.simulerings-beskeder { list-style: none; margin: .5rem 0 0; padding: 0; }
.simulerings-beskeder li { padding: .65rem 0; border-top: 1px solid var(--kant); }
.simulerings-afsender { margin-right: .5rem; }
.simulerings-tid { color: var(--dæmpet); font-size: .8rem; }
.simulerings-beskeder p { margin: .3rem 0 0; overflow-wrap: anywhere; }
.udvikling-kort { min-width: 0; margin: 0; }
.udvikling-kort p:last-child { margin-bottom: 0; }
.udvikling-kort code, .udvikling code { font-family: ui-monospace, Menlo, Consolas, monospace; overflow-wrap: anywhere; }
.udvikling-status { display: inline-block; margin-bottom: .5rem; }
.udvikling-status.online { color: var(--ok); }
.udvikling-status.venter { color: var(--advarsel); }
.eksamens-top { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .6rem; margin-bottom: .8rem; }
.eksamens-maerke { color: var(--accent); font-weight: 700; }
.eksamens-lag { list-style: none; counter-reset: eksamenslag; margin: 1rem 0 0; padding: 0; display: grid; gap: .75rem; }
.eksamens-lag-kort { counter-increment: eksamenslag; min-width: 0; padding: 1rem; border: 1px solid var(--kant); border-radius: 12px; background: var(--bg); }
.eksamens-lag-kort h3 { margin: .2rem 0 .5rem; }
.eksamens-lag-kort p:last-child { margin-bottom: 0; }
.eksamens-trafik { color: var(--accent); font-family: ui-monospace, Menlo, Consolas, monospace; overflow-wrap: anywhere; }
.eksamens-kilde code { overflow-wrap: anywhere; }
.bicep-filer { padding-left: 1.5rem; }
.bicep-filer li { padding: .45rem 0; }
.bicep-filer code { display: block; color: var(--accent); }
.bicep-filer span { display: block; color: var(--dæmpet); }
.eksamens-ordforklaringer { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: .75rem; margin: 1rem 0 0; }
.eksamens-ordforklaringer > div { min-width: 0; padding: .8rem; border: 1px solid var(--kant); border-radius: 10px; background: var(--bg); }
.eksamens-ordforklaringer dt { margin-bottom: .35rem; font-weight: 700; color: var(--accent); }
.eksamens-ordforklaringer dd { margin: 0; color: var(--dæmpet); }
.udvikling-status.fejl { color: var(--fare); border-color: var(--fare); }
.udvikling-pil { color: var(--accent); font-size: 1.25rem; text-align: center; }
.udvikling-terminal { overflow-x: auto; }
.udvikling-terminal pre { margin: .7rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--tekst); }

/* Produktvisning med browserlokale eksempeldata */
.produkt-demo { max-width: 78rem; padding-top: 1.1rem; }
.produkt-topbar { display: flex; align-items: center; gap: 1.5rem; min-height: 3.5rem; margin-bottom: 1rem; }
.produkt-topbar .logo { font-size: 1.45rem; }
.produkt-navigation { display: flex; align-items: center; gap: .35rem; flex: 1; }
.produkt-navigation a { padding: .5rem .75rem; border-radius: 999px; color: var(--dæmpet); text-decoration: none; }
.produkt-navigation a:hover { color: var(--tekst); background: var(--flade2); }
.produkt-velkomst { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(14rem, .85fr); align-items: center; min-height: 18rem; overflow: hidden; padding: clamp(1.4rem, 4vw, 3.25rem); border: 1px solid #28534f; border-radius: 24px; background: radial-gradient(ellipse at 82% 18%, rgba(80, 199, 171, .18), transparent 38%), linear-gradient(118deg, #102423 0%, #142126 60%, #1c3032 100%); box-shadow: var(--skygge); }
.produkt-velkomst-tekst { position: relative; z-index: 1; max-width: 39rem; }
.produkt-velkomst h1 { max-width: 12ch; margin: .9rem 0 .75rem; font-size: clamp(2.15rem, 5vw, 3.7rem); letter-spacing: -.045em; line-height: 1.03; }
.produkt-velkomst-tekst > p { max-width: 37rem; margin: 0 0 1.2rem; color: #b7c9c8; font-size: 1.05rem; }
.produkt-velkomst .knap { padding: .7rem 1rem; }
.produkt-eksempel { color: #a7e6d3; border-color: #3a7166; background: rgba(15, 70, 59, .5); }
.produkt-skykunst { position: relative; min-height: 14rem; }
.sky-form { position: absolute; top: 50%; left: 50%; width: 14rem; height: 7rem; transform: translate(-50%, -40%); border-radius: 5rem 5rem 3.5rem 3.5rem; background: linear-gradient(145deg, #9be4cd, #3eaa99); box-shadow: 0 1.3rem 4rem rgba(44, 188, 156, .2); }
.sky-form::before, .sky-form::after { position: absolute; content: ""; border-radius: 50%; background: inherit; }
.sky-form::before { width: 7rem; height: 7rem; top: -2.7rem; left: 2.8rem; }
.sky-form::after { width: 5.3rem; height: 5.3rem; top: -1.3rem; right: 0; }
.sky-form-sol { position: absolute; z-index: 1; top: -3.2rem; right: -1.7rem; width: 3.3rem; height: 3.3rem; border-radius: 50%; background: #f0c77c; box-shadow: 0 0 2.8rem rgba(240, 199, 124, .4); }
.sky-form-bølge { position: absolute; z-index: 2; left: 1.7rem; width: 10.5rem; height: 1.2rem; border-radius: 50%; background: rgba(239, 255, 246, .42); transform: rotate(-8deg); }
.sky-form-bølge-en { top: 2.1rem; }
.sky-form-bølge-to { top: 4.2rem; left: 4rem; width: 7rem; opacity: .7; }
.sky-prik, .sky-flyder { position: absolute; z-index: 3; display: grid; place-items: center; border: 1px solid rgba(198, 238, 223, .35); background: rgba(20, 43, 42, .78); box-shadow: 0 8px 26px rgba(0, 0, 0, .22); }
.sky-prik { width: .45rem; height: .45rem; border: 0; border-radius: 50%; background: #f0c77c; }
.sky-prik-en { top: 20%; left: 12%; }
.sky-prik-to { top: 28%; right: 10%; width: .3rem; height: .3rem; }
.sky-prik-tre { bottom: 8%; left: 20%; width: .25rem; height: .25rem; }
.sky-flyder { width: 2.7rem; height: 2.7rem; border-radius: 12px; color: #d3f0e2; font-size: 1.1rem; }
.sky-flyder-en { top: 11%; left: 17%; transform: rotate(-12deg); }
.sky-flyder-to { right: 8%; bottom: 15%; color: #f0d99f; transform: rotate(9deg); }
.sky-flyder-tre { top: 5%; right: 25%; color: #f1b1a2; transform: rotate(13deg); }
.produkt-demomaerke { display: flex; align-items: flex-start; gap: .65rem; margin: 1rem 0 1.2rem; padding: .65rem .85rem; border: 1px solid var(--kant); border-radius: 10px; background: var(--flade); color: var(--dæmpet); font-size: .88rem; }
.produkt-demomaerke > span { color: var(--accent); font-size: 1.1rem; }
.produkt-demomaerke p { margin: 0; }
.produkt-demomaerke strong { color: var(--tekst); }
.produkt-biblioteker { display: grid; grid-template-columns: minmax(15rem, .72fr) minmax(0, 1.8fr); gap: 1rem; align-items: start; scroll-margin-top: 1rem; }
.produkt-sidepanel, .produkt-filer { min-width: 0; padding: 1.25rem; border: 1px solid var(--kant); border-radius: 18px; background: var(--flade); }
.produkt-sidepanel { position: sticky; top: 1rem; }
.produkt-sidepanel-top, .produkt-filer-top { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.produkt-sidepanel-top h2, .produkt-filer-top h2 { margin: .2rem 0 .25rem; }
.produkt-overlinje { display: block; color: var(--dæmpet); font-size: .68rem; font-weight: 750; letter-spacing: .12em; }
.produkt-mappeikon { display: grid; place-items: center; width: 2rem; height: 2rem; border: 1px solid var(--kant); border-radius: 9px; color: var(--accent); background: var(--flade2); }
.produkt-biblioteksliste { display: grid; gap: .3rem; margin: 1rem 0; }
.produkt-bibliotek-valg { display: flex; align-items: center; gap: .65rem; width: 100%; padding: .55rem .6rem; border-color: transparent; background: transparent; text-align: left; }
.produkt-bibliotek-valg:hover, .produkt-bibliotek-valg.aktiv { background: var(--flade2); border-color: var(--kant); }
.produkt-bibliotek-ikon { display: grid; flex: 0 0 2rem; place-items: center; width: 2rem; height: 2rem; border-radius: 9px; color: var(--accent); background: rgba(52, 179, 160, .12); font-weight: 750; }
.produkt-bibliotek-ikon.sommerhus { color: #e7c37a; background: rgba(231, 195, 122, .12); }
.produkt-bibliotek-ikon.venner { color: #d1a5e8; background: rgba(209, 165, 232, .12); }
.produkt-bibliotek-navn { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.produkt-bibliotek-antal, .produkt-personantal { color: var(--dæmpet); font-size: .8rem; }
.produkt-sidepanel-streg { height: 1px; margin: 1.15rem 0; background: var(--kant); }
.produkt-personer-top { margin-bottom: .7rem; }
.produkt-personliste { display: grid; gap: .8rem; }
.produkt-person { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.produkt-avatar { display: inline-grid; flex: 0 0 2.3rem; place-items: center; width: 2.3rem; height: 2.3rem; border: 1px solid rgba(255,255,255,.13); border-radius: 50%; color: #fff; font-size: .7rem; font-weight: 750; }
.produkt-avatar.koralfarve { background: linear-gradient(145deg, #d77f70, #8e4e53); }
.produkt-avatar.blaafarve { background: linear-gradient(145deg, #7799cc, #415b88); }
.produkt-avatar.lillafarve { background: linear-gradient(145deg, #b28ac6, #71548a); }
.produkt-avatar.groenfarve { background: linear-gradient(145deg, #72af8c, #3f735c); }
.produkt-avatar.gulfarve { background: linear-gradient(145deg, #cfaa65, #89713d); }
.produkt-avatar.lille { flex-basis: 1.35rem; width: 1.35rem; height: 1.35rem; font-size: .52rem; }
.produkt-person-navn { display: grid; min-width: 0; }
.produkt-person-navn strong { overflow: hidden; font-size: .84rem; text-overflow: ellipsis; white-space: nowrap; }
.produkt-person-navn > span { color: var(--dæmpet); font-size: .74rem; }
.produkt-lagring { display: grid; gap: .2rem; margin-top: 1.25rem; padding: .85rem; border: 1px solid rgba(52, 179, 160, .18); border-radius: 12px; background: rgba(52, 179, 160, .07); }
.produkt-lagring-ikon { color: var(--accent); font-size: 1.25rem; }
.produkt-lagring strong { font-size: .87rem; }
.produkt-lagring > span:last-child { color: var(--dæmpet); font-size: .77rem; }
.produkt-filer-top { align-items: flex-start; flex-wrap: wrap; }
.produkt-filer-top h2 { margin-top: .3rem; font-size: 1.4rem; }
.produkt-filer-top p { margin: 0; font-size: .85rem; }
.produkt-soegefelt { display: flex; align-items: center; gap: .45rem; min-width: min(100%, 15rem); padding: .25rem .55rem; border: 1px solid var(--kant); border-radius: 9px; background: var(--bg); color: var(--dæmpet); }
.produkt-soegefelt > span:first-child { font-size: 1.35rem; }
.produkt-soegefelt input { width: 100%; min-width: 0; padding: .3rem 0; border: 0; outline: 0; background: transparent; }
.produkt-soegefelt kbd { flex: 0 0 auto; padding: .05rem .3rem; border: 1px solid var(--kant); border-radius: 4px; font-size: .65rem; }
.skjult-tekst { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; clip-path: inset(50%); }
.produkt-filvaelger { display: flex; gap: .25rem; overflow-x: auto; margin: 1.2rem 0 .9rem; padding-bottom: .2rem; }
.produkt-filter { flex: 0 0 auto; padding: .35rem .7rem; border-color: transparent; border-radius: 999px; color: var(--dæmpet); background: transparent; font-size: .84rem; }
.produkt-filter:hover, .produkt-filter.aktiv { border-color: var(--kant); color: var(--tekst); background: var(--flade2); }
.produkt-filgitter { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.produkt-filkort { display: block; min-width: 0; overflow: hidden; padding: 0; border-color: var(--kant); border-radius: 12px; text-align: left; background: var(--bg); transition: transform .16s ease, border-color .16s ease; }
.produkt-filkort:hover { transform: translateY(-2px); border-color: var(--accent); }
.produkt-filbillede { position: relative; display: grid; place-items: center; aspect-ratio: 1.7; overflow: hidden; color: rgba(255,255,255,.8); font-size: 2.7rem; text-shadow: 0 2px 12px rgba(0,0,0,.25); }
.produkt-filbillede.strand, .produkt-dialog-billede.strand { background: radial-gradient(ellipse at 72% 20%, #f5d894 0 8%, transparent 8.5%), linear-gradient(160deg, #bdded1 0 35%, #6fb7b1 36% 58%, #e6d0a6 59% 74%, #b99b71 75%); }
.produkt-filbillede.have, .produkt-dialog-billede.have { background: radial-gradient(ellipse at 26% 38%, #e5a89a 0 8%, transparent 8.5%), linear-gradient(145deg, #b6d2a4, #609b7b 52%, #d7bc91); }
.produkt-filbillede.fjorden, .produkt-dialog-billede.fjorden { background: linear-gradient(155deg, #eed39b 0 22%, #87bcb2 23% 48%, #548a91 49% 72%, #d2c19e 73%); }
.produkt-filbillede.skov, .produkt-dialog-billede.skov { background: radial-gradient(ellipse at 70% 22%, #e9d496 0 7%, transparent 7.5%), linear-gradient(140deg, #8ba981, #436e60 50%, #beac80); }
.produkt-filbillede.dokument, .produkt-dialog-billede.dokument { background: linear-gradient(135deg, #304344, #1d292d); color: #91d5c0; font-size: 2rem; }
.produkt-filbillede.video, .produkt-dialog-billede.video { background: radial-gradient(ellipse at 70% 20%, #d2b88b, transparent 35%), linear-gradient(140deg, #6d8490, #354f59 50%, #8b7967); }
.produkt-filtype { position: absolute; right: .5rem; bottom: .5rem; padding: .12rem .38rem; border: 1px solid rgba(255,255,255,.24); border-radius: 5px; background: rgba(8,18,19,.58); color: #fff; font-size: .59rem; letter-spacing: .08em; }
.produkt-filinfo { display: grid; gap: .35rem; padding: .65rem .7rem .7rem; }
.produkt-filnavn { overflow: hidden; font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }
.produkt-filmetadata { display: flex; align-items: center; gap: .3rem; overflow: hidden; color: var(--dæmpet); font-size: .7rem; white-space: nowrap; }
.produkt-filmetadata .produkt-avatar { flex-shrink: 0; }
.produkt-filbund { display: flex; justify-content: space-between; gap: .5rem; padding-top: .35rem; border-top: 1px solid var(--kant); color: var(--dæmpet); font-size: .68rem; }
.produkt-filbibliotek { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.produkt-filstorrelse { flex: 0 0 auto; }
.produkt-tom { padding: 2rem 1rem; text-align: center; color: var(--dæmpet); }
.produkt-tryghed { display: flex; align-items: flex-start; gap: .6rem; margin-top: 1rem; padding: .8rem; border-radius: 10px; background: var(--flade2); }
.produkt-tryghed > span { color: var(--accent); }
.produkt-tryghed p { margin: 0; color: var(--dæmpet); font-size: .78rem; }
.produkt-tryghed strong { color: var(--tekst); }
.produkt-aktivitet { margin: 1.15rem 0; padding: clamp(1rem, 3vw, 1.6rem); border: 1px solid var(--kant); border-radius: 18px; background: linear-gradient(140deg, var(--flade), #15272a); scroll-margin-top: 1rem; }
.produkt-aktivitet-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.produkt-aktivitet-top h2 { margin: .25rem 0; font-size: 1.4rem; }
.produkt-aktivitet-top p { margin: 0; color: var(--dæmpet); font-size: .87rem; }
.produkt-knap-lys { border-color: #35685f; color: #b5ebd7; background: rgba(26, 82, 68, .34); }
.simulerings-gitter { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.simulerings-bibliotek { padding: .9rem; border-radius: 12px; background: rgba(6, 15, 17, .18); }
.simulerings-bibliotek-top { align-items: center; }
.simulerings-bibliotek-top h3 { margin: 0; font-size: .88rem; }
.simulerings-nye { border-color: #35685f; color: #a7e6d3; background: rgba(15, 70, 59, .5); }
.simulerings-beskeder li { display: flex; gap: .5rem; }
.simulerings-beskeder li:first-child { border-top: 0; }
.simulerings-afsender { display: flex; flex: 0 0 auto; align-items: center; gap: .35rem; }
.simulerings-afsender strong { font-size: .7rem; }
.simulerings-beskeder p { display: grid; gap: .15rem; min-width: 0; margin: 0; color: var(--tekst); font-size: .77rem; }
.simulerings-tid { color: var(--dæmpet); font-size: .67rem; }
.produkt-slutbanner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin: 1.15rem 0 2rem; padding: clamp(1.2rem, 4vw, 2rem); border: 1px solid #28534f; border-radius: 18px; background: radial-gradient(ellipse at 20% 5%, rgba(80, 199, 171, .12), transparent 45%), var(--flade); }
.produkt-slutbanner h2 { margin: .3rem 0; font-size: clamp(1.2rem, 3vw, 1.8rem); }
.produkt-slutbanner p { max-width: 43rem; margin: .3rem 0 0; color: var(--dæmpet); }
.produkt-fil-dialog { width: min(34rem, calc(100vw - 2rem)); max-height: min(90vh, 48rem); overflow: auto; padding: 0; border: 1px solid var(--kant); border-radius: 18px; color: var(--tekst); background: var(--flade); box-shadow: var(--skygge); }
.produkt-fil-dialog::backdrop { background: rgba(4, 10, 12, .76); backdrop-filter: blur(4px); }
.produkt-fil-dialog form { position: absolute; z-index: 1; top: .7rem; right: .7rem; }
.produkt-dialog-luk { display: grid; place-items: center; width: 2rem; height: 2rem; padding: 0; border-color: rgba(255,255,255,.25); border-radius: 50%; color: #fff; background: rgba(10,20,22,.72); font-size: 1.35rem; }
.produkt-dialog-billede { display: grid; place-items: center; min-height: 14rem; color: rgba(255,255,255,.75); font-size: 3rem; }
.produkt-dialog-indhold { padding: 1.2rem; }
.produkt-dialog-indhold h2 { margin: .3rem 0; overflow-wrap: anywhere; }
.produkt-dialog-indhold > p { color: var(--dæmpet); }
.produkt-dialog-detaljer { display: grid; grid-template-columns: 1fr 2fr; gap: .55rem; padding: .8rem 0; border-top: 1px solid var(--kant); border-bottom: 1px solid var(--kant); }
.produkt-dialog-detaljer span { color: var(--dæmpet); font-size: .67rem; letter-spacing: .06em; }
.produkt-dialog-detaljer strong { font-size: .8rem; }
.produkt-dialog-note { margin-bottom: 0; font-size: .75rem; }
.produkt-arkitektur { margin: 2rem 0; border: 1px solid var(--kant); border-radius: 16px; background: var(--flade); scroll-margin-top: 1rem; }
.produkt-arkitektur > summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.2rem; cursor: pointer; list-style: none; }
.produkt-arkitektur > summary::-webkit-details-marker { display: none; }
.produkt-arkitektur > summary > span:first-child { display: grid; gap: .2rem; }
.produkt-arkitektur > summary strong { font-size: 1.05rem; }
.produkt-arkitektur[open] > summary { border-bottom: 1px solid var(--kant); }
.produkt-arkitektur[open] > :not(summary) { margin-right: 1rem; margin-left: 1rem; }
.produkt-arkitektur[open] > section:first-of-type { margin-top: 1rem; }
.produkt-arkitektur-pil { color: var(--accent); font-size: 1.4rem; }
.produkt-arkitektur[open] .produkt-arkitektur-pil { transform: rotate(45deg); }

@media (max-width: 780px) {
  .produkt-biblioteker { grid-template-columns: minmax(0, 1fr); }
  .produkt-sidepanel { position: static; }
  .produkt-personliste { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
  .produkt-velkomst { grid-template-columns: minmax(0, 1fr) minmax(10rem, .6fr); }
  .simulerings-gitter { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
}
@media (max-width: 560px) {
  .produkt-topbar { gap: .6rem; flex-wrap: wrap; }
  .produkt-navigation { order: 3; flex-basis: 100%; justify-content: space-between; border-top: 1px solid var(--kant); }
  .produkt-navigation a { padding: .45rem .4rem; font-size: .84rem; }
  .produkt-velkomst { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-bottom: 10rem; }
  .produkt-skykunst { position: absolute; right: 0; bottom: -5.3rem; width: 15rem; min-height: 14rem; opacity: .8; }
  .produkt-filgitter { grid-template-columns: minmax(0, 1fr); }
  .produkt-filbillede { aspect-ratio: 2.15; }
  .produkt-slutbanner { align-items: flex-start; flex-direction: column; }
  .produkt-filer-top { align-items: stretch; }
  .produkt-soegefelt { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .produkt-filkort { transition: none; }
  .produkt-filkort:hover { transform: none; }
}