+ text nodes)
==================================================================== */
/* cards-list: ordered list as numbered cards (01 …) */
.ms-sdc.cards-list ol {
list-style: none; counter-reset: mscard; padding: 0; margin: 24px 0 28px;
display: grid; grid-template-columns: 1fr; gap: 14px;
}
.ms-sdc.cards-list ol > li {
counter-increment: mscard; position: relative;
background: #fff; border: 0; border-radius: 14px; padding: 22px 22px 22px 80px; margin: 0;
box-shadow: 0 1px 2px rgba(1,62,64,0.05), 0 12px 30px -22px rgba(1,62,64,0.35);
font-family: var(--ms-sans); font-size: 15px; line-height: 1.62; color: var(--ms-ink-soft);
}
.ms-sdc.cards-list ol > li::before {
content: counter(mscard, decimal-leading-zero); position: absolute; left: 20px; top: 22px;
width: 44px; height: 44px; border-radius: 50%; background: var(--ms-tint); color: var(--ms-petrol-deep);
display: flex; align-items: center; justify-content: center;
font-family: var(--ms-display); font-weight: 600; font-size: 18px;
}
.ms-sdc.cards-list ol > li strong {
display: block; color: var(--ms-petrol); font-size: 17px; line-height: 1.3; margin: 7px 0 8px;
}
/* check-list: ✓ items */
.ms-sdc.check-list ul {
list-style: none; padding: 0; margin: 28px 0 4px; display: flex; flex-direction: column; gap: 15px;
}
.ms-sdc.check-list ul > li {
position: relative; padding-left: 37px; margin: 0;
font-size: 15.5px; line-height: 1.5; color: var(--ms-ink);
}
.ms-sdc.check-list ul > li::before {
content: "\2713"; position: absolute; left: 0; top: 1px; width: 24px; height: 24px; border-radius: 50%;
border: 1.5px solid rgba(111,195,193,0.6); color: var(--ms-teal-light);
display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700;
}
/* x-list: ✕ rows (two columns on tablet+) */
.ms-sdc.x-list ul { list-style: none; padding: 0; margin: 22px 0 4px; }
.ms-sdc.x-list ul > li {
position: relative; padding: 16px 0 16px 40px; margin: 0; border-top: 1px solid var(--ms-hair-tint);
font-size: 15.5px; line-height: 1.55; color: var(--ms-ink-soft);
}
.ms-sdc.x-list ul > li:last-child { border-bottom: 1px solid var(--ms-hair-tint); }
.ms-sdc.x-list ul > li strong { color: var(--ms-ink); }
.ms-sdc.x-list ul > li::before {
content: "\2715"; position: absolute; left: 0; top: 15px;
width: 26px; height: 26px; border-radius: 7px; background: #fff; color: #a85a5a;
display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700;
box-shadow: 0 1px 2px rgba(1,62,64,0.06);
}
/* quote-green: blockquote as the filled petrol callout box */
.ms-sdc.quote-green blockquote {
background: var(--ms-petrol); color: #fff; border: 0; border-radius: 16px;
padding: 24px 22px; margin: 28px 0;
}
.ms-sdc.quote-green blockquote p {
font-family: var(--ms-sans); font-size: 15.5px; line-height: 1.6; color: rgba(255,255,255,0.9); margin: 0;
}
.ms-sdc.quote-green blockquote p:first-child {
color: var(--ms-teal-light); text-transform: uppercase; letter-spacing: 0.15em;
font-size: 11.5px; font-weight: 700; margin-bottom: 10px;
}
.ms-sdc.quote-green blockquote p strong { color: #fff; }
/* ====================================================================
CTA — field_simple_link with .arrow-link
==================================================================== */
.ms-sdc__actions { margin-top: 22px; }
.ms-sdc__link, .ms-sdc .type-link { margin: 0; }
.ms-sdc a.arrow-link, .ms-sdc .arrow-link.btn {
display: flex; align-items: center; gap: 14px; width: 100%;
background: transparent !important; border: 0 !important;
border-top: 1px solid var(--ms-hair) !important; border-radius: 0 !important;
padding: 22px 0 0 !important; margin: 0 !important; box-shadow: none !important;
color: var(--ms-petrol) !important;
font-family: var(--ms-display) !important; font-weight: 500 !important;
font-size: 19px !important; line-height: 1.3 !important; text-align: left; white-space: normal;
}
.no-margin .ms-sdc__actions {
margin-top: 0 !important;
padding-top: 30px;
}
.ms-sdc a.arrow-link::after {
content: "\2192"; flex: none; width: 42px; height: 42px; border-radius: 50%;
background: var(--ms-petrol); color: #fff; display: flex; align-items: center; justify-content: center;
font-size: 18px; transition: transform 0.2s ease;
}
.ms-sdc a.arrow-link:hover { color: var(--ms-petrol) !important; }
.ms-sdc a.arrow-link:hover::after { transform: translateX(4px); }
/* ====================================================================
ON-DARK — light text for petrol bands
==================================================================== */
.ms-sdc.on-dark { color: rgba(255,255,255,0.82); }
.ms-sdc.on-dark p { color: rgba(255,255,255,0.82); }
.ms-sdc.on-dark h2 { color: #fff !important; }
.ms-sdc.on-dark h2::after { background: var(--ms-teal-light); }
.ms-sdc.on-dark h3 { color: var(--ms-teal-light) !important; }
.ms-sdc.on-dark h4 { color: var(--ms-teal-light) !important; }
.ms-sdc.on-dark h5 { color: rgba(255,255,255,0.55); }
.ms-sdc.on-dark strong { color: #fff; }
.ms-sdc.on-dark.check-list ul > li { color: rgba(255,255,255,0.9); }
.ms-sdc.on-dark blockquote p { color: var(--ms-teal-light); }
.ms-sdc.on-dark a.arrow-link, .ms-sdc.on-dark .arrow-link.btn {
color: #fff !important; border-top-color: rgba(255,255,255,0.22) !important;
}
.ms-sdc.on-dark a.arrow-link:hover { color: #fff !important; }
.ms-sdc.on-dark a.arrow-link::after { background: #fff; color: var(--ms-petrol); }
/* ====================================================================
RESPONSIVE — AI breakpoints (420 / 720 / 1040 / 1280)
Only horizontal gutters + inner width change here; top/bottom padding
stays under your padding fields.
==================================================================== */
@media (max-width: 420px) {
.ms-sdc { font-size: 16px; padding-left: 20px; padding-right: 20px; }
.ms-sdc p { font-size: 16px; }
}
@media (min-width: 720px) {
.ms-sdc { font-size: 18px; line-height: 1.74; padding-left: 48px; padding-right: 48px; }
.ms-sdc__inner { max-width: 720px; }
.ms-sdc h4 { font-size: 12px !important; margin-bottom: 18px !important; }
.ms-sdc h2 { font-size: 37px !important; margin-bottom: 30px !important; }
.ms-sdc h2::after { width: 46px; }
.ms-sdc h3 { font-size: 23px !important; margin-top: 36px !important; }
.ms-sdc h5 { font-size: 13px; margin: 13px 0; }
.ms-sdc p { font-size: 18px; line-height: 1.74; }
.ms-sdc.first-p-large .ms-sdc__body > p:first-child { font-size: 21px; }
.ms-sdc.ms-sdc ol > li { font-size: 17px; padding: 22px 0 22px 54px; }
.ms-sdc.ms-sdc ol > li::before { top: 22px; }
.ms-sdc.cards-list ol { grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.ms-sdc.cards-list ol > li { padding: 28px 26px 28px 86px; font-size: 15.5px; }
.ms-sdc.cards-list ol > li::before { left: 26px; top: 28px; }
.ms-sdc.cards-list ol > li strong { font-size: 18px; }
.ms-sdc.check-list ul { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 28px; }
.ms-sdc.check-list ul > li { font-size: 16.5px; }
.ms-sdc.x-list ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
.ms-sdc.x-list ul > li { font-size: 16.5px; }
.ms-sdc.x-list ul > li:nth-child(2) { border-top: 1px solid var(--ms-hair-tint); }
.ms-sdc.quote-green blockquote { padding: 32px 30px; margin: 34px 0; }
.ms-sdc.quote-green blockquote p { font-size: 17px; }
.ms-sdc blockquote { padding-left: 22px; margin: 36px 0 6px; }
.ms-sdc blockquote p { font-size: 27px; line-height: 1.38; }
.ms-sdc a.arrow-link, .ms-sdc .arrow-link.btn { font-size: 23px !important; }
.ms-sdc a.arrow-link::after { width: 48px; height: 48px; }
}
@media (min-width: 1040px) {
.ms-sdc { padding-left: 56px; padding-right: 56px; }
.ms-sdc__inner { max-width: 760px; }
.ms-sdc h2 { font-size: 42px !important; }
.ms-sdc.cards-list ol { gap: 22px; }
}
@media (min-width: 1280px) {
.ms-sdc { padding-left: 64px; padding-right: 64px; }
}
/* ====================================================================
ANIMATION — scroll progress bar + reveal-on-scroll
==================================================================== */
#ms-progress {
position: fixed; top: 0; left: 0; height: 3px; width: 0;
background: var(--ms-petrol, #007375); z-index: 1100;
transition: width 0.08s linear; pointer-events: none;
}
.ms-sdc .reveal { transition: opacity 0.6s ease, transform 0.6s ease; }
body.ms-anim .ms-sdc .reveal { opacity: 0; transform: translateY(20px); }
body.ms-anim .ms-sdc .reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
body.ms-anim .ms-sdc .reveal { opacity: 1; transform: none; transition: none; }
}
@media print { body.ms-anim .ms-sdc .reveal { opacity: 1; transform: none; } }
/* check-chips: as a single-column list with round mint ✓ chips.
Dark/mint context (pair with on-dark). Absolute ::before, never grid,
so "- x text
" never wraps into the badge column.
Reusable by any layout; placed after the base list rules so it wins on
the equal-specificity tie (same pattern as check-list / x-list). */
.ms-sdc.check-chips ul{ list-style:none; padding:0; margin:0 0 30px; }
.ms-sdc.check-chips ul > li{
position:relative; padding-left:36px; min-height:23px; margin-bottom:13px;
color:#EAF5F5; font-size:16px; line-height:1.45;
}
.ms-sdc.check-chips ul > li::before{
content:"\2713"; position:absolute; left:0; top:1px;
width:23px; height:23px; border-radius:50%;
background:rgba(143,224,216,0.16); color:#8FE0D8;
display:inline-flex; align-items:center; justify-content:center;
font-weight:700; font-size:12px; line-height:1;
}
@media (max-width:860px){
.ms-sdc.check-chips ul > li{ font-size:15px; margin-bottom:10px; }
}
/* ====================================================================
dark-confirm: dark/centred restyle of `normal` for confirmation pages.
Pair with `on-dark steps-card` + body.ratgeber.danke chrome.
Self-contained; zero effect on other `normal` bands. Breakpoint 600.
==================================================================== */
.ms-sdc--normal.dark-confirm { font-family: 'Archivo'; }
.ms-sdc--normal.dark-confirm .ms-sdc__inner { max-width: 600px; text-align: center; }
/* ✓ success medallion (CSS-drawn; editors can't author SVG) */
.ms-sdc--normal.dark-confirm .ms-sdc__body::before {
content: ""; display: block; width: 80px; height: 80px; margin: 0 auto 26px;
border-radius: 50%; border: 1.5px solid rgba(143,224,216,0.4);
background: rgba(143,224,216,0.14)
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 38 38' fill='none'%3E%3Cpath d='M9 19.5l7 7 13-15' stroke='%238FE0D8' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
center / 38px no-repeat;
animation: ms-danke-pop .5s cubic-bezier(.2,.8,.3,1.2) both;
}
@keyframes ms-danke-pop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
/* eyebrow (h4 / mark) — Archivo 600, mint, 2px tracking */
.ms-sdc--normal.dark-confirm h4,
.ms-sdc--normal.dark-confirm mark.marker-yellow {
font-family: 'Archivo' !important; color: #8FE0D8 !important;
background: none; display: block;
font-weight: 600 !important; font-size: 12.5px !important;
letter-spacing: 2px !important; line-height: 1.4 !important;
text-transform: uppercase !important; margin-bottom: 16px !important;
}
/* title (h2) — white Recoleta 36, no petrol divider */
.ms-sdc--normal.dark-confirm h2 {
font-family: var(--ms-display) !important; font-weight: 700 !important;
color: #fff !important; font-size: 36px !important; line-height: 1.18 !important;
letter-spacing: -0.3px !important; margin-bottom: 16px !important; text-align: center;
}
.ms-sdc--normal.dark-confirm h2::after { display: none !important; }
/* lead = first body ; note = last body
*/
.ms-sdc--normal.dark-confirm .ms-sdc__body > p { font-family: 'Archivo'; color: #CFE6E6; }
.ms-sdc--normal.dark-confirm .ms-sdc__body > p:first-of-type {
font-size: 17px; line-height: 1.6; margin-bottom: 8px;
}
.ms-sdc--normal.dark-confirm .ms-sdc__body > p:last-of-type {
font-size: 13.5px; line-height: 1.55; color: #9FC4C4; margin: 0;
}
/* mint link (plain on dark would inherit petrol) */
.ms-sdc--normal.dark-confirm a { color: #8FE0D8; font-weight: 600; text-decoration: none; }
.ms-sdc--normal.dark-confirm a:hover { color: #fff; }
@media (max-width: 600px) {
.ms-sdc--normal.dark-confirm h2 { font-size: 28px !important; }
.ms-sdc--normal.dark-confirm .ms-sdc__body > p:first-of-type { font-size: 15.5px; }
}
/* ====================================================================
steps-card: + render as ONE dark glass card.
The (typed directly above the ) = card top; the = card
body. Mint round number badges. Absolute ::before, never grid (KB).
Appended AFTER the base ol rules so it wins the specificity ties,
incl. the base :last-child bottom-border. Reusable on any layout.
Contract: in a steps-card band the is the card title and must
sit directly above the .
==================================================================== */
/* card TOP = the heading */
.ms-sdc.steps-card h3 {
font-family: var(--ms-display) !important; color: #fff !important;
font-weight: 600 !important; font-size: 18px !important; line-height: 1.3 !important;
text-align: left; margin: 30px 0 0 !important;
background: rgba(255,255,255,0.045);
border: 1px solid rgba(143,224,216,0.18); border-bottom: 0;
border-radius: 16px 16px 0 0; padding: 28px 28px 0;
}
/* card BODY = the list */
.ms-sdc.steps-card ol {
list-style: none; counter-reset: msstep; text-align: left;
margin: 0 0 30px; padding: 20px 28px 28px;
background: rgba(255,255,255,0.045);
border: 1px solid rgba(143,224,216,0.18); border-top: 0;
border-radius: 0 0 16px 16px;
}
.ms-sdc.steps-card ol > li {
counter-increment: msstep; position: relative; border: 0;
padding: 0 0 0 42px; margin: 0 0 18px;
font-family: 'Archivo';
font-size: 15.5px; line-height: 1.55; color: #EAF5F5;
}
.ms-sdc.steps-card ol > li:last-child { margin-bottom: 0; border: 0; } /* kills inherited bottom-border */
.ms-sdc.steps-card ol > li::before {
content: counter(msstep); position: absolute; left: 0; top: 1px;
width: 28px; height: 28px; border-radius: 50%;
background: #8FE0D8; color: #07303C;
display: flex; align-items: center; justify-content: center;
font-family: 'Archivo'; font-weight: 700; font-size: 14px; line-height: 1;
}
.ms-sdc.steps-card ol > li strong { color: #fff; font-weight: 700; }
@media (max-width: 600px) {
.ms-sdc.steps-card h3 { padding: 22px 22px 0; }
.ms-sdc.steps-card ol { padding: 20px 22px 22px; }
}
/* ====================================================================
THANK-YOU / ONBOARDING dark-system flags (Archivo + Recoleta).
Built for Checkout_thankyou.html (KB §18). All generic + reusable.
Page breakpoint = 820 (this page's own value). Embeds (Vimeo /
Calendly) are pasted as