:root {
    --brand-color:           rgb(62, 98, 162);
    --theme-white:           white;
    --theme-container-width: 1200px;
    --theme-footer-bg:       #1D4495;
    --theme-border-radius:   12px;
    --brand-color-light:     rgba(29, 68, 149, .5);

    --frosted-bg:            rgba(255, 255, 255, 0.3);
    --frosted-blur:          blur(10px);
    --frosted-shadow:        0 0 40px rgba(0, 0, 0, 0.3);
}

* {
    margin:     0;
    padding:    0;
    box-sizing: border-box;
}

html, body {
    margin:           0;
    padding:          0;
    height:           100%;
    width:            100%;
    background-color: var(--brand-color);
    font-family:      'Montserrat', sans-serif;
    color:            var(--theme-white);
    display:          flex;
    flex-direction:   column;
}

* {
    margin:     0;
    padding:    0;
    box-sizing: border-box;
}

nav {
    z-index: 99;
}

.navbar .container {
    max-width: var(--theme-container-width);
    width:     90%;
    margin:    auto;
}

.navbar {
    width:           100%;
    box-shadow:      0 1px 4px rgb(146 161 176 / 15%);
    background:      var(--frosted-bg);
    backdrop-filter: var(--frosted-blur);
}

.nav-container {
    display:  block;
    position: relative;
    height:   60px;
}

.navbar .nav-container ul {
    padding: 3rem 0;
}

.navbar .nav-container li {
    list-style: none;
}

.navbar .nav-container a {
    display:         inline-block;
    text-decoration: none;
    color:           var(--theme-white);
    font-weight:     bold;
    font-size:       1.2rem;
    text-transform:  uppercase;
    padding:         0.7rem;
    border-radius:   var(--theme-border-radius);
    transition:      background-color 0.3s ease, color 0.3s ease;
    width:           300px;
}

.navbar .nav-container a:hover {
    color:            var(--brand-color);
    background-color: #fff;
}

.nav-container .checkbox {
    position: absolute;
    display:  block;
    height:   32px;
    width:    32px;
    top:      20px;
    left:     20px;
    z-index:  5;
    opacity:  0;
    cursor:   pointer;
}

.nav-container .hamburger-lines {
    height:          26px;
    width:           32px;
    position:        absolute;
    top:             17px;
    left:            20px;
    z-index:         2;
    display:         flex;
    flex-direction:  column;
    justify-content: space-between;
}

.nav-container .hamburger-lines .line {
    display:       block;
    height:        4px;
    width:         100%;
    border-radius: 10px;
    background:    var(--theme-white);
}

.nav-container .hamburger-lines .line1 {
    transform-origin: 0 0;
    transition:       transform 0.4s ease-in-out;
}

.nav-container .hamburger-lines .line2 {
    transition: transform 0.2s ease-in-out;
}

.nav-container .hamburger-lines .line3 {
    transform-origin: 0% 100%;
    transition:       transform 0.4s ease-in-out;
}

.navbar .menu-items {
    position:        absolute;
    left:            -200%;

    display:         flex;
    flex-direction:  column;

    margin-top:      80px;

    width:           98vw;
    height:          calc(100vh - 100px);

    translate:       -50% 0;
    transition:      left 0.5s ease-in-out;

    background:      var(--frosted-bg);
    backdrop-filter: var(--frosted-blur);
    border-radius:   var(--theme-border-radius);
    box-shadow:      var(--frosted-shadow);
    text-align:      center;
}

.navbar .menu-items:after {
    content:       "";
    position:      absolute;
    inset:         0;

    display:       block;

    background:    var(--brand-color-light);
    border-radius: var(--theme-border-radius);

    z-index:       -10;
}

.navbar .menu-items li {
    margin-bottom: 1.2rem;
    font-size:     1.5rem;
    font-weight:   500;
}

.navbar .logo {
    position:  absolute;
    top:       50%;
    right:     15px;
    font-size: 1.2rem;
    color:     var(--theme-white);
    translate: 0 -50%;
}

.nav-container input[type="checkbox"]:checked ~ .menu-items {
    left: 50%;
}

.nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line1 {
    transform: rotate(45deg);
}

.nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line2 {
    transform: scaleY(0);
}

.nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line3 {
    transform: rotate(-45deg);
}

.nav-container input[type="checkbox"]:checked ~ .logo {
    display: none;
}

