/* LLU 5.1.35 static stylesheet. No runtime Sass dependency. */
:root {
    --llu-nav-height: 90px;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    color: #474747;
    background: #fff;
    font-family: "Trebuchet MS", Trebuchet, Tahoma, Arial, sans-serif;
    letter-spacing: .01em;
}

#page,
.page-main,
#content-wrapper,
.llu-home-shell,
.llu-home-shell .page-body {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

.llu-home #header,
.llu-home .menubar-section,
.llu-home .shopbar-section,
.llu-home .megamenu-section,
.llu-shopbar-fallback {
    display: none !important;
}

.home.llu-home #content,
.home.llu-home #content-body,
.home.llu-home #content-center {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 100%;
}

.home.llu-home #content {
    max-width: none !important;
}

.home.llu-home .breadcrumb {
    display: none !important;
}

/* ---------------- Continuous original hero ---------------- */

.llu-legacy-hero {
    position: relative;
    min-height: 1482px;
    background:
        #2C2C2C
        url("./images/original/cropped-img_8885-1-scaled-1.jpg")
        no-repeat center center;
    background-size: cover;
    overflow: visible;
}

.llu-hero-shade {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,.02) 0%,
        rgba(0,0,0,.02) 55%,
        rgba(0,0,0,.12) 100%
    );
}

