/*
 * tbs-lts14-compat.css — make the TYPO3 14 copy (idefa_basesite + navigation_extender menu-layout-4 +
 * barcelona_elements) look like the barcelona_theme live sites (tbs.dk, valtec.dk, tbsaskildrup.dk, tbsfyn.dk,
 * valtecholmsland.dk). Built from btmc-lts14-compat.css (same barcelona template). One file for all five sites: the
 * per-site colours come from the old barcelona constants as CSS variables (page.cssInline.900, replay 14-43):
 *   --tbs-bar        page.themeoption.header_footer_background_color (menu bar + footer)
 *   --tbs-bar-hover  page.themeoption.header_footer_hover_color
 *   --tbs-bar-text   page.themeoption.header_footer_font_color
 * Included after all other CSS (replay 14-43).
 */

/* ---------- header: white logo row, coloured menu bar, content 1140 wide, scrolls away ---------- */
#page-header,
#page-header.navbar{
    position: relative !important;
    background-color: #ffffff !important;
}
.page-header-container{
    max-width: none;
    padding: 0;
}
.page-header-top{
    max-width: 1140px;
    margin: 0 auto;
    padding: 15px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
/* natural file size, no 120px cap — live: TBS/Valtec 264x120, Holmsland 350x159, Askildrup 355x153 (its file is
   350x159; live stretches it to the constants, 5px is not worth a per-site rule) */
.page-header-top-left img{
    max-height: none !important;
    height: auto !important;
    width: auto !important;
}
/* right of the logo: the special page's colPos 2 image (Fendt/Valtra logo) — no caption/text */
.tbs-header-right img{
    max-height: 80px !important;
    width: auto !important;
    max-width: none !important;
}
.tbs-header-right figcaption,
.tbs-header-right .ce-bodytext,
.tbs-header-right .frame-header{
    display: none !important;
}
.tbs-header-right .frame,
.tbs-header-right .frame-container,
.tbs-header-right .frame-inner,
.tbs-header-right .gallery-row,
.tbs-header-right .gallery-item,
.tbs-header-right figure{
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
    width: auto !important;
}
.page-header-bottom{
    background-color: var(--tbs-bar);
}
.page-header-bottom-content{
    max-width: 1140px;
    margin: 0 auto;
    padding: 0;
    position: relative;
}
#mainnavigation .navbar-nav{
    padding-left: 0 !important;
    margin-left: 0 !important;
}
#mainnavigation .navbar-nav > .nav-item > .nav-link{
    color: var(--tbs-bar-text) !important;
}
#mainnavigation .navbar-nav > .nav-item > .nav-link:hover,
#mainnavigation .navbar-nav > .nav-item > .nav-link.active,
#mainnavigation .navbar-nav > .nav-item > .nav-link[aria-current="true"]{
    background-color: var(--tbs-bar-hover) !important;
}
#mainnavigation .navbar-nav .nav-link::before{
    display: none !important;
}
@media (min-width: 992px){
    #mainnavigation .navbar-nav{
        gap: 0;
        flex-wrap: nowrap;
        justify-content: flex-start !important;
    }
    #mainnavigation .navbar-nav > .nav-item > .dropdown-menu.dropdown-menu-simple{
        width: auto !important;
        min-width: 200px !important;
    }
    #mainnavigation .navbar-nav > .nav-item > .dropdown-menu > .dropdown-nav{
        display: block !important;
        grid-template-columns: none !important;
    }
}

/* ---------- search in the menu bar (barcelona's magnifier; lib.tbsSearch): the icon is a label for the field,
   the field opens on focus and submits on Enter — no JS ---------- */
.tbs-search{
    position: absolute;
    top: 0;
    right: 15px;
    height: 100%;
    display: flex;
    align-items: center;
    margin: 0;
    z-index: 5;
}
.tbs-search-icon{
    width: 36px;
    height: 36px;
    margin: 0;
    cursor: pointer;
    background: no-repeat center / 15px 15px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3E%3Cpath d='M11.74 10.34a6.5 6.5 0 1 0-1.4 1.4l3.85 3.85a1 1 0 0 0 1.41-1.41zM6.5 11a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9z'/%3E%3C/svg%3E");
}
.tbs-search-input{
    width: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    height: 30px;
    font-size: 14px;
    color: #010101;
    background: #ffffff;
    transition: width .2s, opacity .2s;
}
.tbs-search:focus-within .tbs-search-input{
    width: 220px;
    padding: 0 10px;
    opacity: 1;
}
@media (max-width: 991.98px){
    .tbs-search{
        top: -44px;
        right: 60px;
        height: 36px;
    }
    .tbs-search:focus-within .tbs-search-input{
        width: 160px;
    }
}

/* ---------- footer: barcelona's three columns (root page colPos 1 | 4 | 5, Layouts/Default.html) ---------- */
#page-footer{
    background-color: var(--tbs-bar) !important;
    color: var(--tbs-bar-text);
}
#page-footer a{
    color: var(--tbs-bar-text);
}
#page-footer .tbs-footer-row{
    max-width: 1140px;
    margin: 0 auto;
}
#page-footer iframe{
    max-width: 100%;
}

/* ===================== round 2 (A/B 2026-10-27) ===================== */
/* per-site variables from page.cssInline.901 (replay 14-45): --tbs-footer, --tbs-btn, --tbs-header-bg, --tbs-font,
   --tbs-head-font (Valtec/Holmsland) */

