html {
    font-size: 16px;
    scroll-behavior: smooth;
}

* {
    box-sizing: border-box;
}

:root {
    --q-bg: #090b0d;
    --q-bg-warm: #160d08;
    --q-panel: #11151a;
    --q-panel-soft: #171b20;
    --q-orange: #ff8a00;
    --q-orange-soft: #d87400;
    --q-white: #f4f5f6;
    --q-text: #c5c9cf;
    --q-muted: #7f8791;
    --q-line: rgba(255, 255, 255, 0.09);
}

html,
body {
    margin: 0;
    min-height: 100%;
    background: var(--q-bg);
    color: var(--q-white);
    font-family: "Segoe UI", Arial, sans-serif;
}

body {
    margin-bottom: 0;
}

main {
    width: 100%;
}

.container {
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* HERO */

.shopq-hero {
    min-height: 620px;
    padding: 100px max(7vw, 40px);
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(360px, 0.8fr);
    align-items: center;
    gap: 70px;
    background: radial-gradient(circle at 72% 45%, rgba(255, 138, 0, 0.10), transparent 27%), linear-gradient(110deg, #080a0c 0%, #160d08 58%, #0a0c0e 100%);
    border-bottom: 1px solid var(--q-line);
}

.shopq-hero-content {
    max-width: 820px;
}

.shopq-kicker {
    margin: 0 0 22px;
    color: var(--q-orange);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.22em;
}

.shopq-hero h1 {
    margin: 0;
    font-size: clamp(3.4rem, 6vw, 6.5rem);
    line-height: 0.96;
    letter-spacing: -0.055em;
    font-weight: 800;
}

    .shopq-hero h1 span {
        color: #9ca3ad;
    }

.shopq-lead {
    max-width: 760px;
    margin: 32px 0 0;
    color: var(--q-text);
    font-size: 1.18rem;
    line-height: 1.75;
}

.shopq-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 34px;
}

.shopq-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 0 22px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 750;
    transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

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

.shopq-button-primary {
    background: var(--q-orange);
    color: #080808;
}

    .shopq-button-primary:hover {
        background: #ffa126;
        color: #080808;
    }

.shopq-button-secondary {
    color: var(--q-white);
    background: #15191e;
    border: 1px solid #30363d;
}

    .shopq-button-secondary:hover {
        border-color: var(--q-orange);
        color: var(--q-white);
    }

.shopq-meta {
    margin-top: 18px;
    color: var(--q-muted);
    font-size: 0.82rem;
}

/* Q-FAMILIE / ORBIT */

.shopq-orbit {
    position: relative;
    width: min(480px, 38vw);
    aspect-ratio: 1;
    margin: auto;
    border: 1px solid rgba(255, 138, 0, 0.18);
    border-radius: 50%;
}

    .shopq-orbit::before,
    .shopq-orbit::after {
        content: "";
        position: absolute;
        inset: 12%;
        border: 1px solid rgba(255,255,255,.08);
        border-radius: 50%;
        transform: rotate(27deg);
    }

    .shopq-orbit::after {
        inset: 24%;
        transform: rotate(-24deg);
    }

.shopq-core {
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 50%;
    width: 190px;
    height: 190px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #050607;
    border: 1px solid rgba(255, 138, 0, .45);
    box-shadow: 0 0 70px rgba(255, 138, 0, .12);
}

    .shopq-core strong {
        font-size: 2.3rem;
        letter-spacing: -0.06em;
    }


    .shopq-core small {
        margin-top: 7px;
        color: var(--q-muted);
        font-size: .62rem;
        letter-spacing: .08em;
    }

.shopq-product {
    position: absolute;
    z-index: 3;
    padding: 9px 15px;
    border-radius: 999px;
    background: #11161c;
    border: 1px solid #303842;
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
    font-size: .82rem;
    font-weight: 750;
}

.shopq-product-storq {
    top: 6%;
    left: 10%;
}

.shopq-product-powerq {
    top: 20%;
    right: -3%;
}

.shopq-product-reachq {
    bottom: 15%;
    left: -2%;
}

.shopq-product-orcha {
    right: 2%;
    bottom: 4%;
}

/* INFO STRIP */

.shopq-strip {
    min-height: 66px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
    background: #090c0f;
    border-top: 1px solid var(--q-line);
    border-bottom: 1px solid var(--q-line);
}

    .shopq-strip span {
        padding: 8px 20px;
        color: #929aa5;
        text-align: center;
        font-size: .69rem;
        font-weight: 700;
        letter-spacing: .16em;
        border-right: 1px solid var(--q-line);
    }

        .shopq-strip span:last-child {
            border-right: 0;
        }

/* PRODUKTE */

.shopq-products {
    padding: 100px max(7vw, 40px) 130px;
    background: linear-gradient(115deg, #150c07 0%, #0b0d10 62%, #090b0d 100%);
}

    .shopq-products > h2 {
        max-width: 700px;
        margin: 0 0 48px;
        font-size: clamp(2.8rem, 5vw, 5rem);
        line-height: 1;
        letter-spacing: -0.05em;
    }

.shopq-product-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    max-width: 1450px;
}

.shopq-card {
    min-height: 290px;
    padding: 32px;
    border-radius: 18px;
    background: linear-gradient(145deg, #15191e, #0e1115);
    border: 1px solid #292f36;
    box-shadow: 0 22px 60px rgba(0,0,0,.22);
}

    .shopq-card:first-child {
        border-color: rgba(255, 138, 0, .42);
    }

.shopq-card-tag {
    display: inline-block;
    margin-bottom: 40px;
    color: var(--q-orange);
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .15em;
}

.shopq-card h3 {
    margin: 0 0 18px;
    font-size: 2rem;
    letter-spacing: -.035em;
}

.shopq-card p {
    margin: 0;
    color: var(--q-text);
    line-height: 1.75;
}

/* ASP.NET STANDARD-LAYOUT BÄNDIGEN */

header {
    background: #080a0c;
}

.navbar {
    min-height: 70px;
    background: #080a0c !important;
    border: 0 !important;
    border-bottom: 1px solid var(--q-line) !important;
    box-shadow: none !important;
}

.navbar-brand,
.nav-link {
    color: var(--q-white) !important;
}

.navbar-brand {
    font-weight: 800;
}

.nav-link:hover {
    color: var(--q-orange) !important;
}

footer,
.footer {
    position: relative !important;
    background: #080a0c;
    color: var(--q-muted);
    border-top: 1px solid var(--q-line) !important;
}

/* RESPONSIVE */

@media (max-width: 980px) {
    .shopq-hero {
        grid-template-columns: 1fr;
        padding-top: 70px;
    }

    .shopq-orbit {
        width: min(480px, 80vw);
    }

    .shopq-product-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 650px) {
    .shopq-hero,
    .shopq-products {
        padding-left: 22px;
        padding-right: 22px;
    }

    .shopq-hero {
        min-height: auto;
    }

        .shopq-hero h1 {
            font-size: 3rem;
        }

    .shopq-strip {
        grid-template-columns: 1fr 1fr;
    }

        .shopq-strip span {
            min-height: 55px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-bottom: 1px solid var(--q-line);
        }

    .shopq-orbit {
        width: 88vw;
    }

    .shopq-core {
        width: 145px;
        height: 145px;
    }

        .shopq-core strong {
            font-size: 1.8rem;
        }
}
/* SHOPQ HEADER + FOOTER */

.q-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(7, 9, 11, 0.96);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--q-line);
}

