:root{
    --bg-clr: #f8f8f8;
    --pr-clr: #ffffff;
    --third-clr: #EDEDED;
    --ac-d-clr: #074162;
    --ac-l-clr: #4C758D;
    --txt-clr: rgb(17, 16, 15);

    --product-swift-clr: rgba(7, 65, 98, 0.85);
    --product-clipper-clr: rgba(7, 98, 31, 0.85);
    --product-grey-owl-clr: rgba(98, 7, 92, 0.85);
    --product-zubehoer-clr: rgba(98, 7, 7, 0.85);

    --radius-small: 4px;
    --radius-big: 12px;

    --mw: 1400px;

    --page-padding: 0 2em;
    --section-padding: 5em 2em;

    --border: solid 1px var(--third-clr);
    --card-border: solid 1px rgba(17, 16, 15, 0.4);
}

html{
    margin: 0;
    padding: 0;
}

body{
    margin: 0;
    padding: 0;
    background-color: var(--bg-clr);
}

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    text-decoration: none;
    font-family: Inter, sans-serif;
    border: 0;
    outline: 0;
}

.screen-reader-text{
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.screen-reader-text:focus{
    width: auto;
    height: auto;
    margin: 0;
    padding: 12px 16px;
    clip: auto;
    overflow: visible;
    white-space: normal;
    z-index: 1000;
}


/* fonts */

h1{
    font-size: 40px;
    font-weight: 900;
}

h2{
    font-size: clamp(30px, 8vw, 48px);
    font-weight: 900;
}

h3{
    font-size: 32px;
    font-weight: 900;
}

h4{
    font-size: 24px;
    line-height: 1.5;
}

.p-large{
    font-size: 22px;
    font-weight: 700;
    line-height: 1.7;
}

.p-medium{
    font-size: 20px;
    font-weight: 500;
    line-height: 1.7;
}

.p-small{
    font-size: 16px;
    font-weight: 500;
    line-height: 1.7;
}

.weight-big{
    font-weight: 900;
}
.weight-medium{
    font-weight: 700;
}
.weight-normal{
    font-weight: 500;
}



.txt-light{
    color: var(--pr-clr);
}

.txt-dark{
    color: var(--txt-clr);
}

.txt-ac-d{
    color: var(--ac-d-clr);
}

.txt-ac-l{
    color: var(--ac-l-clr);
}

.txt-low-op{
    opacity: 70%;
}



.bg-ac-d{
    background-color: var(--ac-d-clr);
}
.bg-ac-l{
    background-color: var(--ac-l-clr);
}
.bg-pr{
    background-color: var(--pr-clr);
}
.bg-bg{
    background-color: var(--bg-clr);
}



.mw{
    width: 100%;
    max-width: var(--mw);
}

section{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}


@media(max-width:700px){
    :root{
        --page-padding: 0 1em;
        --section-padding: 4em 1em;
    }
}



/* template parts */

    /* btns */
    .btn-1{
        width: max-content;
        padding: 10px 20px;
        background-color: var(--ac-d-clr);
        font-size: 20px;
        color: var(--pr-clr);
        border: solid 2px var(--ac-d-clr);
        transition: all .3s ease;
        border-radius: var(--radius-small);
        cursor: pointer;
    }
    .btn-1:focus-visible{
        filter: brightness(90%);
        text-decoration: underline;
    }

    .btn-2{
        width: max-content;
        padding: 10px 20px;
        background: transparent;
        font-size: 20px;
        color: var(--ac-d-clr);
        border: solid 2px var(--ac-d-clr);
        transition: all .3s ease;
        border-radius: var(--radius-small);
        cursor: pointer;
    }
    .btn-2:focus-visible{
        background-color: var(--ac-d-clr);
        text-decoration: underline;
        color: var(--pr-clr);
    }

    .btn-3{
        width: max-content;
        padding: 10px 20px;
        background-color: var(--pr-clr);
        font-size: 20px;
        color: var(--ac-d-clr);
        border: solid 2px var(--pr-clr);
        transition: all .3s ease;
        border-radius: var(--radius-small);
        cursor: pointer;
    }
    .btn-3:focus-visible{
        filter: brightness(90%);
        text-decoration: underline;
    }

    .btn-4{
        width: max-content;
        padding: 10px 20px;
        background: transparent;
        font-size: 20px;
        color: var(--pr-clr);
        border: solid 2px var(--pr-clr);
        transition: all .3s ease;
        border-radius: var(--radius-small);
        cursor: pointer;
    }
    .btn-4:focus-visible{
        background-color: var(--pr-clr);
        text-decoration: underline;
        color: var(--txt-clr);
    }

    @media (hover: hover) and (pointer: fine) {
        .btn-1:hover,
        .btn-3:hover {
            filter: brightness(90%);
            text-decoration: underline;
        }

        .btn-2:hover {
            background-color: var(--ac-d-clr);
            color: var(--pr-clr);
            text-decoration: underline;
        }

        .btn-4:hover {
            background-color: var(--pr-clr);
            color: var(--txt-clr);
            text-decoration: underline;
        }
    }

    @media (hover: none), (pointer: coarse) {
        .btn-1:active,
        .btn-3:active {
            filter: brightness(90%);
            text-decoration: underline;
        }

        .btn-2:active {
            background-color: var(--ac-d-clr);
            color: var(--pr-clr);
            text-decoration: underline;
        }

        .btn-4:active {
            background-color: var(--pr-clr);
            color: var(--txt-clr);
            text-decoration: underline;
        }
    }




    .transition-absolute{
        width: 100%;
        aspect-ratio: 1920/200;
        position: absolute;
        left: 0;
        bottom: 0;
        transform: translateY(2px);
        background-image: url("../img/welle-responsive.svg");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }
    .transition-relative{
        width: 100%;
        aspect-ratio: 1920/250;
        position: relative;
        transform: translateY(2px);
        background-image: url("../img/welle-responsive.svg");
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }


    /* site nav */
    .site-nav_section{
        display: flex;
        justify-content: center;
        align-items: center;
		overflow: hidden;
    }

    .site-nav_section--below-nav{
        margin-top: 120px;
    }

    .site-nav{
        padding: var(--page-padding);
        padding-top: 10px;
        padding-bottom: 10px;
        display: flex;
        align-items: center;
		flex-wrap: nowrap;
        gap: 20px;
		overflow-x: auto;
		overflow-y: hidden;
		scrollbar-width: thin;
		scrollbar-color: rgb(255 255 255 / 75%) transparent;
		-webkit-overflow-scrolling: touch;
    }

	.site-nav::-webkit-scrollbar{
		height: 5px;
	}

	.site-nav::-webkit-scrollbar-track{
		background: transparent;
	}

	.site-nav::-webkit-scrollbar-thumb{
		border-radius: var(--radius-small);
		background: rgb(255 255 255 / 75%);
	}

    .site-nav a{
        display: flex;
		flex: 0 0 auto;
        align-items: center;
        gap: 10px;
        text-transform: uppercase;
        white-space: nowrap;
        font-size: 15px;
    }

    .site-nav__home img{
        width: 17px;
        height: 17px;
    }

    @media(max-width: 1250px){
        .site-nav_section--below-nav{
            margin-top: 84px;
        }
    }


    /* cards */

    /* kanu card */
    .kanu-card{
        background-color: var(--pr-clr);
        border: var(--card-border);
        border-radius: var(--radius-big);
        position: relative;
        width: 100%;
        min-width: 278px;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
    }
    .kanu-card > img{
        width: 75px;
        height: auto;
        position: absolute;
        top: -25px;
        right: 15px;
        z-index: 3;
    }

    .kanu-card .img-holder{
        width: 100%;
        aspect-ratio: 16 / 8;
        position: relative;
        overflow: hidden;

        border-top-left-radius: var(--radius-big);
        border-top-right-radius: var(--radius-big);
    }


    /* WordPress legt einen Link um das Produktbild */
    .kanu-card .img-holder > a{
        position: absolute;
        inset: 0;

        width: 100%;
        height: 100%;

        display: flex;
        align-items: center;
        justify-content: center;
    }


    /* Das eigentliche Produktbild */
    .kanu-card .img-holder > a > img{
        display: block;

        width: auto;
        height: auto;

        max-width: 100%;
        max-height: 75%;

        object-fit: contain;
        object-position: center;
    }


    /* Einmal geladene externe Welle statt einer Inline-Kopie pro Karte */
    .kanu-card .img-holder > .wave-mask{
        position: absolute;
        left: 0;
        bottom: -1px;

        width: 100%;
        height: 35px;

        display: block;
        z-index: 2;
        pointer-events: none;
        background-image: url("../img/welle-responsive.svg");
        background-repeat: no-repeat;
        background-position: center bottom;
        background-size: 100% 100%;
    }



    .kanu-card .tag{
        position: absolute;
        left: 10px;
        top: 10px;
        padding: 4px 9px;
        background-color: var(--ac-d-clr);
        border-radius: var(--radius-small);
        color: var(--pr-clr);
    }
    .kanu-card .txt-holder{
        padding: 10px 15px 15px;
        display: flex;
        flex-direction: column;
        gap: 15px;
        flex: 1;
    }
    .kanu-card .txt-holder > p{
        width: 100%;
        border-bottom: var(--border);
    }
    .kanu-card .txt-holder .infos{
        display: flex;
        justify-content: space-between;
    }
    .kanu-card .txt-holder .infos .info{
        display: flex;
        flex-direction: column;
        width: 33.333%;
        min-width: 0;
    }

    .kanu-card .txt-holder .infos .info:nth-of-type(1){
        align-items: flex-start;
    }
    .kanu-card .txt-holder .infos .info:nth-of-type(2){
        align-items: center;
    }
    .kanu-card .txt-holder .infos .info:nth-of-type(3){
        align-items: flex-end;
    }

    .kanu-card .txt-holder .infos .info img{
        width: 50px;
        height: auto;
    }

    .kanu-card .txt-holder .bottom{
        padding-top: 10px;
        margin-top: auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }


    /* zubehör card */
    .kanu-card .tag.swift{
        background-color: var(--product-swift-clr);
    }

    .kanu-card .tag.clipper{
        background-color: var(--product-clipper-clr);
    }

    .kanu-card .tag.grey-owl{
        background-color: var(--product-grey-owl-clr);
    }

    .kanu-card .tag.zubehoer{
        background-color: var(--product-zubehoer-clr);
    }

    .zubehoer-card .txt-holder > .zubehoer-card__type{
        border-bottom: 0;
    }

    .zubehoer-card .txt-holder > .zubehoer-card__description{
        display: -webkit-box;
        max-height: 4.35em;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        border-bottom: 0;
        line-height: 1.45;
    }
















/* rechtliches */

section.rechtliches h1{
    font-size: 36px;
}
section.rechtliches{
    margin-top: 140px;
    display: flex;
    justify-content: center;
}

section.rechtliches.mw{
    padding: var(--section-padding);
    display: flex;
    flex-direction: column;
    gap: 15px;
}

@media(max-width: 1250px) {
    section.rechtliches{
        margin-top: 100px;
    }
}