/* navigation_extender pads the content by the header height for a fixed header; ours scrolls (JS sets it inline) */
#page-content{
    padding-top: 0 !important;
}
/* logo: the extender's reveal animation leaves top:60px + translateY(-60px) → clipped by 45px at scroll 0 */
.page-header-top-left .navbar-brand-logo-normal{
    top: 0 !important;
    transform: none !important;
}
.page-header-top{
    padding: 50px 15px 25px;
}
#page-header,
#page-header.navbar{
    background-color: var(--tbs-header-bg, #ffffff) !important;
}
/* right logo: live 280x50 */
.tbs-header-right img{
    max-height: 50px !important;
}
/* Valtec/Holmsland: the special page's colPos 2 is a gallery of staff portraits — one row of round 105px photos */
.tbs-header-right .gallery-row:has(> .gallery-item + .gallery-item){
    display: flex !important;
    flex-wrap: nowrap;
    gap: 10px;
}
.tbs-header-right .gallery-row:has(> .gallery-item + .gallery-item) img{
    width: 105px !important;
    height: 105px !important;
    max-height: none !important;
    border-radius: 50%;
    object-fit: cover;
}
.tbs-header-right .gallery-row:has(> .gallery-item + .gallery-item) figcaption{
    display: block !important;
    font-size: 12px;
    line-height: 15px;
    color: #4d515b;
    text-align: center;
}
@media (max-width: 991.98px){
    .tbs-header-right{
        display: none;
    }
}

/* menu bar: live 45px, 13px bold uppercase items, padding 12px 14px 13px */
@media (min-width: 992px){
    .page-header-bottom,
    .page-header-bottom-content,
    #mainnavigation{
        min-height: 45px !important;
    }
    #mainnavigation .navbar-nav > .nav-item > .nav-link{
        padding: 12px 14px 13px !important;
        font-size: 13px !important;
        line-height: 20px !important;
        font-weight: 700 !important;
        text-transform: uppercase;
    }
    /* dropdown: site colour, white bold uppercase 13px, directly under the bar */
    #mainnavigation .navbar-nav > .nav-item > .dropdown-menu{
        margin-top: 0 !important;
        top: 100% !important;
        background-color: var(--tbs-bar) !important;
        box-shadow: none !important;
        border: 0 !important;
        border-radius: 0 !important;
        padding: 0 !important;
    }
    #mainnavigation .dropdown-menu a,
    #mainnavigation .dropdown-menu .dropdown-text{
        color: var(--tbs-bar-text) !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        text-transform: uppercase;
        background: transparent !important;
    }
    #mainnavigation .dropdown-menu a:hover{
        background-color: var(--tbs-bar-hover) !important;
    }
}

/* fonts (bp proxy, replay 14-45) */
body,
#page-footer{
    font-family: var(--tbs-font, sans-serif);
}
h1, h2, h3, h4, h5, h6, .element-header{
    font-family: var(--tbs-head-font, var(--tbs-font, sans-serif));
}

/* content links in the site colour, not bp primary orange */
#page-content a:not(.btn){
    color: var(--tbs-bar);
}

/* hero: barcelona's slider is the image at full width (1140x315 → 1280x353), not a 100vh fullscreen box */
.frame-type-carousel_fullscreen{
    padding: 0 !important;
}
.frame-type-carousel_fullscreen .frame-container{
    padding: 0 !important;
    max-width: none !important;
}
.frame-type-carousel_fullscreen .carousel,
.frame-type-carousel_fullscreen .carousel-inner,
.frame-type-carousel_fullscreen .carousel-item{
    height: auto !important;
    min-height: 0 !important;
}
.frame-type-carousel_fullscreen .carousel-item{
    background: transparent !important;
}
.frame-type-carousel_fullscreen .carousel-item img{
    display: block;
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
}

/* footer: bp paints .footer-section #313131 over #page-footer */
#page-footer,
#page-footer .footer-section{
    background-color: var(--tbs-footer, var(--tbs-bar)) !important;
}
#page-footer .tbs-footer-col .frame-type-div hr{
    border-color: rgba(255,255,255,.6);
    opacity: 1;
}
#page-footer .btn,
#page-footer a.btn-primary,
#page-footer a.btn-block{
    display: block;
    width: 100%;
    text-align: center;
    background-color: var(--tbs-btn) !important;
    border-color: var(--tbs-btn) !important;
    color: #ffffff !important;
    padding: 6px 12px;
    text-decoration: none;
}

