/* ==========================================================================
   Byggefirmaet Andersen ApS
   Visuel retning: Handvaerkeren
   Se retningskontrakten i templates/yootheme/index.php
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Skrift. Selvhostet, ingen kald til Google. Variabel vaegt 400-900.
   -------------------------------------------------------------------------- */

@font-face {
    font-family: 'Schibsted Grotesk';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url('../fonts/schibsted-grotesk/schibsted-grotesk-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;
}

@font-face {
    font-family: 'Schibsted Grotesk';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url('../fonts/schibsted-grotesk/schibsted-grotesk-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Source Serif 4';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/source-serif/source-serif-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;
}

@font-face {
    font-family: 'Source Serif 4';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/source-serif/source-serif-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Caveat';
    font-style: normal;
    font-weight: 500 700;
    font-display: swap;
    src: url('../fonts/caveat/caveat-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;
}

@font-face {
    font-family: 'Caveat';
    font-style: normal;
    font-weight: 500 700;
    font-display: swap;
    src: url('../fonts/caveat/caveat-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   2. Systemets vaerdier
   -------------------------------------------------------------------------- */

:root {
    --ba-font: 'Schibsted Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    --ba-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
    --ba-script: 'Caveat', 'Segoe Script', cursive;

    --ba-ink: #16191b;
    --ba-stone: #656b6e;
    --ba-line: #e2e1de;
    --ba-paper: #ffffff;
    --ba-shade: #f5f4f2;
    --ba-green: #234539;
    --ba-green-deep: #173027;
    --ba-green-tint: #b9cbc8;

    --ba-measure: 68ch;
    --ba-section: clamp(4.5rem, 9vw, 8.5rem);
    --ba-gutter: clamp(1.25rem, 4vw, 3.5rem);

    --ba-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* --------------------------------------------------------------------------
   3. Grundtypografi
   -------------------------------------------------------------------------- */

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

body,
.uk-navbar-nav > li > a,
.uk-button,
input,
textarea,
select {
    font-family: var(--ba-font);
}

body {
    color: var(--ba-ink);
    background: var(--ba-paper);
    font-size: 17px;
    line-height: 1.65;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'kern' 1, 'liga' 1;
}

h1, h2, h3, h4, h5, h6,
.uk-h1, .uk-h2, .uk-h3, .uk-h4,
.uk-heading-small, .uk-heading-medium, .uk-heading-large {
    font-family: var(--ba-serif);
    color: var(--ba-ink);
    font-weight: 600;
    letter-spacing: -0.012em;
    text-wrap: balance;
}

p, li {
    text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   4. Browserens egne flader. De hoerer ogsaa til designet.
   -------------------------------------------------------------------------- */

::selection {
    background: var(--ba-green);
    color: #fff;
}

body {
    caret-color: var(--ba-ink);
    accent-color: var(--ba-green);
    scrollbar-color: var(--ba-stone) var(--ba-band);
    scrollbar-width: thin;
}

::-webkit-scrollbar {
    width: 11px;
    height: 11px;
}

::-webkit-scrollbar-track {
    background: var(--ba-band);
}

::-webkit-scrollbar-thumb {
    background: var(--ba-line);
    border: 3px solid var(--ba-band);
    border-radius: 0;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--ba-stone);
}

:focus-visible {
    outline: 2px solid var(--ba-green);
    outline-offset: 3px;
    border-radius: 2px;
}

.uk-light :focus-visible,
[class*='ba-invers'] :focus-visible {
    outline-color: #fff;
}

a {
    text-underline-offset: 0.18em;
    text-decoration-thickness: 1px;
}

/* --------------------------------------------------------------------------
   5. Header. Logo til venstre, fem ord og et telefonnummer til hoejre.
   -------------------------------------------------------------------------- */

.tm-header,
.tm-headerbar {
    background: var(--ba-paper);
}

.tm-header .uk-navbar-container,
.tm-header-mobile .uk-navbar-container {
    background: var(--ba-paper);
    box-shadow: none;
    border-bottom: 1px solid var(--ba-line);
}

/* Temaet farver navbaren hvid til en gennemsigtig overlay-header. Den findes
   ikke i denne retning, hvor headeren altid er hvid. Selektorerne herunder er
   bevidst tunge nok til at vinde, ogsaa hvis en sektion saetter uk-light eller
   uk-navbar-transparent, saa menuen aldrig kan blive hvid paa hvidt igen. */
.tm-header .uk-navbar-container .uk-navbar-nav > li > a,
.tm-header .uk-navbar-container .uk-navbar-item,
.tm-header .uk-navbar-container .uk-navbar-toggle,
.tm-header.uk-light .uk-navbar-container .uk-navbar-nav > li > a,
.tm-header .uk-navbar-container.uk-light .uk-navbar-nav > li > a,
.tm-header-mobile .uk-navbar-container .uk-navbar-item,
.tm-header-mobile .uk-navbar-container .uk-navbar-toggle,
.tm-header-mobile .uk-navbar-container.uk-light .uk-navbar-toggle {
    color: var(--ba-ink);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.005em;
    text-transform: none;
    min-height: 92px;
}

.tm-header .uk-navbar-container .uk-navbar-nav > li:hover > a,
.tm-header .uk-navbar-container .uk-navbar-nav > li > a:hover,
.tm-header .uk-navbar-container .uk-navbar-nav > li.uk-active > a,
.tm-header .uk-navbar-container .uk-navbar-nav > li > a[aria-expanded='true'],
.tm-header .uk-navbar-container.uk-light .uk-navbar-nav > li:hover > a,
.tm-header .uk-navbar-container.uk-light .uk-navbar-nav > li.uk-active > a {
    color: var(--ba-ink);
}

/* Headeren er hvid i denne retning, ogsaa hvis en sektion beder om overlay */
.tm-header .uk-navbar-container.uk-navbar-transparent {
    background: var(--ba-paper);
}

.tm-header.tm-header-overlay {
    position: static;
}

.tm-header .uk-navbar-nav > li > a {
    padding: 0 14px;
    position: relative;
}

.tm-header .uk-navbar-nav > li > a::after {
    content: '';
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 34px;
    height: 2px;
    background: var(--ba-green);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s var(--ba-ease);
}

.tm-header .uk-navbar-nav > li > a:hover::after,
.tm-header .uk-navbar-nav > li.uk-active > a::after {
    transform: scaleX(1);
}

.tm-header .uk-logo,
.tm-header-mobile .uk-logo {
    padding-top: 0;
    padding-bottom: 0;
}

/* Logoet skal kunne laeses. Kilden er kun 133 gange 140 pixels, saa den er
   opskaleret og skarpet til 266 gange 280 og vises paa 120. Den haenger ned
   over fotoet nedenunder, saa headeren ikke bliver hoejere af det. */
.tm-header .uk-navbar-container,
.tm-header .uk-navbar,
.tm-header .uk-navbar-left,
.tm-header .uk-container {
    overflow: visible;
}

.tm-header .uk-logo {
    position: relative;
    z-index: 20;
}

.tm-header .uk-logo img {
    width: auto;
    height: 120px;
    max-height: 120px;
    display: block;
    margin-bottom: -34px;
}

.tm-header-mobile .uk-logo img {
    width: auto;
    height: 56px;
    max-height: 56px;
    display: block;
    margin-bottom: 0;
}

.tm-header-mobile .uk-navbar-container,
.tm-header-mobile .uk-navbar,
.tm-header-mobile .uk-navbar-left {
    overflow: visible;
}

.tm-header-mobile .uk-logo {
    position: relative;
    z-index: 20;
}

/* Telefonnummeret i headeren. Klartekst, ikke knap. */
.tm-header .uk-navbar-container .uk-navbar-item a.ba-header-phone,
.tm-header .uk-navbar-container.uk-light .uk-navbar-item a.ba-header-phone,
.tm-header-mobile .uk-navbar-container .uk-navbar-item a.ba-header-phone,
.tm-header-mobile .uk-navbar-container.uk-light .uk-navbar-item a.ba-header-phone,
.ba-header-phone {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    margin-left: 10px;
    padding-left: 20px;
    border-left: 1px solid var(--ba-line);
    color: var(--ba-ink);
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-decoration: none;
    white-space: nowrap;
}

.tm-header .uk-navbar-container .uk-navbar-item a.ba-header-phone:hover,
.tm-header-mobile .uk-navbar-container .uk-navbar-item a.ba-header-phone:hover,
.ba-header-phone:hover {
    color: var(--ba-green);
    text-decoration: none;
}

/* --------------------------------------------------------------------------
   6. Sektionsrytme. Mere luft over en overskrift end under.
   -------------------------------------------------------------------------- */

.tm-page .uk-section {
    padding-top: var(--ba-section);
    padding-bottom: var(--ba-section);
}

/* De to handlinger vejer lige meget */
.ba-contact {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.75rem 2.25rem;
    margin-top: 2.25rem;
}

.ba-contact a {
    font-size: clamp(1.3rem, 2.1vw, 1.85rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ba-ink);
    text-decoration: none;
    padding-bottom: 3px;
    border-bottom: 2px solid var(--ba-green);
    transition: color 0.3s var(--ba-ease), border-color 0.3s var(--ba-ease);
}

.ba-contact a:hover {
    color: var(--ba-green);
    border-color: var(--ba-ink);
    text-decoration: none;
}

/* Ét af de tre fag vendes, saa siden ikke er den samme figur syv gange */
@media (min-width: 960px) {

}

/* --------------------------------------------------------------------------
   11. Kontaktafslutning
   -------------------------------------------------------------------------- */

.ba-close {
    background: var(--ba-green);
    color: #fff;
}

.ba-close h2 {
    color: #fff;
    font-size: clamp(2.125rem, 4vw, 2.875rem);
    line-height: 1.06;
    max-width: 16ch;
    margin: 0;
}

.ba-close p,
.ba-close address {
    color: var(--ba-green-tint);
    font-style: normal;
    margin: 0;
}

.ba-close .ba-contact a {
    color: #fff;
    border-bottom-color: var(--ba-green-tint);
}

.ba-close .ba-contact a:hover {
    color: #fff;
    border-bottom-color: #fff;
}

.ba-close .ba-contact-who {
    color: var(--ba-green-tint);
}

/* --------------------------------------------------------------------------
   12. Footer
   -------------------------------------------------------------------------- */

.tm-page footer .uk-section {
    background: var(--ba-paper);
    border-top: 1px solid var(--ba-line);
    padding-top: clamp(2.25rem, 3.2vw, 3.5rem);
    padding-bottom: clamp(2rem, 2.8vw, 3rem);
}

.ba-foot .ba-foot-sig h2 {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    text-transform: none;
    color: var(--ba-ink);
    margin: 0 0 1rem;
}

.ba-foot h2,
.ba-foot h3,
.ba-foot .uk-h3 {
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--ba-stone);
    margin: 0 0 1rem;
}

.ba-foot ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ba-foot li {
    margin-bottom: 0.55rem;
}

.ba-foot a {
    color: var(--ba-ink);
    text-decoration: none;
    font-size: 0.9375rem;
}

.ba-foot a:hover {
    color: var(--ba-green);
    text-decoration: underline;
}

/* Kompakt footer paa mobil: to kolonner til navigationen, mindre luft.
   Mockuppen viser logo og kontakt til venstre, to linklister og retten
   forbeholdt til hoejre, uden store lodrette spring. */
@media (max-width: 959px) {
    .tm-page footer .uk-section {
        padding-top: 2rem;
        padding-bottom: 1.75rem;
    }

    .ba-foot .uk-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.6rem 1.25rem;
        margin: 0;
    }

    .ba-foot .uk-grid > * {
        width: auto;
        max-width: none;
        padding-left: 0;
        margin: 0;
    }

    .ba-foot .ba-foot-sig,
    .ba-foot .uk-width-1-3\@m:last-child {
        grid-column: 1 / -1;
    }

    .ba-foot .ba-foot-logo {
        height: 46px;
        width: auto;
        margin-bottom: 0.9rem;
    }

    .ba-foot .ba-foot-sig h2 {
        font-size: 1.0625rem;
        margin-bottom: 0.6rem;
    }

    .ba-foot h2,
    .ba-foot h3,
    .ba-foot .uk-h3 {
        font-size: 0.8125rem;
        margin-bottom: 0.6rem;
    }

    .ba-foot li {
        margin-bottom: 0.35rem;
    }

    .ba-foot a,
    .ba-foot .ba-foot-kontakt span {
        font-size: 0.9375rem;
    }

    .ba-foot .ba-foot-kontakt li {
        margin-bottom: 0.45rem;
    }

    .ba-foot .ba-foot-jur {
        padding-top: 1.1rem;
        border-top: 1px solid var(--ba-line);
    }

    .ba-foot .ba-foot-jur p {
        font-size: 0.8125rem;
        margin: 0 0 0.15rem;
    }
}

/* --------------------------------------------------------------------------
   13. Knapper. Bruges sparsomt, formularen har brug for dem.
   -------------------------------------------------------------------------- */

.uk-button {
    border-radius: 0;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
    font-size: 1.0625rem;
    padding: 0 2rem;
    line-height: 52px;
    transition: background-color 0.3s var(--ba-ease), color 0.3s var(--ba-ease);
}

.uk-button-primary,
.uk-button-default:not(.uk-button-text) {
    background: var(--ba-green);
    color: #fff;
    border: 0;
}

.uk-button-primary:hover,
.uk-button-default:not(.uk-button-text):hover {
    background: var(--ba-green-deep);
    color: #fff;
}

.uk-button:disabled,
.uk-button.uk-disabled {
    background: var(--ba-line);
    color: var(--ba-stone);
    cursor: not-allowed;
}

/* Formularfelter */
.uk-input,
.uk-select,
.uk-textarea {
    border-radius: 0;
    border: 1px solid var(--ba-line);
    background: var(--ba-paper);
    color: var(--ba-ink);
    font-size: 1.0625rem;
    padding: 0 14px;
}

.uk-textarea {
    padding: 12px 14px;
}

.uk-input:focus,
.uk-select:focus,
.uk-textarea:focus {
    border-color: var(--ba-green);
    background: var(--ba-paper);
}

.uk-input::placeholder,
.uk-textarea::placeholder {
    color: var(--ba-stone);
}

.uk-form-danger,
.uk-input.uk-form-danger {
    border-color: #a4291f;
}

/* --------------------------------------------------------------------------
   14. Bevaegelse. Ét moment: fotografierne toner op og saetter sig.
       Uden JavaScript staar alt synligt fra start.
   -------------------------------------------------------------------------- */

.ba-js .ba-reveal {
    opacity: 0;
    transform: scale(1.035);
    transition: opacity 1s var(--ba-ease), transform 1.2s var(--ba-ease);
    will-change: opacity, transform;
}

.ba-js .ba-reveal.ba-in {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .ba-js .ba-reveal,
    .ba-js .ba-reveal.ba-in {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .tm-header .uk-navbar-nav > li > a::after {
        transition: none;
    }
}

/* --------------------------------------------------------------------------
   15. Mindre skaerme
   -------------------------------------------------------------------------- */

@media (max-width: 959px) {
    /* Kompakt mobilheader: logo, nummer, burger. Ikke mere hoejde end noedvendigt. */
    .tm-header-mobile .uk-navbar-container .uk-navbar-item,
    .tm-header-mobile .uk-navbar-container .uk-navbar-toggle,
    .tm-header-mobile .uk-navbar-container.uk-light .uk-navbar-toggle {
        min-height: 64px;
    }

    .tm-header-mobile .uk-logo img {
        height: 42px;
        max-height: 42px;
    }

    .ba-header-phone {
        min-height: 44px;
        margin-left: 0;
        padding-left: 14px;
        border-left: 1px solid var(--ba-line);
        font-size: 16px;
    }

    .ba-header-phone .ba-ikon {
        width: 17px;
        height: 17px;
        stroke: var(--ba-green);
        fill: none;
        stroke-width: 1.6;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .ba-contact {
        gap: 0.75rem 1.5rem;
    }
}

@media (max-width: 639px) {
    body {
        font-size: 16px;
    }

    .ba-contact {
        display: block;
        margin-top: 2rem;
    }

    /* Fuld bredde og mindst 48px hoej, saa de kan rammes med en tommelfinger.
       Stadig klartekst, ikke knapper. */
    .ba-contact a {
        display: flex;
        align-items: center;
        width: 100%;
        min-height: 56px;
        padding: 0 0 0 0;
        font-size: 1.25rem;
        border-bottom: 2px solid var(--ba-green);
    }

    .ba-contact a + a {
        margin-top: 0.75rem;
    }

    .ba-close .ba-contact a {
        border-bottom-color: var(--ba-green-tint);
    }

}

/* --------------------------------------------------------------------------
   16. Undersiderne efter mobilmockuppen (september 2026)

   Én skabelon, 15 sider. Opbygningen er heroen med ét projektfoto, tre
   tillidspunkter, artiklen i laesebredde, Henrik, Se ogsaa og det groenne felt.
   Heroen deler mekanik med forsiden: fotoet ligger bagved, teksten staar paa en
   bloed lys vask. Det er den samme komponent, kun lavere.
   -------------------------------------------------------------------------- */

/* --- Hero --------------------------------------------------------------- */

.ba-sub-hero {
    position: relative;
    /* Fotoet og vasken ligger som negative lag. Uden en egen stakkontekst
       ville de blive loeftet ud og havne bag sektionens egen baggrund. */
    isolation: isolate;
    padding: 0 !important;
    overflow: hidden;
    background: var(--ba-hero-panel);
}

/* Feltet maa ikke vaere positioneret. Fotoet og vasken ligger som negative
   lag paa selve sektionen, saa teksten staar ovenpaa uden eget z-index. */
.ba-sub-hero .uk-container,
.ba-sub-hero .uk-container-expand {
    position: static;
    max-width: 1600px;
    margin: 0 auto;
    padding: clamp(2rem, 4vw, 3.5rem) var(--ba-gutter) clamp(2.25rem, 4vw, 3.75rem);
}

.ba-sub-hero .uk-grid,
.ba-sub-hero [class*='uk-width'] {
    margin-left: 0;
    padding-left: 0;
}

/* Fotografierne til undersiderne er staaende. Daekkede de hele feltet, ville
   beskaeringen kun vise en tilfaeldig lodret stribe af rummet. De faar derfor
   hoejre side, og vasken toner dem ind mod teksten. */
.ba-sub-hero-figure {
    position: absolute;
    inset: 0;
    left: 46%;
    z-index: -2;
    /* YOOtheme saetter en max-width paa billedelementet. Den skal vaek, ellers
       bliver fotoet kun saa bredt som tekstspalten. */
    max-width: none;
    width: auto;
    margin: 0 !important;
}

.ba-sub-hero-figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 45%;
    display: block;
}

/* Den bloede vask. Samme princip som forsiden, strammere fordi teksten
   fylder mindre paa en underside. */
.ba-sub-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
        93deg,
        var(--ba-hero-panel) 0%,
        var(--ba-hero-panel) 46%,
        rgba(242, 241, 237, 0.92) 58%,
        rgba(242, 241, 237, 0.55) 70%,
        rgba(242, 241, 237, 0.15) 82%,
        rgba(242, 241, 237, 0) 92%
    );
}

.ba-sub-hero .uk-width-1-1\@m > div:not(.ba-sub-hero-figure) {
    max-width: 34rem;
}

/* Brodkrummen er sidens rubrik. Renovering staar over Badevaerelse. */
.ba-sub-eyebrow,
.ba-sub-eyebrow a,
.ba-sub-eyebrow li {
    font-family: var(--ba-font);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ba-stone);
}

.ba-sub-eyebrow ul {
    padding: 0;
    margin: 0 0 0.25rem;
}

.ba-sub-eyebrow a {
    display: inline-block;
    padding: 0.5rem 0;
    text-decoration: none;
}

.ba-sub-eyebrow a:hover {
    color: var(--ba-green);
}

.ba-sub-hero h1 {
    font-size: clamp(2.125rem, 4vw, 2.875rem);
    line-height: 1.06;
    letter-spacing: -0.018em;
    margin: 0 0 0.9rem;
    max-width: 16ch;
}

.ba-sub-lead p {
    font-size: 1.0625rem;
    line-height: 1.6;
    color: #3c3f41;
    max-width: 38ch;
    margin: 0;
}

.ba-sub-hero-cta {
    margin-top: 1.75rem;
}

/* --- Tillidspunkter ----------------------------------------------------- */

.ba-sub-trust {
    border-bottom: 1px solid var(--ba-line);
}

/* Grid-element med tre emner. Skillelinjerne er gridets egen Divider. */
.ba-trio-grid {
    padding: clamp(1.6rem, 3vw, 2.4rem) 0;
}

.ba-trio-grid .uk-grid-divider > :not(.uk-first-column)::before {
    border-left-color: var(--ba-line);
}

.ba-trio-grid .el-item {
    text-align: center;
    padding: 0 0.35rem;
}

.ba-trio-grid .el-image {
    display: block;
    width: 26px;
    height: 26px;
    margin: 0 auto 0.6rem;
}

.ba-trio-grid .el-title {
    font-family: var(--ba-font);
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.3;
    margin: 0 0 0.15rem !important;
}

.ba-trio-grid .el-content {
    margin-top: 0 !important;
}

.ba-trio-grid .el-content p {
    font-size: 0.9375rem;
    line-height: 1.4;
    color: var(--ba-stone);
    margin: 0;
    text-wrap: balance;
}

/* --- Artiklen ----------------------------------------------------------- */

.ba-sub .uk-container {
    max-width: 1180px;
}

.ba-sub-main {
    max-width: 47rem;
}

/* YOOtheme giver tekstfeltet display: flow-root. Det danner en egen
   blokkontekst, som viger for et float i hele sin hoejde, saa spalten bliver
   smal hele vejen ned. Teksten skal floede omkring billedet, ikke vige for det. */
.ba-sub-main > .uk-panel {
    display: block;
}

/* Det understoettende foto foelger med i foerste afsnit */
.ba-art-figure {
    float: right;
    width: 40%;
    margin: 0.4rem 0 1.25rem 1.5rem !important;
    shape-outside: margin-box;
}

.ba-art-figure img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
}

.ba-sub-main h2 {
    font-size: clamp(1.5rem, 2.2vw, 1.9rem);
    line-height: 1.18;
    letter-spacing: -0.012em;
    max-width: 26ch;
    margin: 2.5rem 0 0.85rem;
}

.ba-sub-main > .uk-panel > :first-child,
.ba-sub-main h2:first-child {
    margin-top: 0;
}

.ba-sub-main h3 {
    font-size: 1.25rem;
    line-height: 1.3;
    margin: 2rem 0 0.6rem;
}

.ba-sub-main p,
.ba-sub-main li {
    font-size: 1.0625rem;
    line-height: 1.62;
}

.ba-sub-main p {
    margin: 0 0 1.15rem;
    max-width: 68ch;
}

.ba-sub-main ul,
.ba-sub-main ol {
    padding-left: 0;
    margin: 1.35rem 0 1.6rem;
}

.ba-sub-main ul {
    list-style: none;
}

.ba-sub-main ul li {
    position: relative;
    padding-left: 1.9rem;
    margin-bottom: 0.7rem;
    max-width: 62ch;
}

/* Groent flueben. Mockuppens markoer, tegnet som baggrund saa listen
   bliver ved med at vaere en almindelig ul i artiklens tekst. */
.ba-sub-main ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.32em;
    width: 1.05em;
    height: 1.05em;
    background: no-repeat center/contain
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23234539' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E");
}

