:root {
    --its-primary: #003f73;
    --its-secondary: #ffd400;
    --its-accent: #fff;
    --its-background: #fff;
    --its-surface: #f4f6f8;
    --its-text: #20262d;
    --its-link: #003f73;
    --its-header-bg: #fff;
    --its-header-text: #20262d;
    --its-footer-bg: #20262d;
    --its-footer-text: #fff;
    --its-content-width: 1100px;
    --its-site-width: 1240px;
}

*, *::before, *::after { box-sizing: border-box; }
body.its-site { margin: 0; background: var(--its-background); color: var(--its-text); font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }
a { color: var(--its-link); }
.its-site-width { width: min(calc(100% - 2rem), var(--its-site-width)); margin-inline: auto; }
.its-content-width { width: min(calc(100% - 2rem), var(--its-content-width)); margin-inline: auto; }
.its-topbar {
    background: var(--its-surface);
    color: var(--its-text);
    font-size: .925rem;
}
.its-topbar > .its-site-width {
    min-height: 2.35rem;
    display: flex;
    align-items: center;
}

.its-header {
    position: relative;
    background: var(--its-header-bg);
    color: var(--its-header-text);
    z-index: 20;
}
.its-header--sticky {
    position: sticky;
    top: 0;
}

.its-header__inner {
    min-height: 5.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(1.5rem, 3vw, 3rem);
}

.its-brand {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: .9rem;
    color: inherit;
    text-decoration: none;
    line-height: 1.1;
}
.its-brand:hover,
.its-brand:focus {
    color: inherit;
    text-decoration: none;
}
.its-brand__logo {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
}
.its-brand__logo img {
    display: block;
    width: auto;
    max-width: min(16rem, 34vw);
    max-height: 4rem;
}
.its-brand__text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .2rem;
}
.its-brand__name {
    display: block;
    font-size: clamp(1.15rem, 1.7vw, 1.55rem);
    font-weight: 750;
    letter-spacing: -.02em;
}
.its-brand__slogan {
    display: block;
    font-size: .9rem;
    font-weight: 450;
    opacity: .78;
    line-height: 1.25;
}

.its-brand--text-below {
    flex-direction: column;
    align-items: flex-start;
    gap: .45rem;
}
.its-brand--text-below .its-brand__text {
    width: 100%;
}

.its-header__nav-area {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    margin-left: auto;
}
.its-header__inner--brand-right .its-brand {
    order: 2;
}
.its-header__inner--brand-right .its-header__nav-area {
    order: 1;
    margin-left: 0;
    margin-right: auto;
    justify-content: flex-start;
}
.its-nav {
    min-width: 0;
}
.its-hero, .its-important, .its-section, .its-contact { width: 100%; }
.its-content-wrap { padding-block: 2.5rem; }
.its-content-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
.its-content-grid.has-left { grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr); }
.its-content-grid.has-right { grid-template-columns: minmax(0, 1fr) minmax(12rem, 16rem); }
.its-content-grid.has-left.has-right { grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr) minmax(12rem, 16rem); }
.its-footer { background: var(--its-footer-bg); color: var(--its-footer-text); padding-block: 2rem; }
.its-footer a { color: inherit; }
.its-footer__inner {
    padding-inline: 2rem;
}

.its-footer__meta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    column-gap: 2rem;
    row-gap: .35rem;
    align-items: center;
}

.its-footer__line {
    grid-column: 1;
    line-height: 1.45;
}

.its-footer__line--1 {
    grid-row: 1;
}

.its-footer__line--2 {
    grid-row: 2;
}

.its-footer__menu {
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: center;
    margin: 0;
}