/* ===================== round 3 (A/B 2026-10-27) ===================== */
@media (min-width: 992px){
    /* the extender pads each li 15px top/bottom → 75px bar; live is 45px */
    #mainnavigation .navbar-nav > .nav-item{
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    .page-header-bottom,
    .page-header-bottom-content,
    #mainnavigation,
    #mainnavigation .navbar-nav{
        height: 45px !important;
        min-height: 45px !important;
    }
    /* keep the last item clear of the search icon */
    #mainnavigation{
        padding-right: 50px;
    }
}
/* hero: bp insets the slide content 90px each side (arrows) — barcelona's slider is edge to edge */
.frame-type-carousel_fullscreen .carousel-content-inner{
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.frame-type-carousel_fullscreen .carousel-image{
    margin: 0 !important;
}
/* barcelona's content headings: bold uppercase 18px with a rule to the right */
#page-content .frame-header .element-header{
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 18px;
    line-height: 24px;
    font-weight: 700;
    text-transform: uppercase;
    color: #000000;
}
#page-content .frame-header .element-header::after{
    content: "";
    flex: 1;
    border-top: 2px solid #000000;
}
@media (min-width: 992px){
    #mainnavigation{
        padding-right: 0;
    }
    #mainnavigation .navbar-nav > .nav-item{
        flex: 0 0 auto !important;
    }
    #mainnavigation .navbar-nav > .nav-item > .nav-link{
        display: flex !important;
        align-items: center;
        white-space: nowrap;
        gap: 5px;
    }
    #mainnavigation .navbar-nav > .nav-item > .nav-link .nav-link-text{
        white-space: nowrap;
    }
    #mainnavigation .navbar-nav > .nav-item > .nav-link .nav-link-indicator{
        margin: 0 !important;
        width: 8px;
    }
}
@media (min-width: 992px){
    /* the extender sizes the label span itself (15.6px) — live 13px */
    #mainnavigation .navbar-nav > .nav-item > .nav-link .nav-link-text,
    #mainnavigation .dropdown-menu .nav-link-text{
        font-size: 13px !important;
        line-height: 20px !important;
    }
}

/* Valtec/Holmsland header right = a container of textpic elements (staff portrait + name/branch/phone, link to a modal):
   one row of round 105px portraits with small dark-grey text under them, like barcelona */
.tbs-header-right .row:has(> .frame-type-textpic){
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-end;
    gap: 12px;
    margin: 0 !important;
}
.tbs-header-right .row:has(> .frame-type-textpic) > .frame-type-textpic{
    flex: 0 0 auto;
    width: 105px !important;
    padding: 0 !important;
}
.tbs-header-right .frame-type-textpic .textpic,
.tbs-header-right .frame-type-textpic .textpic-item{
    display: block !important;
    width: 105px !important;
    margin: 0 !important;
    padding: 0 !important;
}
.tbs-header-right .frame-type-textpic img{
    width: 105px !important;
    height: 105px !important;
    max-height: none !important;
    border-radius: 50%;
    object-fit: cover;
}
.tbs-header-right .frame-type-textpic .ce-bodytext,
.tbs-header-right .frame-type-textpic .textpic-text,
.tbs-header-right .frame-type-textpic p{
    display: block !important;
    margin: 4px 0 0 !important;
    font-size: 12px !important;
    line-height: 15px !important;
    text-align: center;
    color: #4d515b !important;
    white-space: nowrap;
}
.tbs-header-right .frame-type-textpic a{
    color: #4d515b !important;
}
.tbs-header-right .col-md-12,
.tbs-header-right [class*="col-"]{
    width: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    padding: 0 !important;
}
.page-header-top-left{
    flex: 0 0 auto;
}

/* ===================== round 4 ===================== */
/* language flags top right (live: sr_language_menu at y≈21, right edge ≈1173) */
.page-header-top-right{
    position: relative;
}
.tbs-lang{
    position: absolute;
    top: -32px;
    right: 22px;
    display: flex;
    gap: 10px;
    z-index: 2;
}
.tbs-lang img{
    display: block;
    width: 22px;
    height: 16px;
}
/* sticky menu bar (tbs-lts14-compat.js toggles body.tbs-sticky past the logo row; live: 49px bar + small white logo) */
.tbs-sticky-logo{
    display: none;
}
@media (min-width: 992px){
    body.tbs-sticky #page-header{
        padding-bottom: 45px;
    }
    body.tbs-sticky .page-header-bottom{
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1030;
        box-shadow: 0 1px 4px rgba(0,0,0,.25);
    }
    body.tbs-sticky .page-header-bottom-content{
        display: flex;
        align-items: center;
    }
    body.tbs-sticky .tbs-sticky-logo{
        display: block;
        flex: 0 0 auto;
        margin-right: 10px;
    }
    body.tbs-sticky .tbs-sticky-logo img{
        display: block;
        height: 30px;
        width: auto;
    }
    body.tbs-sticky #mainnavigation{
        flex: 1 1 auto;
    }
}

/* ===================== round 5 (A/B round 2, 2026-10-27) ===================== */
/* per-site variables from page.cssInline.902 (replay 14-46): --tbs-flags, --tbs-h-size, --tbs-h-transform, --tbs-h-rule */

/* flags: core icons (lang.flag = "flags-dk" etc.); live sr_language_menu row at y≈21 */
.tbs-lang{
    display: var(--tbs-flags, flex);
    top: -38px;
}
.tbs-flag{
    display: block;
    width: 22px;
    height: 16px;
    background: no-repeat center / 22px 16px;
}
.tbs-flags-dk{ background-image: url("/typo3/sysext/core/Resources/Public/Icons/Flags/dk.webp"); }
.tbs-flags-gb{ background-image: url("/typo3/sysext/core/Resources/Public/Icons/Flags/gb.webp"); }
.tbs-flags-de{ background-image: url("/typo3/sysext/core/Resources/Public/Icons/Flags/de.webp"); }

/* page headings per site (round 3 made all of them barcelona-TBS style) */
#page-content .frame-header .element-header{
    font-size: var(--tbs-h-size, 18px);
    line-height: 1.2;
    text-transform: var(--tbs-h-transform, uppercase);
}
#page-content .frame-header .element-header::after{
    display: var(--tbs-h-rule, block);
}

