:root{
    --bg:#071015;
    --bg2:#0b141a;
    --panel:#0e1820;
    --panel2:#101c24;

    --text:#f3f1ec;
    --muted:#9ca8ae;

    --gold:#d9a34d;
    --orange:#d96f2b;
    --blue:#479aba;
    --violet:#9b7eb6;

    --line:#25343d;
    --goldline:rgba(217,163,77,.34);

    --max:1420px;
}

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    background:
        radial-gradient(circle at 85% 8%,rgba(217,111,43,.09),transparent 26%),
        linear-gradient(180deg,#071015,#091218 55%,#060c10);

    color:var(--text);

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    line-height:1.5;
}

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

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


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

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

    height:74px;

    background:rgba(5,12,17,.96);

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

    backdrop-filter:blur(16px);
}

.header-inner{
    max-width:var(--max);
    height:74px;

    margin:auto;
    padding:0 24px;

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

.header-brand{
    width:185px;
    height:60px;

    display:flex;
    align-items:center;

    overflow:hidden;
}

.header-brand img{
    width:180px;
    height:58px;

    object-fit:contain;
    object-position:left center;
}

.navigation{
    display:flex;
    align-items:center;
    gap:24px;
}

.navigation a{
    color:#b8c1c5;
    font-size:12px;
}

.navigation a:hover{
    color:var(--gold);
}

.nav-contact{
    border:1px solid var(--goldline);
    padding:8px 14px;
    border-radius:3px;
}

.mobile-menu{
    display:none;
    border:0;
    background:none;
    color:white;
    font-size:22px;
}


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

.hero{
    position:relative;
    overflow:hidden;

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

.hero-atmosphere{
    position:absolute;
    inset:0;

    background:
        radial-gradient(circle at 75% 48%,rgba(217,111,43,.13),transparent 30%),
        radial-gradient(circle at 20% 25%,rgba(52,120,150,.08),transparent 28%);
}

.hero-inner{
    position:relative;

    max-width:var(--max);

    min-height:560px;

    margin:auto;

    padding:48px 24px;

    display:grid;

    grid-template-columns:
        .95fr 1.05fr;

    gap:48px;

    align-items:center;
}

.eyebrow,
.section-label,
.mini-label{
    color:var(--gold);

    font-size:9px;
    font-weight:800;
    letter-spacing:.2em;
}

.hero h1{
    margin:14px 0 20px;

    font-size:
        clamp(48px,5vw,78px);

    line-height:.94;

    letter-spacing:-.045em;
}

.hero h1 span{
    color:var(--gold);
}

.hero-description{
    max-width:620px;

    color:#b2bdc1;

    font-size:15px;
}

.hero-buttons{
    display:flex;

    gap:12px;

    margin:28px 0;
}

.button{
    padding:11px 17px;

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

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

.button-main{
    background:linear-gradient(
        135deg,
        #e0ad56,
        #ae752e
    );

    color:#14100b;
}

.button-secondary{
    background:rgba(255,255,255,.02);
}

.hero-features{
    display:grid;

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

    gap:10px;

    margin-top:28px;
}

.hero-features div{
    min-height:72px;

    padding:12px;

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

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

    display:flex;
    flex-direction:column;

    justify-content:center;
}

.hero-features strong{
    color:#e1ac54;

    font-size:9px;
}

.hero-features span{
    margin-top:3px;

    color:#78878d;

    font-size:9px;
}

.hero-brand{
    min-height:420px;

    display:flex;

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

    position:relative;
}

.hero-logo{
    width:min(520px,100%);

    max-height:440px;

    object-fit:contain;

    position:relative;

    filter:
        drop-shadow(
            0 20px 35px
            rgba(0,0,0,.62)
        );
}

.hero-logo-glow{
    position:absolute;

    width:55%;
    height:55%;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(217,111,43,.18),
            transparent 70%
        );

    filter:blur(35px);
}


/* ==========================================================
   COMPANY STRIP
========================================================== */

.company-strip{
    border-bottom:1px solid var(--line);
}

.company-strip-inner{
    max-width:var(--max);

    margin:auto;

    padding:18px 24px;

    display:grid;

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

    gap:12px;
}

.company-strip-inner div{
    min-height:66px;

    padding:12px 15px;

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

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

    display:flex;
    flex-direction:column;

    justify-content:center;
}

.company-strip strong{
    margin-top:2px;

    font-size:13px;
}


/* ==========================================================
   ALLGEMEINE SEKTIONEN
========================================================== */

.section{
    max-width:var(--max);

    margin:auto;

    padding:68px 24px;
}

.section-header{
    margin-bottom:26px;

    padding-top:16px;

    border-top:1px solid var(--goldline);

    display:grid;

    grid-template-columns:
        1fr .7fr;

    gap:35px;

    align-items:end;
}

.section-header h2,
.download-section h2,
.contact-section h2{
    margin:6px 0 0;

    font-size:
        clamp(32px,3.6vw,54px);

    line-height:1;

    letter-spacing:-.035em;
}

.section-header p{
    max-width:500px;

    margin:0;

    color:var(--muted);

    font-size:13px;
}


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

.project-grid{
    display:grid;

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

    gap:16px;
}

.project-card{
    display:flex;
    flex-direction:column;

    overflow:hidden;

    min-width:0;

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

    border-radius:5px;

    background:
        linear-gradient(
            145deg,
            #0d1820,
            #0a1319
        );
}

.project-rpt{
    border-top:
        3px solid var(--orange);
}

.project-ai{
    border-top:
        3px solid var(--blue);
}

.project-qa{
    border-top:
        3px solid var(--violet);
}

.project-image,
.qa-picture{
    height:215px;

    overflow:hidden;

    background:#081116;
}

.project-image img{
    width:100%;
    height:100%;

    object-fit:cover;
}

.project-content{
    flex:1;

    padding:20px;

    display:flex;
    flex-direction:column;
}

.project-category{
    color:var(--gold);

    font-size:8px;

    font-weight:800;

    letter-spacing:.13em;
}

.project-content h3{
    margin:9px 0 8px;

    font-size:23px;

    line-height:1.08;
}

.project-content p{
    margin:0;

    color:#9eaaae;

    font-size:12px;
}

.tags{
    display:flex;

    flex-wrap:wrap;

    gap:5px;

    margin:17px 0;
}

.tags span{
    padding:4px 7px;

    border:1px solid #2b3941;

    color:#9ca8ac;

    font-size:9px;
}

.project-link{
    margin-top:auto;

    color:#dca851;

    font-size:11px;

    font-weight:700;
}

.qa-picture{
    display:grid;
    place-items:center;

    background:
        radial-gradient(
            circle,
            rgba(155,126,182,.13),
            transparent 45%
        ),
        #091218;
}

.qa-screen{
    width:112px;
    height:112px;

    display:grid;
    place-items:center;

    border-radius:50%;

    border:
        1px solid
        rgba(155,126,182,.45);
}

.qa-screen span{
    color:#b49ac8;

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


/* ==========================================================
   ENTWICKLUNG
========================================================== */

.development-layout{
    display:grid;

    grid-template-columns:
        1.3fr .7fr;

    gap:20px;
}

.timeline{
    overflow:hidden;

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

    border-radius:5px;

    background:#0a151b;
}

.timeline-item{
    display:grid;

    grid-template-columns:
        18px 76px 1fr 110px;

    gap:12px;

    align-items:center;

    padding:15px 18px;

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

.timeline-item:last-child{
    border-bottom:0;
}

.timeline-marker{
    width:9px;
    height:9px;

    border-radius:50%;

    border:
        1px solid #52666f;
}

.timeline-item.active
.timeline-marker{
    background:var(--gold);

    border-color:var(--gold);

    box-shadow:
        0 0 8px var(--gold);
}

.timeline-date{
    color:#79868b;

    font-size:9px;
}

.timeline-content{
    display:flex;
    flex-direction:column;
}

.timeline-content strong{
    font-size:12px;
}

.timeline-content span{
    margin-top:2px;

    color:#879499;

    font-size:10px;
}

.status{
    padding:6px 8px;

    text-align:center;

    border-radius:3px;

    font-size:9px;
}

.status.development{
    color:#dfad52;

    border:
        1px solid
        rgba(223,173,82,.5);
}

.status.planning{
    color:#9fb5c0;

    border:
        1px solid
        #455d68;
}

.development-info{
    padding:24px;

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

    border-radius:5px;

    background:#0d1820;
}

.development-info h3{
    margin:12px 0;

    font-size:24px;

    line-height:1.08;
}

.development-info p{
    color:#909ca1;

    font-size:12px;
}


/* ==========================================================
   TECHNOLOGIEN
========================================================== */

.tech-grid{
    display:grid;

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

    gap:10px;
}

.tech-card{
    min-height:92px;

    padding:15px;

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

    border-radius:4px;

    background:#0b161d;

    display:flex;

    flex-direction:column;

    justify-content:center;
}

.tech-card b{
    font-size:14px;
}

.tech-card span{
    margin-top:3px;

    color:#7f8d92;

    font-size:9px;
}


/* ==========================================================
   DOWNLOAD
========================================================== */

.download-section{
    min-height:230px;

    padding:30px;

    display:grid;

    grid-template-columns:
        1.25fr .75fr;

    gap:30px;

    align-items:center;

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

    border-radius:5px;

    background:
        radial-gradient(
            circle at 90% 20%,
            rgba(217,111,43,.11),
            transparent 27%
        ),
        #0b151b;
}

.download-section p{
    max-width:650px;

    color:#8f9ba0;

    font-size:12px;
}

.download-status{
    min-height:135px;

    padding:20px;

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

    display:flex;

    justify-content:center;

    align-items:center;

    gap:15px;
}

.download-icon{
    width:50px;
    height:50px;

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

    border-radius:50%;

    display:grid;
    place-items:center;

    color:var(--gold);

    font-size:22px;
}

.download-status div{
    display:flex;
    flex-direction:column;
}

.download-status strong{
    color:#dfaa4b;

    font-size:16px;
}

.download-status span{
    color:#808d92;

    font-size:11px;
}


/* ==========================================================
   CONTACT
========================================================== */

.contact-section{
    max-width:var(--max);

    margin:auto;

    padding:74px 24px;

    text-align:center;
}

.contact-section p{
    color:#808c91;

    font-size:12px;
}


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

.footer{
    border-top:1px solid var(--line);

    background:#050c10;
}

.footer-inner{
    max-width:var(--max);

    margin:auto;

    padding:22px 24px;

    display:grid;

    grid-template-columns:
        190px 1fr auto;

    gap:25px;

    align-items:center;
}

.footer-brand{
    width:180px;
    height:70px;

    overflow:hidden;
}

.footer-brand img{
    width:175px;
    height:68px;

    object-fit:contain;

    object-position:left center;
}

.footer-navigation{
    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:16px;
}

.footer-navigation a{
    color:#889599;

    font-size:10px;
}

.copyright{
    color:#5f6d72;

    font-size:9px;

    text-align:right;
}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media(max-width:1050px){

    .project-grid{
        grid-template-columns:
            1fr;
    }

    .project-card{
        display:grid;

        grid-template-columns:
            340px 1fr;
    }

    .project-image,
    .qa-picture{
        height:100%;
        min-height:240px;
    }

    .tech-grid{
        grid-template-columns:
            repeat(2,1fr);
    }

}


@media(max-width:900px){

    .mobile-menu{
        display:block;
    }

    .navigation{
        display:none;

        position:absolute;

        top:74px;

        left:0;
        right:0;

        padding:20px;

        flex-direction:column;

        background:#071015;

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

    .navigation.open{
        display:flex;
    }

    .hero-inner{
        grid-template-columns:
            1fr;
    }

    .hero-brand{
        min-height:320px;
    }

    .hero-logo{
        max-height:330px;
    }

    .hero-features,
    .company-strip-inner,
    .section-header,
    .development-layout,
    .download-section{
        grid-template-columns:
            1fr;
    }

    .timeline-item{
        grid-template-columns:
            18px 60px 1fr;
    }

    .timeline-item .status{
        grid-column:3;
    }

}


@media(max-width:650px){

    .header-brand{
        width:150px;
    }

    .header-brand img{
        width:145px;
    }

    .hero-inner{
        padding:38px 18px;
    }

    .hero h1{
        font-size:46px;
    }

    .section{
        padding:55px 18px;
    }

    .project-card{
        display:flex;
    }

    .project-image,
    .qa-picture{
        height:190px;
        min-height:0;
    }

    .tech-grid{
        grid-template-columns:
            1fr;
    }

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

        text-align:center;
    }

    .footer-brand{
        margin:auto;
    }

    .copyright{
        text-align:center;
    }

}

/* PROJECT IMAGES OFF */
#projects .project-media,
#projects .project-visual,
#projects .project-preview,
#projects .project-image,
#projects img,
#projekte .project-media,
#projekte .project-visual,
#projekte .project-preview,
#projekte .project-image,
#projekte img,
.projects-section .project-media,
.projects-section .project-visual,
.projects-section .project-preview,
.projects-section .project-image,
.projects-section img,
.project-card .project-media,
.project-card .project-visual,
.project-card .project-preview,
.project-card .project-image,
.project-card img {
    display: none !important;
}

#projects .project-card,
#projekte .project-card,
.projects-section .project-card {
    grid-template-columns: 1fr !important;
}

#projects .project-card > *,
#projekte .project-card > *,
.projects-section .project-card > * {
    width: 100% !important;
    max-width: 100% !important;
}

/* =========================================================
   PROJEKTBEREICH – KOMPAKT & PROFESSIONELL
   ========================================================= */

.project-grid{
    align-items:start !important;
    gap:18px !important;
}

.project-card{
    height:auto !important;
    min-height:0 !important;
    display:block !important;
    background:#0d1820 !important;
    border:1px solid #26363f !important;
    border-radius:5px !important;
    overflow:hidden !important;
}

.project-card .project-image,
.project-card .project-media,
.project-card .project-visual,
.project-card .project-preview,
.project-card img,
.qa-picture{
    display:none !important;
}

.project-content{
    display:block !important;
    padding:22px !important;
    width:100% !important;
    min-height:0 !important;
}

.project-category{
    display:block !important;
    margin-bottom:8px !important;
    font-size:8px !important;
    letter-spacing:.14em !important;
}

.project-content h3{
    margin:0 0 10px !important;
    font-size:23px !important;
    line-height:1.1 !important;
}

.project-content p{
    margin:0 0 16px !important;
    font-size:12px !important;
    line-height:1.55 !important;
    color:#a4b0b5 !important;
}

.tags{
    margin:0 0 16px !important;
}

.project-link{
    display:inline-block !important;
    margin:0 !important;
    color:#dca851 !important;
    font-size:10px !important;
    font-weight:700 !important;
}

.project-rpt{
    border-top:3px solid #d96f2b !important;
}

.project-ai{
    border-top:3px solid #479aba !important;
}

.project-qa{
    border-top:3px solid #9b7eb6 !important;
}

/* weniger Abstand unter dem Projektbereich */
#projekte.section{
    padding-bottom:58px !important;
}

/* =========================================================
   PROJEKTKARTEN – EINHEITLICHE HÖHE
   ========================================================= */

.project-grid{
    align-items:stretch !important;
}

.project-card{
    height:100% !important;
    min-height:220px !important;
    display:flex !important;
    flex-direction:column !important;
}

.project-content{
    flex:1 !important;
    display:flex !important;
    flex-direction:column !important;
}

.project-link{
    margin-top:auto !important;
    padding-top:14px !important;
}


/* =========================================================
   IMPRESSUM
   ========================================================= */

.impressum-section{
    max-width:var(--max);
    margin:auto;
    padding:60px 24px;
    border-top:1px solid var(--goldline);
}

.impressum-box{
    max-width:720px;
    padding:28px;
    border:1px solid var(--line);
    border-radius:5px;
    background:#0d1820;
}

.impressum-box h2{
    margin:0 0 18px;
    font-size:32px;
}

.impressum-box p{
    margin:5px 0;
    color:#a6b0b4;
    font-size:13px;
}

.impressum-box strong{
    color:#f3f1ec;
}


/* =========================================================
   KONTAKTBEREICH
   ========================================================= */

.contact-section{
    max-width:var(--max);
    margin:auto;
    padding:70px 24px;
    text-align:left;
}

.contact-layout{
    display:grid;
    grid-template-columns:.8fr 1.2fr;
    gap:45px;
    align-items:start;
}

.contact-info h2{
    margin:8px 0 16px;
    font-size:42px;
}

.contact-info p{
    max-width:480px;
    color:#8f9ba0;
    font-size:13px;
}

.contact-email{
    display:inline-block;
    margin-top:16px;
    color:var(--gold);
    font-size:17px;
    font-weight:700;
}

.contact-form{
    padding:26px;
    border:1px solid var(--line);
    background:#0d1820;
}

.form-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}

.contact-form label{
    display:flex;
    flex-direction:column;
    gap:6px;
    margin-bottom:14px;
    color:#b8c1c5;
    font-size:11px;
}

.contact-form input,
.contact-form textarea{
    width:100%;
    padding:11px 12px;

    color:#f3f1ec;
    background:#081218;

    border:1px solid #2a3942;
    border-radius:3px;

    font:inherit;
}

.contact-form input:focus,
.contact-form textarea:focus{
    outline:none;
    border-color:var(--gold);
}

.contact-form button{
    padding:11px 18px;

    border:1px solid var(--gold);
    background:var(--gold);

    color:#15100a;

    font-weight:700;
    cursor:pointer;
}

.contact-form small{
    display:block;
    margin-top:10px;

    color:#6f7c82;
    font-size:9px;
}

.impressum-box a{
    color:var(--gold);
}

@media(max-width:850px){

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

}

/* =========================================================
   CONTACT TOGGLE
   ========================================================= */

.contact-section{
    display:none !important;
    position:relative;
}

.contact-section.is-open{
    display:block !important;
}

.contact-close{
    position:absolute;
    top:20px;
    right:24px;

    width:38px;
    height:38px;

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

    background:#0d1820;
    color:#f3f1ec;

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

    cursor:pointer;
}

.contact-close:hover{
    border-color:var(--gold);
    color:var(--gold);
}


/* =========================================================
   LEGAL TOGGLE
   ========================================================= */

.legal-section{
    display:none !important;
    position:relative;
}

.legal-section.is-open{
    display:block !important;
}

.legal-close{
    position:absolute;
    top:18px;
    right:24px;

    width:38px;
    height:38px;

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

    background:#0d1820;
    color:#f3f1ec;

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

    cursor:pointer;
}

.legal-close:hover{
    border-color:var(--gold);
    color:var(--gold);
}



/* =========================================================
   LEGAL FORCE FIX
   ========================================================= */

#impressum,
#datenschutz,
#nutzungsrechte{
    display:none !important;
}

#impressum.is-open,
#datenschutz.is-open,
#nutzungsrechte.is-open{
    display:block !important;
}