.llu-first-screen {
    position: relative;
    z-index: 1;
    min-height: calc(100vh - var(--llu-nav-height));
    min-height: calc(100svh - var(--llu-nav-height));
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.llu-first-screen-brand {
    width: min(calc(100% - 32px), 1024px);
    margin: clamp(92px, 17vh, 148px) auto 0;
    text-align: center;
    color: #000;
}

.llu-first-logo {
    display: block;
    width: 88px;
    height: 88px;
    margin: 0 auto;
    object-fit: contain;
    opacity: .88;
}

.llu-first-screen-brand h1 {
    margin: 21px auto 0;
    max-width: 985px;
    color: #000;
    font-family: "Trebuchet MS", Trebuchet, Tahoma, Arial, sans-serif;
    font-size: clamp(32px, 4vw, 45px);
    line-height: 1.15;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: uppercase;
}

.llu-hero-subline {
    max-width: 900px;
    margin: 26px auto 0;
    color: #202020;
    font-size: clamp(14px, 1.65vw, 20px);
    line-height: 1.35;
    font-weight: 400;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* ---------------- Original 90px moving menu ---------------- */

.llu-nav-slot {
    position: relative;
    z-index: 50;
    width: 100%;
    height: var(--llu-nav-height);
}

.llu-scroll-nav {
    position: relative;
    z-index: 1100;
    width: 100%;
    height: var(--llu-nav-height);
    min-height: var(--llu-nav-height);
    background:
        linear-gradient(
            90deg,
            #DEC6A7 0,
            #DEC6A7 calc(50% - 309px),
            #E9CEAC calc(50% - 309px),
            #E9CEAC calc(50% - 186px),
            #BD7F46 calc(50% - 186px),
            #BD7F46 calc(50% - 63px),
            #57B7F2 calc(50% - 63px),
            #57B7F2 calc(50% + 60px),
            #6F8CA6 calc(50% + 60px),
            #6F8CA6 calc(50% + 183px),
            #538597 calc(50% + 183px),
            #538597 calc(50% + 309px),
            #477687 calc(50% + 309px),
            #477687 100%
        );
    box-shadow: none;
}

.llu-scroll-nav--home.is-stuck {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    box-shadow: 0 5px 18px rgba(0,0,0,.22);
}

.llu-scroll-nav--inner {
    position: sticky;
    top: 0;
}

.llu-nav-track {
    position: relative;
    height: 100%;
    display: flex;
    justify-content: center;
}

.llu-nav-list {
    width: 618px;
    height: 100%;
    display: grid;
    grid-template-columns: 123px 123px 123px 123px 126px;
}

.llu-nav-item {
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    text-align: center;
    text-decoration: none !important;
    font-family: "Trebuchet MS", Trebuchet, Tahoma, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.1;
    letter-spacing: 1px;
    font-weight: 400;
    transition: background-color .12s ease, color .12s ease;
}

.llu-nav-news { background: #E9CEAC; color: #474747 !important; }
.llu-nav-livestock { background: #BD7F46; color: #fff !important; }
.llu-nav-horses { background: #57B7F2; color: #2F2F2F !important; }
.llu-nav-sale { background: #6F8CA6; color: #fff !important; }
.llu-nav-contact { background: #538597; color: #fff !important; }

.llu-nav-item:hover,
.llu-nav-item:focus {
    background: #565656;
    color: #fff !important;
}

.llu-nav-sticky-tools {
    position: absolute;
    top: 0;
    left: max(0px, calc(50% - 478px));
    height: 90px;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 5;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(3px);
    transition: opacity .16s ease, transform .16s ease;
}

.llu-scroll-nav.is-stuck .llu-nav-sticky-tools {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
}

.llu-nav-start {
    width: 63px;
    height: 89px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #D9C0A2;
    text-decoration: none !important;
    color: #2F2F2F !important;
}

.llu-nav-start span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
}

.llu-nav-start img {
    width: 25px;
    height: 16px;
    object-fit: contain;
}

.llu-nav-start:hover {
    background: #525252;
}

.llu-nav-logo {
    width: 88px;
    height: 88px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.llu-nav-logo img {
    display: block;
    width: 66px;
    height: 66px;
    object-fit: contain;
}

/* ---------------- Welcome: still on same original image ---------------- */

.llu-hero-welcome {
    position: relative;
    z-index: 1;
    min-height: 700px;
    padding: 105px 20px 78px;
}

.llu-content-narrow {
    width: min(100%, 984px);
    margin: 0 auto;
}

.llu-welcome-title {
    margin: 0 auto 26px;
    color: #111;
    text-align: center;
    font-size: clamp(28px, 4vw, 44px);
    line-height: 1.1;
    font-weight: 400;
}

.llu-welcome-copy {
    background: rgba(255,255,255,.63);
    padding: clamp(26px, 4vw, 48px);
    color: #222;
    font-size: 16px;
    line-height: 1.65;
}

.llu-welcome-copy .topic-block,
.llu-welcome-copy .topic-block-body,
.llu-welcome-copy .topic-block-title {
    margin: 0;
    padding: 0;
    background: transparent;
    color: inherit;
}

/* ---------------- Content ---------------- */

.llu-section {
    position: relative;
    padding: 58px 0 74px;
    background: #fff;
}

.llu-section-inner {
    width: min(calc(100% - 40px), 1024px);
    margin: 0 auto;
}

.llu-section-label {
    margin: 0 0 28px;
    color: #3f3f3f;
    font-size: clamp(28px, 4.5vw, 48px);
    line-height: 1;
    font-weight: 400;
    letter-spacing: .02em;
}

.llu-section--news {
    border-top: 1px solid rgba(0,0,0,.06);
}

.llu-section--sale {
    background: #f7f7f7;
}

.llu-section--contact {
    background: #171717;
    color: #fff;
}

.llu-section--contact .llu-section-label,
.llu-section--contact .topic-block,
.llu-section--contact .topic-block-body,
.llu-section--contact a {
    color: #fff;
}

/* ---------------- Compact original-style footer ---------------- */

#footer {
    margin: 0;
    padding: 0;
    border: 0;
    background: #262626 !important;
    color: #DBDBDB !important;
}

.llu-footer {
    min-height: 284px;
    background: #262626;
    color: #DBDBDB;
}

.llu-footer-inner {
    width: min(calc(100% - 40px), 1024px);
    min-height: 284px;
    margin: 0 auto;
    padding: 70px 0 48px;
    text-align: center;
}

.llu-footer-company {
    font-size: 15px;
    line-height: 1.4;
    color: #DBDBDB;
}

.llu-footer-social {
    margin-top: 22px;
    display: flex;
    justify-content: center;
    gap: 13px;
}

.llu-footer-social a {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.08);
    color: #DBDBDB !important;
    text-decoration: none !important;
}

.llu-footer-social a:hover {
    background: rgba(255,255,255,.18);
    color: #fff !important;
}

.llu-footer-links {
    margin-top: 26px;
}

.llu-footer-links .cms-menu ul {
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    justify-content: center;
    list-style: none;
}

.llu-footer-links .cms-menu li {
    margin: 0;
}

.llu-footer-links a {
    color: #CFCFCF !important;
    font-size: 13px;
    text-decoration: none !important;
}

.llu-footer-copy {
    margin-top: 24px;
    color: #9D9D9D;
    font-size: 12px;
}

/* Hide all inherited standard footer blocks if any plugin injects them. */
#footer .footer-social-wrapper,
#footer .footer-main-wrapper,
#footer .footer-bottom-wrapper,
#footer .footer-newsletter,
#footer .theme-selector {
    display: none !important;
}

@media (max-width: 900px) {
    .llu-nav-sticky-tools {
        left: 4px;
        gap: 4px;
    }

    .llu-scroll-nav.is-stuck .llu-nav-track {
        padding-left: 155px;
    }

    .llu-scroll-nav.is-stuck .llu-nav-list {
        width: 100%;
        grid-template-columns: repeat(5, minmax(92px, 1fr));
    }
}

@media (max-width: 767.98px) {
    :root {
        --llu-nav-height: 72px;
    }

    .llu-legacy-hero {
        min-height: 1200px;
    }

    .llu-nav-slot,
    .llu-scroll-nav {
        height: 72px;
        min-height: 72px;
    }

    .llu-nav-list {
        width: 100%;
        grid-template-columns: repeat(5, 1fr);
    }

    .llu-nav-item {
        height: 72px;
        padding: 0 3px;
        font-size: 10px;
        letter-spacing: .02em;
        overflow-wrap: anywhere;
    }

    .llu-nav-sticky-tools {
        height: 72px;
    }

    .llu-nav-start {
        width: 42px;
        height: 72px;
    }

    .llu-nav-start img {
        width: 17px;
        height: 17px;
    }

    .llu-nav-logo {
        width: 42px;
        height: 72px;
    }

    .llu-nav-logo img {
        width: 40px;
        height: 40px;
    }

    .llu-scroll-nav.is-stuck .llu-nav-track {
        padding-left: 88px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .llu-scroll-nav.is-stuck .llu-nav-track::-webkit-scrollbar {
        display: none;
    }

    .llu-scroll-nav.is-stuck .llu-nav-list {
        min-width: 485px;
    }

    .llu-first-screen-brand {
        margin-top: 70px;
    }

    .llu-first-logo {
        width: 74px;
        height: 74px;
    }

    .llu-first-screen-brand h1 {
        font-size: clamp(25px, 7vw, 34px);
    }

    .llu-hero-subline {
        font-size: 13px;
    }

    .llu-hero-welcome {
        min-height: 560px;
        padding: 68px 14px 56px;
    }

    .llu-welcome-copy {
        padding: 24px 20px;
        font-size: 15px;
    }

    .llu-section {
        padding: 42px 0 56px;
    }

    .llu-section-inner {
        width: min(calc(100% - 28px), 1024px);
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .llu-nav-item,
    .llu-nav-sticky-tools {
        transition: none;
    }
}

/* ---------------- Embedded original LLU graphics ---------------- */

.llu-original-divider {
    width: 100%;
    height: 41px;
    box-shadow: -1px -18px 19px rgba(0,0,0,.33);
    background-color: #fff;
    background-repeat: repeat-y;
    background-position: center center;
}

.llu-original-divider--1 {
    background-image: url("./images/original/back_home.gif");
}

.llu-original-divider--2 {
    background-image: url("./images/original/back_home2.gif");
}

.llu-original-divider--3 {
    background-image: url("./images/original/back_home3.gif");
}

.llu-original-photo {
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
}

.llu-original-photo--horses {
    min-height: 716px;
    background-image: url("./images/original/dsc_0428-2000x1200.jpg");
    background-position: center bottom;
}

.llu-original-photo--livestock {
    min-height: 747px;
    background-image: url("./images/original/pferde2-2000x1200.jpg");
    background-position: center center;
}

.llu-original-shadow {
    width: 100%;
    height: 49px;
    margin-top: -49px;
    position: relative;
    z-index: 2;
    pointer-events: none;
    background:
        url("./images/original/shadow_dark.png")
        no-repeat left center;
    background-size: cover;
}

@media (max-width: 767.98px) {
    .llu-original-divider {
        height: 24px;
        background-size: auto 24px;
    }

    .llu-original-photo--horses,
    .llu-original-photo--livestock {
        min-height: 58vw;
    }

    .llu-original-shadow {
        height: 28px;
        margin-top: -28px;
    }
}


/* ---------------- Final LLU 4.1 refinements ---------------- */

.llu-legacy-hero--compact {
    min-height: 100vh;
    min-height: 100svh;
}

.llu-scroll-nav.is-stuck .llu-nav-start {
    width: 63px;
    height: 89px;
    padding: 0;
}

.llu-scroll-nav.is-stuck .llu-nav-start span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
}

.llu-footer-language {
    margin-top: 22px;
    display: flex;
    justify-content: center;
}

.llu-footer-language .language-selector {
    display: inline-block;
}

.llu-footer-language .menubar-link {
    min-width: 66px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgba(255,255,255,.04);
    color: #DBDBDB !important;
    text-decoration: none !important;
}

.llu-footer-language .dropdown-menu {
    text-align: left;
}

.llu-footer-language .dropdown-item {
    font-family: "Trebuchet MS", Trebuchet, Tahoma, Arial, sans-serif;
}

@media (max-width: 767.98px) {
    .llu-scroll-nav.is-stuck .llu-nav-start {
        width: 42px;
        padding: 0;
    }

    .llu-scroll-nav.is-stuck .llu-nav-start span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0,0,0,0);
    }
}


/* LLU 4.1.1: navigation contains only real targets. */
.llu-nav-list.llu-nav-count-0 { width: 0; grid-template-columns: none; }
.llu-nav-list.llu-nav-count-1 { width: 123px; grid-template-columns: repeat(1, 123px); }
.llu-nav-list.llu-nav-count-2 { width: 246px; grid-template-columns: repeat(2, 123px); }
.llu-nav-list.llu-nav-count-3 { width: 369px; grid-template-columns: repeat(3, 123px); }
.llu-nav-list.llu-nav-count-4 { width: 492px; grid-template-columns: repeat(4, 123px); }
.llu-nav-list.llu-nav-count-5 {
    width: 618px;
    grid-template-columns: 123px 123px 123px 123px 126px;
}

.llu-footer-legal {
    display: flex;
    justify-content: center;
    gap: 22px;
}
.llu-footer-legal a {
    color: #CFCFCF !important;
    font-size: 13px;
    text-decoration: none !important;
}
.llu-footer-legal a:hover,
.llu-footer-legal a:focus {
    color: #fff !important;
    text-decoration: underline !important;
}

@media (max-width: 767.98px) {
    .llu-nav-list.llu-nav-count-1,
    .llu-nav-list.llu-nav-count-2,
    .llu-nav-list.llu-nav-count-3,
    .llu-nav-list.llu-nav-count-4,
    .llu-nav-list.llu-nav-count-5 {
        width: 100%;
        grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
    }
    .llu-scroll-nav.is-stuck .llu-nav-list {
        min-width: 440px;
    }
}


/* ==================================================================
   LLU 4.1.4 – presentation parity / visible element fix
   ------------------------------------------------------------------
   Topics are content only. Visual legacy elements live in the theme.
   Do not re-introduce Muse, mt-table-connect or old jQuery runtime.
   ================================================================== */

.llu-legacy-hero {
    isolation: isolate;
    background-color: #2C2C2C;
    background-image: none;
}

.llu-hero-media {
    position: absolute;
    inset: 0;
    z-index: -2;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.llu-hero-shade {
    z-index: -1;
}

/* Smartstore's TopicBlock wraps long text in .more-less (260px).
   The legacy LLU homepage shows the full editorial copy, so do not
   collapse homepage CMS sections. */
.llu-home .llu-cms-block .more-less {
    display: block !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    margin-bottom: 0 !important;
}

.llu-home .llu-cms-block .more-less .btn-text-expander {
    display: none !important;
}

.llu-home .llu-cms-block .topic-html-content-body {
    max-height: none !important;
    overflow: visible !important;
}

/* Use real image elements. This removes dependence on transformed
   SCSS relative URL rewriting and makes the assets visible in DOM. */
.llu-original-photo {
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
    overflow: hidden;
    background: #fff;
}

.llu-original-photo--horses,
.llu-original-photo--livestock,
.llu-original-photo--contact {
    min-height: 0;
    background-image: none !important;
}

.llu-original-photo-img {
    display: block;
    width: 100%;
    height: auto;
    min-height: 520px;
    max-height: 760px;
    object-fit: cover;
}

.llu-original-photo--horses .llu-original-photo-img {
    height: 716px;
    object-position: center bottom;
}

.llu-original-photo--livestock .llu-original-photo-img,
.llu-original-photo--contact .llu-original-photo-img {
    height: 747px;
    object-position: center center;
}

/* "Aktuelles" in the original page contains the event content before
   the breeding photo sections. */
.llu-home-event {
    max-width: 1024px;
    margin: 0 auto 42px;
}

.llu-home-event + .llu-home-news {
    margin-top: 44px;
    padding-top: 38px;
    border-top: 1px solid rgba(0,0,0,.12);
}

/* Keep original editorial text readable and clearly separated. */
.llu-cms-block .topic-html-content-body {
    font-family: "Trebuchet MS", Trebuchet, Tahoma, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.65;
}

.llu-cms-block .topic-html-content-body h3 {
    margin: 34px 0 15px;
    font-size: clamp(22px, 2.7vw, 31px);
    line-height: 1.15;
    font-weight: 400;
    letter-spacing: .01em;
}

.llu-cms-block .topic-html-content-body p {
    margin: 0 0 1.1em;
}

/* Original contact page contained map/PRV visual elements. They are
   decorative here; the editable address remains authoritative in CMS. */
.llu-contact-emblems {
    margin-top: 36px;
    padding-top: 30px;
    border-top: 1px solid rgba(255,255,255,.16);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 34px;
    flex-wrap: wrap;
}

.llu-contact-pin {
    width: 58px;
    height: auto;
    opacity: .92;
}

.llu-contact-prv {
    width: min(240px, 55vw);
    height: auto;
}

@media (max-width: 767.98px) {
    .llu-original-photo-img,
    .llu-original-photo--horses .llu-original-photo-img,
    .llu-original-photo--livestock .llu-original-photo-img,
    .llu-original-photo--contact .llu-original-photo-img {
        height: 58vw;
        min-height: 260px;
        max-height: 520px;
    }

    .llu-cms-block .topic-html-content-body {
        font-size: 15px;
        line-height: 1.55;
    }

    .llu-contact-emblems {
        gap: 22px;
    }
}


/* ==================================================================
   LLU 5.0.0 – exact legacy menu geometry
   ================================================================== */

.home.llu-home .llu-scroll-nav {
    box-sizing: border-box;
    display: block;
    overflow: visible;
}

.home.llu-home .llu-nav-track {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

.home.llu-home .llu-nav-list.llu-nav-count-5 {
    flex: 0 0 618px;
    width: 618px;
    max-width: 618px;
    grid-template-columns: 123px 123px 123px 123px 126px;
}

.home.llu-home .llu-nav-item {
    box-sizing: border-box;
    border: 0;
    border-radius: 0;
    margin: 0;
    white-space: normal;
}

.home.llu-home .llu-nav-news {
    background-color: #E9CEAC !important;
    color: #474747 !important;
}

.home.llu-home .llu-nav-livestock {
    background-color: #BD7F46 !important;
    color: #FFFFFF !important;
}

.home.llu-home .llu-nav-horses {
    background-color: #57B7F2 !important;
    color: #2F2F2F !important;
}

.home.llu-home .llu-nav-sale {
    background-color: #6F8CA6 !important;
    color: #FFFFFF !important;
}

.home.llu-home .llu-nav-contact {
    background-color: #538597 !important;
    color: #FFFFFF !important;
}

.home.llu-home .llu-original-divider,
.home.llu-home .llu-original-shadow {
    display: block !important;
}

@media (max-width: 767.98px) {
    .home.llu-home .llu-nav-list.llu-nav-count-5 {
        flex: 0 0 100%;
        width: 100%;
        max-width: none;
        min-width: 0;
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .home.llu-home .llu-scroll-nav.is-stuck .llu-nav-list.llu-nav-count-5 {
        min-width: 440px;
    }
}


/* LLU 5.0.0 clean rebuild safety layer */
body.llu-home { overflow-x: hidden; }
body.llu-home .llu-home-shell,
body.llu-home .llu-home-shell .page-body,
body.llu-home #content-wrapper,
body.llu-home #content,
body.llu-home #content-body,
body.llu-home #content-center {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
body.llu-home .llu-scroll-nav {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}
body.llu-home .llu-nav-list { display: grid !important; }
body.llu-home .llu-original-divider,
body.llu-home .llu-original-shadow,
body.llu-home .llu-section-label {
    visibility: visible !important;
    opacity: 1 !important;
}


/* ================================================================
   LLU 5.0.1 – responsive viewport layout + robust sticky nav
   ================================================================ */

/* Page uses full viewport width. Flex/Bootstrap containers must not
   reintroduce fixed widths on the LLU homepage. */
body.llu-home,
body.llu-home #page,
body.llu-home .page-main,
body.llu-home #content-wrapper,
body.llu-home #content,
body.llu-home #content-body,
body.llu-home #content-center,
body.llu-home .llu-home-shell,
body.llu-home .llu-home-shell .page-body {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box;
}

/* Responsive content widths. Keep readable line lengths on large screens
   without locking the site to the old 1024px canvas. */
body.llu-home .llu-first-screen-brand,
body.llu-home .llu-content-narrow,
body.llu-home .llu-section-inner,
body.llu-home .llu-footer-inner,
body.llu-home .llu-home-event {
    width: 100%;
    max-width: 1440px;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
    padding-left: clamp(18px, 5vw, 88px);
    padding-right: clamp(18px, 5vw, 88px);
}

body.llu-home .llu-first-screen-brand {
    margin-top: clamp(72px, 15vh, 148px);
}

/* Full-width media scale naturally with the viewport. */
body.llu-home .llu-original-photo,
body.llu-home .llu-original-photo-img,
body.llu-home .llu-hero-media {
    width: 100% !important;
    max-width: none !important;
}

body.llu-home .llu-original-photo-img {
    object-fit: cover;
}

/* Stable placeholder in document flow. */
body.llu-home .llu-nav-slot {
    display: block;
    width: 100%;
    height: var(--llu-nav-height);
    min-height: var(--llu-nav-height);
}

/* Normal state: menu is in document flow and moves upward with the page. */
body.llu-home .llu-scroll-nav--home:not(.is-stuck) {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
}

/* Sticky state: JS moves this element directly below <body>, therefore
   Smartstore's transformed canvas cannot capture position:fixed. */
body > .llu-scroll-nav--home.is-stuck {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    z-index: 2147483000 !important;
    margin: 0 !important;
    box-shadow: 0 5px 18px rgba(0,0,0,.22);
}

/* Startseite + white logo MUST NOT be visible before sticky state. */
body.llu-home .llu-scroll-nav--home:not(.is-stuck) .llu-nav-sticky-tools {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* They appear only after the menu has reached the viewport top. */
body > .llu-scroll-nav--home.is-stuck .llu-nav-sticky-tools {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* Menu adapts to viewport width while preserving the five legacy colors.
   On roomy desktop widths it can grow beyond the old fixed 618px. */
body.llu-home .llu-nav-list.llu-nav-count-5 {
    width: min(100%, 900px) !important;
    max-width: 900px !important;
    min-width: 0 !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

body.llu-home .llu-nav-track {
    width: 100%;
    min-width: 0;
}

body.llu-home .llu-nav-item {
    min-width: 0;
}

/* While sticky, reserve room for the Startseite/logo controls on desktop. */
@media (min-width: 901px) {
    body > .llu-scroll-nav--home.is-stuck .llu-nav-track {
        padding-left: 155px;
        padding-right: 16px;
        box-sizing: border-box;
    }

    body > .llu-scroll-nav--home.is-stuck .llu-nav-sticky-tools {
        left: 8px;
    }
}

/* Tablet/mobile: full-width five-column navigation, still sticky.
   No separate phone/tablet markup. */
@media (max-width: 900px) {
    body.llu-home .llu-first-screen-brand,
    body.llu-home .llu-content-narrow,
    body.llu-home .llu-section-inner,
    body.llu-home .llu-footer-inner,
    body.llu-home .llu-home-event {
        max-width: none;
        padding-left: clamp(14px, 4vw, 32px);
        padding-right: clamp(14px, 4vw, 32px);
    }

    body.llu-home .llu-nav-list.llu-nav-count-5 {
        width: 100% !important;
        max-width: none !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }

    body > .llu-scroll-nav--home.is-stuck .llu-nav-track {
        padding-left: 88px !important;
        padding-right: 0 !important;
        overflow: hidden !important;
    }

    body > .llu-scroll-nav--home.is-stuck .llu-nav-sticky-tools {
        left: 0 !important;
        gap: 2px !important;
    }

    body > .llu-scroll-nav--home.is-stuck .llu-nav-list.llu-nav-count-5 {
        min-width: 0 !important;
    }
}

@media (max-width: 520px) {
    body.llu-home .llu-nav-item {
        padding-left: 2px !important;
        padding-right: 2px !important;
        font-size: clamp(8px, 2.45vw, 10px) !important;
        letter-spacing: 0 !important;
    }

    /* On very narrow screens the sticky logo is omitted to leave enough
       room for all five navigation targets; Startseite remains visible. */
    body > .llu-scroll-nav--home.is-stuck .llu-nav-logo {
        display: none !important;
    }

    body > .llu-scroll-nav--home.is-stuck .llu-nav-track {
        padding-left: 44px !important;
    }
}


/* ================================================================
   LLU 5.0.2 – anchor offset + original transition graphics
   ================================================================ */

/* Native-anchor fallback. JS uses the real rendered sticky-menu height,
   this protects keyboard/direct hash navigation as well. */
body.llu-home #aktuelle-neuigkeiten,
body.llu-home #pferdezucht,
body.llu-home #viehzucht,
body.llu-home #verkauf,
body.llu-home #kontakt,
body.llu-home #willkommen,
body.llu-home #start {
    scroll-margin-top: calc(var(--llu-nav-height) + 14px);
}

/* Original LLU separator strips.
   Use absolute theme URLs so their loading is independent from CSS path
   rewriting. The legacy source used 41px-high strips with the original
   back_home*.gif assets. */
body.llu-home .llu-original-divider {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: 41px !important;
    min-height: 41px !important;
    margin: 0 !important;
    border: 0 !important;
    background-color: #131313 !important;
    background-repeat: repeat-y !important;
    background-position: center center !important;
    box-shadow: -1px -18px 19px rgba(0,0,0,.33) !important;
    position: relative;
    z-index: 4;
}

body.llu-home .llu-original-divider--1 {
    background-image: url("/Themes/LLU/Content/images/original/back_home.gif") !important;
}

body.llu-home .llu-original-divider--2 {
    background-image: url("/Themes/LLU/Content/images/original/back_home2.gif") !important;
}

body.llu-home .llu-original-divider--3 {
    background-image: url("/Themes/LLU/Content/images/original/back_home3.gif") !important;
}

/* Original black fade/shadow graphic below the large photographic sections.
   The legacy page used shadow_dark.png as a 49px overlay. */
body.llu-home .llu-original-shadow {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: 49px !important;
    min-height: 49px !important;
    margin-top: -49px !important;
    margin-bottom: 0 !important;
    position: relative !important;
    z-index: 5 !important;
    pointer-events: none !important;
    background-color: transparent !important;
    background-image: url("/Themes/LLU/Content/images/original/shadow_dark.png") !important;
    background-repeat: no-repeat !important;
    background-position: left center !important;
    background-size: 100% 49px !important;
}

/* Dark section edge behind transitions, matching the original #131313 canvas. */
body.llu-home .llu-original-photo + .llu-original-shadow {
    box-shadow: 0 14px 28px rgba(0,0,0,.22);
}

/* Keep section headings visible below the sticky menu after anchor navigation. */
body.llu-home .llu-section-label {
    position: relative;
    z-index: 1;
}


/* ==================================================================
   LLU 5.1.0 – source-faithful desktop structure / smooth transitions
   ================================================================== */

:root {
    --llu-dark-left: #131313;
    --llu-dark-right: #201F1D;
    --llu-copy-dark: #9E9E9E;
    --llu-sticky-height: var(--llu-nav-height);
}

/* 5.0.2 landed about 20px too low. Keep target just 6px under the
   sticky menu edge as native-scroll fallback. JS measures the real height. */
body.llu-home #aktuelle-neuigkeiten,
body.llu-home #pferdezucht,
body.llu-home #viehzucht,
body.llu-home #verkauf,
body.llu-home #kontakt,
body.llu-home #willkommen {
    scroll-margin-top: calc(var(--llu-nav-height) - 6px) !important;
}

/* Original LLU desktop content was two 433px columns inside ~1024px.
   Keep this relationship, but make it fluid. */
body.llu-home .llu-legacy-two-col {
    display: grid;
    grid-template-columns: minmax(0, 433px) minmax(0, 433px);
    justify-content: center;
    align-items: start;
    gap: clamp(42px, 7vw, 94px);
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}

body.llu-home .llu-legacy-col {
    min-width: 0;
}

body.llu-home .llu-legacy-two-col h3 {
    margin: 0 0 22px !important;
    color: #fff !important;
    font-size: clamp(23px, 2.35vw, 30px) !important;
    line-height: 1.15 !important;
    letter-spacing: clamp(.08em, .45vw, .23em) !important;
    font-weight: 400 !important;
}

body.llu-home .llu-legacy-two-col p {
    color: var(--llu-copy-dark) !important;
    font-family: "Trebuchet MS", Trebuchet, Tahoma, Arial, sans-serif !important;
    font-size: clamp(16px, 1.25vw, 20px) !important;
    line-height: 1.45 !important;
    letter-spacing: .02em !important;
    margin: 0 0 1.05em !important;
}

body.llu-home .llu-legacy-col h3:not(:first-child) {
    margin-top: 34px !important;
}

/* Actual original content character: dark split canvas, white headings,
   grey body copy. The original back_home image itself is a left/right
   #131313/#201F1D split. */
body.llu-home .llu-section--news,
body.llu-home .llu-section--horses,
body.llu-home .llu-section--livestock {
    background:
        linear-gradient(
            to right,
            var(--llu-dark-left) 0%,
            var(--llu-dark-left) 50%,
            var(--llu-dark-right) 50%,
            var(--llu-dark-right) 100%
        ) !important;
    color: var(--llu-copy-dark) !important;
    border: 0 !important;
}

body.llu-home .llu-section--news .llu-section-label,
body.llu-home .llu-section--horses .llu-section-label,
body.llu-home .llu-section--livestock .llu-section-label,
body.llu-home .llu-section--news h3,
body.llu-home .llu-section--horses h3,
body.llu-home .llu-section--livestock h3 {
    color: #fff !important;
}

body.llu-home .llu-section--news p,
body.llu-home .llu-section--horses p,
body.llu-home .llu-section--livestock p {
    color: var(--llu-copy-dark);
}

/* Smooth separators while preserving the original 5486x75 back_home
   source graphic underneath. No hard horizontal white/black seam. */
body.llu-home .llu-original-divider {
    height: 75px !important;
    min-height: 75px !important;
    box-shadow: none !important;
    overflow: hidden;
    background-size: auto 75px !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
}

body.llu-home .llu-original-divider::before,
body.llu-home .llu-original-divider::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* white -> legacy dark split */
body.llu-home .llu-original-divider--1::before {
    background: linear-gradient(
        to bottom,
        rgba(255,255,255,1) 0%,
        rgba(255,255,255,.72) 18%,
        rgba(255,255,255,.16) 58%,
        rgba(255,255,255,0) 100%
    );
}

/* dark -> legacy split: only soften the boundary */
body.llu-home .llu-original-divider--2::before {
    background: linear-gradient(
        to bottom,
        rgba(19,19,19,.55) 0%,
        rgba(19,19,19,.12) 42%,
        rgba(19,19,19,0) 100%
    );
}

/* legacy dark split -> white */
body.llu-home .llu-original-divider--3::after {
    background: linear-gradient(
        to bottom,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,.12) 38%,
        rgba(255,255,255,.70) 78%,
        rgba(255,255,255,1) 100%
    );
}

/* The original shadow_dark.png is a 2600x29 alpha shadow. Overlay it at
   the photo edge and add a transparent->dark gradient under it, so the
   image never ends in a hard line. */
body.llu-home .llu-original-photo {
    position: relative !important;
    isolation: isolate;
}

body.llu-home .llu-original-photo::before,
body.llu-home .llu-original-photo::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    z-index: 2;
    pointer-events: none;
}

body.llu-home .llu-original-photo::after {
    bottom: 0;
    height: clamp(86px, 10vw, 150px);
    background: linear-gradient(
        to bottom,
        rgba(19,19,19,0) 0%,
        rgba(19,19,19,.18) 28%,
        rgba(19,19,19,.68) 72%,
        var(--llu-dark-left) 100%
    );
}

body.llu-home .llu-original-photo--horses::before,
body.llu-home .llu-original-photo--contact::before {
    top: 0;
    height: clamp(58px, 7vw, 105px);
    background: linear-gradient(
        to bottom,
        rgba(255,255,255,.90) 0%,
        rgba(255,255,255,.25) 48%,
        rgba(255,255,255,0) 100%
    );
}

body.llu-home .llu-original-photo--livestock::before {
    top: 0;
    height: clamp(58px, 7vw, 105px);
    background: linear-gradient(
        to bottom,
        rgba(19,19,19,.90) 0%,
        rgba(19,19,19,.24) 52%,
        rgba(19,19,19,0) 100%
    );
}

body.llu-home .llu-original-shadow {
    height: 49px !important;
    min-height: 49px !important;
    margin-top: -49px !important;
    margin-bottom: 0 !important;
    z-index: 6 !important;
    box-shadow: none !important;
    background-image: url("/Themes/LLU/Content/images/original/shadow_dark.png") !important;
    background-size: cover !important;
    background-position: center center !important;
    opacity: .88 !important;
}

/* Do not let Smartstore's standard more-less UI constrain the structured
   legacy columns. */
body.llu-home .llu-legacy-two-col,
body.llu-home .llu-legacy-two-col * {
    max-height: none !important;
}

/* Footer is editable through LLU.Footer menu and this dedicated widget zone. */
body.llu-home .llu-footer-editable {
    margin: 18px auto 0;
    max-width: 920px;
}

body.llu-home .llu-footer-editable:empty {
    display: none;
}

@media (max-width: 900px) {
    body.llu-home .llu-legacy-two-col {
        grid-template-columns: 1fr;
        gap: 0;
        max-width: 680px;
    }

    body.llu-home .llu-legacy-col--right {
        margin-top: 34px;
    }

    body.llu-home .llu-section--news,
    body.llu-home .llu-section--horses,
    body.llu-home .llu-section--livestock {
        background: var(--llu-dark-left) !important;
    }

    body.llu-home .llu-original-divider {
        height: 56px !important;
        min-height: 56px !important;
        background-size: auto 56px !important;
    }
}

/* ==================================================================
   LLU 5.1.3 – Trebuchet + dynamic two-column "Aktuelles"
   ================================================================== */

/* The legacy LLU source uses Trebuchet for its characteristic typography.
   Enforce it for normal UI/text controls without touching icon fonts. */
body,
body input,
body button,
body select,
body textarea,
body .btn,
body .form-control,
body .dropdown-menu,
body .modal,
body .popover,
body .tooltip,
body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
    font-family: "Trebuchet MS", Trebuchet, Tahoma, Arial, sans-serif !important;
}

/* When Smartstore News follows the hero, fade the actual hero image into
   the original LLU split dark canvas. This replaces the former white band. */
body.llu-home .llu-legacy-hero--to-news::after {
    content: "";
    position: absolute;
    z-index: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: clamp(72px, 8vw, 128px);
    pointer-events: none;
    background:
        linear-gradient(to bottom, rgba(19,19,19,0) 0%, rgba(19,19,19,.22) 30%, var(--llu-dark-left) 100%) left top / 50% 100% no-repeat,
        linear-gradient(to bottom, rgba(32,31,29,0) 0%, rgba(32,31,29,.22) 30%, var(--llu-dark-right) 100%) right top / 50% 100% no-repeat;
}

/* "Aktuelles" is a Smartstore News projection. The original background
   already forms two halves, so the two latest posts align with them. */
body.llu-home .llu-section--news {
    padding-top: clamp(54px, 6vw, 84px) !important;
    padding-bottom: clamp(58px, 7vw, 92px) !important;
}

body.llu-home .llu-section--news .llu-section-inner {
    max-width: 1440px;
}

body.llu-home .llu-home-news {
    margin: 0;
    padding: 0;
}

body.llu-home .llu-home-news .news-items {
    margin: 0 !important;
    align-items: stretch;
}

body.llu-home .llu-home-news .news-preview-lg {
    flex: 0 0 50% !important;
    width: 50% !important;
    max-width: 50% !important;
    margin: 0 !important;
    padding: 0 clamp(22px, 3.6vw, 58px) 18px !important;
}

body.llu-home .llu-home-news .news-preview-lg:first-child {
    padding-left: 0 !important;
}

body.llu-home .llu-home-news .news-preview-lg:nth-child(2) {
    padding-right: 0 !important;
}

body.llu-home .llu-home-news .news-preview-lg figure {
    margin: 0 0 26px !important;
}

body.llu-home .llu-home-news .newsitem-picture {
    box-shadow: none !important;
    background: rgba(255,255,255,.04);
}

body.llu-home .llu-home-news .newsitem-title,
body.llu-home .llu-home-news .newsitem-title a {
    color: #fff !important;
    font-family: "Trebuchet MS", Trebuchet, Tahoma, Arial, sans-serif !important;
    font-weight: 400 !important;
    line-height: 1.22 !important;
}

body.llu-home .llu-home-news .newsitem-date {
    color: #D9C0A2 !important;
}

body.llu-home .llu-home-news .newsitem-description {
    color: var(--llu-copy-dark) !important;
    font-family: "Trebuchet MS", Trebuchet, Tahoma, Arial, sans-serif !important;
    line-height: 1.55 !important;
}

body.llu-home .llu-home-news .news-preview-lg .btn,
body.llu-home .llu-news-all-link {
    border: 1px solid rgba(217,192,162,.86) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #fff !important;
    box-shadow: none !important;
    font-weight: 400 !important;
}

body.llu-home .llu-home-news .news-preview-lg .btn:hover,
body.llu-home .llu-home-news .news-preview-lg .btn:focus,
body.llu-home .llu-news-all-link:hover,
body.llu-home .llu-news-all-link:focus {
    background: #D9C0A2 !important;
    color: #131313 !important;
}

body.llu-home .llu-news-all {
    display: flex;
    justify-content: center;
    margin-top: clamp(24px, 4vw, 48px);
}

body.llu-home .llu-news-all-link {
    min-width: 176px;
    justify-content: center;
}

/* Continue directly from the split news canvas into the next LLU horse
   photograph. The fade sits on the photo itself, so no white stripe can
   appear between the two sections. */
body.llu-home .llu-original-photo--from-news::before {
    content: "";
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    top: 0;
    height: clamp(76px, 9vw, 138px);
    pointer-events: none;
    background:
        linear-gradient(to bottom, var(--llu-dark-left) 0%, rgba(19,19,19,.62) 36%, rgba(19,19,19,0) 100%) left top / 50% 100% no-repeat,
        linear-gradient(to bottom, var(--llu-dark-right) 0%, rgba(32,31,29,.62) 36%, rgba(32,31,29,0) 100%) right top / 50% 100% no-repeat;
}

@media (max-width: 900px) {
    body.llu-home .llu-legacy-hero--to-news::after {
        background: linear-gradient(to bottom, rgba(19,19,19,0) 0%, rgba(19,19,19,.24) 30%, var(--llu-dark-left) 100%);
    }

    body.llu-home .llu-home-news .news-preview-lg {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 0 34px !important;
    }

    body.llu-home .llu-home-news .news-preview-lg + .news-preview-lg {
        margin-top: 24px !important;
        padding-top: 34px !important;
        border-top: 1px solid rgba(255,255,255,.12);
    }

    body.llu-home .llu-original-photo--from-news::before {
        background: linear-gradient(to bottom, var(--llu-dark-left) 0%, rgba(19,19,19,.58) 38%, rgba(19,19,19,0) 100%);
    }
}



/* ==================================================================
   LLU 5.1.5 – fluid desktop columns + direct Verkauf/photo/contact flow
   ================================================================== */

/* The homepage must feel fluid on desktop. Keep only responsive breathing
   room at the viewport edges; do not put the editorial areas back into the
   former ~1000px boxed Muse canvas. */
body.llu-home .llu-section-inner,
body.llu-home .llu-content-narrow,
body.llu-home .llu-home-event {
    width: 100% !important;
    max-width: 1680px !important;
    padding-left: clamp(20px, 4vw, 84px) !important;
    padding-right: clamp(20px, 4vw, 84px) !important;
    box-sizing: border-box !important;
}

/* Two editorial columns now use the available desktop width instead of
   fixed 433px columns. The 50/50 split remains responsive. */
body.llu-home .llu-legacy-two-col {
    width: 100% !important;
    max-width: none !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: clamp(40px, 6vw, 128px) !important;
    justify-content: stretch !important;
}

body.llu-home .llu-legacy-col {
    width: 100%;
    min-width: 0;
}

/* Verkauf follows the dark split section directly. The transition is drawn
   inside Verkauf itself, so it does not add an artificial horizontal band. */
body.llu-home .llu-section--sale {
    position: relative;
    overflow: hidden;
    background: #f7f7f7 !important;
    border: 0 !important;
}

body.llu-home .llu-section--sale::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    right: 0;
    height: clamp(32px, 4vw, 58px);
    pointer-events: none;
    background:
        linear-gradient(to bottom, rgba(19,19,19,.82) 0%, rgba(19,19,19,.20) 48%, rgba(247,247,247,0) 100%) left top / 50% 100% no-repeat,
        linear-gradient(to bottom, rgba(32,31,29,.82) 0%, rgba(32,31,29,.20) 48%, rgba(247,247,247,0) 100%) right top / 50% 100% no-repeat;
}

body.llu-home .llu-section--sale .llu-section-inner {
    position: relative;
    z-index: 1;
}

/* Verkauf -> photo -> Kontakt is one continuous visual flow.
   No back_home separator and no white page-background gap are inserted. */
body.llu-home .llu-original-photo--after-sale {
    margin: 0 !important;
    border: 0 !important;
    background: #171717 !important;
    line-height: 0;
}

body.llu-home .llu-original-photo--after-sale::before {
    top: 0 !important;
    height: clamp(44px, 5vw, 82px) !important;
    background: linear-gradient(
        to bottom,
        rgba(247,247,247,1) 0%,
        rgba(247,247,247,.56) 34%,
        rgba(247,247,247,.12) 68%,
        rgba(247,247,247,0) 100%
    ) !important;
}

body.llu-home .llu-original-photo--after-sale::after {
    bottom: 0 !important;
    height: clamp(54px, 6vw, 96px) !important;
    background: linear-gradient(
        to bottom,
        rgba(23,23,23,0) 0%,
        rgba(23,23,23,.18) 34%,
        rgba(23,23,23,.66) 72%,
        #171717 100%
    ) !important;
}

body.llu-home .llu-original-photo--after-sale .llu-original-photo-img {
    display: block !important;
    margin: 0 !important;
}

/* Kontakt begins immediately in the same colour reached by the photo fade. */
body.llu-home .llu-original-photo--after-sale + .llu-section--contact {
    margin-top: 0 !important;
    border-top: 0 !important;
    background: #171717 !important;
}

/* News can use the same wider desktop rhythm once content exists. */
body.llu-home .llu-section--news .llu-section-inner {
    max-width: 1680px !important;
}

@media (max-width: 900px) {
    body.llu-home .llu-section-inner,
    body.llu-home .llu-content-narrow,
    body.llu-home .llu-home-event {
        max-width: 760px !important;
        padding-left: clamp(18px, 5vw, 34px) !important;
        padding-right: clamp(18px, 5vw, 34px) !important;
    }

    body.llu-home .llu-legacy-two-col {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 0 !important;
    }

    body.llu-home .llu-section--sale::before {
        background: linear-gradient(
            to bottom,
            rgba(19,19,19,.76) 0%,
            rgba(19,19,19,.18) 48%,
            rgba(247,247,247,0) 100%
        );
    }
}


/* ==================================================================
   LLU 5.1.6 – direct hero/news/photo flow
   ================================================================== */

/* No artificial strip after the start/welcome image. If there are no News,
   the hero ends directly at the first horse photograph. Both sides receive
   only a short optical cross-fade inside their own boxes; no extra height
   is inserted into document flow. */
body.llu-home .llu-legacy-hero--to-horses::after {
    content: "";
    position: absolute;
    z-index: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: clamp(34px, 4vw, 62px);
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        rgba(44,44,44,0) 0%,
        rgba(44,44,44,.14) 45%,
        rgba(44,44,44,.48) 100%
    );
}

body.llu-home .llu-original-photo--from-hero {
    margin-top: 0 !important;
    border: 0 !important;
    background: #2c2c2c !important;
}

body.llu-home .llu-original-photo--from-hero::before {
    top: 0 !important;
    height: clamp(34px, 4vw, 62px) !important;
    background: linear-gradient(
        to bottom,
        rgba(44,44,44,.48) 0%,
        rgba(44,44,44,.13) 50%,
        rgba(44,44,44,0) 100%
    ) !important;
}

/* News is part of the same full-width page canvas. Remove residual Bootstrap
   row/container boxing and let one/two Smartstore News previews occupy the
   real available editorial width. */
body.llu-home .llu-section--news {
    margin: 0 !important;
    border: 0 !important;
    padding-top: clamp(40px, 4.8vw, 68px) !important;
    padding-bottom: clamp(44px, 5.2vw, 74px) !important;
}

body.llu-home .llu-section--news .llu-section-inner,
body.llu-home .llu-home-news,
body.llu-home .llu-home-news .news-items {
    width: 100% !important;
    max-width: 1680px !important;
    box-sizing: border-box !important;
}

body.llu-home .llu-home-news .news-items {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.llu-home .llu-home-news .news-preview-lg {
    min-width: 0 !important;
    box-sizing: border-box !important;
}

/* The first/second article follow the existing two-tone background exactly,
   without an additional centered card canvas. */
@media (min-width: 901px) {
    body.llu-home .llu-home-news .news-preview-lg {
        flex: 0 0 50% !important;
        width: 50% !important;
        max-width: 50% !important;
        padding-left: clamp(8px, 2.4vw, 42px) !important;
        padding-right: clamp(8px, 2.4vw, 42px) !important;
    }

    body.llu-home .llu-home-news .news-preview-lg:first-child {
        padding-left: 0 !important;
    }

    body.llu-home .llu-home-news .news-preview-lg:nth-child(2) {
        padding-right: 0 !important;
    }
}

/* The hero->News fade remains inside the hero; the News->horse fade remains
   inside the horse photograph. This prevents either transition from adding
   a fake black/white band to the page. */
body.llu-home .llu-legacy-hero--to-news::after {
    height: clamp(42px, 4.8vw, 76px) !important;
}

body.llu-home .llu-original-photo--from-news::before {
    height: clamp(44px, 5vw, 80px) !important;
}

/* Ensure the old white top tint of the generic horse image can never win
   over the direct hero/news variants. */
body.llu-home .llu-original-photo--horses.llu-original-photo--from-hero::before {
    background: linear-gradient(
        to bottom,
        rgba(44,44,44,.48) 0%,
        rgba(44,44,44,.13) 50%,
        rgba(44,44,44,0) 100%
    ) !important;
}

body.llu-home .llu-original-photo--horses.llu-original-photo--from-news::before {
    background:
        linear-gradient(to bottom, var(--llu-dark-left) 0%, rgba(19,19,19,.54) 38%, rgba(19,19,19,0) 100%) left top / 50% 100% no-repeat,
        linear-gradient(to bottom, var(--llu-dark-right) 0%, rgba(32,31,29,.54) 38%, rgba(32,31,29,0) 100%) right top / 50% 100% no-repeat !important;
}

@media (max-width: 900px) {
    body.llu-home .llu-section--news {
        padding-top: 38px !important;
        padding-bottom: 44px !important;
    }

    body.llu-home .llu-home-news .news-preview-lg {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}


/* ==================================================================
   LLU 5.1.7 – equal-height legacy columns and stable right-hand panels
   ================================================================== */

/* The original structured CMS sections are turned into two explicit columns
   by llu.js. The base stylesheet still had align-items:start from the older
   boxed version, which lets the right column end earlier than the left one.
   Stretch both columns to the row height so the Flämisches Pferd /
   Aberdeen Angus blocks keep one continuous background to the bottom. */
body.llu-home .llu-legacy-two-col {
    align-items: stretch !important;
}

/* Each legacy column becomes a real height-bearing box. */
body.llu-home .llu-legacy-col {
    display: flex !important;
    flex-direction: column !important;
    align-self: stretch !important;
    min-height: 100% !important;
    box-sizing: border-box !important;
    background-clip: padding-box !important;
}

/* Prevent the last text block from visually "cutting" the column because of
   inherited margins or editor output. */
body.llu-home .llu-legacy-col > :last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Paint the structured left/right columns explicitly with the same colours
   as the section split. This avoids any fallback to the page background in
   longer or shorter columns. */
body.llu-home .llu-legacy-two-col--horses .llu-legacy-col--left,
body.llu-home .llu-legacy-two-col--livestock .llu-legacy-col--left {
    background: var(--llu-dark-left) !important;
}

body.llu-home .llu-legacy-two-col--horses .llu-legacy-col--right,
body.llu-home .llu-legacy-two-col--livestock .llu-legacy-col--right {
    background: var(--llu-dark-right) !important;
}

/* Keep inner editor wrappers transparent so only the column background is
   visible from top to bottom. */
body.llu-home .llu-legacy-col .topic-html-content-body,
body.llu-home .llu-legacy-col .more-block,
body.llu-home .llu-legacy-col > div {
    background-color: transparent !important;
}

/* In the structured breeding/livestock areas the two columns should feel like
   full-height panels, not isolated text islands inside the larger section. */
body.llu-home .llu-legacy-two-col--horses,
body.llu-home .llu-legacy-two-col--livestock {
    overflow: hidden !important;
}

@media (max-width: 900px) {
    body.llu-home .llu-legacy-col {
        min-height: 0 !important;
    }

    /* On mobile each stacked block keeps its own background without forcing
       equal desktop-style row height. */
    body.llu-home .llu-legacy-col--right {
        margin-top: 34px !important;
    }
}


/* ==================================================================
   LLU 5.1.8 – Viehzucht CTA + logo-only sticky home control
   ================================================================== */

/* Aberdeen Angus CTA: use the same brown as the VIEHZUCHT menu item.
   The right livestock column is flex-based since 5.1.7; margin-top:auto
   uses its remaining vertical space and anchors the CTA visually at bottom. */
body.llu-home .llu-livestock-contact-cta-wrap {
    margin-top: auto !important;
    padding-top: clamp(28px, 4vw, 54px);
}

body.llu-home .llu-livestock-contact-cta {
    display: inline-flex !important;
    min-height: 52px;
    padding: 13px 28px;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border: 0;
    border-radius: 0;
    background: #BD7F46 !important;
    color: #fff !important;
    font-family: "Trebuchet MS", Trebuchet, Tahoma, Arial, sans-serif !important;
    font-size: clamp(15px, 1.1vw, 18px);
    line-height: 1.2;
    font-weight: 400;
    letter-spacing: .035em;
    text-decoration: none !important;
    transition: background-color .15s ease, color .15s ease, transform .15s ease;
}

body.llu-home .llu-livestock-contact-cta:hover,
body.llu-home .llu-livestock-contact-cta:focus {
    background: #565656 !important;
    color: #fff !important;
    text-decoration: none !important;
}

body.llu-home .llu-livestock-contact-cta:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

/* The separate Startseite/up control has been removed. The sticky logo is
   now the only start control and links to #start, so existing smooth-scroll
   handling brings the user back to the top without navigating away. */
body > .llu-scroll-nav--home.is-stuck .llu-nav-sticky-tools {
    gap: 0 !important;
}

@media (min-width: 901px) {
    body > .llu-scroll-nav--home.is-stuck .llu-nav-track {
        padding-left: 100px !important;
    }
}

@media (max-width: 900px) {
    body > .llu-scroll-nav--home.is-stuck .llu-nav-track {
        padding-left: 92px !important;
    }
}

@media (max-width: 767.98px) {
    body > .llu-scroll-nav--home.is-stuck .llu-nav-track {
        padding-left: 46px !important;
    }

    body > .llu-scroll-nav--home.is-stuck .llu-nav-logo {
        display: flex !important;
        width: 44px !important;
        height: 72px !important;
    }

    body > .llu-scroll-nav--home.is-stuck .llu-nav-logo img {
        width: 40px !important;
        height: 40px !important;
    }
}

@media (max-width: 520px) {
    /* Override the older rule that hid the logo on very narrow screens.
       The obsolete Startseite button no longer occupies this space. */
    body > .llu-scroll-nav--home.is-stuck .llu-nav-logo {
        display: flex !important;
    }

    body > .llu-scroll-nav--home.is-stuck .llu-nav-track {
        padding-left: 46px !important;
    }
}

@media (max-width: 900px) {
    body.llu-home .llu-livestock-contact-cta-wrap {
        margin-top: 30px !important;
        padding-top: 0;
    }
}


/* ==================================================================
   LLU 5.1.9 – robust server-rendered CTA + exact navigation height
   ================================================================== */

/* CTA is now rendered by Razor, so it works even if llu.js is cached,
   disabled or cannot restructure the CMS topic. JS only moves it into the
   Aberdeen-Angus column when the expected content structure is available. */
body.llu-home .llu-livestock-contact-cta-wrap {
    display: flex !important;
    width: 100%;
    margin-top: auto !important;
    padding-top: clamp(28px, 4vw, 54px);
    box-sizing: border-box;
}

body.llu-home .llu-livestock-contact-cta {
    height: var(--llu-nav-height) !important;
    min-height: var(--llu-nav-height) !important;
    min-width: min(100%, 260px);
    padding: 0 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    background: #BD7F46 !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 0 !important;
    font-family: "Trebuchet MS", Trebuchet, Tahoma, Arial, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.1 !important;
    letter-spacing: 1px !important;
    font-weight: 400 !important;
    text-align: center;
    text-decoration: none !important;
}

body.llu-home .llu-livestock-contact-cta:hover,
body.llu-home .llu-livestock-contact-cta:focus {
    background: #565656 !important;
    color: #fff !important;
}

/* If the CMS structure cannot be transformed, keep the server-rendered
   CTA usable at the bottom of the Viehzucht section. */
body.llu-home #viehzucht > .llu-section-inner > .llu-livestock-contact-cta-wrap {
    justify-content: flex-end;
}

@media (max-width: 900px) {
    body.llu-home .llu-livestock-contact-cta-wrap {
        margin-top: 30px !important;
        padding-top: 0 !important;
    }
}

@media (max-width: 767.98px) {
    body.llu-home .llu-livestock-contact-cta {
        height: 72px !important;
        min-height: 72px !important;
        width: 100%;
        min-width: 0;
        font-size: 12px !important;
    }
}


/* ==================================================================
   LLU 5.1.10 – native Smartstore ContactUs CTA + responsive typography
   ================================================================== */

/* Same vertical dimension as the LLU desktop navigation (90px).
   Typography is intentionally larger than the compact menu labels:
   Trebuchet remains the LLU typeface, while clamp() scales the CTA
   naturally across desktop widths. */
body.llu-home .llu-livestock-contact-cta {
    width: 100% !important;
    height: 90px !important;
    min-height: 90px !important;
    padding: 0 clamp(24px, 3vw, 48px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    background: #BD7F46 !important;
    color: #fff !important;
    font-family: "Trebuchet MS", Trebuchet, Tahoma, Arial, sans-serif !important;
    font-size: clamp(17px, 1.25vw, 22px) !important;
    line-height: 1.15 !important;
    font-weight: 400 !important;
    letter-spacing: clamp(.02em, .08vw, .055em) !important;
    text-align: center !important;
    text-decoration: none !important;
    white-space: normal !important;
}

/* Keep the button visually attached to the Aberdeen-Angus column rather than
   looking like a generic Smartstore Bootstrap button. */
body.llu-home .llu-livestock-contact-cta:hover,
body.llu-home .llu-livestock-contact-cta:focus {
    background: #565656 !important;
    color: #fff !important;
    text-decoration: none !important;
}

/* Tablet/mobile follows the actual LLU mobile menu height (72px), while the
   label remains readable instead of inheriting the very small menu font. */
@media (max-width: 767.98px) {
    body.llu-home .llu-livestock-contact-cta {
        height: 72px !important;
        min-height: 72px !important;
        padding: 0 20px !important;
        font-size: clamp(15px, 4.2vw, 18px) !important;
        letter-spacing: .025em !important;
    }
}


/* ==================================================================
   LLU 5.1.11 – breathing room below the tall inner-page navigation
   ================================================================== */

/* On normal Smartstore pages the LLU header is followed immediately by
   #content-wrapper. Give page titles/forms/topics deliberate breathing room
   below the 90px LLU navigation without changing the bespoke LLU homepage. */
body:not(.llu-home) .llu-page-header + #content-wrapper {
    padding-top: clamp(36px, 3.2vw, 48px) !important;
    box-sizing: border-box !important;
}

/* Keep the first title from reintroducing a negative/too-tight top rhythm
   through inherited Smartstore margins. */
body:not(.llu-home) .llu-page-header + #content-wrapper #content > .breadcrumb:first-child,
body:not(.llu-home) .llu-page-header + #content-wrapper #content-center > .page:first-child {
    margin-top: 0 !important;
}

/* Tablet/mobile menu is 72px high; a slightly smaller content gap preserves
   useful screen space while still separating the Smartstore page heading. */
@media (max-width: 767.98px) {
    body:not(.llu-home) .llu-page-header + #content-wrapper {
        padding-top: 24px !important;
    }
}


/* ==================================================================
   LLU 5.1.12 – responsive typography for normal Smartstore pages
   ================================================================== */

/* Inner Smartstore pages inherit LLU's Trebuchet character and fluid type.
   The bespoke homepage remains governed by its dedicated section rules. */
body:not(.llu-home),
body:not(.llu-home) input,
body:not(.llu-home) button,
body:not(.llu-home) select,
body:not(.llu-home) textarea,
body:not(.llu-home) .btn,
body:not(.llu-home) .form-control,
body:not(.llu-home) .dropdown-menu,
body:not(.llu-home) .modal,
body:not(.llu-home) .popover,
body:not(.llu-home) .tooltip {
    font-family: "Trebuchet MS", Trebuchet, Tahoma, Arial, sans-serif !important;
}

/* Main page title: replaces the fixed Smartstore/Bootstrap h2 sizing with a
   responsive LLU scale. */
body:not(.llu-home) .page-title h1,
body:not(.llu-home) .page-title .h1,
body:not(.llu-home) .page-title .h2,
body:not(.llu-home) h1 {
    font-family: "Trebuchet MS", Trebuchet, Tahoma, Arial, sans-serif !important;
    font-size: clamp(30px, 3.1vw, 46px) !important;
    line-height: 1.12 !important;
    font-weight: 400 !important;
    letter-spacing: .01em !important;
}

/* Section headings on Topics, News, forms, account pages, etc. */
body:not(.llu-home) h2,
body:not(.llu-home) .h2 {
    font-size: clamp(25px, 2.45vw, 36px) !important;
    line-height: 1.18 !important;
    font-weight: 400 !important;
}

body:not(.llu-home) h3,
body:not(.llu-home) .h3 {
    font-size: clamp(21px, 1.9vw, 30px) !important;
    line-height: 1.22 !important;
    font-weight: 400 !important;
}

body:not(.llu-home) h4,
body:not(.llu-home) .h4 {
    font-size: clamp(18px, 1.45vw, 24px) !important;
    line-height: 1.28 !important;
    font-weight: 400 !important;
}

/* Default readable copy scale for Smartstore's regular page content. */
body:not(.llu-home) #content-wrapper,
body:not(.llu-home) #content-wrapper p,
body:not(.llu-home) #content-wrapper li,
body:not(.llu-home) #content-wrapper td,
body:not(.llu-home) #content-wrapper th,
body:not(.llu-home) #content-wrapper .topic-html-content-body,
body:not(.llu-home) #content-wrapper .html-editor-content,
body:not(.llu-home) #content-wrapper .lead {
    font-family: "Trebuchet MS", Trebuchet, Tahoma, Arial, sans-serif !important;
    font-size: clamp(16px, 1.08vw, 19px) !important;
    line-height: 1.58 !important;
}

