:root{
    --bg:#f4f8fc;
    --bg2:#ffffff;
    --card:#ffffff;
    --line:rgba(20,70,120,.12);
    --text:#0c1724;
    --muted:#5d7188;
    --blue:#0077ff;
    --violet:#6b5cff;
    --shadow:0 24px 70px rgba(20,80,140,.14);
}

*{
    box-sizing:border-box;
}

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

    overflow-x:hidden;
}

body{
    font-family:Inter,Segoe UI,Arial,sans-serif;

    background:
        radial-gradient(
            circle at top left,
            rgba(0,184,255,.18),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            #f8fbff,
            #eef5fb
        );

    color:var(--text);

    overflow-x:hidden;
}

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

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

.container{
    width:min(1180px,92%);
    margin:auto;
}

/*
|--------------------------------------------------------------------------
| Header
|--------------------------------------------------------------------------
*/

.site-header{
    position:sticky;
    top:0;
    z-index:100;

    background:rgba(255,255,255,.92);

    backdrop-filter:blur(18px);

    border-bottom:1px solid rgba(20,70,120,.08);

    box-shadow:0 2px 12px rgba(20,60,100,.04);
}

.nav-shell{
    position:relative;

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

    height:72px;
}

.brand{
    display:flex;
    align-items:center;

    position:relative;
    z-index:120;
}

.brand img{
    width:205px;
    height:auto;

    filter:
        contrast(1.06)
        saturate(1.04);
}

/*
|--------------------------------------------------------------------------
| Navigation
|--------------------------------------------------------------------------
*/

.nav-toggle{
    display:none;
}

.hamburger{
    display:none;
}

.main-nav{
    display:flex;
    align-items:center;
    gap:14px;
}

.main-nav a{
    position:relative;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:10px 14px;

    border-radius:999px;

    color:#132236;

    font-size:15px;
    font-weight:700;

    transition:
        background .2s ease,
        color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}

.main-nav a:hover{
    color:var(--blue);

    background:rgba(0,119,255,.07);

    transform:translateY(-1px);
}

.main-nav a.active{
    color:#ffffff;

    background:
        linear-gradient(
            135deg,
            var(--blue),
            var(--violet)
        );

    box-shadow:
        0 12px 26px rgba(0,119,255,.22);
}

.nav-cta,
.btn-primary{
    color:white;

    background:
        linear-gradient(
            135deg,
            var(--blue),
            var(--violet)
        );

    box-shadow:
        0 10px 24px rgba(0,119,255,.18);
}

.nav-cta{
    padding:10px 18px;

    border-radius:999px;

    font-size:14px;
    font-weight:700;
}

/*
|--------------------------------------------------------------------------
| Hero
|--------------------------------------------------------------------------
*/

.hero{
    padding:18px 0 36px;

    position:relative;

    overflow:hidden;
}

.hero::before{
    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(0,119,255,.08),
            transparent 45%,
            rgba(107,92,255,.08)
        );

    pointer-events:none;
}

.hero-grid{
    display:grid;

    grid-template-columns:1fr 1.08fr;

    gap:48px;

    align-items:center;

    position:relative;
}

.eyebrow{
    display:inline-flex;

    border:1px solid var(--line);

    background:rgba(0,119,255,.08);

    border-radius:999px;

    padding:8px 14px;

    color:#0077ff;

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

    letter-spacing:.08em;

    text-transform:uppercase;
}

.hero h1,
.hero-title{
    max-width:100%;

    font-size:clamp(48px,7vw,86px);

    line-height:.92;

    margin:18px 0;

    overflow-wrap:break-word;
    word-break:normal;

    background:
        linear-gradient(
            180deg,
            #0c1724,
            #0077ff
        );

    -webkit-background-clip:text;

    color:transparent;
}

.hero p{
    font-size:22px;

    line-height:1.7;

    color:var(--muted);

    max-width:640px;
}

.hero-actions{
    display:flex;

    gap:14px;

    flex-wrap:wrap;

    margin-top:28px;
}

