:root {
    --black: #0b0b0b;
    --dark: #111111;
    --white: #ffffff;
    --grey: #777777;
    --light: #f3f3f1;
    --border: #292929;
}


/* =====================================================
   RESET
===================================================== */

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


html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
}


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

    background: var(--black);
    color: var(--white);

    line-height: 1.6;
}


img {
    display: block;
    max-width: 100%;
    height: auto;
}


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


button,
input,
textarea,
select {
    font: inherit;
}


/* =====================================================
   GLOBAL CONTAINER
===================================================== */

.container {
    width: calc(100% - 32px);
    max-width: 1240px;
    margin: 0 auto;
}


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

.site-header {
    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    z-index: 1000;

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

    border-bottom:
        1px solid var(--border);
}


.header-inner {

    min-height: 96px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;
}


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

   Wichtig:
   Keine feste max-height verwenden!
   Dadurch wird das Logo nicht abgeschnitten.
===================================================== */

.logo-link {

    display: flex;

    align-items: center;

    line-height: 0;

    min-width: 0;
}


.logo {

    display: block;

    width: 180px;

    height: auto;

    max-height: none;

    object-fit: contain;

    object-position: left center;
}


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

.main-navigation {

    display: none;
}


.main-navigation ul {

    list-style: none;

    display: flex;

    align-items: center;

    gap: 26px;
}


.main-navigation a {

    position: relative;

    display: inline-block;

    padding: 8px 0;

    font-size: 14px;

    font-weight: 700;

    white-space: nowrap;

    transition:
        opacity 0.2s ease;
}


.main-navigation a::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    width: 0;

    height: 1px;

    background: #ffffff;

    transition:
        width 0.2s ease;
}


.main-navigation a:hover {

    opacity: 0.75;
}


.main-navigation a:hover::after {

    width: 100%;
}


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

.header-cta {

    display: none;

    align-items: center;

    justify-content: center;

    min-height: 44px;

    padding:
        0 18px;

    border:
        1px solid #777777;

    font-size: 13px;

    font-weight: 700;

    white-space: nowrap;

    transition:
        background 0.2s ease,
        color 0.2s ease;
}


.header-cta:hover {

    background: #ffffff;

    color: #111111;
}


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

.mobile-menu-button {

    display: flex;

    align-items: center;

    justify-content: center;

    min-width: 48px;

    min-height: 42px;

    padding:
        0 14px;

    background:
        transparent;

    border:
        1px solid #666666;

    color:
        #ffffff;

    font-size: 13px;

    font-weight: 700;

    cursor: pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease;
}


.mobile-menu-button:hover {

    background: #ffffff;

    color: #111111;
}


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

.mobile-navigation {

    display: none;

    position: absolute;

    top: 96px;

    left: 0;

    width: 100%;

    padding:
        20px 0 25px;

    background:
        #0b0b0b;

    border-bottom:
        1px solid #292929;
}


.mobile-navigation.active {

    display: block;
}


.mobile-navigation ul {

    list-style: none;
}


.mobile-navigation li {

    border-bottom:
        1px solid #292929;
}


.mobile-navigation li:last-child {

    border-bottom: 0;
}


.mobile-navigation a {

    display: block;

    padding:
        16px 0;

    font-size: 15px;

    font-weight: 700;
}


.mobile-navigation a:hover {

    opacity: 0.65;
}


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

.hero {

    min-height:
        100svh;

    padding-top:
        96px;

    display: flex;

    align-items: flex-end;

    background:

        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.94),
            rgba(0, 0, 0, 0.58)
        ),

        url(
            "https://images.unsplash.com/photo-1504307651254-35680f356dfd?auto=format&fit=crop&w=2000&q=85"
        )

        center / cover no-repeat;
}


.hero-content {

    padding:
        80px 0 70px;

    max-width:
        900px;
}


.eyebrow {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom:
        22px;

    font-size:
        12px;

    font-weight:
        700;

    letter-spacing:
        0.18em;

    text-transform:
        uppercase;

    color:
        #c7c7c7;
}


.eyebrow::before {

    content: "";

    width:
        32px;

    height:
        2px;

    background:
        #ffffff;
}


h1 {

    font-size:
        clamp(48px, 12vw, 118px);

    line-height:
        0.92;

    letter-spacing:
        -0.055em;

    margin-bottom:
        30px;
}


.hero-text {

    max-width:
        650px;

    color:
        #d1d1d1;

    font-size:
        18px;
}


.hero-actions,
.cta-actions {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        12px;

    margin-top:
        35px;
}


/* =====================================================
   BUTTONS
===================================================== */

.button {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        52px;

    padding:
        0 24px;

    border:
        1px solid #ffffff;

    font-weight:
        700;

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        color 0.2s ease;
}


