/* =====================================================================
   VisionThinks – Smallheader NoGrid
   Neutrale Content-Blocks + menschlicher UI-Baukasten
   Keine vt-hilfe-* Selektoren ergänzen.
   ===================================================================== */

/* START NoGrid – neutrale Basis – nicht löschen */
.vt-nogrid { width:100%; max-width:1320px; margin:0 auto; padding:30px 24px 80px; }
.vt-nogrid > .vt-nogrid-card {
    width:100%;
    padding:34px;
    margin-top:28px;
    background:linear-gradient(145deg,rgba(22,50,86,.94) 0%,rgba(15,37,67,.90) 55%,rgba(13,33,60,.92) 100%);
    border:1px solid rgba(94,169,255,.24);
    border-radius:22px;
    box-shadow:0 12px 30px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.055);
    color:#fff;
}
.vt-nogrid > .vt-nogrid-card:first-child { margin-top:0; }
.vt-nogrid-section + .vt-nogrid-section { margin-top:48px; padding-top:40px; border-top:1px solid rgba(255,255,255,.10); }
.vt-nogrid-section h2 { margin-top:0; margin-bottom:28px; font-size:24px; font-weight:700; color:#fff; }
.vt-nogrid-section p { color:rgba(255,255,255,.92); }
.vt-nogrid-info { display:flex; align-items:flex-start; gap:12px; margin-top:24px; padding:16px 18px; border:1px solid rgba(83,171,235,.42); border-radius:10px; background:rgba(18,77,119,.42); }
.vt-nogrid-info-icon { display:inline-flex; flex:0 0 auto; align-items:center; justify-content:center; }
.vt-nogrid-info-text { margin:0; }
.vt-baukasten-label { margin:0 0 18px; font-size:14px; font-weight:600; color:rgba(255,255,255,.74); }
/* ENDE NoGrid – neutrale Basis */

/* START menschlicher Baukasten – Card-Abstände – nicht löschen */
/* Standard: 28px zwischen Cards; erste Card ohne zusätzlichen Abstand. */
/* ENDE menschlicher Baukasten – Card-Abstände */

/* START menschlicher Baukasten – Card-Varianten – nicht löschen */
/* standard – aktueller neutraler NoGrid-Ausgangszustand. */
.vt-nogrid > .vt-nogrid-card.vt-baukasten-card--standard {}
/* version2 – heller/blauer, klarerer Rahmen, kräftigere Trennlinien. */
.vt-nogrid > .vt-nogrid-card.vt-baukasten-card--version2 { background:rgba(28,74,122,.96); border-color:rgba(63,163,235,.72); box-shadow:inset 0 0 0 1px rgba(126,200,255,.08),0 12px 30px rgba(0,16,40,.16); }
.vt-nogrid > .vt-nogrid-card.vt-baukasten-card--version2 .vt-nogrid-section + .vt-nogrid-section { border-top:2px solid rgba(92,183,245,.68); }
/* version3 – Gestaltung folgt nach Sichtprüfung. */
.vt-nogrid > .vt-nogrid-card.vt-baukasten-card--version3 {}
/* ENDE menschlicher Baukasten – Card-Varianten */

/* START menschlicher Baukasten – Trennlinien – nicht löschen */
/* Weitere Varianten werden hier ergänzt. */
/* ENDE menschlicher Baukasten – Trennlinien */

/* START menschlicher Baukasten – Bühnenvarianten – nicht löschen */
/* Bühnenvarianten folgen nach Auswahl der Card-Sprache. */
/* ENDE menschlicher Baukasten – Bühnenvarianten */


.vt-baukasten-watermark-square-test {
    --vt-watermark-opacity: .22;
}

.vt-baukasten-watermark-wordmark-small-test {
    --vt-watermark-opacity: .16;
}

.vt-baukasten-watermark-center-test {
    --vt-watermark-opacity: .06;
}

@media (max-width:860px) {
    #webhosting-faq {
        padding-right: 20px;
        padding-left: 20px;
    }

    .vt-nogrid { padding:30px 16px 60px; }
    .vt-nogrid > .vt-nogrid-card { padding:20px; }
    .vt-nogrid-section { overflow-wrap:break-word; }
    .vt-nogrid-info { padding:14px; }
}

@media (min-width:861px) {
    .vt-nogrid { padding:30px 20px 80px; }
    .vt-nogrid > .vt-nogrid-card { padding:28px; }
    .vt-nogrid-info { padding:16px; }
}

@media (min-width:1400px) {
    .vt-nogrid { padding:30px 24px 80px; }
    .vt-nogrid > .vt-nogrid-card { padding:34px; }
    .vt-nogrid-info { padding:16px 18px; }
}

@media (max-width:480px) {
    #webhosting-faq {
        padding-right: 5px;
        padding-left: 5px;
    }

    .vt-nogrid { padding-right:0; padding-left:0; }
    .vt-nogrid > .vt-nogrid-card { padding:16px; }
    .vt-nogrid-section + .vt-nogrid-section { margin-top:36px; padding-top:32px; }
    .vt-nogrid-section h2 { font-size:22px; }
    .vt-nogrid-info { flex-direction:column; gap:8px; padding:12px; }
}




/*
.vt-baukasten-card-info-version2
*/

.vt-baukasten-card-info-version2{
	background: linear-gradient(
	    145deg,
	    rgba(22,50,86,.94) 0%,
	    rgba(15,37,67,.90) 55%,
	    rgba(13,33,60,.92) 100%
	);
	border: 1px solid rgba(94,169,255,.64);
	border-radius: 16px;
	box-shadow:
	    0 12px 30px rgba(0,0,0,.16),
	    inset 0 1px 0 rgba(255,255,255,.025);
	padding: 14px 16px;
}



.vt-nogrid > .vt-nogrid-card.vt-baukasten-card--version3 {
    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);
      border-radius: 22px;
      box-shadow: 0 12px 30px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.075);
}

/* =====================================================================
   START menschlicher Baukasten – Bühnenvarianten / Testumschalter – nicht löschen
   ===================================================================== */

/* Teststeuerung nur für die NoGrid-Vorlage. */
.vt-stage-test-switcher {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:10px;
    margin:0 0 28px;
    padding:14px 16px;
    border:1px solid rgba(94,169,255,.24);
    border-radius:14px;
    background:rgba(6,19,47,.72);
}

.vt-stage-test-switcher__label {
    margin-right:4px;
    font-size:13px;
    font-weight:600;
    color:rgba(255,255,255,.72);
}

