/*
 * Color scheme "Extendware" for the Camino theme, following www.extendware.de:
 * system font, light headlines, white header, square cards with a thin border,
 * dark buttons and orange as accent colour only.
 *
 * Like the theme's own schemes (e.g. .theme-ocean-breeze) it applies to the class that the
 * site setting camino.colorScheme sets on the body tag, see settings.definitions.yaml of the site set.
 * With another scheme selected, the site looks like the plain theme again. */

.theme-extendware {
    /* Colors */
    --ew-orange: #FE6F03;
    --ew-orange-soft: #FFF4EC;
    --ew-text: #404040;
    --ew-text-muted: #6B7280;
    --ew-border: #D4D4D4;
    --ew-dark: #232323;
    --ew-footer-background: #E8E8E8;
    --ew-footer-text: #374151;

    /* Darker than the brand orange, so that links stay readable on white */
    --color-primary-75: var(--ew-orange);
    --color-primary-100: #C2410C;

    --color-neutral-0: #FFFFFF;
    --color-neutral-10: #F5F5F5;
    --color-neutral-20: #E8E8E8;
    --color-neutral-30: #D4D4D4;
    --color-neutral-40: #A3A3A3;
    --color-neutral-50: #9CA3AF;
    --color-neutral-60: #6B7280;
    --color-neutral-70: #4B5563;
    --color-neutral-80: #2D3239;
    --color-neutral-90: #232323;

    /*
     * Typography: the system font stack of extendware.de
     * The theme derives the variables of the sizes from the base ones already on :root,
     * so these have to be set as well, as the scheme is applied to the body.
     */
    --ew-font: "Segoe UI", "Helvetica Neue", Arial, sans-serif;

    --headline-family: var(--ew-font);
    --headline-weight: 400;
    --headline-line-height: 1.2;
    --headline-large-family: var(--headline-family);
    --headline-large-weight: var(--headline-weight);
    --headline-large-line-height: var(--headline-line-height);
    --headline-medium-family: var(--headline-family);
    --headline-medium-weight: var(--headline-weight);
    --headline-medium-line-height: var(--headline-line-height);
    --headline-small-family: var(--headline-family);
    --headline-small-weight: var(--headline-weight);
    --headline-small-line-height: var(--headline-line-height);

    --subline-family: var(--ew-font);
    --subline-large-family: var(--subline-family);
    --subline-medium-family: var(--subline-family);
    --subline-small-family: var(--subline-family);

    --title-family: var(--ew-font);
    --title-large-family: var(--title-family);
    --title-medium-family: var(--title-family);
    --title-small-family: var(--title-family);

    --label-family: var(--ew-font);
    --label-large-family: var(--label-family);
    --label-medium-family: var(--label-family);
    --label-small-family: var(--label-family);

    --body-family: var(--ew-font);
    --body-large-family: var(--body-family);
    --body-medium-family: var(--body-family);
    --body-small-family: var(--body-family);

    --headline-large-size: 32px;
    --headline-medium-size: 28px;
    --headline-small-size: 20px;

    --subline-large-size: 20px;
    --subline-medium-size: 18px;
    --subline-small-size: 16px;

    --body-large-size: 18px;
    --body-medium-size: 16px;
    --body-small-size: 14px;

    /* Square corners, buttons only slightly rounded */
    --corners-s: 2px;
    --corners-m: 2px;
    --corners-l: 0;

    --text-color: var(--ew-text);
    --link-color: var(--color-primary-100);
    --link-color-hover: var(--ew-text);

    /* Dark buttons as on extendware.de */
    --button-primary-color: var(--ew-dark);
    --button-primary-color-hover: var(--ew-text);
    --button-primary-color-focus: var(--ew-text);
    --button-primary-color-pressed: var(--ew-text);
    --button-primary-border-color: var(--ew-dark);
    --button-primary-border-color-hover: var(--ew-text);
    --button-primary-border-color-pressed: var(--ew-text);
}

@media (min-width: 1024px) {
    .theme-extendware {
        --headline-large-size: 40px;
        --headline-medium-size: 36px;
        --headline-small-size: 22px;
        --subline-large-size: 24px;
        --subline-medium-size: 20px;
    }
}

.theme-extendware {
    --ew-focus-color: var(--ew-dark);
    --ew-focus-width: 3px;
    --ew-focus-offset: 2px;
}

body.theme-extendware :is(a, button, input, select, textarea, summary):focus-visible,
body.theme-extendware [tabindex]:not([tabindex="-1"]):focus-visible {
    box-shadow: none;
    outline: var(--ew-focus-width) solid var(--ew-focus-color);
    outline-offset: var(--ew-focus-offset);
}

.theme-extendware .button:not(.button--text):focus-visible {
    outline-offset: 0;
}