/* Smartstore's .lead must not become disproportionately large relative to
   the LLU copy rhythm. */
body:not(.llu-home) #content-wrapper .lead {
    font-weight: 400 !important;
}

/* Forms: keep labels and entered text comfortably readable and fluid. */
body:not(.llu-home) #content-wrapper label,
body:not(.llu-home) #content-wrapper .col-form-label,
body:not(.llu-home) #content-wrapper .form-control,
body:not(.llu-home) #content-wrapper .custom-select,
body:not(.llu-home) #content-wrapper .input-group-text {
    font-family: "Trebuchet MS", Trebuchet, Tahoma, Arial, sans-serif !important;
    font-size: clamp(15px, .98vw, 18px) !important;
    line-height: 1.4 !important;
}

/* Form fields receive a little more vertical room so the larger adaptive
   type does not feel cramped. Textareas retain their natural multi-line size. */
body:not(.llu-home) #content-wrapper input.form-control,
body:not(.llu-home) #content-wrapper select.form-control,
body:not(.llu-home) #content-wrapper .custom-select {
    min-height: 44px;
}

body:not(.llu-home) #content-wrapper textarea.form-control {
    min-height: 140px;
}

/* Secondary UI text remains subordinate, but no longer drops to tiny sizes. */
body:not(.llu-home) #content-wrapper small,
body:not(.llu-home) #content-wrapper .small,
body:not(.llu-home) #content-wrapper .text-muted,
body:not(.llu-home) #content-wrapper .field-validation-error,
body:not(.llu-home) #content-wrapper .field-validation-valid,
body:not(.llu-home) #content-wrapper .form-text {
    font-size: clamp(13px, .82vw, 15px) !important;
    line-height: 1.45 !important;
}