.legal-force-close{
    position:absolute;
    top:18px;
    right:24px;

    width:38px;
    height:38px;

    display:grid;
    place-items:center;

    border:1px solid #31414a;
    border-radius:4px;

    background:#0d1820;
    color:#f3f1ec;

    font-size:24px;
    cursor:pointer;

    z-index:20;
}

.legal-force-close:hover{
    color:#d9a34d;
    border-color:#d9a34d;
}

#impressum,
#datenschutz,
#nutzungsrechte{
    position:relative;
}


/* =========================================================
   DATENSCHUTZ DSGVO
   ========================================================= */

#datenschutz{
    display:none !important;
}

#datenschutz.is-open{
    display:block !important;
}

.privacy-card{
    max-width:980px;
}

.privacy-card h3{
    margin-top:25px;
    margin-bottom:7px;
    font-size:15px;
}

.privacy-card p{
    max-width:820px;
}

.legal-intro{
    padding-bottom:18px;
    margin-bottom:20px !important;
    border-bottom:1px solid var(--line);
    color:#b3bec2 !important;
}


/* DATENSCHUTZ TOGGLE FINAL FIX */

#datenschutz{
    display:none !important;
}

#datenschutz.legal-open{
    display:block !important;
}


/* =========================================================
   FINAL LEGAL TARGET FIX
   reine CSS-Lösung, unabhängig von JavaScript
   ========================================================= */

