/*
File: full-service-de-top-production-v6.css
File Version: 6
Project: WBSFinder Website
Build: 225
Scope: German DE-01 + AUX-01 + DE-02 only
Visual authority: established production components and design tokens
*/

/* DE-01 — single static Hero using the mature production Hero grammar. */
.fullServiceHeroDe{
  background:var(--wbs-bg);
}

.fullServiceHeroDe .slide-grid{
  grid-template-columns:minmax(0,1.22fr) minmax(330px,.78fr);
  column-gap:clamp(34px,5vw,72px);
  align-items:center;
  padding-block:clamp(46px,6.6vw,76px);
}

.fullServiceHeroDe .copy{
  height:auto;
  min-height:0;
  gap:0;
  padding-block:0;
}

.fullServiceHeroDe .copy-top{
  padding-top:0;
  margin-bottom:18px;
}

.fullServiceHeroDe .copy-middle{
  display:flex;
  flex-direction:column;
  gap:0;
  margin:0;
  transform:none;
}

.fullServiceHeroDe h1{
  max-width:28ch;
  font-size:clamp(2.05rem,2.75vw,2.68rem);
  line-height:1.12;
  letter-spacing:-.008em;
}

.fullServiceHeroDe__lead{
  margin-top:24px!important;
  max-width:55ch!important;
  color:var(--wbs-text)!important;
  font-size:clamp(1.08rem,1.35vw,1.25rem)!important;
  line-height:1.55!important;
  font-weight:650!important;
}

.fullServiceHeroDe__body{
  margin-top:16px!important;
  max-width:65ch!important;
  font-size:var(--wbs-type-body)!important;
  line-height:1.72!important;
}


.fullServiceHeroDe__scope{
  margin-top:14px!important;
  max-width:65ch!important;
  color:var(--wbs-text)!important;
  font-size:var(--wbs-type-body)!important;
  line-height:1.65!important;
  font-weight:650!important;
}

.fullServiceHeroDe .actions{
  margin-top:28px;
}