/* Buttons use the same LLU font and scale naturally with the viewport. */
body:not(.llu-home) #content-wrapper .btn {
    font-family: "Trebuchet MS", Trebuchet, Tahoma, Arial, sans-serif !important;
    font-size: clamp(15px, .95vw, 17px) !important;
    line-height: 1.2 !important;
}

/* Compact the scale slightly on small screens while preserving hierarchy. */
@media (max-width: 767.98px) {
    body:not(.llu-home) .page-title h1,
    body:not(.llu-home) .page-title .h1,
    body:not(.llu-home) .page-title .h2,
    body:not(.llu-home) h1 {
        font-size: clamp(27px, 7.6vw, 34px) !important;
    }

    body:not(.llu-home) h2,
    body:not(.llu-home) .h2 {
        font-size: clamp(23px, 6.4vw, 30px) !important;
    }

    body:not(.llu-home) h3,
    body:not(.llu-home) .h3 {
        font-size: clamp(20px, 5.5vw, 26px) !important;
    }

    body:not(.llu-home) #content-wrapper,
    body:not(.llu-home) #content-wrapper p,
    body:not(.llu-home) #content-wrapper li,
    body:not(.llu-home) #content-wrapper td,
    body:not(.llu-home) #content-wrapper th,
    body:not(.llu-home) #content-wrapper .topic-html-content-body,
    body:not(.llu-home) #content-wrapper .html-editor-content,
    body:not(.llu-home) #content-wrapper .lead {
        font-size: clamp(15px, 4.15vw, 17px) !important;
        line-height: 1.55 !important;
    }
}