.vt-stage-test-switcher__link {
    display:inline-flex;
    align-items:center;
    min-height:34px;
    padding:6px 12px;
    border:1px solid rgba(94,169,255,.34);
    border-radius:9px;
    background:rgba(255,255,255,.055);
    color:rgba(255,255,255,.90);
    font-size:13px;
    font-weight:600;
    line-height:1.2;
    text-decoration:none;
}

.vt-stage-test-switcher__link:hover,
.vt-stage-test-switcher__link:focus-visible {
    border-color:rgba(94,169,255,.72);
    background:rgba(94,169,255,.14);
    color:#fff;
}

.vt-stage-test-switcher__link.is-active {
    border-color:rgba(94,169,255,.82);
    background:rgba(40,139,245,.22);
    color:#fff;
}

/* 1 – Standard Funnel */
.webhosting-back.vt-stage--standard-funnel {
    background:
        radial-gradient(ellipse at 50% 8%, rgba(40,139,245,.20) 0%, rgba(26,88,168,.11) 38%, 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;
}

/* 2 – Links heller */
.webhosting-back.vt-stage--links-heller {
    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;
}

/* 3 – Invertiert und verschoben */
.webhosting-back.vt-stage--invertiert {
    background:
        radial-gradient(ellipse at 90% 8%, rgba(255,255,255,.12) 0%, rgba(205,225,250,.10) 8%, rgba(125,175,230,.03) 62%, transparent 82%),
        radial-gradient(ellipse at 2% 42%, rgba(255,255,255,.045) 0%, rgba(165,205,245,.025) 48%, transparent 76%),
        linear-gradient(145deg, rgba(15,62,120,.98) 0%, rgba(11,47,96,.98) 5%, rgba(8,35,78,.99) 80%) !important;
}

@media (max-width:600px) {
    .vt-stage-test-switcher {
        align-items:stretch;
    }

    .vt-stage-test-switcher__label {
        width:100%;
    }
}

/* =====================================================================
   ENDE menschlicher Baukasten – Bühnenvarianten / Testumschalter
   ===================================================================== */

/* Bühnen-Test – Abstand der Umschalter */
.vt-stage-test-switcher__controls {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px 18px;
}

/* Hilfe-Startseite – Verteiler */
.vt-start-hilfe-distributor {
    display: grid;
    grid-template-columns:
        minmax(210px, .85fr)
        minmax(280px, 1fr)
        minmax(320px, 1.15fr);

    gap: clamp(20px, 2.2vw, 38px);
    align-items: center;

    padding: clamp(22px, 2.6vw, 38px);
    margin-block: clamp(20px, 2.4vw, 34px);

    border: 1px solid rgba(100, 170, 255, .18);
    border-radius: 22px;

    background:
        linear-gradient(
            135deg,
            rgba(17, 35, 68, .96),
            rgba(11, 23, 47, .98)
        );

    box-shadow: 0 22px 55px rgba(0, 0, 0, .24);
}

.vt-start-hilfe-distributor__logos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(10px, 1.4vw, 20px);
    align-items: start;
}

.vt-start-hilfe-logo {
    min-width: 0;
    text-align: center;
}

.vt-start-hilfe-logo img {
    display: block;

    width: clamp(62px, 6vw, 96px);
    aspect-ratio: 1 / 1;

    margin-inline: auto;

    object-fit: contain;
}

.vt-start-hilfe-logo span {
    display: block;

    margin-top: clamp(6px, .7vw, 10px);

    font-size: clamp(12px, .85vw, 15px);
    line-height: 1.25;
}

.vt-start-hilfe-distributor__copy {
    min-width: 0;
}

.vt-start-hilfe-distributor__copy h2 {
    margin-top: 0;
}

.vt-start-hilfe-distributor__copy p {
    margin-bottom: clamp(16px, 1.6vw, 24px);
}



.vt-start-hilfe-distributor__media {
    position: relative;
    min-width: 0;

    aspect-ratio: 16 / 9;

    overflow: hidden;
    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            rgba(34, 100, 190, .42),
            rgba(8, 20, 43, .8)
        );
}

.vt-start-hilfe-distributor__media-placeholder {
    width: 100%;
    height: 100%;
}

.vt-start-hilfe-distributor__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vt-start-hilfe-distributor__cta {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    min-height: 52px;
    padding: 0 28px;

    background-color: rgb(10, 20, 45);

    border: 1px solid rgb(19, 81, 137);
    border-radius: 20px;

    color: #fff;
    text-decoration: none;
}

.vt-start-hilfe-distributor__cta:hover,
.vt-start-hilfe-distributor__cta:focus-visible {
    background-color: rgb(12, 35, 77);
    border-color: rgb(34, 138, 232);
    color: #fff;
}

.vt-start-hilfe-distributor__cta:focus,
.vt-start-hilfe-distributor__cta:focus-visible,
.vt-start-hilfe-distributor__cta:active {
    outline: none;
    box-shadow: none;
}

.vt-start-hilfe-distributor__cta-arrow {
    width: 8px;
    height: 8px;

    border-right: 2px solid currentColor;
    border-top: 2px solid currentColor;

    transform: rotate(45deg);

    flex: 0 0 auto;
}

/* Lokaler Verteiler-Test: Inhalt vor Bild */
.vt-start-hilfe-distributor {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.vt-start-hilfe-distributor__logos,
.vt-start-hilfe-distributor__copy {
    position: relative;
    z-index: 2;
}

.vt-start-hilfe-distributor__media {
    z-index: 1;
}

.vt-start-hilfe-distributor__copy h2.normal {
    font-size: 1.5rem;
    text-transform: none;
}


/* Nur E-Mail-Card:
   Bild bündig oben, unten und rechts.
   SFTP bleibt zum Vergleich unverändert. */
.vt-start-hilfe-distributor--email {
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
}

.vt-start-hilfe-distributor--email .vt-start-hilfe-distributor__media {
    align-self: stretch;
    height: 100%;

    border-radius: 0;
}

.vt-start-hilfe-distributor--email .vt-start-hilfe-distributor__media img {
    height: 100%;
    object-fit: cover;
}



.vt-start-hilfe-distributor__media {
    overflow: hidden;
}

.vt-start-hilfe-distributor__media img {
    width: 130%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* E-Mail-Card: Overlay-Experiment */
.vt-start-hilfe-distributor--email {
    position: relative;
    isolation: isolate;

    grid-template-columns:
        minmax(230px, .9fr)
        minmax(320px, 1.15fr)
        minmax(0, .95fr);

    overflow: hidden;
}

.vt-start-hilfe-distributor--email::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 1;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(7, 23, 48, .98) 0%,
            rgba(7, 23, 48, .94) 28%,
            rgba(7, 23, 48, .72) 48%,
            rgba(7, 23, 48, .34) 68%,
            rgba(7, 23, 48, .08) 100%
        );
}