#impressum,
#datenschutz,
#nutzungsrechte{
    display:none !important;
    position:relative !important;
}

#impressum:target,
#datenschutz:target,
#nutzungsrechte:target{
    display:block !important;
}

.legal-target-close{
    position:absolute;
    top:18px;
    right:24px;

    width:38px;
    height:38px;

    display:grid;
    place-items:center;

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

    background:#ffffff;
    color:#333333;

    text-decoration:none;
    font-size:24px;
    line-height:1;

    z-index:50;
}

.legal-target-close:hover{
    border-color:var(--gold);
    color:var(--gold);
}


/* =========================================================
   code_STRG PRIVACY REBUILD
   Neue ID #privacy - unabhängig von alten JS-Toggles
   ========================================================= */

#privacy{
    display:none !important;
    position:relative;
}

#privacy:target{
    display:block !important;
}

.privacy-section{
    max-width:1180px;
    margin:0 auto;
    padding:55px 24px;
    border-top:1px solid rgba(190,145,70,.28);
}

.privacy-box{
    position:relative;
    max-width:940px;
    margin:0 auto;
    padding:32px;

    border:1px solid rgba(255,255,255,.10);
    border-radius:6px;

    background:#0d1820;
}

.privacy-box h2{
    margin:7px 0 22px;
    font-size:32px;
}

.privacy-box h3{
    margin:27px 0 7px;
    font-size:15px;
}

.privacy-box p{
    max-width:820px;
    margin:7px 0;

    color:#9ca8ae;
    font-size:12px;
    line-height:1.7;
}

.privacy-intro{
    padding-bottom:18px;
    margin-bottom:24px !important;

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

    color:#c1c9cd !important;
}

.privacy-note{
    margin-top:30px !important;
    padding-top:18px;

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

    font-size:10px !important;
    color:#78868c !important;
}

.privacy-close{
    position:absolute;
    top:20px;
    right:22px;

    width:40px;
    height:40px;

    display:grid;
    place-items:center;

    border:1px solid rgba(255,255,255,.16);
    border-radius:5px;

    background:#111e27;
    color:#ffffff;

    text-decoration:none;
    font-size:25px;
    line-height:1;

    z-index:10;
}

.privacy-close:hover{
    color:#d6a34d;
    border-color:#d6a34d;
}


/* =========================================================
   code_STRG RIGHTS
   ========================================================= */

#rights{
    display:none !important;
    position:relative;
}

#rights:target{
    display:block !important;
}

.rights-section{
    max-width:1180px;
    margin:0 auto;
    padding:55px 24px;
    border-top:1px solid rgba(190,145,70,.28);
}

.rights-box{
    position:relative;
    max-width:940px;
    margin:0 auto;
    padding:32px;

    border:1px solid rgba(255,255,255,.10);
    border-radius:6px;

    background:#0d1820;
}

.rights-box h2{
    margin:7px 0 22px;
    font-size:32px;
}

.rights-box h3{
    margin:27px 0 7px;
    font-size:15px;
}

.rights-box p{
    max-width:820px;
    margin:7px 0;

    color:#9ca8ae;
    font-size:12px;
    line-height:1.7;
}

.rights-intro{
    padding-bottom:18px;
    margin-bottom:24px !important;

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

    color:#c1c9cd !important;
}

.rights-note{
    margin-top:30px !important;
    padding-top:18px;

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

    font-size:10px !important;
    color:#78868c !important;
}

.rights-close{
    position:absolute;
    top:20px;
    right:22px;

    width:40px;
    height:40px;

    display:grid;
    place-items:center;

    border:1px solid rgba(255,255,255,.16);
    border-radius:5px;

    background:#111e27;
    color:#ffffff;

    text-decoration:none;
    font-size:25px;
    line-height:1;

    z-index:10;
}

.rights-close:hover{
    color:#d6a34d;
    border-color:#d6a34d;
}


/* =========================================================
   code_STRG - WIDER RESPONSIVE LAYOUT
   ========================================================= */

:root{
    --max: 1500px;
}


/* Hauptcontainer verbreitern */
.container,
.site-container,
.hero-inner,
.project-section,
.projects-section,
.development-section,
.tech-section,
.download-section,
.contact-section,
.legal-section,
.privacy-section,
.rights-section,
.footer-inner{
    width:min(1500px, calc(100% - 64px)) !important;
    max-width:1500px !important;
    margin-left:auto !important;
    margin-right:auto !important;
}


/* Hero breiter */
.hero{
    width:100%;
}

.hero-inner{
    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(420px, .85fr) !important;

    gap:64px !important;
}


/* Hero-Bild darf mehr Raum bekommen */
.hero-visual,
.hero-image,
.hero-media{
    width:100% !important;
    max-width:none !important;
}


/* Projektbereich */
.project-grid{
    width:100%;
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
}


/* allgemeine Sektionen */
section{
    box-sizing:border-box;
}


/* große Monitore */
@media (min-width:1700px){

    :root{
        --max:1600px;
    }

    .container,
    .site-container,
    .hero-inner,
    .project-section,
    .projects-section,
    .development-section,
    .tech-section,
    .download-section,
    .contact-section,
    .legal-section,
    .privacy-section,
    .rights-section,
    .footer-inner{
        width:min(1600px, calc(100% - 96px)) !important;
        max-width:1600px !important;
    }

}