.btn{
    display:inline-flex;

    align-items:center;
    justify-content:center;

    padding:16px 24px;

    border-radius:20px;

    font-weight:800;

    font-size:16px;

    border:1px solid var(--line);

    transition:.2s ease;
}

.btn:hover{
    transform:translateY(-2px);
}

.btn-ghost{
    background:rgba(255,255,255,.72);

    color:#132236;
}

.hero-visual img{
    width:100%;

    border-radius:36px;

    filter:
        drop-shadow(
            0 30px 70px rgba(20,80,140,.18)
        );
}

/*
|--------------------------------------------------------------------------
| Sections
|--------------------------------------------------------------------------
*/

.content-section{
    padding:72px 0;
}

.section-muted{
    background:rgba(255,255,255,.48);

    border-block:1px solid var(--line);
}

.content-card,
.glass-card,
.service-card{
    background:rgba(255,255,255,.88);

    border:1px solid var(--line);

    box-shadow:var(--shadow);

    border-radius:30px;
}

.content-card{
    padding:42px;
}

.page-content{
    font-size:18px;

    line-height:1.9;

    color:#3f5268;
}

.page-content h2{
    font-size:34px;

    color:var(--text);
}

.section-head{
    margin-bottom:28px;
}

.section-head h2{
    font-size:42px;

    margin:14px 0;

    color:var(--text);
}

.card-grid,
.service-grid{
    display:grid;

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

    gap:22px;
}

.glass-card,
.service-card{
    padding:28px;

    min-height:190px;
}

.glass-card h3,
.service-card h3{
    font-size:24px;

    margin:12px 0;

    color:var(--text);
}

.glass-card p,
.service-card p{
    color:var(--muted);

    line-height:1.7;
}

.service-card{
    transition:
        .25s transform,
        .25s border-color,
        .25s box-shadow;
}

.service-card:hover{
    transform:translateY(-8px);

    border-color:rgba(0,119,255,.28);

    box-shadow:
        0 28px 80px rgba(0,119,255,.16);
}

.service-card span{
    display:inline-grid;

    place-items:center;

    width:54px;
    height:54px;

    border-radius:18px;

    background:rgba(0,119,255,.10);

    color:#0077ff;

    font-size:24px;
    font-weight:900;
}

/*
|--------------------------------------------------------------------------
| Kontaktformular
|--------------------------------------------------------------------------
*/

.contact-page{
    padding:58px 0 86px;
}

.contact-hero{
    position:relative;
    overflow:hidden;

    margin-bottom:28px;

    padding:46px;

    border:1px solid var(--line);
    border-radius:34px;

    background:
        radial-gradient(
            circle at top right,
            rgba(0,119,255,.18),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            rgba(255,255,255,.96),
            rgba(245,250,255,.88)
        );

    box-shadow:var(--shadow);
}

.contact-hero h1{
    margin:10px 0 14px;

    font-size:clamp(42px,6vw,68px);
    line-height:1;

    letter-spacing:-.06em;

    overflow-wrap:break-word;

    background:
        linear-gradient(
            180deg,
            #0c1724,
            #0077ff
        );

    -webkit-background-clip:text;

    color:transparent;
}

.contact-hero p{
    max-width:720px;

    margin:0;

    color:var(--muted);

    font-size:19px;
    line-height:1.8;
}

.contact-grid{
    display:grid;

    grid-template-columns:.85fr 1.45fr;

    gap:24px;
}

.contact-card{
    padding:32px;

    border:1px solid var(--line);
    border-radius:30px;

    background:rgba(255,255,255,.88);

    box-shadow:var(--shadow);

    backdrop-filter:blur(18px);
}

.contact-card h2{
    margin:0 0 12px;

    font-size:28px;

    letter-spacing:-.03em;
}

.contact-card p{
    margin:0;

    color:var(--muted);

    line-height:1.7;
}

.contact-list{
    display:grid;

    gap:18px;

    margin-top:28px;
}

