/* =========================================
   BASIS
========================================= */

* {
    box-sizing: border-box;
}

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

    width: 100%;
    min-height: 100%;
}

body {
    font-family: Arial, Helvetica, sans-serif;

    color: #ffffff;

    background: #111111;
}

a {
    color: inherit;
    text-decoration: none;
}


/* =========================================
   SEITE
========================================= */

.page {
    position: relative;

    width: 100%;
    min-height: 100vh;

    overflow: hidden;
}


/* =========================================
   HEADER
========================================= */

.header {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;

    padding: 30px 45px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    z-index: 100;
}


/* =========================================
   LOGO
========================================= */

.logo {
    display: block;
}

.logo img {
    display: block;

    width: 145px;
    height: auto;
}


/* =========================================
   NAVIGATION
========================================= */

.top-nav {
    display: flex;

    align-items: center;

    gap: 30px;
}

.top-nav a {
    font-size: 14px;
    font-weight: 500;

    text-transform: lowercase;

    opacity: 0.9;

    transition: opacity 0.25s ease;
}

.top-nav a:hover {
    opacity: 0.55;
}


/* =========================================
   BAU / IT
========================================= */

.split-hero {
    display: grid;

    grid-template-columns: 1fr 1fr;

    width: 100%;

    min-height: 100vh;
}


/* Logo auf der IT-Hälfte */

.it-side-logo {
    position: absolute;

    top: 30px;
    left: 40px;

    width: 145px;
    height: auto;

    z-index: 10;
}


/* =========================================
   BEIDE GESCHÄFTSBEREICHE
========================================= */

.business-area {
    position: relative;

    min-height: 100vh;

    overflow: hidden;

    display: flex;
    align-items: flex-end;

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}


/* =========================================
   BAU
========================================= */

.business-area-bau {
    background-image: url("/media/bau.jpg");
}


/* =========================================
   IT
========================================= */

.business-area-it {
    background-image: url("/media/it.jpg");
}


/* =========================================
   BILD-OVERLAY
========================================= */

.business-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(0, 0, 0, 0.58) 0%,
            rgba(0, 0, 0, 0.18) 55%,
            rgba(0, 0, 0, 0.12) 100%
        );

    transition: background 0.35s ease;
}

.business-area:hover .business-overlay {
    background:
        linear-gradient(
            to top,
            rgba(0, 0, 0, 0.68) 0%,
            rgba(0, 0, 0, 0.28) 55%,
            rgba(0, 0, 0, 0.20) 100%
        );
}


/* =========================================
   TEXTE BAU / IT
========================================= */

.business-content {
    position: relative;

    z-index: 2;

    width: 100%;
    max-width: 560px;

    padding: 70px 65px 85px;

    color: #ffffff;
}

.business-label {
    display: block;

    margin-bottom: 14px;

    font-size: 13px;
    font-weight: 600;

    text-transform: none;

    letter-spacing: 2px;
}

.business-content h1 {
    margin: 0 0 24px;

    font-size: clamp(70px, 7vw, 120px);

    line-height: 0.88;

    font-weight: 700;

    letter-spacing: -4px;
}

.business-content p {
    max-width: 420px;

    margin: 0 0 28px;

    font-size: 18px;

    line-height: 1.5;
}

.business-link {
    display: inline-flex;

    align-items: center;

    gap: 14px;

    padding-bottom: 6px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.9);

    font-size: 14px;

    font-weight: 500;
}


/* =========================================
   FOOTER
========================================= */

.footer {
    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;

    padding: 0 45px 24px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    z-index: 100;

    pointer-events: none;
}

.footer a,
.footer span {
    pointer-events: auto;

    font-size: 11px;

    opacity: 0.7;
}

.footer a:hover {
    opacity: 1;
}

.footer-links,
.language-switch {
    display: flex;

    align-items: center;

    gap: 14px;
}


/* =========================================
   MOBILE MENU
========================================= */

.menu-toggle {
    display: none;

    width: 32px;

    padding: 0;

    border: 0;

    background: transparent;

    cursor: pointer;
}

.menu-toggle span {
    display: block;

    width: 100%;

    height: 2px;

    margin: 6px 0;

    background: #ffffff;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 900px) {

    .header {
        padding: 24px 28px;
    }

    .logo img {
        width: 125px;
    }

    .business-content {
        padding: 55px 40px 75px;
    }

    .business-content h1 {
        font-size: 72px;

        letter-spacing: -3px;
    }

    .business-content p {
        font-size: 16px;
    }

    .footer {
        padding: 0 28px 20px;
    }

}