/* mittlere Desktopbreiten */
@media (max-width:1200px){

    .container,
    .site-container,
    .hero-inner,
    .project-section,
    .projects-section,
    .development-section,
    .tech-section,
    .download-section,
    .contact-section,
    .legal-section,
    .privacy-section,
    .rights-section,
    .footer-inner{
        width:calc(100% - 40px) !important;
    }

    .hero-inner{
        gap:36px !important;
    }

}


/* Tablet */
@media (max-width:900px){

    .hero-inner{
        grid-template-columns:1fr !important;
    }

    .project-grid{
        grid-template-columns:1fr !important;
    }

}


/* Smartphone */
@media (max-width:600px){

    .container,
    .site-container,
    .hero-inner,
    .project-section,
    .projects-section,
    .development-section,
    .tech-section,
    .download-section,
    .contact-section,
    .legal-section,
    .privacy-section,
    .rights-section,
    .footer-inner{
        width:calc(100% - 28px) !important;
    }

}


/* =========================================================
   code_STRG FULL WIDTH RESPONSIVE LAYOUT
   ========================================================= */

:root{
    --max: none !important;
}

/* komplette Seite an Browserbreite anpassen */
.container,
.site-container,
.hero-inner,
.project-section,
.projects-section,
.development-section,
.tech-section,
.download-section,
.contact-section,
.legal-section,
.privacy-section,
.rights-section,
.footer-inner{
    width:calc(100% - 48px) !important;
    max-width:none !important;
    margin-left:auto !important;
    margin-right:auto !important;
}


/* Header */
.header-inner,
.nav-inner{
    width:calc(100% - 48px) !important;
    max-width:none !important;
    margin-left:auto !important;
    margin-right:auto !important;
}


/* Hero */
.hero-inner{
    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(360px, .65fr) !important;

    gap:72px !important;
}


/* linke Hero-Seite nicht künstlich begrenzen */
.hero-copy,
.hero-content{
    max-width:none !important;
}


/* Logo-/Bildbereich */
.hero-visual,
.hero-image,
.hero-media{
    max-width:none !important;
    width:100% !important;
}


/* Projektbereich ebenfalls volle Breite */
.project-grid{
    width:100% !important;
    max-width:none !important;
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
}


/* Infokarten unter Hero */
.hero-stats,
.hero-features,
.summary-grid{
    width:100% !important;
}


/* große Desktopmonitore */
@media (min-width:1600px){

    .container,
    .site-container,
    .hero-inner,
    .project-section,
    .projects-section,
    .development-section,
    .tech-section,
    .download-section,
    .contact-section,
    .legal-section,
    .privacy-section,
    .rights-section,
    .footer-inner,
    .header-inner,
    .nav-inner{
        width:calc(100% - 80px) !important;
    }

}


/* normale Desktopbreite */
@media (max-width:1200px){

    .container,
    .site-container,
    .hero-inner,
    .project-section,
    .projects-section,
    .development-section,
    .tech-section,
    .download-section,
    .contact-section,
    .legal-section,
    .privacy-section,
    .rights-section,
    .footer-inner,
    .header-inner,
    .nav-inner{
        width:calc(100% - 32px) !important;
    }

    .hero-inner{
        gap:40px !important;
    }

}


/* Tablet */
@media (max-width:900px){

    .hero-inner{
        grid-template-columns:1fr !important;
    }

    .project-grid{
        grid-template-columns:1fr !important;
    }

}


/* Smartphone */
@media (max-width:600px){

    .container,
    .site-container,
    .hero-inner,
    .project-section,
    .projects-section,
    .development-section,
    .tech-section,
    .download-section,
    .contact-section,
    .legal-section,
    .privacy-section,
    .rights-section,
    .footer-inner,
    .header-inner,
    .nav-inner{
        width:calc(100% - 20px) !important;
    }

}

/* =========================================================
   code_STRG AI ASSISTANT
   ========================================================= */

.cs-ai-launcher{
    position:fixed;
    right:28px;
    bottom:28px;

    z-index:1000;

    display:flex;
    align-items:center;
    gap:10px;

    padding:12px 18px;

    border:1px solid rgba(214,163,77,.55);
    border-radius:6px;

    background:#111b21;
    color:#f3f1ec;

    box-shadow:0 15px 40px rgba(0,0,0,.35);

    cursor:pointer;

    font:inherit;
    font-size:12px;
    font-weight:700;
}

.cs-ai-launcher:hover{
    border-color:#d6a34d;
    transform:translateY(-1px);
}

.cs-ai-launcher-icon{
    width:25px;
    height:25px;

    display:grid;
    place-items:center;

    border:1px solid #d6a34d;
    border-radius:50%;

    color:#d6a34d;

    font-size:16px;
}

.cs-ai-panel{
    position:fixed;
    right:28px;
    bottom:86px;

    width:min(430px, calc(100vw - 32px));
    height:min(610px, calc(100vh - 130px));

    z-index:1001;

    display:none;
    grid-template-rows:auto 1fr auto auto auto;

    overflow:hidden;

    border:1px solid rgba(214,163,77,.35);
    border-radius:8px;

    background:#0c171e;

    box-shadow:
        0 25px 70px rgba(0,0,0,.55),
        0 0 0 1px rgba(255,255,255,.02);
}

.cs-ai-panel.is-open{
    display:grid;
}

.cs-ai-header{
    min-height:76px;

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

    padding:16px 18px;

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

    background:#101d25;
}

.cs-ai-header div{
    display:flex;
    flex-direction:column;
}

.cs-ai-header strong{
    color:#f4f1eb;
    font-size:17px;
}

.cs-ai-header small{
    margin-top:2px;

    color:#809099;
    font-size:10px;
}

.cs-ai-eyebrow{
    margin-bottom:3px;

    color:#d6a34d;

    font-size:9px;
    font-weight:800;
    letter-spacing:.16em;
}

.cs-ai-close{
    width:36px;
    height:36px;

    display:grid;
    place-items:center;

    border:1px solid rgba(255,255,255,.12);
    border-radius:5px;

    background:transparent;
    color:#ffffff;

    font-size:22px;

    cursor:pointer;
}

.cs-ai-close:hover{
    color:#d6a34d;
    border-color:#d6a34d;
}

.cs-ai-messages{
    overflow-y:auto;

    padding:18px;

    scroll-behavior:smooth;
}

.cs-ai-message{
    max-width:86%;

    margin-bottom:14px;
    padding:12px 14px;

    border-radius:6px;

    font-size:12px;
    line-height:1.55;
}

.cs-ai-message strong{
    display:block;

    margin-bottom:4px;

    font-size:10px;
}

.cs-ai-message p{
    margin:0;
}

.cs-ai-bot{
    margin-right:auto;

    border:1px solid rgba(255,255,255,.09);

    background:#14222b;
    color:#bdc8cd;
}

.cs-ai-bot strong{
    color:#d6a34d;
}

.cs-ai-user{
    margin-left:auto;

    border:1px solid rgba(214,163,77,.35);

    background:#1d2527;
    color:#f2f0eb;
}

.cs-ai-user strong{
    color:#e4b35b;
}

.cs-ai-suggestions{
    display:flex;
    gap:6px;

    overflow-x:auto;

    padding:8px 14px;

    border-top:1px solid rgba(255,255,255,.07);
}

.cs-ai-suggestions button{
    flex:0 0 auto;

    padding:7px 10px;

    border:1px solid rgba(255,255,255,.12);
    border-radius:4px;

    background:#111d24;
    color:#aebbc1;

    cursor:pointer;

    font-size:9px;
}

.cs-ai-suggestions button:hover{
    border-color:#d6a34d;
    color:#d6a34d;
}

.cs-ai-form{
    padding:12px 14px;

    border-top:1px solid rgba(255,255,255,.08);
}

.cs-ai-label{
    display:block;

    margin-bottom:5px;

    color:#8c9ba2;
    font-size:9px;
}

.cs-ai-input-row{
    display:grid;

    grid-template-columns:1fr auto;

    gap:7px;
}

.cs-ai-input-row input{
    min-width:0;

    padding:11px 12px;

    border:1px solid rgba(255,255,255,.14);
    border-radius:4px;

    outline:none;

    background:#09131a;
    color:#f5f4f0;

    font:inherit;
    font-size:11px;
}

