@import "variables.css";
@import "tmp.css";

:root {
    color-scheme: dark;
    scrollbar-color: var(--pcsg-scrollbar-thumb) var(--pcsg-scrollbar-track);
    scrollbar-width: thin;
}

@supports selector(::-webkit-scrollbar) {
    :root {
        scrollbar-color: auto;
        scrollbar-width: auto;
    }

    :root::-webkit-scrollbar {
        height: 12px;
        width: 12px;
    }

    :root::-webkit-scrollbar-track {
        background: var(--pcsg-scrollbar-track);
    }

    :root::-webkit-scrollbar-thumb {
        background: var(--pcsg-scrollbar-thumb);
        border: 2px solid var(--pcsg-scrollbar-track);
        border-radius: 999px;
    }

    :root::-webkit-scrollbar-thumb:hover {
        background: var(--pcsg-scrollbar-thumb--hover);
    }
}

@media (forced-colors: active) {
    :root {
        scrollbar-color: auto;
        scrollbar-width: auto;
    }
}

@property --angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

.pcsg-accent-card {
    position: relative;
    overflow: hidden;
    border: var(--pcsg-accent-card-border);
    border-radius: var(--pcsg-accent-card-radius);
    background: var(--pcsg-accent-card-background);
    box-shadow: var(--pcsg-accent-card-shadow);
    padding: clamp(1.5rem, 3vw, 2.25rem);
}

.pcsg-accent-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: var(--pcsg-accent-card-grid);
    background-size: var(--pcsg-accent-card-grid-size);
    -webkit-mask-image: var(--pcsg-accent-card-grid-mask);
    mask-image: var(--pcsg-accent-card-grid-mask);
}

.pcsg-accent-card > * {
    position: relative;
    z-index: 1;
}

.pcsg-site--websites {
    --body-bg-color-leftBottom: var(--pcsg-catalog-websites-siteBgColor);
}

.pcsg-site--shops {
    --body-bg-color-leftBottom: var(--pcsg-catalog-shops-siteBgColor);
}

.pcsg-site--sorglos {
    --body-bg-color-leftBottom: var(--pcsg-catalog-sorglos-siteBgColor);
}

.pcsg-site--wartung {
    --body-bg-color-leftBottom: var(--pcsg-catalog-wartung-siteBgColor);
}

.pcsg-site--onlineMarketing {
    --body-bg-color-leftBottom: var(--pcsg-catalog-onlineMarketing-siteBgColor);
}

.slideout-panel {
    background-image: var(--grain-bg)!important;
    background-attachment: fixed !important;
}

body:not(.pcsg-disable-graphPaperBg) .slideout-panel:before {
    content: '';
    width: 100%;
    height: clamp(500px, 60vh, 700px);
    background-color: #000;
    position: absolute;
    top: 0;
    background-image: var(--pcsg-graphPaperBg);
    mask-image: linear-gradient(to bottom, black 70%, transparent), radial-gradient(circle at 50% 0%, black 0%, transparent 80%);
    mask-composite: intersect;
    -webkit-mask-composite: source-in;
    opacity: 0.5;
    z-index: -1;
}

.pcsg-page-bg-subtleColors .slideout-panel {
    background-image: radial-gradient(circle at 20vw 50vh, hsl(from var(--qui-colors-info) h s l / 0.2), transparent 30%), radial-gradient(circle at 46vw 61vh, hsl(from var(--qui-colors-primary) h s l / 0.15), transparent 40%), var(--grain-bg) !important;
    background-attachment: fixed !important;
}

.pcsg-page-bg-colorful .slideout-panel {
    background-image: linear-gradient(90deg, transparent, #11111136 20%, #11111157 82%, transparent),
    var(--grain-bg),
    radial-gradient(circle at 100% 30%, color-mix(in srgb, var(--qui-colors-warning-950) 30%, transparent), transparent 40%),
    radial-gradient(circle at -20% 80%, var(--body-bg-color-leftBottom), transparent 30%),
    linear-gradient(45deg, var(--qui-colors-dark-950), var(--qui-colors-dark-800)) !important;
}

.tpl-brickArea-ctaArea__entry .tpl-brick__inner {
    padding-top: var(--qui-tpl-spacing--top);
    padding-bottom: var(--qui-tpl-spacing--bottom);
}

/**
 * Start / stop animation
 * pcsg-init.js uses IntersectionObserver to set the class "pcsg-is-inview" on the element
 */
[data-pcsg-anim] {
    animation-play-state: paused !important;
}

.pcsg-is-inview [data-pcsg-anim] {
    animation-play-state: running !important;
}

/**
 * Divider glow
 */
.divider-glow--vertical {
    position: relative;
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.divider-glow--vertical::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    transform: translateX(-50%);
    background: linear-gradient(
            180deg,
            transparent 0%,
            rgba(255,255,255,0.1) 15%,
            rgba(196, 241, 84, 0.55) 50%,
            rgba(255,255,255,0.1) 85%,
            transparent 100%
    );
}

.divider-glow--vertical::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 240px;
    height: 240px;
    transform: translate(-50%, -50%);
    border-radius: 999px;
    background:
            radial-gradient(circle, rgba(196, 241, 84, 0.22) 0%, rgba(196, 241, 84, 0.08) 35%, transparent 72%);
    filter: blur(6px);
    pointer-events: none;
}

