/* Smart vs Classic: weiße Sektion, dunkle Karten (flach #1d1b1b wie ws-smart), Akzent = Theme-Farbe */
.ws-svc,
.ws-svc *{
  box-sizing:border-box;
}

.ws-svc{
  --ws-svc-accent:var(--ws-btn-primary-bg, #f3c847);
  --ws-svc-section-bg:#ffffff;
  /* wie ws-smart .ws-addwhat */
  --ws-svc-border:rgba(255,255,255,.10);
  --ws-svc-card-base:#1d1b1b;
  position:relative;
  overflow:hidden;
  padding:32px 0;
  background:var(--ws-svc-section-bg);
  color:#111216;
}

.ws-svc__container{
  position:relative;
  z-index:1;
  width:100%;
  max-width:90rem;
  margin:0 auto;
  padding:0 24px;
}

.ws-svc__intro{
  text-align:center;
  max-width:980px;
  margin:0 auto;
}

/* Kopf: wie ws-addwhat__title — ohne geschweifte Klammern, Text schwarz (#111216) */
.ws-svc__section-title{
  margin:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:0.12em 0.28em;
  max-width:100%;
  font-family:var(--font-head, "Roboto Slab", serif);
  font-size:var(--h2-size, 48px);
  line-height:1.08;
  font-weight:800;
  letter-spacing:var(--h-track, -.025em);
  color:#111216;
}

.ws-svc__section-title::before,
.ws-svc__section-title::after{
  content:none !important;
  display:none !important;
}

.ws-svc__section-lead{
  margin:.25rem 0 1.125rem;
  max-width:100%;
  font-family:var(--font-body, "Montserrat", sans-serif);
  font-size:var(--txt-size, 18px);
  line-height:1.45;
  font-weight:500;
  color:#111216;
}

/* Nur in dieser Sektion: Akzent gelbe Schrift, kein Hintergrund („Pille“ wie in Reels gilt hier nicht). */
.ws-svc mark{
  background:transparent;
}

.ws-svc .ws-svc__hl,
.ws-svc .ws-svc__section-title .ws-reels__hl,
.ws-svc .ws-svc__section-lead .ws-reels__hl,
.ws-svc .ws-svc__card-heading .ws-svc__hl,
.ws-svc .ws-svc__card-heading .ws-reels__hl,
.ws-svc .ws-svc__card-desc .ws-svc__hl,
.ws-svc .ws-svc__card-desc .ws-reels__hl{
  display:inline;
  padding:0;
  margin:0;
  border-radius:0;
  background:transparent none !important;
  color:var(--ws-svc-accent, #f3c847);
  font-weight:800;
  letter-spacing:inherit;
  text-transform:none;
  box-decoration-break:unset;
  -webkit-box-decoration-break:unset;
}

.ws-svc__panels{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  gap:clamp(10px, 1.25vw, 16px);
  align-items:stretch;
}

.ws-svc__compare{
  position:relative;
}

.ws-svc__vs{
  position:absolute;
  left:50%;
  top:50%;
  z-index:4;
  transform:translate(-50%, -50%);
  pointer-events:none;
}

.ws-svc__vs-inner{
  width:clamp(50px, 6.6vw, 64px);
  height:clamp(50px, 6.6vw, 64px);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-head, "Roboto Slab", serif);
  font-weight:900;
  font-size:var(--txt-size-sm, 16px);
  letter-spacing:.05em;
  color:#fff;
  background:var(--ws-svc-card-base);
  border:2px solid color-mix(in srgb, var(--ws-svc-accent) 72%, #fff 28%);
  box-shadow:
    0 0 0 5px var(--ws-svc-section-bg),
    0 12px 28px rgba(0,0,0,.22);
}

/* Karte = flach #1d1b1b (ws-smart) */
.ws-svc__card{
  position:relative;
  min-width:0;
  border-radius:16px;
  overflow:hidden;
  border:1px solid var(--ws-svc-border);
  background:var(--ws-svc-card-base);
  box-shadow:0 16px 44px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.08);
}

.ws-svc__card-head{
  position:relative;
  z-index:2;
  padding:clamp(18px, 2.4vw, 22px) clamp(18px, 2.5vw, 26px) clamp(14px, 1.8vw, 18px);
  border-bottom:1px solid var(--ws-svc-border);
  text-align:center;
}

.ws-svc__card-heading{
  margin:0;
  padding:0;
  font-family:var(--font-head, "Roboto Slab", serif);
  font-size:clamp(28px, 3.6vw, 40px);
  line-height:1.08;
  font-weight:800;
  letter-spacing:var(--h-track, -.025em);
  text-transform:uppercase;
  color:#fff;
}

.ws-svc__card-desc{
  margin:clamp(10px, 1.6vw, 14px) 0 0;
  padding:0;
  max-width:48ch;
  margin-left:auto;
  margin-right:auto;
  font-family:var(--font-body, "Montserrat", sans-serif);
  font-size:clamp(14px, 1.55vw, 17px);
  line-height:1.45;
  font-weight:500;
  color:rgba(252,251,246,.82);
}

.ws-svc__card-desc > p{
  margin:0 0 .65em;
}

.ws-svc__card-desc > p:last-child{
  margin-bottom:0;
}

.ws-svc__card-top{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1.08fr);
  gap:clamp(14px, 2vw, 22px);
  padding:clamp(16px, 2.2vw, 24px) clamp(18px, 2.5vw, 26px) clamp(22px, 3vw, 30px);
  align-items:start;
}