.cs-ai-input-row input:focus{
    border-color:#d6a34d;
}

.cs-ai-input-row button{
    padding:0 16px;

    border:0;
    border-radius:4px;

    background:#d6a34d;
    color:#121212;

    cursor:pointer;

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

.cs-ai-footer{
    display:flex;
    align-items:center;
    gap:7px;

    padding:9px 14px;

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

    color:#6e7d84;

    font-size:8px;
}

.cs-ai-status-dot{
    width:6px;
    height:6px;

    border-radius:50%;

    background:#d6a34d;
}


@media(max-width:600px){

    .cs-ai-launcher{
        right:14px;
        bottom:14px;
    }

    .cs-ai-panel{
        right:8px;
        bottom:72px;

        width:calc(100vw - 16px);
        height:calc(100vh - 90px);
    }

}


/* =========================================================
   code_STRG AI ORB
   ========================================================= */

.cs-ai-launcher{
    position:fixed;
    right:28px;
    bottom:28px;

    z-index:1000;

    display:flex;
    align-items:center;
    gap:14px;

    padding:0;
    border:0;
    background:transparent;
    box-shadow:none;

    cursor:pointer;
}

.cs-ai-launcher:hover{
    transform:translateY(-2px);
}

.cs-ai-launcher-orb{
    animation:csAiLauncherFloat 4.8s ease-in-out infinite;
}

.cs-ai-bubble{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:42px;
    padding:0 16px;

    border:1px solid rgba(214,163,77,.38);
    border-radius:999px;

    background:rgba(255,255,255,.92);
    color:#3c2e17;

    box-shadow:
        0 10px 30px rgba(0,0,0,.16);

    font-size:12px;
    font-weight:800;
    letter-spacing:.04em;

    white-space:nowrap;
}

.cs-ai-orb-shell{
    position:relative;

    width:78px;
    height:78px;
    flex:0 0 78px;

    display:grid;
    place-items:center;
}

.cs-ai-orb-core{
    position:absolute;
    inset:10px;

    border-radius:50%;

    background:
        radial-gradient(circle at 35% 35%,
            #fff5d0 0%,
            #f2c86d 18%,
            #d89d36 42%,
            #a65b18 72%,
            #6f2f0d 100%
        );

    box-shadow:
        0 0 0 1px rgba(255,255,255,.10),
        0 0 22px rgba(217,163,77,.50),
        0 0 55px rgba(217,111,43,.35),
        0 12px 30px rgba(0,0,0,.30);

    animation:csAiCorePulse 2.8s ease-in-out infinite;
}

.cs-ai-orb-ring{
    position:absolute;
    inset:1px;

    border-radius:50%;
    border:1px solid rgba(214,163,77,.45);

    box-shadow:0 0 16px rgba(214,163,77,.20);

    animation:csAiRingSpin 8s linear infinite;
}

.cs-ai-orb-ring-2{
    inset:7px;
    border-style:dashed;
    border-color:rgba(255,255,255,.18);
    animation-direction:reverse;
    animation-duration:12s;
}

.cs-ai-orb-symbol{
    position:relative;
    z-index:3;

    color:#fff6e1;
    text-shadow:0 0 10px rgba(255,244,210,.45);

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

.cs-ai-orb-spark{
    position:absolute;
    z-index:4;

    width:8px;
    height:8px;

    border-radius:50%;

    background:radial-gradient(circle, #ffe9a9 0%, #d6a34d 65%, rgba(214,163,77,0) 100%);

    box-shadow:0 0 10px rgba(214,163,77,.55);
}

.cs-ai-orb-spark-1{
    top:4px;
    right:16px;
    animation:csAiSparkOne 2.6s ease-in-out infinite;
}

.cs-ai-orb-spark-2{
    bottom:10px;
    left:6px;
    animation:csAiSparkTwo 3.2s ease-in-out infinite;
}

.cs-ai-orb-spark-3{
    top:20px;
    left:-2px;
    animation:csAiSparkThree 2.9s ease-in-out infinite;
}

@keyframes csAiLauncherFloat{
    0%   { transform:translateY(0); }
    50%  { transform:translateY(-5px); }
    100% { transform:translateY(0); }
}

@keyframes csAiCorePulse{
    0%{
        transform:scale(1);
        box-shadow:
            0 0 0 1px rgba(255,255,255,.10),
            0 0 22px rgba(217,163,77,.50),
            0 0 55px rgba(217,111,43,.35),
            0 12px 30px rgba(0,0,0,.30);
    }
    50%{
        transform:scale(1.04);
        box-shadow:
            0 0 0 1px rgba(255,255,255,.14),
            0 0 28px rgba(217,163,77,.70),
            0 0 74px rgba(217,111,43,.52),
            0 12px 34px rgba(0,0,0,.34);
    }
    100%{
        transform:scale(1);
        box-shadow:
            0 0 0 1px rgba(255,255,255,.10),
            0 0 22px rgba(217,163,77,.50),
            0 0 55px rgba(217,111,43,.35),
            0 12px 30px rgba(0,0,0,.30);
    }
}

@keyframes csAiRingSpin{
    from{ transform:rotate(0deg); }
    to{ transform:rotate(360deg); }
}

@keyframes csAiSparkOne{
    0%   { transform:translate(0,0) scale(.8); opacity:.45; }
    50%  { transform:translate(4px,-6px) scale(1.2); opacity:1; }
    100% { transform:translate(0,0) scale(.8); opacity:.45; }
}

@keyframes csAiSparkTwo{
    0%   { transform:translate(0,0) scale(.9); opacity:.35; }
    50%  { transform:translate(-4px,5px) scale(1.15); opacity:.95; }
    100% { transform:translate(0,0) scale(.9); opacity:.35; }
}

@keyframes csAiSparkThree{
    0%   { transform:translate(0,0) scale(.8); opacity:.5; }
    50%  { transform:translate(-5px,-3px) scale(1.25); opacity:1; }
    100% { transform:translate(0,0) scale(.8); opacity:.5; }
}

@media(max-width:700px){

    .cs-ai-launcher{
        right:14px;
        bottom:14px;
        gap:10px;
    }

    .cs-ai-bubble{
        min-height:38px;
        padding:0 13px;
        font-size:11px;
    }

    .cs-ai-orb-shell{
        width:68px;
        height:68px;
        flex-basis:68px;
    }

    .cs-ai-orb-symbol{
        font-size:22px;
    }

}


/* =========================================================
   code_STRG IMPRESSUM REBUILD
   ========================================================= */

#legal-impressum{
    display:none !important;
    position:relative;
}

#legal-impressum:target{
    display:block !important;
}

.impressum-section{
    width:calc(100% - 48px);
    margin:0 auto;
    padding:55px 24px;
}

.impressum-box{
    position:relative;
    max-width:940px;
    margin:0 auto;
    padding:32px;

    border:1px solid rgba(255,255,255,.10);
    border-radius:6px;

    background:#0d1820;
}

.impressum-box h2{
    margin:7px 0 22px;
    font-size:32px;
}

.impressum-box h3{
    margin:26px 0 7px;
    font-size:15px;
}

.impressum-box p{
    margin:7px 0;

    color:#9ca8ae;
    font-size:12px;
    line-height:1.7;
}

.impressum-box strong{
    color:#f3f1ec;
}

.impressum-note{
    margin-top:28px !important;
    padding-top:16px;

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

    color:#78868c !important;
    font-size:10px !important;
}

.impressum-close{
    position:absolute;
    top:20px;
    right:22px;

    width:40px;
    height:40px;

    display:grid;
    place-items:center;

    border:1px solid rgba(255,255,255,.16);
    border-radius:5px;

    background:#111e27;
    color:#ffffff;

    text-decoration:none;
    font-size:25px;

    z-index:10;
}

.impressum-close:hover{
    color:#d6a34d;
    border-color:#d6a34d;
}


/* LOGO SWAP MAIN */
.brand img,
.site-logo img,
.footer-logo img,
.modal-logo img,
.contact-logo img{
    display:block;
    object-fit:contain;
    object-position:left center;
    background:transparent !important;
    box-shadow:none !important;
}

/* Header */
.brand img,
.site-logo img{
    width:170px !important;
    max-width:170px !important;
    height:auto !important;
}

/* Hero rechts */
.hero-visual img,
.hero-logo img,
.hero-media img{
    width:100% !important;
    max-width:420px !important;
    height:auto !important;
    object-fit:contain !important;
    background:transparent !important;
    border:none !important;
    box-shadow:none !important;
}

/* Footer */
.footer-logo img{
    width:120px !important;
    max-width:120px !important;
    height:auto !important;
}

/* Kleine Logos in Kontakt/Modalen */
.modal-logo img,
.contact-logo img{
    width:90px !important;
    max-width:90px !important;
    height:auto !important;
}

/* =========================================================
   code_STRG PROJECT PREMIUM
   ========================================================= */

/* Projektbereich */
.projects-section,
.project-section{
    position:relative;
    padding-top:72px !important;
    padding-bottom:82px !important;
}


/* dezente goldene Linie */
.projects-section::before,
.project-section::before{
    content:"";
    display:block;

    width:100%;
    height:1px;

    margin-bottom:30px;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(214,163,77,.70) 15%,
            rgba(214,163,77,.22) 70%,
            transparent 100%
        );
}