@media (max-width: 800px) {
    .its-header__inner,
    .its-header__inner--brand-right {
        min-height: 4.5rem;
        flex-wrap: wrap;
        padding-block: .65rem;
        gap: .75rem 1rem;
    }

    /* Mobil bleibt Branding links/oben und Navigation folgt unabhängig von
       der gewählten Desktop-Anordnung. */
    .its-header__inner--brand-right .its-brand,
    .its-header__inner--brand-right .its-header__nav-area {
        order: initial;
    }

    .its-brand {
        max-width: calc(100% - 4rem);
        gap: .65rem;
    }
    .its-brand__logo img {
        max-width: 9rem;
        max-height: 3rem;
    }
    .its-brand__name {
        font-size: 1.05rem;
    }
    .its-brand__slogan {
        font-size: .78rem;
    }
    .its-brand--text-below {
        gap: .25rem;
    }

    .its-header__nav-area,
    .its-header__inner--brand-right .its-header__nav-area {
        width: 100%;
        margin: 0;
        justify-content: flex-start;
    }
    .its-nav {
        width: 100%;
    }

    .its-content-grid,
    .its-content-grid.has-left,
    .its-content-grid.has-right,
    .its-content-grid.has-left.has-right { grid-template-columns: 1fr; }
}
.its-align-left { text-align: left; }
.its-align-center { text-align: center; }
.its-align-right { text-align: right; }
.its-footer__menu .mod-menu { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; margin: 0; padding: 0; list-style: none; }
.its-footer__menu.its-align-left .mod-menu { justify-content: flex-start; }
.its-footer__menu.its-align-center .mod-menu { justify-content: center; }
.its-footer__menu.its-align-right .mod-menu { justify-content: flex-end; }


/* A hero article deliberately escapes the normal content container.
   Normal Joomla articles keep the configured content width. */
.its-content-wrap:has(.its-article-hero) {
    padding-block: 0;
}
.its-content-width:has(.its-article-hero) {
    width: 100%;
    max-width: none;
}
.its-content-grid:has(.its-article-hero) {
    display: block;
}
.its-content-grid:has(.its-article-hero) > main {
    width: 100%;
    min-width: 0;
}

/* ITS-VD alternative article layout: Hero */
.its-article-hero {
    position: relative;
    width: 100%;
    min-height: clamp(28rem, 66vh, 48rem);
    margin: 0;
    overflow: hidden;
    display: grid;
    align-items: center;
    background: var(--its-primary);
    color: #fff;
}

.its-article-hero__image,
.its-article-hero__shade {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.its-article-hero__image {
    object-fit: cover;
    object-position: center;
}

.its-article-hero__shade {
    background:
        linear-gradient(
            90deg,
            color-mix(in srgb, var(--its-primary) 82%, black 18%) 0%,
            color-mix(in srgb, var(--its-primary) 72%, transparent) 30%,
            color-mix(in srgb, var(--its-primary) 34%, transparent) 55%,
            transparent 78%
        );
}

.its-article-hero--no-image .its-article-hero__shade {
    background: linear-gradient(135deg, color-mix(in srgb, var(--its-primary) 88%, black), var(--its-primary));
}

.its-article-hero__inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding-block: clamp(4rem, 10vw, 8rem);
}

.its-article-hero__content {
    position: relative;
    z-index: 2;
    width: min(calc(100% - 3rem), var(--its-site-width, 1600px));
    max-width: var(--its-site-width, 1600px);
    margin-inline: auto;
    padding: clamp(3rem, 7vw, 6rem) clamp(2.5rem, 5vw, 5rem);
}


.its-article-hero__title {
    margin: 0 0 1rem;
    max-width: 18ch;
    color: inherit;
    font-family: inherit;
    font-size: clamp(2.4rem, 6vw, 5rem);
    font-weight: 750;
    line-height: .98;
    letter-spacing: -.035em;
}

.its-article-hero__text {
    max-width: 42rem;
}


.its-article-hero__text > :first-child { margin-top: 0; }
.its-article-hero__text > :last-child { margin-bottom: 0; }
.its-article-hero__text h2 {
    margin: 0 0 .8rem;
    color: inherit;
    font: inherit;
    font-size: clamp(1.25rem, 2.7vw, 1.8rem);
    font-weight: 600;
    line-height: 1.2;
}
.its-article-hero__text a { color: inherit; text-underline-offset: .18em; }


