/* ludwig-immobilien-gmbh.de — brand override, loaded after Base (page.includeCSS.duplikat in
   Configuration/Sets/Ludwig-immobilien/setup.typoscript). Runs as plain CSS, not through the
   Tailwind/Vite build — no SCSS, only native CSS custom properties + native CSS nesting.

   Approach: Base's Tailwind utilities (bg-primary-500, text-primary-500, .button, headings, …)
   read var(--color-primary-*) at paint time, so redeclaring those tokens here reskins every
   utility across the site without touching HTML/Fluid. Values below are read off the live
   https://www.ludwig-immobilien-gmbh.de (blue #3d60c4 / navy #100865) — which happen to already
   match this extension's existing --color-secondary-* tokens 1:1, so those are reused directly. */

:root {
    --color-primary-100: color-mix(in srgb, var(--color-primary-500), white 80%);
    --color-primary-300: color-mix(in srgb, var(--color-primary-500), white 40%);
    --color-primary-500: #3d60c4;
    --color-primary-700: #100865;
    --color-primary-900: color-mix(in srgb, var(--color-primary-500), black 60%);
    --container-default: 880px;
}

body {
    background: url(../../Images/Ludwigimmobilien/body.png) repeat-x left top;
}

/* Base uppercases h1-h6 (both the plain heading rule and the .prose-scoped one) — the old site
   sets its headlines in normal case. */
:is(h1, h2, h3, h4, h5, h6) {
    text-transform: none;

    .prose & {
        text-transform: none;
    }
}

[data-ctype="pxludwighausverwaltungen_banner"] > div {
    margin-top: 35px;

    & > div {
        padding-top: 0;
        border: none;
        & > div {
            border: 2px solid var(--color-primary-500);
        }
    }
}

[data-ctype="pxludwighausverwaltungen_banner"] [class*="aspect-"] {
    width: 880px;
    max-width: 100%;
    height: 313px;
}

[data-ctype="pxludwighausverwaltungen_banner"] [class*="aspect-"] > div {
    width: 876px;
    max-width: 100%;
    height: 309px;
    overflow: hidden;
}

.head {
    padding: 20px 15px 0 40px;
    max-width: 960px;

    .logo {
        width: 246px;
        height: 82px;
        background-image: url(../../Images/Ludwigimmobilien/Logo-LUDWIG-Immobilien.png);
        background-position: left top;
    }

    .nav {
        gap: 40px;
        li a {
            text-transform: none;
            color: var(--color-neutral-900);
        }
        li.active > a {
            color: var(--color-primary-500);
        }
    }
}

#content {
  padding: 20px 0 40px;
}

.foot {
    background-color: #b9b9b9;
}

/* Buttons: swap normal/hover background once (Base: bg-primary-500 normal, bg-primary-700 on
   hover) — here the darker navy is the resting state, the blue the hover state. */
:is(.button, input[type="submit"], button[type="submit"]) {
    background-color: var(--color-primary-700);
    font-size: 15px;
}
:is(.button, input[type="submit"], button[type="submit"]):is(:hover, :focus-visible) {
    background-color: var(--color-primary-500);
}

/* RTE body links (.prose a) read --tw-prose-links, which is itself set from --fg-accent — that
   token drives headings/accents broadly too, so it's overridden directly here rather than via
   the custom property, to touch only the link color. */
.prose :where(a):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    color: #261aa4;
}

[data-ctype="pxludwighausverwaltungen_teaser"] {
    margin-bottom: 25px;
}

[data-ctype="pxludwighausverwaltungen_teaser"] p {
    hyphens: auto;
    overflow-wrap: break-word;
}

[data-ctype="pxludwighausverwaltungen_teaser"] .grid > a {
    padding: 20px 10px 10px;
    justify-content: flex-start;
    gap: 10px;
}

[data-ctype="pxludwighausverwaltungen_teaser"] .grid img {
    max-width: 51px;
    width: auto;
    height: auto;
}

@media (width >= 1280px) {
    .head .nav {
        margin-right: 20px;
        & > li.active > a,
        & > li:hover > a,
        & > li:focus-within > a {
            color: var(--color-primary-500);
            background: url(../../Images/Ludwigimmobilien/nav-act2.png) no-repeat center bottom;
        }

        .subnav {
            top: 39px;
            background: #fff;
            border: none;
        }
    }
}