/* ==================================================================
   LLU 5.1.13 – fluid Smartstore page width + LLU button palette
   ================================================================== */

:root {
    --llu-menu-news: #E9CEAC;
    --llu-menu-livestock: #BD7F46;
    --llu-menu-horses: #57B7F2;
    --llu-menu-sale: #6F8CA6;
    --llu-menu-contact: #538597;
    --llu-menu-hover: #565656;
}

/* Smartstore 4.2 renders normal pages inside <section id="content"
   class="container">. Replace the boxed Bootstrap max-width with the same
   broad responsive canvas used by LLU, while keeping deliberate edge space. */
body:not(.llu-home) #content-wrapper > #content.container,
body:not(.llu-home) #content-wrapper > section#content.container {
    width: 100% !important;
    max-width: 1680px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: clamp(18px, 4vw, 72px) !important;
    padding-right: clamp(18px, 4vw, 72px) !important;
    box-sizing: border-box !important;
}

/* Ensure the Smartstore row/column shell can consume the full fluid canvas. */
body:not(.llu-home) #content-body,
body:not(.llu-home) #content-center,
body:not(.llu-home) #content-center > .page {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

/* Nested page wrappers must not restore a theme/bootstrap max-width. */
body:not(.llu-home) #content-center > .page,
body:not(.llu-home) #content-center > .page .page-body {
    margin-left: 0;
    margin-right: 0;
}

/* Slightly tighter gutters on phones. */
@media (max-width: 767.98px) {
    body:not(.llu-home) #content-wrapper > #content.container,
    body:not(.llu-home) #content-wrapper > section#content.container {
        max-width: none !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

/* ------------------------------------------------------------------
   Smartstore buttons mapped to the five LLU menu colours.
   Destructive .btn-danger remains semantic red for safety.
   ------------------------------------------------------------------ */

body:not(.llu-home) #content-wrapper .btn {
    border-radius: 0 !important;
    border-width: 1px !important;
    font-family: "Trebuchet MS", Trebuchet, Tahoma, Arial, sans-serif !important;
    transition: background-color .14s ease, border-color .14s ease,
                color .14s ease, box-shadow .14s ease !important;
}

/* Primary action -> CONTACT */
body:not(.llu-home) #content-wrapper .btn-primary {
    background-color: var(--llu-menu-contact) !important;
    border-color: var(--llu-menu-contact) !important;
    color: #fff !important;
}

/* Secondary action -> SALE */
body:not(.llu-home) #content-wrapper .btn-secondary {
    background-color: var(--llu-menu-sale) !important;
    border-color: var(--llu-menu-sale) !important;
    color: #fff !important;
}

/* Warning / register / highlighted alternative -> LIVESTOCK */
body:not(.llu-home) #content-wrapper .btn-warning {
    background-color: var(--llu-menu-livestock) !important;
    border-color: var(--llu-menu-livestock) !important;
    color: #fff !important;
}

/* Informational action -> HORSES */
body:not(.llu-home) #content-wrapper .btn-info {
    background-color: var(--llu-menu-horses) !important;
    border-color: var(--llu-menu-horses) !important;
    color: #2F2F2F !important;
}

/* Positive/non-destructive alternative -> NEWS */
body:not(.llu-home) #content-wrapper .btn-success {
    background-color: var(--llu-menu-news) !important;
    border-color: var(--llu-menu-news) !important;
    color: #474747 !important;
}

/* Outline variants use the same LLU palette. */
body:not(.llu-home) #content-wrapper .btn-outline-primary {
    border-color: var(--llu-menu-contact) !important;
    color: var(--llu-menu-contact) !important;
}
body:not(.llu-home) #content-wrapper .btn-outline-secondary {
    border-color: var(--llu-menu-sale) !important;
    color: var(--llu-menu-sale) !important;
}
body:not(.llu-home) #content-wrapper .btn-outline-warning {
    border-color: var(--llu-menu-livestock) !important;
    color: var(--llu-menu-livestock) !important;
}
body:not(.llu-home) #content-wrapper .btn-outline-info {
    border-color: var(--llu-menu-horses) !important;
    color: #397CA5 !important;
}
body:not(.llu-home) #content-wrapper .btn-outline-success {
    border-color: #B79A76 !important;
    color: #785F42 !important;
}

/* Same interaction language as the navigation. */
body:not(.llu-home) #content-wrapper .btn-primary:hover,
body:not(.llu-home) #content-wrapper .btn-primary:focus,
body:not(.llu-home) #content-wrapper .btn-secondary:hover,
body:not(.llu-home) #content-wrapper .btn-secondary:focus,
body:not(.llu-home) #content-wrapper .btn-warning:hover,
body:not(.llu-home) #content-wrapper .btn-warning:focus,
body:not(.llu-home) #content-wrapper .btn-info:hover,
body:not(.llu-home) #content-wrapper .btn-info:focus,
body:not(.llu-home) #content-wrapper .btn-success:hover,
body:not(.llu-home) #content-wrapper .btn-success:focus,
body:not(.llu-home) #content-wrapper .btn-outline-primary:hover,
body:not(.llu-home) #content-wrapper .btn-outline-primary:focus,
body:not(.llu-home) #content-wrapper .btn-outline-secondary:hover,
body:not(.llu-home) #content-wrapper .btn-outline-secondary:focus,
body:not(.llu-home) #content-wrapper .btn-outline-warning:hover,
body:not(.llu-home) #content-wrapper .btn-outline-warning:focus,
body:not(.llu-home) #content-wrapper .btn-outline-info:hover,
body:not(.llu-home) #content-wrapper .btn-outline-info:focus,
body:not(.llu-home) #content-wrapper .btn-outline-success:hover,
body:not(.llu-home) #content-wrapper .btn-outline-success:focus {
    background-color: var(--llu-menu-hover) !important;
    border-color: var(--llu-menu-hover) !important;
    color: #fff !important;
    text-decoration: none !important;
}

/* Button-like links should visually belong to the same palette. */
body:not(.llu-home) #content-wrapper .btn-link {
    color: var(--llu-menu-contact) !important;
    background: transparent !important;
    border-color: transparent !important;
}
body:not(.llu-home) #content-wrapper .btn-link:hover,
body:not(.llu-home) #content-wrapper .btn-link:focus {
    color: var(--llu-menu-sale) !important;
    background: transparent !important;
    border-color: transparent !important;
}

/* Preserve semantic destructive red. Do not recolour delete/remove actions
   into a neutral LLU menu colour. */
body:not(.llu-home) #content-wrapper .btn-danger {
    color: #fff !important;
}

/* Disabled controls stay recognisably disabled regardless of palette. */
body:not(.llu-home) #content-wrapper .btn:disabled,
body:not(.llu-home) #content-wrapper .btn.disabled {
    opacity: .58 !important;
    cursor: not-allowed !important;
}


/* ==================================================================
   LLU 5.1.16 – inner-page header uses the existing homepage menu unchanged
   ================================================================== */

/*
   IMPORTANT:
   The menu itself is intentionally NOT restyled here.
   _LluNavigation.cshtml remains the single source for Home + Smartstore pages,
   including dynamic News visibility and navCount.

   Only the sticky logo/track positioning is aligned with the already accepted
   homepage sticky state, so the inner-page header no longer feels boxed.
*/

/* Desktop: same left logo position and same reserved track space as homepage. */
@media (min-width: 901px) {
    body:not(.llu-home) .llu-scroll-nav--inner.is-stuck .llu-nav-sticky-tools {
        left: 8px !important;
        gap: 0 !important;
    }

    body:not(.llu-home) .llu-scroll-nav--inner.is-stuck .llu-nav-track {
        width: 100% !important;
        min-width: 0 !important;
        padding-left: 100px !important;
        padding-right: 16px !important;
        box-sizing: border-box !important;
    }
}

/* Tablet: same reserved logo area as homepage. */
@media (max-width: 900px) {
    body:not(.llu-home) .llu-scroll-nav--inner.is-stuck .llu-nav-sticky-tools {
        left: 0 !important;
        gap: 0 !important;
    }

    body:not(.llu-home) .llu-scroll-nav--inner.is-stuck .llu-nav-track {
        width: 100% !important;
        min-width: 0 !important;
        padding-left: 92px !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }
}

/* Mobile: same compact logo and same track offset as homepage sticky state. */
@media (max-width: 767.98px) {
    body:not(.llu-home) .llu-scroll-nav--inner.is-stuck .llu-nav-track {
        padding-left: 46px !important;
    }

    body:not(.llu-home) .llu-scroll-nav--inner.is-stuck .llu-nav-logo {
        display: flex !important;
        width: 44px !important;
        height: 72px !important;
    }

    body:not(.llu-home) .llu-scroll-nav--inner.is-stuck .llu-nav-logo img {
        width: 40px !important;
        height: 40px !important;
    }
}

