/**
 * Project: ____________ Instituto Cervantes (kurse.jetzt-lernst-du.es)
 * File: _______________ Page
 * Dev Browser: ________ Chrome 121
 * Test Browser: _______ Safari 17.3, FF 117
 * Date, Author: _______ 12.04.2024, bchristi
 * Updated: ____________ 18.06.2025, bchristi
 *
 * Notes:
 * - Single File
 * - Vanilla CSS
 * - Custom properties marked with "--"
 * - Cusotm properties overwrites
 * - BEM naming convention (best as useful)
 */

/* 
    | CUSTOM PROPERTIES begin #var
*/ 
:root {
    --wrap-min-width:           800px;
    --wrap-max-width:           1260px;

    --content-max-width:        1400px;
    --content-breakout-ratio:   0.7;
    --content-grid-width:       calc(var(--content-max-width) + (var(--content-max-width) * var(--content-breakout-ratio)));

    --transition:               0.2s;
    --radius:                   0.25rem;
    --radius-large:             0.50rem;
    --radius-max:               100vmax;
    --offset:                   0.15rem;
    --offset-large:             0.5rem;

    --gap:                      1rem;
    --gap-small:                0.5rem;
    --gap-regular:              clamp(1.25rem, 2vw, 1.875rem);
    --gap-large:                clamp(1.875rem, 4vw, 3rem);
    --gap-xlarge:               clamp(3rem, 5vw, 4rem);
    --gap-xxlarge:              clamp(4rem, 10vw, 8rem);
    --gap-section:              clamp(1.5rem, 5vw, 3rem);

    --primary:                 hsl(3, 79%, 53%);
    --primary-dark:            hsl(3, 79%, 43%);    
    --primary-light:           hsl(3, 79%, 63%);
    --primary-alpha-300:       hsla(222, 72%, 38%, 0.2);
    --primary-alpha-500:       hsla(222, 72%, 38%, 0.5);
    --primary-alpha-800:       hsla(222, 72%, 38%, 0.8);

    --secondary:               hsl(138, 90%, 45%);
    --secondary-dark:          hsl(138, 90%, 35%);
    --secondary-alpha-300:     hsla(138, 90%, 35%, 0.3);
    --secondary-alpha-600:     hsla(138, 90%, 35%, 0.6);

    --tertiary:                hsl(224, 34%, 62%);
    --tertiary-alpha-500:      hsla(214, 34%, 62%, 0.5);    

    --tertiary-light:          hsl(214, 34%, 95%);
    --tertiary-light-alpha-800:hsla(214, 34%, 95%, 0.8);

    --accent:                   hsl(48, 100%, 50%);

    --text:                    hsl(222, 12%, 23%);
    --text-dark:               hsl(222, 12%, 13%);
    --text-alpha-300:           hsla(222, 12%, 23%, 0.3);
    --text-alpha-600:           hsl(222, 12%, 23%, 0.6);
    
    --bright:                  hsl(0, 0%, 94%);
    --bright-alpha-200:        hsla(0, 0%, 94%, 0.2);
    --bright-alpha-500:        hsla(0, 0%, 94%, 0.5);

    --alert:                   hsla(0, 100%, 50%, 1);
    --success:                 hsla(138, 90%, 35%, 1);

    --focus:                   hsl(0, 100%, 50%);

    --box-shadow:              0 3px 5px var(--primary-alpha-300);
    
    --grey-100:                hsl(0, 0%, 95%);
    --grey-200:                hsl(0, 0%, 85%);
    --grey-300:                hsl(0, 0%, 75%);
    --grey-400:                hsl(0, 0%, 65%);
    --grey-500:                hsl(0, 0%, 55%);     

    --ff-sans:                  "ITC Franklin", system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    --ff-serif:                 Georgia, "Times New Roman", Times, serif;
    
    --fs-xxsmall:               0.750rem; /* 12px */
    --fs-xsmall:                0.875rem; /* 14px */
    --fs-small:                 1.000rem; /* 16px */
    --fs-regular:               1.125rem; /* 18px */
    --fs-medium:                clamp(1.250rem, 3vw, 1.625rem); /* 20px */
    --fs-large:                 clamp(1.625rem, 3vw, 1.875rem); /* 30px */
    --fs-xlarge:                clamp(1.875rem, 5vw, 2.875rem); /* 46px */
    --fs-xxlarge:               clamp(2.875rem, 6vw, 4.000rem); /* 64px */

    --lh-reset:                 1.1;
    --lh-small:                 1.4;
    --lh-regular:               1.6;

    --fw-thin:                  100;
    --fw-light:                 200;
    --fw-regular:               400;                
    --fw-medium:                500;
    --fw-semibold:              600;
    --fw-bold:                  700;
    --fw-black:                 900;

    --spacing:                  -0.03rem;
    --spacing-plus:              0.03rem;
}

