/* cmsms stylesheet: norstein modified: torsdag 28. mai 2026 14:51:43 */
/* Browser reset */
*, *::before, *::after {box-sizing: border-box;}
* {margin: 0;padding: 0;}
img {display: block;max-width: 100%;}

/* General */
:root {
    --font-family--inter: Inter, sans-serif;
    --font-family--ubuntu: Ubuntu, Helvetica, sans-serif;
    --font-family--poppins: Poppins, sans-serif;
    --font-family--lora: Lora, sans-serif;
    --color--transparent: transparent;
    --color--white: white;
    --color--dark: #222;
    --color--blue: #1e3f7b;
    --color--light-gray: #ebf3f5;
    --color--mat-green: #688181;
    --color--bronse: #a5613b;
    --color--light-green: #f0e5d8;
    --light-beige: #f6f5f3;
    --color--succes: #6ce9a6;
    --color--error: #ff1948;
    --brun: #4d3d30;
    --d9dce1: #d9dce1;
}

html {
    font-size: 16px;
    font-family: var(--font-family--inter), sans-serif;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color--dark);
    min-width: 320px;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
    line-height: 1.2;
    margin:0;
}
h1 {
    font-family: var(--font-family--ubuntu);
    font-size: 3.75rem;
    font-weight: 500;
    line-height: 1.1;
}
h2 {font-size: 2rem;}
h3 {
    font-family: var(--font-family--ubuntu);
    font-size: 1.875rem;
    font-weight: 400;
    line-height: 1.2;
}
h4 {font-size: 1.5rem;}
h5 {font-size: 1.25rem;}
h6 {font-size: 1rem;}

a {
    color: var(--color--dark);
    text-decoration: none;
}

p {
    font-family: var(--font-family--ubuntu);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
}

.inner {
    width: 100%;
    max-width: 1220px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 2.5rem;  /* 40px */
    padding-right: 2.5rem; /* 40px */
}

section {
    padding-top: 5rem;    /* 80px */
    padding-bottom: 5rem; /* 80px */
    position: relative;
    .rich-text {
        max-width: 64ch;
        margin-left: auto;
        margin-right: auto;
        h1,h2,h3,h4,h5,h6 {
            color: var(--color--blue);
        }
        p {
            margin-bottom: 1rem;
        }
    }
}

.nav-button {
    border: 1px solid var(--color--bronse);
    background-color: var(--color--white);
    box-shadow: none;
    color: var(--color--bronse);
    text-transform: uppercase;
    border-radius: 2px;
    padding: 12px 24px;
    transition: color .35s, background-color .35s;
    &:hover {
        border-color: var(--color--bronse);
        background-color: var(--color--bronse);
        color: var(--color--white);
    }
}

.animated-underline {
    position: relative;
    &::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 0;
        height: 1px;
        transition: width 0.3s ease;
        background-color: var(--color--bronse); /* default color */
    }
}
.animated-underline:hover::before,
li:hover > .animated-underline::before {
    width: 100%;
}

.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Header */
header {
    position: relative;
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    background-color: var(--color--white);
    padding-top: 20px;
    padding-bottom: 35px;
    z-index: 99;
    #logo {
        display:block;
        img {
            width:240px;
        }
    }
    nav {
        > ul {
            column-gap: 1rem;
            > li {
                > a {
                    position: relative;
                }
                &:hover > a::before {
                    width: 100%;
                }
                &.has-dropdown {
                    padding: 0 20px;
                    > a {
                        padding-right:20px;
                        &::after {
                            content: '';
                            width: 8px;
                            height: 8px;
                            border-right: 2px solid currentColor;
                            border-bottom: 2px solid currentColor;
                            transform: rotate(45deg);
                            position: absolute;
                            right: 4px;
                            top: 50%;
                            margin-top: -6px;
                        }
                    }
                }
            }
        }
        ul {
            list-style: none;
            display: flex;
        }
        a {
            display: block;
            color: inherit;
            text-decoration: none;
        }
        li {
            font-family: var(--font-family--ubuntu);
            color: var(--color--dark);
            text-transform: uppercase;
            white-space: nowrap;
            position: relative;
            ul {
                display: none;
                position: absolute;
                top: 100%;
                left: 0;
                min-width: 100%;
                background-color: var(--color--light-green);
                li {
                    a {
                        padding: 10px 20px;
                        &.active {
                            background-color: var(--color--bronse);
                            color: var(--color--white);
                        }
                    }
                    &:hover {
                        background-color: var(--color--bronse);
                        color: var(--color--white);
                    }
                }
            }
            &:hover ul {
                display: block;
            }
        }
    }
}


footer {
    background-color: var(--color--blue);
    ul {
        list-style: none;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        margin-top: 1.5rem;  /* 24px */
        gap: 12px;
        display: flex;
    }
    .footer-top {
        display: grid;
        grid-template-columns: 1fr 3fr;
        gap: 30px;
        padding-top: 5rem;
        padding-bottom: 3.75rem;
        * {
            color: var(--color--white);
        }
    }
    .footer-columns {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }
    .footer-column-title {
        font-family: var(--font-family--lora);
        font-size: 1.875rem; /* 30px */
        font-weight: 400;
        line-height: 1.2;
    }
    .footer-bottom {
        background-color: var(--color--light-green);
    }
    .footer-byline {
        flex-flow: wrap;
        justify-content: space-between;
        align-items: center;
        padding-top: 1rem;
        padding-bottom: 1rem;
        gap: 16px;
        display: flex;
    }
    .animated-underline::before {
        background-color: var(--color--white);
    }
}

#hero {
    padding-top:0;
    padding-bottom:0;
    .hero-content {
        position: relative;
        border-radius: 16px;
        overflow: hidden;
        height: 40vh;
        &::after {
            content: '';
            position: absolute;
            inset: 0; /* top: 0; right: 0; bottom: 0; left: 0;*/
            background-image: radial-gradient(circle farthest-corner at 0% 100%, var(--color--dark), var(--color--transparent));
        }
        img {
            display: block;
            object-fit: cover;
            object-position: 50% 50%;
            width: 100%;
            height: 100%;
        }
        .hero-text {
            padding: 5rem 3.75rem;
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 1;
            color: var(--color--white);
            p {
                font-size:1.25rem;
                font-weight:300;
                max-width: 400px;
                margin-top: 1rem;
                margin-bottom: 2.5rem;
            }
        }
    }
}

#page_om-oss {
    #hero .hero-content {
        height: 60vh;
    }
}

.kataloger {
    position: relative;
    margin: 2rem;
    border-radius: 1rem;
    overflow: hidden;
    padding: 4rem 2rem;
    text-align: center;

    .kataloger__bg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 0;
    }

    .kataloger__inner {
        position: relative;
        z-index: 1;
    }

    .kataloger__tittel {
        color: #fff;
        font-size: 2rem;
        font-weight: 700;
        margin-bottom: 2.5rem;
    }

    .kataloger__liste {
        display: flex;
        justify-content: center;
        gap: 3rem;
        flex-wrap: wrap;
    }

    .katalog__label {
        color: #fff;
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        margin-bottom: 0.75rem;
        text-transform: uppercase;
    }

    .katalog__cover {
        display: block;
        width: 200px;
        border-radius: 0.25rem;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
        transition: transform 0.3s ease, box-shadow 0.3s ease;

        &:hover {
            transform: translateY(-6px);
            box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
        }
    }
}