.ws-svc__feats{
  display:flex;
  flex-direction:column;
  gap:clamp(14px, 2vw, 18px);
}

.ws-svc__feat{
  display:flex;
  align-items:flex-start;
  gap:12px;
  min-width:0;
}

/* Icon = .ws-quality-grid__icon (abgerundetes Quadrat) */
.ws-svc__feat-icon{
  flex:0 0 42px;
  width:42px;
  height:42px;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--ws-svc-accent);
  border:1px solid rgba(243,200,71,.38);
  background:rgba(243,200,71,.06);
}

.ws-svc__feat-icon svg{
  width:24px;
  height:24px;
  display:block;
}

.ws-svc__feat-body{
  min-width:0;
}

.ws-svc__feat-title{
  display:block;
  font-family:var(--font-body, "Montserrat", sans-serif);
  font-size:var(--txt-size-sm, 16px);
  line-height:1.2;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.02em;
  color:var(--ws-svc-accent);
}

.ws-svc__feat-text{
  margin:6px 0 0;
  font-family:var(--font-body, "Montserrat", sans-serif);
  font-size:var(--txt-size-sm, 16px);
  line-height:var(--txt-lh, 1.5);
  font-weight:500;
  color:rgba(255,255,255,.72);
}

.ws-svc__hero{
  min-height:190px;
  border-radius:14px;
  overflow:hidden;
  background:#1d1b1b;
  border:1px solid rgba(255,255,255,.06);
}

.ws-svc__hero-img{
  width:100%;
  height:100%;
  min-height:190px;
  display:block;
  object-fit:cover;
}

.ws-svc__placeholder--hero{
  width:100%;
  min-height:190px;
  background:#1d1b1b;
}

.ws-svc__footer{
  margin-top:clamp(28px, 4vw, 40px);
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:clamp(16px, 2.5vw, 28px);
  align-items:flex-start;
  padding-top:clamp(22px, 3vw, 32px);
  border-top:1px solid rgba(17,17,17,.12);
}

.ws-svc__foot-item{
  display:flex;
  align-items:flex-start;
  gap:12px;
  min-width:0;
}

.ws-svc__foot-icon{
  flex:0 0 32px;
  color:var(--ws-svc-accent);
}

.ws-svc__foot-icon svg{
  width:32px;
  height:32px;
  display:block;
}

.ws-svc__foot-copy{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
}

.ws-svc__foot-title{
  font-family:var(--font-head, "Roboto Slab", serif);
  font-size:var(--txt-size-sm, 16px);
  line-height:1.15;
  font-weight:800;
  text-transform:uppercase;
  color:#111216;
}

.ws-svc__foot-text{
  font-family:var(--font-body, "Montserrat", sans-serif);
  font-size:var(--txt-size-sm, 16px);
  line-height:var(--txt-lh, 1.5);
  font-weight:500;
  color:#111216;
}