.ba-sub-main ol {
    list-style: none;
    counter-reset: ba-trin;
}

.ba-sub-main ol li {
    position: relative;
    padding-left: 2.4rem;
    margin-bottom: 0.85rem;
    counter-increment: ba-trin;
}

.ba-sub-main ol li::before {
    content: counter(ba-trin);
    position: absolute;
    left: 0;
    top: 0.05em;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--ba-green);
}

.ba-sub-main a {
    color: var(--ba-ink);
    text-decoration: underline;
    text-decoration-color: var(--ba-green);
    text-decoration-thickness: 1px;
}

.ba-sub-main a:hover {
    color: var(--ba-green);
    text-decoration-thickness: 2px;
}

/* --- Henrik ------------------------------------------------------------- */

.ba-person-sec .uk-container {
    max-width: 1180px;
}

.ba-person {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 3vw, 2.5rem);
    padding: clamp(1.5rem, 3vw, 2.25rem) 0;
    border-top: 1px solid var(--ba-line);
    border-bottom: 1px solid var(--ba-line);
}

.ba-person-foto {
    flex: none;
    width: 84px;
    height: 84px;
}

.ba-person-foto img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
}

.ba-person-tekst {
    flex: 1 1 auto;
    min-width: 0;
}

/* Henrik er en kolonne med billede, tekst og liste. Kolonnens eget gutter
   fjernes, saa stregerne over og under flugter med containeren. */