/* body text: live 16px / 28.8px, #010101 */
#page-content{
    color: #010101;
}
#page-content p{
    line-height: 28.8px;
}

/* content buttons (a.btn-*, links styled as buttons): full width, white text — not the site link colour */
#page-content a:not([class*="btn"]):not(.nav-link){
    color: var(--tbs-bar);
}
#page-content .card a.btn{
    display: block;
    width: 100%;
    text-align: center;
    color: #ffffff !important;
    background-color: var(--tbs-btn, #ff7100);
    border: 1px solid var(--tbs-btn, #ff7100);
    padding: 6px 12px;
    white-space: normal;
}

/* dropdown items: white text (the label span carries bp's own colour) and aligned under the parent */
@media (min-width: 992px){
    #mainnavigation .dropdown-menu .nav-link,
    #mainnavigation .dropdown-menu .nav-link *,
    #mainnavigation .dropdown-menu .dropdown-link,
    #mainnavigation .dropdown-menu .dropdown-link *{
        color: var(--tbs-bar-text) !important;
    }
    #mainnavigation .navbar-nav > .nav-item{
        position: relative;
    }
    #mainnavigation .navbar-nav > .nav-item > .dropdown-menu{
        left: 0 !important;
        transform: none !important;
        min-width: 220px !important;
    }
    #mainnavigation .dropdown-menu .nav-link-text{
        white-space: nowrap;
    }
}

/* footer: a footer column whose content is itself a barcelona multi-column container (Valtec, Holmsland: all of it is
   in colPos 1) takes the full row; empty columns go */
#page-footer .tbs-footer-row{
    display: flex;
    flex-wrap: wrap;
}
#page-footer .tbs-footer-col:has([class*="frame-type-barcelonaelements-"]){
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
}
#page-footer .tbs-footer-col:empty,
#page-footer .tbs-footer-col:not(:has(.frame)){
    display: none;
}
/* footer headings: barcelona bold uppercase with a white rule; links underlined */
#page-footer .element-header{
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    color: #ffffff;
}
#page-footer .element-header::after{
    content: "";
    flex: 1;
    border-top: 1px solid #ffffff;
}
#page-footer p a{
    text-decoration: underline;
}
#page-footer .frame{
    --frame-spacing: 10px;
}

/* Valtec/Holmsland portraits: live pitch 116px (11px gap), captions may wrap */
.tbs-header-right .row:has(> .frame-type-textpic) > .frame-type-textpic{
    margin-left: 11px !important;
}
.tbs-header-right .frame-type-textpic .ce-bodytext,
.tbs-header-right .frame-type-textpic .textpic-text,
.tbs-header-right .frame-type-textpic p{
    white-space: normal;
    font-size: 11px !important;
}

/* hero controls: live has no dash indicators */
.frame-type-carousel_fullscreen .carousel-indicators{
    display: none;
}

/* ---------- mobile (<992): live is one 55px bar in the site colour with the small white logo and a white burger;
   the logo row (big logo, Fendt logo/portraits) is hidden. The open menu is a full-width list in the bar colour. ---------- */
@media (max-width: 991.98px){
    .page-header-top{
        display: none !important;
    }
    .page-header-bottom-content{
        display: flex;
        align-items: center;
        min-height: 55px;
        padding: 0 15px !important;
    }
    .tbs-sticky-logo{
        display: block;
        flex: 0 0 auto;
    }
    .tbs-sticky-logo img{
        display: block;
        height: 35px;
        width: auto;
    }
    .page-header-bottom .navbar-toggler{
        margin-left: auto;
        filter: brightness(0) invert(1);
    }
    #mainnavigation.navbar-collapse,
    #mainnavigation.navbar-collapse.show,
    #mainnavigation.navbar-collapse.collapsing{
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        transform: none !important;
        background-color: var(--tbs-bar) !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        margin: 0 !important;
        z-index: 1030;
    }
    #mainnavigation a,
    #mainnavigation .nav-link,
    #mainnavigation .nav-link *{
        color: var(--tbs-bar-text) !important;
    }
    #mainnavigation .dropdown-menu{
        background: transparent !important;
    }
    .frame-type-carousel_fullscreen .frame-container,
    .frame-type-carousel_fullscreen .frame-inner{
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}
@media (max-width: 991.98px){
    /* search icon inside the 55px bar, left of the burger */
    .tbs-search{
        top: 0 !important;
        height: 55px !important;
        right: 60px !important;
    }
}

/* ===================== round 6 (drj 2026-10-27: "ret alle punkterne") ===================== */

/* (1) content width: live text runs x=70–1210 (1140) at 1280. barcelona's .container adds 20px padding on top of the
   column's own 20px → B ran 110–1170. Widen the container by those 40px. */
#page-content .frame[class*="frame-type-barcelonaelements-"] > .frame-group-container > .frame-group-inner > .frame-container{
    padding-left: 0 !important;
    padding-right: 0 !important;
}
#page-content .frame[class*="frame-type-barcelonaelements-"] .container{
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: none !important;
}

/* (2) cards (bp card_group from barcelona's featured posts): live has no border/radius/padding, 24px/400 headings,
   button the full card width */