.button-primary {

    background:
        #ffffff;

    color:
        #111111;
}


.button:hover {

    transform:
        translateY(-2px);
}


/* =====================================================
   INTRO
===================================================== */

.intro {

    padding:
        90px 0;

    background:
        var(--light);

    color:
        var(--black);
}


.intro-grid {

    display:
        grid;

    gap:
        45px;
}


.section-label {

    color:
        #777777;

    font-size:
        12px;

    font-weight:
        700;

    letter-spacing:
        0.16em;

    text-transform:
        uppercase;
}


.intro h2,
.company h2 {

    margin-top:
        18px;

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

    line-height:
        1;

    letter-spacing:
        -0.05em;
}


.intro-text {

    color:
        #666666;

    font-size:
        18px;

    max-width:
        650px;
}


.intro-text p + p {

    margin-top:
        20px;
}


/* =====================================================
   LEISTUNGEN
===================================================== */

.services {

    padding:
        90px 0;

    background:
        #111111;
}


.section-heading {

    max-width:
        800px;

    margin-bottom:
        55px;
}


.section-heading h2 {

    margin-top:
        15px;

    font-size:
        clamp(40px, 7vw, 72px);

    line-height:
        1;

    letter-spacing:
        -0.05em;
}


.services-grid {

    display:
        grid;

    gap:
        1px;

    background:
        #333333;

    border:
        1px solid #333333;
}


.service-card {

    padding:
        35px 25px;

    background:
        #111111;
}


.service-number {

    color:
        #777777;

    font-size:
        12px;

    font-weight:
        700;

    letter-spacing:
        0.1em;
}


.service-card h3 {

    margin:
        35px 0 15px;

    font-size:
        25px;

    line-height:
        1.1;
}


.service-card p {

    color:
        #999999;
}


/* =====================================================
   UNTERNEHMEN
===================================================== */

.company {

    padding:
        90px 0;

    background:
        var(--light);

    color:
        #111111;
}


.company-grid {

    display:
        grid;

    gap:
        45px;

    align-items:
        center;
}


/* Großes Unternehmenslogo */

.company-logo {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        260px;

    padding:
        20px;
}


.company-logo img {

    display:
        block;

    width:
        100%;

    max-width:
        500px;

    height:
        auto;

    object-fit:
        contain;
}


.company-text {

    color:
        #666666;

    font-size:
        18px;
}


.company-facts {

    display:
        grid;

    gap:
        1px;

    background:
        #dddddd;

    border:
        1px solid #dddddd;

    margin-top:
        30px;
}


.fact {

    padding:
        25px;

    background:
        #ffffff;
}


.fact strong {

    display:
        block;

    margin-bottom:
        5px;

    font-size:
        14px;
}


.fact span {

    color:
        #777777;
}


/* =====================================================
   ÖFFNUNGSZEITEN
===================================================== */

.hours-section {

    padding:
        90px 0;

    background:
        #111111;
}


.hours-grid {

    display:
        grid;

    gap:
        45px;
}


.hours-description {

    color:
        #999999;

    max-width:
        550px;

    font-size:
        17px;
}


.hours-list {

    list-style:
        none;

    border-top:
        1px solid #333333;
}


.hours-list li {

    display:
        flex;

    justify-content:
        space-between;

    gap:
        20px;

    padding:
        15px 0;

    border-bottom:
        1px solid #333333;

    color:
        #aaaaaa;
}


.hours-list strong {

    color:
        #ffffff;
}


/* =====================================================
   CTA
===================================================== */

.cta {

    padding:
        90px 0;

    background:
        #ffffff;

    color:
        #111111;

    text-align:
        center;
}


.cta h2 {

    max-width:
        850px;

    margin:
        0 auto 25px;

    font-size:
        clamp(40px, 8vw, 80px);

    line-height:
        1;

    letter-spacing:
        -0.05em;
}


.cta p {

    max-width:
        650px;

    margin:
        0 auto;

    color:
        #666666;

    font-size:
        18px;
}


.cta .button {

    border-color:
        #111111;
}


.cta .button-primary {

    background:
        #111111;

    color:
        #ffffff;
}


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

footer {

    padding:
        40px 0;

    background:
        #050505;

    color:
        #888888;

    font-size:
        13px;
}


.footer-grid {

    display:
        grid;

    gap:
        30px;
}


.footer-company {

    color:
        #ffffff;

    font-size:
        16px;

    font-weight:
        700;

    margin-bottom:
        5px;
}


.footer-links {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        20px;
}


.footer-links a:hover {

    color:
        #ffffff;
}


/* =====================================================
   UNTERSEITEN
===================================================== */

.page-main {

    padding-top:
        96px;

    background:
        var(--light);

    color:
        #111111;

    min-height:
        100svh;
}