@media (max-width: 520px) {
    body:not(.llu-home) .llu-scroll-nav--inner.is-stuck .llu-nav-logo {
        display: flex !important;
    }

    body:not(.llu-home) .llu-scroll-nav--inner.is-stuck .llu-nav-track {
        padding-left: 46px !important;
    }
}


/* ==================================================================
   LLU 5.1.18 – source-faithful split transition below PFERDEZUCHT
   ================================================================== */

/*
   back_home2.gif is already split exactly like the original LLU canvas:
   left #131313, right #201F1E/#201F1D.

   An older softening overlay used the LEFT colour across the full width,
   which visually shortened the lighter FLÄMISCHES-PFERD half before the
   transition into the following image. Keep the same softening strength,
   but split the overlay at 50% just like the source graphic.
*/
body.llu-home .llu-original-divider--2::before {
    background:
        linear-gradient(
            to bottom,
            rgba(19,19,19,.55) 0%,
            rgba(19,19,19,.12) 42%,
            rgba(19,19,19,0) 100%
        ) left top / 50% 100% no-repeat,
        linear-gradient(
            to bottom,
            rgba(32,31,29,.55) 0%,
            rgba(32,31,29,.12) 42%,
            rgba(32,31,29,0) 100%
        ) right top / 50% 100% no-repeat !important;
}


/* ==================================================================
   LLU 5.1.19 – Flemish Horse CTA + continuous split fade into image
   ================================================================== */

/* Server-rendered fail-open CTA. JS only moves it into the right
   FLÄMISCHES-PFERD column when the known legacy CMS structure is intact. */
body.llu-home .llu-horses-contact-cta-wrap {
    display: flex !important;
    width: 100%;
    margin-top: auto !important;
    padding-top: clamp(28px, 4vw, 54px);
    box-sizing: border-box;
}

body.llu-home .llu-horses-contact-cta {
    width: 100% !important;
    height: 90px !important;
    min-height: 90px !important;
    padding: 0 clamp(24px, 3vw, 48px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #57B7F2 !important;
    color: #2F2F2F !important;
    font-family: "Trebuchet MS", Trebuchet, Tahoma, Arial, sans-serif !important;
    font-size: clamp(17px, 1.25vw, 22px) !important;
    line-height: 1.2 !important;
    font-weight: 400 !important;
    letter-spacing: .035em !important;
    text-align: center;
    text-decoration: none !important;
    transition: background-color .15s ease, color .15s ease;
}

body.llu-home .llu-horses-contact-cta:hover,
body.llu-home .llu-horses-contact-cta:focus {
    background: #565656 !important;
    color: #fff !important;
    text-decoration: none !important;
}

body.llu-home .llu-horses-contact-cta:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

/* Fail-open position if llu.js cannot restructure an edited CMS topic. */
body.llu-home #pferdezucht > .llu-section-inner > .llu-horses-contact-cta-wrap {
    justify-content: flex-end;
}

/*
   5.1.18 correctly split the divider itself, but the image immediately below
   still had one #131313 top fade across the entire width. That made the
   lighter right FLÄMISCHES-PFERD half appear to break at the image edge.
   Continue BOTH source colours into the image and fade each half separately.
*/
body.llu-home .llu-original-photo--livestock::before {
    top: 0 !important;
    height: clamp(58px, 7vw, 105px) !important;
    background:
        linear-gradient(
            to bottom,
            rgba(19,19,19,.90) 0%,
            rgba(19,19,19,.24) 52%,
            rgba(19,19,19,0) 100%
        ) left top / 50% 100% no-repeat,
        linear-gradient(
            to bottom,
            rgba(32,31,29,.90) 0%,
            rgba(32,31,29,.24) 52%,
            rgba(32,31,29,0) 100%
        ) right top / 50% 100% no-repeat !important;
}

@media (max-width: 900px) {
    body.llu-home .llu-horses-contact-cta-wrap {
        margin-top: 30px !important;
        padding-top: 0 !important;
    }
}

@media (max-width: 767.98px) {
    body.llu-home .llu-horses-contact-cta {
        height: 72px !important;
        min-height: 72px !important;
        font-size: clamp(15px, 4.6vw, 18px) !important;
    }
}


/* ==================================================================
   LLU 5.1.20 – original-style menu drift toward the sticky logo
   ================================================================== */

/*
   Source parity with LLU.zip:
   - menu begins centred
   - while scrolling toward the sticky point it moves progressively right
   - the white logo fades in shortly before the sticky point
   - once sticky, the established LLU navigation geometry remains in place

   JS only supplies two CSS variables:
     --llu-nav-receive-space
     --llu-nav-logo-progress
*/

/* Override the previous abrupt sticky-only padding with a continuously
   changing value. Because the track remains justify-content:center, the
   menu shifts smoothly while keeping its own width/count logic untouched. */
body.llu-home .llu-scroll-nav--home .llu-nav-track {
    padding-left: var(--llu-nav-receive-space, 0px) !important;
    box-sizing: border-box !important;
}

/* Keep the established desktop right breathing room only after sticking. */
@media (min-width: 901px) {
    body > .llu-scroll-nav--home.is-stuck .llu-nav-track {
        padding-right: 16px !important;
    }
}

/* Before sticky state the original logo starts appearing only near the end
   of the horizontal travel. It is visual only until the bar becomes sticky. */
body.llu-home .llu-scroll-nav--home.is-receiving-logo:not(.is-stuck) .llu-nav-sticky-tools {
    display: flex !important;
    opacity: var(--llu-nav-logo-progress, 0) !important;
    visibility: visible !important;
    pointer-events: none !important;
}

/* Sticky state finishes the logo reception at full opacity. */
body > .llu-scroll-nav--home.is-stuck .llu-nav-sticky-tools {
    opacity: 1 !important;
}

/* Movement is driven by scroll position rather than a time-based animation,
   so it tracks the user's wheel/touch movement exactly. */
body.llu-home .llu-scroll-nav--home .llu-nav-track,
body.llu-home .llu-scroll-nav--home .llu-nav-sticky-tools {
    will-change: padding-left, opacity;
}

@media (prefers-reduced-motion: reduce) {
    body.llu-home .llu-scroll-nav--home .llu-nav-track,
    body.llu-home .llu-scroll-nav--home .llu-nav-sticky-tools {
        will-change: auto;
    }
}


/* ==================================================================
   LLU 5.1.21 – stable logo reception position aligned to content heading
   ================================================================== */

/*
   The logo must not fade in at one X-position and jump when the navigation
   becomes fixed. Use one shared horizontal anchor for both states.

   Desktop anchor follows LLU's existing 984px content/heading axis:
       .llu-content-narrow = 984px  ->  left edge = 50% - 492px
*/

/* Approach/fade phase before sticky. */
@media (min-width: 901px) {
    body.llu-home .llu-scroll-nav--home.is-receiving-logo:not(.is-stuck)
        .llu-nav-sticky-tools {
        left: max(24px, calc(50% - 492px)) !important;
    }

    /* Exact same coordinate after JS moves the nav below <body>. */
    body > .llu-scroll-nav--home.is-stuck .llu-nav-sticky-tools {
        left: max(24px, calc(50% - 492px)) !important;
    }
}

/* Tablet: keep the same no-jump principle, aligned with LLU's responsive
   content gutter instead of sticking to the viewport edge. */
@media (min-width: 768px) and (max-width: 900px) {
    body.llu-home .llu-scroll-nav--home.is-receiving-logo:not(.is-stuck)
        .llu-nav-sticky-tools,
    body > .llu-scroll-nav--home.is-stuck .llu-nav-sticky-tools {
        left: clamp(18px, 4vw, 32px) !important;
    }
}

/* Mobile: modest inset, identical before/after sticky. */
@media (max-width: 767.98px) {
    body.llu-home .llu-scroll-nav--home.is-receiving-logo:not(.is-stuck)
        .llu-nav-sticky-tools,
    body > .llu-scroll-nav--home.is-stuck .llu-nav-sticky-tools {
        left: 14px !important;
    }
}


/* ==================================================================
   LLU 5.1.24 – native Smartstore homepage controllers, LLU presentation
   ==================================================================

   Data/visibility authority stays in Smartstore:
   - HomepageCategories: ShowOnHomePage + ACL + store mapping
   - HomepageProducts: product ShowOnHomePage + ACL + store mapping
   - HomepageBestSellers: CatalogSettings
   - HomepageManufacturers: CatalogSettings
   - PopularProductTags: CatalogSettings
   - HomePageNews: NewsSettings + store/language
   - HomePagePolls: Poll settings/model
   - RecentlyViewedProductsBlock: CatalogSettings

   The LLU theme owns presentation only. Homepage catalogue blocks therefore
   read like an editorial horse/farm site, not like a conventional shop.
*/

body.llu-home {
    --llu-editorial-ink: #2f2f2f;
    --llu-editorial-muted: #737373;
    --llu-editorial-line: rgba(47,47,47,.16);
    --llu-editorial-paper: #f7f7f7;
    --llu-editorial-warm: #d9c0a2;
    --llu-editorial-blue: #538597;
}

/* Existing LLU.Startseite.Pferde data still contains the five historical,
   hard-coded <h3> labels. They are migration artefacts now: real category
   names come from Catalog.HomepageCategories. Keep only the editable prose. */
body.llu-home .llu-sale-editorial-intro .topic-html-content-body h3 {
    display: none !important;
}

body.llu-home .llu-sale-editorial-intro {
    width: min(100%, 1120px);
    margin: 0 0 clamp(34px, 5vw, 64px);
    color: var(--llu-editorial-ink);
}

body.llu-home .llu-sale-editorial-intro .topic-html-content-body {
    font-size: clamp(16px, 1.25vw, 19px);
    line-height: 1.65;
}

/* Native action slots get no shop chrome of their own. */
body.llu-home .llu-native-home-slot {
    margin: 0;
    padding: 0;
}

body.llu-home .llu-native-home-slot + .llu-native-home-slot {
    margin-top: clamp(44px, 6vw, 86px);
}

body.llu-home .llu-native-heading {
    margin: clamp(42px, 6vw, 82px) 0 26px;
    padding-top: 22px;
    border-top: 1px solid var(--llu-editorial-line);
    color: var(--llu-editorial-ink);
    font-family: "Trebuchet MS", Trebuchet, Tahoma, Arial, sans-serif;
    font-size: clamp(21px, 2.4vw, 31px);
    line-height: 1.2;
    font-weight: 400;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* ---------------- Homepage categories: compact editorial links ----------------
   All homepage categories remain together in Verkauf. They are intentionally
   quieter than product cards: small visual references, not shop category tiles.
*/

body.llu-home .llu-native-home-slot--categories {
    margin-top: clamp(22px, 3vw, 34px);
}

body.llu-home .llu-home-categories {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(10px, 1.25vw, 16px);
}

body.llu-home .llu-category-card,
body.llu-home .llu-category-card:last-child:nth-child(odd) {
    min-width: 0;
    margin: 0;
    grid-column: auto;
    background: #dedbd6;
    overflow: hidden;
}

body.llu-home .llu-category-card-link,
body.llu-home .llu-category-card:last-child:nth-child(odd) .llu-category-card-link {
    position: relative;
    display: block;
    min-height: 0;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    color: #fff !important;
    text-decoration: none !important;
}

body.llu-home .llu-category-card-media {
    position: absolute;
    inset: 0;
    margin: 0;
    background:
        linear-gradient(135deg, rgba(83,133,151,.72), rgba(189,127,70,.58));
}

body.llu-home .llu-category-card-media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transform: scale(1.001);
    filter: saturate(.84) contrast(.96);
    transition: transform .35s ease, filter .35s ease;
}

body.llu-home .llu-category-card-shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to top, rgba(18,18,18,.68) 0%, rgba(18,18,18,.17) 58%, rgba(18,18,18,.03) 100%);
}

body.llu-home .llu-category-card-copy {
    position: absolute;
    z-index: 2;
    left: clamp(11px, 1.4vw, 17px);
    right: clamp(10px, 1.3vw, 16px);
    bottom: clamp(10px, 1.25vw, 15px);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 9px;
}

body.llu-home .llu-category-card-copy h3 {
    margin: 0;
    max-width: calc(100% - 24px);
    color: #fff !important;
    font-family: "Trebuchet MS", Trebuchet, Tahoma, Arial, sans-serif;
    font-size: clamp(13px, 1.25vw, 17px);
    line-height: 1.13;
    font-weight: 400;
    letter-spacing: .025em;
    text-transform: uppercase;
    text-shadow: 0 1px 8px rgba(0,0,0,.28);
}

body.llu-home .llu-category-card-arrow {
    flex: 0 0 auto;
    font-size: clamp(15px, 1.35vw, 19px);
    line-height: 1;
    opacity: .82;
    transform: translateX(0);
    transition: transform .2s ease, opacity .2s ease;
}

body.llu-home .llu-category-card-link:hover .llu-category-card-media img,
body.llu-home .llu-category-card-link:focus .llu-category-card-media img {
    transform: scale(1.025);
    filter: saturate(.94) contrast(1);
}

body.llu-home .llu-category-card-link:hover .llu-category-card-arrow,
body.llu-home .llu-category-card-link:focus .llu-category-card-arrow {
    transform: translateX(3px);
    opacity: 1;
}

body.llu-home .llu-category-card-link:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -4px;
}

/* ---------------- Featured/bestseller/recent products ----------------
   Deliberately no cart buttons on the LLU homepage. The native controller
   still decides which products exist; the detail page owns commerce actions.
*/

body.llu-home .llu-product-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(20px, 2.6vw, 38px);
}

body.llu-home .llu-product-card {
    min-width: 0;
    margin: 0;
    background: transparent;
}

body.llu-home .llu-product-card-link {
    height: 100%;
    display: flex;
    flex-direction: column;
    color: var(--llu-editorial-ink) !important;
    text-decoration: none !important;
}

body.llu-home .llu-product-card-media {
    position: relative;
    aspect-ratio: 4 / 3;
    margin: 0;
    overflow: hidden;
    background: #e7e4df;
}

body.llu-home .llu-product-card-media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .45s ease;
}

body.llu-home .llu-product-card-shade {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to top, rgba(0,0,0,.14), rgba(0,0,0,0) 45%);
}

body.llu-home .llu-product-card-copy {
    flex: 1 1 auto;
    padding: 19px 0 7px;
    border-bottom: 1px solid var(--llu-editorial-line);
}

body.llu-home .llu-product-card-copy h3 {
    margin: 0 0 9px;
    color: var(--llu-editorial-ink) !important;
    font-size: clamp(19px, 1.7vw, 26px);
    line-height: 1.15;
    font-weight: 400;
}

body.llu-home .llu-product-card-description {
    margin: 0 0 13px;
    color: var(--llu-editorial-muted);
    font-size: 15px;
    line-height: 1.5;
}