.ba-person-sec .tm-grid-expand {
    margin-left: 0;
}

.ba-person-sec .tm-grid-expand > .ba-person {
    padding-left: 0;
    padding-right: 0;
}

/* Foerste afsnit i tekstfeltet er navnet */
.ba-person-tekst p:first-child {
    font-family: var(--ba-font);
    font-size: 1.0625rem;
    font-weight: 700;
    margin: 0 0 0.2rem;
}

.ba-person-tekst p + p {
    font-size: 0.9375rem;
    line-height: 1.45;
    color: var(--ba-stone);
    margin: 0;
    max-width: 34ch;
}

/* List-element med ét emne: ikon, "Ring til Henrik paa" og nummeret i fed */
.ba-person-tlf.uk-list {
    flex: none;
    margin: 0;
    padding-left: clamp(1rem, 3vw, 2.5rem);
    border-left: 1px solid var(--ba-line);
}

.ba-person-tlf a {
    display: flex;
    align-items: center;
    min-height: 44px;
    color: var(--ba-ink);
    text-decoration: none;
}

.ba-person-tlf .uk-grid {
    margin-left: -0.7rem;
}

.ba-person-tlf .uk-grid > * {
    padding-left: 0.7rem;
}

.ba-person-tlf .el-image {
    display: block;
    width: 22px;
    height: 22px;
    color: var(--ba-green) !important;
}

.ba-person-tlf .el-content {
    font-size: 0.8125rem;
    color: var(--ba-stone);
    line-height: 1.3;
}

.ba-person-tlf .el-content strong {
    display: block;
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--ba-green);
    line-height: 1.25;
}

.ba-person-tlf a:hover strong {
    color: var(--ba-green-deep);
    text-decoration: underline;
}

/* --- Se ogsaa ----------------------------------------------------------- */

.ba-seogsaa-sec .uk-container {
    max-width: 1180px;
}

.ba-seogsaa-titel {
    font-family: var(--ba-serif);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.012em;
    margin: 0 0 1.1rem;
}

.ba-seogsaa .el-item {
    height: 100%;
}

.ba-seogsaa img {
    width: 100%;
    max-width: 130px;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}

.ba-seogsaa .el-title,
.ba-seogsaa h3 {
    font-family: var(--ba-serif);
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.008em;
    margin: 0;
}

.ba-seogsaa a {
    display: block;
    color: var(--ba-ink);
    text-decoration: none;
}

.ba-seogsaa .el-item .uk-grid {
    align-items: flex-start;
}

/* Pilen hoerer til titlen, saa hele feltet foeles som ét maal */
.ba-seogsaa .el-title::after {
    content: '';
    display: block;
    width: 18px;
    height: 12px;
    margin-top: 0.7rem;
    background: no-repeat left center/contain
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23234539' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E");
    transition: transform 0.3s var(--ba-ease);
}

.ba-seogsaa a:hover {
    color: var(--ba-green);
}

.ba-seogsaa .el-item:hover .el-title::after {
    transform: translateX(4px);
}

/* --- Groen afslutning --------------------------------------------------- */

.ba-close-inner {
    display: flex;
    align-items: center;
    gap: clamp(1.5rem, 5vw, 5rem);
}

.ba-close-inner h2 {
    flex: 1 1 auto;
    margin: 0;
}

/* List-element med to emner, hvert med ikon og link */
.ba-close-handling.uk-list {
    flex: none;
    min-width: min(100%, 22rem);
    margin: 0;
}

.ba-close-handling.uk-list > li {
    margin: 0;
}

.ba-close-handling a {
    display: block;
    padding: 0.95rem 0;
    color: #fff;
    font-size: 1.0625rem;
    font-weight: 600;
    text-decoration: none;
}

.ba-close-handling.uk-list > li + li {
    border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.ba-close-handling .uk-grid {
    margin-left: -0.85rem;
}

.ba-close-handling .uk-grid > * {
    padding-left: 0.85rem;
}

.ba-close-handling .el-image {
    display: block;
    width: 22px;
    height: 22px;
    color: inherit !important;
}

/* UIkit indsaetter SVG-filen inline og fjerner dens fill="none". Stregikonerne
   skal kun have streg, saa det saettes igen her. */
.ba-close-handling svg.el-image,
.ba-person-tlf svg.el-image {
    fill: none;
    stroke: currentColor;
}

.ba-close-handling a:hover {
    color: var(--ba-green-tint);
}

/* --- Tablet ------------------------------------------------------------- */

@media (max-width: 959px) {
    .ba-sub-hero .uk-container,
    .ba-sub-hero .uk-container-expand {
        padding-top: 1.75rem;
        padding-bottom: 2rem;
    }

    /* Fotografierne er staaende. Paa en smal skaerm ville et fuldt daekkende
       foto kun vise en tilfaeldig lodret stribe, saa det faar hoejre side og
       beskaeres om sin egen midte. Samme greb som forsidens mobilhero. */
    .ba-sub-hero-figure {
        left: 44%;
    }

    .ba-sub-hero::after {
        background: linear-gradient(
            98deg,
            var(--ba-hero-panel) 0%,
            var(--ba-hero-panel) 44%,
            rgba(242, 241, 237, 0.92) 58%,
            rgba(242, 241, 237, 0.55) 70%,
            rgba(242, 241, 237, 0.15) 82%,
            rgba(242, 241, 237, 0) 92%
        );
    }

    .ba-sub-hero .uk-width-1-1\@m > div:not(.ba-sub-hero-figure) {
        max-width: 26rem;
    }

    .ba-sub-hero h1 {
        font-size: clamp(2rem, 8.6vw, 2.4rem);
        line-height: 1.08;
        max-width: 13ch;
    }

    .ba-sub-lead p {
        font-size: 0.9375rem;
        line-height: 1.55;
        max-width: 30ch;
    }

    .ba-art-figure {
        width: 42%;
        margin-left: 1.1rem !important;
    }

    /* Mockuppen holder Henrik paa én linje ogsaa paa mobil: foto, tekst,
       skillelinje, nummer. Derfor kun mindre typografi, ikke ombrydning. */
    .ba-person {
        gap: 0.75rem;
    }

    .ba-person-foto {
        width: 56px;
        height: 56px;
    }

    .ba-person-tekst p:first-child {
        font-size: 0.9375rem;
        letter-spacing: -0.01em;
    }

    .ba-person-tekst p + p {
        font-size: 0.8125rem;
        line-height: 1.4;
    }

    .ba-person-tlf.uk-list {
        padding-left: 0.8rem;
    }

    .ba-person-tlf .el-image {
        width: 19px;
        height: 19px;
    }

    .ba-person-tlf .el-content {
        font-size: 0.8125rem;
        line-height: 1.25;
        white-space: nowrap;
    }

    .ba-person-tlf .el-content strong {
        font-size: 0.9375rem;
        white-space: nowrap;
    }

    /* Mockuppen holder overskrift og handlinger side om side ogsaa paa mobil */
    .ba-close-inner {
        gap: 1.25rem;
        align-items: center;
    }

    .ba-close-inner h2 {
        font-size: 1.25rem;
        line-height: 1.15;
    }

    .ba-close-handling.uk-list {
        flex: 0 0 47%;
        min-width: 0;
    }

    .ba-close-handling a {
        gap: 0.6rem;
        padding: 0.7rem 0;
        font-size: 0.9375rem;
        line-height: 1.3;
    }

    .ba-close-handling.uk-list > li:first-child {
        border-top: 1px solid rgba(255, 255, 255, 0.22);
    }

    .ba-close-handling .uk-grid {
        margin-left: -0.6rem;
    }

    .ba-close-handling .uk-grid > * {
        padding-left: 0.6rem;
    }

    .ba-close-handling .el-image {
        width: 18px;
        height: 18px;
    }
}

/* --- Mobil -------------------------------------------------------------- */

@media (max-width: 639px) {
    .ba-sub-hero .uk-container,
    .ba-sub-hero .uk-container-expand {
        padding-top: 1.5rem;
        padding-bottom: 1.75rem;
    }

    .ba-sub-hero .uk-width-1-1\@m > div:not(.ba-sub-hero-figure) {
        max-width: 17.5rem;
    }

    .ba-sub-hero-cta {
        margin-top: 1.4rem;
    }

    .uk-section.ba-sub-hero .ba-sub-hero-cta .uk-button-primary {
        white-space: nowrap;
        width: auto;
        justify-content: flex-start;
        min-height: 48px;
        padding: 0 20px;
    }

    .ba-trio-grid {
        padding: 1.25rem 0;
    }

    .ba-trio-grid .uk-grid-divider {
        margin-left: -8px;
    }

    .ba-trio-grid .uk-grid-divider > * {
        padding-left: 8px;
    }

    .ba-trio-grid .uk-grid-divider > :not(.uk-first-column)::before {
        left: 0;
    }

    .ba-trio-grid .el-item {
        padding: 0 0.25rem;
    }

    .ba-trio-grid .el-title {
        font-size: 0.8125rem;
    }

    .ba-trio-grid .el-content p {
        font-size: 0.8125rem;
    }

    .ba-sub-main h2 {
        margin-top: 2.1rem;
    }

    .ba-art-figure {
        width: 44%;
        margin-left: 1rem !important;
    }

    .ba-seogsaa img {
        max-width: 68px;
    }

    .ba-seogsaa .el-title,
    .ba-seogsaa h3 {
        font-size: 0.9375rem;
        line-height: 1.25;
    }

    .ba-seogsaa .el-title::after {
        width: 15px;
        height: 10px;
        margin-top: 0.45rem;
    }

    .ba-person-foto {
        width: 56px;
        height: 56px;
    }
}

/* ==========================================================================
   18. Forsiden efter mockuppen (september 2026)
   Redaktionelt udtryk: serif til overskrifter, grotesk til broedtekst,
   skarpe hjoerner, hairlines, én moerkegroen. Ingen cards, ingen skygger,
   ingen gradienter ud over den lyse sloerring der goer heroens tekst laesbar.
   ========================================================================== */

:root {
    --ba-hero-panel: #f2f1ed;
    --ba-band: #f5f4f2;
}

/* --- Header ------------------------------------------------------------- */

.ba-cta-header {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin-left: 18px;
    padding: 0 22px;
    background: var(--ba-green);
    color: #fff;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.3s var(--ba-ease);
}

.ba-cta-header:hover,
.tm-header .uk-navbar-container .uk-navbar-item a.ba-cta-header:hover {
    background: var(--ba-green-deep);
    color: #fff;
    text-decoration: none;
}

.tm-header .uk-navbar-container .uk-navbar-item a.ba-cta-header {
    color: #fff;
}

/* --- Faelles former ------------------------------------------------------ */

.ba-label {
    font-family: var(--ba-font);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ba-stone);
    margin: 0 0 1rem;
}