/* Projektüberschrift */
.projects-section h2,
.project-section h2{
    margin-top:8px !important;
    margin-bottom:16px !important;

    font-size:clamp(34px, 3vw, 52px) !important;
    line-height:1.05 !important;
}


/* Grid */
.project-grid{
    display:grid !important;
    grid-template-columns:repeat(3, minmax(0,1fr)) !important;
    gap:22px !important;

    align-items:stretch !important;

    margin-top:34px !important;
}


/* einzelne Karte */
.project-card{
    position:relative;

    min-height:300px !important;
    height:100% !important;

    display:flex !important;
    flex-direction:column !important;

    overflow:hidden;

    border:
        1px solid rgba(255,255,255,.10) !important;

    border-radius:8px !important;

    background:
        linear-gradient(
            145deg,
            rgba(18,31,39,.96),
            rgba(10,20,27,.98)
        ) !important;

    box-shadow:
        0 14px 32px rgba(0,0,0,.18);

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


/* feine Goldkante oben */
.project-card::before{
    content:"";

    position:absolute;
    top:0;
    left:0;
    right:0;

    height:2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(214,163,77,.85),
            transparent
        );

    opacity:.55;

    transition:opacity .25s ease;
}


/* Hover */
.project-card:hover{
    transform:translateY(-5px);

    border-color:
        rgba(214,163,77,.38) !important;

    box-shadow:
        0 22px 45px rgba(0,0,0,.30),
        0 0 28px rgba(214,163,77,.06);
}

.project-card:hover::before{
    opacity:1;
}


/* Inhalt */
.project-content{
    flex:1 !important;

    display:flex !important;
    flex-direction:column !important;

    padding:26px !important;
}


/* kleiner Projekttyp oben */
.project-content > span:first-child,
.project-category,
.project-status,
.project-label{
    color:#d6a34d !important;

    font-size:10px !important;
    font-weight:800 !important;

    letter-spacing:.10em;
    text-transform:uppercase;
}


/* Projekttitel */
.project-card h3{
    margin:
        12px 0 12px !important;

    color:#f5f2eb !important;

    font-size:24px !important;
    line-height:1.15 !important;
}


/* Beschreibung */
.project-card p{
    margin-bottom:18px !important;

    color:#9dabb2 !important;

    font-size:13px !important;
    line-height:1.65 !important;
}


/* Tags */
.project-tags{
    display:flex !important;
    flex-wrap:wrap !important;

    gap:7px !important;

    margin-top:auto !important;
    margin-bottom:15px !important;
}

.project-tags span,
.project-tag{
    display:inline-flex;

    align-items:center;

    padding:6px 9px;

    border:
        1px solid rgba(255,255,255,.10);

    border-radius:999px;

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

    color:#9eabb1;

    font-size:9px;
    font-weight:600;
}


/* Entwicklungsstand-Link */
.project-link{
    width:max-content;

    margin-top:auto !important;
    padding-top:14px !important;

    color:#d6a34d !important;

    font-size:11px !important;
    font-weight:800 !important;

    text-decoration:none !important;

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

.project-link:hover{
    color:#f1c975 !important;
    transform:translateX(4px);
}


/* Bilder bleiben bewusst aus */
.project-card img,
.project-image,
.project-media{
    display:none !important;
}


/* Tablet */
@media(max-width:1050px){

    .project-grid{
        grid-template-columns:
            repeat(2, minmax(0,1fr)) !important;
    }

}


/* Smartphone */
@media(max-width:720px){

    .project-grid{
        grid-template-columns:
            1fr !important;
    }

    .project-card{
        min-height:0 !important;
    }

    .project-content{
        padding:22px !important;
    }

}


/* =========================================================
   code_STRG WORKFLOW
   ========================================================= */

.workflow-section{
    width:calc(100% - 80px);
    max-width:none;

    margin:0 auto;
    padding:78px 0 86px;
}

.workflow-head{
    max-width:820px;
    margin-bottom:42px;
}

.workflow-head h2{
    margin:8px 0 14px;

    color:#f4f1eb;

    font-size:clamp(34px,3.2vw,54px);
    line-height:1.05;
}

.workflow-head p{
    max-width:720px;

    margin:0;

    color:#93a1a8;

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


/* vier breite Karten */

.workflow-grid{
    position:relative;

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

    gap:18px;
}


/* Verbindungslinie */

.workflow-grid::before{
    content:"";

    position:absolute;

    top:47px;
    left:8%;
    right:8%;

    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(214,163,77,.45),
            rgba(214,163,77,.45),
            transparent
        );

    z-index:0;
}


.workflow-card{
    position:relative;
    z-index:1;

    min-height:245px;

    padding:26px;

    overflow:hidden;

    border:1px solid rgba(255,255,255,.09);
    border-radius:8px;

    background:
        linear-gradient(
            145deg,
            rgba(17,31,39,.97),
            rgba(9,19,26,.98)
        );

    box-shadow:
        0 15px 38px rgba(0,0,0,.20);

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


.workflow-card:hover{
    transform:translateY(-6px);

    border-color:
        rgba(214,163,77,.42);

    box-shadow:
        0 24px 48px rgba(0,0,0,.30),
        0 0 32px rgba(214,163,77,.07);
}


.workflow-number{
    position:absolute;

    top:17px;
    right:20px;

    color:rgba(214,163,77,.24);

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


.workflow-icon{
    position:relative;

    width:54px;
    height:54px;

    display:grid;
    place-items:center;

    margin-bottom:27px;

    border:1px solid rgba(214,163,77,.40);
    border-radius:50%;

    background:#101d25;

    color:#d6a34d;

    box-shadow:
        0 0 26px rgba(214,163,77,.10);

    font-size:20px;
}


.workflow-card h3{
    margin:0 0 10px;

    color:#f1eee7;

    font-size:20px;
}


.workflow-card p{
    margin:0;

    color:#8e9ba2;

    font-size:12px;
    line-height:1.65;
}


/* kleine Goldkante */

.workflow-card::after{
    content:"";

    position:absolute;

    left:0;
    bottom:0;

    width:0;
    height:2px;

    background:#d6a34d;

    transition:width .35s ease;
}


.workflow-card:hover::after{
    width:100%;
}


/* Responsive */

@media(max-width:1100px){

    .workflow-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .workflow-grid::before{
        display:none;
    }

}


@media(max-width:700px){

    .workflow-section{
        width:calc(100% - 28px);
        padding:56px 0 64px;
    }

    .workflow-grid{
        grid-template-columns:1fr;
    }

    .workflow-card{
        min-height:auto;
    }

}


/* =========================================================
   PUBLIC TECHNOLOGY SECTION
   ========================================================= */

.public-tech-section{
    width:calc(100% - 80px);
    margin:0 auto;

    padding:52px 0 58px;
}

.public-tech-head{
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:end;

    gap:40px;

    margin-bottom:24px;
}

.public-tech-head h2{
    margin:5px 0 0;

    font-size:clamp(34px,3vw,48px);
    line-height:1;
}

.public-tech-head p{
    max-width:620px;

    margin:0;

    color:#91a0a8;

    font-size:12px;
    line-height:1.6;
}

.public-tech-grid{
    display:grid;

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

    gap:10px;
}

.public-tech-card{
    min-height:105px;

    display:flex;
    flex-direction:column;
    justify-content:center;

    padding:17px 18px;

    border:1px solid rgba(255,255,255,.10);
    border-radius:5px;

    background:#0d1a21;

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

.public-tech-card:hover{
    transform:translateY(-3px);

    border-color:
        rgba(214,163,77,.42);
}

.public-tech-card strong{
    margin-bottom:6px;

    color:#f1eee8;

    font-size:13px;
}

.public-tech-card span{
    color:#7f9098;

    font-size:9px;
    line-height:1.45;
}


@media(max-width:1400px){

    .public-tech-grid{
        grid-template-columns: repeat(3,minmax(0,1fr));
    }

}


@media(max-width:800px){

    .public-tech-head{
        grid-template-columns:1fr;
        gap:14px;
    }

    .public-tech-grid{
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

}


@media(max-width:520px){

    .public-tech-section{
        width:calc(100% - 28px);
    }

    .public-tech-grid{
        grid-template-columns:1fr;
    }

}



/* =========================================================
   TECHNOLOGIEN - KOMPAKTER 3x2 BLOCK
   ========================================================= */

.public-tech-section{
    width:calc(100% - 80px) !important;
    max-width:1320px !important;

    margin-left:auto !important;
    margin-right:auto !important;

    padding-top:48px !important;
    padding-bottom:58px !important;
}


/* Kopfbereich ebenfalls kompakter */
.public-tech-head{
    grid-template-columns:
        minmax(300px,.8fr)
        minmax(420px,1.2fr) !important;

    gap:50px !important;

    margin-bottom:26px !important;
}


/* Karten nicht mehr über komplette Seitenbreite ziehen */
.public-tech-grid{
    display:grid !important;

    grid-template-columns:
        repeat(3,minmax(260px,1fr)) !important;

    gap:14px !important;

    max-width:1180px !important;

    margin-left:auto !important;
    margin-right:auto !important;
}


/* Karten kompakter */
.public-tech-card{
    min-height:92px !important;

    padding:
        15px 17px !important;

    justify-content:center !important;
}


/* Titel etwas ruhiger */
.public-tech-card strong{
    margin-bottom:5px !important;

    font-size:13px !important;
}


/* Beschreibung */
.public-tech-card span{
    font-size:9px !important;
    line-height:1.4 !important;
}


/* große Monitore:
   nicht weiter wachsen lassen */
@media(min-width:1600px){

    .public-tech-section{
        max-width:1320px !important;
    }

    .public-tech-grid{
        max-width:1180px !important;
    }

}


/* mittlere Bildschirme */
@media(max-width:1100px){

    .public-tech-grid{
        grid-template-columns:
            repeat(2,minmax(240px,1fr)) !important;

        max-width:850px !important;
    }

}


/* Smartphone */
@media(max-width:650px){

    .public-tech-section{
        width:calc(100% - 28px) !important;
    }

    .public-tech-head{
        grid-template-columns:1fr !important;
        gap:14px !important;
    }

    .public-tech-grid{
        grid-template-columns:1fr !important;
        max-width:520px !important;
    }

}

/* =========================================================
   code_STRG HERO HINTS
   ========================================================= */

.hero-hints{
    display:flex;
    flex-wrap:wrap;
    gap:12px;

    margin-top:26px;
    margin-bottom:26px;
}

.hero-hint{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:40px;
    padding:0 18px;

    border:1px solid rgba(255,255,255,.14);
    border-radius:3px;

    background:rgba(15,28,36,.72);

    color:#f1eee8;

    font-size:10px;
    font-weight:800;
    letter-spacing:.04em;

    cursor:default;
    user-select:none;
}

.hero-hint-primary{
    border-color:rgba(214,163,77,.55);

    background:
        linear-gradient(
            135deg,
            #d6a34d,
            #bd8432
        );

    color:#17130d;
}

@media(max-width:600px){

    .hero-hints{
        gap:8px;
    }

    .hero-hint{
        width:100%;
    }

}


/* =========================================================
   code_STRG COMPANY STORY
   ========================================================= */

.company-story-section{
    width:calc(100% - 80px);
    max-width:1380px;
    margin:0 auto;
    padding:44px 0 70px;
}

.company-story-box{
    position:relative;
    overflow:hidden;

    max-width:1200px;
    margin:0 auto;
    padding:42px 44px 40px;

    border:1px solid rgba(214,163,77,.65);
    border-radius:10px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.05) 0%,
            rgba(18,25,31,.94) 12%,
            rgba(10,17,23,.98) 45%,
            rgba(28,22,12,.96) 100%
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.14),
        inset 0 -1px 0 rgba(98,67,22,.45),
        0 18px 38px rgba(0,0,0,.28),
        0 0 0 1px rgba(214,163,77,.12),
        0 0 24px rgba(214,163,77,.08);
}

.company-story-box::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.14) 0%,
            rgba(255,255,255,0) 22%,
            rgba(214,163,77,.08) 46%,
            rgba(255,255,255,0) 70%
        );
}