#page-content .card{
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}
#page-content .card .card-body,
#page-content .card .card-footer{
    padding: 15px 0 0 !important;
    background: transparent !important;
    border: 0 !important;
}
#page-content .card .card-img-top,
#page-content .card img{
    border-radius: 0 !important;
}
#page-content .card .card-title{
    font-size: 24px !important;
    line-height: 31.92px !important;
    font-weight: 400 !important;
    color: #010101;
}

/* (3) hero arrows: live = two 46x47 squares, white 50 %, top right (x 1156 / 1210, 16px below the slider top) */
.frame-type-carousel_fullscreen .carousel-control-prev,
.frame-type-carousel_fullscreen .carousel-control-next{
    top: 16px !important;
    bottom: auto !important;
    width: 46px !important;
    height: 47px !important;
    background-color: rgba(255,255,255,.5) !important;
    opacity: 1 !important;
    border-radius: 0 !important;
}
.frame-type-carousel_fullscreen .carousel-control-prev{
    left: auto !important;
    right: 78px !important;
}
.frame-type-carousel_fullscreen .carousel-control-next{
    right: 24px !important;
}
.frame-type-carousel_fullscreen .carousel-control-prev-icon,
.frame-type-carousel_fullscreen .carousel-control-next-icon,
.frame-type-carousel_fullscreen .carousel-control-icon{
    width: 16px !important;
    height: 16px !important;
    filter: none !important;
}

/* (4) menu icons: live = solid caret-right after dropdown items, solid white magnifier 16px */
#mainnavigation .navbar-nav > .nav-item > .nav-link .nav-link-indicator{
    width: 0 !important;
    height: 0 !important;
    background: none !important;
    border-left: 5px solid currentColor;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    transform: none !important;
}
#mainnavigation .navbar-nav > .nav-item > .nav-link .nav-link-indicator::before,
#mainnavigation .navbar-nav > .nav-item > .nav-link .nav-link-indicator::after{
    display: none !important;
}
.tbs-search-icon{
    width: 45px;
    height: 45px;
    background: no-repeat center / 16px 16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='6.5' cy='6.5' r='4.9' fill='none' stroke='%23ffffff' stroke-width='2.6'/%3E%3Cpath d='M10.2 10.2l4.3 4.3' stroke='%23ffffff' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}
@media (min-width: 992px){
    .tbs-search{
        right: 0;
    }
}

/* (5) Valtec/Holmsland menu: Roboto Slab 13px/500 sentence case (page.cssInline.903, replay 14-47) */
@media (min-width: 992px){
    #mainnavigation .navbar-nav > .nav-item > .nav-link,
    #mainnavigation .navbar-nav > .nav-item > .nav-link .nav-link-text,
    #mainnavigation .dropdown-menu a,
    #mainnavigation .dropdown-menu .nav-link-text{
        font-family: var(--tbs-menu-font, inherit) !important;
        font-weight: var(--tbs-menu-weight, 700) !important;
        text-transform: var(--tbs-menu-transform, uppercase) !important;
    }
}

/* (6) sticky bar like live: 98px, logo larger, menu items in the top row, search icon below them on the right */
@media (min-width: 992px){
    body.tbs-sticky #page-header{
        padding-bottom: 98px;
    }
    body.tbs-sticky .page-header-bottom,
    body.tbs-sticky .page-header-bottom-content{
        height: 98px !important;
        min-height: 98px !important;
    }
    body.tbs-sticky .page-header-bottom-content{
        align-items: flex-start;
    }
    body.tbs-sticky .tbs-sticky-logo{
        align-self: center;
        margin-right: 20px;
    }
    body.tbs-sticky .tbs-sticky-logo img{
        height: 60px;
        max-width: 140px;
        object-fit: contain;
    }
    body.tbs-sticky .tbs-search{
        top: auto;
        bottom: 4px;
        height: 45px;
    }
}

/* (7) footer: live keeps the address blocks tight (TBS 1668px vs 2356px) */
#page-footer .frame{
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
#page-footer .frame + .frame{
    margin-top: 8px;
}
#page-footer .frame-type-div hr{
    margin: 8px 0;
}
#page-footer .footer-section{
    padding-top: 40px !important;
    padding-bottom: 40px !important;
}
/* (5b) live Valtec/Holmsland have no search in the bar (--tbs-search: none, replay 14-47) */
.tbs-search{
    display: var(--tbs-search, flex) !important;
}

/* ===================== round 7 (drj 2026-10-27: spacing, card heights, newsletter) ===================== */

/* (1) vertical rhythm: barcelona frames had no padding; bp 16 gives every frame 42px top + bottom (collapsed between
   siblings by -42px margins), which stacked up to ~160px between the intro text and the cards (live 81px).
   Live spaces the top-level grid sections with a 50px top margin instead. */
#page-content .frame{
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
}
#page-content .frame:not(.frame .frame):not(.frame-type-carousel_fullscreen):not(:has(.frame-type-carousel_fullscreen)){
    margin-top: 50px !important;
}
#page-content .frame-type-carousel_fullscreen + .frame{
    margin-top: 50px !important;
}

/* (2) cards: equal height per row with the button on a common baseline. The bp card sits five wrappers deep inside the
   barcelona column, so the whole chain becomes a flex column and the button paragraph takes the free space above it. */