/* =========================================
   HANDY
========================================= */

@media (max-width: 650px) {

    .page {
        overflow: visible;
    }


    /* Header */

    .header {
        position: fixed;

        padding: 18px 20px;

        background: rgba(0, 0, 0, 0.18);

        backdrop-filter: blur(8px);

        -webkit-backdrop-filter: blur(8px);
    }


    /* IT Logo */

    .it-side-logo {
        top: 20px;
        left: 20px;
        width: 110px;
    }


    /* Logo */

    .logo img {
        width: 115px;
    }


    /* Hamburger */

    .menu-toggle {
        display: block;

        position: relative;

        z-index: 102;
    }


    /* Mobile Navigation */

    .top-nav {
        position: fixed;

        top: 0;
        right: 0;

        width: min(78vw, 320px);

        height: 100vh;

        padding: 105px 35px 40px;

        display: flex;

        flex-direction: column;

        align-items: flex-start;

        gap: 24px;

        background: rgba(0, 0, 0, 0.94);

        transform: translateX(100%);

        transition: transform 0.3s ease;

        z-index: 101;
    }

    .top-nav.open {
        transform: translateX(0);
    }

    .top-nav a {
        font-size: 21px;

        opacity: 1;
    }


    /* Bau und IT untereinander */

    .split-hero {
        display: block;
    }

    .business-area {
        min-height: 70vh;

        align-items: flex-end;
    }

    .business-content {
        max-width: 100%;

        padding: 110px 25px 50px;
    }

    .business-content h1 {
        margin-bottom: 18px;

        font-size: 64px;

        letter-spacing: -3px;
    }

    .business-content p {
        max-width: 330px;

        margin-bottom: 24px;

        font-size: 16px;

        line-height: 1.45;
    }


    /* Footer */

    .footer {
        position: relative;

        padding: 22px 20px;

        background: #111111;

        flex-direction: column;

        align-items: flex-start;

        gap: 14px;
    }

}


/* =========================================
   KLEINE HANDYS
========================================= */

@media (max-width: 400px) {

    .business-area {
        min-height: 66vh;
    }

    .business-content h1 {
        font-size: 56px;
    }

    .business-content p {
        font-size: 15px;
    }

}


/* =========================================================
   BAU SEITE – NEUES DESIGN
========================================================= */

.bau-page {
    margin: 0;

    background: #ffffff;

    color: #111111;
}


/* =========================================================
   HEADER
========================================================= */

.bau-header {
    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    padding: 27px 45px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    z-index: 500;

    background: rgba(10, 10, 10, 0.13);

    backdrop-filter: blur(7px);

    -webkit-backdrop-filter: blur(7px);
}


.bau-logo {
    display: block;
}


.bau-logo img {
    display: block;

    width: 140px;

    height: auto;
}


.bau-nav {
    display: flex;

    align-items: center;

    gap: 27px;
}


.bau-nav a {
    position: relative;

    color: #ffffff;

    font-size: 14px;

    opacity: 0.8;

    transition: opacity 0.2s ease;
}


.bau-nav a:hover,
.bau-nav a.active {
    opacity: 1;
}


.bau-nav a.active::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -7px;

    width: 100%;

    height: 1px;

    background: #ffffff;
}


/* =========================================================
   HERO
========================================================= */

.bau-hero {
    position: relative;

    min-height: 100vh;

    display: flex;

    align-items: flex-end;

    overflow: hidden;

    background-image: url("/media/bau.jpg");

    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;
}


.bau-hero-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(0, 0, 0, 0.70) 0%,
            rgba(0, 0, 0, 0.25) 50%,
            rgba(0, 0, 0, 0.08) 100%
        );
}


.bau-hero-content {
    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 1000px;

    padding: 80px 65px 90px;

    color: #ffffff;
}


.bau-kicker {
    display: block;

    margin-bottom: 20px;

    font-size: 12px;

    font-weight: 600;

    letter-spacing: 2.4px;

    text-transform: none;
}


.bau-hero h1 {
    margin: 0 0 30px;

    font-size: clamp(78px, 9vw, 145px);

    line-height: 0.84;

    font-weight: 600;

    letter-spacing: -6px;
}


.bau-hero p {
    max-width: 600px;

    margin: 0 0 32px;

    font-size: 23px;

    line-height: 1.4;
}


.bau-scroll-link {
    display: inline-flex;

    align-items: center;

    gap: 15px;

    padding-bottom: 6px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.9);

    color: #ffffff;

    font-size: 14px;
}


/* =========================================================
   GEMEINSAME BREITE
========================================================= */