.page-hero {

    padding:
        90px 0 60px;

    background:
        #111111;

    color:
        #ffffff;
}


.page-hero h1 {

    font-size:
        clamp(48px, 9vw, 90px);

    margin:
        15px 0 0;
}


.page-content {

    padding:
        70px 0;
}


.content-grid {

    display:
        grid;

    gap:
        45px;
}


.content-grid.single {

    grid-template-columns:
        1fr;
}


.contact-card,
.project-card,
.legal-card {

    background:
        #ffffff;

    padding:
        30px;

    border:
        1px solid #dddddd;
}


.contact-card h2,
.project-card h2,
.legal-card h2 {

    font-size:
        28px;

    line-height:
        1.1;

    margin-bottom:
        15px;
}


.contact-list {

    list-style:
        none;

    margin-top:
        25px;
}


.contact-list li {

    padding:
        15px 0;

    border-bottom:
        1px solid #dddddd;
}


.contact-list li:last-child {

    border-bottom:
        0;
}


.contact-list strong {

    display:
        block;

    margin-bottom:
        3px;
}


.formless-note {

    color:
        #666666;

    font-size:
        18px;
}


/* =====================================================
   IMPRESSUM ZURÜCK BUTTON
===================================================== */

.back-home-wrap {

    display:
        flex;

    justify-content:
        flex-end;

    margin-bottom:
        30px;
}


.back-home-button {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        44px;

    padding:
        0 18px;

    border:
        1px solid #111111;

    color:
        #111111;

    font-size:
        13px;

    font-weight:
        700;

    transition:
        background 0.2s ease,
        color 0.2s ease;
}


.back-home-button:hover {

    background:
        #111111;

    color:
        #ffffff;
}


/* =====================================================
   LEGAL CONTENT
===================================================== */

.legal-card p {

    margin-bottom:
        15px;
}


.legal-card a {

    text-decoration:
        underline;
}


/* =====================================================
   DESKTOP
===================================================== */

@media (min-width: 900px) {


    .container {

        width:
            calc(100% - 48px);

    }


    /* Desktop Navigation */

    .main-navigation {

        display:
            block;

    }


    .header-cta {

        display:
            inline-flex;

    }


    .mobile-menu-button {

        display:
            none;

    }


    .mobile-navigation {

        display:
            none !important;

    }


    /* Intro */

    .intro-grid {

        grid-template-columns:
            0.8fr 1.2fr;

        gap:
            100px;

        align-items:
            end;

    }


    /* Services */

    .services-grid {

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

    }


    /* Company */

    .company-grid {

        grid-template-columns:
            1fr 1fr;

        gap:
            100px;

    }


    .company-facts {

        grid-template-columns:
            1fr 1fr;

    }


    /* Opening Hours */

    .hours-grid {

        grid-template-columns:
            1fr 1fr;

        gap:
            100px;

    }


    /* Footer */

    .footer-grid {

        grid-template-columns:
            1fr auto;

        align-items:
            center;

    }


    /* Subpages */

    .content-grid {

        grid-template-columns:
            1fr 1fr;

        align-items:
            start;

    }

}


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

@media (max-width: 899px) {


    .header-inner {

        min-height:
            88px;

    }


    .logo {

        width:
            165px;

    }


    .mobile-navigation {

        top:
            88px;

    }


    .page-main {

        padding-top:
            88px;

    }


    .hero {

        padding-top:
            88px;

    }


}


/* =====================================================
   SMALL SMARTPHONES
===================================================== */

@media (max-width: 480px) {


    .container {

        width:
            calc(100% - 24px);

    }


    .header-inner {

        min-height:
            80px;

    }


    .logo {

        width:
            145px;

    }


    .mobile-navigation {

        top:
            80px;

    }


    .hero {

        padding-top:
            80px;

    }


    .hero-content {

        padding:
            60px 0 50px;

    }


    h1 {

        font-size:
            52px;

    }


    .hero-text {

        font-size:
            16px;

    }


    .hero-actions,
    .cta-actions {

        flex-direction:
            column;

    }


    .button {

        width:
            100%;

    }


    .intro,
    .services,
    .company,
    .hours-section,
    .cta {

        padding:
            70px 0;

    }


    .company-logo {

        min-height:
            200px;

    }


    .company-logo img {

        max-width:
            360px;

    }


    .hours-list li {

        font-size:
            14px;

    }


    .page-hero {

        padding:
            70px 0 50px;

    }


    .page-content {

        padding:
            50px 0;

    }


    .contact-card,
    .project-card,
    .legal-card {

        padding:
            24px 20px;

    }


    .back-home-wrap {

        justify-content:
            stretch;

    }


    .back-home-button {

        width:
            100%;

    }

}