body.llu-home .llu-product-card-price {
    margin: 10px 0 0;
    color: var(--llu-editorial-blue);
    font-size: 16px;
    font-weight: 400;
}

body.llu-home .llu-product-card-more {
    margin-top: 14px;
    display: inline-block;
    color: var(--llu-editorial-ink);
    font-size: 14px;
    letter-spacing: .025em;
}

body.llu-home .llu-product-card-link:hover .llu-product-card-media img,
body.llu-home .llu-product-card-link:focus .llu-product-card-media img {
    transform: scale(1.03);
}

/* ---------------- Züchter / Hersteller ---------------- */

body.llu-home .llu-manufacturer-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid var(--llu-editorial-line);
}

body.llu-home .llu-manufacturer-card {
    min-height: 122px;
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    border-right: 1px solid var(--llu-editorial-line);
    border-bottom: 1px solid var(--llu-editorial-line);
    color: var(--llu-editorial-ink) !important;
    text-align: center;
    text-decoration: none !important;
}

body.llu-home .llu-manufacturer-card:nth-child(4n) {
    border-right: 0;
}

body.llu-home .llu-manufacturer-media {
    width: 62px;
    height: 62px;
    flex: 0 0 62px;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.llu-home .llu-manufacturer-media img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

body.llu-home .llu-manufacturer-name {
    font-size: 16px;
    line-height: 1.25;
}

body.llu-home .llu-manufacturer-card:hover,
body.llu-home .llu-manufacturer-card:focus {
    background: rgba(83,133,151,.08);
}

/* ---------------- Product tags: quiet editorial links ---------------- */

body.llu-home .llu-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 9px 11px;
}

body.llu-home .llu-tag-link {
    padding: 9px 13px;
    border: 1px solid rgba(83,133,151,.38);
    color: #426b79 !important;
    font-size: 14px;
    line-height: 1.2;
    text-decoration: none !important;
}

body.llu-home .llu-tag-link:hover,
body.llu-home .llu-tag-link:focus {
    border-color: #565656;
    background: #565656;
    color: #fff !important;
}

/* ---------------- Native HomePageNews, LLU editorial dark split ---------------- */

body.llu-home .llu-news-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(34px, 6vw, 96px);
}

body.llu-home .llu-news-card {
    min-width: 0;
    margin: 0;
}

body.llu-home .llu-news-card-link {
    height: 100%;
    display: flex;
    flex-direction: column;
    color: #fff !important;
    text-decoration: none !important;
}

body.llu-home .llu-news-card-media {
    aspect-ratio: 16 / 10;
    margin: 0 0 25px;
    overflow: hidden;
    background: rgba(255,255,255,.04);
}

body.llu-home .llu-news-card-media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .5s ease;
}

body.llu-home .llu-news-card-copy {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

body.llu-home .llu-news-card-date {
    margin-bottom: 10px;
    color: #d9c0a2;
    font-size: 14px;
}

body.llu-home .llu-news-card-title {
    margin: 0 0 14px;
    color: #fff !important;
    font-size: clamp(22px, 2.3vw, 31px);
    line-height: 1.18;
    font-weight: 400;
}

body.llu-home .llu-news-card-description {
    color: var(--llu-copy-dark);
    font-size: 16px;
    line-height: 1.6;
}

body.llu-home .llu-news-card-description p:last-child {
    margin-bottom: 0;
}

body.llu-home .llu-news-card-more {
    margin-top: auto;
    padding-top: 22px;
    color: #fff;
    font-size: 14px;
    letter-spacing: .03em;
}

body.llu-home .llu-news-card-link:hover .llu-news-card-media img,
body.llu-home .llu-news-card-link:focus .llu-news-card-media img {
    transform: scale(1.025);
}

body.llu-home .llu-news-all {
    margin-top: clamp(30px, 5vw, 58px);
    display: flex;
    justify-content: center;
}

body.llu-home .llu-outline-link {
    min-width: 180px;
    padding: 12px 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border: 1px solid rgba(217,192,162,.86);
    color: #fff !important;
    text-decoration: none !important;
}

body.llu-home .llu-outline-link:hover,
body.llu-home .llu-outline-link:focus {
    background: #d9c0a2;
    color: #131313 !important;
}

/* ---------------- Polls ---------------- */

body.llu-home .llu-section--community {
    background: #efece7;
    color: var(--llu-editorial-ink);
}

body.llu-home .llu-section--community .llu-native-heading {
    margin-top: 0;
}

body.llu-home .llu-poll-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(18px, 2.5vw, 34px);
}

body.llu-home .llu-poll-item .card,
body.llu-home .llu-poll-item .block {
    height: 100%;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: rgba(255,255,255,.72) !important;
}

body.llu-home .llu-poll-item .card-header,
body.llu-home .llu-poll-item .block-title {
    border-radius: 0 !important;
    background: transparent !important;
}

/* ---------------- Recently viewed: low emphasis, no shop carousel chrome ---------------- */

body.llu-home .llu-section--recent {
    padding-top: 44px;
    padding-bottom: 56px;
    background: #fff;
}

body.llu-home .llu-section--recent .llu-native-heading {
    margin-top: 0;
}

body.llu-home .llu-product-cards--recent {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}


/* ---------------- LLU Content Slider ----------------
   SmartStore.ContentSlider stays unmodified and continues to use its native
   "content_before" widget zone. The LLU layout only relocates that zone on
   Home/Index. Visual language follows the existing LLU menu:
   left outer menu colour  = #DEC6A7
   right outer menu colour = #477687
*/

body.llu-home .llu-slider-slot {
    position: relative;
    width: 100%;
    margin: 0;
    padding: clamp(24px, 4vw, 42px) 0;
    background: #131313;
    overflow: hidden;
}

body.llu-home .llu-slider-slot .container {
    max-width: 1024px;
}

body.llu-home .llu-slider-slot .carousel {
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background-color: #171717 !important;
    color: #fff !important;
}

/* The plugin can set slide/carousel backgrounds inline. The LLU theme keeps
   the surface dark and only adds a restrained darkening over background images. */
body.llu-home .llu-slider-slot .carousel .carousel-item {
    background-color: #171717 !important;
    box-shadow: inset 0 0 0 9999px rgba(19,19,19,.30);
}

body.llu-home .llu-slider-slot .carousel .carousel-item,
body.llu-home .llu-slider-slot .carousel .carousel-item h1,
body.llu-home .llu-slider-slot .carousel .carousel-item h2,
body.llu-home .llu-slider-slot .carousel .carousel-item h3,
body.llu-home .llu-slider-slot .carousel .carousel-item h4,
body.llu-home .llu-slider-slot .carousel .carousel-item h5,
body.llu-home .llu-slider-slot .carousel .carousel-item h6,
body.llu-home .llu-slider-slot .carousel .carousel-item p,
body.llu-home .llu-slider-slot .carousel .carousel-item .slide-title,
body.llu-home .llu-slider-slot .carousel .carousel-item .slide-title a,
body.llu-home .llu-slider-slot .carousel .carousel-item .slide-subtitle,
body.llu-home .llu-slider-slot .carousel .carousel-item a:not(.btn),
body.llu-home .llu-slider-slot .carousel .carousel-item .prices,
body.llu-home .llu-slider-slot .carousel .carousel-item .price,
body.llu-home .llu-slider-slot .carousel.dark .carousel-item,
body.llu-home .llu-slider-slot .carousel.bright .carousel-item {
    color: rgba(255,255,255,.96) !important;
    text-shadow: 0 1px 7px rgba(0,0,0,.55);
}

body.llu-home .llu-slider-slot .carousel .carousel-item .slide-subtitle,
body.llu-home .llu-slider-slot .carousel .carousel-item .text-muted,
body.llu-home .llu-slider-slot .carousel .carousel-item .old-product-price,
body.llu-home .llu-slider-slot .carousel .carousel-item .old-product-price .price {
    color: rgba(255,255,255,.76) !important;
}

body.llu-home .llu-slider-slot .product-slide .data .text-blend,
body.llu-home .llu-slider-slot .product-slide .data .text-blend:before {
    background: rgba(19,19,19,.30) !important;
}

body.llu-home .llu-slider-slot .product-slide .data .text-blend {
    border-color: rgba(255,255,255,.20) !important;
}

/* Generic/centred CTA: warm left-menu accent. */
body.llu-home .llu-slider-slot .carousel .btn,
body.llu-home .llu-slider-slot .carousel .btn-clear,
body.llu-home .llu-slider-slot .carousel .btn-clear-dark {
    border-radius: 0 !important;
    border: 1px solid #DEC6A7 !important;
    background: rgba(19,19,19,.22) !important;
    color: #F3E4CF !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

/* Product slide type 2 has its text/CTA on the RIGHT: use the right menu edge. */
body.llu-home .llu-slider-slot .slide-type-2 .product-slide-buttons .btn {
    border-color: #477687 !important;
    color: #C9D9E0 !important;
}

/* Product slide type 3 has its text/CTA on the LEFT: use the left menu edge. */
body.llu-home .llu-slider-slot .slide-type-3 .product-slide-buttons .btn {
    border-color: #DEC6A7 !important;
    color: #F3E4CF !important;
}

/* Common HTML template: if the CTA lives in the right half, echo the right menu. */
body.llu-home .llu-slider-slot .html-slide .row > [class*="col-"]:last-child .btn {
    border-color: #477687 !important;
    color: #C9D9E0 !important;
}

body.llu-home .llu-slider-slot .carousel .btn:hover,
body.llu-home .llu-slider-slot .carousel .btn:focus,
body.llu-home .llu-slider-slot .carousel .btn-clear:hover,
body.llu-home .llu-slider-slot .carousel .btn-clear:focus,
body.llu-home .llu-slider-slot .carousel .btn-clear-dark:hover,
body.llu-home .llu-slider-slot .carousel .btn-clear-dark:focus,
body.llu-home .llu-slider-slot .slide-type-3 .product-slide-buttons .btn:hover,
body.llu-home .llu-slider-slot .slide-type-3 .product-slide-buttons .btn:focus {
    background: #DEC6A7 !important;
    border-color: #DEC6A7 !important;
    color: #252525 !important;
}

body.llu-home .llu-slider-slot .slide-type-2 .product-slide-buttons .btn:hover,
body.llu-home .llu-slider-slot .slide-type-2 .product-slide-buttons .btn:focus,
body.llu-home .llu-slider-slot .html-slide .row > [class*="col-"]:last-child .btn:hover,
body.llu-home .llu-slider-slot .html-slide .row > [class*="col-"]:last-child .btn:focus {
    background: #477687 !important;
    border-color: #477687 !important;
    color: #fff !important;
}

/* Indicator dots deliberately combine both outer menu colours. */
body.llu-home .llu-slider-slot .carousel-indicators li {
    border: 0 !important;
    background:
        linear-gradient(
            90deg,
            #DEC6A7 0,
            #DEC6A7 50%,
            #477687 50%,
            #477687 100%
        ) !important;
    opacity: .50;
    box-shadow: 0 0 0 1px rgba(255,255,255,.12);
}

body.llu-home .llu-slider-slot .carousel-indicators .active {
    opacity: 1;
    box-shadow: 0 0 0 2px rgba(255,255,255,.70);
}

/* Prev/next controls mirror the far left and far right colours of the LLU menu. */
body.llu-home .llu-slider-slot .carousel-control.left {
    background-color: #DEC6A7 !important;
    color: #2F2F2F !important;
}

body.llu-home .llu-slider-slot .carousel-control.right {
    background-color: #477687 !important;
    color: #fff !important;
}

body.llu-home .llu-slider-slot .carousel-control.left:hover,
body.llu-home .llu-slider-slot .carousel-control.left:focus {
    background-color: #E9CEAC !important;
    color: #202020 !important;
}

body.llu-home .llu-slider-slot .carousel-control.right:hover,
body.llu-home .llu-slider-slot .carousel-control.right:focus {
    background-color: #538597 !important;
    color: #fff !important;
}

body.llu-home .llu-slider-slot .carousel-control .icon-prev,
body.llu-home .llu-slider-slot .carousel-control .icon-next {
    color: currentColor !important;
    text-shadow: none !important;
}

/* Admin edit affordance stays readable without changing the public visual logic. */
body.llu-home .llu-slider-slot .admin-edit-slide {
    border-color: rgba(255,255,255,.42) !important;
    color: #fff !important;
    background: rgba(19,19,19,.48) !important;
}

@media (max-width: 767.98px) {
    body.llu-home .llu-slider-slot {
        padding-top: 18px;
        padding-bottom: 18px;
    }
}

/* Smartstore's development/debug Widget Zone badges must remain readable on
   the LLU homepage, including dark images and transparent widget backgrounds. */
body.llu-home .widget-zone-info,
body.llu-home .badge.widget-zone-info,
body.llu-home .badge-default.widget-zone-info {
    color: #fff !important;
    background: rgba(24,24,24,.50) !important;
    border-color: rgba(255,255,255,.38) !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.55);
}

/* Widget output stays inside the LLU rhythm without forcing a visual style.
   Plugins remain free to render their own content, but inherited shop margins
   must not create boxed islands on the homepage. */
body.llu-home [class*="widget-zone"] {
    max-width: 100%;
}