.vt-start-hilfe-distributor--email .vt-start-hilfe-distributor__logos,
.vt-start-hilfe-distributor--email .vt-start-hilfe-distributor__copy {
    position: relative;
    z-index: 3;
}

.vt-start-hilfe-distributor--email .vt-start-hilfe-distributor__media {
    position: absolute;

    top: 0;
    right: 0;
    bottom: 0;

    z-index: 0;

    width: 68%;
    height: 100%;

    overflow: hidden;
}

.vt-start-hilfe-distributor--email .vt-start-hilfe-distributor__media img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: 62% center;
}

/* E-Mail-Experiment: 56px mehr Höhe */
.vt-start-hilfe-distributor--email {
    min-height: calc(100% + 56px);
}

.vt-start-hilfe-distributor--email .vt-start-hilfe-distributor__copy {
    align-self: stretch;

    display: flex;
    flex-direction: column;

    padding-top: 28px;
    padding-bottom: 28px;
}

.vt-start-hilfe-distributor--email .vt-start-hilfe-distributor__cta {
    margin-top: auto;
}

/* E-Mail-Experiment: CTA über Bild, Text vertikal ruhiger */
.vt-start-hilfe-distributor--email .vt-start-hilfe-distributor__copy {
    justify-content: center;
}

.vt-start-hilfe-distributor--email .vt-start-hilfe-distributor__cta {
    position: absolute;

    right: 28px;
    bottom: 28px;

    z-index: 4;

    width: auto;
    min-width: 0;

    margin-top: 0;

    background-color: rgba(10, 20, 45, .58);
    border-color: rgba(34, 138, 232, .58);
}

.vt-start-hilfe-distributor--email .vt-start-hilfe-distributor__cta:hover,
.vt-start-hilfe-distributor--email .vt-start-hilfe-distributor__cta:focus-visible {
    background-color: rgba(12, 35, 77, .92);
    border-color: rgb(34, 138, 232);
}

/* E-Mail-Experiment: CTA unabhängig vom Copy-Bereich */
.vt-start-hilfe-distributor--email .vt-start-hilfe-distributor__cta--email {
    position: absolute;

    right: 32px;
    bottom: 28px;

    z-index: 4;

    width: auto;
    min-width: 0;
    margin: 0;

    background-color: rgba(10, 20, 45, .48);
    border-color: rgba(34, 138, 232, .58);
}

.vt-start-hilfe-distributor--email .vt-start-hilfe-distributor__cta--email:hover,
.vt-start-hilfe-distributor--email .vt-start-hilfe-distributor__cta--email:focus-visible {
    background-color: rgba(12, 35, 77, .92);
    border-color: rgb(34, 138, 232);
}

/* E-Mail-Experiment: CTA unabhängig vom Copy-Bereich */
.vt-start-hilfe-distributor--email .vt-start-hilfe-distributor__cta--email {
    position: absolute;

    right: 32px;
    bottom: 28px;

    z-index: 4;

    width: auto;
    min-width: 0;
    margin: 0;

    background-color: rgba(10, 20, 45, .48);
    border-color: rgba(34, 138, 232, .58);
}

.vt-start-hilfe-distributor--email .vt-start-hilfe-distributor__cta--email:hover,
.vt-start-hilfe-distributor--email .vt-start-hilfe-distributor__cta--email:focus-visible {
    background-color: rgba(12, 35, 77, .92);
    border-color: rgb(34, 138, 232);
}

/* E-Mail-Experiment: Zielgeometrie */
.vt-start-hilfe-distributor--email {
    min-height: calc(100% + 126px);
}

.vt-start-hilfe-distributor--email .vt-start-hilfe-distributor__copy {
    align-self: center;
    justify-content: center;

    padding-top: 0;
    padding-bottom: 12px;
}

.vt-start-hilfe-distributor--email .vt-start-hilfe-distributor__cta--email {
    right: 32px;
    bottom: 32px;

    min-height: 52px;

    background-color: rgba(10, 20, 45, .38);
    border-color: rgba(34, 138, 232, .55);
}

.vt-start-hilfe-distributor--email .vt-start-hilfe-distributor__cta--email:hover,
.vt-start-hilfe-distributor--email .vt-start-hilfe-distributor__cta--email:focus-visible {
    background-color: rgba(10, 20, 45, .68);
    border-color: rgba(34, 138, 232, .90);
}

/* E-Mail-Experiment: eindeutige Cardhöhe */
.vt-start-hilfe-distributor--email {
    min-height: 190px;
}

.vt-start-hilfe-distributor--email .vt-start-hilfe-distributor__cta--email {
    bottom: 26px;
}

/* E-Mail-Experiment: Cardhöhe 260px */
.vt-start-hilfe-distributor--email {
    min-height: 260px;
}

.vt-start-hilfe-distributor--email
.vt-start-hilfe-distributor__cta--email {
    min-height: 48px;
    padding: 0 22px;

    background-color: rgba(10, 20, 45, .18);
    border-color: rgba(60, 160, 245, .68);

    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.vt-start-hilfe-distributor--email
.vt-start-hilfe-distributor__cta--email:hover,
.vt-start-hilfe-distributor--email
.vt-start-hilfe-distributor__cta--email:focus-visible {
    background-color: rgba(10, 35, 70, .46);
    border-color: rgba(60, 160, 245, .95);
}

/* SFTP-Distributor nach bestätigtem E-Mail-Muster */
.vt-start-hilfe-distributor--sftp {
    position: relative;
    isolation: isolate;

    grid-template-columns:
        minmax(230px, .9fr)
        minmax(320px, 1.15fr)
        minmax(0, .95fr);

    min-height: 260px;

    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;

    overflow: hidden;
}

.vt-start-hilfe-distributor--sftp::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 1;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(7, 23, 48, .98) 0%,
            rgba(7, 23, 48, .94) 28%,
            rgba(7, 23, 48, .72) 48%,
            rgba(7, 23, 48, .34) 68%,
            rgba(7, 23, 48, .08) 100%
        );
}

.vt-start-hilfe-distributor--sftp .vt-start-hilfe-distributor__logos,
.vt-start-hilfe-distributor--sftp .vt-start-hilfe-distributor__copy {
    position: relative;
    z-index: 3;
}

.vt-start-hilfe-distributor--sftp .vt-start-hilfe-distributor__copy {
    align-self: center;
    justify-content: center;

    padding-top: 0;
    padding-bottom: 12px;
}