.bau-inner {
    position: relative;

    width: min(1180px, calc(100% - 100px));

    margin: 0 auto;

    z-index: 2;
}


/* =========================================================
   SECTION LABEL
========================================================= */

.bau-section-label {
    display: block;

    margin-bottom: 24px;

    color: #1476ad;

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 1.5px;
}


/* =========================================================
   ÜBERSCHRIFTEN
========================================================= */

.bau-services h2,
.bau-projects h2,
.bau-about h2 {
    margin: 0;

    font-size: clamp(60px, 7vw, 105px);

    font-weight: 300;

    line-height: 0.88;

    letter-spacing: -5px;
}


.bau-title-line {
    width: 75px;

    height: 2px;

    margin: 32px 0 55px;

    background: #1476ad;
}


/* =========================================================
   WAS WIR MACHEN
========================================================= */

.bau-services {
    position: relative;

    padding: 135px 0 145px;

    overflow: hidden;

    background: #ffffff;
}


/* riesiges BAU im Hintergrund */

.bau-background-word {
    position: absolute;

    top: 55px;

    right: -40px;

    color: #f2f5f7;

    font-size: clamp(190px, 27vw, 430px);

    font-weight: 700;

    line-height: 0.75;

    letter-spacing: -22px;

    pointer-events: none;

    user-select: none;
}


.bau-section-heading {
    position: relative;

    max-width: 650px;

    z-index: 2;
}


/* Leistungen */

.bau-service-grid {
    position: relative;

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 45px;

    margin-top: 25px;

    z-index: 2;
}


.bau-service {
    position: relative;

    padding: 30px 0 0;

    border-top: 1px solid #d9dfe3;
}


.bau-service-number {
    display: block;

    margin-bottom: 40px;

    color: #1476ad;

    font-size: 11px;

    font-weight: 600;
}


.bau-service h3 {
    margin: 0 0 25px;

    font-size: 35px;

    font-weight: 500;

    letter-spacing: -1.2px;
}


.bau-service p {
    max-width: 490px;

    margin: 0 0 17px;

    color: #515151;

    font-size: 16px;

    line-height: 1.68;
}


/* =========================================================
   PROJEKTE
========================================================= */

.bau-projects {
    position: relative;

    padding: 125px 0 145px;

    overflow: hidden;

    background: #f5f8fa;
}


.bau-project-heading {
    display: grid;

    grid-template-columns: 1fr 0.8fr;

    align-items: end;

    gap: 80px;

    margin-bottom: 65px;
}


.bau-project-heading .bau-title-line {
    margin-bottom: 0;
}


.bau-project-heading > p {
    max-width: 390px;

    margin: 0 0 4px;

    color: #555555;

    font-size: 17px;

    line-height: 1.6;
}


/* =========================================================
   PROJEKT-RASTER – AUTOMATISCH
========================================================= */

/* Bis einschließlich 4 Projekte: 2 Spalten */

.bau-project-grid {
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 75px 42px;

    max-width: 1080px;
}


/* Ab 5 Projekten: automatisch 3 Spalten */

.bau-project-grid:has(> .bau-project-card:nth-child(5)) {
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 65px 30px;

    max-width: 1180px;
}


/* keine Box mehr */

.bau-project-card {
    position: relative;

    min-width: 0;

    background: transparent;
}


/* Bilder */

.bau-project-image {
    position: relative;

    display: block;

    width: 100%;

    aspect-ratio: 16 / 9;

    overflow: hidden;

    background: #dce3e7;
}


.bau-project-image img {
    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.55s ease;
}


.bau-project-card:hover .bau-project-image img {
    transform: scale(1.035);
}


/* Pfeil auf Bild */

.project-image-arrow {
    position: absolute;

    right: 18px;

    bottom: 18px;

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.94);

    color: #111111;

    font-size: 18px;

    opacity: 0;

    transform: translateY(8px);

    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}


.bau-project-card:hover .project-image-arrow {
    opacity: 1;

    transform: translateY(0);
}


/* Projekttext */

.bau-project-text {
    padding: 21px 0 0;
}


/* Ort + Art */

.bau-project-meta {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 13px;
}


.bau-project-meta span {
    color: #1476ad;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 1.5px;

    text-transform: uppercase;
}


.bau-project-meta span:last-child {
    color: #8a8a8a;
}


.bau-project-text h3 {
    margin: 0 0 13px;

    color: #111111;

    font-size: 27px;

    font-weight: 500;

    line-height: 1.1;

    letter-spacing: -0.8px;
}


