/*
 * 0.4.81: the approved preview's typographic hierarchy and restrained depth.
 * This is an additive presentation layer. Content, focal points, service cards,
 * contact panels, buttons, the .79 panels and the .80 experience stay native.
 * Static presentation does not require JavaScript or an enhancement class.
 */

.vg-site .vg-site-header {
  background: #111d26;
  border-bottom-color: #ffffff15;
  box-shadow: 0 5px 30px #10202d12;
}
.vg-site .vg-site-header.is-scrolled {
  background: rgba(17, 29, 38, .94);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

/* Hero type is local to the copy, so no sizes or colours reach its buttons. */
:is(.vg-site, .editor-styles-wrapper) .vg-page-hero .vg-page-hero__copy > h1,
:is(.vg-site, .editor-styles-wrapper) .vg-content-hero h1 {
  font-size: clamp(2.35rem, 3.5vw, 3.5rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.03em;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}
:is(.vg-site, .editor-styles-wrapper) .vg-page-hero .vg-page-hero__copy > .vg-lead {
  line-height: 1.65;
}
:is(.vg-site, .editor-styles-wrapper) .vg-page-hero.vg-panorama .vg-page-hero__copy > .vg-lead {
  color: #e4e9e9;
}
:is(.vg-site, .editor-styles-wrapper) .vg-page-hero .vg-page-hero__media {
  overflow: hidden;
}

/* The homepage uses the composition approved in preview 02. Inner-page image
 * widths, object positions and CMS focal points are deliberately not reset. */
:is(.vg-site, .editor-styles-wrapper) .vg-home-shared-066 {
  background: #1b2c37;
  overflow: hidden;
}
:is(.vg-site, .editor-styles-wrapper) .vg-home-shared-066 .vg-page-hero__grid {
  min-height: 650px;
  padding-block: clamp(3.5rem, 5.2vw, 5rem);
}
:is(.vg-site, .editor-styles-wrapper) .vg-home-shared-066 .vg-page-hero__copy {
  width: 50%;
  max-width: 610px;
  gap: 1.75rem;
}
:is(.vg-site, .editor-styles-wrapper) .vg-home-shared-066 .vg-page-hero__copy > h1 {
  max-width: none;
  font-size: clamp(2.75rem, 4.15vw, 3.75rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -.035em;
}
:is(.vg-site, .editor-styles-wrapper) .vg-home-shared-066 .vg-page-hero__copy > h1 > span {
  display: block;
}
:is(.vg-site, .editor-styles-wrapper) .vg-home-shared-066 .vg-page-hero__copy > h1 > span:nth-child(n+2) {
  font-weight: 400;
  color: #e6ebeb;
}
:is(.vg-site, .editor-styles-wrapper) .vg-home-shared-066 .vg-page-hero__copy > .vg-lead {
  max-width: 48ch;
  font-size: clamp(1.05rem, 1.45vw, 1.25rem);
  line-height: 1.65;
  color: #e4e9e9;
}
:is(.vg-site, .editor-styles-wrapper) .vg-home-shared-066 .vg-page-hero__media > .vg-approved-picture {
  width: 78%;
  margin-left: 22%;
  transform-origin: 63% center;
}
:is(.vg-site, .editor-styles-wrapper) .vg-home-shared-066 .vg-page-hero__media > .vg-approved-picture img {
  object-position: 65% center;
}
:is(.vg-site, .editor-styles-wrapper) .vg-home-shared-066::after {
  display: block;
  background: linear-gradient(90deg, #1b2c37 0%, #1b2c37 24%, rgba(27,44,55,.96) 34%, rgba(27,44,55,.78) 43%, rgba(27,44,55,.14) 64%, transparent 80%);
}

/* Only section-title leaves receive the stronger scale. The descendant guard
 * also covers custom sections embedded inside any protected component. */
:is(.vg-site main, .editor-styles-wrapper) :is(
  .vg-container > h2,
  .vg-chapter-copy > h2,
  .vg-illustrated-copy > h2,
  .vg-page-section__heading > h2,
  .vg-editorial-071__row > div > h2
):not(.vg-eyebrow):not(.vg-page-note--heading):not(:where(
  .vg-cta, .vg-page-section--cta, .vg-page-section--signature-cta, .vg-page-cta,
  .vg-button-row, .vg-button, .vg-primary-area-card, .vg-card, .vg-service-field,
  .vg-service-diagram, .vg-diagram-item, .vg-diagram-core, .vg-engagement-row-069,
  .vg-partnership-services-078__item, .vg-partnership-services-078__family,
  #schutzkonzepte .vg-content-subsection, #familienalltag .vg-content-subsection,
  #eigene-schutzmittel
) *) {
  font-size: clamp(1.9rem, 2.75vw, 2.7rem);
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: -.025em;
}
:is(.vg-site, .editor-styles-wrapper) #hauptzugaenge > .vg-container > .vg-eyebrow {
  color: #786b52;
  letter-spacing: .2em;
  margin-bottom: 1.2rem;
}
:is(.vg-site, .editor-styles-wrapper) #hauptzugaenge > .vg-container > h2 {
  max-width: 850px;
  font-size: clamp(2.15rem, 3.45vw, 3.1rem);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -.03em;
  margin-bottom: clamp(2.5rem, 4vw, 3.75rem);
}

/* Only the headings above the .79 panels; their grids and interiors are intact. */
:is(.vg-site, .editor-styles-wrapper) :is(
  #schutzkonzepte.vg-advisory-planning-071 > .vg-container > h2,
  #familienalltag.vg-content-chapter > .vg-container > .vg-chapter-copy > h2,
  #zusammenarbeit.vg-engagements-069 > .vg-container > h2
) {
  font-size: clamp(2rem, 3vw, 2.75rem);
  font-weight: 500;
  line-height: 1.16;
  letter-spacing: -.025em;
  margin-bottom: 2rem;
}

/* Story layout/controls/motion remain owned by .69/.74. Keep their established
 * title footprint within the fixed desktop story panels. */
.vg-site main .vg-story-069 .vg-story-069__chapter :is(
  .vg-chapter-copy > h2, .vg-illustrated-copy > h2, .vg-page-section__heading > h2
):not(.vg-eyebrow):not(.vg-page-note--heading) {
  font-size: clamp(1.8rem, 2.5vw, 2.3rem);
  line-height: 1.12;
}

/* Text-led contact/legal pages share the typography without new image layouts. */
:is(.vg-site, .editor-styles-wrapper) .vg-legal-header h1 {
  font-size: clamp(2rem, 3.5vw, 3.4rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.03em;
}
:is(.vg-site, .editor-styles-wrapper) .vg-legal-section > h2 {
  font-size: clamp(1.4rem, 2vw, 1.8rem);
  line-height: 1.2;
  letter-spacing: -.015em;
}
:is(.vg-site, .editor-styles-wrapper) .vg-contact-form-panel > h2,
:is(.vg-site, .editor-styles-wrapper) .vg-contact-details__block > h2 {
  font-weight: 600;
  letter-spacing: -.015em;
}

/* The homepage partnership chapter: the approved open composition and spacing.
 * Links retain the native .80 appearance, as do all adjoining contact panels. */
:is(.vg-site, .editor-styles-wrapper) #sicherheitspartnerschaften.vg-partnership-teaser-077 {
  padding-block: clamp(3.5rem, 7.5vw, 7rem);
  background: linear-gradient(120deg, #f8f6f1 0%, #fff 78%);
  position: relative;
  overflow: hidden;
}
:is(.vg-site, .editor-styles-wrapper) #sicherheitspartnerschaften.vg-partnership-teaser-077 > .vg-container {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 5.5vw, 5rem);
  align-items: start;
  padding-block: clamp(2.5rem, 4.5vw, 4rem);
  background: transparent;
  border: 0;
  border-top: 1px solid #d8d1c2;
  border-bottom: 1px solid #e3ded3;
  box-shadow: none;
}
:is(.vg-site, .editor-styles-wrapper) #sicherheitspartnerschaften.vg-partnership-teaser-077 > .vg-container::before {
  content: "";
  position: absolute;
  width: 90px;
  height: 2px;
  top: -1px;
  left: 0;
  background: #8c7b5c;
  transform-origin: left;
  pointer-events: none;
}
:is(.vg-site, .editor-styles-wrapper) #sicherheitspartnerschaften.vg-partnership-teaser-077 > .vg-container > div > h2 {
  margin: 0;
  font-size: clamp(2rem, 3.1vw, 2.9rem);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -.035em;
  color: #23333f;
}
:is(.vg-site, .editor-styles-wrapper) #sicherheitspartnerschaften.vg-partnership-teaser-077 > .vg-container > .vg-page-copy > p {
  margin: 0;
  max-width: 45ch;
  font-size: clamp(1.08rem, 1.5vw, 1.25rem);
  line-height: 1.75;
  color: #5c6468;
}