.vt-start-hilfe-distributor--sftp .vt-start-hilfe-distributor__media {
    position: absolute;

    top: 0;
    right: 0;
    bottom: 0;

    z-index: 0;

    width: 68%;
    height: 100%;

    overflow: hidden;
    border-radius: 0;
}

.vt-start-hilfe-distributor--sftp .vt-start-hilfe-distributor__media img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: 62% center;
}

.vt-start-hilfe-distributor--sftp .vt-start-hilfe-distributor__cta--sftp {
    position: absolute;

    right: 32px;
    bottom: 26px;

    z-index: 4;

    width: auto;
    min-width: 0;

    min-height: 48px;
    padding: 0 22px;
    margin: 0;

    background-color: rgba(10, 20, 45, .18);
    border-color: rgba(60, 160, 245, .68);

    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.vt-start-hilfe-distributor--sftp .vt-start-hilfe-distributor__cta--sftp:hover,
.vt-start-hilfe-distributor--sftp .vt-start-hilfe-distributor__cta--sftp:focus-visible {
    background-color: rgba(10, 35, 70, .46);
    border-color: rgba(60, 160, 245, .95);
}

/* SFTP: Bildkomposition an E-Mail angleichen */
.vt-start-hilfe-distributor--sftp .vt-start-hilfe-distributor__media img {
    object-fit: contain;
    object-position: right center;
}




.vt-start-hilfe-distributor--email
.vt-start-hilfe-distributor__cta--email,
.vt-start-hilfe-distributor--sftp
.vt-start-hilfe-distributor__cta--sftp {
    right: 28px;
    bottom: auto;
    top: 68%;

    transform: translateY(-50%);
}

/* E-Mail: Bildkomposition ruhiger darstellen */
.vt-start-hilfe-distributor--email .vt-start-hilfe-distributor__media img {
    object-fit: contain;
    object-position: right center;
}


.vt-start-hilfe-distributor--email .vt-start-hilfe-distributor__media img {
    width: 108%;
    max-width: none;
    object-fit: contain;
    object-position: right center;
}

.vt-start-hilfe-distributor--sftp .vt-start-hilfe-distributor__media img {
    width: 92%;
    max-width: none;
    margin-left: auto;
    object-fit: contain;
    object-position: right center;
}

/*
.vt-start-hilfe-distributor--email .vt-start-hilfe-distributor__media img,
.vt-start-hilfe-distributor--sftp .vt-start-hilfe-distributor__media img

*/

.vt-start-hilfe-distributor--email .vt-start-hilfe-distributor__media img{
    transform: translateX(-45px);
}

/* E-Mail: leichte Hervorhebung */
.vt-start-hilfe-distributor--email {
    border-color: rgba(50, 145, 235, .42);
}

/* LiveConfig-Distributor: Basis nach bestätigtem SFTP-Muster */
.vt-start-hilfe-distributor--liveconfig {
    position: relative;
    isolation: isolate;

    grid-template-columns:
        minmax(230px, .9fr)
        minmax(320px, 1.15fr)
        minmax(0, .95fr);

    min-height: 260px;

    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;

    overflow: hidden;
}

.vt-start-hilfe-distributor--liveconfig::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 1;
    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(7, 23, 48, .98) 0%,
            rgba(7, 23, 48, .94) 28%,
            rgba(7, 23, 48, .72) 48%,
            rgba(7, 23, 48, .34) 68%,
            rgba(7, 23, 48, .08) 100%
        );
}

.vt-start-hilfe-distributor--liveconfig .vt-start-hilfe-distributor__logos,
.vt-start-hilfe-distributor--liveconfig .vt-start-hilfe-distributor__copy {
    position: relative;
    z-index: 3;
}

.vt-start-hilfe-distributor--liveconfig .vt-start-hilfe-distributor__copy {
    align-self: center;
    justify-content: center;

    padding-top: 0;
    padding-bottom: 12px;
}

.vt-start-hilfe-distributor--liveconfig .vt-start-hilfe-distributor__media {
    position: absolute;

    top: 0;
    right: 0;
    bottom: 0;

    z-index: 0;

    width: 68%;
    height: 100%;

    overflow: hidden;
    border-radius: 0;
}

.vt-start-hilfe-distributor--liveconfig .vt-start-hilfe-distributor__media img {
    width: 92%;
    max-width: none;
    height: 100%;
    margin-left: auto;

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

.vt-start-hilfe-distributor--liveconfig .vt-start-hilfe-distributor__cta--liveconfig {
    position: absolute;

    right: 28px;
    top: 68%;

    z-index: 4;

    width: auto;
    min-width: 0;
    min-height: 48px;

    padding: 0 22px;
    margin: 0;

    transform: translateY(-50%);

    background-color: rgba(10, 20, 45, .18);
    border-color: rgba(60, 160, 245, .68);

    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.vt-start-hilfe-distributor--liveconfig .vt-start-hilfe-distributor__cta--liveconfig:hover,
.vt-start-hilfe-distributor--liveconfig .vt-start-hilfe-distributor__cta--liveconfig:focus-visible {
    background-color: rgba(10, 35, 70, .46);
    border-color: rgba(60, 160, 245, .95);
}

/* LiveConfig: Bild über vollständige Cardbreite */
.vt-start-hilfe-distributor--liveconfig .vt-start-hilfe-distributor__media {
    width: 100%;
}

.vt-start-hilfe-distributor--liveconfig .vt-start-hilfe-distributor__media img {
    width: 100%;
    height: 100%;
    margin-left: 0;

    object-fit: cover;
    object-position: center;
}


/* LiveConfig: Produktlogo größer und höher positioniert */
.vt-start-hilfe-distributor--liveconfig .vt-start-hilfe-distributor__logos {
    align-self: start;

    padding-top: 34px;
}

.vt-start-hilfe-distributor--liveconfig .vt-start-hilfe-logo--liveconfig img {
    width: 430px;
    max-width: none;
    height: auto;

    aspect-ratio: auto;
}

/* LiveConfig: lokale Feinabstimmung */
.vt-start-hilfe-distributor--liveconfig .vt-start-hilfe-distributor__copy {
    transform: translateY(48px);
}

.vt-start-hilfe-distributor--liveconfig::after {
    background:
        linear-gradient(
            90deg,
            rgba(7, 23, 48, .98) 0%,
            rgba(7, 23, 48, .94) 28%,
            rgba(7, 23, 48, .72) 48%,
            rgba(7, 23, 48, .30) 68%,
            rgba(255, 255, 255, .12) 100%
        );
}

.vt-start-hilfe-distributor--liveconfig {
    border-color: rgba(50, 145, 235, .42);
}

/* Intro: Textbereich endet vor der Wordmark. */
#vt-start-hilfe-einstieg {
    padding-right: 190px;
}

@media (max-width: 860px) {
    #vt-start-hilfe-einstieg {
        padding-right: 0;
    }
}

