/* Ratgeber + Einsatzgebiet pages. Same blue as the rest of the site. */
.sp-container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; }

/* hero */
.sp-hero { padding: 9rem 0 3.2rem; background: linear-gradient(135deg, #1E73BE 0%, #155a94 100%); color: #fff; position: relative; overflow: hidden; }
.sp-hero::after { content: ''; position: absolute; top: 0; right: 0; width: 38%; height: 100%; background: rgba(255, 255, 255, .05); clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%); pointer-events: none; }
.sp-hero .sp-container { position: relative; z-index: 1; }
.sp-breadcrumb { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: 1.6rem; font-size: .9rem; background: rgba(255, 255, 255, .12); padding: .5rem 1rem; }
.sp-breadcrumb a { color: rgba(255, 255, 255, .92); text-decoration: none; }
.sp-breadcrumb a:hover { color: #fff; text-decoration: underline; }
.sp-breadcrumb i { font-size: .65rem; opacity: .8; }
.sp-title { font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.15; font-weight: 800; margin: 0 0 1rem; max-width: 900px; color: #fff; }
.sp-lead { font-size: 1.15rem; line-height: 1.7; margin: 0; max-width: 820px; color: rgba(255, 255, 255, .95); }
.sp-meta { margin: 1.2rem 0 0; font-size: .9rem; color: rgba(255, 255, 255, .8); }
.sp-hero-actions { margin: 1.8rem 0 0; display: flex; flex-wrap: wrap; gap: .8rem; }

/* buttons */
.sp-btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; padding: .85rem 1.5rem; background: #1E73BE; color: #fff !important; text-decoration: none !important; font-weight: 700; border: 2px solid #1E73BE; transition: all .2s; cursor: pointer; }
.sp-btn:hover { background: #155a94; border-color: #155a94; }
.sp-btn-ghost { background: transparent; color: #1E73BE !important; }
.sp-btn-ghost:hover { background: #1E73BE; color: #fff !important; }
.sp-btn-light { background: #fff; border-color: #fff; color: #1E73BE !important; }
.sp-btn-light:hover { background: #eaf3fb; border-color: #eaf3fb; }
.sp-btn-outline { background: transparent; border-color: rgba(255, 255, 255, .8); color: #fff !important; }
.sp-btn-outline:hover { background: rgba(255, 255, 255, .15); border-color: #fff; }
.sp-btn-block { display: flex; width: 100%; margin-top: .7rem; }

/* layout */
.sp-main { padding: 3.5rem 0 4.5rem; background: #fff; }
.sp-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 3rem; align-items: start; }
.sp-article { color: #333; font-size: 1.05rem; line-height: 1.8; }
.sp-article h2, .sp-h2 { font-size: 1.65rem; line-height: 1.3; color: #12304d; margin: 2.4rem 0 .9rem; scroll-margin-top: 110px; }
.sp-article h2:first-child, .sp-article .sp-toc + h2 { margin-top: 0; }
.sp-article p { margin: 0 0 1.1rem; }
.sp-article a { color: #1E73BE; }
.sp-list { margin: 0 0 1.3rem; padding: 0; list-style: none; }
.sp-list li { position: relative; padding: .35rem 0 .35rem 1.8rem; }
.sp-list li::before { content: '\f00c'; font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free'; font-weight: 900; position: absolute; left: 0; top: .45rem; color: #1E73BE; font-size: .85rem; }
.sp-steps { counter-reset: step; list-style: none; margin: 0 0 1.3rem; padding: 0; }
.sp-steps li { counter-increment: step; position: relative; padding: .5rem 0 .5rem 3.2rem; }
.sp-steps li::before { content: counter(step); position: absolute; left: 0; top: .35rem; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: #1E73BE; color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.sp-toc { background: #f4f8fc; border-left: 4px solid #1E73BE; padding: 1.2rem 1.5rem; margin-bottom: 2.2rem; }
.sp-toc strong { display: block; margin-bottom: .5rem; color: #12304d; }
.sp-toc ol { margin: 0; padding-left: 1.3rem; }
.sp-toc a { text-decoration: none; }
.sp-toc a:hover { text-decoration: underline; }

/* faq */
.sp-faq details { border: 1px solid #dfe7ef; margin-bottom: .7rem; background: #fff; }
.sp-faq summary { cursor: pointer; padding: 1rem 1.2rem; font-weight: 700; color: #12304d; list-style: none; position: relative; padding-right: 3rem; }
.sp-faq summary::-webkit-details-marker { display: none; }
.sp-faq summary::after { content: '+'; position: absolute; right: 1.2rem; top: 50%; transform: translateY(-50%); font-size: 1.4rem; color: #1E73BE; }
.sp-faq details[open] summary::after { content: '\2013'; }
.sp-faq details[open] summary { border-bottom: 1px solid #eef2f6; }
.sp-faq p { margin: 0; padding: 1rem 1.2rem; }
.sp-faq summary:focus-visible { outline: 3px solid rgba(30, 115, 190, .4); outline-offset: 2px; }

/* callout + disclaimer */
.sp-callout { background: #eaf3fb; border: 1px solid #cfe2f3; padding: 1.8rem; margin: 2.4rem 0; }
.sp-callout strong { display: block; font-size: 1.25rem; color: #12304d; margin-bottom: .4rem; }
.sp-callout p { margin: 0 0 1.1rem; }
.sp-callout .sp-btn { margin: 0 .6rem .6rem 0; }
.sp-disclaimer { font-size: .9rem; color: #6b7785; border-top: 1px solid #e5eaf0; padding-top: 1.2rem; margin-top: 2.5rem; }

/* sidebar */
.sp-aside { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 1.4rem; }
.sp-box { border: 1px solid #dfe7ef; padding: 1.5rem; background: #fff; }
.sp-box h3 { margin: 0 0 .8rem; font-size: 1.1rem; color: #12304d; }
.sp-box p { margin: 0 0 .5rem; font-size: .98rem; line-height: 1.6; color: #444; }
.sp-box-cta { background: #1E73BE; border-color: #1E73BE; color: #fff; }
.sp-box-cta h3, .sp-box-cta p { color: #fff; }
.sp-box-cta .sp-btn { background: #fff; border-color: #fff; color: #1E73BE !important; }
.sp-box-cta .sp-btn-ghost { background: transparent; border-color: rgba(255, 255, 255, .85); color: #fff !important; }
.sp-box-cta .sp-btn-ghost:hover { background: rgba(255, 255, 255, .15); }
.sp-checks { list-style: none; margin: 1.1rem 0 0; padding: 0; font-size: .95rem; }
.sp-checks li { padding: .2rem 0; }
.sp-checks i { margin-right: .5rem; }
.sp-links { list-style: none; margin: 0; padding: 0; }
.sp-links li { border-bottom: 1px solid #eef2f6; }
.sp-links li:last-child { border-bottom: 0; }
.sp-links a { display: block; padding: .6rem 0; color: #1E73BE; text-decoration: none; font-size: .98rem; line-height: 1.45; }
.sp-links a:hover { text-decoration: underline; }
.sp-nap { font-style: normal; }
.sp-nap a { color: #1E73BE; }

/* cards */
.sp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.5rem; margin-bottom: 2.5rem; }
.sp-cards-sm { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.sp-card { display: flex; flex-direction: column; gap: .6rem; padding: 1.6rem; border: 1px solid #dfe7ef; background: #fff; text-decoration: none !important; color: #333; transition: box-shadow .2s, border-color .2s; }
.sp-card:hover { border-color: #1E73BE; box-shadow: 0 10px 28px rgba(18, 48, 77, .12); }
.sp-card-icon { width: 3rem; height: 3rem; background: #eaf3fb; color: #1E73BE; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; }
.sp-card h2, .sp-card h3 { margin: 0; font-size: 1.2rem; line-height: 1.35; color: #12304d; }
.sp-card p { margin: 0; font-size: .97rem; line-height: 1.6; color: #555; flex: 1; }
.sp-card-dist { font-size: .85rem; color: #1E73BE; font-weight: 600; }
.sp-card-more { color: #1E73BE; font-weight: 700; font-size: .95rem; }
.sp-card-more i { margin-left: .3rem; font-size: .8rem; }
.sp-intro { max-width: 820px; font-size: 1.05rem; line-height: 1.75; color: #444; margin: 0 0 1.6rem; }
.sp-intro a { color: #1E73BE; }
.sp-h2 { margin-top: 2rem; }
.sp-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.sp-chips a, .sp-chips a:visited { padding: .4rem .9rem; border: 1px solid #cfe2f3; background: #f4f8fc; color: #12304d; text-decoration: none; font-size: .95rem; transition: all .2s; }
.sp-chips a:hover, .sp-chips a:focus-visible { background: #1E73BE; color: #fff; border-color: #1E73BE; }
/* every link inside the boxes gets the site blue, not the browser default */
.sp-box a, .sp-box a:visited, .sp-intro a, .sp-callout a:not(.sp-btn), .sp-nap a { color: #1E73BE; }
.sp-box .sp-chips a, .sp-box .sp-chips a:visited { color: #12304d; }
.sp-box .sp-chips a:hover { color: #fff; }
.sp-box-cta a, .sp-box-cta a:visited { color: #1E73BE; }
.sp-box-cta .sp-btn-ghost, .sp-box-cta .sp-btn-ghost:visited { color: #fff; }

/* home teaser */
.sp-home { padding: 4.5rem 0; background: #f8f9fa; }
.sp-home-head { text-align: center; max-width: 760px; margin: 0 auto 2.5rem; }
.sp-home-head h2 { font-size: 2rem; color: #12304d; margin: 0 0 .7rem; }
.sp-home-head p { color: #555; line-height: 1.7; margin: 0; }
.sp-home-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.sp-home-cols .sp-box { padding: 1.8rem; }
.sp-home-cols h3 { font-size: 1.25rem; }

@media (max-width: 991px) {
    .sp-grid { grid-template-columns: 1fr; gap: 2rem; }
    .sp-aside { position: static; }
    .sp-hero { padding: 7.5rem 0 2.5rem; }
    .sp-home-cols { grid-template-columns: 1fr; }
}
@media (max-width: 575px) {
    .sp-container { padding: 0 1.1rem; }
    .sp-article { font-size: 1rem; }
    .sp-article h2, .sp-h2 { font-size: 1.4rem; }
    .sp-cards, .sp-cards-sm { grid-template-columns: 1fr; }
    .sp-btn { width: 100%; }
    .sp-callout .sp-btn { margin-right: 0; }
}

/* extra block on the service pages */
.sp-deep { background: #f8f9fa; padding: 4rem 0; }
.sp-deep .sp-article h2 { font-size: 1.8rem; }
.sp-h3 { font-size: 1.3rem; color: #12304d; margin: 1.8rem 0 .6rem; }