.its-article-hero__text a.its-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: .75rem;
    padding: .85rem 1.35rem;
    border: 1px solid color-mix(in srgb, white 38%, transparent);
    border-radius: .35rem;
    background: var(--its-secondary);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    text-shadow: none;
    transition: transform .15s ease, filter .15s ease;
}
.its-article-hero__text a.its-cta:hover,
.its-article-hero__text a.its-cta:focus-visible {
    filter: brightness(.94);
    transform: translateY(-1px);
}
.its-article-hero__text a.its-cta:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

.its-article-hero__caption {
    position: absolute;
    z-index: 3;
    right: .75rem;
    bottom: .55rem;
    max-width: min(80vw, 40rem);
    padding: .2rem .45rem;
    border-radius: .2rem;
    background: rgba(0, 0, 0, .48);
    color: #fff;
    font-size: .72rem;
    line-height: 1.3;
}

.its-article-hero__edit {
    align-self: flex-start;
}

.its-article-hero__status {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: .75rem;
    font-size: .85rem;
}

@media (max-width: 800px) {
    .its-article-hero {
        min-height: 32rem;
    }

    .its-article-hero__shade {
        background:
            linear-gradient(
                0deg,
                color-mix(in srgb, var(--its-primary) 88%, black 12%) 0%,
                color-mix(in srgb, var(--its-primary) 72%, transparent) 58%,
                color-mix(in srgb, var(--its-primary) 20%, transparent) 100%
            );
    }

    .its-article-hero__inner {
        align-items: end;
        padding-block: 4.5rem 5rem;
    }

    .its-article-hero__content {
        width: 100%;
    }

    .its-article-hero__title {
        max-width: 14ch;
    }
}

.its-article-hero__text a.its-cta:visited {
    color: #fff;
}

@media (max-width: 700px) {
    .its-article-hero__content {
        width: 100%;
        max-width: none;
        margin-inline: 0;
        padding: 2rem 1.25rem;
    }

    .its-article-hero__text {
        max-width: 100%;
    }
}


@media (max-width: 700px) {
    .its-footer__inner {
        padding-inline: 1.25rem;
    }

    .its-footer__meta {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: .35rem;
        text-align: center !important;
    }

    .its-footer__menu {
        order: -1;
        width: 100%;
        margin: 0 0 .35rem;
        text-align: center !important;
    }

    .its-footer__menu .mod-menu {
        justify-content: center !important;
    }

    .its-footer__line {
        width: 100%;
        text-align: center !important;
    }
}


/* Ankerziele bekommen Luft zum Header, damit Sections beim Sprung
   nicht zu hoch am oberen Viewportrand kleben. */
.its-contentpage-section[id],
.its-gallery[id],
section[id] {
    scroll-margin-top: 6.5rem;
}

@media (max-width: 700px) {
    .its-contentpage-section[id],
    .its-gallery[id],
    section[id] {
        scroll-margin-top: 5.5rem;
    }
}


.its-hero .its-cta:visited,
.its-hero a.its-cta:visited,
.its-hero .its-btn-primary:visited {
    color: var(--its-button-text) !important;
}
.its-hero .its-cta:hover,
.its-hero .its-cta:focus-visible,
.its-hero a.its-cta:hover,
.its-hero a.its-cta:focus-visible,
.its-hero .its-btn-primary:hover,
.its-hero .its-btn-primary:focus-visible {
    background: var(--its-button-hover) !important;
    border-color: var(--its-button-hover) !important;
    color: var(--its-button-text) !important;
}

/* DEV14 – CTA-Farben korrekt am alternativen Artikel-Hero */
.its-article-hero__text a.its-cta {
    background: var(--its-button-bg) !important;
    border-color: var(--its-button-bg) !important;
    color: var(--its-button-text) !important;
}

.its-article-hero__text a.its-cta:visited {
    color: var(--its-button-text) !important;
}

.its-article-hero__text a.its-cta:hover,
.its-article-hero__text a.its-cta:focus-visible {
    background: var(--its-button-hover) !important;
    border-color: var(--its-button-hover) !important;
    color: var(--its-button-text) !important;
}