.company-story-box::after{
    content:"";
    position:absolute;
    inset:10px;

    border:1px solid rgba(214,163,77,.22);
    border-radius:7px;

    pointer-events:none;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        inset 0 -1px 0 rgba(214,163,77,.08);
}

.company-story-box h2{
    position:relative;
    z-index:1;

    margin:8px 0 22px;

    color:#f5f1e8;
    font-size:clamp(30px, 3vw, 48px);
    line-height:1.08;
}

.company-story-box p{
    position:relative;
    z-index:1;

    margin:0 0 18px;

    color:#c5cbd0;
    font-size:14px;
    line-height:1.78;
}

.company-story-claim{
    position:relative;
    z-index:1;

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

    margin-top:12px;
    padding:12px 20px;

    border:1px solid rgba(214,163,77,.50);
    border-radius:4px;

    background:
        linear-gradient(
            180deg,
            rgba(214,163,77,.24),
            rgba(135,93,33,.18)
        );

    color:#f1d18a;
    font-size:13px;
    font-weight:800;
    letter-spacing:.10em;
    text-transform:uppercase;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 6px 14px rgba(0,0,0,.18);
}

@media(max-width:900px){

    .company-story-section{
        width:calc(100% - 36px);
        padding:34px 0 54px;
    }

    .company-story-box{
        padding:30px 24px 28px;
    }

    .company-story-box p{
        font-size:13px;
        line-height:1.72;
    }

}

@media(max-width:560px){

    .company-story-section{
        width:calc(100% - 22px);
    }

    .company-story-box{
        padding:24px 18px 22px;
    }

    .company-story-box h2{
        font-size:28px;
    }

}


/* =========================================================
   code_STRG PUBLIC FINAL POLISH
   ========================================================= */


/* ---------------------------------------------------------
   HERO
   --------------------------------------------------------- */

.hero-copy p,
.hero-content p{
    max-width:760px !important;
    font-size:15px !important;
    line-height:1.7 !important;
}


/* ---------------------------------------------------------
   FIRMENBESCHREIBUNG
   --------------------------------------------------------- */

.company-story-box h2{
    max-width:950px !important;

    font-size:clamp(30px,2.6vw,43px) !important;
    line-height:1.10 !important;

    margin-bottom:26px !important;
}

.company-story-box p{
    max-width:1060px !important;

    margin-bottom:21px !important;

    font-size:14px !important;
    line-height:1.82 !important;
}


/* Rahmen noch etwas metallischer */

.company-story-box{
    border-color:rgba(220,169,77,.72) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.17),
        inset 0 -2px 0 rgba(94,59,14,.38),
        inset 1px 0 0 rgba(255,214,126,.06),
        0 18px 42px rgba(0,0,0,.30),
        0 0 0 1px rgba(214,163,77,.10),
        0 0 26px rgba(214,163,77,.07) !important;
}


/* ---------------------------------------------------------
   ARBEITSWEISE
   --------------------------------------------------------- */

.workflow-section{
    max-width:1600px !important;
}

.workflow-head{
    max-width:850px !important;
}

.workflow-card{
    min-height:215px !important;
}


/* ---------------------------------------------------------
   TECHNOLOGIEN / KOMPETENZEN
   --------------------------------------------------------- */

.public-tech-section{
    max-width:1320px !important;
}

.public-tech-grid{
    max-width:1180px !important;

    grid-template-columns:
        repeat(3,minmax(0,1fr)) !important;

    gap:14px !important;
}

.public-tech-card{
    min-height:92px !important;
}


/* ---------------------------------------------------------
   DOWNLOADBEREICH
   --------------------------------------------------------- */

.download-section{
    margin-top:56px !important;
    margin-bottom:62px !important;
}

.download-section h2{
    max-width:720px !important;

    font-size:clamp(36px,3.2vw,52px) !important;
    line-height:1.04 !important;
}


/* ---------------------------------------------------------
   NAVIGATION
   --------------------------------------------------------- */

header nav a{
    white-space:nowrap;
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media(max-width:900px){

    .company-story-box h2{
        font-size:32px !important;
    }

    .company-story-box p{
        font-size:13px !important;
    }

    .public-tech-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr)) !important;
    }

}