/* 
    - CUSTOM PROPERTIES end
*/


/* 
    | FONTS begin
*/ 

@font-face {
	font-family: "ITC Franklin";
	src: url("../fonts/itc_franklin_light.woff2") format("woff2");
	font-weight: 200;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "ITC Franklin";
	src: url("../fonts/itc_franklin_medium.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "ITC Franklin";
	src: url("../fonts/itc_franklin_bold.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "ITC Franklin";
	src: url("../fonts/itc_franklin_black.woff2") format("woff2");
	font-weight: 900;
    font-style: normal;    
	font-display: swap;
}

/* 
    end
*/


/* 
    | GENERAL begin
*/ 

[id] {
    scroll-margin-block-start: var(--gap-regular);
}

*,
*::before,
*::after {
    min-width: 0;
    box-sizing: border-box;
}

*:focus-visible {
    outline-width: 2px !important;
    outline-style: solid !important;
    outline-offset: var(--offset) !important;
    outline-color: var(--focus) !important;
}

::selection {
	background-color: var(--secondary-alpha-300);
}

/* br {
    display: none;

    @media (width > 600px) {
        display: inline-block;
    }
} */

html, body {
    margin: 0;
    color: var(--text);
    background-color: white;
    line-height: var(--lh-regular);
    font-family: var(--ff-sans);
    font-size: var(--fs-regular);
    font-weight: var(--fw-light);
    scroll-behavior: smooth;
}

strong {
    font-weight: var(--fw-medium);
}

a {
    cursor: pointer;
    color: var(--primary);

    &:where(:link, :active, :visited) {
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: var(--offset);
    }

    &:where(:focus, :hover) {
        text-decoration: none;
    }
}

ul, ol {
    margin-block: var(--gap-regular) var(--gap-large);
}

blockquote {
    position: relative;
    font-weight: normal;
    font-style: italic;
    font-family: var(--ff-serif);
    font-size: var(--fs-small);
    margin: 0;
    z-index: 1;
}

img {
    max-width: 100%;
    height: auto;
}

button {
    cursor: pointer;
    border: 0 none;
    font-weight: bold;
    text-align: left;
    background: transparent;
    font-size: var(--fs-regular);
    font-family: var(--ff-sans);
    line-height: var(--lh-small);
    border-radius: var(--radius);
}

/* #wrap */

.wrap_min {
    margin-inline: auto;
    width: min(var(--wrap-min-width), 100% - var(--gap-regular));
}

.wrap_max {
    margin-inline: auto;
    width: min(var(--wrap-max-width), 100% - var(--gap-xlarge));
}

.wrap_max_no_gap {
    margin-inline: auto;
    width: min(var(--wrap-max-width), 100%);
}

.skip_link {
    color: var(--bright);
    background-color: var(--secondary);
    font-weight: bold;
    position: absolute;
    text-align: center;
    text-decoration: none;
    left: 0;
    right: 0;
    z-index: 9;
    translate: 0 -5rem;
    transition: all var(--transition); 
    padding: var(--gap-small);
    font-size: var(--fs-small);

    &:focus {
        translate: 0;
    }
}

figure {
    margin: 0;

    & figcaption {
        text-align: center;
        word-wrap: break-word;
        padding-block: var(--gap-small);
        font-size: var(--fs-xsmall);
        line-height: var(--lh-small);

        & p {
            margin: 0;
        }         
    }
}

.alert {
    font-weight: bold;
    font-size: var(--fs-xsmall);
	padding-inline: var(--gap-small);
    border-radius: var(--radius);
    line-height: var(--lh-small);

    &.--error {
        position: absolute;
        z-index: 7;    
        color: var(--bright);
        background-color: var(--alert);
    }

    &.--success {
        margin-block-end: var(--gap);
        padding: var(--gap-small) var(--gap);
        color: var(--bright);
        background-color: var(--success);
    }
}

.rating {
    display: inline-block;
    gap: var(--gap-small);
    position: relative;
    appearance: none;
    width: auto;
    left: -0.9em;
    font-weight: var(--fw-medium);
    font-size: 25px;
    margin: 0;
    vertical-align: baseline;

    &::before {
        --percent: calc(4/5*100%);
        content: '★★★★★';
        background: linear-gradient(90deg, var(--accent) var(--percent), var(--bright-alpha-200) var(--percent));
        background-clip: text;
        font-size: 40px;
        letter-spacing: var(--spacing-plus);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    &::after {
        position: absolute;
        content: "4/5";
        top: 50%;
        left: 100%;
        translate: 0 -50%;
        padding-inline: var(--gap-small);
    }

    &::-webkit-meter-bar {
        display: none;
    }
}

/* 
    - GENERAL end
*/


/*
    | LAYOUT begin
*/

.header {
    position: relative;
    background-position: 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: var(--tertiary-light);
    display: flex;
    align-items: center;
    padding: 0;

    /* @media (max-width: 1680px) and (max-height: 1050px) {
        height: calc(100svh - 60px);
    } */
    
    a {
        cursor: pointer;
        color: white;
    
        &:where(:link, :active, :visited) {
            text-decoration: underline;
            text-decoration-thickness: 1px;
            text-underline-offset: var(--offset);
        }
    
        &:where(:focus, :hover) {
            text-decoration: none;
        }
    }    
}

.header:where(a) {
    text-decoration: underline;
    color: white;
}

.header--thank-you {
    position: relative;
    min-height: 100vh;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

.footer {
    background-color: var(--grey-100);
    font-size: var(--fs-xsmall);
    color: var(--text-alpha-600);
    padding-block: var(--gap);

    &::after {
        bottom: 100%;
    }
}

.footer__row,
.header__row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    position: relative;
}

.footer__row {
    flex-direction: column;
    justify-content: center;
    
    @media (width > 600px) {
        justify-content: space-between;
        flex-direction: row;
    }
}

.header__row {
    padding-block: var(--gap-xlarge) 0;
    gap: 0;
}

.header__link {
    display: block;
    text-align: center;
}

.header__logo {
    transition: max-width var(--transition);

    @media (width < 840px) {
        max-width: 65%;
    }
}

.section_header {
    text-align: center;
    margin-block: var(--gap-xlarge) var(--gap-large);

    & .section__title {
        font-size: var(--fs-xlarge);
        line-height: var(--lh-reset);
        font-weight: var(--fw-semibold);
        margin-block-end: var(--gap)
    }

    & .section__subtitle {
        margin-inline: auto;
        width: min(960px, 100%);
        font-size: var(--fs-large);
        font-weight: var(--fw-light);
        margin-block: 0 var(--gap-regular);
    }
}

/*  #content */

.content {
    position: relative;

    & .content__main {
        padding-block-end: var(--gap-regular);
    }

    & .content__header {
        display: block;
    }

    & .content__title {
        font-weight: normal;
        line-height: var(--lh-reset);
        font-size: var(--fs-xxlarge);
        margin-block: var(--gap-large) var(--gap);
    }

    & .content__subtitle {
        font-size: var(--fs-medium);
        margin-block-start: 0;
    }

    & .content__figure {
        position: relative;
        order: -1;
        text-align: center;
        margin: calc(var(--gap-large) * -1) auto 0;

        @media (width > 840px) {
            order: unset;
        }      
    }

    & .content__figure--inline {
        margin-block: var(--gap-regular);
    }

    & .content__image {
        display: block;
        border-radius: var(--radius);
    }

    &.content--split {
        display: grid;
        gap: 0 var(--gap-xlarge);
        grid-template-columns: 1fr;

        @media (min-width: 840px) {
            grid-template-columns: 1fr 1fr;
        }
    }
}

.grid {
    --_min-column-size: 400px;
    --_column-count: 2;
    --_gap: var(--gap-xlarge);
    --_breakpoint: calc(var(--_min-column-size) * var(--_column-count) + (var(--_gap) * (var(--_column-count) - 1)));
    --_column-size: calc((100% / var(--_column-count)) - var(--_gap));

    display: grid;
    gap: var(--_gap);
    grid-template-columns: repeat(auto-fit, minmax(min(max(var(--_column-size), (100% - var(--_breakpoint)) * -999), 100%), 1fr));
}

.list {
    margin-block: var(--gap-regular) var(--gap-large);
    padding-inline: 0;

    & li {
        position: relative;
        margin-block: var(--gap-regular);
        padding-inline-start: 2rem;
        line-height: var(--lh-small);
        list-style: none;

        & svg {
            position: absolute;
            left: 0;
            top: 0.2rem;

            & path {
                fill: currentColor;
            }
        }
    }
}

.list_flex {
    display: flex;
    list-style: none;
    margin-block: 0;
    flex-wrap: wrap;
    padding: 0;
    gap: var(--gap-small) var(--gap);

    &.list_flex--center {
        align-items: center;
        justify-content: center;
    }

    & li {
        & svg {
            vertical-align: middle;
        }
    }
}


/* 
    - LAYOUT end
*/


/*
    | COMPONENTS begin
*/

/*  |- Hero #hero */

.hero { 
    text-align: center;
    color: var(--bright);
    padding-block: var(--gap-large);

    & .hero__card {
        border-radius: var(--radius-large);
        background-color: var(--tertiary-light-alpha-800);
        width: min(30rem, 100%);
        padding: var(--gap-large);
        box-shadow: var(--box-shadow);

        & p {
            margin-block-end: 0;
        }
    }

    & .hero__content {
        margin-block-start: var(--gap-regular);
    }
    
    & .hero__title {
        font-weight: var(--fw-black);
        line-height: var(--lh-reset);
        font-size: var(--fs-xxlarge);
        margin-block: 0;
    }

    & .hero__subtitle {
        line-height: var(--lh-reset);
        font-weight: var(--fw-light);
        margin-block: var(--gap);
        letter-spacing: var(--spacing-plus);
    }

    & .hero__visual {
        margin-block-start: var(--gap-regular);

        & .hero__caption {
            color: var(--bright);
            font-size: var(--fs-xxsmall);
            padding-block: 0;
        }        
    }
}

/*  |- Benefits #benefits */

.benefits {
    font-size: var(--fs-small);
    padding-block: var(--gap);

    & li {
        margin-inline: var(--gap);
    }
}

/*  |- Cards #card */

.cards__grid {    
    display: grid;
    gap: var(--gap);
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

    & .card__item {
        position: relative;
        text-align: center;
        font-size: var(--fs-small);
        border-radius: var(--radius-large);
        padding: var(--gap-large) var(--gap) 0;
        color: var(--text);
        background-color: var(--grey-100);

        &:where(:focus, :hover) {
            /* cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'><text y='50%'>🇪🇸</text></svg>") 16 0, auto; */
            color: var(--bright);
            background-color: var(--primary);

            &::before {
                filter: brightness(0) invert(1);
            }
        }

        &::before {
            content: url(/assets/images/check.svg);
            position: absolute;
            top: var(--gap);
            left: var(--gap);   
        }
    }

    & .card__title {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 3.5rem;
        font-weight: var(--fw-semibold);
        margin-block: var(--gap-small) 0;
        font-size: var(--fs-medium);

        @media (width < 672px) {
            min-height: auto;
        }
    }
}

/*  |- Highlight */

.highlight {
    margin-block: var(--gap-section);

    & .highlight__content {
        padding-block: var(--gap-large);
        
        @media (width > 840px) {
            background: transparent url(/assets/images/highlight_background.webp) 0 50% no-repeat;
        }
    }

    & .highlight__card {
        text-align: center;
        justify-content: center;
        font-size: var(--fs-large);
        line-height: var(--lh-small);
        
        @media (width > 840px) {
            border: 2px solid;
            padding: var(--gap-regular);
            border-radius: var(--radius-large);
            margin-inline: 38% 10%;
        }

        p {
            margin-block: var(--gap) var(--gap-regular);
        }

        em {
            font-style: normal;
            text-decoration: underline;
            text-decoration-style: dotted;
            text-decoration-thickness: 2px;
            text-underline-offset: var(--gap-small)       
        }
    }

    .highlight__caption {
        text-align: center;
        margin-block: var(--gap) 0;
        font-size: var(--fs-small);

        @media (width > 840px) {
            margin-inline: 38% 10%;
        }
    }

    & .highlight__title {
        margin: 0;
        font-size: var(--fs-xlarge);
        line-height: var(--lh-reset);
        font-weight: var(--fw-bold);
    }
}




/*  |- Navigation #nav */

.navigation__list {
    display: none;
    list-style: none;
    padding: 0;
    margin: 0;
    font-family: var(--_ff-sans);

    &.--footer {
        display: flex;
        align-items: center;
        gap: var(--gap-regular);
        padding-block: var(--gap-small);

        .navigation__link {
            font-size: inherit;
            font-weight: inherit;
            text-transform: none;
            color: var(--text);
            text-underline-offset: var(--offset);
    
            &:where(:focus, :hover) {
                text-decoration: underline;
            }
        }    
    }       
}

.navigation__item {
    position: relative;

    &:focus .navigation__sublist,
    &:hover .navigation__sublist {
        display: flex;
    }
}

.navigation__link {
    display: block;
    position: relative;
    text-decoration: none;
    font-weight: bold;
    border: 0 none;
    text-transform: uppercase;

    &:focus,
    &:hover {
        text-decoration: underline;
        text-decoration-thickness: 2px;
        text-underline-offset: var(--offset);
    }

    &[aria-current="page"] {
        text-decoration: none;
    }
}

/*  |- Quotes #quote */

.quotes {
    margin-block: var(--gap-section);
}

.quote__item {
    position: relative;
    padding-inline: var(--gap-large) 0;

    @media (width > 840px) {
        padding-inline: var(--gap-large) var(--gap-regular);
    }

    &.--icon {
        padding-block-start: var(--gap-large);

        &::before {
            content: url('../images/quote.svg');
            position: absolute;
            z-index: 0;
            top: 0;
            left: 0;
        }
    }    

    & .quote__visual {
        margin-block-start: var(--gap);

        &.--avatar {
            display: flex;
            gap: var(--gap);
            align-items: center;
        }
    }

    & .quote__caption {
        text-align: start;
        font-style: italic;

        & cite {
            font-style: normal;
            display: block;
            font-weight: var(--fw-medium);
        }

        &.--author {
            font-size: var(--fs-xsmall);
        }
    }
}

/*  |- Closure */

.closure {
    font-size: var(--fs-small);
    text-align: center;
    width: min(1100px, 100% - var(--gap-regular));    
    padding-inline: var(--gap-large);
    margin-inline: auto;
    margin-block: var(--gap-large) var(--gap-xlarge);

    & .closure__image {
        transition: transform var(--transition);

        @media (width > 840px) {    
            transform: scale(1.3);
            margin: var(--gap) var(--gap) 0;
        }
    }
}

/*  |- Buttons */

.button {
    text-align: center;
    font-weight: bold;
    text-decoration: none !important;
    font-weight: var(--fw-medium);
    line-height: var(--lh-reset);
    border-radius: var(--radius);
    border: 1px solid transparent;
    padding: var(--gap) var(--gap-regular);

    &.--large {
        font-size: var(--fs-large);
    }

    &.button--secondary {
        --_button-color: var(--bright, white);
        --_button-bg: var(--primary, blue);

        color: var(--_button-color);
        background-color: var(--_button-bg);
        background-image: linear-gradient(180deg, var(--secondary) 0%, var(--secondary-dark) 100%);
        border: 1px solid var(--secondary-dark);
        box-shadow: 0 0 15px 0 var(--text);
        border-radius: var(--radius-large);    
        transition: box-shadow var(--transition);

        &:where(:focus, :hover) {
            background-image: linear-gradient(180deg, var(--secondary) 0%, var(--secondary-dark) 50%);
            border: 1px solid var(--secondary-dark);
            box-shadow: 0 0 15px 0 var(--bright);
        }        
    }

    &.button--primary {
        --_button-color: var(--bright, white);
        --_button-bg: var(--primary, red);
        --_button-border: var(--primary, red);

        color: var(--_button-color);
        background-color: var(--_button-bg);
        border: 1px solid var(--_button-border);
        transition: background-color var(--transition);

        &:where(:focus, :hover) {
            border-color: transparent;
            background-color: color-mix(in oklch, var(--_button-bg) 100%, var(--primary-dark) 100%);
        }

        &.--icon {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: var(--gap-small);
        }
    }       
}

.button_group {
    display: flex;
    gap: var(--gap-small) var(--gap);
    justify-content: center;
    position: relative;

    @media (width < 840px) {
        flex-direction: column;
    }
}

.button_caption--highlight {
	position: fixed;
	z-index: 1;
	top: 0;
	inset-inline: var(--gap);
	color: white;
	display: inline-block;
	text-wrap: balance;
	font-size: var(--fs-xsmall);
	padding: var(--gap-small) var(--gap);
	line-height: var(--lh-small);
	border-radius: var(--radius-max);
	background-color: var(--primary);
	margin-inline: auto;
	width: min(40em, 90%);
	box-shadow: var(--box-shadow);
}

/* 
    - COMPONENTS end
*/


/*
    | TYPO begin #typo
*/

:where(h1, h2, h3, h4, h5, h6) {
    font-weight: normal;
    letter-spacing: var(--spacing);
    line-height: var(--lh-reset);
    letter-spacing: var(--spacing);
    text-wrap: balance;
}

h2, h3 {
    font-weight: bold;
    line-height: var(--lh-small);   
}

/*
    - TYPO end
*/


/*
    | HELPER begin #helper
*/

.primary {
    --_invert: var(--bright, white);
    --_color: var(--primary);
    --_color-dark: var(--primary-dark);

    color: var(--_color);

    &.--bg {
        color: var(--_invert);
        background-color: var(--primary);

        :where(a, h1, h2, h3) {
            color: inherit;
        }     
        
        &.--dark {
            background-color: var(--_color-dark);
        }
    }
}

.secondary {
    --_invert: var(--bright, white);
    --_color: var(--secondary);
    --_color-dark: var(--secondary-dark);

    color: var(--_color);

    &.--dark {
        color: var(--_color-dark);
    }

    &.--bg {
        color: var(--_invert);
        background-color: var(--_color);

        :where(a, h1, h2, h3, *) {
            color: inherit;
        }

        &.--dark {
            background-color: var(--_color-dark);
        }
    }
}

/* 
    - HELPER end
*/


/*
    | MODIFIER start #mod
*/

.padding {
    padding: var(--gap-large) var(--gap-large);
}

.padding_block {
    padding-block: var(--gap-large);
}

.only_desktop {
    @media (width < 991px) {
        display: none;
    }
}

.only_mobile {
    @media (width > 990px) { 
        display: none;
    }
}

.only_reader {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.hidden {
    overflow: hidden !important;
}

.radius {
    border-radius: var(--radius);

    &.radius--large {
        border-radius: var(--radius-large);
    }
}

.text_center {
    text-align: center;
}

.text_small {
    font-size: var(--fs-xsmall);
    line-height: var(--lh-small);
}

/*
    - MODIFIER end
*/


/*
    | Overwrites #over
*/

.splide {

    & .splide__slide {
        position: relative;

        &:not(.is-active) {
            height: 0;
        }

        & svg {
            vertical-align: middle;
        }
    }

    & .splide__pagination {
        position: relative;
        text-align: left;
        padding-inline: 0;
        justify-content: center;
        margin-block: var(--gap-large) calc(var(--gap-small) * -1);
    }

    & .splide__pagination__page {
        width: var(--gap);
        height: var(--gap);
        opacity: 0.5;
        background-color: var(--tertiary);

        &.is-active,
        &:where(:focus, :hover) {
            opacity: 1;
            background-color: var(--primary);
            transform: unset;
        }
    }
}

/*  Cookie Consent */

html.show--consent,
html.show--preferences {

	&::before {
		content: "";
		position: fixed;
		inset: 0;
		z-index: 9999;
		background-color: rgba(0, 0, 0, 0.5);
	}
}

#cc-main {
    --cc-btn-border-radius: 0px;
    --cc-btn-primary-bg: var(--primary, orange);
    --cc-btn-primary-border-color: transparent;
	
	.cm {
		width: min(37em, 100%);
		max-width: inherit !important;
	}
	
	.cm--box.cm--wide {
		width: min(42em, 100%);
		max-width: inherit !important;
	}
    
    div:empty {
        display: none !important;
    }
	
    .pm__btn[data-role="all"],
    .cm__btn[data-role="all"] {
        color: var(--cc-btn-primary-color);
        border-color: var(--cc-btn-primary-border-color);
        background-color: var(--cc-btn-primary-bg);
    }
	
    .pm__btn[data-role="necessary"],
    .cm__btn[data-role="necessary"] {
        color: var(--cc-btn-secondary-color);
        border-color: var(--cc-btn-secondary-border-color);
        background-color: var(--cc-btn-secondary-bg);
			
        &:where(:focus, :hover) {
            background: var(--cc-btn-secondary-hover-bg);
            border-color: var(--cc-btn-secondary-hover-border-color);
            color: var(--cc-btn-secondary-hover-color);							
        }			
    }
    
    .cm__desc {
        margin-top: 1em !important;
    }
    
    .cc_link {
        text-decoration: underline;
    }

    .cm__link-group > * + * {
        margin-left: 1em;
    }

    .cc_poweredby {
        font-style: italic;
        margin-left: auto;
        margin-right: 0;
    }
    
    .cc_poweredby_desktop {
        display: none;
    
        @media (width > 430px) {
                display: inline-block;
        }
    }
}