#page-content [class*="frame-type-barcelonaelements-"] .row > [class*="col-"]:has(> .frame-type-bootstrap_package_post){
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}
#page-content [class*="frame-type-barcelonaelements-"] .row > [class*="col-"] > .frame-type-bootstrap_package_post,
#page-content .frame-type-bootstrap_package_post :is(.frame-group-container, .frame-group-inner, .frame-container,
    .frame-inner, .card-group-element, .card-group-element-item, .card, .card-body){
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}
#page-content .frame-type-bootstrap_package_post .card-body > p:has(.btn, .btn-block){
    margin-top: auto;
    margin-bottom: 0;
}
#page-content .frame-type-bootstrap_package_post .card-body > p{
    font-size: 15.2px;
    line-height: 25.08px;
}
/* live crops the 4-column front-page card images to 263x148 (16:9) server side; bp 16 keeps the original 4:3.
   3-column lists (/fendt-full-line) stay 4:3 on live, so only col-md-3. */
#page-content .col-md-3 .card .card-img-top img{
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* (3) barcelona's "thumbnail" frame class (frame_class 38: newsletter, Kontakt, Facebook boxes) — white box with a
   light grey border and 10px padding. bp 16 has no such class, so it rendered as bare content. */
#page-content .frame-custom-38{
    background: #fff;
    border: 1px solid #ddd;
    padding: 10px !important;
}
#page-content #mc_embed_signup label{
    font-weight: 700;
}
/* the newsletter box sits directly in a barcelona .row (no column), so it took the row's -20px gutters: 1180px at
   x=50 vs live 1140px at x=70 */
#page-content .row > .frame-custom-38{
    width: calc(100% - 40px);
    margin-left: 20px;
    margin-right: 20px;
}
/* Kontakt + Facebook boxes side by side: equal height like live */
#page-content .row > [class*="col-"]:has(> .frame-custom-38){
    display: flex;
    flex-direction: column;
}
#page-content .row > [class*="col-"] > .frame-custom-38{
    flex: 1 1 auto;
}
/* live paragraphs: 10px apart (bp 16: 16px) — matters now that the &nbsp; spacer paragraphs are shown again */
#page-content p{
    margin-bottom: 10px;
}

/* ===================== round 7b (A/B sweep of all 5 sites) ===================== */

/* barcelona's RTE button classes, used on links WITHOUT .btn: inline-block, nowrap, 16px, 6px 12px; .btn-block makes
   them full width. Colours differ per site (page.cssInline.904, replay 14-48) — e.g. btn-danger is red on Valtec,
   btn-default green on Fyn. Replaces round 1's "every button orange and full width". */
#page-content a:is(.btn-primary, .btn-success, .btn-danger, .btn-default, .btn-warning):not(.btn){
    display: inline-block;
    padding: 6px 12px;
    font-size: 16px;
    font-weight: 400;
    line-height: 25px;
    white-space: nowrap;
    text-align: center;
    text-decoration: none;
    border: 1px solid;
    border-radius: 0;
}
#page-content a.btn-block:not(.btn){
    display: block;
    width: 100%;
}
#page-content a.btn-block + a.btn-block{
    margin-top: 5px;
}
/* order as in barcelona's CSS (default, primary, success, warning, danger): a link with two classes, e.g. the TBS
   card "btn-default btn-block btn-primary", takes the later one — orange on live */
#page-content a.btn-default:not(.btn){ background-color: var(--tbs-b-default); border-color: var(--tbs-b-default-bd); color: var(--tbs-b-default-c) !important; }
#page-content a.btn-primary:not(.btn){ background-color: var(--tbs-b-primary); border-color: var(--tbs-b-primary-bd); color: var(--tbs-b-primary-c) !important; }
#page-content a.btn-success:not(.btn){ background-color: var(--tbs-b-success); border-color: var(--tbs-b-success-bd); color: var(--tbs-b-success-c) !important; }
#page-content a.btn-warning:not(.btn){ background-color: var(--tbs-b-warning); border-color: var(--tbs-b-warning-bd); color: var(--tbs-b-warning-c) !important; }
#page-content a.btn-danger:not(.btn){ background-color: var(--tbs-b-danger); border-color: var(--tbs-b-danger-bd); color: var(--tbs-b-danger-c) !important; }
#page-content a:is(.btn-primary, .btn-success, .btn-danger, .btn-default, .btn-warning):not(.btn):hover{
    filter: brightness(.92);
}
@media (max-width: 767px){
    #page-content a.btn-block:not(.btn){
        white-space: normal;
    }
}

/* card headings per site (--tbs-card-weight / --tbs-card-font, replay 14-48); live drops to 20px on phones */
#page-content .card .card-title{
    font-weight: var(--tbs-card-weight, 400) !important;
    font-family: var(--tbs-card-font, inherit);
}
@media (max-width: 767px){
    #page-content .card .card-title{
        font-size: 20px !important;
        line-height: 27px !important;
    }
}

/* RTE and form headings (h1–h5 in body text, the form's "Send os en besked"): barcelona's sizes per site — defaults =
   TBS/Askildrup (bootstrap 3), Valtec/Holmsland and Fyn override via page.cssInline.905 (replay 14-49).
   Frame headers (.element-header) keep the --tbs-h-* style from round 4. */
