/* ============================================================
   Service-Meldungen Pillar + Branchen-Seiten
   Eigenes, gescoptes Stylesheet (Prefix .svc-).
   Markenfarben: Indigo/Violett #7c3aed..#6d28d9, Cyan #06b6d4.
   ============================================================ */

.svc-page { background: linear-gradient(135deg, #eef2ff 0%, #f5f3ff 40%, #ecfeff 100%); position: relative; overflow: hidden; }
.svc-page::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(560px circle at 12% 16%, rgba(124,58,237,.10), transparent 60%),
        radial-gradient(620px circle at 88% 80%, rgba(6,182,212,.10), transparent 60%);
}
.svc-wrap { position: relative; z-index: 2; max-width: 1180px; margin: 0 auto; padding: 0 1.5rem; }

/* CTA */
.svc-cta {
    display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
    padding: .95rem 1.8rem; font-size: 1.06rem; font-weight: 700;
    color: #fff; border: 0; border-radius: .75rem; text-decoration: none;
    background: linear-gradient(90deg, #7c3aed 0%, #06b6d4 100%); background-size: 180% 100%;
    transition: all .25s; box-shadow: 0 14px 28px -10px rgba(124,58,237,.55);
}
.svc-cta:hover { background-position: 100% 0; transform: translateY(-2px); color: #fff; }
.svc-cta.lg { padding: 1.1rem 2.4rem; font-size: 1.18rem; }

/* Hero */
.svc-hero { display: grid; grid-template-columns: 1fr 1.05fr; gap: 3rem; align-items: center; padding: 3.5rem 0 2rem; }
@media (max-width: 920px){ .svc-hero { grid-template-columns: 1fr; gap: 2rem; text-align: center; } .svc-hero-media { order: -1; } }
.svc-eyebrow {
    display: inline-flex; align-items: center; gap: .5rem; background: rgba(124,58,237,.1); color: #6d28d9;
    font-weight: 600; font-size: .85rem; padding: .4rem .85rem; border-radius: 999px; margin-bottom: 1.1rem;
}
.svc-hero h1 { font-size: clamp(1.9rem, 4.2vw, 3rem); font-weight: 800; line-height: 1.13; letter-spacing: -.02em; color: #14102b; margin-bottom: 1rem; }
.svc-hero h1 .grad { background: linear-gradient(90deg,#7c3aed,#06b6d4); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.svc-hero .lead { font-size: 1.12rem; color: #45406b; margin-bottom: 1.5rem; max-width: 540px; }
@media (max-width: 920px){ .svc-hero .lead { margin-left:auto; margin-right:auto; } }
.svc-hero-note { font-size: .82rem; color: #6b6790; margin-top: .7rem; }

/* Sections */
.svc-section { max-width: 1180px; margin: 0 auto; padding: 2.6rem 1.5rem; }
.svc-section > h2 { font-size: clamp(1.4rem, 3vw, 1.95rem); font-weight: 800; color: #14102b; text-align: center; margin-bottom: .5rem; }
.svc-section .svc-sub { text-align: center; color: #5b5680; max-width: 660px; margin: 0 auto 2rem; }

/* Bild-Platzhalter (bis echte Bilder geliefert werden) + echtes Bild */
.svc-fig { margin: 0; }
.svc-fig img { width: 100%; height: auto; display: block; border-radius: 1.1rem; box-shadow: 0 30px 70px -28px rgba(76,29,149,.45); border: 1px solid rgba(255,255,255,.7); }
.svc-fig--narrow { max-width: 640px; margin-inline: auto; }
.svc-fig--mid { max-width: 900px; margin-inline: auto; }
.svc-ph {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; text-align: center;
    border: 2px dashed rgba(124,58,237,.35); border-radius: 1.1rem; background: rgba(255,255,255,.55);
    color: #6d28d9; padding: 1.5rem; min-height: 220px;
}
.svc-ph .svc-ph-ic { font-size: 2rem; opacity: .8; }
.svc-ph .svc-ph-t { font-weight: 700; }
.svc-ph .svc-ph-d { font-size: .82rem; color: #6b6790; max-width: 460px; }
.svc-ph code { font-size: .76rem; color: #7c3aed; background: rgba(124,58,237,.08); padding: .1rem .35rem; border-radius: .35rem; }

/* 3 Schritte */
.svc-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
@media (max-width: 820px){ .svc-steps { grid-template-columns: 1fr; } }
.svc-step { background: #fff; border: 1px solid rgba(124,58,237,.1); border-radius: 1rem; padding: 1.4rem; box-shadow: 0 14px 34px -24px rgba(76,29,149,.35); position: relative; }
.svc-step .svc-step-n { width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; background: linear-gradient(135deg,#7c3aed,#06b6d4); margin-bottom: .7rem; }
.svc-step h3 { font-size: 1.05rem; font-weight: 700; color: #14102b; margin-bottom: .3rem; }
.svc-step p { font-size: .92rem; color: #5b5680; margin: 0; }

/* Vorteile */
.svc-benefits { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 720px){ .svc-benefits { grid-template-columns: 1fr; } }
.svc-benefit { background: #fff; border: 1px solid rgba(124,58,237,.1); border-radius: 1rem; padding: 1.4rem; box-shadow: 0 14px 34px -24px rgba(76,29,149,.35); }
.svc-benefit.is-primary { grid-column: 1 / -1; border-color: rgba(124,58,237,.35); background: linear-gradient(135deg, #fff 0%, #faf5ff 100%); }
.svc-benefit .svc-ic { width: 2.4rem; height: 2.4rem; border-radius: .65rem; display: grid; place-items: center; background: linear-gradient(135deg,#7c3aed,#06b6d4); color: #fff; font-size: 1.2rem; margin-bottom: .7rem; }
.svc-benefit h3 { font-size: 1.08rem; font-weight: 700; color: #14102b; margin-bottom: .35rem; }
.svc-benefit p { font-size: .94rem; color: #5b5680; margin: 0; line-height: 1.55; }

/* Feature-Split (Status-Inbox: Text + Bild) */
.svc-split { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center; }
@media (max-width: 820px){ .svc-split { grid-template-columns: 1fr; gap: 1.5rem; } }
.svc-split h2 { font-size: clamp(1.4rem,3vw,1.9rem); font-weight: 800; color: #14102b; margin-bottom: .6rem; }
.svc-split p { color: #45406b; line-height: 1.6; }

/* Branchen-Teaser */
.svc-branches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
@media (max-width: 820px){ .svc-branches { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px){ .svc-branches { grid-template-columns: 1fr; } }
.svc-branch { display: flex; flex-direction: column; gap: .5rem; padding: 1.3rem; background: #fff; border: 1px solid rgba(124,58,237,.12); border-radius: 1rem; text-decoration: none; color: inherit; transition: transform .2s, box-shadow .2s, border-color .2s; }
.svc-branch:hover { transform: translateY(-3px); border-color: rgba(124,58,237,.3); box-shadow: 0 18px 38px -22px rgba(76,29,149,.4); color: inherit; }
.svc-branch .svc-ic { width: 2.4rem; height: 2.4rem; border-radius: .65rem; display: grid; place-items: center; background: linear-gradient(135deg,#7c3aed,#06b6d4); color: #fff; font-size: 1.2rem; }
.svc-branch strong { color: #14102b; font-size: 1rem; }
.svc-branch span { color: #6b6790; font-size: .86rem; line-height: 1.45; }
.svc-branch .svc-more { color: #7c3aed; font-size: .82rem; font-weight: 600; margin-top: auto; }

/* Trust */
.svc-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 2rem; padding: 1.4rem 1.5rem; background: rgba(255,255,255,.6); border: 1px solid rgba(124,58,237,.1); border-radius: 1rem; }
.svc-trust-item { display: flex; align-items: center; gap: .5rem; font-size: .92rem; color: #45406b; font-weight: 500; }

/* Final CTA */
.svc-final { text-align: center; background: linear-gradient(135deg,#4c1d95 0%, #6d28d9 45%, #0e7490 100%); color: #fff; border-radius: 1.5rem; padding: 3rem 1.5rem; margin: 1rem auto 3rem; max-width: 1100px; }
.svc-final h2 { color: #fff; font-size: clamp(1.5rem,3.2vw,2.1rem); font-weight: 800; margin-bottom: .6rem; }
.svc-final p { color: rgba(255,255,255,.85); max-width: 560px; margin: 0 auto 1.6rem; }
.svc-final .svc-cta { background: #fff; color: #4c1d95; box-shadow: 0 14px 30px -10px rgba(0,0,0,.35); }
.svc-final .svc-cta:hover { background: #f5f3ff; color: #4c1d95; }
.svc-final .svc-note { font-size: .82rem; color: rgba(255,255,255,.75); margin-top: .9rem; }

/* FAQ */
.svc-faq { max-width: 820px; margin: 0 auto; }
.svc-faq details { background: #fff; border: 1px solid rgba(124,58,237,.12); border-radius: .8rem; padding: .2rem .4rem; margin-bottom: .7rem; }
.svc-faq summary { cursor: pointer; font-weight: 600; color: #14102b; padding: .9rem .6rem; list-style: none; }
.svc-faq summary::-webkit-details-marker { display: none; }
.svc-faq summary::after { content: "+"; float: right; color: #7c3aed; font-weight: 700; }
.svc-faq details[open] summary::after { content: "\2013"; }
.svc-faq details p { color: #5b5680; line-height: 1.6; padding: 0 .6rem 1rem; margin: 0; }

/* Breadcrumb */
.svc-crumb { font-size: .82rem; color: #6b6790; padding-top: 1.5rem; }
.svc-crumb a { color: #7c3aed; text-decoration: none; }
.svc-crumb a:hover { text-decoration: underline; }