.contact-list div{
    padding:18px;

    border:1px solid var(--line);
    border-radius:22px;

    background:rgba(255,255,255,.72);
}

.contact-list strong{
    display:block;

    margin-bottom:6px;

    color:var(--text);
}

.contact-list a{
    color:var(--blue);

    font-weight:800;
}

.contact-form{
    display:grid;

    gap:18px;

    margin-top:24px;
}

.form-row{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:18px;
}

.form-field{
    display:grid;

    gap:8px;
}

.form-field label{
    color:var(--text);

    font-weight:800;
}

.form-field input,
.form-field textarea{
    width:100%;

    padding:15px 16px;

    border:1px solid rgba(20,70,120,.16);
    border-radius:18px;

    background:rgba(255,255,255,.86);

    color:var(--text);

    font:inherit;

    outline:none;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}

.form-field textarea{
    resize:vertical;

    min-height:170px;
}

.form-field input:focus,
.form-field textarea:focus{
    border-color:rgba(0,119,255,.55);

    box-shadow:
        0 0 0 5px rgba(0,119,255,.10);

    transform:translateY(-1px);
}

.form-hidden{
    position:absolute;
    left:-9999px;

    opacity:0;

    pointer-events:none;
}

.form-check{
    display:flex;
    align-items:flex-start;

    gap:12px;

    color:var(--muted);

    line-height:1.6;
}

.form-check input{
    width:18px;
    height:18px;

    margin-top:4px;

    accent-color:var(--blue);

    flex:0 0 auto;
}

.form-check a{
    color:var(--blue);

    font-weight:800;
}

.form-check a:hover{
    text-decoration:underline;
}

.form-message{
    margin-top:20px;

    padding:15px 18px;

    border-radius:18px;

    font-weight:800;
}

.form-message.success{
    color:#0f7a42;

    background:rgba(34,197,94,.12);

    border:1px solid rgba(34,197,94,.22);
}

.form-message.error{
    color:#b42318;

    background:rgba(255,90,90,.12);

    border:1px solid rgba(255,90,90,.24);
}

.btn-primary{
    justify-self:start;

    border:0;
    border-radius:999px;

    padding:15px 24px;

    font-size:16px;
    font-weight:900;

    cursor:pointer;

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.btn-primary:hover{
    transform:translateY(-2px);

    box-shadow:
        0 24px 46px rgba(0,119,255,.30);
}

/*
|--------------------------------------------------------------------------
| Footer
|--------------------------------------------------------------------------
*/

.site-footer{
    position:relative;

    margin-top:72px;

    padding:64px 0 36px;

    overflow:hidden;

    background:
        radial-gradient(
            circle at top left,
            rgba(0,119,255,.14),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            rgba(248,251,255,.96),
            rgba(230,243,255,.92)
        );

    border-top:1px solid rgba(20,70,120,.10);
}

.footer-inner{
    position:relative;

    padding:42px;

    border:1px solid rgba(20,70,120,.12);
    border-radius:34px;

    background:rgba(255,255,255,.76);

    box-shadow:
        0 24px 70px rgba(20,80,140,.12);

    backdrop-filter:blur(18px);
}

.footer-top{
    display:grid;

    grid-template-columns:1.15fr 1fr 1fr .9fr;

    gap:0;
}

.footer-brand,
.footer-column{
    min-height:150px;

    padding:8px 30px;
}

.footer-brand{
    padding-left:0;
}

.footer-column{
    border-left:1px solid rgba(20,70,120,.12);
}

.footer-brand strong{
    display:block;

    margin-bottom:18px;

    color:#0c1724;

    font-size:24px;
    font-weight:950;

    letter-spacing:-.04em;
}

.footer-brand p{
    max-width:260px;

    margin:0;

    color:#5d7188;

    font-size:17px;
    line-height:1.7;
}

.footer-column-head{
    display:flex;
    align-items:center;

    gap:14px;

    margin-bottom:22px;
}

.footer-column-head span{
    display:grid;

    place-items:center;

    width:52px;
    height:52px;

    border:1px solid rgba(0,119,255,.14);
    border-radius:999px;

    background:rgba(0,119,255,.07);

    color:#0077ff;

    font-size:21px;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.70),
        0 12px 28px rgba(20,80,140,.10);
}

