@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&family=Varela+Round&display=swap');

:root {
    --ink: #25211f;
    --muted: #68625e;
    --sand: #f4ece1;
    --paper: #fffaf3;
    --card: #fffdf8;
    --line: #dfd1bf;
    --wave-yellow: #ffcf66;
    --wave-blue: #055698;
    --wave-red: #e63946;
    --wave-green: #2f7f72;
    --grey: #6c624d;
    --radius: 22px;
    --soft-shadow: 0 14px 34px rgba(59, 42, 28, 0.12);
    --koopp-tile-font-size: 1.04rem;
    --koopp-tile-font-size-mobile: 1rem;
}

.koopp-c1 {
    background: var(--wave-blue);
    color: #fff;
}

.koopp-c2 {
    background: var(--wave-red);
    color: #fff;
}

.koopp-c3 {
    background: var(--wave-green);
    color: #fff;
}

.koopp-c4 {
    background: var(--wave-yellow);
    color: var(--grey);
}

.koopp-c5 {
    background: var(--wave-blue);
    color: #fff;
}

.koopp-c6 {
    background: var(--wave-red);
    color: #fff;
}

.koopp-c1:visited,
.koopp-c1:hover,
.koopp-c1:focus,
.koopp-c2:visited,
.koopp-c2:hover,
.koopp-c2:focus,
.koopp-c3:visited,
.koopp-c3:hover,
.koopp-c3:focus,
.koopp-c5:visited,
.koopp-c5:hover,
.koopp-c5:focus,
.koopp-c6:visited,
.koopp-c6:hover,
.koopp-c6:focus {
    color: #fff;
}

.koopp-c4:visited,
.koopp-c4:hover,
.koopp-c4:focus {
    color: var(--grey);
}

.koopp-nav-link.koopp-c1,
.koopp-grid-link.koopp-c1,
.koopp-nav-link.koopp-c1:visited,
.koopp-grid-link.koopp-c1:visited,
.koopp-nav-link.koopp-c1:hover,
.koopp-grid-link.koopp-c1:hover,
.koopp-nav-link.koopp-c1:focus,
.koopp-grid-link.koopp-c1:focus,
.koopp-nav-link.koopp-c2,
.koopp-grid-link.koopp-c2,
.koopp-nav-link.koopp-c2:visited,
.koopp-grid-link.koopp-c2:visited,
.koopp-nav-link.koopp-c2:hover,
.koopp-grid-link.koopp-c2:hover,
.koopp-nav-link.koopp-c2:focus,
.koopp-grid-link.koopp-c2:focus,
.koopp-nav-link.koopp-c3,
.koopp-grid-link.koopp-c3,
.koopp-nav-link.koopp-c3:visited,
.koopp-grid-link.koopp-c3:visited,
.koopp-nav-link.koopp-c3:hover,
.koopp-grid-link.koopp-c3:hover,
.koopp-nav-link.koopp-c3:focus,
.koopp-grid-link.koopp-c3:focus,
.koopp-nav-link.koopp-c5,
.koopp-grid-link.koopp-c5,
.koopp-nav-link.koopp-c5:visited,
.koopp-grid-link.koopp-c5:visited,
.koopp-nav-link.koopp-c5:hover,
.koopp-grid-link.koopp-c5:hover,
.koopp-nav-link.koopp-c5:focus,
.koopp-grid-link.koopp-c5:focus,
.koopp-nav-link.koopp-c6,
.koopp-grid-link.koopp-c6,
.koopp-nav-link.koopp-c6:visited,
.koopp-grid-link.koopp-c6:visited,
.koopp-nav-link.koopp-c6:hover,
.koopp-grid-link.koopp-c6:hover,
.koopp-nav-link.koopp-c6:focus,
.koopp-grid-link.koopp-c6:focus {
    color: #fff;
}

.koopp-nav-link.koopp-c4,
.koopp-grid-link.koopp-c4,
.koopp-nav-link.koopp-c4:visited,
.koopp-grid-link.koopp-c4:visited,
.koopp-nav-link.koopp-c4:hover,
.koopp-grid-link.koopp-c4:hover,
.koopp-nav-link.koopp-c4:focus,
.koopp-grid-link.koopp-c4:focus {
    color: var(--grey);
}

html,
body {
    margin: 0;
    padding: 0;
}

#container.komp-shell {
    margin: 0;
}

.komp-shell {
    position: relative;
    isolation: isolate;
    min-height: 100vh;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0;
    font-size: 16px;
    line-height: 1.45;
    color: var(--ink);
    font-family: 'Nunito', 'Segoe UI', sans-serif;
    background: linear-gradient(180deg,
            var(--wave-yellow) 0%,
            var(--wave-yellow) calc(36% + 56px),
            #ffffff calc(36% + 56px),
            #ffffff calc(70% + 56px),
            var(--wave-blue) calc(70% + 56px),
            var(--wave-blue) 100%);
    border-radius: 0;
}

