/* Webdesign-Seite (leistungen-webdesign) */

/* Hero: Browserfenster mit Lavendel-Fläche und dunkler Checkliste */
.bd-site .bd-wd-mockup{position:relative;padding:24px 0 40px 24px}
.bd-site .bd-wd-mockup::before{content:"";position:absolute;right:-40px;top:0;width:72%;height:82%;background:var(--bd-hell2)}
.bd-site .bd-wd-mockup figure{position:relative;margin:0;background:#ffffff;box-shadow:0 30px 80px -20px rgba(0,0,0,.35)}
.bd-site .bd-wd-mockup .bd-wd-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:#ececec}
.bd-site .bd-wd-mockup .bd-wd-bar i{width:10px;height:10px;border-radius:50%;background:#c4c4c4}
.bd-site .bd-wd-mockup .bd-wd-bar b{margin-left:14px;flex:1;height:18px;border-radius:9px;background:#ffffff}
.bd-site .bd-wd-mockup figure img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:20% 50%}
.bd-site .bd-wd-mockup ul.bd-wd-badges{position:absolute;left:0;bottom:0;list-style:none;margin:0;padding:18px 22px;background:var(--bd-dunkel);color:#ffffff;display:flex;flex-direction:column;gap:8px;font-size:14px;line-height:22px;box-shadow:0 20px 50px -14px rgba(0,0,0,.4)}
.bd-site .bd-wd-badges li{position:relative;padding-left:26px}
.bd-site .bd-wd-badges li::before{content:"";position:absolute;left:0;top:3px;width:16px;height:16px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9a3df' stroke-width='2.5'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat center/contain}
.bd-site .bd-wd-hero .bd-lead{margin-bottom:16px}
.bd-site .bd-wd-hero .bd-lead+.bd-lead{margin-bottom:40px}
.bd-site .bd-wd-hero .bd-pill--plain{font-size:13px;letter-spacing:2px;margin-bottom:22px}

/* Drei Säulen in einer weißen Box */
.bd-site .bd-pillars{display:flex;flex-wrap:wrap;background:#ffffff;box-shadow:0 15px 60px -20px rgba(0,0,0,.18)}
.bd-site .bd-pillar{flex:1 1 320px;display:flex;flex-direction:column;padding:44px 40px;box-sizing:border-box}
.bd-site .bd-pillar+.bd-pillar{border-left:1px solid var(--bd-linie)}
.bd-site .bd-pillar p.bd-pillar__num{margin:0 0 20px;font-family:var(--bd-cond);font-size:48px;line-height:48px;font-weight:600;color:var(--bd-lila)}
.bd-site .bd-pillar h3{margin:0 0 12px;font-family:var(--bd-serif);font-size:28px;line-height:36px;font-weight:700;color:var(--bd-dunkel)}
.bd-site .bd-pillar p{margin:0 0 22px;font-size:15px;line-height:27px}
.bd-site .bd-pillar ul{margin:0 0 28px;padding:0 0 0 18px;font-size:15px;line-height:28px;color:#333333}
.bd-site .bd-pillar p.bd-pillar__foot{margin:auto 0 0;padding-top:20px;border-top:1px solid var(--bd-linie);font-size:14px;line-height:24px;color:var(--bd-dunkel)}
.bd-site .bd-pillars-head{margin-bottom:12px}

/* Lebenszyklus: 5 Schritte mit farbigem Balken */
.bd-site ol.bd-cycle{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap}
.bd-site ol.bd-cycle>li{flex:1 1 200px;padding:0 24px 28px 0}
.bd-site ol.bd-cycle>li:last-child{padding-right:0}
.bd-site ol.bd-cycle>li::before{content:"";display:block;height:3px;background:var(--bd-lila);margin-bottom:22px}
.bd-site ol.bd-cycle>li:nth-child(3)::before{background:var(--bd-lavendel)}
.bd-site ol.bd-cycle>li:nth-child(4)::before{background:var(--bd-violett)}
.bd-site ol.bd-cycle>li:nth-child(5)::before{background:var(--bd-dunkel)}
.bd-site ol.bd-cycle p.bd-cycle__step{margin:0 0 6px;font-size:12px;line-height:20px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--bd-lila)}
.bd-site ol.bd-cycle h3{margin:0 0 8px;font-size:18px;font-weight:600}
.bd-site ol.bd-cycle p{margin:0;font-size:14px;line-height:24px}

/* Website-Check auf dunklem Grund */
.bd-site .bd-wd-check .bd-h2{margin-bottom:20px}
.bd-site .bd-wd-check .bd-on-dark>p:not(.bd-eyebrow):not(.bd-actions){font-size:17px;line-height:30px;margin-bottom:24px}
.bd-site .bd-wd-check ul.bd-checks{color:#ffffff;gap:12px;margin-bottom:32px}
.bd-site .bd-wd-check .bd-shadow-dark img{box-shadow:0 30px 80px -20px rgba(0,0,0,.6)}


@media (max-width:760px){
  .bd-site .bd-pillar+.bd-pillar{border-left:0;border-top:1px solid var(--bd-linie)}
  .bd-site .bd-wd-mockup::before{right:-24px}
}
.bd-site .bd-cover--office img{object-position:35% 25%}