@media screen and (max-width: 767px) {
    .divider-glow--vertical {
        min-height: 80px;
    }

    .divider-glow--vertical::before {
        top: 50%;
        bottom: auto;
        left: 0;
        right: 0;
        width: auto;
        height: 1px;
        transform: translateY(-50%);
        background: linear-gradient(
                90deg,
                transparent 0%,
                rgba(255,255,255,0.1) 15%,
                rgba(196, 241, 84, 0.55) 50%,
                rgba(255,255,255,0.1) 85%,
                transparent 100%
        );
    }
}

/****************/
/* Word rotator */
/****************/
.word-rotator {
    display: inline-flex;
    overflow: hidden;
    vertical-align: bottom;
    transition: 0.5s ease width;
    flex-direction: column;
    align-items: flex-start;
}

.word-rotator--centered {
    width: 100% !important;
}

.word-rotator--centered,
.word-rotator--centered .word-rotator__text {
    width: 100% !important;
}


/* overline for dark background */
.overline-light {
    --qui-overline-color: var(--qui-colors-primary-200);
}

/* title effect: color */
:is(h1, h2, h3, h4) > strong {
    color: var(--qui-colors-primary);
    text-shadow: 0 0 25px currentColor;
}

/* title effect: animated shadow */
.title-effect-animatedShadow {
    color: transparent;
    background: linear-gradient(90deg, var(--qui-colors-primary), var(--qui-colors-primary-600), var(--qui-colors-primary-300));
    background-clip: text;
    position: relative;
    display: inline-block;
}

.title-effect-animatedShadow:after {
    content: attr(data-shadow);
    position: absolute;
    top: .06em;
    left: .06em;
    z-index: -1;
    text-shadow: none;
    background-image: linear-gradient(45deg, transparent 45%, var(--qui-colors-primary-300) 45%, var(--qui-colors-primary-300) 55%, transparent 55%);
    background-size: .1em .1em;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: anim-title-effect-animatedShadow 50s linear infinite;
}

@keyframes anim-title-effect-animatedShadow {
    0% {
        background-position: 0 0
    }
    0% {
        background-position: 100% -100%
    }
}

/**
 * Title effect: gradient
 */