.logo-container {
    flex:            1;
    display:         flex;
    justify-content: center;
    align-items:     center;
    padding:         2rem;
}

.logo {
    max-width:  90vw;
    max-height: 70vh;
    width:      auto;
    height:     auto;
}

.home-page {
    height:     100vh;
    height:     100svh;
    min-height: 100vh;
    min-height: 100svh;
    overflow:   hidden;
}

.home-page .logo-container {
    flex:       1 1 auto;
    min-height: 0;
    padding:    clamp(0.75rem, 3vh, 2rem);
}

.home-page .logo {
    display:    block;
    max-width:  min(70vw, 420px);
    max-height: 100%;
    object-fit: contain;
}

form {
    display:        flex;
    flex-direction: column;
    gap:            1.2rem;
}

.input-icon-wrapper {
    position: relative;
}

.input-icon-wrapper svg {
    position:  absolute;
    left:      12px;
    top:       50%;
    transform: translateY(-50%);
    height:    20px;
    width:     20px;
    fill:      var(--theme-white);
    opacity:   0.8;
}

.input-icon-wrapper input {
    padding-left: 42px;
}

input, textarea {
    width:         100%;
    padding:       0.8rem;
    border:        none;
    border-radius: 8px;
    font-size:     1rem;
    font-family:   inherit;
    background:    rgba(255, 255, 255, 0.2);
    color:         var(--theme-white);
}

input::placeholder, textarea::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

input:focus, textarea:focus {
    outline:    none;
    background: rgba(255, 255, 255, 0.3);
}

@media (max-width: 600px) {
    .frosted-box {
        padding: 1.5rem;
    }

    .frosted-box h1 {
        font-size: 1.6rem;
    }
}

.checkbox-container {
    display:     flex;
    align-items: flex-start;
    gap:         0.6rem;
    margin-top:  1rem;
    color:       var(--theme-white);
    font-size:   0.85rem;
    line-height: 1.4;
    max-width:   100%;
}

.contact-page .checkbox-container {
    padding:       0.75rem;
    background:    rgba(29, 68, 149, 0.68);
    border-radius: 8px;
    box-shadow:    0 10px 24px rgba(0, 0, 0, 0.14);
}

.contact-page .checkbox-label,
.contact-page .checkbox-label a {
    color: var(--theme-white);
}

.checkbox-container input[type="checkbox"] {
    accent-color: var(--theme-white);
    cursor:       pointer;
    width:        1.4em;
    height:       1.4em;
    transform:    scale(1.2);
    flex-shrink:  0;
    margin-top:   0.15em;
}

.checkbox-label {
    display:     inline-block;
    flex:        1;
    font-weight: 400;
}

.checkbox-label a {
    color:           var(--theme-white);
    text-decoration: underline;
}

.checkbox-label a:hover {
    opacity: 0.8;
}

.contact-page,
.impressum-page,
.datenschutz-page {
    margin-top: -60px;
}

.content-wrapper {
    position:   relative;
    min-height: 100vh;
    overflow:   hidden;
}

.content-image {
    position: absolute;
    top:      0;
    width:    60%;
    height:   100%;
    z-index:  1;
}

.contact-page .content-image {
    right:      0;
    background: url('contact.jpg') center center / cover no-repeat;
}

.contact-page .content-wrapper {
    display:     grid;
    align-items: center;
    min-height:  calc(100vh + 60px);
    min-height:  calc(100svh + 60px);
    overflow:    visible;
    padding:     105px 1rem 4rem;
}

.contact-form {
    position:        relative;
    z-index:         2;
    width:           min(600px, 95vw);
    margin-left:     max(1rem, calc(35vw - 300px));
    padding:         4rem 3rem;
    background:      var(--frosted-bg);
    backdrop-filter: var(--frosted-blur);
    border-radius:   var(--theme-border-radius);
    box-shadow:      var(--frosted-shadow);
}

.contact-form h1 {
    font-size:     2rem;
    margin-bottom: 1.5rem;
}

.contact-form label {
    font-weight:   600;
    margin-bottom: 0.3rem;
    display:       block;
}

.contact-form textarea {
    width:         100%;
    padding:       0.8rem;
    border:        none;
    border-radius: 8px;
    font-size:     1rem;
    font-family:   inherit;
    background:    rgba(255, 255, 255, 0.2);
    color:         var(--theme-white);
}

