:root{
    --bg:#05070a;
    --text:#f2f5f7;
    --muted:rgba(242,245,247,.72);
    --line:rgba(242,245,247,.34);
    --line-strong:rgba(242,245,247,.68);
}

*{ box-sizing:border-box; }

html{
    min-height:100%;
    scroll-behavior:smooth;
}

body{
    min-height:100vh;
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:Arial, Helvetica, sans-serif;
    overflow-x:hidden;
}

.site-bg{
    position:fixed;
    inset:0;
    z-index:-3;
    background-image:url("../images/bg.jpg");
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
    transform:scale(1.015);
}

.site-overlay{
    position:fixed;
    inset:0;
    z-index:-2;
    background:
        radial-gradient(circle at 48% 43%, rgba(16,34,49,.12) 0%, rgba(0,0,0,.24) 38%, rgba(0,0,0,.54) 78%),
        linear-gradient(180deg, rgba(0,0,0,.48) 0%, rgba(0,0,0,.58) 54%, rgba(0,0,0,.84) 100%);
}

/* Landing */
.landing-main{
    min-height:100vh;
    display:grid;
    place-items:center;
    padding:8vh 24px 12vh;
}

.brand-stage{
    text-align:center;
    transform:translateY(-6vh);
}

.stage-signet{
    width:148px;
    height:auto;
    display:block;
    margin:0 auto 25px;
    filter:drop-shadow(0 0 18px rgba(255,255,255,.08));
}

.wordmark{
    margin:0 0 24px;
    font-size:clamp(2.25rem, 4.8vw, 4rem);
    line-height:1;
    font-weight:300;
    letter-spacing:.30em;
    text-indent:.30em;
}

.subtitle{
    margin:0 0 12px;
    font-size:.82rem;
    line-height:1.7;
    font-weight:400;
    letter-spacing:.32em;
    color:var(--muted);
}

.subtitle-secondary{
    margin-bottom:46px;
    opacity:.82;
}

.contact-button{
    display:inline-block;
    min-width:228px;
    padding:18px 44px;
    border:1px solid var(--line);
    background:rgba(255,255,255,.018);
    color:var(--text);
    text-decoration:none;
    font-size:.78rem;
    line-height:1;
    letter-spacing:.24em;
    text-indent:.24em;
    transition:border-color .25s ease, background-color .25s ease, transform .25s ease;
}

.contact-button:hover,
.contact-button:focus{
    border-color:var(--line-strong);
    background:rgba(255,255,255,.052);
    transform:translateY(-1px);
}

/* Kontaktformular ist standardmäßig unsichtbar und erscheint erst bei #kontakt */
.contact-panel{
    position:fixed;
    inset:0;
    z-index:40;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .28s ease, visibility .28s ease;
    background:rgba(0,0,0,.58);
    backdrop-filter:blur(8px);
}