.ba-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.65em;
    min-height: 52px;
    padding: 0 26px;
    background: var(--ba-green);
    color: #fff;
    font-family: var(--ba-font);
    font-size: 1.0625rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.3s var(--ba-ease);
}

.ba-btn:hover {
    background: var(--ba-green-deep);
    color: #fff;
    text-decoration: none;
}

.ba-btn svg {
    width: 16px;
    height: 16px;
    flex: none;
}

.ba-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    font-family: var(--ba-font);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ba-green);
    text-decoration: none;
}

.ba-link:hover {
    color: var(--ba-green-deep);
    text-decoration: underline;
    text-underline-offset: 0.25em;
}

.ba-link svg {
    width: 14px;
    height: 14px;
    flex: none;
    transition: transform 0.3s var(--ba-ease);
}

.ba-link:hover svg {
    transform: translateX(3px);
}

.ba-script {
    font-family: var(--ba-script);
    font-weight: 600;
    line-height: 1.25;
}

.ba-ikon {
    width: 34px;
    height: 34px;
    flex: none;
    stroke: var(--ba-green);
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* --- Sektionsrytme paa forsiden ------------------------------------------ */

.tm-page .uk-section.ba-s {
    padding-top: clamp(2.25rem, 3.2vw, 3.75rem);
    padding-bottom: clamp(2.25rem, 3.2vw, 3.75rem);
}

.tm-page .uk-section.ba-s-tight {
    padding-top: clamp(1.5rem, 2vw, 2.5rem);
}

/* --- Forsiden med YOOthemes egne elementer ------------------------------- */
/*
 * Forsiden er bygget af headline-, text-, image-, grid-, list-, quotation- og
 * button-elementer, saa den kan redigeres i builderen uden HTML. Udseendet
 * styres herfra via den klasse der staar paa hvert element under Advanced.
 * YOOtheme saetter uk-margin-remove-vertical med !important paa elementerne,
 * derfor bruger afstandene herunder ogsaa !important.
 */

/* Knapper i builderen faar samme form som .ba-btn og .ba-link */
.uk-section[class*='ba-'] .uk-button-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.65em;
    min-height: 52px;
    padding: 0 26px;
    border: 0;
    border-radius: 0;
    background: var(--ba-green);
    color: #fff;
    font-family: var(--ba-font);
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: none;
    transition: background-color 0.3s var(--ba-ease);
}

.uk-section[class*='ba-'] .uk-button-primary:hover,
.uk-section[class*='ba-'] .uk-button-primary:focus {
    background: var(--ba-green-deep);
    color: #fff;
}

.uk-section[class*='ba-'] .uk-button-text {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ba-green);
    font-family: var(--ba-font);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0;
    text-transform: none;
}

.uk-section[class*='ba-'] .uk-button-text::before {
    display: none;
}

.uk-section[class*='ba-'] .uk-button-text:hover,
.uk-section[class*='ba-'] .uk-button-text:focus {
    color: var(--ba-green-deep);
    text-decoration: underline;
    text-underline-offset: 0.25em;
}

.uk-section[class*='ba-'] .uk-button [uk-icon] {
    margin: 0 !important;
}

.uk-section[class*='ba-'] .uk-button-primary [uk-icon] svg {
    width: 16px;
    height: 16px;
}

.uk-section[class*='ba-'] .uk-button-text [uk-icon] svg {
    width: 14px;
    height: 14px;
}

.uk-section[class*='ba-'] .uk-button-text [uk-icon],
.ba-yd-grid .el-link::after {
    transition: transform 0.3s var(--ba-ease);
}

.uk-section[class*='ba-'] .uk-button-text:hover [uk-icon],
.ba-yd-grid .el-link:hover::after {
    transform: translateX(3px);
}

/* Etiketten over en overskrift */
.uk-panel.ba-label {
    margin-bottom: 1rem !important;
}

.ba-label > p {
    margin: 0;
}

/* Sektionsoverskrift */
h2.ba-head {
    font-size: clamp(1.6rem, 2.4vw, 2.15rem);
    line-height: 1.15;
    margin-bottom: 1.5rem !important;
}

/* --- Hero --- */

.ba-h {
    padding: 0 !important;
    position: relative;
    background: var(--ba-hero-panel);
}

.ba-h .uk-container,
.ba-h .uk-container-expand {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

.ba-h .tm-grid-expand,
.ba-h .tm-grid-expand > [class*='uk-width'] {
    margin-left: 0;
    padding-left: 0;
}

.ba-h .tm-grid-expand > .ba-hero-col {
    position: relative;
    overflow: hidden;
    min-height: clamp(430px, 52vw, 620px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(2.5rem, 4vw, 4rem) max(var(--ba-gutter), calc((100% - 1600px) / 2 + var(--ba-gutter)));
}

.ba-hero-col > * {
    position: relative;
    z-index: 1;
    max-width: 43rem;
}

.ba-h .ba-hero-col > .ba-hero-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    max-width: none;
}

.ba-hero-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 58% 46%;
}

/* Sloering saa overskriften kan laeses. Funktionel, ikke dekorativ. */
.ba-hero-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        62% 150% at 15% 44%,
        var(--ba-hero-panel) 0%,
        var(--ba-hero-panel) 62%,
        rgba(242, 241, 237, 0.94) 70%,
        rgba(242, 241, 237, 0.6) 80%,
        rgba(242, 241, 237, 0.22) 90%,
        rgba(242, 241, 237, 0) 100%
    );
}

h1.ba-hero-h1 {
    font-size: clamp(2.4rem, 4.4vw, 4.1rem);
    line-height: 1.06;
    margin-bottom: 0.55rem !important;
    /* Bryder efter "byggefirma" uden et haardt linjeskift i feltet */
    max-width: 9.3em;
    text-wrap: wrap;
}

.ba-hero-sub {
    font-family: var(--ba-serif);
    font-size: clamp(1.3rem, 2.1vw, 1.85rem);
    font-weight: 600;
    line-height: 1.25;
    color: var(--ba-ink);
    margin-bottom: 1.4rem !important;
}

.ba-hero-body {
    margin-bottom: 1.9rem !important;
}

.ba-hero-body p {
    font-size: 1.0625rem;
    line-height: 1.65;
    color: #3c3f41;
    max-width: 40ch;
    margin: 0;
}

.ba-h .ba-hero-col > .ba-hero-script {
    position: absolute;
    right: clamp(1.5rem, 4vw, 4rem);
    bottom: clamp(1.5rem, 3vw, 2.75rem);
    max-width: 15ch;
    color: #fff;
    font-size: clamp(1.3rem, 2vw, 1.9rem);
    line-height: 1.2;
    text-align: right;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
}

.ba-hero-script p {
    margin: 0;
}

/* --- Introduktion --- */

.ba-intro .tm-grid-expand {
    align-items: start;
}

h2.ba-intro-h {
    font-size: clamp(1.6rem, 2.4vw, 2.15rem);
    line-height: 1.2;
    margin-bottom: 1.15rem !important;
    max-width: 34ch;
}

.ba-intro-text p {
    font-size: 1.0625rem;
    line-height: 1.7;
    color: #3c3f41;
    max-width: 60ch;
    margin: 0;
}

blockquote.ba-quote {
    margin: 0;
    padding: clamp(1.5rem, 2.5vw, 2.25rem);
    border-left: 2px solid var(--ba-green);
    background: var(--ba-band);
    color: var(--ba-ink);
    font-family: var(--ba-serif);
    font-size: clamp(1.3rem, 2.1vw, 1.85rem);
    font-style: normal;
    font-weight: 600;
    line-height: 1.3;
}

/* Navnet over titlen, som i mockuppen. Feltet Footer er titlen, Author er navnet. */
.ba-quote .el-footer,
.ba-quote .el-author {
    letter-spacing: 0;
    text-transform: none;
}

.ba-quote .el-footer {
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-end;
    margin-top: 1.15rem;
    color: var(--ba-stone);
    font-family: var(--ba-font);
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 1.5;
    text-align: right;
}

.ba-quote .el-footer::before {
    content: none;
}

.ba-quote .el-author {
    color: var(--ba-ink);
    font-style: normal;
    font-weight: 600;
}

.ba-quote .el-author::before {
    content: none;
}

/* --- Ydelser --- */

.ba-yd-grid .el-image {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    margin-bottom: 1.15rem;
}

.ba-yd-grid .el-title {
    font-size: 1.25rem;
    line-height: 1.2;
    margin: 0 0 0.5rem !important;
}

.ba-yd-grid .el-content {
    margin-top: 0 !important;
}

.ba-yd-grid .el-content p {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--ba-stone);
    max-width: 34ch;
    margin: 0 0 1rem;
}

.ba-yd-grid .el-item > .uk-margin-top {
    margin-top: 0 !important;
}