.footer-column-head strong{
    color:#0c1724;

    font-size:19px;
    font-weight:900;
}

.footer-mail,
.footer-link-list a{
    color:#5d7188;

    font-size:17px;
    font-weight:800;

    transition:
        color .2s ease,
        transform .2s ease;
}

.footer-mail{
    display:inline-flex;

    color:#0077ff;
}

.footer-link-list{
    display:grid;

    gap:16px;
}

.footer-link-list a{
    position:relative;

    display:inline-flex;
    align-items:center;

    gap:10px;
}

.footer-link-list a::before{
    content:"›";

    color:#0077ff;

    font-size:26px;
    line-height:1;

    transform:translateY(-1px);
}

.footer-mail:hover,
.footer-link-list a:hover{
    color:#005fd1;

    transform:translateX(4px);
}

.footer-bottom{
    position:relative;

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

    margin-top:42px;
    padding-top:28px;

    border-top:1px solid rgba(20,70,120,.12);
}

.footer-bottom::before,
.footer-bottom::after{
    content:"";

    width:160px;
    height:1px;

    margin:0 24px;

    background:rgba(20,70,120,.12);
}

.footer-bottom a{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    color:#5d7188;

    font-size:16px;
    font-weight:800;

    transition:
        color .2s ease,
        transform .2s ease;
}

.footer-bottom a::before{
    content:"♡";

    margin-right:12px;

    color:#0077ff;

    font-size:26px;
    line-height:1;
}

.footer-bottom a:hover{
    color:#0077ff;

    transform:translateY(-2px);
}

/*
|--------------------------------------------------------------------------
| Animation
|--------------------------------------------------------------------------
*/

.reveal{
    opacity:0;

    transform:translateY(18px);

    transition:.7s ease;
}

.reveal.visible{
    opacity:1;

    transform:none;
}

/*
|--------------------------------------------------------------------------
| Responsive
|--------------------------------------------------------------------------
*/