.q-nav {
    min-height: 78px;
    padding: 0 max(7vw, 40px);
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 36px;
}

.q-brand {
    display: inline-flex;
    flex-direction: column;
    text-decoration: none;
    line-height: 1;
}

.q-brand-name {
    color: var(--q-white);
    font-size: 1.45rem;
    font-weight: 850;
    letter-spacing: -0.05em;
}

    .q-brand-name span {
        color: var(--q-orange);
    }

.q-brand small {
    margin-top: 5px;
    color: var(--q-muted);
    font-size: 0.50rem;
    letter-spacing: 0.16em;
}

.q-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 5px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    background: rgba(255,255,255,.025);
}

.q-menu a {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 13px;
    border-radius: 8px;
    color: #aeb5be;
    text-decoration: none;
    font-size: .80rem;
    font-weight: 700;
    white-space: nowrap;
    border: 1px solid transparent;
    transition: color .18s ease, background .18s ease, border-color .18s ease;
}

.q-menu a::after {
    display: none;
}

.q-menu a:hover {
    color: var(--q-white);
    background: rgba(255,255,255,.045);
    border-color: rgba(255,255,255,.08);
}

.q-menu a.is-active {
    color: var(--q-white);
    background: #171b20;
    border-color: rgba(255,138,0,.55);
    box-shadow: inset 0 -2px 0 var(--q-orange);
}