/* Grid-elementets link har ingen ikonmulighed, saa pilen tegnes her */
.ba-yd-grid .el-link::after {
    content: '';
    width: 14px;
    height: 14px;
    flex: none;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* --- Projekter --- */

.ba-proj-grid .el-image {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    margin-bottom: 0.85rem;
}

.ba-proj-grid .el-title {
    font-family: var(--ba-font);
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.3;
    margin: 0 0 0.15rem !important;
}

.ba-proj-grid .el-meta {
    margin-top: 0 !important;
    font-family: var(--ba-font);
    letter-spacing: 0;
    text-transform: none;
    font-size: 0.9375rem;
    color: var(--ba-stone);
}

/* --- Kvalitet --- */

.ba-kval {
    padding: 0 !important;
}

.ba-kval .uk-container,
.ba-kval .uk-container-expand {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

.ba-kval .tm-grid-expand {
    margin-left: 0;
    align-items: center;
}

.ba-kval .tm-grid-expand > * {
    padding-left: 0;
}

.ba-kval-media img {
    display: block;
    width: 100%;
    height: clamp(320px, 44vw, 560px);
    object-fit: cover;
}

.ba-kval-text {
    padding: clamp(2.5rem, 5vw, 4.5rem) var(--ba-gutter) !important;
}

.ba-kval-text > * {
    max-width: 40rem;
}

h2.ba-kval-h {
    font-size: clamp(1.7rem, 2.7vw, 2.4rem);
    line-height: 1.15;
    margin-bottom: 1.1rem !important;
    max-width: 20ch;
}

.ba-kval-p {
    margin-bottom: 1.6rem !important;
}

.ba-kval-p p {
    font-size: 1.0625rem;
    line-height: 1.7;
    color: #3c3f41;
    max-width: 52ch;
    margin: 0;
}

.ba-tjek.uk-list {
    margin-bottom: 2rem !important;
}

.ba-tjek.uk-list > li {
    margin: 0 0 0.8rem;
    font-size: 0.9375rem;
    line-height: 1.5;
}

.ba-tjek .uk-grid {
    margin-left: -16px;
}

.ba-tjek .uk-grid > * {
    padding-left: 16px;
}

.ba-tjek .el-image {
    display: block;
    color: var(--ba-green) !important;
    margin-top: 0.15em;
}

.ba-tjek .el-image svg {
    width: 16px;
    height: 16px;
}

/* --- Hvorfor vaelge os --- */

.ba-hv-grid .el-title {
    font-family: var(--ba-font);
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: 0;
    margin: 0 0 0.35rem !important;
}

.ba-hv-grid .el-content {
    margin-top: 0 !important;
}

.ba-hv-grid .el-content p {
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--ba-stone);
    max-width: 32ch;
    margin: 0;
}

.ba-hv-grid .el-image {
    display: block;
    width: 34px;
    height: 34px;
}

/* --- Kontaktbaand --- */

.ba-kontakt {
    background: var(--ba-band);
}

.ba-kontakt .tm-grid-expand {
    align-items: center;
}

h2.ba-kontakt-h {
    font-size: clamp(1.6rem, 2.4vw, 2.15rem);
    line-height: 1.15;
    margin-bottom: 0.9rem !important;
}

.ba-kontakt-p p {
    font-size: 1.0625rem;
    line-height: 1.65;
    color: #3c3f41;
    max-width: 46ch;
    margin: 0 0 0.5rem;
}

.ba-kontakt-tlf {
    margin-bottom: 1.1rem !important;
}

.uk-section .ba-kontakt-tlf .uk-button-text {
    gap: 0.6rem;
    font-family: var(--ba-serif);
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    font-variant-numeric: tabular-nums;
}

.uk-section .ba-kontakt-tlf .uk-button-text:hover {
    text-decoration: none;
}

.uk-section .ba-kontakt-tlf .uk-button-text [uk-icon] svg {
    width: 22px;
    height: 22px;
}

.uk-section .ba-kontakt-tlf .uk-button-text:hover [uk-icon] {
    transform: none;
}

.ba-kontakt-script p {
    max-width: 14ch;
    margin: 0 0 0 auto;
    color: var(--ba-green);
    font-size: clamp(1.25rem, 2vw, 1.75rem);
    line-height: 1.2;
    text-align: right;
}

/* --- Mindre skaerme --- */

@media (max-width: 959px) {
    .ba-h .tm-grid-expand > .ba-hero-col {
        display: block;
        min-height: 340px;
        padding: 1.75rem var(--ba-gutter) 1.5rem;
    }

    .ba-h .ba-hero-col > *,
    .ba-h .ba-hero-col > h1.ba-hero-h1 {
        max-width: 64%;
    }

    .ba-h .ba-hero-col > .ba-hero-media {
        left: 56%;
        max-width: none;
    }

    .ba-hero-media::after {
        background: linear-gradient(
            100deg,
            var(--ba-hero-panel) 0%,
            var(--ba-hero-panel) 26%,
            rgba(242, 241, 237, 0.9) 44%,
            rgba(242, 241, 237, 0) 66%
        );
    }

    h1.ba-hero-h1 {
        font-size: clamp(1.5rem, 6.2vw, 2.05rem);
        text-wrap: balance;
    }

    .ba-hero-sub {
        font-size: 1.0625rem;
        margin-bottom: 0.9rem !important;
    }

    .ba-hero-body {
        margin-bottom: 1.35rem !important;
    }

    .ba-hero-body p {
        font-size: 0.9375rem;
        line-height: 1.55;
    }

    /* Mobilmockuppen viser én handling i heroen */
    .ba-hero-actions .el-item:has(.uk-button-text) {
        display: none;
    }

    .uk-section .ba-hero-actions .uk-button-primary {
        min-height: 46px;
        padding: 0 15px;
        gap: 0.5em;
        font-size: 0.9375rem;
        white-space: nowrap;
    }

    .ba-h .ba-hero-col > .ba-hero-script {
        right: 1rem;
        bottom: 1rem;
        max-width: 12ch;
        font-size: 1.0625rem;
    }

    /* Ydelser: lille billede til venstre, tekst til hoejre */
    .ba-yd-grid .el-item {
        display: grid;
        grid-template-columns: 118px 1fr;
        grid-template-rows: auto auto 1fr;
        column-gap: 1rem;
        align-items: start;
        padding-bottom: 1.1rem;
        border-bottom: 1px solid var(--ba-line);
    }

    .ba-yd-grid .el-image {
        grid-row: 1 / span 3;
        aspect-ratio: 1 / 1;
        margin-bottom: 0;
    }

    .ba-yd-grid .el-content p {
        margin-bottom: 0.6rem;
    }

    /* Projekter: tre i traekken. Det fjerde vises ikke, som i mockuppen. */
    .ba-proj-grid .uk-grid {
        margin-left: -12px;
    }

    .ba-proj-grid .uk-grid > * {
        padding-left: 12px;
    }

    .ba-proj-grid .uk-grid > *:nth-child(4) {
        display: none;
    }

    .ba-proj-grid .el-meta {
        font-size: 0.8125rem;
    }

    /* Fordele: tre kolonner, ikon over titlen */
    .ba-hv-grid .uk-grid {
        margin-left: -16px;
    }

    .ba-hv-grid .uk-grid > * {
        padding-left: 16px;
    }

    .ba-hv-grid .el-item .uk-grid {
        margin-left: 0;
    }

    .ba-hv-grid .el-item .uk-grid > * {
        padding-left: 0;
        margin-top: 0;
    }

    .ba-hv-grid .el-image {
        margin-bottom: 0.6rem;
    }

    .ba-hv-grid .el-title {
        font-size: 0.9375rem;
    }

    .ba-hv-grid .el-content p {
        font-size: 0.8125rem;
        line-height: 1.45;
    }

    /* Kvalitet beholder sine to spor, som i mobilmockuppen */
    .ba-kval .tm-grid-expand {
        display: flex;
        flex-wrap: nowrap;
        align-items: stretch;
    }

    .ba-kval .tm-grid-expand > *:first-child {
        width: 45%;
        max-width: 45%;
        margin-top: 0;
    }

    .ba-kval .tm-grid-expand > *:last-child {
        width: 55%;
        max-width: 55%;
        margin-top: 0;
    }

    .ba-kval-media,
    .ba-kval-media img {
        height: 100%;
    }

    .ba-kval-media img {
        min-height: 420px;
    }

    .ba-kval-text {
        padding: 1.5rem 1.15rem 1.75rem 1.35rem !important;
    }

    h2.ba-kval-h {
        font-size: 1.25rem;
        max-width: 14ch;
    }

    .ba-kval-p p {
        font-size: 0.9375rem;
        line-height: 1.55;
    }

    .ba-tjek.uk-list > li {
        font-size: 0.8125rem;
        margin-bottom: 0.55rem;
    }

    .ba-tjek .uk-grid {
        margin-left: -10px;
    }

    .ba-tjek .uk-grid > * {
        padding-left: 10px;
    }

    .ba-tjek .el-image svg {
        width: 13px;
        height: 13px;
    }

    .uk-section .ba-kval-btn .uk-button-primary {
        text-align: left;
        min-height: 46px;
        padding: 0 16px;
        font-size: 0.9375rem;
    }

    .ba-kontakt-script {
        display: none;
    }

    .uk-section[class*='ba-'] .uk-button-text {
        min-height: 40px;
    }
}

@media (max-width: 639px) {
    .ba-h .tm-grid-expand > .ba-hero-col {
        min-height: 300px;
    }

    .ba-h .ba-hero-col > *,
    .ba-h .ba-hero-col > h1.ba-hero-h1 {
        max-width: 68%;
    }

    .ba-h .ba-hero-col > .ba-hero-media {
        left: 58%;
    }

    .uk-section .ba-kval-btn .uk-button-primary,
    .uk-section .ba-kontakt-btn .uk-button-primary {
        width: 100%;
        justify-content: space-between;
    }
}

@media (max-width: 359px) {
    .ba-hv-grid .uk-grid > * {
        width: 100%;
        margin-top: 1.5rem;
    }

    .ba-hv-grid .uk-grid > *:first-child {
        margin-top: 0;
    }

    .ba-kval .tm-grid-expand {
        flex-wrap: wrap;
    }

    .ba-kval .tm-grid-expand > *:first-child,
    .ba-kval .tm-grid-expand > *:last-child {
        width: 100%;
        max-width: 100%;
    }

    .ba-kval-media img {
        min-height: 0;
        height: clamp(220px, 34vh, 300px);
    }
}

/* Faelles regler der overlevede fra den gamle forside, og som undersiderne bruger */

@media (max-width: 959px) {
    /* Det haarde linjebrud gaelder kun desktop; paa mobil bryder teksten selv */
    .ba-br-d {
        display: none;
    }
}

@media (max-width: 639px) {
    .ba-btn {
        width: 100%;
        justify-content: space-between;
    }
}

/* --- Footer efter mockuppen ---------------------------------------------- */

.ba-foot-logo {
    display: block;
    width: auto;
    height: 62px;
    margin-bottom: 1.5rem;
}

.ba-foot-kontakt {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ba-foot-kontakt li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    font-size: 0.9375rem;
}

.ba-f-ikon {
    width: 17px;
    height: 17px;
    flex: none;
    stroke: var(--ba-stone);
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ba-foot-kontakt a {
    color: var(--ba-ink);
    text-decoration: none;
    font-size: 0.9375rem;
}

.ba-foot-kontakt a:hover {
    color: var(--ba-green);
    text-decoration: underline;
}

.ba-foot-jur p {
    margin: 0 0 0.55rem;
    font-size: 0.9375rem;
    color: var(--ba-stone);
}

.ba-foot-jur a {
    color: var(--ba-stone);
    font-size: 0.9375rem;
}

@media (max-width: 639px) {
    .ba-foot-logo {
        height: 52px;
        margin-bottom: 1.15rem;
    }
}

/* --- Klikflader paa touch ------------------------------------------------ */

@media (max-width: 959px) {
    .ba-foot a,
    .ba-foot-kontakt a,
    .ba-foot-jur a {
        display: inline-block;
        padding: 0.45rem 0;
        min-height: 40px;
        line-height: 1.55;
    }

    .ba-foot li {
        margin-bottom: 0;
    }

    .ba-foot-kontakt li {
        margin-bottom: 0.25rem;
    }

    .ba-link {
        padding: 0.4rem 0;
        min-height: 40px;
    }
}

/* ==========================================================================
   Ekkelund Bolig: lejemaalssider
   ========================================================================== */

/* Galleriet i artiklen: ens beskaering, saa raekkerne flugter */
.ba-galleri {
    margin-top: 28px;
    margin-bottom: 8px;
}

.ba-galleri img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* Plantegning og luftfoto: i laesebredde, ikke flydende */
.ba-plan {
    clear: both;
    max-width: 560px;
    margin: 24px 0;
}

.ba-plan img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid rgba(0, 0, 0, .12);
}

.ba-plan figcaption {
    margin-top: 10px;
    font-size: .875rem;
    opacity: .75;
}

/* Tabellerne med areal, leje og vilkaar */
.ba-tabel {
    clear: both;
    font-size: .9375rem;
}

.ba-tabel tfoot td {
    border-top: 1px solid currentColor;
}

.ba-vilkaar td:first-child {
    width: 55%;
}

/* Logoet er bredt, ikke kvadratisk som byggefirmaets */
.ba-foot .ba-foot-logo.ba-foot-logo-bred {
    width: 200px;
    height: auto;
}

/* Forsidens hero: billedet er staaende, saa det faar hoejre side af heroen
   i stedet for hele bredden, hvor sloeringen ellers skjuler det meste */
.ba-hero-media img {
    object-position: 35% 62%;
}

@media (min-width: 960px) {
    .ba-h .ba-hero-col > .ba-hero-media {
        left: 48%;
    }

    .ba-hero-media::after {
        background: linear-gradient(
            90deg,
            var(--ba-hero-panel) 0%,
            var(--ba-hero-panel) 2%,
            rgba(242, 241, 237, 0.75) 9%,
            rgba(242, 241, 237, 0) 30%
        );
    }
}

@media (max-width: 959px) {
    .ba-hero-media img {
        object-position: 55% 62%;
    }
}

/* ==========================================================================
   Ekkelund Bolig: forsiden efter den godkendte mockup (oktober 2026)
   Alle klasser starter med ek-, saa byggefirmaets ba-regler ikke rammer dem.
   ========================================================================== */

:root {
    --ek-green: #234539;
    --ek-green-deep: #1a352b;
    --ek-badge: #2e5e48;
    --ek-ink: #1d2420;
    --ek-text: #3a413c;
    --ek-muted: #5d655f;
    --ek-line: #e4e6e0;
    --ek-sage: #eceee8;
    --ek-pad: clamp(20px, 4vw, 58px);
    --ek-radius: 4px;
}

/* --- Header ------------------------------------------------------------- */

/* Logoet staar i headeren uden at haenge ned over indholdet */
.tm-header .uk-logo img {
    height: 66px;
    max-height: 66px;
    margin-bottom: 0;
}

.tm-header .uk-navbar-container > .uk-container {
    padding-left: var(--ek-pad);
    padding-right: var(--ek-pad);
}

.ba-cta-header::after {
    content: '\2192';
    margin-left: 10px;
}

/* Paa forsiden ligger headeren oven paa heroens foto */
@media (min-width: 960px) {
    .tm-page:has(.ek-hero) .tm-header {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 980;
        background: transparent;
    }

    .tm-page:has(.ek-hero) .tm-header .uk-navbar-container,
    .tm-page:has(.ek-hero) .tm-header .uk-navbar-container.uk-navbar-transparent {
        background: transparent;
        border-bottom: 0;
    }

    /* Menupunkter der ligger hen over fotoet skal stadig kunne laeses */
    .tm-page:has(.ek-hero) .tm-header .uk-navbar-container .uk-navbar-nav > li > a {
        text-shadow: 0 0 6px rgba(255, 255, 255, 0.95), 0 0 14px rgba(255, 255, 255, 0.8);
    }

    .tm-page:has(.ek-hero) .tm-header .uk-navbar-container .uk-navbar-item a.ba-header-phone {
        color: #fff;
        border-left-color: rgba(255, 255, 255, 0.35);
        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
    }
}

/* --- Faelles ------------------------------------------------------------ */


.uk-section.ek-s > .uk-container {
    max-width: none;
    padding-left: var(--ek-pad);
    padding-right: var(--ek-pad);
}

.ek-eyebrow p {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0 0 12px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--ek-ink);
}