#vt-start-hilfe-einstieg p {
    font-size: 20px;
    line-height: 1.6;
}

/* LiveConfig E-Mail: normaler Card-Rand wie SFTP. */
.vt-start-hilfe-distributor--liveconfig-email {
    border-color: rgba(255, 255, 255, .14);
}

/* Produktive Hilfe-Bühne: Links heller, bereits beim ersten Paint aktiv. */
body.vt-start-hilfe-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;
}

/* LiveConfig E-Mail als Unterthema: Branding bewusst kleiner. */
.vt-start-hilfe-distributor--liveconfig-email .vt-start-hilfe-logo--liveconfig img {
    width: 320px;
}

/* LiveConfig E-Mail: Unterthema – Text wieder auf normale Mittelachse. */
.vt-start-hilfe-distributor--liveconfig-email .vt-start-hilfe-distributor__copy {
    transform: none;
}

/* LiveConfig E-Mail: Bildkomposition analog zur E-Mail-Programme-Card. */
.vt-start-hilfe-distributor--liveconfig-email .vt-start-hilfe-distributor__media {
    width: 68%;
}

.vt-start-hilfe-distributor--liveconfig-email .vt-start-hilfe-distributor__media img {
    width: 100%;
    height: 100%;
    margin-left: 0;

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

/*
 * LiveConfig E-Mail / buero002:
 * Originalbild weiter unter die Card laufen lassen.
 * Noch keine zusätzliche Farb- oder Overlay-Korrektur.
 */
.vt-start-hilfe-distributor--liveconfig-email .vt-start-hilfe-distributor__media {
    width: 88%;
}

.vt-start-hilfe-distributor--liveconfig-email .vt-start-hilfe-distributor__media img {
    width: 100%;
    height: 100%;
    margin-left: 0;

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

/*
 * LiveConfig E-Mail:
 * Weicher Übergang analog zur SFTP-Card.
 * Das buero002-Bild bleibt unverändert positioniert.
 *
 * Der Verlauf liegt über dem weit nach links laufenden Originalbild
 * und blendet ausschließlich dessen linken Bereich weich ab.
 */
.vt-start-hilfe-distributor--liveconfig-email::before {
    content: none;
}

.vt-start-hilfe-distributor--liveconfig-email::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 1;
    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(7, 23, 48, 1.00) 0%,
            rgba(7, 23, 48, 1.00) 27%,
            rgba(7, 23, 48, .96) 36%,
            rgba(7, 23, 48, .82) 44%,
            rgba(7, 23, 48, .58) 52%,
            rgba(7, 23, 48, .32) 60%,
            rgba(7, 23, 48, .14) 68%,
            rgba(7, 23, 48, .04) 76%,
            rgba(7, 23, 48, 0) 84%
        );
}

/*
 * Inhalt sicher oberhalb des Verlaufs halten.
 */
.vt-start-hilfe-distributor--liveconfig-email .vt-start-hilfe-distributor__logos,
.vt-start-hilfe-distributor--liveconfig-email .vt-start-hilfe-distributor__copy,
.vt-start-hilfe-distributor--liveconfig-email .vt-start-hilfe-distributor__cta {
    z-index: 3;
}

/*
 * LiveConfig E-Mail:
 * Bild als durchgehende Basis über die gesamte Card.
 * Logo, Text und CTA liegen darüber.
 */
.vt-start-hilfe-distributor--liveconfig-email .vt-start-hilfe-distributor__media {
    width: 100%;
    left: 0;
    right: 0;
}

.vt-start-hilfe-distributor--liveconfig-email .vt-start-hilfe-distributor__media img {
    width: 100%;
    height: 100%;
    margin: 0;

    object-fit: cover;
    object-position: right center;
}


/*
 * Gradient liegt ÜBER dem Bild und UNTER Logo/Text/CTA.
 */
.vt-start-hilfe-distributor--liveconfig-email::before {
    content: none;
}

.vt-start-hilfe-distributor--liveconfig-email::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 1;
    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(7, 23, 48, 1.00) 0%,
            rgba(7, 23, 48, .98) 28%,
            rgba(7, 23, 48, .90) 38%,
            rgba(7, 23, 48, .72) 48%,
            rgba(7, 23, 48, .48) 58%,
            rgba(7, 23, 48, .24) 68%,
            rgba(7, 23, 48, .08) 78%,
            rgba(7, 23, 48, 0) 88%
        );
}


/*
 * Inhalt oberhalb von Bild + Gradient.
 */
.vt-start-hilfe-distributor--liveconfig-email .vt-start-hilfe-distributor__logos,
.vt-start-hilfe-distributor--liveconfig-email .vt-start-hilfe-distributor__copy,
.vt-start-hilfe-distributor--liveconfig-email .vt-start-hilfe-distributor__cta {
    position: relative;
    z-index: 3;
}

/*
 * LiveConfig E-Mail:
 * Bild bleibt weit unter der Card,
 * aber Laptop und Tischkante werden wieder kompakter.
 */
.vt-start-hilfe-distributor--liveconfig-email .vt-start-hilfe-distributor__media {
    width: 92%;
    left: auto;
    right: 0;
}