.theme-extendware .header__menu--open :is(.header__nav-list, .header__language-nav) :is(a, button):focus-visible,
.theme-extendware :is(.header__language-menu, .header__subnav) :is(a, button):focus-visible {
    outline-offset: calc(var(--ew-focus-width) * -1);
}

/* The theme marks a focused teaser with a border inside, the outline replaces it */
.theme-extendware .textmedia-teaser--link:focus-visible::after {
    content: none;
}

.theme-extendware .header {
    background: var(--color-neutral-0);
    border-bottom: 1px solid var(--ew-border);
    color: var(--ew-text);
}

@media (min-width: 1280px) {
    .theme-extendware .header__nav {
        --link-color: var(--ew-text);
        --link-color-hover: var(--color-primary-100);
    }

    .theme-extendware .header__nav-item:hover::before,
    .theme-extendware .header__nav-item--active::before {
        background-color: var(--ew-orange);
    }

    .theme-extendware .header__language-button {
        border-color: var(--ew-border);
        color: var(--ew-text);
    }

    .theme-extendware .header__language-button:hover {
        border-color: var(--ew-text);
    }

    .theme-extendware .header__language-button-icon {
        color: var(--ew-text-muted);
    }
}

.theme-extendware .component--page-footer {
    --background-color: var(--ew-footer-background);
    --text-color: var(--ew-footer-text);
    --link-color: var(--ew-footer-text);
    --link-color-hover: var(--color-primary-100);
    --button-text-content-color: var(--ew-footer-text);
    --button-text-content-color-hover: var(--color-primary-100);
    --button-text-content-color-pressed: var(--color-primary-100);
    --button-text-content-border-bottom-color: transparent;
    --button-text-content-border-bottom-color-hover: var(--color-primary-100);
    --component-padding-vertical: var(--spacing-l);
    margin-top: var(--component-margin-vertical);
}

.theme-extendware .footer__meta {
    border-top-color: var(--ew-border);
}

.theme-extendware .textmedia-teaser-grid--list,
.theme-extendware .textmedia-teaser-grid--list .textmedia-teaser-grid__grid {
    gap: var(--spacing-l);
}

.theme-extendware .textmedia-teaser-grid--list .textmedia-teaser {
    --ew-teaser-media-ratio: 16 / 10;
    --image-aspect-ratio: var(--ew-teaser-media-ratio);
    --image-object-fit: contain;
    --textmedia-teaser-background: var(--color-neutral-0);
    --textmedia-teaser-background-color-focus: var(--color-neutral-0);
    --textmedia-text-color: var(--ew-text);
    --textmedia-meta-color: var(--ew-text-muted);
    border: 1px solid var(--ew-border);
    display: flex;
    flex-direction: column;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.theme-extendware .textmedia-teaser-grid--list .textmedia-teaser--link:hover {
    border-color: var(--ew-orange);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.theme-extendware .textmedia-teaser-grid--list .textmedia-teaser__content {
    align-content: start;
    display: grid;
    gap: var(--spacing-s);
    padding: 20px;
}

.theme-extendware .textmedia-teaser-grid--list .textmedia-teaser .headline {
    --headline-margin-bottom: 0;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.35;
}

.theme-extendware .textmedia-teaser-grid--list .textmedia-teaser--link:hover .headline {
    color: var(--color-primary-100);
}

.theme-extendware .textmedia-teaser-grid--list .textmedia-teaser__meta {
    --paragraph-font-size: 14px;
}

.theme-extendware .textmedia-teaser-grid--list .textmedia-teaser__text {
    --margin-top-paragraph: 0;
    --paragraph-font-size: 15px;
    color: var(--color-neutral-70);
}

.theme-extendware .textmedia-teaser-grid--list .textmedia-teaser:not(:has(.textmedia-teaser__media))::before {
    aspect-ratio: var(--ew-teaser-media-ratio);
    background: var(--ew-orange-soft) url('../Images/extendware-mobil.svg') no-repeat center / 64px auto;
    content: "";
    display: block;
}

.theme-extendware .pagination__link {
    border: 1px solid transparent;
    color: var(--ew-text);
}

.theme-extendware .pagination__link:hover,
.theme-extendware .pagination__link:focus-visible {
    background: transparent;
    border-color: var(--ew-border);
    color: var(--ew-text);
}

.theme-extendware .pagination__link--current,
.theme-extendware .pagination__link--current:hover {
    background: var(--ew-dark);
    border-color: var(--ew-dark);
    color: var(--color-neutral-0);
}

.theme-extendware .blog-post__meta {
    color: var(--ew-text-muted);
    font-size: var(--body-small-size);
}

.theme-extendware .rich-text a {
    text-decoration: underline;
    text-underline-offset: 2px;
}