.komp-shell::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: calc(36% - 116px);
    height: 220px;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 220' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' d='M0,110 C120,40 260,190 420,112 C560,42 700,186 860,112 C1010,46 1160,184 1300,112 C1360,82 1405,96 1440,110 L1440,220 L0,220 Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center center;
    z-index: 0;
}

.komp-shell::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: calc(70% - 116px);
    bottom: auto;
    height: 220px;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 220' preserveAspectRatio='none'%3E%3Cpath fill='%23055698' d='M0,110 C130,184 280,34 430,112 C580,188 730,36 890,112 C1030,178 1170,44 1320,112 C1376,138 1416,124 1440,110 L1440,220 L0,220 Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center center;
    z-index: 0;
}

.komp-banana-band {
    position: absolute;
    left: 0;
    right: 0;
    top: 33%;
    height: 34%;
    overflow: visible;
    pointer-events: none;
    z-index: 1;
    opacity: 0.95;
}

.komp-banana-strip {
    position: absolute;
    left: 0;
    width: 100%;
    height: auto;
    display: block;
}

.komp-layout {
    position: relative;
    z-index: 2;
    width: min(70%, 1260px);
    max-width: 1260px;
    margin: 0 auto;
    display: grid;
    gap: 20px;
    animation: rise-in 500ms ease both;
    padding: clamp(16px, 2vw, 30px) 0;
}

@media (max-width: 980px) {
    .komp-layout {
        width: 100%;
    }

    .komp-banana-band {
        display: none;
    }
}

@keyframes rise-in {
    from {
        transform: translateY(10px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.komp-hero,
.komp-alsosee,
.komp-impresszum {
    background: var(--paper);
    border: 1px solid rgba(172, 147, 118, 0.35);
    border-radius: var(--radius);
    box-shadow: var(--soft-shadow);
}

.komp-hero {
    padding: clamp(22px, 2.4vw, 34px);
    display: block;
}

.komp-intro h1 {
    margin: 0;
    font-family: 'Varela Round', 'Nunito', sans-serif;
    font-size: clamp(2.1rem, 3.6vw, 3.4rem);
    line-height: 0.98;
    letter-spacing: 0.01em;
}

.komp-intro p {
    margin: 0;
    color: var(--muted);
    line-height: 1.68;
    font-size: 1rem;
}

.komp-sign {
    font-weight: 700;
    color: #3d3127;
}

.komp-alsosee,
.komp-impresszum {
    padding: clamp(16px, 2vw, 24px);
    background: var(--card);
}

.komp-impresszum h2 {
    margin: 0 0 10px;
    font-family: 'Varela Round', 'Nunito', sans-serif;
    font-size: clamp(1.6rem, 2.3vw, 2.1rem);
}

.komp-impresszum p {
    margin: 0 0 10px;
    color: #4b433d;
    line-height: 1.64;
}

.komp-impresszum .muted {
    color: #6f655d;
}

.komp-impresszum a,
.komp-alsosee a {
    color: #613f27;
    text-decoration: none;
    font-weight: 600;
}

.komp-impresszum a:hover,
.komp-alsosee a:hover {
    color: #a24e25;
    text-decoration: underline;
}

.komp-alsosee h2 {
    margin: 0 0 12px;
    font-family: 'Varela Round', 'Nunito', sans-serif;
    font-size: clamp(1.7rem, 2.4vw, 2.2rem);
}

.komp-alsosee p {
    margin: 0 0 10px;
    color: #4b433d;
    line-height: 1.6;
}

.komp-alsosee ul {
    margin: 0 0 14px;
    padding-left: 20px;
}

.komp-alsosee li {
    margin: 4px 0;
}

.komp-alsosee hr {
    border: 0;
    border-top: 1px solid #e4d3c0;
    margin: 14px 0;
}

.komp-video iframe {
    width: 100%;
    max-width: 620px;
    aspect-ratio: 16 / 9;
    height: auto;
    border: 0;
    border-radius: 12px;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
    display: block;
}

@media (max-width: 640px) {
    .komp-shell {
        padding: 10px;
        border-radius: 0;
    }
}

@media (max-width: 960px) {
    .komp-shell {
        padding: 12px;
        font-size: 18px;
        line-height: 1.5;
        border-radius: 0;
    }

    .komp-hero,
    .komp-alsosee,
    .komp-impresszum {
        border-radius: 16px;
    }
}