/* Moved out of inline <style> on 11.09.2026 (queue item 11). It was 39.150 bytes of
   byte-identical CSS re-sent on every address page, against a gv.css of 36.882 - we shipped
   more uncached CSS per address page than our entire cached stylesheet. The round-trip
   argument for inlining does not apply: the page already fetches gv.css, so a second cached
   file costs nothing on first paint and is free on every page after it.
   Linked AFTER gv.css so these rules still win the cascade, which is what the inline block
   did. Keep it that way. */

/* ---- was Adresse/_Stil.cshtml ---- */
    /* THE ADDRESS PAGE'S OWN STYLES. Split out of Adresse.cshtml on 23.08.2026, when that file
       crossed its 500-line budget - it had been sitting one line under it, so any edit at all
       tripped the gate, which is the ratchet asking for this split rather than for a smaller edit.

       These rules stay a page-level block rather than moving into gv.css, which is the existing
       design and not an oversight: gv.css is the SHARED base layer, and what is here is precisely
       what is not shared. src/CLAUDE.md owns that layering - gv.css is linked first so the page
       still wins the cascade, and a token this page does not deliberately override belongs in
       gv.css instead.

       Written as a CSS comment INSIDE the block on purpose. A Razor comment above it is invisible
       to a CSS scanner, which then reads the prose as a selector spanning nine lines and silently
       swallows the first real rule - gv-doctor caught exactly that on this file's first draft. */
        .headline { font-size:1.15rem; margin:.5rem 0 1rem; }
        .headline strong { color:var(--accent); font-size:1.5rem; }
        .beta { display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.05em;
            background:var(--warnbg); color:var(--warn); padding:.15rem .6rem; border-radius:999px; vertical-align:middle; }
        #kort { height:26rem; border-radius:14px; border:1px solid var(--line); margin:1rem 0; }
        .legend { display:flex; gap:1.2rem; font-size:.82rem; color:var(--muted); flex-wrap:wrap; }
        .legend span[class^="l-"]::before { content:''; display:inline-block; width:.9rem; height:.6rem; margin-right:.35rem; border-radius:3px; }
        .l-matrikel::before { background:transparent; border:2px solid #e8c547; }
        .l-bygning::before { background:#b85c48cc; }
        .l-envelope::before { background:#4f9e3fb3; }
        .l-poi::before { background:#3a6ea5; }
        .l-gront::before { background:#7ea653; }
        .lag-flere { flex-basis:100%; font-size:.8rem; color:var(--muted); }
        .lag-flere > summary { cursor:pointer; color:var(--accent); }
        .lag-valg { display:flex; flex-wrap:wrap; gap:.25rem 1.1rem; margin:.4rem 0 .2rem; }
        .lag-valg label { cursor:pointer; user-select:none; display:inline-flex; align-items:center; }
        .lag-valg label b { display:inline-block; width:.75rem; height:.5rem; border-radius:2px; margin:0 .3rem; }
        .poi-leg { font-size:.8rem; color:var(--muted); line-height:1.9; }
        .poi-leg b { display:inline-block; width:.72rem; height:.72rem; border-radius:50%; border:1.5px solid #fff;
            box-shadow:0 0 0 1px rgba(0,0,0,.15); vertical-align:-1px; margin:0 .25rem 0 .75rem; }
        /* "Bygningerne på grunden" - one card per building. The floor stack is the point of the
           block, so it is drawn as the building stands (attic on top, basement at the bottom);
           everything BBR also knows is demoted to the fact line underneath.
           It deliberately has NO bar proportional to the floor area, though that was the first
           draft and it looked good: BBR registers an area for EVERY floor of a building in 2,7% of
           cases (278 of the 10.199 buildings that show a stack, 1% BERNOULLI sample of bbr_bygning,
           03.08.2026). In the other 97,3% some floors would draw a full bar and the rest none at
           all, so kulsviervej-75-2800 read as a basement with two empty floors above it - when Stue
           and 1. sal are simply unregistered and together hold most of the 432 m². A bar length is a
           claim about size, and an absent bar claims zero rather than unknown. */
        .byg-kort { border:1px solid var(--line); border-radius:10px; padding:.65rem .8rem; margin:.6rem 0; background:var(--card); }
        .byg-top { display:flex; align-items:baseline; justify-content:space-between; gap:.6rem; }
        .byg-navn { font-weight:700; }
        .byg-nr { font-weight:400; color:var(--muted); font-size:.8rem; }
        .byg-areal { font-weight:700; white-space:nowrap; text-align:right; }
        .byg-areal small { display:block; font-weight:400; font-size:.68rem; color:var(--muted); }
        /* Capped so the m² stays next to its floor label: full width on a 1280 px screen put the
           number a hand's width away from the row it belongs to. */
        .byg-etg { list-style:none; margin:.55rem 0 0; padding:0; max-width:24rem; }
        .byg-etg li { display:flex; justify-content:space-between; gap:.7rem;
            padding:.26rem .5rem; margin-bottom:2px; font-size:.86rem; border-radius:4px; background:var(--accentbg); }
        .byg-etg-tal { font-variant-numeric:tabular-nums; color:var(--muted); }
        .byg-fakta { display:flex; flex-wrap:wrap; gap:.1rem .85rem; margin:.55rem 0 0; font-size:.8rem; color:var(--muted); }
        .byg-fakta b { font-weight:600; color:var(--fg); }
        .maplibregl-popup-content { font:14px/1.5 system-ui,sans-serif; padding:.6rem .85rem; border-radius:10px; box-shadow:0 3px 14px rgba(0,0,0,.18); color:#33403a; }
        /* Icon + word, kept together when the line wraps. Replaced `.pe`, which spaced an emoji
           glyph; the icons are 14px SVGs that follow the layer colour. */
        .poi-leg .poilg { display:inline-flex; align-items:center; gap:.22rem; margin-left:.7rem; }
        .maplibregl-popup-content strong { font-size:14.5px; color:#1a1a17; }
        .info { display:inline-flex; align-items:center; justify-content:center; width:1.2em; height:1.2em;
            border-radius:50%; border:1px solid var(--muted); color:var(--muted); font-size:.72rem; font-weight:700;
            cursor:pointer; vertical-align:baseline; background:transparent; padding:0; line-height:1; }
        .info:hover, .info:focus { border-color:var(--accent); color:var(--accent); outline:none; }
        .kildeknap { background:none; border:none; padding:0; color:var(--muted); font:inherit; font-size:.78rem;
            text-decoration:underline dotted; text-underline-offset:2px; cursor:pointer; }
        .kildeknap:hover, .kildeknap:focus { color:var(--accent); outline:none; }
        .info-boks { display:block; margin:.4rem 0 .2rem; padding:.55rem .75rem; background:var(--card);
            border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:8px;
            font-size:.83rem; line-height:1.5; color:var(--fg); max-width:36rem; }
        .info-boks[hidden] { display:none; }
        /* The warning twin of .info-boks, for where the DATA contradicts itself and the reader would
           otherwise trust the wrong half. Not a red alarm box: a register being behind is not a hazard. */
        .obs-boks { display:block; margin:.6rem 0 0; padding:.55rem .75rem; background:var(--warnbg);
            border:1px solid var(--line); border-left:3px solid var(--warn); border-radius:8px;
            font-size:.88rem; line-height:1.5; color:var(--fg); max-width:36rem; }  .obs-boks svg { color:var(--warn); }
        .mere { background:none; border:none; padding:0; color:var(--accent); font:inherit; font-size:.78rem; text-decoration:underline; text-underline-offset:2px; cursor:pointer; }
        .mere:hover, .mere:focus { color:var(--fg); outline:none; }
        .mere-boks { display:block; margin-top:.5rem; padding-top:.5rem; border-top:1px dashed var(--line); }
        .mere-boks[hidden] { display:none; }
        @media (max-width: 540px) {
            /* !important is not laziness here: FIVE of these tables carry an inline
               style="font-size:.88rem", and an inline declaration beats every stylesheet selector.
               Those sizes are a desktop preference, and on a phone the fit has to win - without it
               the five-column school table broke "Afstand" into "Afsta/nd" and "Karakter" into
               "Karak/ter". The wrap rule below was working; the columns were simply too tight to
               need it on words that short. Danish compounds (Sophienborgskolen) still break, and
               nothing short of sideways scrolling avoids that in a column this narrow.
               There were SIX until 03.08.2026: the buildings table was the widest of them and the
               only one whose answer was a min-width and a sideways scroll, so it became cards
               instead. The rules it needed here are gone with it. */
            table { table-layout:fixed; font-size:.85rem !important; }
            /* Fixed layout hands each column a share decided by the rules below and NOT by its
               content, so anything longer than its share overflows the cell box and PAINTS ACROSS
               the next one instead of wrapping. That put "Offentlig vurdering" on top of its own
               number and the unbreakable "2024/2025" on top of the next heading (Jonas, 28.07.2026,
               on his phone). It reads as a rendering fault, not as a tight column.
               `td.kilde` already carried this; every cell needs it, because any cell can hold a
               token longer than its column - a school name, a year range, a Danish compound. */
            /* overflow-wrap is what actually stops the overlap, and it is verified: 10 cells had
               content wider than their box before, 0 after.
               hyphens:auto is a progressive enhancement on top and is NOT verified - the document
               is lang="da", so a browser WITH a Danish hyphenation dictionary should break
               compounds at syllable boundaries with a visible hyphen ("Sophienborgs-kolen" instead
               of "Sophienborgsk/olen"). Headless chromium on this box ships no such dictionary, so
               it is a no-op here and I could not see it either way. Harmless where unsupported. */
            td, th { padding:.4rem .3rem; overflow-wrap:anywhere; -webkit-hyphens:auto; hyphens:auto; }
            /* Header cells a notch smaller again, which is what gv.css already does for `thead th`.
               Several of these tables write a bare <tr><th> header row with no <thead>, so that rule
               never reached them - and "Karakter" broke into "Karak/ter" in a column that had room
               for the word at this size. No !important needed: a direct rule on th beats the size
               inherited from the table. */
            th { font-size:.78rem; }
            /* Five columns do not fit a phone, and shrinking type only moves the problem: at 390px
               the school table still broke "Afstand" and "Karakter" mid-word. So drop the least
               decision-relevant column instead of squeezing all five. "Elever" is school SIZE - it
               is on the school's own page, one tap away through the name, while the grade and its
               5-year span are the reason to look at this table at all. */
            .skjul-smal { display:none; }
            td:first-child, th:first-child { width:32%; }
            td.num { width:20%; }
            td.kilde { font-size:.68rem; line-height:1.35; overflow-wrap:anywhere; }
            h1 { font-size:1.25rem; padding-right:3.2rem; }
        }
        #delknap { position:absolute; top:0; right:0; }
        .titel { position:relative; }
        .warnbox { background:var(--warnbg); color:var(--warn); border-radius:10px; padding: .8rem 1rem; font-size:.85rem; margin:1rem 0; }
        .warnbox ul { margin:.3rem 0 0 1.1rem; padding:0; }
        .paavej { display:inline-block; font-size:.68rem; font-weight:700; letter-spacing:.05em;
            border:1px solid var(--line); color:var(--muted); padding:.1rem .5rem; border-radius:999px; vertical-align:middle; }
        .kommer { color:var(--muted); font-size:.9rem; margin:.3rem 0 .8rem; }
        .vigtigst { border:1px solid var(--line); background:var(--card); border-radius:14px; padding:.8rem 1rem .7rem; margin:.9rem 0 .3rem; }
        .vigtigst h2 { margin:0; padding:0; border:0; font-size:.98rem; }
        .vigtigst-grid { display:grid; grid-template-columns:1fr 1fr; gap:.1rem 1.6rem; margin-top:.35rem; }
        @media (max-width:600px) { .vigtigst-grid { grid-template-columns:1fr; } }
        .vigtigst ul { list-style:none; margin:0; padding:0; }
        .vigtigst li { margin:.3rem 0; font-size:.92rem; line-height:1.45; padding-left:.5rem; border-left:3px solid transparent; }
        .vigtigst li.vk-plus { border-left-color:var(--accent); }
        .vigtigst li.vk-minus { border-left-color:#c33b32; }
        .vigtigst li a { color:inherit; text-decoration:none; display:flex; gap:.55rem; align-items:baseline; }
        .vigtigst li a:hover .vk-txt, .vigtigst li a:focus .vk-txt { text-decoration:underline; }
        .vk-tag { flex:0 0 auto; min-width:2.1rem; text-align:center; font-weight:700; font-size:.78rem; border-radius:6px; padding:.08rem .3rem; letter-spacing:.08em; }
        .vk-plus .vk-tag { background:var(--accentbg); color:var(--accent); }
        .vk-minus .vk-tag { background:#f7e2e0; color:#c33b32; }
        @media (prefers-color-scheme: dark) { .vk-minus .vk-tag { background:#3a201c; color:#e69086; } .vigtigst li.vk-minus { border-left-color:#e69086; } }
        .vigtigst-obs { margin:.5rem 0 0; display:flex; gap:.4rem; flex-wrap:wrap; }
        .vigtigst-obs a { color:var(--warn); background:var(--warnbg); text-decoration:none; border-radius:999px; padding:.12rem .65rem; font-size:.82rem; }
        .vigtigst-tom { color:var(--muted); font-size:.85rem; margin:.7rem 0 .3rem; }
        .vbar { display:grid; grid-template-columns:3.2rem 1fr 9rem; gap:.5rem; align-items:center; font-size:.85rem; margin:.15rem 0; }
        .vbar .track { background:var(--accentbg); border-radius:4px; height:.9rem; }
        .vbar .fill { display:block; background:var(--accent); opacity:.65; height:100%; border-radius:4px; }
        .vbar .b { text-align:right; font-variant-numeric:tabular-nums; }
        .skraa { margin:.1rem 0 1.3rem; }
        .skraa-ctrls { display:flex; flex-direction:column; gap:.1rem; }
        @media (min-width:640px) { .skraa-ctrls { flex-direction:row; gap:1.4rem; align-items:center; flex-wrap:wrap; } .skraa-ctrls .skraa-ctrl { margin:0; } }
        .skraa-ctrl { margin:.35rem 0 0; display:flex; gap:.25rem; align-items:center; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; min-width:0; }
        .skraa-ctrl::-webkit-scrollbar { display:none; }
        .skraa-ctrl .lab { flex:0 0 auto; color:var(--muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; margin-right:.15rem; }
        .skraa-ctrl button { flex:0 0 auto; font:inherit; font-size:.8rem; padding:.22rem .62rem; border:1px solid var(--line); border-radius:999px; background:transparent; color:inherit; cursor:pointer; white-space:nowrap; }
        .skraa-ctrl button.aktiv { background:var(--accent); color:#fff; border-color:var(--accent); }
        /* aspect-ratio reserves the space before the image lands (no layout shift); crops are
           1500x1500 except at the image edge - object-fit:cover keeps the frame square. */
        .skraa-view { position:relative; margin-top:.4rem; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:#222; aspect-ratio:1/1; }
        .skraa-view img { display:block; width:100%; height:100%; object-fit:cover; }
        .skraa-msg { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:.9rem; text-align:center; padding:1rem; text-shadow:0 1px 3px #000; pointer-events:none; }
        .sammenlign { overflow-x:auto; }
        .sammenlign table { border-collapse:collapse; width:100%; font-size:.9rem; }
        .sammenlign th, .sammenlign td { padding:.45rem .6rem; text-align:right; border-bottom:1px solid var(--line); white-space:nowrap; }
        .sammenlign thead th { font-weight:600; vertical-align:bottom; }
        .sammenlign th:first-child, .sammenlign td:first-child { text-align:left; color:var(--muted); font-weight:400; }
        .sammenlign td.din { font-weight:700; font-variant-numeric:tabular-nums; }
        .sammenlign td { font-variant-numeric:tabular-nums; }
        /* MUST stay below the nowrap rule above, not up in the phone block with the other mobile
           overrides: a media query adds NO specificity, so with `.sammenlign th` on both sides it is
           source order that decides, and the block up there loses. Cost an entire wrong fix
           (28.07.2026) - the CSS was live and measurably doing nothing.
           Why it is needed: nowrap cells plus an overflow-x wrapper is a sound pattern, but
           `table-layout:fixed` in the phone block pins the table to 100% width, so the wrapper never
           gets anything to scroll and the text spills across the next cell instead. Two rules that
           are each right and together wrong. On a phone, let it wrap - the values are short and only
           the headings need a second line. */
        @media (max-width: 540px) {
            .sammenlign th, .sammenlign td { white-space:normal; }
        }
        @media print {
            #kort, #rettelse, #delknap, .maplibregl-control-container { display:none !important; }
            details { open:true; } details > * { display:block; }
            body { padding:0; font-size:12px; }
            .warnbox { border:1px solid #999; }
            a { text-decoration:none; color:inherit; }
        }
        /* --- redesign: hero, themes and navigation --- */
        .fakta-chips { display:flex; flex-wrap:wrap; gap:.35rem; margin:.6rem 0 .1rem; font-size:.9rem; align-items:center; }
        /* Sits under the chips it explains, deliberately quiet: this is context, not a warning.
           An alarm colour here would confirm the reader's first thought instead of correcting it. */
        .bolig-andel { margin:.45rem 0 .1rem; font-size:.85rem; color:var(--muted); max-width:44rem; }
        .fakta-chips span, .fakta-chips .em-chip { border:1px solid var(--line); border-radius:999px; padding:.16rem .7rem; background:var(--card); white-space:nowrap; }
        /* A chip may CONTAIN a link; the pill is the affordance, so the anchor inherits (as .vigtigst li a).
           The chip stays a <span>: as a bare <a> it matched neither `.fakta-chips span` (lost the pill,
           kept an underline) nor the mobile `span + span::before` separator. chip-obs = this fact
           contradicts the register it came from; --warn/--warnbg are gv.css's own tokens (amber, and they
           flip per theme by themselves), NOT the red .vk-minus uses - that red means bad-for-you, this is
           just a register being behind. */
        .fakta-chips a { color:inherit; text-decoration:none; display:inline-flex; align-items:center; gap:.32rem; }
        .fakta-chips a:hover, .fakta-chips a:focus { text-decoration:underline; outline:none; }
        .fakta-chips .chip-obs { border-color:var(--warn); background:var(--warnbg); } .fakta-chips .chip-obs svg { color:var(--warn); }
        .fakta-chips .em-chip { font-weight:700; border:0; text-decoration:none; padding:.16rem .6rem; }
        /* Mobile fold discipline (12.08.2026): the chips kept their facts but lose the pill
           chrome, so seven of them cost two text lines instead of four button rows and the
           first market number lands on screen one. */
        @media (max-width: 540px) {
            .fakta-chips { gap:.15rem .55rem; font-size:.84rem; }
            .fakta-chips span { border:0; background:none; padding:0; white-space:normal; }
            .fakta-chips span + span::before { content:"· "; color:var(--muted); }
        }
        /* The for-sale photo band: the listing's own cached photos (listing_foto 0-4), lead photo
           plus up to three thumbs. aspect-ratio reserves the space, so the band cannot shove the
           page when the images arrive - the front page learned that lesson the hard way. */
        .lifotos { display:grid; grid-template-columns:2fr 1fr; gap:.45rem; margin:.65rem 0 .3rem; }
        .lifotos img { width:100%; height:100%; object-fit:cover; border-radius:12px; border:1px solid var(--line); display:block; }
        .lifotos .lf-stor { aspect-ratio:3/2; }
        .lifotos.en { grid-template-columns:1fr; max-width:44rem; }
        .lf-thumbs { display:grid; grid-template-rows:repeat(3,1fr); gap:.45rem; min-width:0; }
        .lf-thumbs img { aspect-ratio:3/2; }
        /* The homes for sale at this address, under the band and spanning it (17.08.2026). Scrolls
           sideways rather than wrapping: a project sale can carry twelve, and four rows of chips
           would push the price and the facts off the first screen - which is what the hero is for.
           `grid-column:1/-1` puts it under BOTH the big photo and the thumb strip in the two-column
           layout and under the single photo in `.en`, with no second rule for the phone. */
        .lf-udbud { grid-column:1 / -1; display:flex; gap:.4rem; overflow-x:auto; padding:.15rem .1rem .25rem;
            scrollbar-width:thin; }
        .lf-u { display:flex; align-items:center; gap:.4rem; flex:0 0 auto; max-width:15rem;
            border:1px solid var(--line); border-radius:10px; padding:.2rem .5rem .2rem .2rem;
            background:var(--card); color:inherit; text-decoration:none; font-size:.82rem; cursor:pointer; }
        .lf-u img { width:2.6rem; height:2rem; aspect-ratio:auto; border-radius:6px; border:0; flex:0 0 auto; }
        /* Same size as .lf-u img: a photoless entry must read as a missing picture, not as a
           different kind of thing (_Fotoband.cshtml owns why it is listed at all). */
        .lf-u-tom { width:2.6rem; height:2rem; border-radius:6px; flex:0 0 auto; background:var(--panel); border:1px dashed var(--line); }
        .lf-u.aktiv { border-color:var(--accent); background:var(--accentbg); }
        .lf-u strong { display:block; white-space:nowrap; }
        .lf-u-sub { display:block; color:var(--muted); font-size:.75rem; white-space:nowrap;
            overflow:hidden; text-overflow:ellipsis; }
        @media (max-width: 540px) {
            .lifotos { grid-template-columns:1fr; }
            .lf-thumbs { grid-template-rows:1fr; grid-template-columns:repeat(3,1fr); }
        }
        .lisalg { margin:.3rem 0 .45rem; font-size:1.02rem; }
        .lisalg a { color:var(--accent); }
        .lisalg-mgl { white-space:nowrap; }
        .lf-thumbs img { cursor:pointer; }
        /* Phone: the agent link takes its own line instead of breaking mid-link
           ("Se hos" / "mægler →" read as two lines of nothing - Jonas, 12.08.2026). */
        @media (max-width: 540px) {
            .lisalg-skil { display:none; }
            .lisalg-mgl { display:block; margin-top:.15rem; }
        }
        .tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(10.5rem,1fr)); gap:.5rem; margin:.7rem 0 .1rem; }
        .tile { display:block; border:1px solid var(--line); border-radius:12px; background:var(--card); padding:.5rem .75rem .45rem; text-decoration:none; color:inherit; min-width:0; }
        .tile:hover, .tile:focus { border-color:var(--accent); }
        .t-lab { display:block; font-size:.7rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
        .t-val { display:block; font-size:1.1rem; font-weight:700; margin-top:.05rem; white-space:nowrap; }
        .t-sub { display:block; font-size:.74rem; color:var(--muted); margin-top:.05rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
        .mtabs { margin:1.1rem 0 0; }
        .mtabs-knapper { display:flex; gap:.4rem; }
        .mtabs-knapper button { font:inherit; font-size:.88rem; padding:.3rem .95rem; border:1px solid var(--line); border-radius:999px; background:transparent; color:inherit; cursor:pointer; }
        .mtabs-knapper button.aktiv { background:var(--accent); border-color:var(--accent); color:#fff; }
        .mtab[hidden] { display:none; }
        .mtab .skraa { margin-top:.3rem; }
        /* NEGATIVE top margin, exactly gv.css's body padding-top. This is a top:0 sticky bar and the
           FIRST thing on the page, so any space above it is space the bar gives back the instant you
           scroll: it snaps flush to the viewport and the layout you were looking at is not the layout
           you now have.
           Jonas reported this TWICE. On 02.08.2026 the bar sat 2,4rem down (1,5rem body padding +
           0,9rem of its own); that round removed the 0,9rem and left the body padding, on the
           reasoning that resting and stuck were then "close enough not to look like two different
           layouts". They were not: he reported the same complaint on 23.08.2026 against that build.
           Measured before this change, 402x874 DPR3 on prod: the bar's top edge rests at y=24, NOTHING
           AT ALL paints in the band above it, and scrolling 24 px walks it 24 -> 14 -> 0. "Close
           enough" was a judgement where a measurement was available, and the answer a measurement
           gives is that the only resting position that cannot jump is the stuck one.
           The value is tied to `body { padding:1.5rem 1.25rem 4rem }` in gv.css and CSS cannot read
           it, so tools/soeg-mobil-tjek.mjs asserts the resting top is 0 and that a scroll does not
           move it - which fails if either half drifts. Horizontal -1.25rem is unchanged and is the
           same bleed-to-the-edge trick for the same padding. */
        .temanav { position:sticky; top:0; z-index:60; display:flex; gap:.35rem; overflow-x:auto; scrollbar-width:none; margin:-1.5rem -1.25rem 0; padding:.5rem 1.25rem .55rem; background:var(--bg); border-bottom:1px solid var(--line); }
        .temanav::-webkit-scrollbar { display:none; }
        .temanav a { flex:0 0 auto; font-size:.86rem; text-decoration:none; color:inherit; border:1px solid var(--line); border-radius:999px; padding:.22rem .8rem; background:var(--card); }
        /* Same pairing as the report button: white on the dark-theme accent is 1,65:1. Jonas only
           reported the button, but the active chip on this very page had the identical fault. */
        .temanav a.aktiv { background:var(--accent); border-color:var(--accent); color:var(--paa-accent); }
        /* A CLEARER BREAK BETWEEN CHAPTERS (Jonas, 17.08.2026), and the icon that names the chapter
           in the rail now sits in the heading too - _TemaH.cshtml renders both from NavPkt.
           The rule was 2px on --line with 2,4rem above it, which on a page this long read as one
           more sub-heading among many: the sections average well over a screen each, so by the time
           you meet the next rule you have forgotten there was a previous one. What is added is AIR
           above (3,4rem) and a mark in the accent colour - a heavier rule would only have made the
           page look ruled. The icon is the same 24-grid stroke as the rail's, one size up. */
        /* 1,55rem against the sub-headings' 1,15 and a 3px rule against their 1px: the chapter head
           was 1,35 over a 2px rule, so both signals were about 15% apart from the ones they had to
           out-rank and the page read as one long list of equal headings. */
        .tema-h { font-size:1.55rem; letter-spacing:-.02em; margin:3.4rem 0 .3rem; padding-top:1.6rem;
            border-top:3px solid var(--fg); display:flex; align-items:center; gap:.5rem; }
        .tema-h .tema-ikon { color:var(--accent); }
        /* The first chapter follows the hero, which already ends in its own block, so it needs the
           space but not a second rule immediately under it. */
        .hoved > .tema:first-of-type .tema-h { margin-top:2.4rem; }
        [id] { scroll-margin-top:3.4rem; }
        .rail { display:none; }
        @media (min-width:1160px) {
            /* 71rem, the SAME frame as the front page and /konto (Jonas, 17.08.2026: "address page
               topbar should be same width as frontpage"). It was 76rem, so the shared top bar drew
               its rule 80 px wider here than on the page you had just come from - measured 1216 px
               against 1136 at a 1400 px viewport. The grid below needs 13,5 + 2,8 + 54 = 70,3rem,
               so it still fits with room to spare and nothing inside had to move. */
            .wrap { max-width:71rem; }
            .layout { display:grid; grid-template-columns:13.5rem minmax(0,54rem); gap:2.8rem; justify-content:center; }
            .rail { display:block; grid-column:1; grid-row:1; }
            .hoved { grid-column:2; grid-row:1; min-width:0; }
            .rail-boks { position:sticky; top:1.2rem; font-size:.9rem; padding-right:.6rem; }
            .rail-boks > a { display:block; color:inherit; text-decoration:none; padding:.32rem .6rem; border-radius:8px; margin:.1rem 0; }
            .rail-boks > a:hover { background:var(--card); }
            .rail-boks > a.aktiv { background:var(--accentbg); color:var(--accent); font-weight:600; }
            .rail-cta { margin-top:1.1rem; padding:.9rem .6rem .2rem; border-top:1px solid var(--line); display:grid; gap:.55rem; font-size:.85rem; }
            .rail-cta a { color:var(--accent); text-decoration:none; }
            .rail-cta a:hover { text-decoration:underline; }
            .temanav { display:none; }
            [id] { scroll-margin-top:1rem; }
        }
        .annonce-plads { margin:1.9rem 0 0; }
        /* Virksomheder på adressen (V5). One block per company; the name links to its /firma page. */
        .firma-intro { font-size:.9rem; color:var(--muted); margin:.4rem 0 .7rem; max-width:44rem; }
        .firmaliste { list-style:none; margin:.2rem 0 0; padding:0; }
        .firmaliste li { padding:.5rem 0; border-top:1px solid var(--line); }
        .firmaliste li:first-child { border-top:0; }
        .firma-navn { font-weight:600; }
        .firma-navn a { color:var(--accent); text-decoration:none; }
        .firma-navn a:hover, .firma-navn a:focus { text-decoration:underline; }
        .firma-mark { display:inline-block; font-weight:600; font-size:.68rem; letter-spacing:.03em;
            border:1px solid var(--line); background:var(--accentbg); color:var(--accent);
            border-radius:999px; padding:.02rem .45rem; margin-left:.4rem; vertical-align:middle; }
        .firma-meta { display:block; font-size:.85rem; color:var(--muted); margin-top:.1rem; }
        @media print { .temanav, .rail, .mtabs-knapper { display:none !important; } .mtab[hidden] { display:block !important; } }

/* ---- was the <style> in Adresse/_Miljoe.cshtml ---- */
    #tema-miljoe .mrk { margin:.4rem 0; padding:.45rem .75rem;
        border-left:3px solid var(--line); border-radius:0 9px 9px 0; }
    #tema-miljoe .mrk.obs { border-left-color:#e08a3c; background:#e08a3c14; }
    #tema-miljoe .mrk.god { border-left-color:#2f8f4e; background:#2f8f4e12; }
    /* The same badge shape the V1/V2 chips above already use, so a mark reads as the same kind of
       thing this chapter has always had rather than as a second vocabulary. */
    #tema-miljoe .mrk-t { display:inline-block; font-size:.63rem; font-weight:700; letter-spacing:.05em;
        text-transform:uppercase; border-radius:5px; padding:.06rem .38rem; margin-right:.4rem;
        vertical-align:.1em; color:#fff; }
    #tema-miljoe .obs .mrk-t { background:#e08a3c; }
    #tema-miljoe .god .mrk-t { background:#2f8f4e; }