.bau-project-text p {
    max-width: 490px;

    margin: 0 0 20px;

    color: #555555;

    font-size: 14px;

    line-height: 1.6;
}


/* Projekt-Link */

.bau-project-link {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding-bottom: 4px;

    border-bottom: 1px solid #1476ad;

    color: #1476ad;

    font-size: 13px;

    font-weight: 500;
}


.bau-project-link span {
    transition: transform 0.2s ease;
}


.bau-project-link:hover span {
    transform: translate(3px, -3px);
}


/* =========================================================
   PROJEKTE LEICHT VERSETZEN – NUR BEI MAX. 4 PROJEKTEN
========================================================= */

.bau-project-grid:not(:has(> .bau-project-card:nth-child(5)))
.bau-project-card:nth-child(even) {
    transform: translateY(35px);
}


/* =========================================================
   ÜBER UNS
========================================================= */

.bau-about {
    position: relative;

    padding: 160px 0;

    overflow: hidden;

    background: #ffffff;
}


.bau-about-grid {
    display: grid;

    grid-template-columns: 0.9fr 1.1fr;

    gap: 120px;

    align-items: start;
}


.bau-about-title h2 {
    font-size: clamp(80px, 9vw, 140px);

    line-height: 0.78;

    letter-spacing: -7px;
}


.bau-about-content {
    max-width: 600px;

    padding-top: 15px;
}


.bau-about-line {
    display: block;

    width: 100%;

    height: 1px;

    margin-bottom: 45px;

    background: #1476ad;
}


.bau-about-content p {
    margin: 0 0 22px;

    color: #505050;

    font-size: 16px;

    line-height: 1.7;
}


.bau-about-content .bau-about-lead {
    margin-bottom: 35px;

    color: #111111;

    font-size: 27px;

    font-weight: 400;

    line-height: 1.4;

    letter-spacing: -0.5px;
}


/* =========================================================
   KONTAKT
========================================================= */

.bau-contact {
    position: relative;

    padding: 125px 0 130px;

    overflow: hidden;

    background: #1476ad;

    color: #ffffff;
}


.bau-contact-label {
    display: block;

    margin-bottom: 55px;

    color: rgba(255, 255, 255, 0.7);

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 1.5px;

    text-transform: uppercase;
}


.bau-contact-grid {
    display: grid;

    grid-template-columns: 1.35fr 0.65fr;

    align-items: end;

    gap: 80px;
}


.bau-contact h2 {
    margin: 0;

    font-size: clamp(65px, 8vw, 120px);

    font-weight: 500;

    line-height: 0.86;

    letter-spacing: -6px;
}


.bau-contact-right {
    padding-bottom: 5px;
}


.bau-contact-right p {
    max-width: 370px;

    margin: 0 0 35px;

    color: rgba(255, 255, 255, 0.82);

    font-size: 16px;

    line-height: 1.6;
}


.bau-mail {
    width: 100%;

    padding: 13px 0;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;

    border-top: 1px solid rgba(255, 255, 255, 0.7);

    border-bottom: 1px solid rgba(255, 255, 255, 0.7);

    color: #ffffff;

    font-size: 17px;
}


.bau-mail-arrow {
    font-size: 24px;

    transition: transform 0.2s ease;
}


.bau-mail:hover .bau-mail-arrow {
    transform: translateX(5px);
}


/* =========================================================
   FOOTER
========================================================= */

.bau-footer {
    padding: 28px 45px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    background: #ffffff;

    color: #111111;
}


.bau-footer div {
    display: flex;

    align-items: center;

    gap: 16px;
}


.bau-footer a {
    color: #111111;

    font-size: 11px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .bau-inner {
        width: calc(100% - 70px);
    }


    .bau-service-grid {
        gap: 50px;
    }


    /*
       Auch bei 5+ Projekten auf Tablet
       maximal zwei Spalten.
    */

    .bau-project-grid,
    .bau-project-grid:has(> .bau-project-card:nth-child(5)) {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 65px 30px;

        max-width: 1080px;
    }


    /*
       Auf Tablet kein versetztes Raster.
    */

    .bau-project-grid:not(:has(> .bau-project-card:nth-child(5)))
    .bau-project-card:nth-child(even) {
        transform: none;
    }


    .bau-about-grid {
        gap: 70px;
    }


    .bau-contact-grid {
        gap: 50px;
    }

}


@media (max-width: 850px) {

    .bau-header {
        padding: 22px 28px;
    }


    .bau-logo img {
        width: 120px;
    }


    .bau-nav {
        gap: 16px;
    }


    .bau-nav a {
        font-size: 12px;
    }


    .bau-background-word {
        opacity: 0.7;
    }


    .bau-project-text h3 {
        font-size: 24px;
    }

}