/* Responsive */
@media (max-width: 1100px) {
    body.llu-home .llu-product-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.llu-home .llu-product-cards--recent {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    body.llu-home .llu-manufacturer-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    body.llu-home .llu-manufacturer-card:nth-child(4n) {
        border-right: 1px solid var(--llu-editorial-line);
    }

    body.llu-home .llu-manufacturer-card:nth-child(3n) {
        border-right: 0;
    }
}

@media (max-width: 767.98px) {
    body.llu-home .llu-home-categories {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    body.llu-home .llu-news-grid {
        grid-template-columns: minmax(0, 1fr);
    }


    body.llu-home .llu-product-cards,
    body.llu-home .llu-product-cards--recent {
        grid-template-columns: minmax(0, 1fr);
    }

    body.llu-home .llu-manufacturer-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.llu-home .llu-manufacturer-card:nth-child(3n) {
        border-right: 1px solid var(--llu-editorial-line);
    }

    body.llu-home .llu-manufacturer-card:nth-child(2n) {
        border-right: 0;
    }

    body.llu-home .llu-poll-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 420px) {
    body.llu-home .llu-home-categories {
        grid-template-columns: minmax(0, 1fr);
    }

    body.llu-home .llu-category-card-link,
    body.llu-home .llu-category-card:last-child:nth-child(odd) .llu-category-card-link {
        aspect-ratio: 16 / 7;
    }
}

@media (max-width: 480px) {
    body.llu-home .llu-manufacturer-list {
        grid-template-columns: minmax(0, 1fr);
    }

    body.llu-home .llu-manufacturer-card,
    body.llu-home .llu-manufacturer-card:nth-child(n) {
        border-right: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.llu-home .llu-category-card-media img,
    body.llu-home .llu-category-card-arrow,
    body.llu-home .llu-product-card-media img,
    body.llu-home .llu-news-card-media img {
        transition: none !important;
    }
}


/* ==================================================================
   LLU 5.1.30 – dark homepage canvas + fluid ContentSlider typography
   ==================================================================

   The ContentSlider plugin still owns slide data, height, autoplay and markup.
   LLU only adapts the visual surface. Transparent/empty Smartstore homepage
   areas now inherit the same dark split already used by News/Pferdezucht/
   Viehzucht instead of exposing Flex's white page canvas.
*/

body.llu-home,
body.llu-home #page,
body.llu-home .page-main,
body.llu-home #content-wrapper,
body.llu-home #content,
body.llu-home #content-body,
body.llu-home #content-center,
body.llu-home .llu-home-shell,
body.llu-home .llu-home-shell > .page-body {
    background-color: var(--llu-dark-left, #131313) !important;
    background-image:
        linear-gradient(
            to right,
            var(--llu-dark-left, #131313) 0%,
            var(--llu-dark-left, #131313) 50%,
            var(--llu-dark-right, #201F1D) 50%,
            var(--llu-dark-right, #201F1D) 100%
        ) !important;
}

/* Do not disturb intentionally designed surfaces. Their existing explicit
   backgrounds remain authoritative because these rules are more specific. */
body.llu-home .llu-legacy-hero,
body.llu-home .llu-section,
body.llu-home .llu-original-photo,
body.llu-home .llu-original-divider,
body.llu-home .llu-footer,
body.llu-home #footer {
    background-image: revert;
}

/* ContentSlider: fluid type scale matching the LLU homepage instead of the
   plugin/shop defaults. Values stay bounded so a 350px admin-defined slide
   does not become unusable on narrow or very wide screens. */
body.llu-home .llu-slider-slot .carousel {
    font-size: clamp(0.94rem, 0.84rem + 0.28vw, 1.12rem) !important;
    line-height: 1.55;
}

body.llu-home .llu-slider-slot .carousel .carousel-item h1,
body.llu-home .llu-slider-slot .carousel .carousel-item .h1 {
    font-size: clamp(2rem, 1.35rem + 2.25vw, 3.6rem) !important;
    line-height: 1.08 !important;
}

body.llu-home .llu-slider-slot .carousel .carousel-item h2,
body.llu-home .llu-slider-slot .carousel .carousel-item .h2,
body.llu-home .llu-slider-slot .carousel .carousel-item .slide-title {
    font-size: clamp(1.7rem, 1.20rem + 1.75vw, 3rem) !important;
    line-height: 1.12 !important;
}

body.llu-home .llu-slider-slot .carousel .carousel-item h3,
body.llu-home .llu-slider-slot .carousel .carousel-item .h3 {
    font-size: clamp(1.4rem, 1.08rem + 1.05vw, 2.2rem) !important;
    line-height: 1.16 !important;
}

body.llu-home .llu-slider-slot .carousel .carousel-item h4,
body.llu-home .llu-slider-slot .carousel .carousel-item .h4 {
    font-size: clamp(1.18rem, 1.02rem + 0.55vw, 1.65rem) !important;
    line-height: 1.2 !important;
}

body.llu-home .llu-slider-slot .carousel .carousel-item p,
body.llu-home .llu-slider-slot .carousel .carousel-item .slide-subtitle,
body.llu-home .llu-slider-slot .carousel .carousel-item li {
    font-size: clamp(0.95rem, 0.87rem + 0.28vw, 1.14rem) !important;
    line-height: clamp(1.45, 1.38 + 0.15vw, 1.62) !important;
}

body.llu-home .llu-slider-slot .carousel .carousel-item .price,
body.llu-home .llu-slider-slot .carousel .carousel-item .prices {
    font-size: clamp(1.08rem, 0.94rem + 0.62vw, 1.55rem) !important;
    line-height: 1.2 !important;
}

/* CTA text follows the same fluid scale. The small admin edit button is
   deliberately excluded below so its UI size remains predictable. */
body.llu-home .llu-slider-slot .carousel .btn:not(.admin-edit-slide) {
    font-size: clamp(0.86rem, 0.80rem + 0.22vw, 1rem) !important;
    line-height: 1.25 !important;
    padding: clamp(0.58rem, 0.50rem + 0.20vw, 0.76rem)
             clamp(0.90rem, 0.72rem + 0.55vw, 1.30rem) !important;
}

body.llu-home .llu-slider-slot .admin-edit-slide {
    font-size: 0.75rem !important;
}

/* Lists inside free HTML slides should look editorial, not like Bootstrap's
   default shop content. Their markers echo the LLU menu colours. */
body.llu-home .llu-slider-slot .html-slide ul,
body.llu-home .llu-slider-slot .html-slide ol {
    padding-left: 1.35em;
}

body.llu-home .llu-slider-slot .html-slide li::marker {
    color: #DEC6A7;
}

body.llu-home .llu-slider-slot .html-slide ol li::marker {
    color: #477687;
    font-weight: 700;
}

/* Empty native widget zones should not create visible white strips on the
   homepage. Debug badges remain readable via the existing white badge rule. */
body.llu-home .llu-home-shell > .page-body > .widget-zone,
body.llu-home .llu-home-shell > .page-body > [data-widget-zone] {
    background: transparent !important;
}

@media (max-width: 575.98px) {
    body.llu-home .llu-slider-slot .carousel .carousel-item h1,
    body.llu-home .llu-slider-slot .carousel .carousel-item .h1 {
        font-size: clamp(1.75rem, 8vw, 2.35rem) !important;
    }

    body.llu-home .llu-slider-slot .carousel .carousel-item h2,
    body.llu-home .llu-slider-slot .carousel .carousel-item .h2,
    body.llu-home .llu-slider-slot .carousel .carousel-item .slide-title {
        font-size: clamp(1.45rem, 7vw, 2rem) !important;
    }
}


/* ==================================================================
   LLU 5.1.31 – truly responsive ContentSlider width/content
   ==================================================================
   SmartStore.ContentSlider's stock templates use fixed Bootstrap visibility
   classes and a constrained inner container. On LLU Home the slider may use
   all available width, while smaller viewports stack content instead of hiding it.
*/

body.llu-home .llu-slider-slot,
body.llu-home .llu-slider-slot .carousel,
body.llu-home .llu-slider-slot .carousel-inner,
body.llu-home .llu-slider-slot .carousel-item {
    width: 100% !important;
    max-width: none !important;
}

body.llu-home .llu-slider-slot .carousel > .container,
body.llu-home .llu-slider-slot .carousel-item > .container,
body.llu-home .llu-slider-slot .html-slide > .container,
body.llu-home .llu-slider-slot .product-slide > .container,
body.llu-home .llu-slider-slot .slide-type-1,
body.llu-home .llu-slider-slot .slide-type-2,
body.llu-home .llu-slider-slot .slide-type-3,
body.llu-home .llu-slider-slot .slide-type-4 {
    width: 100% !important;
    max-width: none !important;
    padding-left: clamp(1rem, 3.5vw, 3rem) !important;
    padding-right: clamp(1rem, 3.5vw, 3rem) !important;
    box-sizing: border-box;
}

body.llu-home .llu-slider-slot .carousel .row {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    flex-wrap: wrap;
}

body.llu-home .llu-slider-slot .carousel .row > [class*="col-"] {
    min-width: 0;
}

/* Media must shrink with its column instead of forcing horizontal overflow. */
body.llu-home .llu-slider-slot .carousel img,
body.llu-home .llu-slider-slot .carousel .picture,
body.llu-home .llu-slider-slot .carousel .picture-container {
    max-width: 100% !important;
}

body.llu-home .llu-slider-slot .carousel img {
    height: auto;
    object-fit: contain;
}

/* Below lg the stock HTML template hides the complete text column.
   LLU keeps it visible and stacks picture + copy so nothing disappears. */
@media (max-width: 991.98px) {
    body.llu-home .llu-slider-slot .html-slide .d-none.d-lg-block,
    body.llu-home .llu-slider-slot .product-slide .d-none.d-lg-block {
        display: block !important;
    }

    body.llu-home .llu-slider-slot .html-slide .row > [class*="col-"],
    body.llu-home .llu-slider-slot .slide-type-2 .row > [class*="col-"],
    body.llu-home .llu-slider-slot .slide-type-3 .row > [class*="col-"] {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
    }

    /* Inline 350px heights from the plugin are useful on desktop, but would
       clip stacked content on tablet/mobile. Allow natural height here. */
    body.llu-home .llu-slider-slot .carousel,
    body.llu-home .llu-slider-slot .carousel-inner,
    body.llu-home .llu-slider-slot .carousel-item {
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
    }

    body.llu-home .llu-slider-slot .carousel-item > .container,
    body.llu-home .llu-slider-slot .html-slide > .container,
    body.llu-home .llu-slider-slot .product-slide > .container {
        height: auto !important;
        min-height: 0 !important;
    }

    body.llu-home .llu-slider-slot .html-slide .row,
    body.llu-home .llu-slider-slot .product-slide .row {
        height: auto !important;
        max-height: none !important;
    }

    body.llu-home .llu-slider-slot .html-slide .picture-container,
    body.llu-home .llu-slider-slot .product-slide .picture-container {
        padding-bottom: clamp(0.75rem, 2vw, 1.25rem);
    }

    body.llu-home .llu-slider-slot .html-slide .picture-container img,
    body.llu-home .llu-slider-slot .product-slide .picture-container img {
        display: block;
        width: auto;
        max-width: 100% !important;
        max-height: clamp(210px, 48vw, 360px);
        margin-left: auto;
        margin-right: auto;
    }
}

/* Below md the plugin also hides subtitles and CTA blocks.
   Keep them available on LLU; width and auto-height above prevent clipping. */
@media (max-width: 767.98px) {
    body.llu-home .llu-slider-slot .product-slide .d-none.d-md-block,
    body.llu-home .llu-slider-slot .html-slide .d-none.d-md-block {
        display: block !important;
    }

    body.llu-home .llu-slider-slot .carousel-item {
        padding-top: 0.5rem;
        padding-bottom: 0.75rem;
    }

    body.llu-home .llu-slider-slot .carousel .data,
    body.llu-home .llu-slider-slot .html-slide .row > [class*="col-"] {
        text-align: left !important;
    }
}


/* LLU 5.1.34 – menu anchor before ContentSlider.
   llu.js computes the actual sticky-navigation offset for hash targets. */
body.llu-home .llu-scroll-anchor {
    display: block;
    width: 100%;
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    pointer-events: none;
}


/* ==================================================================
   LLU 5.1.35 – Contact CTA scroll reveal
   ==================================================================
   Progressive enhancement only: JS adds .llu-cta-reveal-ready immediately
   before IntersectionObserver starts. Without JS/observer the links stay
   fully visible and usable.
*/
body.llu-home .llu-horses-contact-cta.llu-cta-reveal-ready,
body.llu-home .llu-livestock-contact-cta.llu-cta-reveal-ready {
    opacity: 0;
    transform: translate3d(clamp(72px, 8vw, 150px), 0, 0);
    will-change: transform, opacity;
    transition:
        transform .82s cubic-bezier(.22, .78, .22, 1),
        opacity .52s ease-out,
        background-color .15s ease,
        color .15s ease;
}

body.llu-home .llu-horses-contact-cta.llu-cta-reveal-ready.is-revealed,
body.llu-home .llu-livestock-contact-cta.llu-cta-reveal-ready.is-revealed {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    will-change: auto;
}

/* Keyboard focus must never leave a still-hidden CTA inaccessible. */
body.llu-home .llu-horses-contact-cta.llu-cta-reveal-ready:focus,
body.llu-home .llu-livestock-contact-cta.llu-cta-reveal-ready:focus {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* Respect the OS/browser accessibility preference. */
@media (prefers-reduced-motion: reduce) {
    body.llu-home .llu-horses-contact-cta.llu-cta-reveal-ready,
    body.llu-home .llu-livestock-contact-cta.llu-cta-reveal-ready {
        opacity: 1;
        transform: none;
        transition:
            background-color .15s ease,
            color .15s ease;
        will-change: auto;
    }
}


/* ==================================================================
   LLU 5.1.37 – white native Smartstore area after VERKAUF
   ================================================================== */

/*
   Keep the global LLU homepage canvas dark/split because News, Pferdezucht
   and Viehzucht intentionally rely on it. Only the native Smartstore area
   after VERKAUF (polls + home_page_after_polls) becomes white, matching the
   following transition/contact-image region.
*/
body.llu-home .llu-post-sale-white {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    background: #fff !important;
    color: #474747;
    box-sizing: border-box;
}

body.llu-home .llu-post-sale-white-inner {
    width: 100%;
    max-width: 1680px;
    margin: 0 auto;
    padding: clamp(22px, 3vw, 48px) clamp(18px, 5vw, 88px);
    box-sizing: border-box;
    background: #fff !important;
}

/* If neither polls nor widgets render, do not manufacture an unnecessary
   white band; the following white/image transition can start immediately. */
body.llu-home .llu-post-sale-white-inner:empty {
    display: none;
}

/* Native Smartstore blocks/widgets in this area must not inherit the dark
   homepage fallback canvas. */
body.llu-home .llu-post-sale-white .block,
body.llu-home .llu-post-sale-white .widget-zone,
body.llu-home .llu-post-sale-white [data-widget-zone] {
    background-color: #fff !important;
}

/* Remove any accidental seam before the following contact image. */
body.llu-home .llu-post-sale-white + .llu-original-photo--after-sale {
    margin-top: 0 !important;
    border-top: 0 !important;
}

@media (max-width: 767.98px) {
    body.llu-home .llu-post-sale-white-inner {
        padding: 20px 16px;
    }
}


/* ==================================================================
   LLU 5.1.40 – inner Smartstore logo uses the accepted homepage axis
   ================================================================== */

/*
   The shared navigation markup is already correct. Older inner-page rules
   still pinned the logo to 8px/0px. Override only that X coordinate so
   normal Smartstore pages use the same visual logo axis as the homepage.
   Menu sizing, navCount and dynamic News remain untouched.
*/
@media (min-width: 901px) {
    body:not(.llu-home) .llu-scroll-nav--inner.is-stuck .llu-nav-sticky-tools {
        left: max(24px, calc(50% - 492px)) !important;
    }
}

@media (min-width: 768px) and (max-width: 900px) {
    body:not(.llu-home) .llu-scroll-nav--inner.is-stuck .llu-nav-sticky-tools {
        left: clamp(18px, 4vw, 32px) !important;
    }
}

@media (max-width: 767.98px) {
    body:not(.llu-home) .llu-scroll-nav--inner.is-stuck .llu-nav-sticky-tools {
        left: 14px !important;
    }
}