.ek-h2 {
    font-size: clamp(1.75rem, 2.6vw, 2.35rem) !important;
    line-height: 1.12;
    color: var(--ek-ink);
}

[class*='ek-'] a:focus-visible,
[class*='ek-'] .uk-button:focus-visible {
    outline: 2px solid var(--ek-green);
    outline-offset: 3px;
}

/* Knapper i de nye sektioner */
.uk-section[class*='ek-'] .uk-button-primary {
    min-height: 50px;
    padding: 0 24px;
    border-radius: var(--ek-radius);
    background: var(--ek-green);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    line-height: 50px;
    text-transform: none;
    letter-spacing: 0;
    transition: background-color 0.25s ease;
}

.uk-section[class*='ek-'] .uk-button-primary:hover {
    background: var(--ek-green-deep);
}

.uk-section[class*='ek-'] .uk-button-text {
    min-height: 0;
    padding: 0 0 3px;
    line-height: 1.4;
    color: var(--ek-ink);
    font-size: 14px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    border-bottom: 1px solid var(--ek-green);
}

.uk-section[class*='ek-'] .uk-button-text::before {
    display: none;
}

/* --- Hero --------------------------------------------------------------- */

.uk-section.ek-hero {
    padding: 0;
    background: #fbfbfa;
}

.ek-hero .uk-container {
    padding: 0;
}

.ek-hero .tm-grid-expand,
.ek-hero .tm-grid-expand > .ek-hero-col {
    margin: 0;
    padding: 0;
}

.ek-hero-col {
    position: relative;
    min-height: 496px;
    padding: 136px var(--ek-pad) 46px !important;
    overflow: hidden;
    isolation: isolate;
}

.ek-hero-col > .ek-hero-media {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 42%;
    z-index: -1;
    max-width: none;
}

.ek-hero-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 0% 64%;
}

.ek-hero-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #fbfbfa 0%, rgba(251, 251, 250, 0.85) 12%, rgba(251, 251, 250, 0) 42%);
}

h1.ek-hero-h1 {
    max-width: 575px;
    font-size: clamp(2.3rem, 4.4vw, 3.9rem);
    line-height: 1.02;
    color: var(--ek-ink);
}

.ek-hero-sub {
    margin-top: 10px !important;
    font-family: var(--ba-font);
    font-size: clamp(1.05rem, 1.55vw, 1.375rem);
    font-weight: 500;
    line-height: 1.3;
    color: var(--ek-ink);
}

.ek-hero-actions {
    margin-top: 36px !important;
}

.ek-hero-actions .uk-grid {
    align-items: center;
}

.ek-hero-actions .uk-button-text {
    margin-left: 12px;
    padding-right: 28px;
}

/* --- Fremhaevet lejemaal ------------------------------------------------ */

.uk-section.ek-feat {
    padding-top: 30px;
    padding-bottom: 0;
}

.ek-feat .tm-grid-expand {
    margin-left: -24px;
}

.ek-feat .tm-grid-expand > * {
    padding-left: 24px;
}

.ek-feat .tm-grid-expand > .ek-feat-card {
    position: relative;
    isolation: isolate;
    padding: 22px 26px 26px calc(24px + 26px);
}

.ek-feat-card::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 24px;
    z-index: -1;
    border: 1px solid var(--ek-line);
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.05);
}


.ek-feat-tags p {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 0;
}

.ek-badge {
    display: inline-block;
    padding: 5px 16px;
    border-radius: 999px;
    background: var(--ek-badge);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
}

.ek-sted {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ek-ink);
}

.ek-sted::before {
    content: '';
    width: 16px;
    height: 16px;
    background: url('../../../images/ikoner/ek-pin.svg') center / contain no-repeat;
}

.ek-feat-h {
    margin-top: 14px !important;
    font-size: clamp(2.2rem, 3.5vw, 3.2rem) !important;
    line-height: 1.05;
    color: var(--ek-ink);
}

.ek-feat-sub p {
    margin: 8px 0 0;
    font-size: clamp(1rem, 1.35vw, 1.25rem);
    color: var(--ek-ink);
}

.ek-stats {
    margin-top: 28px !important;
}

.ek-stats .el-item {
    text-align: center;
}

.ek-stats .el-image {
    width: 40px;
    height: 40px;
    margin: 0 auto 12px;
}

.ek-stats .el-title {
    margin: 0 !important;
    font-family: var(--ba-font);
    font-size: 20px;
    font-weight: 600;
    color: var(--ek-ink);
}

.ek-stats .el-content {
    margin-top: 2px !important;
    font-size: 15px;
    color: var(--ek-text);
}

.ek-stats .el-content p {
    margin: 0;
}

.ek-stats .uk-grid-divider > :not(.uk-first-column)::before {
    border-left-color: var(--ek-line);
}

.ek-feat-btn {
    margin-top: 30px !important;
}

/* Billederne: et stort og tre smaa, som i mockuppen */
.ek-feat-main img {
    display: block;
    width: 100%;
    height: 284px;
    object-fit: cover;
    border-radius: var(--ek-radius);
}

.ek-feat-thumbs {
    margin-top: 11px !important;
}

.ek-feat-thumbs .uk-grid {
    margin-left: -11px;
}

.ek-feat-thumbs .uk-grid > * {
    padding-left: 11px;
}

.ek-feat-thumbs img {
    display: block;
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: var(--ek-radius);
}

.ek-feat-thumbs .el-item,
.ek-feat-thumbs .uk-panel {
    margin: 0;
}

.ek-feat-thumbs .el-image {
    margin: 0;
}

/* --- Det kan du leje ---------------------------------------------------- */

.uk-section.ek-kat {
    padding-top: 72px;
    padding-bottom: 30px;
}

.ek-kat .ek-eyebrow p::after {
    content: '';
    width: 440px;
    max-width: 40vw;
    height: 1px;
    background: var(--ek-line);
}

.ek-lead p {
    max-width: 680px;
    margin: 14px 0 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--ek-ink);
}

.ek-kat-link {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.ek-kat .tm-grid-expand + .tm-grid-expand {
    margin-top: 32px;
}

.ek-kat-grid .el-item {
    position: relative;
    height: 100%;
    border: 1px solid var(--ek-line);
    border-radius: var(--ek-radius);
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.ek-kat-grid .el-item:hover {
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
}

.ek-kat-grid .el-image {
    display: block;
    width: 100%;
    height: 198px;
    margin: 0;
    object-fit: cover;
}

.ek-kat-grid .el-title {
    margin: 0 !important;
    padding: 18px 54px 0 14px;
    font-family: var(--ba-font);
    font-size: 17px;
    font-weight: 700;
    color: var(--ek-ink);
}

.ek-kat-grid .el-content {
    margin: 4px 0 0 !important;
    padding: 0 54px 18px 14px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--ek-text);
}

.ek-kat-grid .el-content p {
    margin: 0;
}

.ek-kat-grid a.el-item::after,
.ek-kat-grid .el-item > a::after {
    content: '\2192';
    position: absolute;
    right: 18px;
    bottom: 30px;
    font-size: 18px;
    color: var(--ek-ink);
}

.ek-kat-grid .uk-panel > *:not(.el-image):not(img) {
    margin-left: 0;
}

/* --- Hvorfor ------------------------------------------------------------ */

.uk-section.ek-hvorfor {
    margin-top: 0;
    padding-top: 46px;
    padding-bottom: 40px;
    background: var(--ek-sage);
}

.ek-hvorfor .tm-grid-expand {
    align-items: center;
}

.ek-hvorfor-h {
    font-size: clamp(2rem, 3vw, 2.75rem) !important;
    white-space: nowrap;
}

.ek-hvorfor-intro {
    border-right: 1px solid #cfd3cb;
}

.ek-hv .el-item {
    text-align: center;
    padding: 4px 12px;
}

.ek-hv .el-image {
    width: 40px;
    height: 40px;
    margin: 0 auto 12px;
}

.ek-hv .el-title {
    margin: 0 !important;
    font-family: var(--ba-font);
    font-size: 17px;
    font-weight: 600;
    color: var(--ek-ink);
}

.ek-hv .el-content {
    margin-top: 6px !important;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--ek-text);
}

.ek-hv .el-content p {
    max-width: 230px;
    margin: 0 auto;
}

.ek-hv .uk-grid-divider > :not(.uk-first-column)::before {
    border-left-color: #cfd3cb;
}

/* --- Kontakt ------------------------------------------------------------ */

.uk-section.ek-kontakt {
    padding: 0;
    background: #fff;
}

.ek-kontakt .uk-container {
    padding: 0;
}

.ek-kontakt .tm-grid-expand {
    margin: 0;
    align-items: stretch;
}

.ek-kontakt .tm-grid-expand > * {
    padding: 0;
}

.ek-kontakt .tm-grid-expand > .ek-kontakt-media {
    position: relative;
    min-height: 302px;
}

.ek-kontakt-media .ek-kontakt-foto {
    position: absolute;
    inset: 0;
    max-width: none;
}

.ek-kontakt-media .ek-kontakt-foto img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 30%;
}

.ek-kontakt-tekst {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 46px var(--ek-pad) 46px 56px !important;
}

.ek-kontakt-p p {
    margin: 14px 0 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--ek-ink);
}

.ek-kontakt-actions {
    margin-top: 28px !important;
}

.ek-kontakt-actions .uk-grid {
    align-items: center;
}

.ek-kontakt-actions .uk-button-primary {
    font-size: 18px;
    padding: 0 26px;
}

.ek-kontakt-actions .uk-button-text {
    margin-left: 12px;
}

/* --- Footer ------------------------------------------------------------- */

.tm-page footer .uk-section.ba-foot {
    background: var(--ek-green);
    color: #fff;
    padding-top: 34px;
    padding-bottom: 34px;
}