/* =========================================================
   HANDY
========================================================= */

@media (max-width: 650px) {


    /* HEADER */

    .bau-header {
        height: 70px;

        padding: 16px 20px;

        background: rgba(15, 15, 15, 0.25);
    }


    .bau-logo img {
        width: 110px;
    }


    .bau-header .menu-toggle {
        display: block;

        position: relative;

        z-index: 520;
    }


    .bau-nav {
        position: fixed;

        top: 0;
        right: 0;

        width: min(82vw, 330px);

        height: 100vh;

        padding: 105px 30px 40px;

        display: flex;

        flex-direction: column;

        align-items: flex-start;

        gap: 25px;

        background: #1476ad;

        transform: translateX(100%);

        transition: transform 0.3s ease;

        z-index: 510;
    }


    .bau-nav.open {
        transform: translateX(0);
    }


    .bau-nav a {
        color: #ffffff;

        font-size: 20px;

        opacity: 1;
    }


    /* HERO */

    .bau-hero {
        min-height: 88vh;
    }


    .bau-hero-content {
        padding: 120px 22px 50px;
    }


    .bau-hero h1 {
        margin-bottom: 22px;

        font-size: 62px;

        line-height: 0.88;

        letter-spacing: -3px;
    }


    .bau-hero p {
        font-size: 18px;
    }


    /* BREITE */

    .bau-inner {
        width: calc(100% - 40px);
    }


    /* SECTION */

    .bau-services,
    .bau-projects,
    .bau-about,
    .bau-contact {
        padding: 80px 0;
    }


    .bau-services h2,
    .bau-projects h2 {
        font-size: 53px;

        letter-spacing: -3px;
    }


    .bau-title-line {
        width: 60px;

        margin: 24px 0 40px;
    }


    /* BAU Hintergrund */

    .bau-background-word {
        top: 40px;

        right: -15px;

        font-size: 170px;

        letter-spacing: -10px;
    }


    /* LEISTUNGEN */

    .bau-service-grid {
        grid-template-columns: 1fr;

        gap: 48px;

        margin-top: 0;
    }


    .bau-service {
        padding-top: 22px;
    }


    .bau-service-number {
        margin-bottom: 22px;
    }


    .bau-service h3 {
        margin-bottom: 18px;

        font-size: 28px;
    }


    .bau-service p {
        font-size: 15px;
    }


    /* PROJEKT ÜBERSCHRIFT */

    .bau-project-heading {
        display: block;

        margin-bottom: 45px;
    }


    .bau-project-heading > p {
        margin-top: 30px;

        font-size: 16px;
    }


    /* PROJEKTE: HANDY IMMER EINE SPALTE */

    .bau-project-grid,
    .bau-project-grid:has(> .bau-project-card:nth-child(5)) {
        grid-template-columns: 1fr;

        gap: 48px;

        max-width: none;
    }


    /* Auf Handy niemals Versatz */

    .bau-project-grid:not(:has(> .bau-project-card:nth-child(5)))
    .bau-project-card:nth-child(even) {
        transform: none;
    }


    .bau-project-image {
        aspect-ratio: 16 / 10;
    }


    .project-image-arrow {
        opacity: 1;

        transform: none;

        width: 38px;

        height: 38px;
    }


    .bau-project-text {
        padding-top: 17px;
    }


    .bau-project-text h3 {
        font-size: 23px;
    }


    /* ÜBER UNS */

    .bau-about-grid {
        grid-template-columns: 1fr;

        gap: 55px;
    }


    .bau-about-title h2 {
        font-size: 72px;

        line-height: 0.8;

        letter-spacing: -4px;
    }


    .bau-about-content {
        padding-top: 0;
    }


    .bau-about-line {
        margin-bottom: 30px;
    }


    .bau-about-content .bau-about-lead {
        font-size: 22px;
    }


    .bau-about-content p {
        font-size: 15px;
    }


    /* KONTAKT */

    .bau-contact-label {
        margin-bottom: 35px;
    }


    .bau-contact-grid {
        grid-template-columns: 1fr;

        gap: 45px;
    }


    .bau-contact h2 {
        font-size: 52px;

        line-height: 0.9;

        letter-spacing: -3px;
    }


    .bau-contact-right p {
        font-size: 15px;
    }


    /* FOOTER */

    .bau-footer {
        padding: 25px 20px;

        flex-direction: column;

        align-items: flex-start;

        gap: 16px;
    }

}