#page-content :is(h1, h2, h3, h4, h5):not(.element-header, .element-subheader, .card-title, .carousel-header, #mc_embed_signup *){
    font-family: var(--tbs-rh-font, inherit);
    font-weight: var(--tbs-rh-weight, 500);
    line-height: 1.1;
    text-transform: none;
    margin-top: 20px;
    margin-bottom: 10px;
}
#page-content h1:not(.element-header, .element-subheader, .card-title, .carousel-header){ font-size: var(--tbs-rh1, 36px); }
#page-content h2:not(.element-header, .element-subheader, .card-title, .carousel-header, #mc_embed_signup *){ font-size: var(--tbs-rh2, 30px); }
#page-content h3:not(.element-header, .element-subheader, .card-title, .carousel-header){ font-size: var(--tbs-rh3, 24px); }
#page-content h4:not(.element-header, .element-subheader, .card-title, .carousel-header){ font-size: var(--tbs-rh4, 18px); margin-top: 10px; }
#page-content h5:not(.element-header, .element-subheader, .card-title, .carousel-header){ font-size: var(--tbs-rh5, 14px); margin-top: 10px; }

/* form framework: live (bootstrap 3) fields are 34px, the textarea 64px, labels bold; bp 16 = 46px / 150px / normal */
#page-content form .form-control,
#page-content form .form-select{
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 20px;
    border-radius: 4px;
    color: #5b5b5b;
}
#page-content form textarea.form-control{
    height: 64px;
    min-height: 64px;
}
#page-content form .form-label,
#page-content form label{
    font-weight: 700;
}

/* mobile: round 6 removed the barcelona container padding (right on desktop, where the outer column pads), but below
   992px the rows' -20px gutters then hung outside the viewport (scrollWidth 410 at 390). Live: content at x=15, 360 wide
   = bootstrap 3's 15px container padding + 30px gutter. */
@media (max-width: 991px){
    #page-content .frame[class*="frame-type-barcelonaelements-"]:not(.frame .frame) > .frame-group-container > .frame-group-inner > .frame-container{
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    #page-content .frame[class*="frame-type-barcelonaelements-"] .row{
        --bs-gutter-x: 30px;
        margin-left: -15px !important;
        margin-right: -15px !important;
    }
    #page-content .frame[class*="frame-type-barcelonaelements-"] .row > [class*="col-"]{
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    #page-content .frame[class*="frame-type-barcelonaelements-"] .frame .frame-container{
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* centred frame header (barcelona "widget-title text-center", e.g. the TBS front "Kontakt" box): rule on both sides */
#page-content .frame-header .element-header.text-center{
    justify-content: center;
}
#page-content .frame-header .element-header.text-center::before{
    content: "";
    flex: 1;
    border-top: 2px solid #000000;
    display: var(--tbs-h-rule, block);
}
/* divider content element: live hr is a light 1px #eee line with 24px around it */
#page-content .frame-type-div hr{
    border: 0;
    border-top: 1px solid #eee;
    opacity: 1;
    margin: 24px 0;
}

/* YouTube heroes (replay 14-51): live plays the video full width at 16:9 (1280x716) in place of the slider image */
.frame-type-carousel_fullscreen .tbs-yt-hero{
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #000;
}
.frame-type-carousel_fullscreen .tbs-yt-hero iframe{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* a hero inserted through a shortcut ("Reference", e.g. Fyn /fendt-full-line) sat in the shortcut's 1140 container:
   1100x304 vs live 1280x353 */
#page-content .frame-type-shortcut:has(.frame-type-carousel_fullscreen) > .frame-group-container > .frame-group-inner > .frame-container,
#page-content .frame-type-shortcut .frame-type-carousel_fullscreen .frame-container{
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* (8) sticky bar below ~1200px (drj: "menupunkterne kan ikke være der"): logo + 7–9 items do not fit one row. Live wraps
   the overflow onto the bar's second row beside the search icon and keeps the bar content inside the page gutter. */
@media (min-width: 992px){
    body.tbs-sticky .page-header-bottom-content{
        padding-left: 15px;
        padding-right: 15px;
    }
    body.tbs-sticky #mainnavigation{
        min-width: 0;
    }
    /* fallback only: below ~1050px the items wrap onto the 2nd row instead of running out of the bar */
    body.tbs-sticky #mainnavigation .navbar-nav{
        flex-wrap: wrap;
    }
}
/* drj: "lav menuen lidt bredere" — below 1200px the bar already spans the window, so the room comes from inside it:
   8px instead of 14px item padding and a smaller logo keep all items on one row down to ~1050px (TBS 7, Fyn 9 items) */
@media (min-width: 992px) and (max-width: 1199px){
    body.tbs-sticky .tbs-sticky-logo{
        margin-right: 12px;
    }
    body.tbs-sticky .tbs-sticky-logo img{
        height: 45px;
        max-width: 100px;
    }
}
/* card buttons: live lets a long label run out of the card; wrap it instead */
#page-content .card-body a.btn-block:not(.btn){
    white-space: normal;
}

/* (9) Valtec/Holmsland film strip across the top of the footer (drj): an HTML element in the footer outputs
   <div class="filmrulle">, styled by the old fileadmin/Arkiv/css/valtec.css|holmsland.css, which LTS 14 no longer
   loads. Same values as there: 500px band centred on the footer edge (top -244px), 2700px image; 250px / 2000px on
   phones. Live leaves 220px of white between the content and the red footer for the upper half of the strip. */
