


#vt-contao-upgrade-einstieg { padding-right:0; }
.vt-contao-upgrade .vt-contao-upgrade__lead { font-size:20px; line-height:1.6; max-width:70ch; }
.vt-contao-upgrade .vt-contao-upgrade__lead + .vt-contao-upgrade__lead { margin-top:14px; }
.vt-contao-upgrade .vt-contao-upgrade__lead strong { color:#fff; }


.vt-contao-upgrade .vt-start-contao-einstieg-wm > .vt-start-contao-wm img { height:86%; max-height:360px; }


.vt-contao-upgrade-ablauf {
    display:grid;
    grid-template-columns:minmax(0,7fr) minmax(0,5fr);
    gap:clamp(20px,2.6vw,44px);
    align-items:start;
    margin-block:clamp(20px,2.4vw,34px);
    padding:clamp(22px,2.6vw,38px);
    border-radius:22px;
    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);
    color:#fff;
}

.vt-contao-upgrade ol.vt-contao-upgrade__schritte {
    margin:0;
    padding:0;
    list-style:none;
    counter-reset:vtupgrade;
}
.vt-contao-upgrade__schritte > li {
    position:relative;
    margin:0 0 22px;
    padding-left:52px;
    counter-increment:vtupgrade;
    line-height:1.6;
}
.vt-contao-upgrade__schritte > li:last-child { margin-bottom:0; }
.vt-contao-upgrade__schritte > li::before {
    content:counter(vtupgrade);
    position:absolute;
    top:0;
    left:0;
    display:grid;
    place-items:center;
    width:34px;
    height:34px;
    border-radius:50%;
    background:rgb(34,138,232);
    color:#fff;
    font-weight:700;
    font-size:16px;
    line-height:1;
}
.vt-contao-upgrade__schritte strong { display:block; margin-bottom:2px; font-size:19px; color:#fff; }
.vt-contao-upgrade__schritte span { font-size:17px; color:rgba(255,255,255,.86); }

.vt-contao-upgrade .vt-contao-upgrade-ablauf h3.vt-contao-upgrade__h3 {
    margin:4px 0 14px;
    font-size:1.2rem;
    font-weight:700;
    line-height:1.3;
    letter-spacing:normal;
    text-transform:none;
    color:#fff;
}
.vt-contao-upgrade__tabelle span { color:#ffe2a8; }
.vt-contao-upgrade__tabelle li.vt-contao-upgrade__ziel span { color:#9fe3b0; }
.vt-contao-upgrade__tabelle li:last-child { border-bottom:0; }


.vt-nogrid > .vt-contao-upgrade-php {
    display:grid;
    grid-template-columns:minmax(0,7fr) minmax(0,5fr);
    gap:clamp(20px,2.6vw,44px);
    align-items:center;
}
.vt-contao-upgrade-php__text .vt-start-contao-small { margin-top:18px; }
.vt-contao-upgrade__adresse {
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    font-size:.88em;
    padding:1px 7px;
    border-radius:5px;
    background:rgba(127,178,255,.12);
    border:1px solid rgba(127,178,255,.25);
    color:#cfe6ff;
    white-space:nowrap;
}

.vt-contao-upgrade-php__bild { margin:0; text-align:center; }
.vt-contao-upgrade-php__bild img {
    display:block;
    width:100%;
    height:auto;
    border-radius:10px;
    box-shadow:0 14px 34px rgba(0,0,0,.45);
}
.vt-contao-upgrade-php__bild figcaption {
    margin-top:12px;
    font-size:12px;
    font-weight:700;
    letter-spacing:.08em;
    line-height:1.4;
    text-transform:uppercase;
    color:#8fb4e8;
}
.vt-contao-upgrade-php__bild figcaption span {
    display:block;
    font-size:13px;
    font-weight:400;
    letter-spacing:0;
    text-transform:none;
    color:rgba(255,255,255,.72);
}


@media (max-width:860px) {
    .vt-contao-upgrade .vt-contao-upgrade__lead { font-size:18px; }
    .vt-contao-upgrade-ablauf,
    .vt-nogrid > .vt-contao-upgrade-php { grid-template-columns:minmax(0,1fr); }
    .vt-contao-upgrade .vt-start-contao-einstieg-wm > .vt-start-contao-wm img { height:auto; width:60%; max-width:300px; }
}
@media (max-width:480px) {
    .vt-contao-upgrade-ablauf { padding:16px; }
    .vt-contao-upgrade__schritte > li { padding-left:46px; }
    .vt-contao-upgrade__schritte span { font-size:16px; }
    .vt-contao-upgrade__adresse { white-space:normal; }
}


@media (min-width:1025px) {
    .vt-page-contao-upgrade.vt-small-header .vt-header-gap { position:static; }
    .vt-page-contao-upgrade.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%);
    }
}