.title-effect--gradient {
    --_color-1: var(--color-1, #2da590);
    --_color-2: var(--color-2, #56d7d6);
    --_color-3: var(--color-3, var(--qui-colors-success-50));
    --_color-4: var(--color-4, var(--qui-colors-success-300));

    background: linear-gradient(90deg, var(--_color-1) 0%, var(--_color-2) 28%, var(--_color-3) 58%, var(--_color-4) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

/**
 * Brick utils helper
 */
.brick-container__brick-bgImage-brightness-low .tpl-brick__imageBgWrapper img {
    filter: brightness(0.2);
}

/* graph paper bg */
.brick-container__brick-bg-graphPaper {
    position: relative;
    background-color: #00000033 !important;
}

.brick-container__brick-bg-graphPaper:before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--pcsg-graphPaperBg);
    mask-image: linear-gradient(to bottom, black 70%, transparent), radial-gradient(circle at 50% 50%, black 0%, transparent 50%);
    mask-composite: intersect;
    -webkit-mask-composite: source-in;
}


/**
 * Smooth transition
 */

/* bottom */
.pcsg-fade-bottom {
    mask-image: linear-gradient(to bottom, #000 80%, transparent);
}

.brick-container__pcsg-tplWrapper-fade-bottom .tpl-brick__imageBgWrapper {
    mask-image: linear-gradient(to bottom, #000 80%, transparent);
}

/* top */
.pcsg-fade-top {
    mask-image: linear-gradient(to top, #000 80%, transparent);
}

.brick-container__pcsg-tplWrapper-fade-top .tpl-brick__imageBgWrapper {
    mask-image: linear-gradient(to top, #000 80%, transparent);
}

/* both */
.pcsg-fade-both {
    mask-image: linear-gradient(to top, transparent, #000 20%, #000 80%, transparent);
}

.brick-container__pcsg-tplWrapper-fade-both--image .tpl-brick__imageBgWrapper {
    mask-image: linear-gradient(to top, transparent, #000 20%, #000 80%, transparent);
}

.brick-container__pcsg-tplWrapper-fade-both {
    mask-image: linear-gradient(to top, transparent, #000 var(--qui-tpl-spacing--bottom), #000 calc(100% - var(--qui-tpl-spacing--top)), transparent);
}

/**
 * Dark background with dots
 */
.brick-container__pcsg-darkBg {
    --bgImage--dots--color: #ffffff0a;

    background-image: radial-gradient(var(--bgImage--dots--color) 2px, transparent 2px), radial-gradient(circle at 100% 30%, var(--qui-colors-primary-950), transparent 40%), radial-gradient(circle at -20% 80%, var(--qui-colors-primary-950), transparent 30%), linear-gradient(45deg, var(--qui-colors-dark-950), var(--qui-colors-dark-800));
    background-size: var(--bgImage--dots--size), auto, auto, auto, auto;
    background-attachment: fixed;
}

/**
 * Header img on the right
 */
.brick-container__pcsg-header-imageOnRight {
    overflow: hidden;
}

.pcsg-header-imageOnRight img {
    width: 1200px !important;
    box-shadow: 0 0 0 1.5rem var(--accent-color, currentColor);
    border-radius: 1.5rem;
}

/**
 * Particles
 */
#particles-js {
    position: absolute;
    inset: 0;
    z-index: -1;
}

/**
 * Initial animation
 */
.initial-animation--fadeInFromRightToLeft {
    --init-delay: 200ms;

    opacity: 0;
    transform: translateX(20px);
    animation: anim-slideFromRightToLeft 500ms ease-out forwards;
    animation-delay: var(--delay);
}

.animated-elm-1 {
    --delay: var(--init-delay);
}

.animated-elm-2 {
    --delay: calc(var(--init-delay) + 200ms);
}

.animated-elm-3 {
    --delay: calc(var(--init-delay) + 450ms);
}

.animated-elm-4 {
    --delay: calc(var(--init-delay) + 650ms);
}

.animated-elm-5 {
    --delay: calc(var(--init-delay) + 800ms);
}

.animated-elm-6 {
    --delay: calc(var(--init-delay) + 950ms);
}

.animated-elm-7 {
    --delay: calc(var(--init-delay) + 1050ms);
}

.animated-elm-8 {
    --delay: calc(var(--init-delay) + 1100ms);
}


@keyframes anim-slideFromRightToLeft {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/**
 * Mask brick to bottom
 */
@media screen and (min-width: 768px) {
    .brick-container__maskToBottom {
        mask-image: linear-gradient(to bottom, black 80%, transparent), radial-gradient(circle at 50% 0, black 80%, transparent);
        mask-composite: intersect;
        -webkit-mask-composite: source-in;
    }
}

/*******/
/* Nav */
/*******/
.header-bar__suffix {
    align-self: stretch;
}

.quiqqer-menu-megaMenu-list-item-inner {
    position: relative;
}

.header-bar--style-default:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent 10%,
    color-mix(in srgb, var(--qui-colors-primary), transparent), transparent 90%);
}

.header-bar--scrolled .header-bar-container {
    backdrop-filter: blur(7px);
    background: #000000bb;
}

.quiqqer-menu-megaMenu-list-item-inner:before {
    content: '';
    inset: 0;
    background-color: var(--qui-colors-primary);
    position: absolute;
    transition: var(--_qui-megaMenu-transition);
    opacity: 0;
    transform: scale(0.85);
    z-index: -1;
    border-radius: var(--_qui-megaMenu-link-borderRadius);
}

.quiqqer-menu-megaMenu-list-item-inner:is(:hover, :focus):before {
    opacity: 1;
    transform: scale(1);
}

.brick-container__page-footer-brick ul {
    padding-left: 0 !important;
}

.brick-container__page-footer-brick .control-content li {
    padding-left: 0 !important;
    list-style: none !important;
}

/* submenu */
.quiqqer-menu-megaMenu-children-simple-entry__inner {
    display: flex !important;
    gap: 1rem;
    align-items: center;
}

.quiqqer-menu-megaMenu-children-simple-entry__inner .fa {
    color: var(--qui-colors-primary);
}

/**
 * Cookies banner / gdpr
 */
.quiqqer-cookieconsent--compact {
    border: 2px solid rgba(193, 226, 90, 0.45);
    box-shadow: rgba(193, 226, 90, 0.34) 0px 20px 60px;
}

#quiqqer-cookieconsent-message {
    font-size: var(--qui-fs-sm);
}

/**
 * Footer
 */
.page-footer {
    background-image: radial-gradient(ellipse at 50% 100%, #ffc00040, transparent 50%), linear-gradient(0deg, #000000ee, transparent);
    background-color: transparent;
    background-size: 100% 200px, auto;
    background-repeat: no-repeat;
    background-position: center bottom, center center;
    padding-top: 5rem !important;
}

.footer-content {
    margin-right: 2rem;
}

.page-footer__social a.social-link:is(:hover, :focus) {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.page-footer__bar {
    border-top: 1px solid var(--bgImage--dots--color) !important;
}

@media screen and (min-width: 768px) {
    .pcsg-footer-hero {
        margin-bottom: 5rem;
    }
}

/*
 * Footer Effekt with mask image
 */
.tpl-brickArea-ctaArea {
    position: sticky;
    top: 5rem;
}

.page-footer {
    position: relative;
    z-index: 2;
}

.page-footer:before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    backdrop-filter: blur(40px);
    mask-image: linear-gradient(to bottom, transparent, #000 10rem);
}

.page-footer-container {
    padding-block: 5rem;
}

.page-footer__bar {
    position: relative;
}

.footer-toTopBar-container {
    position: relative;
}

/**
 * CTA banner
 */
.pcsg-cta-banner {
    --bg: var(--qui-colors-success-400);

    background: #79bd7b;
    border-radius: 1rem;
    color: #fff;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 30px 20px var(--bg) inset;
    z-index: 1;
}

.pcsg-cta-banner:after {
    content: '';
    background: radial-gradient(circle at 120% 0, var(--bg), transparent 60%);
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 500px;
    z-index: -1;
}

.pcsg-ctaBanner__content {
    padding-block: 5rem;
    background: linear-gradient(90deg, var(--bg) 70%, transparent);
    max-width: 700px;
    padding-inline: 3rem 1rem;
}

.pcsg-ctaBanner__icons {
    display: flex;
    gap: 1rem;
    position: absolute;
    top: -50%;
    right: 6rem;
    transform: rotate(15deg);
    transform-origin: 0 20%;
    z-index: -1;
}

.pcsg-ctaBanner__iconsSet {
    --anim-translate-from: 0;
    --anim-translate-to: -100%;
    --anim-duration: 100s;

    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.pcsg-ctaBanner__iconsSet:nth-child(2) {
    --anim-translate-from: -100%;
    --anim-translate-to: 0;
    --anim-duration: 120s;
}

.pcsg-ctaBanner__iconsSet:nth-child(3) {
    --anim-duration: 140s;
}

.pcsg-ctaBanner__iconsSet-inner {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    animation: move var(--anim-duration) linear infinite;
}

.pcsg-ctaBanner__iconsSet:nth-child(2) {
    margin-top: 3rem;
}

.pcsg-ctaBanner__icon {
    background: #ffffff11;
    width: 5rem;
    line-height: 5rem;
    border-radius: 50%;
    text-align: center;
    font-size: 1.5rem;
}

@keyframes move {
    from {
        transform: translateY(var(--anim-translate-from));
    }
    to {
        transform: translateY(var(--anim-translate-to));
    }
}

/**
 * Tabs
 */
.pcsg-tabs-withAccentColor .quiqqer-tabsAdvanced-content-image-inner {
    background: color-mix(in srgb, var(--_qui-menu-controls-tabs-accentColor), transparent 20%);
    padding: 2rem;
    border-radius: clamp(1rem, 2vw, 2rem);
    box-shadow: 0 12px 40px hsl(from var(--_qui-menu-controls-tabs-accentColor) h s calc(l - 10));
}

.pcsg-tabs-withAccentColor .quiqqer-tabsAdvanced-content-image img {
    border-radius: clamp(0.5rem, 1vw, 1rem);
    box-shadow: 0 0 0 0.5rem #ffffff33;
}

/**
 * News
 */
img.quiqqer-news-article__image-file {
    border-radius: var(--pcsg-border-radius--img);
    width: calc(100% - 2rem);
}

.quiqqer-news-article__content img {
    border-radius: var(--pcsg-border-radius--img);
}

/**
 * Portfolio
 */
img.quiqqer-portfolio-referenceLayout-caseStudy-mainImage-img {
    border-radius: var(--pcsg-border-radius-img--lg);
    width: calc(100% - 2rem);
}

.quiqqer-portfolio-referenceLayout-caseStudy-data {
    padding: clamp(1.75rem, 2.6vw, 2.25rem);
    border: 1px solid var(--qui-colors-primary);
    border-radius: var(--pcsg-border-radius-img--lg);
    background: var(--qui-colors-surface);
}

/**
 * Gallery
 */
.quiqqer-control-gallery-gridAdvanced-image-img {
    border-radius: var(--pcsg-border-radius-img);
}

/**
 * Card ribbon
 */
.card-ribbon-wrapper {
    --_bg: var(--card-ribbon-bg, #fcfc09);
    --_color: var(--card-ribbon-color, #111);

    width: 85px;
    height: 88px;
    overflow: hidden;
    position: absolute;
    top: -3px;
    right: -3px;
}

.card-ribbon {
    font: bold 15px Sans-Serif;
    text-align: center;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    position: relative;
    padding: 7px 0;
    left: -5px;
    top: 15px;
    width: 120px;
    -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
    letter-spacing: 1px;

    background-color: var(--_bg);
    color: var(--_color);
}

.card-ribbon:before, .card-ribbon:after {
    content: "";
    border-top: 3px solid color-mix(in srgb, var(--_bg), black 50%);
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    position: absolute;
    bottom: -3px;
}

.card-ribbon:before {
    left: 0;
}

.card-ribbon:after {
    right: 0;
}

/**
 * PCSG catalog
 */
.pcsg-catalog-websites {
    --accent-color: var(--pcsg-catalog-websites-color);
    --accent-color-contrast: var(--pcsg-catalog-websites-contrast);
}

.pcsg-catalog-shops {
    --accent-color: var(--pcsg-catalog-shops-color);
    --accent-color-contrast: var(--pcsg-catalog-shops-contrast);
}

.pcsg-catalog-sorglos {
    --accent-color: var(--pcsg-catalog-sorglos-color);
    --accent-color-contrast: var(--pcsg-catalog-sorglos-contrast);
}

.pcsg-catalog-wartung {
    --accent-color: var(--pcsg-catalog-wartung-color);
    --accent-color-contrast: var(--pcsg-catalog-wartung-contrast);
}

.pcsg-catalog-onlineMarketing {
    --accent-color: var(--pcsg-catalog-onlineMarketing-color);
    --accent-color-contrast: var(--pcsg-catalog-onlineMarketing-contrast);
}

/**
 * QUI Window styling
 */
.qui-window-popup{
    border: 2px solid rgba(193, 226, 90, 0.45);
    overflow: hidden;
    background: rgb(17, 17, 17) !important;
}

/**
 * Contact hub
 */
.qui-window-popup.qui-window-popup--contactHubWindow {
    box-shadow: rgba(193, 226, 90, 0.34) 0px 20px 60px;
}
.quiqqer-contact-contactHub__leftContent {
    background-image: linear-gradient(90deg, transparent, #11111136 20%, #11111157 82%, transparent), var(--grain-bg), radial-gradient(circle at 100% 30%, color-mix(in srgb, var(--qui-colors-warning-950) 50%, transparent), transparent 40%), radial-gradient(circle at -20% 80%, var(--body-bg-color-leftBottom), transparent 30%), linear-gradient(45deg, var(--qui-colors-dark-950), var(--qui-colors-dark-800));
}

@media screen and (max-width: 767px) {
    .quiqqer-contact-contactHub__leftContent {
        border-top-left-radius: 0 !important;
        border-top-right-radius: 0 !important;
    }
}

/**
 * Why PCSG
 */
.brick-container__pcsg-why-pcsg {
    background-image: linear-gradient(0deg, #000000aa 5rem, transparent);
    position: relative;
}

@media screen and (min-width: 768px) {
    .pcsg-why-pcsg {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
        position: relative;
        align-items: start;
    }
}

.pcsg-why-pcsg .grid-children {
    overflow: visible;
}

@media screen and (min-width: 768px) {
    .pcsg-why-pcsg .control-content {
        position: sticky;
        top: 30vh;
    }
}

.brick-container__pcsg-why-pcsg:before {
    content: '';
    inset: 0;
    position: absolute;
    z-index: -1;
    background-image:
            radial-gradient(circle at 20vw 50vh, hsl(from var(--qui-colors-info) h s l / 0.2), transparent 30%),
            radial-gradient(circle at 46vw 61vh, hsl(from var(--qui-colors-primary) h s l / 0.15), transparent 40%);
    background-attachment: fixed, fixed;
}

.pcsg-why-pcsg .quiqqer-boxContentAdvanced-entry-container {
    position: relative;
    z-index: 1;
}

.pcsg-why-pcsg .quiqqer-boxContentAdvanced-entries {
    max-width: 30rem;
    margin-inline: auto;
}

.pcsg-why-pcsg .quiqqer-boxContentAdvanced-entry {
    margin: 20px;
    width: 100%;
    background: #ffffff07;
    padding: 1.5rem;
    border-radius: 1rem;
    position: relative;
    background: var(--qui-colors-dark-950);
}

@media screen and (min-width: 768px) {
    .pcsg-why-pcsg .quiqqer-boxContentAdvanced-entry {
        min-height: 12rem;
    }
}

@media screen and (min-width: 1200px) {
    .pcsg-why-pcsg .quiqqer-boxContentAdvanced-entry {
        margin: 2rem;
    }
}

.pcsg-why-pcsg .quiqqer-boxContentAdvanced-entry:before {
    content: '';
    inset: -0.25rem;
    position: absolute;
    z-index: -1;
    border-radius: 1rem;
    /*filter: blur(10px);*/
    background-image: linear-gradient(45deg, var(--qui-colors-info), var(--qui-colors-primary), var(--qui-colors-info), var(--qui-colors-primary-300), var(--qui-colors-primary-800));
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: 0 20vh;
    background-size: 100% 60vh;
}

.pcsg-why-pcsg .quiqqer-boxContentAdvanced-entry-content {
    margin-top: 0.5rem;
    opacity: 0.75;
}

/**
 * Sticky section (left text - right boxes)
 */
@media screen and (min-width: 768px) {
    .pcsg-sticky-section {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
        position: relative;
        align-items: start;
    }
}

.pcsg-sticky-section .control-content {
    position: sticky;
    top: 30vh;
}

.brick-container__pcsg-sticky-section {
    background-image: linear-gradient(0deg, #000000aa 5rem, transparent);
    position: relative;
}

.brick-container__pcsg-sticky-section:before {
    content: '';
    inset: 0;
    position: absolute;
    z-index: -1;
    background-image:
            radial-gradient(circle at 20vw 50vh, hsl(from var(--qui-colors-info) h s l / 0.2), transparent 30%),
            radial-gradient(circle at 46vw 61vh, hsl(from var(--qui-colors-primary) h s l / 0.15), transparent 40%);
    background-attachment: fixed, fixed;
    background-color: #111111;
}

.pcsg-sticky-section .quiqqer-boxContentAdvanced-entry-container {
    position: relative;
    z-index: 1;
}

.pcsg-sticky-section .quiqqer-boxContentAdvanced-entries {
    max-width: 30rem;
    margin-inline: auto;
}

.pcsg-sticky-section .quiqqer-boxContentAdvanced-entry {
    margin: 20px;
    width: 100%;
    background: #ffffff07;
    padding: 1.5rem;
    border-radius: 1rem;
    position: relative;
    background: var(--qui-colors-dark-950);
}

@media screen and (min-width: 768px) {
    .pcsg-sticky-section .quiqqer-boxContentAdvanced-entry {
        min-height: 12rem;
    }
}

@media screen and (min-width: 1200px) {
    .pcsg-sticky-section .quiqqer-boxContentAdvanced-entry {
        margin: 2rem;
    }
}

.pcsg-sticky-section .quiqqer-boxContentAdvanced-entry:before {
    content: '';
    inset: -0.25rem;
    position: absolute;
    z-index: -1;
    border-radius: 1rem;
    /*filter: blur(10px);*/
    background-image: linear-gradient(45deg, var(--qui-colors-info), var(--qui-colors-primary), var(--qui-colors-info), var(--qui-colors-primary-300), var(--qui-colors-primary-800));
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: 0 20vh;
    background-size: 100% 60vh;
}

.pcsg-sticky-section .quiqqer-boxContentAdvanced-entry-content {
    margin-top: 0.5rem;
    opacity: 0.75;
}

/**
 * Children list 4er (overridden)
 */

.pcsg-children-simpleGrid {
    --children-card-grid-gap: clamp(1rem, 2vw, 1.5rem);
    --children-card-grid-padding: clamp(1rem, 2vw, 1.5rem);
    --children-card-grid-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
    --children-card-grid-shadow-hover: 0 24px 50px rgba(15, 23, 42, 0.14);
}

.pcsg-children-simpleGrid__list {
    display: grid;
    gap: var(--children-card-grid-gap);
}

.pcsg-children-simpleGrid__list--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pcsg-children-simpleGrid__list--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.pcsg-children-simpleGrid__card {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: var(--qui-radius-card);
    background: var(--qui-colors-surface);
    transition: background-color 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
}

.pcsg-children-simpleGrid__card:hover,
.pcsg-children-simpleGrid__card:focus-within {
    background-color: color-mix(in srgb, var(--qui-colors-surface), black 90%);
    box-shadow: 0 10px 30px #ffffff22;
}

.pcsg-children-simpleGrid__media {
    padding: var(--children-card-grid-padding) var(--children-card-grid-padding) 0;
}

.pcsg-children-simpleGrid__media .fa  {
    font-size: 2rem;
    color: var(--qui-colors-primary);
    position: relative;
}

.pcsg-children-simpleGrid__media .fa:after {
    content: '';
    width: 1.5rem;
    height: 1.5rem;
    position: absolute;
    border-radius: 2rem;
    bottom: -0.75rem;
    right: -0.75rem;
    background-color: hsl(from var(--qui-colors-info) h s l / 40%);
}

.pcsg-children-simpleGrid__image,
.pcsg-children-simpleGrid__image picture,
.pcsg-children-simpleGrid__image img {
    display: block;
    width: 100%;
    height: 100%;
}

.pcsg-children-simpleGrid__card:hover .pcsg-children-simpleGrid__image img,
.pcsg-children-simpleGrid__card:focus-within .pcsg-children-simpleGrid__image img {
    transform: scale(1.04);
}

.pcsg-children-simpleGrid__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 1rem;
    padding: var(--children-card-grid-padding);
}

.pcsg-children-simpleGrid__content {
}

.pcsg-children-simpleGrid__title {
    font-size: 1.1rem;
    font-weight: bold;
    margin-bottom: 0.75em;
}

.pcsg-children-simpleGrid__text {
    opacity: 0.75;
    font-size: var(--qui-fs-sm);
}


.pcsg-children-simpleGrid__overlayLink {
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
}

.pcsg-children-simpleGrid__overlayLink:focus-visible {
    outline: 3px solid var(--qui-colors-primary, #2563eb);
    outline-offset: -3px;
}

@media (max-width: 1200px) {
    .pcsg-children-simpleGrid__list {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    }
}

.pcsg-children-simpleGrid__card:before {
    content: '';
    inset: -0.25rem;
    position: absolute;
    z-index: -1;
    border-radius: 1rem;
    background-image: conic-gradient(from var(--angle), var(--qui-colors-primary) 10deg,  transparent 30deg, transparent 320deg, var(--qui-colors-info), var(--qui-colors-primary));
    animation: pcsg-children-simpleGrid-rotate 5s linear infinite;
    animation-play-state: paused;
    opacity: 0;
    transition: opacity .5s ease-in-out;
}

@keyframes pcsg-children-simpleGrid-rotate {
    to {
        --angle: 360deg;
    }

}

.pcsg-children-simpleGrid:hover .pcsg-children-simpleGrid__card:before {
    animation-play-state: running;
}

.pcsg-children-simpleGrid__card:hover:before {
    opacity: 1;
    transition: opacity .25s ease-in-out;
}

/**
 * Box content
 */
.boxContent--card .quiqqer-boxContentAdvanced-entry {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: var(--qui-radius-card);
    background: var(--qui-colors-surface);
    transition: background-color 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
    padding: clamp(1rem, 2vw, 1.5rem);
}

.boxContent--card .quiqqer-boxContentAdvanced-entry:before {
    content: '';
    inset: -0.25rem;
    position: absolute;
    z-index: -1;
    border-radius: 1rem;
    background-image: conic-gradient(from var(--angle), var(--qui-colors-primary) 10deg, transparent 30deg, transparent 320deg, var(--qui-colors-info), var(--qui-colors-primary));
    animation: pcsg-children-simpleGrid-rotate 5s linear infinite;
    animation-play-state: paused;
    opacity: 0;
    transition: opacity .5s ease-in-out;
}

.boxContent--card:hover .quiqqer-boxContentAdvanced-entry:before {
    animation-play-state: running;
}

.boxContent--card .quiqqer-boxContentAdvanced-entry:hover:before {
    opacity: 1;
    transition: opacity .25s ease-in-out;
}

.boxContent--card .quiqqer-boxContentAdvanced-entry-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.boxContent--card .quiqqer-boxContentAdvanced-entry-content .btn-container {
    margin-top: auto;
}

/* last item has extra styling */
.boxContent--card--lastBoxExtraStyling .quiqqer-boxContentAdvanced-entry-container:last-child .fa {
    color: inherit;
}

.boxContent--card--lastBoxExtraStyling .quiqqer-boxContentAdvanced-entry-container:last-child  .quiqqer-boxContentAdvanced-entry-img .fa:after {
    background-color: #11111155;
}
.boxContent--card--lastBoxExtraStyling .quiqqer-boxContentAdvanced-entry-container:last-child .quiqqer-boxContentAdvanced-entry {
    background: var(--qui-colors-primary);
    color: var(--qui-btn-primary-color);
}

.boxContent--card--lastBoxExtraStyling .quiqqer-boxContentAdvanced-entry-container:last-child .quiqqer-boxContentAdvanced-entry:before {
    background-image: conic-gradient(from var(--angle), #ffffffdd 10deg, transparent 30deg, transparent 320deg, var(--qui-colors-info), #ffffffdd);
}

/**
 * btn with animated border
 */
.btn-pcsg-cta-black,
.btn-pcsg-cta-navBar {
    --qui-btn-color: #fff;
    --qui-btn-bgColor: #111;
    --qui-btn-borderColor: transparent;
    --qui-btn-color--hover: #fff;
    --qui-btn-bgColor--hover: #000;
    --qui-btn-borderColor--hover: transparent;

    position: relative;
    background-color: #111;
}

.btn-pcsg-cta-black {
    box-shadow: 0 3px 20px #ffffff55;
}

.btn-pcsg-cta-navBar {
    outline: 2px solid #ffffff22;
}

.btn-pcsg-cta-black:is(:hover, :focus) {
    box-shadow: 0 3px 26px #ffffff99;
}

.btn-pcsg-cta-navBar:is(:hover, :focus) {
    outline: 2px solid #ffffff;
}

.btn-pcsg-cta-black:after,
.btn-pcsg-cta-navBar:after {
    content: "";
    position: absolute;
    z-index: -1;
    background-image: conic-gradient(from var(--angle), var(--qui-colors-primary) 10deg, transparent 30deg, transparent 280deg, var(--qui-colors-info), var(--qui-colors-primary));
    inset: -0.3rem;
    animation: 5s linear 0s infinite normal none pcsg-children-simpleGrid-rotate;
    transition: opacity 0.5s ease-in-out;
    border-radius: inherit;
}

.btn-pcsg-cta-navBar:after {
    inset: -4px;
}

:is(.btn-pcsg-cta-black, .btn-pcsg-cta-navBar):is(:hover, :focus, :active) {
    animation-play-state: paused;
}

    /**
     * PCSG feature layout
     */
/* todo kann weg */
.pcsg-feature-layout {
    display: grid;
    grid-template-columns: 1fr 40px 1fr;
    gap: 2rem;
    align-items: stretch;
}

/* todo kann weg */
.pcsg-feature-layout__intro,
.pcsg-feature-layout__body {
    position: relative;
    z-index: 1;
}

/* todo kann weg */
.pcsg-feature-layout__headline {
    margin-bottom: 1.5rem;
    color: var(--qui-colors-heading);
}

.pcsg-feature-layout__item {
    padding: 1.5rem;
    border-radius: var(--pcsg-border-radius);
    font-size: var(--qui-fs-sm);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04),
    0 0 0 1px rgba(196,241,84,0.04),
    0 12px 34px rgba(0,0,0,0.24),
    0 0 28px rgba(196,241,84,0.06);
}

.pcsg-feature-layout__item strong {
    display: block;
    margin-bottom: 0.25rem;
    font-size: var(--qui-fs-body);
}

.pcsg-feature-layout__items {
    display: grid;
    gap: 1rem;
}

/* todo kann weg */
@media (max-width: 767px) {
    .pcsg-feature-layout {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

@media (max-width: 640px) {
    .pcsg-feature-layout__item {
        padding: 20px;
        border-radius: 16px;
    }

    .pcsg-feature-layout__item strong {
        font-size: var(--qui-fs-body);
    }

    .pcsg-feature-layout__item p,
    .pcsg-feature-layout__text {
        font-size: var(--qui-fs-sm);
    }
}

/**
 * Pricing cards
 */
.quiqqer-pricetable-pricingCards__text {
    opacity: 0.75;
}

.quiqqer-pricetable-pricingCards__media {
    margin-bottom: 1rem;
}

.quiqqer-pricetable-pricingCards__media .quiqqer-icon {
    color: var(--qui-colors-primary);
    position: relative;
}

.quiqqer-pricetable-pricingCards__media .quiqqer-icon:after {
    content: '';
    width: 1.5rem;
    height: 1.5rem;
    position: absolute;
    border-radius: 2rem;
    bottom: -0.75rem;
    right: -0.75rem;
    background-color: hsl(from var(--qui-colors-info) h s l / 40%);
}

.quiqqer-pricetable-pricingCards__card--highlight-solid .quiqqer-icon,
.quiqqer-pricetable-pricingCards__card--highlight-solid .quiqqer-pricetable-pricingCards__price {
    color: inherit;
}

.quiqqer-pricetable-pricingCards__price {
    color: var(--qui-colors-primary);
}

.quiqqer-pricetable-pricingCards__card:before {
    content: '';
    inset: -0.25rem;
    position: absolute;
    z-index: -1;
    border-radius: 1rem;
    background-image: conic-gradient(from var(--angle), var(--qui-colors-primary) 10deg, transparent 30deg, transparent 320deg, var(--qui-colors-info), var(--qui-colors-primary));
    animation: pcsg-children-simpleGrid-rotate 5s linear infinite;
    animation-play-state: paused;
    opacity: 0;
    transition: opacity .5s ease-in-out;
}

.quiqqer-pricetable-pricingCards__card {
    transform: none !important;
    overflow: visible !important;
}

.quiqqer-pricetable-pricingCards__card:hover:before {
    animation-play-state: running;
}

.quiqqer-pricetable-pricingCards__card:hover:before {
    opacity: 1;
    transition: opacity .25s ease-in-out;
}

/**
 * scrollPinnedCards
 */
.quiqqer-presentationBricks-scrollPinnedCards__cardIcon {
    color: var(--qui-colors-primary);
    position: relative;
    margin-right: 1rem;
}

.quiqqer-presentationBricks-scrollPinnedCards__cardIcon:after {
    content: '';
    width: 1.5rem;
    height: 1.5rem;
    position: absolute;
    border-radius: 2rem;
    bottom: -0.75rem;
    right: -0.75rem;
    background-color: hsl(from var(--qui-colors-info) h s l / 40%);
}

.quiqqer-presentationBricks-scrollPinnedCards__card:before {
    content: '';
    inset: -0.25rem;
    position: absolute;
    z-index: -1;
    border-radius: inherit;
    background-image: conic-gradient(from var(--angle), var(--qui-colors-primary) 10deg, transparent 30deg, transparent 320deg, var(--qui-colors-info), var(--qui-colors-primary));
    animation: pcsg-children-simpleGrid-rotate 5s linear infinite;
    animation-play-state: paused;
    opacity: 0;
    transition: opacity .5s ease-in-out;
}

.quiqqer-presentationBricks-scrollPinnedCards__card {
    transform: none !important;
    overflow: visible !important;
}

.quiqqer-presentationBricks-scrollPinnedCards__card:hover:before {
    animation-play-state: running;
    opacity: 1;
    transition: opacity .25s ease-in-out;
}

.quiqqer-presentationBricks-scrollPinnedCards__cardImage {
    border-radius: var(--_cardRadius);
}