.vt-start-hilfe-distributor--liveconfig-email .vt-start-hilfe-distributor__media img {
    width: 96%;
    height: 100%;
    margin-left: auto;

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


/*
 * CTA wieder auf die bewährte vertikale Position setzen.
 */
.vt-start-hilfe-distributor--liveconfig-email .vt-start-hilfe-distributor__cta--liveconfig {
    top: 68%;
    bottom: auto;
    transform: translateY(-50%);
}

/*
 * LiveConfig E-Mail:
 * Bürobild und Gradient als getrennte Background-Layer.
 *
 * Layer 1: dunkler Verlauf über dem Bild.
 * Layer 2: unverändertes buero002-Bild.
 */
.vt-start-hilfe-distributor--liveconfig-email {
    background-color: #071730;

    background-image:
        linear-gradient(
            90deg,
            rgba(7, 23, 48, 1.00) 0%,
            rgba(7, 23, 48, .98) 28%,
            rgba(7, 23, 48, .88) 38%,
            rgba(7, 23, 48, .65) 48%,
            rgba(7, 23, 48, .38) 58%,
            rgba(7, 23, 48, .16) 68%,
            rgba(7, 23, 48, 0) 78%
        ),
        url("../../../../../images/start-hilfe/faq_lc3_emailadresse_einrichten_buero002.png");

    background-position-x:
        0,
        100%;

    background-position-y:
        0,
        50%;

    background-size:
        100% 100%,
        82% auto;

    background-repeat:
        no-repeat,
        no-repeat;

    background-clip: padding-box;
}

/*
 * Das bisherige IMG bleibt im HTML,
 * wird für diese Card aber nicht mehr visuell verwendet.
 */
.vt-start-hilfe-distributor--liveconfig-email .vt-start-hilfe-distributor__media {
    display: none;
}

/*
 * Alte Pseudo-Element-Overlays dieser Card vollständig abschalten.
 * Gradient und Bild liegen jetzt gemeinsam im Card-Background.
 */
.vt-start-hilfe-distributor--liveconfig-email::before,
.vt-start-hilfe-distributor--liveconfig-email::after {
    content: none;
}

/*
 * Logo, Text und CTA liegen normal über den Background-Layern.
 */
.vt-start-hilfe-distributor--liveconfig-email .vt-start-hilfe-distributor__logos,
.vt-start-hilfe-distributor--liveconfig-email .vt-start-hilfe-distributor__copy {
    position: relative;
    z-index: 2;
}

.vt-start-hilfe-distributor--liveconfig-email .vt-start-hilfe-distributor__cta {
    position: absolute;
    z-index: 4;
}



/* Gemeinsame Bildgeometrie der Hilfe-Distributor-Cards. */
.vt-start-hilfe-distributor--email,
.vt-start-hilfe-distributor--sftp,
.vt-start-hilfe-distributor--liveconfig {
    position: relative;
    overflow: hidden;
}

.vt-start-hilfe-distributor--email::before,
.vt-start-hilfe-distributor--email::after,
.vt-start-hilfe-distributor--sftp::before,
.vt-start-hilfe-distributor--sftp::after,
.vt-start-hilfe-distributor--liveconfig::before,
.vt-start-hilfe-distributor--liveconfig::after {
    content: none;
}

.vt-start-hilfe-distributor--liveconfig-email {
    background-image: none;
    background-color: #071730;
}

.vt-start-hilfe-distributor--email .vt-start-hilfe-distributor__media,
.vt-start-hilfe-distributor--sftp .vt-start-hilfe-distributor__media,
.vt-start-hilfe-distributor--liveconfig .vt-start-hilfe-distributor__media,
.vt-start-hilfe-distributor--liveconfig-email .vt-start-hilfe-distributor__media {
    display: block;
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    border-radius: 0;
    overflow: hidden;

    z-index: 0;
}

.vt-start-hilfe-distributor--email .vt-start-hilfe-distributor__media img,
.vt-start-hilfe-distributor--sftp .vt-start-hilfe-distributor__media img,
.vt-start-hilfe-distributor--liveconfig .vt-start-hilfe-distributor__media img,
.vt-start-hilfe-distributor--liveconfig-email .vt-start-hilfe-distributor__media img {
    display: block;

    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;

    object-fit: cover;
    object-position: center;

    transform: none;
}

.vt-start-hilfe-distributor--email .vt-start-hilfe-distributor__logos,
.vt-start-hilfe-distributor--email .vt-start-hilfe-distributor__copy,
.vt-start-hilfe-distributor--sftp .vt-start-hilfe-distributor__logos,
.vt-start-hilfe-distributor--sftp .vt-start-hilfe-distributor__copy,
.vt-start-hilfe-distributor--liveconfig .vt-start-hilfe-distributor__logos,
.vt-start-hilfe-distributor--liveconfig .vt-start-hilfe-distributor__copy {
    position: relative;
    z-index: 2;
}

.vt-start-hilfe-distributor--email .vt-start-hilfe-distributor__cta,
.vt-start-hilfe-distributor--sftp .vt-start-hilfe-distributor__cta,
.vt-start-hilfe-distributor--liveconfig .vt-start-hilfe-distributor__cta {
    position: absolute;
    z-index: 4;
}

/* Gemeinsame buero002-Bilddarstellung: proportional, vollständig und rechts ausgerichtet. */
.vt-start-hilfe-distributor--email .vt-start-hilfe-distributor__media img,
.vt-start-hilfe-distributor--sftp .vt-start-hilfe-distributor__media img,
.vt-start-hilfe-distributor--liveconfig .vt-start-hilfe-distributor__media img,
.vt-start-hilfe-distributor--liveconfig-email .vt-start-hilfe-distributor__media img {
    width: 100%;
    height: 100%;

    object-fit: contain;
    object-position: right center;

    background-color: #071730;
}

/* Gemeinsamer Verlauf über der normierten buero002-Bildfamilie. */
.vt-start-hilfe-distributor--email::after,
.vt-start-hilfe-distributor--sftp::after,
.vt-start-hilfe-distributor--liveconfig::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 1;
    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(7, 23, 48, 1.00) 0%,
            rgba(7, 23, 48, .98) 28%,
            rgba(7, 23, 48, .90) 38%,
            rgba(7, 23, 48, .72) 48%,
            rgba(7, 23, 48, .48) 58%,
            rgba(7, 23, 48, .24) 68%,
            rgba(7, 23, 48, .08) 78%,
            rgba(7, 23, 48, 0) 88%
        );
}

/* Normierte Card-Bilder: weicher Übergang vom Cardgrund in das Bürobild. */
.vt-start-hilfe-distributor--email .vt-start-hilfe-distributor__media img,
.vt-start-hilfe-distributor--sftp .vt-start-hilfe-distributor__media img,
.vt-start-hilfe-distributor--liveconfig .vt-start-hilfe-distributor__media img,
.vt-start-hilfe-distributor--liveconfig-email .vt-start-hilfe-distributor__media img {
    -webkit-mask-image:
        linear-gradient(
            90deg,
            transparent 0%,
            transparent 30%,
            rgba(0, 0, 0, .10) 38%,
            rgba(0, 0, 0, .35) 46%,
            rgba(0, 0, 0, .70) 54%,
            #000 64%,
            #000 100%
        );

    mask-image:
        linear-gradient(
            90deg,
            transparent 0%,
            transparent 30%,
            rgba(0, 0, 0, .10) 38%,
            rgba(0, 0, 0, .35) 46%,
            rgba(0, 0, 0, .70) 54%,
            #000 64%,
            #000 100%
        );
}

/* Gemeinsamer produktiver Test:
   genau EIN Verlauf über die komplette Card,
   ohne transparente Endzone am rechten Rand. */

.vt-start-hilfe-distributor--email,
.vt-start-hilfe-distributor--sftp,
.vt-start-hilfe-distributor--liveconfig {
    background-image: none;
    background-color: #071730;
}