.contact-form button {
    padding:          0.9rem;
    font-size:        1rem;
    font-weight:      bold;
    border:           none;
    border-radius:    8px;
    background-color: var(--theme-white);
    color:            var(--brand-color);
    cursor:           pointer;
    transition:       background 0.3s ease;
}

.contact-form button:hover {
    background-color: #e6e6e6;
}

.impressum-page .content-image {
    left:       0;
    background: url('impressum.jpg') center center / cover no-repeat;
}

.impressum-page .content-wrapper {
    display:     grid;
    align-items: center;
    min-height:  calc(100vh + 60px);
    min-height:  calc(100svh + 60px);
    overflow:    visible;
    padding:     105px 1rem 4rem;
}

.impressum-page .frosted-box {
    position:     relative;
    top:          unset;
    right:        unset;
    translate:    unset;
    width:        min(600px, 95vw);
    max-width:    100%;
    margin-left:  auto;
    margin-right: max(1rem, calc(35vw - 300px));
}

.impressum-page .frosted-box h1,
.impressum-page .frosted-box p{
    text-align: right;
}

.datenschutz-page .content-wrapper {
    display:         flex;
    justify-content: center;
    align-items:     center;
}

.datenschutz-page .content-image {
    background: url('datenschutz.jpg') top center / cover no-repeat;
    width:      100%;
}

.datenschutz-page .frosted-box {
    position:     relative;
    top:          30px;
    right:        unset;
    translate:    unset;

    margin-block: 120px;

    max-width:    800px;
}

.datenschutz-page .frosted-box::after {
    content:       "";
    position:      absolute;

    display:       block;

    background:    var(--brand-color-light);
    border-radius: var(--theme-border-radius);

    inset:         0;

    z-index:       -10;
}

.datenschutz-page .frosted-box-content {
    position:   relative;
    z-index:    1;
    height:     100%;
    overflow-y: auto;
}

.frosted-box {
    position:        absolute;
    top:             50%;
    right:           35%;
    translate:       50% -50%;
    z-index:         2;

    max-width:       600px;
    background:      var(--frosted-bg);
    border-radius:   var(--theme-border-radius);
    padding:         4rem 3rem;
    color:           var(--theme-white);
    backdrop-filter: var(--frosted-blur);
    box-shadow:      var(--frosted-shadow);
}

.frosted-box h1 {
    font-size:     2rem;
    margin-bottom: 1rem;
    text-align:    center;
}

.frosted-box h2 {
    font-size:  1.4rem;
    margin-top: 1.5rem;
}

.frosted-box p {
    line-height:   1.6;
    margin-bottom: 1rem;
}

.footer {
    position:         relative;
    flex:             0 0 auto;
    overflow:         hidden;
    isolation:        isolate;
    color:            var(--theme-white);
    padding:          4rem 1rem 1.25rem;
    font-family:      'Montserrat', sans-serif;
    background:
        linear-gradient(135deg, rgba(18, 24, 34, 0.96), rgba(34, 42, 58, 0.96)),
        var(--brand-color);
    border-top:       1px solid rgba(255, 255, 255, 0.18);
}

.footer::before {
    content:             "";
    position:            absolute;
    inset:               50% auto auto 50%;
    width:               min(20rem, 48vw);
    aspect-ratio:        1.35;
    background:          url('logo_weiss.png') center / contain no-repeat;
    opacity:             0.035;
    transform:           translate(-50%, -50%);
    z-index:             -1;
    pointer-events:      none;
}

.footer::after {
    content:        "";
    position:       absolute;
    inset:          0 0 auto;
    height:         1px;
    background:     linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent);
    opacity:        0.7;
    pointer-events: none;
}

.footer-container {
    position:              relative;
    display:               grid;
    grid-template-columns:  minmax(220px, 1fr) minmax(150px, 0.7fr) minmax(220px, 1fr);
    align-items:           start;
    gap:                   clamp(1.25rem, 3vw, 3.5rem);
    max-width:             1180px;
    margin:                0 auto;
}

.footer-col {
    min-width: 0;
}

.footer-logo {
    width:         clamp(96px, 9vw, 136px);
    margin-bottom: 1.2rem;
}

