.vt-referenzen,
.vt-referenzen *,
.vt-referenzen *::before,
.vt-referenzen *::after { box-sizing:border-box; }


.vt-nogrid.vt-referenzen { width:100%; max-width:1320px; margin:0 auto; padding:30px 24px 80px; }
@media (min-width:861px)  { .vt-nogrid.vt-referenzen { padding:30px 20px 80px; } }
@media (min-width:1400px) { .vt-nogrid.vt-referenzen { padding:30px 24px 80px; } }
@media (max-width:860px)  { .vt-nogrid.vt-referenzen { padding:30px 16px 60px; } }
@media (max-width:480px)  { .vt-nogrid.vt-referenzen { padding-right:0; padding-left:0; } }


body.vt-referenzen-stage-links-heller .webhosting-back {
    background:
        radial-gradient(ellipse at 10% 8%, rgba(40,139,245,.20) 0%, rgba(26,88,168,.11) 28%, rgba(20,62,120,.05) 62%, transparent 82%),
        radial-gradient(ellipse at 82% 42%, rgba(22,105,210,.08) 0%, rgba(22,105,210,.035) 36%, transparent 68%),
        radial-gradient(ellipse at 45% 78%, rgba(30,105,205,.35) 0%, transparent 62%),
        linear-gradient(180deg, #182b49 0%, #142540 30%, #12233e 65%, #12233e 100%) !important;
}


@media (max-width:860px) { body.vt-page-referenzen #webhosting-faq { padding-right:20px; padding-left:20px; } }
@media (max-width:480px) { body.vt-page-referenzen #webhosting-faq { padding-right:5px;  padding-left:5px;  } }


.vt-referenzen-card {
    position:relative;
    margin-top:clamp(20px,2.4vw,34px);
    padding:clamp(22px,2.6vw,38px);
    border-radius:22px;
    color:#fff;
}
.vt-referenzen-card:first-child { margin-top:0; }
.vt-referenzen-card--dunkel {
    background:linear-gradient(145deg,rgba(10,28,55,.97) 0%,rgba(9,25,49,.96) 55%,rgba(7,21,43,.97) 100%);
    border:1px solid rgba(94,169,255,.38);
    box-shadow:0 12px 30px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.075);
}
.vt-referenzen-card--hell {
    background:linear-gradient(145deg,rgba(22,50,86,.94) 0%,rgba(15,37,67,.90) 55%,rgba(13,33,60,.92) 100%);
    box-shadow:0 12px 30px rgba(0,0,0,.16);
}
@media (max-width:480px) { .vt-referenzen-card { padding:16px; border-radius:16px; } }

.vt-referenzen .vt-referenzen-kicker {
    margin:0 0 10px;
    font-size:13px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:#8fb4e8;
}
.vt-referenzen .vt-referenzen-title {
    margin:0 0 18px;
    font-size:1.5rem;
    font-weight:700;
    line-height:1.3;
    text-transform:none;
    color:#fff;
}
.vt-referenzen p { color:rgba(255,255,255,.90); line-height:1.6; }
.vt-referenzen .vt-referenzen-lead { max-width:72ch; margin:0; font-size:19px; }
@media (max-width:860px) { .vt-referenzen .vt-referenzen-lead { font-size:17px; } }

.vt-referenzen-punkte {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:24px 36px;
}
.vt-referenzen .vt-referenzen-h3 {
    margin:0 0 8px;
    font-size:1.1rem;
    font-weight:700;
    line-height:1.35;
    letter-spacing:normal;
    text-transform:none;
    color:#fff;
}
.vt-referenzen-punkte p { margin:0; font-size:16px; }
@media (max-width:860px) { .vt-referenzen-punkte { grid-template-columns:minmax(0,1fr); } }


.vt-referenzen-closing {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:20px 40px;
}
.vt-referenzen-closing p { margin:0; }
.vt-referenzen-cta {
    display:inline-flex;
    align-items:center;
    gap:12px;
    min-height:52px;
    padding:0 28px;
    background-color:rgba(10,20,45,.72);
    border:1px solid rgb(19,81,137);
    border-radius:20px;
    color:#fff;
    text-decoration:none;
    transition:transform .18s ease, background-color .18s ease, border-color .18s ease;
}
.vt-referenzen-cta:hover,
.vt-referenzen-cta:focus-visible {
    background-color:rgb(12,35,77);
    border-color:rgb(34,138,232);
    color:#fff;
    transform:translateY(-2px);
}
.vt-referenzen-cta:focus-visible { outline:2px solid rgb(120,190,255); outline-offset:3px; }
.vt-referenzen-cta__arrow {
    width:8px; height:8px;
    border-top:2px solid currentColor;
    border-right:2px solid currentColor;
    transform:rotate(45deg);
}
@media (max-width:480px) { .vt-referenzen-cta { width:100%; justify-content:space-between; } }


.vt-referenzen-banner {
    position:relative;
    width:100vw;
    margin:clamp(24px,3vw,44px) 0 0 calc(50% - 50vw);
}
.vt-referenzen-banner__scene {
    position:relative;
    height:clamp(320px,29vw,620px);
    overflow:hidden;
    perspective:94vw;
    perspective-origin:50% 10%;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%),
                       linear-gradient(180deg,#000 88%,transparent 100%);
    -webkit-mask-composite:source-in;
            mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%),
                       linear-gradient(180deg,#000 88%,transparent 100%);
            mask-composite:intersect;
}
.vt-referenzen-banner__scene::after {
    content:"";
    position:absolute;
    left:0; right:0; top:0;
    height:22%;
    background:linear-gradient(#12233e,transparent);
    pointer-events:none;
}
.vt-referenzen-banner__plane {
    position:absolute;
    left:50%;
    top:1.6vw;
    width:102vw;
    aspect-ratio:1960 / 760;
    margin-left:-51vw;
    transform:rotateX(38deg);
    transform-origin:50% 0;
    transform-style:preserve-3d;
}
.vt-referenzen-banner__card {
    position:absolute;
    display:block;
    transform:rotate(var(--vt-ref-rot,0deg));
    box-shadow:0 30px 60px rgba(0,0,0,.6);
}
.vt-referenzen-banner__card img { display:block; width:100%; height:auto; }


.vt-referenzen-banner__card--alt { filter:blur(2.2px) brightness(.42) saturate(.7); }
.vt-referenzen-banner__card--alt::after {
    content:"";
    position:absolute;
    inset:0;
    background:rgba(14,30,58,.35);
}

.vt-referenzen-banner__card--vabw-alt-projekte { filter:blur(1px) brightness(.58) saturate(.8); }
.vt-referenzen-banner__card--mitte   { filter:blur(.9px) brightness(.58) saturate(.8); }
.vt-referenzen-banner__card--neu     { filter:blur(.5px) brightness(.58) saturate(.8); }
.vt-referenzen-banner__card--aktuell { filter:blur(.3px) brightness(.66) saturate(.85); }
.vt-referenzen-banner__card--vt      { outline:2px solid rgba(94,169,255,.5); }

.vt-referenzen .screen-reader-text {
    position:absolute !important;
    width:1px; height:1px;
    overflow:hidden;
    clip:rect(1px,1px,1px,1px);
    white-space:nowrap;
}

@media (prefers-reduced-motion:reduce) { .vt-referenzen-cta { transition:none; } }


@media (max-width:860px) {
    .vt-referenzen-banner__scene {
        height:clamp(240px,64vw,520px);
        perspective:170vw;
        -webkit-mask-image:linear-gradient(180deg,#000 80%,transparent 100%);
                mask-image:linear-gradient(180deg,#000 80%,transparent 100%);
        -webkit-mask-composite:source-over;
                mask-composite:add;
    }
    .vt-referenzen-banner__plane {
        top:3vw;
        width:190vw;
        margin-left:-95vw;
        transform:rotateX(32deg);
    }
    .vt-referenzen-banner__card { box-shadow:0 14px 28px rgba(0,0,0,.6); }
    .vt-referenzen-banner__card--alt { filter:blur(1.4px) brightness(.42) saturate(.7); }
}


@media (min-width:1025px) {
    .vt-page-referenzen.vt-small-header .vt-header-gap { position:static; }
    .vt-page-referenzen.vt-small-header .vt-header-divider {
        display:block;
        position:absolute;
        top:auto;
        bottom:-50px;
        left:50%;
        margin:0 !important;
        padding:0 !important;
        transform:translateX(-50%);
    }
}
@media (max-width:1024px) { .vt-nogrid.vt-referenzen { margin-top:-80px; } }
@media (min-width:1025px) { .vt-nogrid.vt-referenzen { margin-top:0; } }


.vt-referenzen .vt-referenzen-lead + .vt-referenzen-lead { margin-top:1em; }
.vt-referenzen-banner + .vt-referenzen-card { margin-top:80px; }
@media (max-width:860px) { .vt-referenzen-banner + .vt-referenzen-card { margin-top:40px; } }

@media (max-width:600px) {
    .vt-referenzen-banner__scene { height:86vw; perspective:220vw; }
    .vt-referenzen-banner__plane { top:2vw; width:250vw; margin-left:-125vw; transform:rotateX(30deg); }
    .vt-referenzen-banner__card--alt { filter:blur(1px) brightness(.42) saturate(.7); }
}


.vt-nogrid.vt-referenzen { padding-bottom:0; }


@media (min-width:861px) {
    .vt-referenzen-banner { margin-top:68px; }
    .vt-referenzen-banner + .vt-referenzen-card { margin-top:40px; }
}
@media (max-width:860px) {
    .vt-referenzen-banner { margin-top:40px; }
    .vt-referenzen-banner + .vt-referenzen-card { margin-top:24px; }
}