.fullServiceHeroDe__media{
  align-self:center;
  min-height:390px;
  max-height:none;
  aspect-ratio:4/3;
  overflow:visible;
  border-radius:0;
  background-color:transparent;
  background-position:center;
  background-repeat:no-repeat;
  background-size:contain!important;
  box-shadow:none;
  border:0;
  -webkit-mask-image:radial-gradient(ellipse 72% 76% at 50% 50%,#000 58%,transparent 100%);
  mask-image:radial-gradient(ellipse 72% 76% at 50% 50%,#000 58%,transparent 100%);
}

.fullServiceHeroDe__media::after{
  background:radial-gradient(118% 90% at 52% 44%,rgba(255,255,255,.46) 0%,rgba(255,255,255,.18) 48%,rgba(255,255,255,0) 80%);
  opacity:.5;
}

/* AUX-01 — compact production-aligned promise strip. */
.fullServicePromiseDe{
  padding:clamp(24px,3.4vw,36px) 0;
  background:var(--wbs-bg-soft);
  color:var(--wbs-text);
}

.fullServicePromiseDe__wrap{
  width:var(--wbs-wrap);
  margin:0 auto;
  text-align:center;
}

.fullServicePromiseDe__line{
  display:block;
  width:var(--wbs-kicker-line-width);
  height:var(--wbs-kicker-line-height);
  margin:0 auto 17px;
  border-radius:var(--wbs-radius-pill);
  background:var(--wbs-magenta-soft);
}

.fullServicePromiseDe p{
  max-width:91ch;
  margin:0 auto;
  color:var(--wbs-ink-a72);
  font-family:var(--wbs-font-serif);
  font-size:clamp(1.02rem,1.35vw,1.18rem);
  line-height:1.65;
  letter-spacing:-.006em;
}

/* DE-02 — static three-area section using the existing production card grammar. */
.fullServiceAreasDe{
  padding-block:var(--wbs-section-pad);
  background:var(--wbs-bg);
  color:var(--wbs-text);
  font-family:var(--wbs-font-sans);
}

.fullServiceAreasDe__wrap{
  width:var(--wbs-wrap);
  margin:0 auto;
}

.fullServiceAreasDe__head{
  margin-bottom:clamp(var(--wbs-space-6),3vw,44px);
}

.fullServiceAreasDe__kicker{
  display:block;
  width:var(--wbs-kicker-line-width);
  height:var(--wbs-kicker-line-height);
  margin:var(--wbs-space-2) 0 14px;
  border-radius:var(--wbs-radius-pill);
  background:var(--wbs-magenta);
  opacity:1;
}

.fullServiceAreasDe__eyebrow{
  margin-bottom:8px;
  color:var(--wbs-magenta);
  font-size:.78rem;
  font-weight:650;
  letter-spacing:.045em;
}

.fullServiceAreasDe h2{
  max-width:26ch;
  margin:0;
  font-family:var(--wbs-font-serif);
  font-size:var(--wbs-type-h2);
  font-weight:400;
  line-height:1.18;
  letter-spacing:-.005em;
}

.fullServiceAreasDe__items{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--wbs-space-5-5);
}

.fullServiceAreasDe__item{
  min-width:0;
  padding:28px var(--wbs-space-8);
  border-radius:var(--wbs-radius-lg);
  background:var(--wbs-bg);
  box-shadow:0 var(--wbs-space-2) var(--wbs-space-5-5) var(--wbs-ink-a06);
  transition:background .25s ease,box-shadow .25s ease;
}

.fullServiceAreasDe__item:hover{
  background:#fcfcfe;
  box-shadow:0 var(--wbs-space-4-5) var(--wbs-space-12) var(--wbs-ink-a12);
}

.fullServiceAreasDe__icon{
  width:44px;
  height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin:2px 0 14px;
  border-radius:16px;
  background:var(--wbs-magenta-soft-a06);
  color:var(--wbs-ink-a62);
}

.fullServiceAreasDe__icon svg{
  width:22px;
  height:22px;
  display:block;
}

.fullServiceAreasDe h3{
  margin:0 0 var(--wbs-space-3);
  font-size:1.12rem;
  font-weight:600;
  letter-spacing:-.01em;
  line-height:1.25;
}

.fullServiceAreasDe__item p{
  margin:0;
  max-width:70ch;
  color:var(--wbs-muted);
  font-size:1rem;
  line-height:1.85;
  overflow-wrap:anywhere;
}

@media (max-width:1100px){
  .fullServiceHeroDe .slide-grid{
    grid-template-columns:minmax(0,1.22fr) minmax(270px,.78fr);
    column-gap:32px;
  }
  .fullServiceHeroDe__media{min-height:330px}
}

@media (max-width:980px){
  .fullServiceAreasDe__items{grid-template-columns:1fr;gap:var(--wbs-space-4-5)}
  .fullServiceAreasDe__item{padding:26px var(--wbs-space-5-5)}
}

@media (max-width:820px){
  .fullServiceHeroDe .slide-grid{
    grid-template-columns:1fr;
    padding-block:clamp(38px,8vw,58px);
  }
  .fullServiceHeroDe__media{display:none}
  .fullServiceHeroDe h1{max-width:18ch;font-size:clamp(2rem,9vw,2.35rem)}
  .fullServiceHeroDe__lead{margin-top:20px!important}
  .fullServiceHeroDe .actions{margin-top:24px}
}

@media (max-width:520px){
  .fullServiceHeroDe .actions{display:grid;grid-template-columns:1fr;width:100%}
  .fullServiceHeroDe .btn{width:100%;min-height:48px}
  .fullServicePromiseDe p{font-family:var(--wbs-font-sans);font-size:.98rem;line-height:1.6}
  .fullServiceAreasDe{padding-block:clamp(44px,12vw,62px)}
}

@media (prefers-reduced-motion:reduce){
  .fullServiceAreasDe__item{transition:none}
}

/* Mobile landscape follows the same no-reserved-media rule as portrait mobile. */
@media (max-width:900px) and (max-height:500px){
  .fullServiceHeroDe .slide-grid{grid-template-columns:1fr;padding-block:clamp(34px,7vw,48px)}
  .fullServiceHeroDe__media{display:none}
}


/* Build 222 — approved Hero media, spacing and CTA contrast Variant A. */
.fullServiceHeroDe .slide-grid{grid-template-columns:minmax(0,1.08fr) minmax(270px,.82fr)}
.fullServiceHeroDe__media{background-size:contain;background-position:center bottom;background-repeat:no-repeat;filter:none}
.fullServiceHeroDe .actions{margin-top:clamp(30px,3.2vw,46px)}
.fullServiceHeroDe .btn{
  min-height:50px;
  padding:14px 22px;
  font-size:19px;
  font-weight:700;
  line-height:1.2;
}
.fullServicePromiseDe{padding-top:clamp(30px,4vw,48px);padding-bottom:clamp(30px,4vw,48px)}
@media (max-width:820px){
  .fullServiceHeroDe .slide-grid{grid-template-columns:1fr}
  .fullServiceHeroDe__media{display:none!important}
  .fullServiceHeroDe .btn{width:100%;justify-content:center;font-size:19px;font-weight:700}
}


/* Build 223 — Owner visual corrections: CTA vertical balance, +15% Hero media, no washout overlay. */
@media (min-width:821px){
  [data-hero].fullServiceHeroDe .copy-middle .actions{
    margin-top:clamp(46px,6.6vw,76px);
  }
  .fullServiceHeroDe__media{
    opacity:1;
    filter:none!important;
    transform:scale(1.15);
    transform-origin:center center;
    -webkit-mask-image:none!important;
    mask-image:none!important;
  }
  .fullServiceHeroDe__media::after{
    background:transparent!important;
    opacity:0!important;
  }
}


/* Build 224 — Owner fine-tuning: half CTA gaps and another +15% Hero scale. */
@media (min-width:821px){
  .fullServiceHeroDe .slide-grid{
    padding-bottom:clamp(23px,3.3vw,38px);
  }
  [data-hero].fullServiceHeroDe .copy-middle .actions{
    margin-top:clamp(23px,3.3vw,38px);
  }
  .fullServiceHeroDe__media{
    transform:scale(1.3225);
    transform-origin:center center;
  }
}


/* Build 225 — final Owner Hero image, approved preview-02 overlay defaults and Library-tunable CSS variables. */
.fullServiceHeroDe{
  --wbs-hero-scale:1.3225;
  --wbs-hero-position-x:50%;
  --wbs-hero-position-y:100%;
  --wbs-hero-image-opacity:.92;
  --wbs-hero-contrast:.98;
  --wbs-hero-brightness:1.05;
  --wbs-hero-mask-x:72%;
  --wbs-hero-mask-y:76%;
  --wbs-hero-mask-start:58%;
  --wbs-hero-mask-end:100%;
  --wbs-hero-fog-opacity:.55;
  --wbs-hero-fog-alpha-start:.65;
  --wbs-hero-fog-alpha-mid:.35;
  --wbs-hero-fog-mid-stop:45%;
  --wbs-hero-fog-end-stop:78%;
}
@media (min-width:821px){
  .fullServiceHeroDe .slide-grid{
    padding-top:clamp(32px,4.62vw,53px);
    padding-bottom:clamp(23px,3.3vw,38px);
  }
  [data-hero].fullServiceHeroDe .copy-middle .actions{
    margin-top:clamp(23px,3.3vw,38px);
  }
  .fullServiceHeroDe__media{
    opacity:var(--wbs-hero-image-opacity)!important;
    filter:contrast(var(--wbs-hero-contrast)) brightness(var(--wbs-hero-brightness))!important;
    transform:scale(var(--wbs-hero-scale));
    transform-origin:center center;
    background-position:var(--wbs-hero-position-x) var(--wbs-hero-position-y)!important;
    -webkit-mask-image:radial-gradient(ellipse var(--wbs-hero-mask-x) var(--wbs-hero-mask-y) at 50% 50%,#000 var(--wbs-hero-mask-start),transparent var(--wbs-hero-mask-end))!important;
    mask-image:radial-gradient(ellipse var(--wbs-hero-mask-x) var(--wbs-hero-mask-y) at 50% 50%,#000 var(--wbs-hero-mask-start),transparent var(--wbs-hero-mask-end))!important;
    mix-blend-mode:normal!important;
  }
  .fullServiceHeroDe__media::before{
    content:none!important;
    display:none!important;
  }
  .fullServiceHeroDe__media::after{
    display:block!important;
    background:radial-gradient(120% 90% at 55% 38%,rgba(255,255,255,var(--wbs-hero-fog-alpha-start)) 0%,rgba(255,255,255,var(--wbs-hero-fog-alpha-mid)) var(--wbs-hero-fog-mid-stop),rgba(255,255,255,0) var(--wbs-hero-fog-end-stop))!important;
    opacity:var(--wbs-hero-fog-opacity)!important;
    filter:none!important;
    mix-blend-mode:normal!important;
    pointer-events:none!important;
  }
}