/* The .69 homepage animation is replaced only on these text leaves. The new
 * script never moves the hero-copy ancestor, which also contains its button. */
.vg-site .vg-home-shared-066 .vg-page-hero__copy > h1 > span,
.vg-site .vg-home-shared-066 .vg-page-hero__copy > .vg-lead {
  animation: none;
}

/* Temporary classes are added only after intersection. Nothing waits hidden. */
@media (prefers-reduced-motion: no-preference) {
  .vg-site .vg-refine-enter-081,
  .vg-site .vg-page-hero .vg-page-hero__copy .vg-refine-enter-081 {
    animation: vg-refine-enter-081 760ms cubic-bezier(.2, .75, .25, 1) both;
    animation-delay: var(--vg-refine-delay-081, 0ms);
  }
  .vg-site .vg-page-hero .vg-page-hero__media > .vg-refine-image-enter-081 {
    animation: vg-refine-image-081 1050ms cubic-bezier(.22, 1, .36, 1) both;
  }
  /* Native hero media may have a clip/zoom transition. Own only the same hero
   * medium while enhancing its existing picture, never a service-card medium. */
  .vg-site .vg-page-hero.vg-hero-motion .vg-page-hero__media:has(> .vg-refine-image-081) {
    clip-path: none;
    transition: none;
  }
  .vg-site .vg-page-hero.vg-hero-motion .vg-page-hero__media > .vg-refine-image-081 img {
    transform: none;
    transition: none;
  }
  .vg-site #sicherheitspartnerschaften.vg-partnership-teaser-077 > .vg-container.vg-refine-rule-enter-081::before {
    animation: vg-refine-rule-081 950ms cubic-bezier(.22, 1, .36, 1) both;
  }
}
@media (min-width: 901px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .vg-site .vg-page-hero .vg-page-hero__media > .vg-refine-parallax-081 {
    transform: translate3d(0, var(--vg-refine-y-081, 0px), 0) scale(1.045);
    will-change: transform;
  }
}
@keyframes vg-refine-enter-081 {
  from { opacity: .12; transform: translate3d(0, 22px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes vg-refine-image-081 {
  from { opacity: .35; clip-path: inset(0 9% 0 0); }
  to { opacity: 1; clip-path: inset(0 0 0 0); }
}
@keyframes vg-refine-rule-081 {
  from { opacity: .2; transform: scaleX(.05); }
  to { opacity: 1; transform: scaleX(1); }
}

@media (min-width: 901px) and (max-width: 1150px) {
  :is(.vg-site, .editor-styles-wrapper) .vg-home-shared-066 .vg-page-hero__copy { width: 54%; }
  :is(.vg-site, .editor-styles-wrapper) .vg-home-shared-066 .vg-page-hero__copy > h1 { font-size: clamp(2.4rem, 4vw, 3rem); }
  :is(.vg-site, .editor-styles-wrapper) .vg-home-shared-066 .vg-page-hero__grid { min-height: 620px; padding-block: 3.5rem; }
  :is(.vg-site, .editor-styles-wrapper) #sicherheitspartnerschaften.vg-partnership-teaser-077 > .vg-container { gap: 2.5rem; }
}
@media (max-width: 900px) {
  :is(.vg-site, .editor-styles-wrapper) .vg-page-hero .vg-page-hero__copy > h1,
  :is(.vg-site, .editor-styles-wrapper) .vg-content-hero h1 { font-size: clamp(1.9rem, 5.5vw, 3rem); line-height: 1.1; }
  :is(.vg-site, .editor-styles-wrapper) .vg-home-shared-066 .vg-page-hero__grid { min-height: 0; padding: 0; }
  :is(.vg-site, .editor-styles-wrapper) .vg-home-shared-066 .vg-page-hero__copy { width: 100%; max-width: none; padding: 2.1rem max(24px, 5vw) 3rem; gap: 1.45rem; }
  :is(.vg-site, .editor-styles-wrapper) .vg-home-shared-066 .vg-page-hero__copy > h1 { font-size: clamp(1.9rem, 6.3vw, 3.4rem); line-height: 1.08; }
  :is(.vg-site, .editor-styles-wrapper) .vg-home-shared-066 .vg-page-hero__copy > .vg-lead { max-width: 60ch; font-size: 1.08rem; }
  :is(.vg-site, .editor-styles-wrapper) .vg-home-shared-066 .vg-page-hero__media > .vg-approved-picture { width: 100%; margin-left: 0; }
  :is(.vg-site, .editor-styles-wrapper) .vg-home-shared-066 .vg-page-hero__media > .vg-approved-picture img { object-position: center; }
  :is(.vg-site, .editor-styles-wrapper) .vg-home-shared-066::after { display: none; }
  :is(.vg-site, .editor-styles-wrapper) .vg-home-shared-066 .vg-page-hero__media::after { background: linear-gradient(transparent, #1b2c37); }
  :is(.vg-site, .editor-styles-wrapper) #sicherheitspartnerschaften.vg-partnership-teaser-077 > .vg-container { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  :is(.vg-site, .editor-styles-wrapper) #sicherheitspartnerschaften.vg-partnership-teaser-077 > .vg-container > div > h2 { font-size: clamp(1.8rem, 5.4vw, 3rem); }
  :is(.vg-site, .editor-styles-wrapper) #sicherheitspartnerschaften.vg-partnership-teaser-077 > .vg-container > .vg-page-copy > p { max-width: 55ch; }
}
@media (max-width: 540px) {
  :is(.vg-site, .editor-styles-wrapper) .vg-page-hero .vg-page-hero__copy > h1,
  :is(.vg-site, .editor-styles-wrapper) .vg-content-hero h1 { font-size: clamp(1.7rem, 6.3vw, 2.25rem); }
  :is(.vg-site, .editor-styles-wrapper) .vg-home-shared-066 .vg-page-hero__copy > h1 { font-size: clamp(1.65rem, 6.7vw, 2.25rem); }
  :is(.vg-site, .editor-styles-wrapper) .vg-home-shared-066 .vg-page-hero__copy > .vg-lead { font-size: 1.04rem; }
  :is(.vg-site, .editor-styles-wrapper) #hauptzugaenge > .vg-container > h2 { font-size: clamp(1.8rem, 7.2vw, 2.25rem); }
  :is(.vg-site, .editor-styles-wrapper) :is(
    #schutzkonzepte.vg-advisory-planning-071 > .vg-container > h2,
    #familienalltag.vg-content-chapter > .vg-container > .vg-chapter-copy > h2,
    #zusammenarbeit.vg-engagements-069 > .vg-container > h2
  ) { font-size: 1.85rem; margin-bottom: 20px; }
  :is(.vg-site, .editor-styles-wrapper) #sicherheitspartnerschaften.vg-partnership-teaser-077 { padding-block: 3rem; }
  :is(.vg-site, .editor-styles-wrapper) #sicherheitspartnerschaften.vg-partnership-teaser-077 > .vg-container { width: calc(100% - 48px); padding-block: 2rem; }
  :is(.vg-site, .editor-styles-wrapper) #sicherheitspartnerschaften.vg-partnership-teaser-077 > .vg-container > div > h2 { font-size: clamp(1.4rem, 6.2vw, 1.9rem); letter-spacing: -.025em; }
  :is(.vg-site, .editor-styles-wrapper) #sicherheitspartnerschaften.vg-partnership-teaser-077 > .vg-container > .vg-page-copy > p { font-size: 1.08rem; }
  :is(.vg-site, .editor-styles-wrapper) .vg-legal-header h1 { font-size: clamp(1.75rem, 6.5vw, 2.25rem); }
}

@media (prefers-reduced-motion: reduce), print {
  .vg-site .vg-refine-enter-081,
  .vg-site .vg-page-hero .vg-page-hero__copy .vg-refine-enter-081,
  .vg-site .vg-page-hero .vg-page-hero__media > .vg-refine-image-081,
  .vg-site #sicherheitspartnerschaften.vg-partnership-teaser-077 > .vg-container.vg-refine-rule-enter-081::before {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    will-change: auto;
  }
}