.tm-page footer .uk-section.ba-foot > .uk-container {
    max-width: none;
    padding-left: var(--ek-pad);
    padding-right: var(--ek-pad);
}

.ba-foot .tm-grid-expand {
    align-items: stretch;
}

.ba-foot .tm-grid-expand > * + * {
    border-left: 1px solid rgba(255, 255, 255, 0.28);
}

.ba-foot .ek-foot-logo {
    display: block;
    width: 180px;
    height: auto;
    filter: invert(1);
}

.ba-foot .ek-foot-col {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
}

.ba-foot .ek-foot-col h2 {
    margin: 0 0 8px;
    font-family: var(--ba-font);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: #fff;
}

.ba-foot .ek-foot-col p {
    margin: 0;
}

.ba-foot .ek-foot-col a {
    color: #fff;
    text-decoration: none;
}

.ba-foot .ek-foot-col a:hover,
.ba-foot .ek-foot-col a:focus-visible {
    text-decoration: underline;
}

.ba-foot .ek-foot-script {
    display: block;
    font-family: Caveat, 'Segoe Script', cursive;
    font-size: 30px;
    line-height: 1.15;
    color: #fff;
    transform: rotate(-7deg);
    text-align: center;
}

.ba-foot .tm-grid-expand > * {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* --- Tablet og mobil ---------------------------------------------------- */

@media (max-width: 1199px) {
    .ek-hero-col > .ek-hero-media {
        left: 34%;
    }

    /* Smal desktop: headeren skal kunne vaere paa een linje */
    .tm-header .uk-logo img {
        height: 54px;
        max-height: 54px;
    }

    .tm-header .uk-navbar-nav > li > a {
        padding: 0 9px;
    }

    .tm-header .uk-navbar-container .uk-navbar-nav > li > a {
        font-size: 14px;
    }

    .tm-header #module-116 {
        display: none;
    }

    .ba-foot .ek-foot-script {
        font-size: 24px;
    }
}

@media (max-width: 959px) {
    .ek-hero-col {
        min-height: 0;
        padding: 0 0 36px !important;
    }

    .ek-hero-col > .ek-hero-media {
        position: relative;
        left: auto;
        z-index: 0;
        margin: 0 0 24px !important;
    }

    .ek-hero-media img {
        height: auto;
        aspect-ratio: 4 / 3;
        object-position: 40% 60%;
    }

    .ek-hero-media::after {
        display: none;
    }

    .ek-hero-col > :not(.ek-hero-media) {
        margin-left: var(--ek-pad) !important;
        margin-right: var(--ek-pad) !important;
    }

    .ek-hero-actions .uk-button-primary {
        width: 100%;
        justify-content: space-between;
    }

    .ek-hero-actions .uk-button-text {
        margin-left: 0;
    }

    /* Tekstlinks skal vaere store nok at ramme med en finger */
    .uk-section[class*='ek-'] .uk-button-text {
        padding-top: 13px;
        padding-bottom: 6px;
    }

    .uk-section.ek-feat {
        padding-top: 32px;
    }

    .ek-feat-media {
        margin-top: 24px;
    }

    .ek-feat-main img {
        height: auto;
        aspect-ratio: 16 / 10;
    }

    .ek-feat-thumbs img {
        height: auto;
        aspect-ratio: 4 / 3;
    }

    .ek-kat-link {
        justify-content: flex-start;
        margin-top: 16px;
    }

    .uk-section.ek-kat {
        padding-top: 56px;
    }

    .ek-hvorfor-intro {
        border-right: 0;
        margin-bottom: 24px;
    }

    .ek-hv .uk-grid-divider > :not(.uk-first-column)::before {
        border-left: 0;
    }

    .ek-hv .uk-grid > * + * {
        margin-top: 22px;
        padding-top: 22px;
        border-top: 1px solid #cfd3cb;
    }

    .ek-kontakt .tm-grid-expand > .ek-kontakt-media {
        min-height: 280px;
    }

    .ek-kontakt-tekst {
        padding: 36px var(--ek-pad) 44px !important;
    }

    .ek-kontakt-actions .uk-button-primary {
        width: 100%;
        justify-content: center;
    }

    .ek-kontakt-actions .uk-button-text {
        margin-left: 0;
    }

    .ba-foot .tm-grid-expand > * + * {
        border-left: 0;
    }

    .ba-foot .ek-foot-script {
        text-align: left;
        transform: rotate(-4deg);
    }
}

/* ==========================================================================
   Ekkelund Bolig: lejemaalssiden Marktoften 7B efter den godkendte mockup
   Genbruger ek-klasserne fra forsiden. Egne klasser starter med ekl-.
   ========================================================================== */

.ekl-brod {
    max-width: 680px;
}

.ekl-brod p,
.ekl-brod li {
    font-size: 16px;
    line-height: 1.6;
    color: var(--ek-ink);
}

.ekl-brod p {
    margin: 0 0 14px;
}

.ekl-brod h3 {
    margin: 26px 0 8px;
    font-size: 1.6rem;
    line-height: 1.2;
    color: var(--ek-ink);
}

.ekl-ikon-kol {
    flex: none;
    width: 116px !important;
}

.ekl-tekst-kol {
    flex: none;
    width: calc(100% - 116px) !important;
}

/* Det groenne kontaktfelt er lavere paa lejemaalssiden, som i mockuppen */
.tm-page:has(.ekl-hero) .uk-section.ba-close {
    padding-top: 56px;
    padding-bottom: 56px;
}

/* --- Hero --------------------------------------------------------------- */

.ekl-hero .ek-hero-col {
    min-height: 594px;
    padding-top: 123px !important;
    padding-bottom: 32px !important;
}

.ekl-hero .ek-hero-media img {
    object-position: 60% 60%;
}

.ekl-hero-eyebrow p {
    margin-bottom: 14px;
    color: var(--ek-green);
}

h1.ekl-hero-h1 {
    max-width: none;
    font-size: clamp(2.3rem, 3.9vw, 3.5rem);
    line-height: 1.04;
}

.ekl-hero-tekst p {
    max-width: 560px;
    margin: 20px 0 0;
    font-size: 17px;
    line-height: 1.55;
    color: var(--ek-ink);
}

.ekl-hero .ek-hero-actions {
    margin-top: 32px !important;
}

/* --- Noeglefordele ------------------------------------------------------ */

.uk-section.ekl-fordele {
    padding-top: 34px;
    padding-bottom: 34px;
    border-bottom: 1px solid var(--ek-line);
    background: #fff;
}

.ekl-fordele-grid .el-item {
    display: flex;
    justify-content: center;
}

.ekl-fordele-grid .el-image {
    width: 40px;
    height: 40px;
}

.ekl-fordele-grid .el-title {
    margin: 0 !important;
    font-family: var(--ba-font);
    font-size: 15px;
    font-weight: 700;
    color: var(--ek-ink);
}

.ekl-fordele-grid .el-content {
    margin-top: 2px !important;
    font-size: 13.5px;
    font-style: italic;
    color: var(--ek-text);
}

.ekl-fordele-grid .el-content p {
    margin: 0;
}

.ekl-fordele-grid .uk-grid-divider > :not(.uk-first-column)::before {
    border-left-color: var(--ek-line);
}

/* --- Om lejemaalet ------------------------------------------------------ */

.uk-section.ekl-om {
    padding-top: 44px;
    padding-bottom: 30px;
}

.ekl-om .ek-h2 {
    margin-bottom: 16px !important;
}

.ekl-om-fotos .ekl-om-foto img {
    display: block;
    width: 100%;
    height: 320px;
    object-fit: cover;
    border-radius: var(--ek-radius);
}

.ekl-om-fotos .ekl-om-foto + .ekl-om-foto {
    margin-top: 13px !important;
}

/* --- Galleri ------------------------------------------------------------ */

.uk-section.ekl-galleri-sec {
    padding-top: 30px;
    padding-bottom: 30px;
}

.ekl-galleri-sec .tm-grid-expand + .tm-grid-expand {
    margin-top: 6px;
}

.ekl-galleri .uk-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: 186px 186px;
    gap: 13px;
    margin: 0;
}

.ekl-galleri .uk-grid > * {
    width: auto;
    margin: 0 !important;
    padding: 0;
}

.ekl-galleri .uk-grid > :first-child {
    grid-row: span 2;
}

/* De sidste billeder findes kun i lightboxen */
.ekl-galleri .uk-grid > :nth-child(n + 6) {
    display: none;
}

.ekl-galleri .el-item,
.ekl-galleri .el-item > a,
.ekl-galleri .el-item .uk-panel {
    display: block;
    height: 100%;
}

.ekl-galleri img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--ek-radius);
}

.ekl-galleri a:hover img {
    opacity: 0.92;
}

/* --- Areal og leje ------------------------------------------------------ */

.uk-section.ekl-areal {
    padding-top: 40px;
    padding-bottom: 24px;
}

.ekl-areal .tm-grid-expand + .tm-grid-expand {
    margin-top: 6px;
}

.ekl-areal .tm-grid-expand {
    align-items: stretch;
}

.ekl-stats-kort > .ekl-stats {
    height: 100%;
    padding: 28px 20px 24px;
    border: 1px solid var(--ek-line);
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.05);
}

.ekl-stats.ek-stats {
    margin-top: 0 !important;
}

.ekl-leje-kol > .ekl-leje {
    height: 100%;
    display: flex;
    align-items: center;
    padding: 24px 32px;
    border-radius: 6px;
    background: var(--ek-sage);
}

.ekl-leje .el-image {
    width: 48px;
    height: 48px;
}

.ekl-leje .el-meta {
    margin-top: 0 !important;
    font-size: 14px;
    font-weight: 600;
    color: var(--ek-ink);
}

.ekl-leje .el-title {
    margin: 4px 0 0 !important;
    font-family: var(--ba-font-display, 'Source Serif 4', Georgia, serif);
    font-size: 30px;
    font-weight: 600;
    line-height: 1.1;
    color: var(--ek-ink);
}

.ekl-leje .el-content {
    margin-top: 4px !important;
    font-size: 14px;
    color: var(--ek-text);
}

.ekl-leje .el-content p {
    margin: 0;
}

/* --- Lejevilkaar -------------------------------------------------------- */

.uk-section.ekl-vilkaar-sec {
    padding-top: 30px;
    padding-bottom: 40px;
}

.ekl-vilkaar-sec .tm-grid-expand + .tm-grid-expand {
    margin-top: 4px;
}

.ekl-vilkaar.uk-list-divider > li,
.ekl-vilkaar .uk-list-divider > li {
    margin: 0 !important;
    padding: 11px 0;
    border-top: 1px solid var(--ek-line);
}

.ekl-vilkaar > li:last-child,
.ekl-vilkaar .el-item:last-child {
    border-bottom: 1px solid var(--ek-line);
}

.ekl-vilkaar .el-title {
    font-family: var(--ba-font);
    font-size: 14px;
    font-weight: 500;
    color: var(--ek-ink);
}

.ekl-vilkaar .el-content {
    font-size: 14px;
    color: var(--ek-text);
}

.ekl-vilkaar .el-content p {
    margin: 0;
}

.ekl-vilkaar .uk-grid > :first-child {
    width: 45%;
    flex: none;
}

/* Titel og vaerdi bliver paa samme linje, ogsaa naar vaerdien er lang */
.ekl-vilkaar .uk-grid {
    flex-wrap: nowrap;
}

.ekl-vilkaar .uk-grid > :last-child {
    flex: 1;
    min-width: 0;
    margin-top: 0 !important;
}

/* --- Energi ------------------------------------------------------------- */

.uk-section.ekl-energi {
    padding-top: 40px;
    padding-bottom: 40px;
    background: var(--ek-sage);
}

.ekl-energi .tm-grid-expand {
    align-items: center;
}