.contact-panel:target{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

.contact-close{
    position:fixed;
    top:34px;
    right:38px;
    z-index:45;
    color:#fff;
    text-decoration:none;
    font-size:32px;
    line-height:1;
    font-weight:200;
    opacity:.72;
}

.contact-close:hover,
.contact-close:focus{
    opacity:1;
}

/* Convert Forms / Formular optisch abdunkeln */
.contact-panel form,
.contact-panel .convertforms,
.contact-panel .cf,
.contact-panel .cf-form-wrap,
.contact-panel .cf-content-wrap{
    width:min(620px, calc(100vw - 48px)) !important;
    background:rgba(3,6,10,.76) !important;
    border:1px solid rgba(255,255,255,.16) !important;
    box-shadow:0 24px 80px rgba(0,0,0,.42) !important;
    color:#fff !important;
}

.contact-panel input,
.contact-panel textarea,
.contact-panel select{
    background:rgba(255,255,255,.055) !important;
    border:1px solid rgba(255,255,255,.18) !important;
    color:#fff !important;
    box-shadow:none !important;
}

.contact-panel label,
.contact-panel .cf-label,
.contact-panel .control-label{
    color:rgba(255,255,255,.82) !important;
}

.contact-panel input::placeholder,
.contact-panel textarea::placeholder{
    color:rgba(255,255,255,.38) !important;
}

.contact-panel button,
.contact-panel input[type="submit"],
.contact-panel .btn{
    background:transparent !important;
    border:1px solid rgba(255,255,255,.42) !important;
    color:#fff !important;
    letter-spacing:.12em;
    box-shadow:none !important;
}

.legal-links{
    position:fixed;
    left:38px;
    bottom:34px;
    z-index:20;
    display:flex;
    gap:38px;
}

.legal-links a{
    color:rgba(242,245,247,.72);
    text-decoration:none;
    font-size:.68rem;
    letter-spacing:.24em;
    transition:opacity .25s ease;
}

.legal-links a:hover,
.legal-links a:focus{
    opacity:1;
}

/* Legal pages */
.fixed-signet{
    position:fixed;
    top:34px;
    left:38px;
    z-index:50;
    display:block;
    opacity:.88;
    transition:opacity .25s ease;
}

.fixed-signet:hover,
.fixed-signet:focus{
    opacity:1;
}

.fixed-signet img{
    display:block;
    width:42px;
    height:auto;
}

.legal-main{
    width:min(760px, calc(100vw - 48px));
    margin:0 auto;
    padding:142px 0 120px;
    color:rgba(242,245,247,.88);
    font-size:.95rem;
    line-height:1.88;
}

.legal-main h1,
.legal-main h2,
.legal-main h3{
    font-weight:300;
    letter-spacing:.09em;
    line-height:1.35;
    color:rgba(242,245,247,.90);
}

.legal-main h1{
    font-size:2rem;
    margin:0 0 34px;
}

.legal-main h2{
    font-size:1.28rem;
    margin:44px 0 16px;
}

.legal-main h3{
    font-size:1.05rem;
    margin:34px 0 12px;
}

.legal-main p,
.legal-main li{
    color:rgba(242,245,247,.82);
}

.legal-main a{
    color:#fff;
    text-decoration:underline;
    text-underline-offset:3px;
    text-decoration-thickness:1px;
}

.legal-main .article-info,
.legal-main .com-content-article__info,
.legal-main dl.article-info,
.legal-main .icons,
.legal-main .btn-group,
.legal-main .page-header,
.legal-main .item-page > .page-header,
.legal-main .fields-container{
    display:none !important;
}

.legal-main .com-content-article,
.legal-main .item-page,
.legal-main article{
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    padding:0 !important;
    margin:0 !important;
}

@media (max-width:900px){
    .site-bg{ background-position:46% center; }
    .stage-signet{ width:124px; }
    .brand-stage{ transform:translateY(-5vh); }
    .subtitle{
        font-size:.72rem;
        letter-spacing:.22em;
    }
}

@media (max-width:640px){
    .landing-main{ padding:7vh 20px 16vh; }
    .site-bg{ background-position:43% center; }
    .stage-signet{
        width:104px;
        margin-bottom:22px;
    }
    .wordmark{
        font-size:2rem;
        letter-spacing:.20em;
        text-indent:.20em;
        margin-bottom:22px;
    }
    .subtitle{
        font-size:.66rem;
        letter-spacing:.16em;
    }
    .subtitle-secondary{ margin-bottom:38px; }
    .contact-button{
        min-width:196px;
        padding:16px 34px;
    }
    .legal-links{
        left:22px;
        bottom:24px;
        gap:24px;
    }
    .legal-links a{
        font-size:.58rem;
        letter-spacing:.18em;
    }
    .fixed-signet{
        top:24px;
        left:24px;
    }
    .fixed-signet img{ width:36px; }
    .legal-main{
        width:calc(100vw - 44px);
        padding-top:108px;
        font-size:.9rem;
        line-height:1.82;
    }
    .legal-main h1{ font-size:1.7rem; }
}