@media(max-width:900px){

    .hero-grid,
    .card-grid,
    .service-grid,
    .contact-grid{
        grid-template-columns:1fr;
    }

    .main-nav{
        position:absolute;

        top:calc(100% + 12px);
        left:0;
        right:0;

        display:grid;

        gap:10px;

        padding:18px;

        border:1px solid var(--line);
        border-radius:28px;

        background:rgba(255,255,255,.96);

        backdrop-filter:blur(18px);

        box-shadow:0 24px 70px rgba(20,80,140,.16);

        opacity:0;
        visibility:hidden;

        transform:translateY(-8px);

        pointer-events:none;

        transition:
            opacity .22s ease,
            visibility .22s ease,
            transform .22s ease;
    }

    .main-nav a{
        display:flex;

        align-items:center;
        justify-content:center;

        width:100%;

        padding:14px 16px;

        border:1px solid rgba(20,70,120,.10);
        border-radius:18px;

        background:rgba(248,251,255,.88);

        color:#132236;

        font-size:16px;
        font-weight:800;
    }

    .main-nav a:hover{
        color:var(--blue);

        background:rgba(0,119,255,.07);

        border-color:rgba(0,119,255,.22);
    }

    .main-nav a.active{
        color:#ffffff;

        background:
            linear-gradient(
                135deg,
                var(--blue),
                var(--violet)
            );

        border-color:transparent;

        box-shadow:0 14px 28px rgba(0,119,255,.22);
    }

    .main-nav .nav-cta{
        color:#ffffff;

        background:
            linear-gradient(
                135deg,
                var(--blue),
                var(--violet)
            );

        border:0;
        border-radius:18px;

        box-shadow:0 14px 28px rgba(0,119,255,.22);
    }

    .hamburger{
        position:relative;
        z-index:120;

        display:inline-grid;

        gap:5px;

        width:46px;
        height:46px;

        place-content:center;

        border:1px solid rgba(20,70,120,.12);
        border-radius:16px;

        background:rgba(255,255,255,.86);

        box-shadow:0 10px 24px rgba(20,80,140,.10);

        cursor:pointer;
    }

    .hamburger span{
        display:block;

        width:22px;
        height:2px;

        border-radius:99px;

        background:#132236;

        transition:
            transform .22s ease,
            opacity .22s ease,
            background .22s ease;
    }

    .nav-toggle:checked ~ .hamburger{
        border-color:rgba(0,119,255,.28);

        background:rgba(0,119,255,.08);
    }

    .nav-toggle:checked ~ .hamburger span:nth-child(1){
        transform:translateY(7px) rotate(45deg);

        background:var(--blue);
    }

    .nav-toggle:checked ~ .hamburger span:nth-child(2){
        opacity:0;
    }

    .nav-toggle:checked ~ .hamburger span:nth-child(3){
        transform:translateY(-7px) rotate(-45deg);

        background:var(--blue);
    }

    .nav-toggle:checked ~ .main-nav{
        opacity:1;
        visibility:visible;

        transform:none;

        pointer-events:auto;
    }

    .footer-top{
        grid-template-columns:1fr 1fr;

        gap:34px 0;
    }

    .footer-brand,
    .footer-column{
        padding:10px 26px;
    }

    .footer-brand{
        padding-left:0;
    }

    .footer-bottom::before,
    .footer-bottom::after{
        width:90px;
    }

    .brand img{
        width:170px;
    }

    .nav-shell{
        height:64px;
    }

    .hero{
        padding:24px 0 30px;
    }

    .hero h1,
    .hero-title{
        font-size:clamp(38px,11vw,56px);

        line-height:1;

        letter-spacing:-.045em;
    }

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

    .hero-actions{
        display:grid;

        grid-template-columns:1fr;

        gap:14px;
    }

    .hero-actions .btn{
        width:100%;
    }

    .contact-hero{
        padding:34px 26px;
    }
}

@media(max-width:640px){

    .container{
        width:min(100% - 44px,1180px);
    }

    .contact-page{
        padding:34px 0 64px;
    }

    .contact-hero{
        border-radius:28px;
    }

    .contact-hero h1{
        font-size:42px;
    }

    .contact-hero p{
        font-size:17px;
    }

    .content-card{
        padding:30px 24px;
    }

    .page-content{
        font-size:17px;
    }

    .page-content h2{
        font-size:30px;
    }

    .contact-card{
        padding:24px;

        border-radius:26px;
    }

    .form-row{
        grid-template-columns:1fr;
    }

    .btn-primary{
        width:100%;

        justify-self:stretch;
    }

    .site-footer{
        margin-top:54px;

        padding:54px 0 38px;
    }

    .footer-top{
        grid-template-columns:1fr;

        gap:26px;
    }

    .footer-brand,
    .footer-column{
        min-height:auto;

        padding:0 0 26px;

        border-left:0;
        border-bottom:1px solid rgba(190,215,255,.14);
    }

    .footer-brand{
        text-align:center;
    }

    .footer-brand p{
        max-width:none;
    }

    .footer-column-head{
        justify-content:center;

        margin-bottom:18px;
    }

    .footer-link-list{
        justify-items:center;
    }

    .footer-mail{
        display:flex;

        justify-content:center;
    }

    .footer-bottom{
        margin-top:28px;
        padding-top:0;

        border-top:0;

        text-align:center;
    }

    .footer-bottom::before,
    .footer-bottom::after{
        display:none;
    }

    .footer-bottom a{
        font-size:15px;
    }
}

@media(max-width:420px){

    .hero h1,
    .hero-title{
        font-size:clamp(32px,10vw,42px);

        letter-spacing:-.05em;
    }

    .eyebrow{
        width:100%;

        justify-content:center;

        font-size:12px;

        letter-spacing:.06em;
    }

    .brand img{
        width:162px;
    }
}