@media (max-width:980px){
  .ws-svc__container{
    padding:0 12px;
  }

  .ws-svc__compare{
    display:flex;
    flex-direction:column;
    gap:18px;
  }

  .ws-svc__panels{
    display:contents;
  }

  .ws-svc__vs{
    position:static;
    transform:none;
    display:flex;
    justify-content:center;
    order:2;
  }

  .ws-svc__card--smart{
    order:1;
  }

  .ws-svc__card--classic{
    order:3;
  }

  .ws-svc__card-top{
    grid-template-columns:1fr;
    gap:18px;
  }

  .ws-svc__footer{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width:640px){
  .ws-svc__container{
    padding:0 10px;
  }

  .ws-svc{
    padding:32px 0;
  }

  .ws-svc__footer{
    grid-template-columns:1fr;
    gap:14px;
  }
}

/* Snippet mit Poster (.ws-svc__media + .ws-svc__body): Sektionskopf & Raster nur wenn direkt unter .ws-svc */
.ws-svc > .ws-svc__head{
  text-align:center;
  max-width:980px;
  margin:0 auto clamp(14px, 2.5vw, 22px);
  padding:0 24px;
}

.ws-svc__eyebrow{
  margin:0 0 .35rem;
  font-family:var(--font-body, "Montserrat", sans-serif);
  font-size:var(--txt-size-sm, 16px);
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#111216;
}

.ws-svc__title{
  margin:0;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:.2em .45em;
  font-family:var(--font-head, "Roboto Slab", serif);
  font-size:clamp(26px, 4.2vw, 44px);
  line-height:1.08;
  font-weight:800;
  letter-spacing:var(--h-track, -.025em);
  color:#111216;
}

.ws-svc__title-vs{
  font-weight:900;
  opacity:.85;
}

.ws-svc__subtitle{
  margin:clamp(10px, 1.8vw, 14px) 0 0;
  font-family:var(--font-body, "Montserrat", sans-serif);
  font-size:var(--txt-size, 18px);
  line-height:1.45;
  font-weight:500;
  color:#111216;
}

.ws-svc > .ws-svc__grid{
  width:100%;
  max-width:90rem;
  margin:0 auto;
  padding:0 24px;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:clamp(10px, 1.25vw, 16px);
  align-items:stretch;
}

@media (max-width:980px){
  .ws-svc > .ws-svc__grid{
    grid-template-columns:1fr;
    padding:0 12px;
  }

  .ws-svc > .ws-svc__head{
    padding:0 12px;
  }
}

/* Snippet-Karte: Kopf → Badge-Zeile → Poster-Streifen → Liste (Theme-Karten ohne .ws-svc__media bleiben unberührt) */
.ws-svc__badge-wrap{
  text-align:center;
  padding:0 clamp(18px, 2.5vw, 26px) clamp(12px, 1.8vw, 16px);
}

.ws-svc__badge-wrap .ws-svc__badge{
  position:static;
  display:inline-block;
  max-width:min(280px, 100%);
  padding:6px 14px;
  border-radius:999px;
  font-family:var(--font-body, "Montserrat", sans-serif);
  font-size:12px;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
  line-height:1.2;
  color:#111216;
  background:var(--ws-svc-accent, #f3c847);
  box-shadow:none;
}

.ws-svc__card > .ws-svc__media{
  position:relative;
  min-height:clamp(120px, 18vw, 180px);
  background-color:#121110;
  background-image:var(--ws-svc-poster, none);
  background-size:cover;
  background-position:center;
  border-top:1px solid var(--ws-svc-border);
}

.ws-svc__card > .ws-svc__media .ws-svc__media-gradient{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(to top, rgba(0,0,0,.42), transparent 55%);
}

.ws-svc__card > .ws-svc__body{
  padding:clamp(16px, 2.2vw, 22px) clamp(18px, 2.5vw, 26px) clamp(18px, 2.8vw, 26px);
}

.ws-svc__features{
  list-style:none;
  margin:clamp(14px, 2vw, 18px) 0 0;
  padding:0;
}

.ws-svc__feature{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:0 0 clamp(10px, 1.5vw, 14px);
  font-family:var(--font-body, "Montserrat", sans-serif);
  font-size:var(--txt-size-sm, 16px);
  line-height:var(--txt-lh, 1.5);
  color:rgba(252,251,246,.88);
}

.ws-svc__feature:last-child{
  margin-bottom:0;
}

.ws-svc__feature--muted{
  opacity:.82;
}

.ws-svc__icon{
  flex:0 0 22px;
  width:22px;
  height:22px;
  margin-top:2px;
  color:var(--ws-svc-accent, #f3c847);
}

.ws-svc__icon--muted{
  opacity:.65;
}

.ws-svc__feature-text{
  min-width:0;
}

.ws-svc__cta{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  margin-top:clamp(18px, 2.8vw, 24px);
  padding:.65rem 1.15rem;
  border-radius:10px;
  font-family:var(--font-body, "Montserrat", sans-serif);
  font-size:var(--txt-size-sm, 16px);
  font-weight:800;
  text-decoration:none;
  color:#111216;
  background:var(--ws-svc-accent, #f3c847);
  transition:opacity .2s ease, transform .15s ease;
}

.ws-svc__cta:hover,
.ws-svc__cta:focus-visible{
  opacity:.92;
  transform:translateY(-1px);
}