@media(max-width:600px){

    .public-tech-grid{
        grid-template-columns:1fr !important;
    }

}


/* code_STRG final: supplied transparent logo assets */
.header{height:78px;background:rgba(4,12,17,.97)}
.header-inner{height:78px;width:calc(100% - 80px)!important}
.header-brand{width:236px;height:68px;min-width:0;overflow:visible}
.header-brand img{width:225px;height:66px;object-fit:contain;object-position:left center}
.hero{background:linear-gradient(90deg,#061118 0%,#061118 38%,#10130f 100%)}
.hero-atmosphere{pointer-events:none;background:radial-gradient(ellipse at 74% 46%,rgba(239,124,13,.2),transparent 33%),radial-gradient(ellipse at 90% 78%,rgba(166,84,9,.13),transparent 36%)}
.hero-atmosphere::after{content:"";position:absolute;left:38%;right:-8%;bottom:-19%;height:62%;background:linear-gradient(0deg,rgba(239,116,11,.14),transparent 72%),repeating-linear-gradient(0deg,transparent 0 43px,rgba(244,139,26,.18) 44px 45px),repeating-linear-gradient(90deg,transparent 0 73px,rgba(244,139,26,.12) 74px 75px);transform:perspective(560px) rotateX(58deg);transform-origin:bottom center;opacity:.55;mask-image:linear-gradient(90deg,transparent 0%,#000 36%)}
.hero-inner{width:calc(100% - 100px)!important;min-height:530px;padding:30px 12px 38px;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)!important;gap:28px!important}
.hero-text,.hero-brand{min-width:0}
.hero h1{font-size:clamp(50px,4.1vw,76px);line-height:1.02;white-space:nowrap}
.hero-description{max-width:620px;font-size:16px;line-height:1.55;color:#d8dbdb}
.hero-hints{margin:24px 0 30px}
.hero-hint{min-height:50px;padding:0 22px;cursor:pointer;transition:border-color .2s,transform .2s,box-shadow .2s}
.hero-hint:hover,.hero-hint:focus-visible{border-color:#f5bb59;box-shadow:0 0 18px rgba(219,129,29,.16);transform:translateY(-2px)}
.hero-text{transform:translateY(16px)}
.hero-features{gap:16px;margin-top:46px}
.hero-features div{min-height:72px;padding:13px 16px;border-color:rgba(201,152,67,.28);background:rgba(5,16,21,.78)}
.hero-features strong{font-size:11px}
.hero-features span{font-size:10px;color:#bcc4c6}
.hero-brand{min-height:450px;width:100%;overflow:visible}
.hero-logo{position:relative;z-index:1;display:block;width:min(100%,820px);height:auto;max-height:500px;object-fit:contain;transform:translateY(-8px);filter:drop-shadow(0 16px 32px rgba(177,79,2,.25))}
.hero-logo-glow{width:92%;height:83%;background:radial-gradient(ellipse,rgba(224,114,10,.2),transparent 66%);filter:blur(22px)}
.footer-brand img{display:block;width:190px;height:auto;max-height:72px;object-fit:contain}
.company-story-section{width:calc(100% - 120px);max-width:1420px;scroll-margin-top:100px}
.company-story-box{max-width:1340px}
.company-story-box h2{max-width:none!important;font-size:clamp(32px,2.2vw,40px)!important}
.company-story-box h2 span{color:#e5a439}
.company-story-box p{max-width:900px!important;font-size:15px!important}
.contact-section,.privacy-section,.rights-section,.impressum-section{scroll-margin-top:100px}
@media(max-width:1400px){
  .header-inner{width:calc(100% - 48px)!important}
  .hero-inner{width:calc(100% - 54px)!important;grid-template-columns:minmax(0,1fr) minmax(0,.9fr)!important;gap:20px!important}
  .hero h1{font-size:clamp(48px,4vw,62px)}
  .hero-logo{max-height:430px}
}
@media(max-width:900px){
  .hero-inner{width:calc(100% - 40px)!important;grid-template-columns:minmax(0,1fr)!important;gap:8px!important;padding:40px 8px 28px}
  .hero-text{transform:none}
  .hero h1{white-space:normal}
  .hero-description{max-width:760px}
  .hero-brand{min-height:0;padding:0 0 6px}
  .hero-logo{width:min(100%,680px);max-height:none}
  .hero-features{margin-top:24px}
  .company-story-section{width:calc(100% - 40px)}
}
@media(max-width:650px){
  .header{height:70px}.header-inner{height:70px;width:calc(100% - 28px)!important}
  .header-brand{width:174px;height:58px}.header-brand img{width:174px;height:58px}
  .hero-inner{width:calc(100% - 24px)!important;padding:33px 0 22px}
  .hero h1{font-size:clamp(35px,8.4vw,48px)!important;line-height:1.05;white-space:normal}
  .hero-description{font-size:14px}
  .hero-hints{gap:9px;margin:20px 0}
  .hero-hint{width:auto;flex:1 1 180px;min-height:44px;padding:0 12px;text-align:center}
  .hero-features{grid-template-columns:1fr!important;gap:8px}
  .hero-features div{min-height:54px}
  .hero-logo{width:100%;max-height:none}
  .company-story-section{width:calc(100% - 28px)}
  .company-story-box p{font-size:13px!important}
  .footer-brand img{width:165px}
  .cs-ai-launcher{right:2px;bottom:2px;gap:0}
  .cs-ai-bubble{display:none}
  .cs-ai-orb-shell{width:44px;height:44px;flex-basis:44px}
  .cs-ai-orb-core{inset:6px}
  .cs-ai-orb-symbol{font-size:15px}
  .cs-ai-panel{bottom:54px;height:calc(100dvh - 64px)}
}

/* =========================================================
   code_STRG HERO LOGO EFFECT
   Subtiles Schweben + pulsierender Tech-Glow
   ========================================================= */

img[src*="code_strg_hero_logo"] {
    position: relative;
    transform-origin: center center;
    will-change: transform, filter;

    animation:
        codestrgHeroFloat 6.5s ease-in-out infinite,
        codestrgHeroGlow 4.8s ease-in-out infinite;

    transition:
        filter .45s ease,
        transform .45s ease;
}

@keyframes codestrgHeroFloat {
    0%,
    100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-7px) scale(1.006);
    }
}

@keyframes codestrgHeroGlow {
    0%,
    100% {
        filter:
            drop-shadow(0 0 5px rgba(255, 142, 0, .18))
            drop-shadow(0 0 16px rgba(255, 115, 0, .08));
    }

    50% {
        filter:
            drop-shadow(0 0 9px rgba(255, 165, 35, .34))
            drop-shadow(0 0 24px rgba(255, 105, 0, .16));
    }
}

img[src*="code_strg_hero_logo"]:hover {
    filter:
        drop-shadow(0 0 10px rgba(255, 178, 55, .42))
        drop-shadow(0 0 30px rgba(255, 105, 0, .22));

    transform: translateY(-4px) scale(1.012);
}

@media (prefers-reduced-motion: reduce) {
    img[src*="code_strg_hero_logo"] {
        animation: none;
        transform: none;
    }
}


/* =========================================================
   code_STRG HERO LOGO EFFECT
   Subtiles Schweben + pulsierender Tech-Glow
   ========================================================= */

img[src*="code_strg_hero_logo"] {
    position: relative;
    transform-origin: center center;
    will-change: transform, filter;

    animation:
        codestrgHeroFloat 6.5s ease-in-out infinite,
        codestrgHeroGlow 4.8s ease-in-out infinite;

    transition:
        filter .45s ease,
        transform .45s ease;
}

@keyframes codestrgHeroFloat {
    0%,
    100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-7px) scale(1.006);
    }
}

@keyframes codestrgHeroGlow {
    0%,
    100% {
        filter:
            drop-shadow(0 0 5px rgba(255, 142, 0, .18))
            drop-shadow(0 0 16px rgba(255, 115, 0, .08));
    }

    50% {
        filter:
            drop-shadow(0 0 9px rgba(255, 165, 35, .34))
            drop-shadow(0 0 24px rgba(255, 105, 0, .16));
    }
}

img[src*="code_strg_hero_logo"]:hover {
    filter:
        drop-shadow(0 0 10px rgba(255, 178, 55, .42))
        drop-shadow(0 0 30px rgba(255, 105, 0, .22));

    transform: translateY(-4px) scale(1.012);
}

@media (prefers-reduced-motion: reduce) {
    img[src*="code_strg_hero_logo"] {
        animation: none;
        transform: none;
    }
}