:root { --tekst: #222; --svag: #666; --baggrund: #fdfcf9; --linje: #ddd; --accent: #2a5d8f; --fejl: #b00020; }
@media (prefers-color-scheme: dark) {
  :root { --tekst: #e8e6e1; --svag: #a09d96; --baggrund: #1b1b1a; --linje: #3a3a38; --accent: #8ab4e0; --fejl: #ff6b81; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--baggrund); color: var(--tekst);
       font: 19px/1.6 Georgia, "Iowan Old Style", "Times New Roman", serif; }
main { max-width: 40em; margin: 0 auto; padding: 0 16px 4em; }
.top { max-width: 40em; margin: 0 auto; padding: 1em 16px; font-family: -apple-system, system-ui, sans-serif; }
.top a { color: var(--svag); text-decoration: none; font-weight: 600; }
a { color: var(--accent); }
h1, h2, h3 { line-height: 1.25; }
article h1 { font-size: 1.6em; }
article table { border-collapse: collapse; font-size: .85em; display: block; overflow-x: auto; }
article td, article th { border: 1px solid var(--linje); padding: .3em .5em; }
.artikler { list-style: none; padding: 0; }
.artikler li { padding: .8em 0; border-bottom: 1px solid var(--linje); }
.artikler a { font-size: 1.1em; text-decoration: none; }
.dato { display: block; color: var(--svag); font-size: .8em; }
.login { max-width: 20em; margin: 3em auto; display: flex; flex-direction: column; gap: .6em; }
input, button { font: inherit; padding: .5em .7em; border-radius: 8px; border: 1px solid var(--linje);
                background: transparent; color: inherit; }
button { background: var(--accent); color: #fff; border: none; cursor: pointer; }
button.farlig { background: var(--fejl); }
.fejl { color: var(--fejl); }
.tilbage { margin-top: 3em; }
body.admin { font: 16px/1.5 -apple-system, system-ui, sans-serif; }
body.admin main, body.admin .top { max-width: 90em; }
.upload, .titel, .knapper { display: flex; flex-wrap: wrap; gap: .6em; align-items: end; margin: 1em 0; }
.titel input { flex: 1; min-width: 12em; }
.liste { width: 100%; border-collapse: collapse; }
.liste td, .liste th { text-align: left; padding: .5em; border-bottom: 1px solid var(--linje); }
.maerke { font-size: .8em; color: var(--svag); border: 1px solid var(--linje); border-radius: 4px; padding: 0 .3em; }
.side-om-side { display: grid; grid-template-columns: 1fr 1fr; gap: 1em; }
.side-om-side iframe { width: 100%; height: 85vh; border: 1px solid var(--linje); }
.side-om-side article { height: 85vh; overflow-y: auto; padding: 0 1em; font: 17px/1.6 Georgia, serif; }
@media (max-width: 800px) { .side-om-side { grid-template-columns: 1fr; } }