.footer h3 {
    font-size:      0.78rem;
    margin-bottom:  1rem;
    color:          rgba(255, 255, 255, 0.72);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.footer p {
    max-width:   33rem;
    color:       rgba(255, 255, 255, 0.82);
    font-size:   0.98rem;
    line-height: 1.65;
}

.footer ul {
    list-style: none;
    padding:    0;
    margin:     0;
}

.footer ul li {
    margin-bottom: 0.65rem;
    color:         rgba(255, 255, 255, 0.84);
    font-size:     0.95rem;
}

.footer ul.contact-info li {
    display:               grid;
    grid-template-columns: 1.6rem auto;
    align-items:           start;
    gap:                   0.7rem;
    margin-bottom:         1rem;
}

.footer ul li i {
    width:      1.2rem;
    color:      #F5C84C;
    text-align: center;
}

.footer ul li a {
    position:        relative;
    display:         inline-flex;
    color:           rgba(255, 255, 255, 0.86);
    text-decoration: none;
    transition:      color 0.2s ease, transform 0.2s ease;
}

.footer ul li a:hover {
    color:     #F5C84C;
    transform: translateX(0.16rem);
}

.footer-bottom {
    max-width:   1180px;
    margin:      3rem auto 0;
    padding-top: 1rem;
    border-top:  1px solid rgba(255, 255, 255, 0.14);
    text-align:  center;
    color:       rgba(255, 255, 255, 0.54);
    font-size:   0.82rem;
}

@media (max-width: 1024px) {
    .footer-container {
        grid-template-columns: minmax(210px, 1fr) minmax(150px, 0.7fr) minmax(220px, 1fr);
        gap:                   clamp(1rem, 2.5vw, 2rem);
    }
}

@media (max-width: 900px) {
    .checkbox-container input[type="checkbox"] {
        accent-color: unset;
    }

    .logo-container {
        min-height: calc(100dvh - 60px);
    }

    .contact-form h1,
    .contact-form a,
    .contact-form input,
    .contact-form textarea,
    .contact-form label,
    .impressum-page .frosted-box h1,
    .impressum-page .frosted-box h2,
    .impressum-page .frosted-box h3,
    .impressum-page .frosted-box p {
        color: var(--brand-color);
    }
    .contact-form h1 {
        text-align: center;
    }

    .content-image {
        width: 100%;
    }

    .contact-form,
    .frosted-box {
        margin: 2rem auto;
        width:  98vw;
    }

    .impressum-page .frosted-box h1,
    .impressum-page .frosted-box p{
        text-align: center;
    }

    .input-icon-wrapper svg {
        fill: var(--brand-color);
    }

    input::placeholder, textarea::placeholder {
        color: var(--brand-color);
    }
}

@media (max-width: 1300px), (max-height: 900px) {
    .contact-page .contact-form,
    .impressum-page .frosted-box {
        width:     min(95vw, 600px);
        max-width: 100%;
        margin:    0 auto;
        padding:   clamp(2rem, 4vh, 4rem) clamp(1.5rem, 4vw, 3rem);
    }
}

@media (max-width: 790px) {
    .footer-container {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-container .footer-col:first-child {
        grid-column: span 2;
    }

    .footer-container .footer-col:nth-child(2) {
        grid-column: span 2;
    }

    .footer-container .footer-col {
        display:         flex;
        flex-direction:  column;
        justify-content: center;
        align-items:     center;
    }
}

@media (max-width: 768px) {
    .footer-col {
        width: 100%;
    }

    .footer-logo {
        margin-bottom: 1rem;
    }
}

@media (max-width: 600px) {
    .footer-container .footer-col p {
        text-align: center;
    }
}

@media (max-width: 576px) {
    .navbar .logo {
        font-size: 0.9rem;
    }

    .navbar .menu-items {
        width: 95vw;
    }

    .contact-form,
    .datenschutz-page .frosted-box,
    .frosted-box {
        position:      relative;
        top:           unset;
        left:          unset;
        right:         unset;
        translate:     unset;
        padding-block: 2rem;
        margin-top:    105px !important;
        max-width:     95vw;
    }

    .contact-page .contact-form {
        margin-top: 0 !important;
        padding:    2rem 1.25rem;
    }

    .impressum-page .frosted-box {
        margin-top: 0 !important;
    }

    .footer-container {
        grid-template-columns: 1fr;
    }

    .footer-container .footer-col:first-child {
        grid-column: span 1;
    }

    .footer-container .footer-col:nth-child(2) {
        grid-column: span 1;
    }
}

@media (max-width: 500px) {
    .checkbox-container {
        flex-direction: column;
        align-items:    flex-start;
    }
}