#page-footer:has(.filmrulle){
    margin-top: 220px;
}
#page-footer:has(.filmrulle) .footer-section{
    position: relative;
    overflow: visible !important;
}
#page-footer .filmrulle{
    position: absolute;
    left: 0;
    right: 0;
    top: -244px;
    height: 500px;
    z-index: 8;
    pointer-events: none;
    background: url("../Arkiv/css/images/Filmstrimmel.png") center center / 2700px auto no-repeat;
}
@media (max-width: 992px){
    #page-footer .filmrulle{
        top: -170px;
        height: 250px;
        background-size: 2000px auto;
    }
}

/* (8c) drj: menu items vertically centred in the fixed bar, level with the logo — logo, items and search icon on one
   centre line (the search moves up from the bar's 2nd row, so the item row keeps 50px clear for it). The tighter 8px
   item padding (instead of 14px) up to 1400px keeps all items on that one row (TBS 1280: last item ends at 1128). */
@media (min-width: 992px){
    body.tbs-sticky .page-header-bottom-content{
        align-items: center !important;
    }
    body.tbs-sticky .tbs-sticky-logo{
        align-self: center;
    }
    body.tbs-sticky #mainnavigation{
        align-self: center;
    }
    body.tbs-sticky #mainnavigation .navbar-nav{
        padding-right: 50px;
    }
    body.tbs-sticky .tbs-search{
        top: 50% !important;
        bottom: auto !important;
        transform: translateY(-50%);
    }
}
@media (min-width: 992px) and (max-width: 1399px){
    body.tbs-sticky #mainnavigation .navbar-nav > .nav-item > .nav-link{
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}

/* (10) drj: dropdown items too tight vertically (26px). Live barcelona: list 10px top/bottom, links 9px 45px 9px 30px,
   13px/700 uppercase, line-height 20px → ~38px per item. Width follows the longest label like live. */
@media (min-width: 992px){
    #mainnavigation .dropdown-menu .dropdown-nav{
        padding: 10px 0;
    }
    /* absolute under a narrow item, width:auto shrank to the 200px minimum and the labels ran out of the box */
    #mainnavigation .navbar-nav > .nav-item > .dropdown-menu.dropdown-menu-simple{
        width: max-content !important;
        min-width: 200px !important;
    }
    #mainnavigation .dropdown-menu .nav-link-dropdown{
        padding: 9px 45px 9px 30px !important;
        line-height: 20px !important;
        white-space: nowrap;
    }
}

/* (11) drj: nicer flags — crisp SVGs (fileadmin/Website/Flags/) instead of the core 22x16 pixel icons: 3:2, rounded
   corners, hairline edge (keeps the white of the Danish cross visible on white) and a soft shadow; lifts on hover */
.tbs-flag{
    width: 24px;
    height: 16px;
    border-radius: 3px;
    background-size: cover;
    background-position: center;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .12), 0 1px 3px rgba(0, 0, 0, .25);
    transition: transform .15s ease, box-shadow .15s ease;
}
.tbs-flag:hover,
.tbs-flag:focus-visible{
    transform: translateY(-1px);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .15), 0 3px 6px rgba(0, 0, 0, .3);
}
.tbs-flags-dk{ background-image: url("Flags/dk.svg"); }
.tbs-flags-gb{ background-image: url("Flags/gb.svg"); }
.tbs-flags-de{ background-image: url("Flags/de.svg"); }

/* (12) drj: levels 3–5 like live barcelona (TMENU 1–5; page.theme.navigation.menuLevels = 5 in the root templates).
   layout4's own rule (.nav-dropdown:hover .dropdown-nav, descendant) opens every deeper level at once and always to
   the left: here each level opens only its own child list as a flyout beside the item — to the right, or to the left
   when tbs-lts14-compat.js sees it would leave the viewport (.tbs-flip). Mobile: deeper levels indented under the parent. */
@media (min-width: 992px){
    #mainnavigation .dropdown-nav .nav-item.nav-dropdown{
        position: relative;
    }
    #mainnavigation .dropdown-nav .nav-dropdown > .dropdown-nav{
        display: none !important;
        position: absolute;
        top: -10px;
        left: 100%;
        right: auto;
        width: max-content;
        min-width: 200px;
        background-color: var(--tbs-bar) !important;
        z-index: 1001;
    }
    #mainnavigation .dropdown-nav .nav-dropdown.tbs-flip > .dropdown-nav{
        left: auto;
        right: 100%;
    }
    #mainnavigation .dropdown-nav .nav-dropdown:hover > .dropdown-nav{
        display: block !important;
    }
    #mainnavigation .dropdown-nav .nav-dropdown:hover > .nav-link{
        background-color: var(--tbs-bar-hover) !important;
    }
    #mainnavigation .dropdown-nav .nav-dropdown > .nav-link{
        position: relative;
    }
    #mainnavigation .dropdown-nav .nav-dropdown > .nav-link::after{
        content: "";
        position: absolute;
        right: 20px;
        top: 50%;
        margin-top: -4px;
        border-left: 5px solid var(--tbs-bar-text);
        border-top: 4px solid transparent;
        border-bottom: 4px solid transparent;
    }
}
@media (max-width: 991.98px){
    #mainnavigation .dropdown-nav .nav-dropdown > .dropdown-nav{
        display: block !important;
        position: static !important;
        padding: 0 0 0 15px !important;
        background: transparent !important;
    }
}