.q-menu a.is-active .q-mark {
    color: var(--q-orange) !important;
}

.q-nav-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 18px;
    border-radius: 9px;
    border: 1px solid rgba(255, 138, 0, .55);
    background: #eceff2;
    color: #111418;
    text-decoration: none;
    font-size: .80rem;
    font-weight: 800;
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.q-nav-action:hover {
    color: #111418;
    background: #ffffff;
    border-color: var(--q-orange);
    transform: translateY(-1px);
}

/* FOOTER */

.q-footer {
    background: linear-gradient(120deg, #090b0d 0%, #120b07 58%, #080a0c 100%);
    border-top: 1px solid var(--q-line);
}

.q-footer-inner {
    padding: 70px max(7vw, 40px) 50px;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 70px;
    max-width: 1600px;
    margin: 0 auto;
}

.q-footer-brand strong,
.q-footer-products > strong,
.q-footer-meta > strong {
    display: block;
    margin-bottom: 16px;
    color: var(--q-white);
}

.q-footer-brand strong {
    font-size: 1.8rem;
    letter-spacing: -.04em;
}

    .q-footer-brand strong span {
        color: var(--q-orange);
    }

.q-footer-brand p {
    max-width: 380px;
    margin: 0;
    color: var(--q-muted);
    line-height: 1.65;
}

.q-footer-products,
.q-footer-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

    .q-footer-products a {
        margin: 4px 0;
        color: var(--q-text);
        text-decoration: none;
    }

        .q-footer-products a:hover {
            color: var(--q-orange);
        }

    .q-footer-meta span {
        margin: 4px 0;
        color: var(--q-muted);
    }

.q-footer-bottom {
    min-height: 58px;
    padding: 0 max(7vw, 40px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    border-top: 1px solid var(--q-line);
    color: #656d77;
    font-size: .72rem;
    letter-spacing: .08em;
}

/* Anchor-Ziel für OrchaStraiQ */
#start,
#system,
#system-explained,
#system-cinema,
#system-proof,
#q-link-data,
#requirements,
#editions,
#reachq,
#reachq-cinema,
#orchestraiq {
    scroll-margin-top: 102px;
}

@media (max-width: 1180px) {
    .q-nav {
        grid-template-columns: auto 1fr;
        gap: 18px;
    }

    .q-menu {
        justify-content: flex-start;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .q-menu::-webkit-scrollbar {
        display: none;
    }

    .q-nav-action {
        display: none;
    }
}

@media (max-width: 760px) {
    .q-nav {
        min-height: auto;
        grid-template-columns: 1fr;
        padding-top: 12px;
        padding-bottom: 10px;
    }

    .q-brand {
        display: none;
    }

    .q-menu {
        width: 100%;
    }

    .q-footer-inner {
        grid-template-columns: 1fr;
        gap: 38px;
    }
}

@media (max-width: 560px) {
    .q-nav {
        padding-left: 20px;
        padding-right: 20px;
    }

    .q-nav-action {
        padding: 0 14px;
        font-size: .75rem;
    }

    .q-footer-inner,
    .q-footer-bottom {
        padding-left: 22px;
        padding-right: 22px;
    }

    .q-footer-bottom {
        padding-top: 18px;
        padding-bottom: 18px;
        flex-direction: column;
        align-items: flex-start;
    }
}

/* =========================================================
   STORQ + POWERQ SYSTEM / EDITIONEN
   ========================================================= */

    .system-stage {
        padding: 120px max(7vw, 40px);
        background: radial-gradient(circle at 75% 50%, rgba(255, 138, 0, .09), transparent 30%), linear-gradient(120deg, #080a0c 0%, #110c08 55%, #090b0d 100%);
        border-top: 1px solid var(--q-line);
        border-bottom: 1px solid var(--q-line);
    }

    .system-stage-inner {
        max-width: 1500px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1.15fr .85fr;
        align-items: center;
        gap: 90px;
    }

    .system-stage-copy h2 {
        margin: 0;
        max-width: 850px;
        font-size: clamp(3rem, 5.2vw, 5.8rem);
        line-height: .98;
        letter-spacing: -.055em;
    }

    .system-stage-lead {
        max-width: 780px;
        margin: 32px 0 0;
        color: var(--q-text);
        font-size: 1.08rem;
        line-height: 1.8;
    }

    .system-stage-points {
        margin-top: 42px;
        display: grid;
        gap: 12px;
    }

        .system-stage-points > div {
            min-height: 68px;
            padding: 15px 20px;
            display: grid;
            grid-template-columns: 120px 1fr;
            align-items: center;
            gap: 20px;
            background: rgba(255,255,255,.025);
            border: 1px solid var(--q-line);
            border-radius: 10px;
        }

        .system-stage-points strong {
            color: var(--q-white);
        }

        .system-stage-points span {
            color: var(--q-muted);
            font-size: .88rem;
        }

    /* SYSTEMGRAFIK */

    .system-flow {
        position: relative;
        min-height: 520px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

        .system-flow::before {
            content: "";
            position: absolute;
            width: 390px;
            height: 390px;
            border: 1px solid rgba(255, 138, 0, .15);
            border-radius: 50%;
            box-shadow: 0 0 0 45px rgba(255, 138, 0, .025), 0 0 90px rgba(255, 138, 0, .08);
        }

    .system-node {
        position: relative;
        z-index: 2;
        width: 270px;
        min-height: 125px;
        padding: 22px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        background: linear-gradient(145deg, #171b20, #0c0f12);
        border: 1px solid #343b43;
        border-radius: 16px;
        box-shadow: 0 20px 50px rgba(0,0,0,.35);
    }

    .system-node-label {
        margin-bottom: 7px;
        color: var(--q-orange);
        font-size: .68rem;
        font-weight: 850;
        letter-spacing: .15em;
        text-transform: uppercase;
    }

    .system-node strong {
        font-size: 1.8rem;
        letter-spacing: -.04em;
    }

    .system-node small {
        margin-top: 5px;
        color: var(--q-muted);
    }

    .system-link {
        position: relative;
        z-index: 3;
        width: 2px;
        height: 95px;
        background: linear-gradient( to bottom, rgba(255,138,0,.25), var(--q-orange), rgba(255,138,0,.25) );
    }

        .system-link span {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            padding: 8px 15px;
            white-space: nowrap;
            border-radius: 999px;
            background: #080a0c;
            border: 1px solid rgba(255,138,0,.55);
            color: var(--q-orange);
            font-size: .72rem;
            font-weight: 850;
            letter-spacing: .10em;
        }


    /* EDITIONEN */

    .edition-stage {
        padding: 120px max(7vw, 40px) 140px;
        background: #090b0d;
    }

    .edition-stage-inner {
        max-width: 1500px;
        margin: 0 auto;
    }

    .edition-stage-head {
        display: grid;
        grid-template-columns: 1.2fr .8fr;
        align-items: end;
        gap: 70px;
        margin-bottom: 60px;
    }

        .edition-stage-head h2 {
            margin: 0;
            font-size: clamp(3rem, 5vw, 5.4rem);
            line-height: .98;
            letter-spacing: -.055em;
        }

        .edition-stage-head > p {
            max-width: 520px;
            margin: 0 0 8px;
            color: var(--q-muted);
            line-height: 1.75;
        }

    .edition-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px;
    }

    .edition-card {
        position: relative;
        min-height: 470px;
        padding: 34px;
        display: flex;
        flex-direction: column;
        background: linear-gradient(145deg, #14181d, #0d1013);
        border: 1px solid #292f36;
        border-radius: 18px;
    }

    .edition-card-featured {
        border-color: rgba(255,138,0,.65);
        box-shadow: 0 20px 70px rgba(255,138,0,.08);
        transform: translateY(-12px);
    }

    .edition-tag {
        color: var(--q-orange);
        font-size: .68rem;
        font-weight: 850;
        letter-spacing: .17em;
    }

    .edition-card h3 {
        margin: 25px 0 5px;
        color: var(--q-white);
        font-size: 3.4rem;
        letter-spacing: -.06em;
    }

    .edition-sub {
        min-height: 55px;
        margin: 0;
        color: var(--q-text);
        line-height: 1.55;
    }

    .edition-card ul {
        margin: 28px 0 35px;
        padding: 0;
        list-style: none;
    }

    .edition-card li {
        position: relative;
        margin: 13px 0;
        padding-left: 23px;
        color: #aeb4bc;
    }

        .edition-card li::before {
            content: "✓";
            position: absolute;
            left: 0;
            color: var(--q-orange);
            font-weight: 900;
        }

    .edition-buy {
        margin-top: auto;
        min-height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        background: #181d22;
        border: 1px solid #343b43;
        color: var(--q-white);
        text-decoration: none;
        font-weight: 800;
        transition: .18s ease;
    }

        .edition-buy:hover {
            background: var(--q-orange);
            border-color: var(--q-orange);
            color: #080808;
            transform: translateY(-2px);
        }

    .edition-card-featured .edition-buy {
        background: var(--q-orange);
        border-color: var(--q-orange);
        color: #080808;
    }

        .edition-card-featured .edition-buy:hover {
            background: #ffa126;
        }


    /* DEMO */

    .demo-callout {
        margin-top: 30px;
        min-height: 115px;
        padding: 25px 30px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 30px;
        border: 1px solid var(--q-line);
        border-radius: 14px;
        background: linear-gradient(100deg, rgba(255,138,0,.07), rgba(255,255,255,.015));
    }

        .demo-callout div {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .demo-callout span {
            color: var(--q-orange);
            font-size: .68rem;
            font-weight: 850;
            letter-spacing: .15em;
        }

        .demo-callout strong {
            font-size: 1.25rem;
        }


    /* RESPONSIVE */

    @media (max-width: 980px) {
        .system-stage-inner,
        .edition-stage-head {
            grid-template-columns: 1fr;
        }

        .system-flow {
            min-height: 480px;
        }

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

        .edition-card-featured {
            transform: none;
        }
    }

    @media (max-width: 650px) {
        .system-stage,
        .edition-stage {
            padding-left: 22px;
            padding-right: 22px;
        }

        .system-stage-points > div {
            grid-template-columns: 1fr;
            gap: 4px;
        }

        .system-flow::before {
            width: 290px;
            height: 290px;
        }

        .system-node {
            width: 240px;
        }

        .demo-callout {
            align-items: flex-start;
            flex-direction: column;
        }
    }

/* =========================================================
   SYSTEMNACHWEIS + Q-LINK DATENKETTE
   ========================================================= */

.system-proof {
    padding: 110px max(7vw, 40px);
    background:
        radial-gradient(circle at 22% 50%, rgba(255, 138, 0, .11), transparent 30%),
        linear-gradient(120deg, #0a0c0e 0%, #130d09 58%, #080a0c 100%);
    border-top: 1px solid var(--q-line);
}

.system-proof-inner {
    max-width: 1500px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 90px;
    align-items: center;
}

.system-proof-visual {
    min-height: 430px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    border-radius: 22px;
    background: radial-gradient(circle at 50% 50%, rgba(255,138,0,.08), transparent 62%);
}

.system-proof-visual img {
    width: min(100%, 560px);
    height: auto;
    display: block;
    filter: drop-shadow(0 28px 45px rgba(0,0,0,.48));
}

.system-proof-copy h2,
.q-link-stage-head h2 {
    margin: 0;
    font-size: clamp(3rem, 5vw, 5.4rem);
    line-height: .98;
    letter-spacing: -.055em;
}

.system-proof-copy > p {
    max-width: 760px;
    margin: 30px 0 0;
    color: var(--q-text);
    line-height: 1.8;
    font-size: 1.06rem;
}

.proof-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 30px 0 34px;
}

.proof-badges span {
    padding: 9px 13px;
    border-radius: 999px;
    border: 1px solid rgba(255,138,0,.34);
    background: rgba(255,138,0,.055);
    color: #d9dde2;
    font-size: .78rem;
    font-weight: 750;
}

.q-link-stage {
    padding: 120px max(7vw, 40px);
    background: #090b0d;
    border-top: 1px solid var(--q-line);
    border-bottom: 1px solid var(--q-line);
}

.q-link-stage-inner {
    max-width: 1500px;
    margin: 0 auto;
}

.q-link-stage-head {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 70px;
    align-items: end;
    margin-bottom: 58px;
}

.q-link-stage-head > p {
    margin: 0 0 8px;
    color: var(--q-muted);
    line-height: 1.75;
}

.q-link-map {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    align-items: stretch;
}

.q-link-map article,
.q-link-core {
    min-height: 190px;
    padding: 24px;
    border-radius: 16px;
    border: 1px solid #2a3037;
    background: linear-gradient(145deg, #14181d, #0d1013);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.q-link-map article > span {
    margin-bottom: 18px;
    color: var(--q-orange);
    font-size: .66rem;
    font-weight: 850;
    letter-spacing: .14em;
}

.q-link-map article strong,
.q-link-core strong {
    font-size: 1.45rem;
    letter-spacing: -.03em;
}

.q-link-map article small {
    margin-top: 10px;
    color: var(--q-muted);
    line-height: 1.55;
}

.q-link-core {
    border-color: rgba(255,138,0,.62);
    background:
        radial-gradient(circle at 50% 30%, rgba(255,138,0,.14), transparent 55%),
        #0f1114;
    box-shadow: 0 0 60px rgba(255,138,0,.08);
    text-align: center;
}

.q-link-core span {
    color: var(--q-orange);
    font-size: 1.05rem;
    font-weight: 900;
    letter-spacing: .08em;
}

.q-link-core strong {
    margin-top: 10px;
    color: var(--q-white);
}

.q-link-example {
    margin-top: 22px;
    padding: 26px 28px;
    border-radius: 14px;
    border: 1px solid var(--q-line);
    background: linear-gradient(100deg, rgba(255,138,0,.06), rgba(255,255,255,.015));
}

.q-link-example > span {
    display: block;
    margin-bottom: 7px;
    color: var(--q-orange);
    font-size: .66rem;
    font-weight: 850;
    letter-spacing: .15em;
}

.q-link-example strong {
    font-size: 1.18rem;
}

.q-link-example p {
    margin: 8px 0 0;
    color: var(--q-muted);
    line-height: 1.7;
}

.measurement-depth-note {
    margin-top: 14px;
    padding: 18px 22px;
    border-left: 2px solid var(--q-orange);
    background: rgba(255,255,255,.025);
}

.measurement-depth-note strong {
    display: block;
    margin-bottom: 5px;
    font-size: .96rem;
}

.measurement-depth-note p {
    margin: 0;
    color: var(--q-muted);
    line-height: 1.6;
}

@media (max-width: 1050px) {
    .system-proof-inner,
    .q-link-stage-head {
        grid-template-columns: 1fr;
    }

    .q-link-map {
        grid-template-columns: 1fr 1fr;
    }

    .q-link-core {
        grid-column: 1 / -1;
    }
}

@media (max-width: 650px) {
    .system-proof,
    .q-link-stage {
        padding-left: 22px;
        padding-right: 22px;
    }

    .system-proof-visual {
        min-height: 300px;
        padding: 0;
    }

    .q-link-map {
        grid-template-columns: 1fr;
    }

    .q-link-core {
        grid-column: auto;
    }
}




/* =========================================================
   SYSTEMVORAUSSETZUNGEN / REFERENZKETTE
   ========================================================= */
.requirements-stage {
    padding: 120px max(7vw, 40px);
    background: linear-gradient(120deg, #100b08 0%, #090b0d 55%, #0b0d10 100%);
    border-bottom: 1px solid var(--q-line);
}

.requirements-inner {
    max-width: 1500px;
    margin: 0 auto;
}

.requirements-head {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 80px;
    align-items: end;
    margin-bottom: 54px;
}

.requirements-head h2 {
    margin: 0;
    font-size: clamp(3rem, 5vw, 5.2rem);
    line-height: .98;
    letter-spacing: -.055em;
}

.requirements-head > p {
    margin: 0 0 8px;
    color: var(--q-muted);
    line-height: 1.75;
}

.requirements-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.requirements-grid article {
    min-height: 240px;
    padding: 28px;
    border: 1px solid #2a3037;
    border-radius: 16px;
    background: linear-gradient(145deg, #15191e, #0d1013);
}

.requirements-grid article > span {
    display: block;
    margin-bottom: 38px;
    color: var(--q-orange);
    font-size: .68rem;
    font-weight: 850;
    letter-spacing: .15em;
}

.requirements-grid strong {
    display: block;
    font-size: 1.45rem;
    letter-spacing: -.03em;
}

.requirements-grid p {
    margin: 14px 0 0;
    color: var(--q-muted);
    line-height: 1.65;
}

.reference-chain {
    margin-top: 18px;
    padding: 26px 28px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 24px;
    align-items: center;
    border: 1px solid rgba(255,138,0,.32);
    border-radius: 14px;
    background: rgba(255,138,0,.045);
}

.reference-chain > span {
    color: var(--q-orange);
    font-size: .67rem;
    font-weight: 850;
    letter-spacing: .15em;
}

.reference-chain strong {
    font-size: 1.05rem;
}

.reference-chain small {
    color: var(--q-muted);
}

@media (max-width: 1050px) {
    .requirements-head { grid-template-columns: 1fr; }
    .requirements-grid { grid-template-columns: 1fr 1fr; }
    .reference-chain { grid-template-columns: 1fr; gap: 8px; }
}

@media (max-width: 650px) {
    .requirements-stage { padding-left: 22px; padding-right: 22px; }
    .requirements-grid { grid-template-columns: 1fr; }
}

/* Q-FAMILIE MARKENREGEL: das Q bleibt als gemeinsames Markensignal orange */
.q-mark {
    color: var(--q-orange) !important;
}

/* =========================================================
   ORIGINAL MARKENASSETS / WEBOPTIMIERTE MASTER-ABLEITUNGEN
   ========================================================= */
.brand-system-lockup {
    display: grid;
    grid-template-columns: 1fr .42fr 1fr;
    gap: 14px;
    align-items: center;
    min-height: 150px;
    margin: 18px 0 24px;
}

.brand-system-lockup img,
.brand-single-lockup img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.brand-system-lockup > img:not(.brand-qlink) {
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.07);
}

.brand-system-lockup .brand-qlink {
    max-height: 118px;
}

.brand-single-lockup {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 150px;
    margin: 18px 0 24px;
}

.brand-single-lockup img {
    max-width: 150px;
    max-height: 150px;
}

.system-link-logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.system-link-logo img {
    display: block;
    width: 112px;
    max-width: 100%;
    height: auto;
    filter: drop-shadow(0 0 22px rgba(255,138,0,.12));
}

@media (max-width: 650px) {
    .brand-system-lockup {
        grid-template-columns: 1fr .38fr 1fr;
        gap: 8px;
        min-height: 110px;
    }

    .brand-system-lockup .brand-qlink {
        max-height: 82px;
    }
}

/* =========================================================
   PRODUCT CINEMA – ruhige, bewusste Haltepunkte im Laufweg
   ========================================================= */
.product-cinema {
    padding: 96px 28px;
    border-top: 1px solid rgba(255,255,255,.06);
    border-bottom: 1px solid rgba(255,255,255,.06);
    background:
        radial-gradient(circle at 50% 42%, rgba(255,138,0,.08), transparent 38%),
        #080a0d;
}

.product-cinema-inner {
    width: min(1180px, 100%);
    margin: 0 auto;
}

.product-cinema-head {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 56px;
    align-items: end;
    margin-bottom: 34px;
}

.product-cinema-head h2 {
    margin: 8px 0 0;
    font-size: clamp(2.25rem, 5vw, 4.7rem);
    line-height: .98;
    letter-spacing: -.045em;
}

.product-cinema-head > p {
    margin: 0;
    max-width: 560px;
    color: rgba(255,255,255,.67);
    line-height: 1.7;
}

.cinema-frame {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 18px;
    background: #000;
    box-shadow: 0 30px 90px rgba(0,0,0,.42), 0 0 0 1px rgba(255,138,0,.025);
}

.cinema-frame::before {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: 2;
    pointer-events: none;
    border-radius: inherit;
    box-shadow: inset 0 0 50px rgba(0,0,0,.18);
}

.shopq-product-video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: #000;
}

.cinema-foot {
    display: flex;
    align-items: center;
    gap: 11px;
    padding-top: 18px;
    color: rgba(255,255,255,.82);
    font-size: .82rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.cinema-foot small {
    margin-left: auto;
    color: rgba(255,255,255,.42);
    letter-spacing: .04em;
    text-transform: none;
}

.cinema-dot { color: rgba(255,255,255,.24); }

.product-cinema-reach {
    margin-top: 0;
    background:
        radial-gradient(circle at 50% 42%, rgba(255,138,0,.065), transparent 38%),
        #090b0e;
}

@media (max-width: 760px) {
    .product-cinema { padding: 68px 20px; }
    .product-cinema-head { grid-template-columns: 1fr; gap: 18px; }
    .cinema-foot { flex-wrap: wrap; }
    .cinema-foot small { width: 100%; margin-left: 0; }
}


/* ShopQ 2.2 - Demo Center */
.demo-center{padding:96px 24px;background:#0b0d0f;border-top:1px solid rgba(255,255,255,.08)}
.demo-center-inner{max-width:1180px;margin:0 auto}
.demo-center-head{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:end;margin-bottom:34px}
.demo-center-head h2{margin:6px 0 0;font-size:clamp(2rem,4vw,4rem);line-height:1.02}
.demo-center-head>p{margin:0;color:#aeb4ba;line-height:1.7}
.demo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.demo-card{padding:30px;border:1px solid rgba(255,255,255,.11);background:linear-gradient(180deg,#15191d,#0f1215);border-radius:18px}
.demo-card h3{font-size:1.7rem;margin:10px 0 14px}
.demo-card p,.demo-card li,.demo-card small{color:#aeb4ba}
.demo-card ul{padding-left:20px;margin:22px 0}
.demo-status{font-size:.76rem;letter-spacing:.14em;color:#f28c28;font-weight:700}
.demo-download{width:100%;border-radius:10px;padding:14px 18px;font-weight:700;border:1px solid #f28c28}
.demo-download-pending{background:#171b1f;color:#c8cdd2;opacity:.75;cursor:not-allowed}
.demo-card small{display:block;margin-top:12px;line-height:1.5}
.demo-note{margin-top:22px;padding:18px 22px;border-left:3px solid #f28c28;background:#12161a;display:flex;gap:12px;flex-wrap:wrap}
.demo-note span{color:#aeb4ba}
@media(max-width:800px){.demo-center-head,.demo-grid{grid-template-columns:1fr}.demo-center{padding:72px 18px}}

/* ShopQ 2.3 - active DEMO delivery */
.demo-download-ready{display:block;text-align:center;text-decoration:none;background:#f5f5f3;color:#101214;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,background .15s ease}
.demo-download-ready:hover{background:#fff;color:#101214;transform:translateY(-1px);box-shadow:0 8px 26px rgba(0,0,0,.22)}
.demo-download-ready .q-mark{color:#f28c28!important}


/* ShopQ 2.6: two-component StorQ + powerQ system demo */
.demo-system-downloads {
    display: grid;
    gap: 8px;
    margin-top: 8px;
}
.demo-system-downloads .demo-download + small {
    margin-bottom: 8px;
}


/* ShopQ 3.1 · clear DEV/PRODUCTION separation */
.dev-mode-banner {
    position: sticky;
    top: 0;
    z-index: 10000;
    padding: 10px 18px;
    text-align: center;
    background: #251509;
    color: #f4f5f6;
    border-bottom: 1px solid rgba(255, 138, 0, .55);
    font-size: .78rem;
    letter-spacing: .04em;
}

.dev-mode-banner strong {
    color: var(--q-orange);
    letter-spacing: .12em;
}

.edition-buy-locked,
.edition-buy-locked:hover {
    cursor: not-allowed;
    transform: none !important;
    background: #20252b !important;
    color: #9aa2ab !important;
    border: 1px solid #3a424b !important;
    box-shadow: none !important;
}