.ekl-energi-ikon img,
.ekl-lokalplan-ikon img {
    display: block;
    width: 72px;
    height: 72px;
}

.ekl-energi .ek-eyebrow p {
    color: var(--ek-green);
}

.ekl-energi .ek-h2 {
    margin-bottom: 8px !important;
}

.ekl-energi .ekl-brod p {
    max-width: 640px;
    margin: 0;
}

/* --- Plantegning -------------------------------------------------------- */

.uk-section.ekl-plan {
    padding-top: 30px;
    padding-bottom: 20px;
}

.ekl-plan-billede {
    max-width: 560px;
    margin: 14px auto 0 !important;
}

.ekl-plan-billede img {
    display: block;
    width: 100%;
    height: auto;
}

.ekl-plan-billede a {
    cursor: zoom-in;
}

.ekl-plan-tekst p {
    margin: 12px auto 0;
    max-width: 560px;
    text-align: center;
    font-size: 14px;
    color: var(--ek-text);
}

/* --- Lokalplan ---------------------------------------------------------- */

.uk-section.ekl-lokalplan {
    padding-top: 30px;
    padding-bottom: 40px;
}

.ekl-lokalplan .tm-grid-expand + .tm-grid-expand {
    margin-top: 4px;
}

.ekl-lokalplan-ikon img {
    width: 56px;
    height: 56px;
}

.ekl-lokalplan-h {
    margin-bottom: 6px !important;
    font-size: clamp(1.4rem, 2vw, 1.75rem) !important;
    color: var(--ek-ink);
}

.ekl-lokalplan .ekl-brod p {
    max-width: 820px;
    margin: 0;
}

/* --- Kontakt ------------------------------------------------------------ */

.uk-section.ekl-kontakt {
    padding-top: 22px;
    padding-bottom: 44px;
    background: #f7f7f4;
}

.ekl-kontakt .tm-grid-expand + .tm-grid-expand {
    margin-top: 6px;
}

.ekl-kontakt .tm-grid-expand {
    align-items: center;
}

.ekl-kontakt-foto img {
    display: block;
    width: 100%;
    max-width: 508px;
    height: 227px;
    object-fit: cover;
    object-position: 50% 30%;
    border-radius: var(--ek-radius);
}

.ekl-kontakt-navn p {
    margin: 12px 0 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ek-ink);
}

.ekl-kontakt-eyebrow p {
    color: var(--ek-green);
}

/* --- Tablet og mobil ---------------------------------------------------- */

@media (max-width: 959px) {
    .ekl-hero .ek-hero-col {
        min-height: 0;
        padding: 0 0 36px !important;
    }

    .ekl-hero-tekst p {
        font-size: 16px;
    }

    .ekl-fordele-grid .el-item {
        justify-content: flex-start;
    }

    .ekl-fordele-grid .el-content {
        font-size: 12.5px;
    }

    .ekl-fordele-grid .uk-grid-divider > :not(.uk-first-column)::before {
        border-left: 0;
    }

    .ekl-om-fotos {
        margin-top: 24px;
    }

    .ekl-om-fotos .ekl-om-foto img {
        height: auto;
        aspect-ratio: 16 / 10;
    }

    .ekl-galleri .uk-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
        gap: 10px;
    }

    .ekl-galleri .uk-grid > :first-child {
        grid-row: auto;
        grid-column: span 2;
    }

    .ekl-galleri img {
        height: auto;
        aspect-ratio: 4 / 3;
    }

    .ekl-areal .tm-grid-expand > .ekl-leje-kol {
        margin-top: 16px !important;
    }

    .ekl-vilkaar-sec .tm-grid-expand > * + * {
        margin-top: 0;
    }

    .ekl-vilkaar-sec .tm-grid-expand > * + * .ekl-vilkaar > li:first-child {
        border-top: 0;
    }

    .ekl-energi-ikon img,
    .ekl-lokalplan-ikon img {
        width: 48px;
        height: 48px;
    }

    .ekl-kontakt-foto img {
        max-width: none;
        height: 260px;
    }

    .ekl-kontakt-tekst {
        margin-top: 24px;
    }
}

@media (max-width: 639px) {
    .ekl-vilkaar .uk-grid > :first-child {
        width: 48%;
    }

    .ekl-ikon-kol,
    .ekl-tekst-kol {
        width: 100% !important;
    }

    .ekl-tekst-kol {
        margin-top: 12px;
    }
}

/* ==========================================================================
   Ekkelund Bolig: undersideskabelonen efter den godkendte mockup
   Kontakt, Om os, Beliggenhed og Depotrum. Klasser starter med eku-.
   Noeglefordelene genbruger ekl-fordele fra lejemaalssiden.
   ========================================================================== */

/* --- Hero --------------------------------------------------------------- */

.uk-section.eku-hero {
    padding: 0;
    background: #f4f4f1;
}

.eku-hero .uk-container {
    padding: 0;
}

.eku-hero .tm-grid-expand,
.eku-hero .tm-grid-expand > .eku-hero-col {
    margin: 0;
    padding: 0;
}

.eku-hero-col {
    position: relative;
    min-height: 340px;
    padding: 58px var(--ek-pad) 44px !important;
    overflow: hidden;
    isolation: isolate;
}

.eku-hero-col > .eku-hero-media {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 42%;
    z-index: -1;
    max-width: none;
}

.eku-hero-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 55%;
}

.eku-hero-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #f4f4f1 0%, rgba(244, 244, 241, 0.85) 12%, rgba(244, 244, 241, 0) 45%);
}

h1.eku-hero-h1 {
    max-width: 640px;
    font-size: clamp(2.2rem, 3.5vw, 3.15rem);
    line-height: 1.06;
    color: var(--ek-ink);
}

.eku-hero-lead p {
    max-width: 600px;
    margin: 18px 0 0;
    font-size: 17px;
    line-height: 1.55;
    color: var(--ek-ink);
}

.eku-hero-cta {
    margin-top: 28px !important;
}

/* Knapperne i de nye sektioner har samme form som paa forsiden */
.uk-section[class*='eku-'] .uk-button-primary {
    min-height: 48px;
    padding: 0 22px;
    border-radius: var(--ek-radius);
    background: var(--ek-green);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    line-height: 48px;
    text-transform: none;
    letter-spacing: 0;
}

.uk-section[class*='eku-'] .uk-button-primary:hover {
    background: var(--ek-green-deep);
}

/* --- Artiklen ----------------------------------------------------------- */

.uk-section.eku-body {
    padding-top: 52px;
    padding-bottom: 20px;
}

.eku-tekst {
    max-width: 760px;
}

.eku-tekst h2 {
    margin: 30px 0 10px;
    font-size: clamp(1.5rem, 2.1vw, 1.9rem);
    line-height: 1.2;
    color: var(--ek-ink);
}

.eku-tekst > :first-child,
.eku-tekst .eku-kolonner > div > :first-child {
    margin-top: 0;
}

.eku-tekst p,
.eku-tekst li {
    font-size: 16px;
    line-height: 1.6;
    color: var(--ek-ink);
}

.eku-tekst p {
    margin: 0 0 14px;
}

.eku-tekst a {
    color: var(--ek-green);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Gamle flydende billeder i artiklerne skjules ikke, men fylder ikke spalten */
.eku-tekst .ba-art-figure {
    max-width: 320px;
}

.eku-side img {
    display: block;
    width: 100%;
    height: 460px;
    object-fit: cover;
    border-radius: var(--ek-radius);
}

/* Uden billede til artiklen faar teksten hele bredden */
.eku-body .tm-grid-expand:not(:has(.eku-side img)) > .eku-side-kol {
    display: none;
}

.eku-body .tm-grid-expand:not(:has(.eku-side img)) > .eku-tekst-kol {
    width: 100%;
}

.eku-body .tm-grid-expand:not(:has(.eku-side img)) .eku-tekst {
    max-width: none;
}

/* To spalter inde i artiklen, fx Koeretider og Omraadet */
.eku-kolonner {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
    margin-bottom: 8px;
}

.eku-ikonliste {
    margin: 0;
    padding: 0;
    list-style: none;
}

.eku-ikonliste li {
    position: relative;
    margin: 0 0 12px;
    padding-left: 38px;
}

.eku-ikonliste li::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 0;
    width: 24px;
    height: 24px;
    background: url('../../../images/ikoner/ek-bil.svg') center / contain no-repeat;
}

.eku-knap {
    margin-top: 18px !important;
}

.eku-knap a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 18px;
    border-radius: var(--ek-radius);
    background: var(--ek-green);
    color: #fff !important;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none !important;
}

.eku-knap a::after {
    content: '\2192';
}

.eku-knap a:hover {
    background: var(--ek-green-deep);
}

/* Kontaktsiden: oplysninger, portraet, adresse og foto paa een raekke */
.eku-kontaktgrid {
    grid-template-columns: 1.2fr 1fr 1fr 0.9fr;
    align-items: start;
}

.eku-tlf a {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
}

.eku-tlf a::before {
    content: '';
    width: 20px;
    height: 20px;
    background: url('../../../images/ikoner/telefon.svg') center / contain no-repeat;
}

.eku-portraet,
.eku-ejendom {
    display: block;
    width: 100%;
    height: 230px;
    object-fit: cover;
    border-radius: var(--ek-radius);
}

/* --- Se ogsaa ----------------------------------------------------------- */

.uk-section.eku-seogsaa-sec {
    padding-top: 30px;
    padding-bottom: 56px;
}

.eku-seogsaa-h {
    margin-bottom: 18px !important;
    font-family: var(--ba-font);
    font-size: 15px !important;
    font-weight: 700;
    color: var(--ek-ink);
}

.eku-seogsaa .el-item {
    position: relative;
}

.eku-seogsaa .el-item > a {
    display: block;
    padding-right: 34px;
}

.eku-seogsaa .el-item > a::after {
    content: '\2192';
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: var(--ek-ink);
}

.eku-seogsaa .el-image {
    width: 170px;
    height: 96px;
    object-fit: cover;
    border-radius: var(--ek-radius);
}

.eku-seogsaa .el-title {
    margin: 0 !important;
    font-family: var(--ba-font);
    font-size: 15px;
    font-weight: 700;
    color: var(--ek-ink);
}

.eku-seogsaa .el-title::after {
    display: none;
}

.eku-seogsaa .el-meta {
    text-transform: none;
    letter-spacing: 0;
    margin-top: 4px !important;
    font-size: 13.5px;
    color: var(--ek-text);
}

/* --- Det groenne kontaktfelt er lavere i den nye retning ---------------- */

.tm-page .uk-section.ba-close {
    padding-top: 56px;
    padding-bottom: 56px;
}

.tm-page .ba-close .ba-close-h {
    font-size: clamp(1.9rem, 2.6vw, 2.4rem) !important;
    line-height: 1.12;
}

/* --- Tablet og mobil ---------------------------------------------------- */

@media (max-width: 959px) {
    .eku-hero-col {
        min-height: 0;
        padding: 0 0 36px !important;
    }

    .eku-hero-col > .eku-hero-media {
        position: relative;
        left: auto;
        z-index: 0;
        margin: 0 0 24px !important;
    }

    .eku-hero-media img {
        height: auto;
        aspect-ratio: 16 / 9;
    }

    .eku-hero-media::after {
        display: none;
    }

    .eku-hero-col > :not(.eku-hero-media) {
        margin-left: var(--ek-pad) !important;
        margin-right: var(--ek-pad) !important;
    }

    .eku-side-kol {
        margin-top: 28px;
    }

    .eku-side img {
        height: auto;
        aspect-ratio: 4 / 3;
    }

    .eku-kontaktgrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .eku-seogsaa .el-image {
        width: 120px;
        height: 80px;
    }
}

@media (max-width: 639px) {
    .eku-kolonner {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .eku-kontaktgrid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .eku-portraet,
    .eku-ejendom {
        height: 200px;
    }
}