/* Keine zusätzliche Bildmaske. */
.vt-start-hilfe-distributor--email .vt-start-hilfe-distributor__media img,
.vt-start-hilfe-distributor--sftp .vt-start-hilfe-distributor__media img,
.vt-start-hilfe-distributor--liveconfig .vt-start-hilfe-distributor__media img,
.vt-start-hilfe-distributor--liveconfig-email .vt-start-hilfe-distributor__media img {
    -webkit-mask-image: none;
    mask-image: none;

    background: transparent;

    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: right center;
}

/* Vorherige zusätzliche Pseudo-Ebene bleibt aus. */
.vt-start-hilfe-distributor--email::before,
.vt-start-hilfe-distributor--sftp::before,
.vt-start-hilfe-distributor--liveconfig::before {
    content: none;
}

/* EIN gemeinsamer Verlauf über die vollständige Cardbreite. */
.vt-start-hilfe-distributor--email::after,
.vt-start-hilfe-distributor--sftp::after,
.vt-start-hilfe-distributor--liveconfig::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 1;
    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(7, 23, 48, 1.00) 0%,
            rgba(7, 23, 48, .99) 28%,
            rgba(7, 23, 48, .94) 38%,
            rgba(7, 23, 48, .78) 48%,
            rgba(7, 23, 48, .58) 58%,
            rgba(7, 23, 48, .38) 70%,
            rgba(7, 23, 48, .24) 82%,
            rgba(7, 23, 48, .16) 92%,
            rgba(7, 23, 48, .12) 100%
        );
}

/*
 * Hilfe-Startseite:
 * Das Bürobild selbst bildet die vollständige Cardfläche.
 * Keine separate Hintergrundfläche links neben dem Bild.
 */
.vt-start-hilfe-distributor--email .vt-start-hilfe-distributor__media,
.vt-start-hilfe-distributor--sftp .vt-start-hilfe-distributor__media,
.vt-start-hilfe-distributor--liveconfig .vt-start-hilfe-distributor__media,
.vt-start-hilfe-distributor--liveconfig-email .vt-start-hilfe-distributor__media {
    display: block;
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;
    border-radius: 0;

    background: none;

    z-index: 0;
}

/*
 * Kein contain:
 * Das Bild selbst läuft von linker bis rechter Cardkante.
 * Wegen des unterschiedlichen Seitenverhältnisses wird nur
 * oben und unten beschnitten.
 */
.vt-start-hilfe-distributor--email .vt-start-hilfe-distributor__media img,
.vt-start-hilfe-distributor--sftp .vt-start-hilfe-distributor__media img,
.vt-start-hilfe-distributor--liveconfig .vt-start-hilfe-distributor__media img,
.vt-start-hilfe-distributor--liveconfig-email .vt-start-hilfe-distributor__media img {
    position: absolute;

    top: 50%;
    left: 0;

    display: block;

    width: 100%;
    height: auto;
    max-width: none;

    margin: 0;

    object-fit: initial;
    object-position: initial;

    -webkit-mask-image: none;
    mask-image: none;

    background: none;

    transform: translateY(-50%);
}

/*
 * Die Card selbst liefert ebenfalls keine zweite Bild-/Gradientfläche.
 */
.vt-start-hilfe-distributor--email,
.vt-start-hilfe-distributor--sftp,
.vt-start-hilfe-distributor--liveconfig,
.vt-start-hilfe-distributor--liveconfig-email {
    background-image: none;
    background-color: #071730;
}

/*
 * Genau EIN gemeinsamer Verlauf über der vollständigen Bildfläche.
 */
.vt-start-hilfe-distributor--email::after,
.vt-start-hilfe-distributor--sftp::after,
.vt-start-hilfe-distributor--liveconfig::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 1;
    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(7, 23, 48, 1.00) 0%,
            rgba(7, 23, 48, .99) 28%,
            rgba(7, 23, 48, 1.00) 48%,
            rgba(7, 23, 48, .90) 58%,
            rgba(7, 23, 48, .18) 80%,
            rgba(7, 23, 48, .24) 82%,
            rgba(7, 23, 48, .26) 92%,
            rgba(7, 23, 48, .12) 100%
        );
}

/* Gemeinsame Inhaltsgeometrie der Hilfe-Distributor-Cards. */
.vt-start-hilfe-distributor--email,
.vt-start-hilfe-distributor--sftp,
.vt-start-hilfe-distributor--liveconfig {
    grid-template-columns:
        minmax(220px, .9fr)
        minmax(300px, 1.1fr)
        minmax(220px, .9fr);

    align-items: center;
}

/* Branding und Text verwenden dieselbe vertikale Grundachse. */
.vt-start-hilfe-distributor--email .vt-start-hilfe-distributor__logos,
.vt-start-hilfe-distributor--sftp .vt-start-hilfe-distributor__logos,
.vt-start-hilfe-distributor--liveconfig .vt-start-hilfe-distributor__logos,
.vt-start-hilfe-distributor--liveconfig-email .vt-start-hilfe-distributor__logos,
.vt-start-hilfe-distributor--email .vt-start-hilfe-distributor__copy,
.vt-start-hilfe-distributor--sftp .vt-start-hilfe-distributor__copy,
.vt-start-hilfe-distributor--liveconfig .vt-start-hilfe-distributor__copy,
.vt-start-hilfe-distributor--liveconfig-email .vt-start-hilfe-distributor__copy {
    align-self: center;

    padding-top: 0;
    padding-bottom: 0;

    transform: none;
}

/* LiveConfig-Branding behält nur noch seine thematische Größenstaffelung. */
.vt-start-hilfe-distributor--liveconfig .vt-start-hilfe-logo--liveconfig img {
    width: 430px;
    max-width: none;
    height: auto;
}

.vt-start-hilfe-distributor--liveconfig-email .vt-start-hilfe-logo--liveconfig img {
    width: 320px;
    max-width: none;
    height: auto;
}

/* CTA zunächst gemeinsam an derselben Position halten. */
.vt-start-hilfe-distributor--email .vt-start-hilfe-distributor__cta,
.vt-start-hilfe-distributor--sftp .vt-start-hilfe-distributor__cta,
.vt-start-hilfe-distributor--liveconfig .vt-start-hilfe-distributor__cta {
    right: 28px;
    top: 68%;
    bottom: auto;

    transform: translateY(-50%);
}

/* LiveConfig-Logos dürfen ihre Grid-Spalte nicht mehr überlaufen. */
.vt-start-hilfe-distributor--liveconfig .vt-start-hilfe-logo--liveconfig img {
    width: min(430px, 100%);
    max-width: 100%;
    height: auto;
}

.vt-start-hilfe-distributor--liveconfig-email .vt-start-hilfe-logo--liveconfig img {
    width: min(320px, 100%);
    max-width: 100%;
    height: auto;
}


.vt-start-hilfe-distributor--liveconfig {
    grid-template-columns:
        minmax(320px, 1.15fr)
        minmax(280px, 1fr)
        minmax(220px, .85fr);
}

.vt-start-hilfe-distributor--liveconfig .vt-start-hilfe-logo--liveconfig img {
    width: 430px;
    max-width: 100%;
}

/* LiveConfig besitzt nur ein Branding-Logo:
   keine Drei-Spalten-Unterteilung wie bei Client-Logos. */
.vt-start-hilfe-distributor--liveconfig .vt-start-hilfe-distributor__logos {
    grid-template-columns: minmax(0, 1fr);
}

/* Domain: große Produktmarke, begrenzt durch die vollständige Branding-Spalte. */
.vt-start-hilfe-distributor--liveconfig .vt-start-hilfe-logo--liveconfig img {
    width: min(430px, 100%);
    max-width: 100%;
    height: auto;
}

/* E-Mail ist Unterthema und bleibt bewusst etwas kleiner. */
.vt-start-hilfe-distributor--liveconfig-email .vt-start-hilfe-logo--liveconfig img {
    width: min(320px, 100%);
    max-width: 100%;
    height: auto;
}

/* LiveConfig-Branding: vertikal höher positionieren. */
.vt-start-hilfe-distributor--liveconfig .vt-start-hilfe-distributor__logos {
    align-self: start;
    padding-top: 18px;
}

/* LiveConfig E-Mail: gleiche linke Achse wie Domain-Card. */
.vt-start-hilfe-distributor--liveconfig-email .vt-start-hilfe-distributor__logos {
    justify-self: start;
    width: 100%;
    padding-left: 0;
}

/* Logos innerhalb der Branding-Spalte links ausrichten. */
.vt-start-hilfe-distributor--liveconfig .vt-start-hilfe-logo--liveconfig {
    text-align: left;
}

.vt-start-hilfe-distributor--liveconfig .vt-start-hilfe-logo--liveconfig img {
    margin-left: 0;
    margin-right: auto;
}

/* Card 3 + 4:
   Textspalte verwendet dieselbe horizontale Geometrie wie SFTP. */
.vt-start-hilfe-distributor--liveconfig {
    grid-template-columns:
        minmax(220px, .9fr)
        minmax(300px, 1.1fr)
        minmax(220px, .9fr);
}

/* Keine historische Verschiebung des LiveConfig-Textblocks mehr. */
.vt-start-hilfe-distributor--liveconfig .vt-start-hilfe-distributor__copy,
.vt-start-hilfe-distributor--liveconfig-email .vt-start-hilfe-distributor__copy {
    transform: none;
    justify-self: stretch;
}

/* Distributor-CTA:
   eine vollständige Buttonhöhe unterhalb der bisherigen Position. */
.vt-start-hilfe-distributor--email .vt-start-hilfe-distributor__cta,
.vt-start-hilfe-distributor--sftp .vt-start-hilfe-distributor__cta,
.vt-start-hilfe-distributor--liveconfig .vt-start-hilfe-distributor__cta,
.vt-start-hilfe-distributor--liveconfig-email .vt-start-hilfe-distributor__cta {
    top: calc(68% + 48px);
    bottom: auto;
    transform: translateY(-50%);
}

/* Hilfe-Distributor: Kompaktmodus unter 660px. */
@media (max-width: 659px) {

    .vt-start-hilfe-distributor--email,
    .vt-start-hilfe-distributor--sftp,
    .vt-start-hilfe-distributor--liveconfig {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto;

        align-content: start;
        align-items: start;

        min-height: 300px;

        padding: 18px 18px 66px;
    }

    /* Branding aller Cards auf dieselbe obere Achse. */
    .vt-start-hilfe-distributor--email .vt-start-hilfe-distributor__logos,
    .vt-start-hilfe-distributor--sftp .vt-start-hilfe-distributor__logos,
    .vt-start-hilfe-distributor--liveconfig .vt-start-hilfe-distributor__logos,
    .vt-start-hilfe-distributor--liveconfig-email .vt-start-hilfe-distributor__logos {
        grid-column: 1;
        grid-row: 1;

        align-self: start;
        justify-self: start;

        width: auto;

        padding: 0;
        margin: 0 0 18px;
    }

    /* Text direkt unter dem Branding und linksbündig. */
    .vt-start-hilfe-distributor--email .vt-start-hilfe-distributor__copy,
    .vt-start-hilfe-distributor--sftp .vt-start-hilfe-distributor__copy,
    .vt-start-hilfe-distributor--liveconfig .vt-start-hilfe-distributor__copy,
    .vt-start-hilfe-distributor--liveconfig-email .vt-start-hilfe-distributor__copy {
        grid-column: 1;
        grid-row: 2;

        align-self: start;
        justify-self: start;

        width: 100%;
        max-width: none;

        padding: 0;
        margin: 0;

        text-align: left;
        transform: none;
    }

    .vt-start-hilfe-distributor__copy h2,
    .vt-start-hilfe-distributor__copy p {
        text-align: left;
    }

    /* CTA im Kompaktmodus unabhängig vom Text unten rechts. */
    .vt-start-hilfe-distributor--email .vt-start-hilfe-distributor__cta,
    .vt-start-hilfe-distributor--sftp .vt-start-hilfe-distributor__cta,
    .vt-start-hilfe-distributor--liveconfig .vt-start-hilfe-distributor__cta,
    .vt-start-hilfe-distributor--liveconfig-email .vt-start-hilfe-distributor__cta {
        top: auto;
        right: 18px;
        bottom: 14px;

        transform: none;
    }
}



@media (max-width: 480px) {
    .vt-start-hilfe-distributor {
        border: 1px solid rgba(255,255,255,.05);
        box-shadow: 0 18px 48px rgba(0,0,0,.22);
    }
}



@media (max-width: 480px) {
  .vt-nogrid{
     margin-top: -80px;
  }
}

@media (min-width: 1025px) {
  .vt-nogrid{
     margin-top: -40px;
  }
}


.vt-card.vt-ui-watermark-host > .vt-ui-watermark--visionthinks-wordmark.vt-ui-watermark--size-big {
    display: none;
}

@media (max-width: 860px) {
    .vt-card.vt-ui-watermark-host > .vt-ui-watermark--visionthinks-wordmark.vt-ui-watermark--size-small {
        display: none;
    }

    .vt-card.vt-ui-watermark-host > .vt-ui-watermark--visionthinks-wordmark.vt-ui-watermark--size-big {
        display: block;
    }
}