@font-face{font-family:"Inter";src:url("/assets/fonts/Inter-Regular.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Inter";src:url("/assets/fonts/Inter-Medium.otf") format("opentype");font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:"Inter";src:url("/assets/fonts/Inter-SemiBold.otf") format("opentype");font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:"Inter";src:url("/assets/fonts/Inter-Bold.otf") format("opentype");font-weight:700;font-style:normal;font-display:swap;}

@font-face{font-family:"GFS Didot";src:url("/assets/fonts/GFSDidot.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"GFS Didot";src:url("/assets/fonts/GFSDidotBold.otf") format("opentype");font-weight:700;font-style:normal;font-display:swap;}
/* Instrument Serif (language-specific bundles) */
@font-face{font-family:"InstrumentSerif-DE-RegularOnly";src:url("/assets/fonts/InstrumentSerif/de/InstrumentSerif-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"InstrumentSerif-EN-RegularOnly";src:url("/assets/fonts/InstrumentSerif/en/InstrumentSerif-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"InstrumentSerif-PL-RegularOnly";src:url("/assets/fonts/InstrumentSerif/pl/InstrumentSerif-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap;}

@font-face{font-family:"InstrumentSerif-DE";src:url("/assets/fonts/InstrumentSerif/de/InstrumentSerif-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"InstrumentSerif-DE";src:url("/assets/fonts/InstrumentSerif/de/InstrumentSerif-Italic.ttf") format("truetype");font-weight:400;font-style:italic;font-display:swap;}
@font-face{font-family:"InstrumentSerif-EN";src:url("/assets/fonts/InstrumentSerif/en/InstrumentSerif-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"InstrumentSerif-EN";src:url("/assets/fonts/InstrumentSerif/en/InstrumentSerif-Italic.ttf") format("truetype");font-weight:400;font-style:italic;font-display:swap;}
@font-face{font-family:"InstrumentSerif-PL";src:url("/assets/fonts/InstrumentSerif/pl/InstrumentSerif-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"InstrumentSerif-PL";src:url("/assets/fonts/InstrumentSerif/pl/InstrumentSerif-Italic.ttf") format("truetype");font-weight:400;font-style:italic;font-display:swap;}


:root{
  --bg:#0b1220;
  --bg2:#06192e;
  --paper:#f6f5f1;
  --ink:#0b1220;
  --accent:#7aa7ff;

  /* Brand colors for the logo + topbar controls */
  --logo-dark:#1f4187;
  --logo-light:#ffffff;

  /* Keep menu text fully opaque to avoid perceived gradients on mixed backgrounds */
  --menu-link-on-dark: #ffffff;
  --menu-link-on-light: var(--logo-dark);

  --max:1120px;
  --r:18px;

  --font-sans:"Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans";
  --font-serif:"GFS Didot", ui-serif, Georgia, "Times New Roman", Times, serif;
  --font-display-serif: var(--font-serif);
  --hero-surface:
    radial-gradient(900px 500px at 20% 20%, rgba(122,167,255,.35), transparent 60%),
    radial-gradient(800px 500px at 80% 30%, rgba(90,190,170,.16), transparent 60%),
    linear-gradient(120deg, #074485, var(--bg2));

  --viewport-scrollbar: 0px;
}

html[lang="de"]{--font-display-serif:"InstrumentSerif-DE-RegularOnly";}
html[lang="en"]{--font-display-serif:"InstrumentSerif-EN-RegularOnly";}
html[lang="pl"]{--font-display-serif:"InstrumentSerif-PL-RegularOnly";}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth;}

/* v1.145: global page fade-in.
   The html class is added by a tiny inline bootstrap before the stylesheet,
   so pages only fade when JavaScript is available. The fallback reveal in
   partials/head.php prevents a permanently hidden page on slow resources. */
html.hc-page-fade:not(.hc-page-ready) body{
  opacity:0;
}
html.hc-page-fade.hc-page-ready body{
  opacity:1;
  transition:opacity 520ms cubic-bezier(.22,.61,.36,1);
}
@media (prefers-reduced-motion: reduce){
  html.hc-page-fade body{
    opacity:1 !important;
    transition:none !important;
  }
}

body{
  font-family: var(--font-sans);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.5;
}

a{color: var(--accent); text-decoration: none}
a:hover{text-decoration: underline}


/* Typography (premium-ish) */
.display,
.h2,
.h3,
.slide-title,
.menu-links a{
  font-family: var(--font-display-serif), var(--font-serif);
  /* Force Regular (non-italic) across display typography */
  font-style: normal !important;
  /* Prevent synthetic italic/oblique in edge cases */
  font-synthesis: none !important;
}

.container{max-width:var(--max);margin:0 auto;padding:0 22px}
.section{padding:110px 0; position:relative}

/* Theme helpers */
.theme-light{background:var(--paper); color:var(--ink)}
.theme-dark{
  background: linear-gradient(120deg, var(--bg), var(--bg2));
  color: var(--menu-link-on-dark);
}
.theme-dark .muted-on-dark{color: rgba(255,255,255,.70)}
.theme-dark .fineprint-on-dark{color: rgba(255,255,255,.62)}

/* v1.60: Leitidee now uses a pure white stage on both the section and the
   pinned viewport so the transition into the animated copy stays seamless. */
.section.story.theme-light{
  background: #ffffff !important;
}
.section.story.theme-light > .section-pin{
  background: #ffffff;
}
body.has-scene .section.story.theme-light{
  background: #ffffff !important;
}
body.has-scene .section.story.theme-light > .section-pin{
  background: #ffffff;
}

.h2{font-size:clamp(22px,3vw,40px); letter-spacing:-.02em; margin:0 0 18px}
.lead{font-size:clamp(16px,1.7vw,20px); max-width:62ch}
.muted{color: rgba(11,18,32,.68)}


/* --- v0.30: Story (Mission) scroll slider --- */
/* v1.26: story is a pinned full-screen section. Remove the inherited 110px
   top/bottom section padding that created visible horizontal strips before and
   after Leitidee. Keep the previous overall scroll span by folding that space
   into min-height instead of changing the slider timing. */
.section.story{
  padding-top: 0;
  padding-bottom: 0;
  min-height: calc(420vh + 220px);
} /* extra scroll room for 3 slides */
.story-container{display:flex; justify-content:center;}
.story-slider{width:100%; min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;}
.story-slides{
  position:relative;
  width:min(1280px, 100%);
  min-height: 320px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.story-slide{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transform: translateY(10px);
  transition: opacity .42s ease, transform .42s ease;
  pointer-events:none;
}
.story-slide.is-active{opacity:1; transform: translateY(0); pointer-events:auto;}
.story-text{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.04em;
  margin:0 auto;
  width:max-content;
  max-width:none;
  font-family: var(--font-sans);
  font-size: clamp(30px, 2.6vw, 34px);
  line-height: 1.1;
  letter-spacing: -.03em;
  font-weight: 500;
  color: #707070;
  white-space: nowrap;
}
.story-line{display:block; overflow:visible;}
.story-line__inner{
  display:block;
  opacity:1;
  filter: blur(0);
  transform: translate3d(0,0,0);
  will-change: opacity, transform, filter;
}
.story-slide.is-reset .story-line__inner{
  opacity:0;
  filter: blur(16px);
  transform: translate3d(0, .42em, 0);
}
.story-slide.is-active.is-animating .story-line__inner{
  animation: storyLineReveal .82s cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: calc(var(--story-line-index, 0) * .16s + .02s);
}
.story-slide.is-active:not(.is-animating) .story-line__inner,
.story-slide:not(.is-active):not(.is-reset) .story-line__inner{
  opacity:1;
  filter: blur(0);
  transform: translate3d(0,0,0);
}
.story-slide[data-index="0"] .story-text .story-accent,
.story-slide[data-index="1"] .story-text .story-accent,
.story-slide[data-index="2"] .story-text .story-accent{
  color:#1f4187;
  font-weight:600;
}
@keyframes storyLineReveal{
  0%{
    opacity:0;
    filter: blur(18px);
    transform: translate3d(0, .5em, 0);
  }
  45%{
    opacity:.92;
    filter: blur(8px);
  }
  100%{
    opacity:1;
    filter: blur(0);
    transform: translate3d(0, 0, 0);
  }
}
.story-ui{margin-top: clamp(52px, 11.5vh, 116px); position:relative; min-height:18px; display:flex; flex-direction:column; align-items:center;}
.story-count{position:absolute; left:50%; bottom:calc(100% + 7px); transform:translateX(-50%); font-family: var(--font-serif); font-style:italic; font-size: clamp(15px, 1.08vw, 20px); line-height:1; letter-spacing:.035em; color:rgba(43,43,43,.66); font-variant-numeric: lining-nums tabular-nums; pointer-events:none; user-select:none; white-space:nowrap;}
.story-progress{position:relative; width: clamp(220px, 20vw, 300px); height: 18px;}
.story-progress::before{content:""; position:absolute; left:0; right:0; top:50%; height:1px; background: rgba(43,43,43,.20); transform: translateY(-50%);}
.story-thumb{position:absolute; top:50%; left:0; height:2px; width: calc(var(--story-progress, 0) * 100%); background: rgba(43,43,43,.92); transform: translateY(-50%); transition: width .2s linear;}
.story-hit{position:absolute; top:0; bottom:0; width: calc(100%/3); border:0; background: transparent; cursor:pointer; padding:0;}
.story-hit:nth-of-type(1){left:0;}
.story-hit:nth-of-type(2){left:33.333%;}
.story-hit:nth-of-type(3){left:66.666%;}
.story-hit:focus-visible{outline:2px solid rgba(31,65,135,.35); outline-offset:4px; border-radius: 10px;}

@media (max-width:900.98px){
  .story-slides{min-height: 300px;}
  .story-text{width:auto; max-width:min(100%, 22ch); font-size: 28px; line-height:1.12; white-space:normal;}
  .story-line__inner{display:inline-block;}
}

@media (max-width: 560px){
  .story-text{font-size: 24px; line-height:1.12; max-width:min(100%, 20ch);}
  .story-slides{min-height: 286px;}
  .story-progress{width: clamp(190px, 62vw, 260px);}
  .hero-scroll-cue__text{font-size: 10px; letter-spacing: .22em;}
}

@media (prefers-reduced-motion: reduce){
  .story-slide,
  .story-line__inner,
  .story-slide.is-active.is-animating .story-line__inner{
    animation: none !important;
    transition: none !important;
    filter: none !important;
    transform: none !important;
  }
}

/* Topbar */
.topbar{
  position:fixed; inset:0 0 auto 0;
  display:flex; justify-content:space-between; align-items:center;
  padding: 18px 22px;
  z-index: 80; /* keep MENU button above the off-canvas panel */
  background: transparent;
  backdrop-filter: none;
  /* Dark background (hero / dark sections) */
  color: var(--logo-light, #ffffff);
}
.topbar:not(.is-dark){
  /* Light background sections */
  color: var(--logo-dark, #1f4187);
}
.topbar.menu-on-light .menu-btn{
  color: var(--logo-dark, #1f4187);
}


/* When the menu is open, keep the logo visible, but (optionally) hide the language switch */
body.menu-open .lang{opacity:0; pointer-events:none}


.logo{display:inline-flex; gap:10px; align-items:center; text-decoration:none}
.logo-img{height:22px; width:auto; display:block}
.logo-img.is-light{display:block}
.logo-img.is-dark{display:none}
.topbar:not(.is-dark) .logo-img.is-light{display:none}
.topbar:not(.is-dark) .logo-img.is-dark{display:block}

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.topbar-right{display:flex; gap:14px; align-items:center}
.topbar.is-contact .brand{opacity:0; visibility:hidden; pointer-events:none;}
.lang{display:flex; gap:14px; align-items:center}
.lang a{
  text-decoration:none;
  font-weight:500;
  font-size:12px;
  letter-spacing:.14em;
  text-transform: uppercase;
  color: currentColor;
  opacity: .70;
  padding: 8px 0;
  position: relative;
}
.lang a:hover{opacity:.88}
.lang a.active{opacity: 1}
.lang a.active::after{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom: 2px;
  height: 1px;
  background: currentColor;
  opacity: .55;
}

.menu-btn{
  border:0;
  background: transparent;
  padding: 8px 0;
  font-weight:500;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:10px;
  color: currentColor;
}
.menu-btn:hover{opacity:.92}

/* MENU icon: + when closed, x when open */
.menu-icon{
  position:relative;
  width: 14px;
  height: 14px;
  display:inline-block;
}
.menu-icon::before,
.menu-icon::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width: 12px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transform: translate(-50%, -50%) rotate(0deg);
  transition: transform .28s ease, opacity .28s ease;
}
.menu-icon::after{
  transform: translate(-50%, -50%) rotate(90deg);
}
body.menu-open .menu-icon::before{
  transform: translate(-50%, -50%) rotate(45deg);
}
body.menu-open .menu-icon::after{
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* Menu overlay (off-canvas)
   Lock scrolling WITHOUT layout shift.
   Prefer modern 'scrollbar-gutter: stable' (no padding hacks, no white gutter).
   Fallback for older browsers keeps the previous scrollbar-width padding.
*/
/* Keep scrollbar visible while menu is open to avoid a blank gutter strip.
   (We intentionally do not change overflow, so layout width stays stable.) */

.menu{
  position:fixed; inset:0;
  z-index: 60;
  pointer-events:none;
}
.menu.is-open{pointer-events:auto}

.menu-scrim{
  position:absolute; inset:0;
  /* No visual change to the page when the menu opens (scrim stays transparent) */
  background: transparent;
  /* Keep the page behind the menu sharp (only the menu panel is blurred) */
  backdrop-filter: none;
  opacity:0;
  transition: opacity .62s ease;
}

.menu-panel{
  position:absolute; top:0; right:0; height:100%;
  width: min(42vw, 540px);
  padding: 26px 26px 22px;
  /* Panel has blur, but no visible background tint */
  background: rgba(213,232,240,.001);
  border-left: 1px solid #d5e8f033;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transform: translateX(105%);
  /* Slow down panel motion (~75% slower than previous) */
  transition: transform 1.60s cubic-bezier(.22,1,.26,1);
  display:flex;
  flex-direction:column;
  overflow:hidden;}
.menu-panel::before{
  content:"";
  position:absolute; inset:0;
  background:none;
  opacity:0;
  pointer-events:none;
}
.menu-panel::after{
  content:"";
  position:absolute; inset:-40px;
  background-image: url("/assets/img/grain.png");
  background-size: 260px 260px;
  opacity: .12;
  mix-blend-mode: overlay;
  pointer-events:none;
}
.menu-panel > *{position:relative}

.menu.is-open .menu-scrim{opacity:1}
.menu.is-open .menu-panel{transform: translateX(0)}

.menu-panel-top{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  min-height:44px;
}
.menu-close{
  border:0;
  background: transparent;
  color: rgba(255,255,255,.92);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.menu-close-x{
  font-size: 20px;
  line-height: 1;
  opacity: .9;
}

.menu-links{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:flex-end;
  gap: clamp(10px, 1.6vh, 18px);
  padding: 0 0 clamp(54px, 10vh, 110px);
  text-align:right;
}
.menu-links a{
  color: var(--menu-link-on-dark);
  /* Short, IWC-like fade without gradients */
  transition: color 220ms cubic-bezier(.22,1,.36,1), text-shadow 220ms cubic-bezier(.22,1,.36,1);
  will-change: color;
  text-decoration:none;
  text-transform: uppercase;
  font-size: 3.0em;
  line-height: .95;
  letter-spacing: .04em;
  padding: 0;
  opacity: 1;
  mix-blend-mode: normal;
  /* Subtle contrast halo (helps on boundary cases) */
  text-shadow: 0 2px 18px rgba(0,0,0,.18);
}
.menu-links a:hover{
  opacity: .85;
}

.menu-links a.on-light{
  color: var(--menu-link-on-light);
  text-shadow: 0 2px 18px rgba(255,255,255,.14);
}

/* If a link sits on a background boundary, keep it readable without using gradients */
.menu-links a.is-mixed{
  text-shadow:
    0 0 2px rgba(0,0,0,.18),
    0 0 2px rgba(255,255,255,.14),
    0 8px 24px rgba(0,0,0,.10);
}

.menu-panel-bottom{
  display:flex;
  justify-content:flex-end;
  gap: 18px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.10);
}
.menu-legal{
  color: var(--menu-link-on-dark);
  text-decoration:none;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: 1;
  transition: color 220ms cubic-bezier(.22,1,.36,1), opacity 220ms cubic-bezier(.22,1,.36,1), text-shadow 220ms cubic-bezier(.22,1,.36,1);
  text-shadow: 0 2px 18px rgba(0,0,0,.18);
}
.menu-legal:hover{opacity: .92}

/* Match the per-link contrast switching used by the main menu items */
.menu-legal.on-light{
  color: var(--menu-link-on-light);
  text-shadow: 0 2px 18px rgba(255,255,255,.14);
}
.menu-legal.is-mixed{
  text-shadow:
    0 0 2px rgba(0,0,0,.18),
    0 0 2px rgba(255,255,255,.14),
    0 8px 24px rgba(0,0,0,.10);
}

.menu.menu-on-light .menu-links a,
.menu.menu-on-light .menu-legal{
  color: var(--menu-link-on-light) !important;
  text-shadow: 0 2px 18px rgba(255,255,255,.14);
}

.menu.menu-on-light .menu-links a.is-mixed,
.menu.menu-on-light .menu-legal.is-mixed{
  text-shadow: 0 2px 18px rgba(255,255,255,.14);
}


/* Hero */
.hero{min-height:100vh; display:flex; align-items:center; padding-top:120px; overflow:hidden}
.hero-media{position:absolute; inset:0; overflow:hidden}
.hero-bg{
  position:absolute; inset:0;
  background: var(--hero-surface);
  transform: scale(1.02);
}
.hero-video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:.24;
  filter:saturate(1.05) contrast(1.02);
}
.hero-video.is-hidden{display:none}
.hero-noise{position:absolute; inset:0; width:100%; height:100%; opacity:.075; mix-blend-mode: overlay; pointer-events:none}
.hero-content{position:relative}

.kicker{
  text-transform: uppercase;
  letter-spacing: .16em;
  font-weight: 800;
  font-size: 12px;
  color: rgba(255,255,255,.78);
  margin-bottom: 14px;
}
.display{
  mix-blend-mode: overlay;
  font-size: 5.75em;
  text-transform: uppercase;
  font-weight: 400;
  line-height: .85;
  color: #d5e8f0;
  margin: 0;
}

.display[data-headline-fx]{
  mix-blend-mode: normal;
}

/* v1.27: viewport-mapped serif headline light sweep (start / leistungen / kontakt).
   The text samples a page-sized gradient plus a moving light field, clipped into the glyphs,
   so the letters brighten and cool down as they cross the illuminated area. */
[data-headline-fx]{
  --headline-view-x: 0px;
  --headline-view-y: 0px;
  /* v1.31: cooler, denser base fill closer to the IWC reference, with extra
     vertical breathing room so accents/descenders remain inside the effect. */
  color: rgba(27, 92, 213, .68);
  text-rendering: geometricPrecision;
  padding-top: .09em;
  padding-bottom: .13em;
  margin-top: -.09em;
  margin-bottom: -.13em;
  overflow: visible;
}

@supports ((-webkit-background-clip:text) or (background-clip:text)) {
  [data-headline-fx]{
    background-image:
      radial-gradient(42vw 28vw at 5vw 6vh,
        rgba(248, 251, 255, .46) 0%,
        rgba(232, 241, 255, .36) 18%,
        rgba(170, 202, 250, .16) 38%,
        rgba(18, 35, 79, 0) 72%),
      radial-gradient(26vw 18vw at 9vw 10vh,
        rgba(206, 224, 255, .18) 0%,
        rgba(125, 164, 238, .10) 38%,
        rgba(17, 33, 73, 0) 74%),
      radial-gradient(66vw 58vw at var(--reactive-x, 52vw) var(--reactive-y, 42vh),
        rgba(244, 248, 255, .76) 0%,
        rgba(224, 235, 255, .66) 16%,
        rgba(170, 198, 250, .44) 32%,
        rgba(88, 128, 214, .18) 52%,
        rgba(18, 35, 79, 0) 74%),
      radial-gradient(88vw 76vw at var(--reactive-x-soft, 58vw) var(--reactive-y-soft, 48vh),
        rgba(193, 214, 255, .18) 0%,
        rgba(126, 158, 226, .12) 36%,
        rgba(17, 33, 73, 0) 76%),
      linear-gradient(90deg,
        #1b5cd5 0%,
        #2a67db 14%,
        #4b82e3 34%,
        #79a3ee 56%,
        #c1d6fb 80%,
        #eef4ff 100%);
    background-size: 100vw 100vh;
    background-position: calc(-1 * var(--headline-view-x, 0px)) calc(-1 * var(--headline-view-y, 0px));
    background-repeat: no-repeat;
    background-origin: border-box;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    text-shadow: 0 0 0.01em rgba(10, 22, 47, .10);
    filter: saturate(.92) brightness(.94) contrast(1.03);
  }

  .section.contact [data-headline-fx]{
    background-image:
      radial-gradient(42vw 28vw at 5vw 6vh,
        rgba(249, 251, 255, .48) 0%,
        rgba(234, 242, 255, .38) 18%,
        rgba(174, 205, 250, .17) 38%,
        rgba(18, 35, 79, 0) 72%),
      radial-gradient(26vw 18vw at 9vw 10vh,
        rgba(209, 226, 255, .19) 0%,
        rgba(128, 167, 239, .10) 38%,
        rgba(17, 33, 73, 0) 74%),
      radial-gradient(62vw 54vw at var(--reactive-x, 52vw) var(--reactive-y, 42vh),
        rgba(246, 249, 255, .78) 0%,
        rgba(226, 236, 255, .68) 16%,
        rgba(174, 201, 250, .46) 32%,
        rgba(89, 129, 214, .18) 52%,
        rgba(18, 35, 79, 0) 74%),
      radial-gradient(84vw 72vw at var(--reactive-x-soft, 58vw) var(--reactive-y-soft, 48vh),
        rgba(195, 216, 255, .18) 0%,
        rgba(126, 158, 226, .12) 36%,
        rgba(17, 33, 73, 0) 76%),
      linear-gradient(90deg,
        #1b5cd5 0%,
        #316edf 16%,
        #5d91e8 42%,
        #a9c7f6 72%,
        #f2f7ff 100%);
  }
}
.hero .lead{color: rgba(255,255,255,.74)}
.hero-actions{display:flex; gap:18px; align-items:center; margin-top:26px}
.scroll-hint{color: rgba(255,255,255,.58); font-size: 12px; letter-spacing: .08em}
.hero-scroll-cue{
  position:absolute;
  left:50%;
  bottom:clamp(24px, 4.25vh, 42px);
  transform:translateX(-50%);
  z-index:2;
  pointer-events:none;
  text-align:center;
  opacity: var(--hero-scroll-cue-opacity, 1);
  transition: opacity .32s linear;
  will-change: opacity;
}
.hero-scroll-cue__text{
  display:inline-block;
  color: rgba(255,255,255,.72);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  white-space: nowrap;
  animation: heroScrollCueDrift 3.8s cubic-bezier(.22,.61,.36,1) infinite;
  will-change: transform;
}
@keyframes heroScrollCueDrift{
  0%, 66.666%, 77.777%, 100%{transform: translateY(0);}
  72.222%, 88.888%{transform: translateY(9px);}
}
@media (prefers-reduced-motion: reduce){
  .hero-scroll-cue__text{animation:none;}
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.08);
  color:white;
  text-decoration:none;
  font-weight:900;
  cursor:pointer;
}

/* Story */
.cols{display:grid; grid-template-columns: 1fr 1fr; gap:26px}
@media (max-width: 860px){ .cols{grid-template-columns: 1fr}
}

/* How */
.steps{display:grid; grid-template-columns: repeat(3, 1fr); gap:16px}
@media (max-width: 860px){ .steps{grid-template-columns: 1fr}
}
.step{
  border: 1px solid rgba(11,18,32,.12);
  border-radius: var(--r);
  padding: 18px;
  background: rgba(255,255,255,.70);
  backdrop-filter: blur(8px);
}
.step .num{font-weight:900; letter-spacing:.12em; font-size:12px; color: rgba(11,18,32,.55)}
.step h3{margin:10px 0 8px; letter-spacing:-.02em}
.step p{margin:0; color: rgba(11,18,32,.72)}

/* Dark sections text tweaks */
.theme-dark .h2{color: rgba(255,255,255,.94)}
.theme-dark p{color: rgba(255,255,255,.76)}
.theme-dark .cols p{color: rgba(255,255,255,.76)}

/* Services snap slider */
.section-head{display:flex; justify-content:space-between; gap:18px; align-items:flex-end; flex-wrap:wrap}
.slider-ui{display:flex; align-items:center; gap:14px}
.slider-indicator{font-weight:900; letter-spacing:.10em; font-size:12px; color: rgba(255,255,255,.72)}
.slider-buttons{display:flex; gap:10px}
.icon-btn{
  width:42px; height:42px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.20);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  font-size: 20px;
  cursor:pointer;
}
.icon-btn:disabled{opacity:.35; cursor:default}

.snap-wrap{padding: 14px 0 72px}
.snap-track{
  display:flex;
  gap:18px;
  overflow-x:auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 22px;
  padding: 18px 22px 24px;
  -webkit-overflow-scrolling: touch;
}
.snap-track:focus{outline:none}
.snap-slide{
  flex: 0 0 min(560px, 86vw);
  scroll-snap-align: center;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--r);
  padding: 24px 22px;
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
}
.slide-num{font-weight:900; letter-spacing:.14em; font-size:12px; color: rgba(255,255,255,.72)}
.slide-title{margin:12px 0 10px; letter-spacing:-.02em; font-size: clamp(20px, 2.1vw, 28px); color: rgba(255,255,255,.94)}
.slide-desc{margin:0; color: rgba(255,255,255,.74)}

/* prettier scrollbar (optional, subtle) */
.snap-track::-webkit-scrollbar{height:10px}
.snap-track::-webkit-scrollbar-track{background: rgba(255,255,255,.06); border-radius: 999px}
.snap-track::-webkit-scrollbar-thumb{background: rgba(255,255,255,.18); border-radius: 999px}

/* Contact (dark inputs) */
.form{margin-top: 20px; max-width: 720px}
.form-row{display:flex; flex-direction:column; gap:8px; margin-bottom:14px}
.form-row.two{display:grid; grid-template-columns: 1fr 1fr; gap:12px}
@media (max-width: 700px){ .form-row.two{grid-template-columns:1fr}
}

.theme-dark input,
.theme-dark select,
.theme-dark textarea{
  border:1px solid rgba(255,255,255,.18);
  border-radius: 14px;
  padding: 12px 12px;
  font: inherit;
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
}
.theme-dark textarea{min-height:120px; resize:vertical}
.theme-dark label{color: rgba(255,255,255,.82)}
.theme-dark input::placeholder,
.theme-dark textarea::placeholder{color: rgba(255,255,255,.45)}

/* Honeypot */
.hp{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden}

/* Footer (dark continuation) */
.footer{
  padding: 46px 0 64px;
  background: linear-gradient(120deg, var(--bg), var(--bg2));
  color: rgba(255,255,255,.82);
  border-top: 1px solid rgba(255,255,255,.10);
}
.footer-inner{
  max-width: var(--max);
  margin:0 auto;
  padding: 0 22px;
  display:flex;
  justify-content:space-between;
  gap: 18px;
  flex-wrap:wrap;
}
.footer a{color: rgba(255,255,255,.70); text-decoration:none}
.footer a:hover{color: rgba(255,255,255,.92)}
.footer-copy{color: rgba(255,255,255,.55)}

/* Reveal */
.reveal{opacity:0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease}
.reveal.is-visible{opacity:1; transform: translateY(0)}

/* Page Loader (homepage only) */
.page-loader{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  opacity: 1;
  visibility: visible;
  transition: opacity .38s ease, visibility .38s ease;
}

/* Default: keep loader hidden until JS decides to show it (prevents flashes on subsequent navigations). */
.page-loader[aria-hidden="true"]{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

body.is-loading{overflow:hidden}
.page-loader.is-done{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.page-loader.is-hidden{display:none}

.page-loader-bg{
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 500px at 20% 20%, rgba(122,167,255,.35), transparent 60%),
    radial-gradient(800px 500px at 80% 30%, rgba(90,190,170,.16), transparent 60%),
    linear-gradient(120deg, #074485, var(--bg2));
  transform: scale(1.02);
}
.page-loader-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background-image: url('/assets/img/grain.png');
  background-size: 360px 360px;
  opacity: .10;
  mix-blend-mode: overlay;
  pointer-events:none;
}

.page-loader-inner{
  position: relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 20px;
  transform: translateY(-1vh);
}

.loader-logo{
  position: relative;
  width: clamp(58px, 5.5vw, 78px);
  height: clamp(58px, 5.5vw, 78px);
  display:flex;
  align-items:center;
  justify-content:center;
}

.loader-logo-svg{
  width:100%;
  height:100%;
  display:block;
  overflow: visible;
}

.loader-tagline{
  margin: 0;
  color: rgba(255,255,255,.95);
  text-align:center;
  text-shadow: 0 2px 18px rgba(0,0,0,.18);
  /* Keep the loader tagline closer to the illustration (smaller than site H2) */
  font-size: clamp(22px, 2.2vw, 34px);
  line-height: 1.15;
}

/* ============================
   Scroll Scene (logo camera flight)
   ============================ */

/* Fixed canvas behind the whole onepage (homepage only; enabled via JS by adding .has-scene) */
.scene{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.scene canvas{
  width: 100%;
  height: 100%;
  display: block;
}

/* Ensure content layers above the scene */
body.has-scene main,
body.has-scene footer{position:relative; z-index:1;}

/* Slight transparency so the scene can "shine through" without destroying readability */
body.has-scene{background: #050b15;}
body.has-scene .theme-light{
  background: rgba(246,245,241,.86);
  backdrop-filter: none;
}
body.has-scene .theme-dark{
  background: linear-gradient(120deg, rgba(11,18,32,.82), rgba(6,25,46,.82));
  backdrop-filter: none;
}
body.has-scene .hero-bg{opacity:.92;}


/* Subtle pointer-reactive glow for selected dark sections only (start / leistungen / kontakt).
   Built to avoid layout shifts and overflow. */
.hero-media > .section-reactive-bg,
.section.services > .section-pin > .section-reactive-bg,
.section.contact > .section-pin > .section-reactive-bg{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:0;
}

.section.services > .section-pin > .container,
.section.contact > .section-pin > .container{
  position:relative;
  z-index:1;
}

.section-reactive-bg::before,
.section-reactive-bg::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  will-change:transform, opacity;
}

.section-reactive-bg::before{
  background:
    radial-gradient(38rem 24rem at 4vw 5vh, rgba(222, 236, 255, 0.20), transparent 64%),
    radial-gradient(22rem 15rem at 8vw 9vh, rgba(154, 198, 255, 0.11), transparent 62%),
    radial-gradient(30rem 18rem at var(--reactive-x, 52vw) var(--reactive-y, 42vh), rgba(112, 168, 255, 0.095), transparent 60%),
    radial-gradient(22rem 14rem at var(--reactive-x-soft, 58vw) var(--reactive-y-soft, 48vh), rgba(88, 144, 232, 0.07), transparent 62%),
    radial-gradient(44rem 24rem at 18% 82%, rgba(255,255,255,0.025), transparent 74%);
  filter: blur(18px);
}

.section-reactive-bg::after{
  background:
    radial-gradient(14rem 14rem at 4vw 5vh, rgba(245, 249, 255, 0.11), transparent 56%),
    radial-gradient(11rem 11rem at 8vw 9vh, rgba(224, 238, 255, 0.07), transparent 58%),
    radial-gradient(10rem 10rem at calc(var(--reactive-x, 52vw) + 8px) calc(var(--reactive-y, 42vh) + 6px), rgba(214, 234, 255, 0.042), transparent 58%),
    radial-gradient(18rem 12rem at calc(var(--reactive-x-soft, 58vw) - 18px) calc(var(--reactive-y-soft, 48vh) - 10px), rgba(93, 156, 244, 0.055), transparent 62%);
  mix-blend-mode: screen;
  opacity: .96;
}

.section-reactive-bg--hero{
  opacity:.78;
}

.section-reactive-bg--section{
  opacity:.58;
}

@media (max-width:900.98px){
  .section-reactive-bg::before{
    filter: blur(14px);
  }
}

@media (prefers-reduced-motion: reduce){
  .section-reactive-bg::before,
  .section-reactive-bg::after{
    filter:none;
  }
}

/* Paint sticky full-screen section backgrounds only on the pinned viewport.
   This avoids horizontal seams where duplicated gradients on the outer section
   and its sticky .section-pin used to restart at slightly different positions. */
.section.services.theme-dark,
.section.contact.theme-dark,
.section.coverage.theme-light{
  background: transparent !important;
}

.section.services,
.section.contact,
.section.coverage{
  padding-top: 0;
  padding-bottom: 0;
}

.section.services.theme-dark > .section-pin,
.section.contact.theme-dark > .section-pin{
  background: var(--hero-surface);
}

.section.coverage.theme-light > .section-pin{
  background: #ddf1fb;
}

.section.services > .section-pin{
  --leistungen-marquee-opacity: 0;
  --leistungen-symbol-base-size: clamp(39px, 4vw, 74px);
  --leistungen-outro-symbol-size: calc(var(--leistungen-symbol-base-size) * 4);
}

body.has-scene .section.services.theme-dark,
body.has-scene .section.contact.theme-dark,
body.has-scene .section.coverage.theme-light{
  background: transparent !important;
}

body.has-scene .section.services.theme-dark > .section-pin,
body.has-scene .section.contact.theme-dark > .section-pin{
  background: var(--hero-surface);
}

body.has-scene .section.coverage.theme-light > .section-pin{
  background: #ddf1fb;
}

.section.coverage:not(.hero):not(.story){
  min-height: 220vh;
}

.section.coverage > .section-pin{
  justify-content:center;
  padding-top: 0;
  overflow:hidden;
  overflow:clip;
}

.coverage-bg{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  contain:paint;
}

.coverage-layout.container{
  position:relative;
  z-index:1;
  width:min(86vw, 1240px);
  height:min(74vh, 760px);
  min-height:min(74vh, 760px);
  margin:0 auto;
  padding:0;
}

.coverage-title{
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  margin:0;
  width:min(46%, 560px);
  font-size:clamp(58px, 4.95vw, 82px);
  line-height:.91;
  letter-spacing:.002em;
  font-weight:400;
  color:#304f89;
  text-wrap:balance;
  text-align:center;
  z-index:2;
}

@supports ((-webkit-background-clip:text) or (background-clip:text)) {
  .coverage-title{
    background-image: linear-gradient(180deg, #304f89 0%, #4e6eb1 100%);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}

.coverage-copy{
  position:absolute;
  inset:0;
  overflow:visible;
}

.coverage-copy-inner{
  position:relative;
  width:100%;
  height:100%;
}

.coverage-item{
  --coverage-item-progress: 1;
  --coverage-body-progress: 1;
  position:absolute;
  inset:auto;
  color:#192b4a;
  opacity:calc(var(--coverage-item-progress) * var(--coverage-item-progress));
  transform:none;
}

.coverage-item:nth-child(1){
  left:61.5%;
  top:2.5%;
  width:min(26.5%, 330px);
}

.coverage-item:nth-child(2){
  left:78.2%;
  top:61.8%;
  width:min(22.5%, 286px);
}

.coverage-item:nth-child(3){
  left:32.2%;
  top:77.5%;
  width:min(26.5%, 330px);
}

.coverage-item-title{
  margin:0 0 clamp(18px, 1.3vw, 24px);
  color:#192b4a;
  font-family:Roboto, var(--font-sans);
  font-size:clamp(14px, .92vw, 16px);
  line-height:1.18;
  font-weight:600;
  letter-spacing:.05em;
  text-transform:uppercase;
}

.coverage-item p{
  margin:0;
  width:100%;
  max-width:100%;
  color:#192b4a;
  font-size:clamp(16px, 1.03vw, 18px);
  line-height:1.58;
  letter-spacing:.05em;
  text-wrap:pretty;
  opacity:calc(var(--coverage-body-progress) * var(--coverage-body-progress));
  transform:none;
}

@media (max-width: 1280px){
  .coverage-layout.container{
    width:min(89vw, 1120px);
    height:min(72vh, 700px);
    min-height:min(72vh, 700px);
  }

  .coverage-title{
    width:min(45%, 500px);
    font-size:clamp(50px, 4.8vw, 70px);
  }

  .coverage-item:nth-child(1){
    left:60.8%;
    top:4.5%;
    width:min(28%, 308px);
  }

  .coverage-item:nth-child(2){
    left:76.4%;
    top:62.5%;
    width:min(24%, 254px);
  }

  .coverage-item:nth-child(3){
    left:31%;
    top:77%;
    width:min(28%, 306px);
  }

  .coverage-item p{
    font-size:clamp(15px, 1vw, 17px);
    line-height:1.54;
  }
}

@media (max-width: 1080px){
  .section.coverage:not(.hero):not(.story){
    min-height: 230vh;
  }

  .coverage-layout.container{
    width:min(92vw, 980px);
    height:min(72vh, 660px);
    min-height:min(72vh, 660px);
  }

  .coverage-title{
    width:min(44%, 420px);
    font-size:clamp(42px, 4.7vw, 58px);
  }

  .coverage-item:nth-child(1){
    left:59.6%;
    top:7%;
    width:min(29%, 270px);
  }

  .coverage-item:nth-child(2){
    left:74.2%;
    top:63%;
    width:min(25.5%, 238px);
  }

  .coverage-item:nth-child(3){
    left:29.8%;
    top:77.5%;
    width:min(29%, 270px);
  }

  .coverage-item-title{
    margin-bottom:16px;
    font-size:14px;
  }

  .coverage-item p{
    font-size:15px;
    line-height:1.48;
  }
}

@media (max-width:900.98px){
  .section.coverage:not(.hero):not(.story){
    min-height: 240vh;
  }

  .section.coverage > .section-pin{
    justify-content:flex-start;
    padding-top: 12vh;
  }

  .coverage-layout.container{
    width:min(100%, calc(100vw - 28px));
    min-height:100vh;
    height:auto;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;
    gap:clamp(38px, 5vh, 56px);
    padding:0;
  }

  .coverage-title{
    position:relative;
    left:auto;
    top:auto;
    transform:none;
    width:min(100%, 640px);
    font-size:clamp(36px, 8.2vw, 58px);
    line-height:.92;
    text-align:left;
    margin-left:14px;
  }

  .coverage-copy{
    position:relative;
    inset:auto;
    width:min(100%, 100%);
    max-width:420px;
    height:clamp(640px, 68vh, 760px);
    overflow:visible;
    margin-left:14px;
  }

  .coverage-copy-inner{
    min-height:100%;
    height:100%;
  }

  .coverage-item{
    position:absolute;
    left:0 !important;
    width:min(100%, 100%) !important;
    transform:none;
  }

  .coverage-item:nth-child(1){
    top:0;
  }

  .coverage-item:nth-child(2){
    top:34%;
  }

  .coverage-item:nth-child(3){
    top:68%;
  }

  .coverage-item-title{
    font-size:13px;
    letter-spacing:.05em;
  }

  .coverage-item p{
    font-size:15px;
    line-height:1.44;
    letter-spacing:.032em;
    transform:none;
  }
}

@media (prefers-reduced-motion: reduce){
  .story-slide,
  .story-line__inner,
  .story-slide.is-active.is-animating .story-line__inner{
    animation: none !important;
    transition: none !important;
    filter: none !important;
    transform: none !important;
  }
}

/* Topbar */
.topbar{
  position:fixed; inset:0 0 auto 0;
  display:flex; justify-content:space-between; align-items:center;
  padding: 18px 22px;
  z-index: 80; /* keep MENU button above the off-canvas panel */
  background: transparent;
  backdrop-filter: none;
  /* Dark background (hero / dark sections) */
  color: var(--logo-light, #ffffff);
}
.topbar:not(.is-dark){
  /* Light background sections */
  color: var(--logo-dark, #1f4187);
}
.topbar.menu-on-light .menu-btn{
  color: var(--logo-dark, #1f4187);
}


/* When the menu is open, keep the logo visible, but (optionally) hide the language switch */
body.menu-open .lang{opacity:0; pointer-events:none}


.logo{display:inline-flex; gap:10px; align-items:center; text-decoration:none}
.logo-img{height:22px; width:auto; display:block}
.logo-img.is-light{display:block}
.logo-img.is-dark{display:none}
.topbar:not(.is-dark) .logo-img.is-light{display:none}
.topbar:not(.is-dark) .logo-img.is-dark{display:block}

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.topbar-right{display:flex; gap:14px; align-items:center}
.topbar.is-contact .brand{opacity:0; visibility:hidden; pointer-events:none;}
.lang{display:flex; gap:14px; align-items:center}
.lang a{
  text-decoration:none;
  font-weight:500;
  font-size:12px;
  letter-spacing:.14em;
  text-transform: uppercase;
  color: currentColor;
  opacity: .70;
  padding: 8px 0;
  position: relative;
}
.lang a:hover{opacity:.88}
.lang a.active{opacity: 1}
.lang a.active::after{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom: 2px;
  height: 1px;
  background: currentColor;
  opacity: .55;
}

.menu-btn{
  border:0;
  background: transparent;
  padding: 8px 0;
  font-weight:500;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:10px;
  color: currentColor;
}
.menu-btn:hover{opacity:.92}

/* MENU icon: + when closed, x when open */
.menu-icon{
  position:relative;
  width: 14px;
  height: 14px;
  display:inline-block;
}
.menu-icon::before,
.menu-icon::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width: 12px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transform: translate(-50%, -50%) rotate(0deg);
  transition: transform .28s ease, opacity .28s ease;
}
.menu-icon::after{
  transform: translate(-50%, -50%) rotate(90deg);
}
body.menu-open .menu-icon::before{
  transform: translate(-50%, -50%) rotate(45deg);
}
body.menu-open .menu-icon::after{
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* Menu overlay (off-canvas)
   Lock scrolling WITHOUT layout shift.
   Prefer modern 'scrollbar-gutter: stable' (no padding hacks, no white gutter).
   Fallback for older browsers keeps the previous scrollbar-width padding.
*/
/* Keep scrollbar visible while menu is open to avoid a blank gutter strip.
   (We intentionally do not change overflow, so layout width stays stable.) */

.menu{
  position:fixed; inset:0;
  z-index: 60;
  pointer-events:none;
}
.menu.is-open{pointer-events:auto}

.menu-scrim{
  position:absolute; inset:0;
  /* No visual change to the page when the menu opens (scrim stays transparent) */
  background: transparent;
  /* Keep the page behind the menu sharp (only the menu panel is blurred) */
  backdrop-filter: none;
  opacity:0;
  transition: opacity .62s ease;
}

.menu-panel{
  position:absolute; top:0; right:0; height:100%;
  width: min(42vw, 540px);
  padding: 26px 26px 22px;
  /* Panel has blur, but no visible background tint */
  background: rgba(213,232,240,.001);
  border-left: 1px solid #d5e8f033;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transform: translateX(105%);
  /* Slow down panel motion (~75% slower than previous) */
  transition: transform 1.60s cubic-bezier(.22,1,.26,1);
  display:flex;
  flex-direction:column;
  overflow:hidden;}
.menu-panel::before{
  content:"";
  position:absolute; inset:0;
  background:none;
  opacity:0;
  pointer-events:none;
}
.menu-panel::after{
  content:"";
  position:absolute; inset:-40px;
  background-image: url("/assets/img/grain.png");
  background-size: 260px 260px;
  opacity: .12;
  mix-blend-mode: overlay;
  pointer-events:none;
}
.menu-panel > *{position:relative}

.menu.is-open .menu-scrim{opacity:1}
.menu.is-open .menu-panel{transform: translateX(0)}

.menu-panel-top{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  min-height:44px;
}
.menu-close{
  border:0;
  background: transparent;
  color: rgba(255,255,255,.92);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.menu-close-x{
  font-size: 20px;
  line-height: 1;
  opacity: .9;
}

.menu-links{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:flex-end;
  gap: clamp(10px, 1.6vh, 18px);
  padding: 0 0 clamp(54px, 10vh, 110px);
  text-align:right;
}
.menu-links a{
  color: var(--menu-link-on-dark);
  /* Short, IWC-like fade without gradients */
  transition: color 220ms cubic-bezier(.22,1,.36,1), text-shadow 220ms cubic-bezier(.22,1,.36,1);
  will-change: color;
  text-decoration:none;
  text-transform: uppercase;
  font-size: 3.0em;
  line-height: .95;
  letter-spacing: .04em;
  padding: 0;
  opacity: 1;
  mix-blend-mode: normal;
  /* Subtle contrast halo (helps on boundary cases) */
  text-shadow: 0 2px 18px rgba(0,0,0,.18);
}
.menu-links a:hover{
  opacity: .85;
}

.menu-links a.on-light{
  color: var(--menu-link-on-light);
  text-shadow: 0 2px 18px rgba(255,255,255,.14);
}

/* If a link sits on a background boundary, keep it readable without using gradients */
.menu-links a.is-mixed{
  text-shadow:
    0 0 2px rgba(0,0,0,.18),
    0 0 2px rgba(255,255,255,.14),
    0 8px 24px rgba(0,0,0,.10);
}

.menu-panel-bottom{
  display:flex;
  justify-content:flex-end;
  gap: 18px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.10);
}
.menu-legal{
  color: var(--menu-link-on-dark);
  text-decoration:none;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .72;
  transition: color 220ms cubic-bezier(.22,1,.36,1), opacity 220ms cubic-bezier(.22,1,.36,1), text-shadow 220ms cubic-bezier(.22,1,.36,1);
  text-shadow: 0 2px 18px rgba(0,0,0,.18);
}
.menu-legal:hover{opacity: .92}

/* Match the per-link contrast switching used by the main menu items */
.menu-legal.on-light{
  color: var(--menu-link-on-light);
  text-shadow: 0 2px 18px rgba(255,255,255,.14);
}
.menu-legal.is-mixed{
  text-shadow:
    0 0 2px rgba(0,0,0,.18),
    0 0 2px rgba(255,255,255,.14),
    0 8px 24px rgba(0,0,0,.10);
}

.menu.menu-on-light .menu-links a,
.menu.menu-on-light .menu-legal{
  color: var(--menu-link-on-light) !important;
  text-shadow: 0 2px 18px rgba(255,255,255,.14);
}

.menu.menu-on-light .menu-links a.is-mixed,
.menu.menu-on-light .menu-legal.is-mixed{
  text-shadow: 0 2px 18px rgba(255,255,255,.14);
}


/* Hero */
.hero{min-height:100vh; display:flex; align-items:center; padding-top:120px; overflow:hidden}
.hero-media{position:absolute; inset:0; overflow:hidden}
.hero-bg{
  position:absolute; inset:0;
  background: var(--hero-surface);
  transform: scale(1.02);
}
.hero-video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:.24;
  filter:saturate(1.05) contrast(1.02);
}
.hero-video.is-hidden{display:none}
.hero-noise{position:absolute; inset:0; width:100%; height:100%; opacity:.075; mix-blend-mode: overlay; pointer-events:none}
.hero-content{position:relative}

.kicker{
  text-transform: uppercase;
  letter-spacing: .16em;
  font-weight: 800;
  font-size: 12px;
  color: rgba(255,255,255,.78);
  margin-bottom: 14px;
}
.display{
  mix-blend-mode: overlay;
  font-size: 5.75em;
  text-transform: uppercase;
  font-weight: 400;
  line-height: .85;
  color: #d5e8f0;
  margin: 0;
}

.display[data-headline-fx]{
  mix-blend-mode: normal;
}

/* v1.27: viewport-mapped serif headline light sweep (start / leistungen / kontakt).
   The text samples a page-sized gradient plus a moving light field, clipped into the glyphs,
   so the letters brighten and cool down as they cross the illuminated area. */
[data-headline-fx]{
  --headline-view-x: 0px;
  --headline-view-y: 0px;
  /* v1.31: cooler, denser base fill closer to the IWC reference, with extra
     vertical breathing room so accents/descenders remain inside the effect. */
  color: rgba(27, 92, 213, .68);
  text-rendering: geometricPrecision;
  padding-top: .09em;
  padding-bottom: .13em;
  margin-top: -.09em;
  margin-bottom: -.13em;
  overflow: visible;
}

@supports ((-webkit-background-clip:text) or (background-clip:text)) {
  [data-headline-fx]{
    background-image:
      radial-gradient(42vw 28vw at 5vw 6vh,
        rgba(248, 251, 255, .46) 0%,
        rgba(232, 241, 255, .36) 18%,
        rgba(170, 202, 250, .16) 38%,
        rgba(18, 35, 79, 0) 72%),
      radial-gradient(26vw 18vw at 9vw 10vh,
        rgba(206, 224, 255, .18) 0%,
        rgba(125, 164, 238, .10) 38%,
        rgba(17, 33, 73, 0) 74%),
      radial-gradient(66vw 58vw at var(--reactive-x, 52vw) var(--reactive-y, 42vh),
        rgba(244, 248, 255, .76) 0%,
        rgba(224, 235, 255, .66) 16%,
        rgba(170, 198, 250, .44) 32%,
        rgba(88, 128, 214, .18) 52%,
        rgba(18, 35, 79, 0) 74%),
      radial-gradient(88vw 76vw at var(--reactive-x-soft, 58vw) var(--reactive-y-soft, 48vh),
        rgba(193, 214, 255, .18) 0%,
        rgba(126, 158, 226, .12) 36%,
        rgba(17, 33, 73, 0) 76%),
      linear-gradient(90deg,
        #1b5cd5 0%,
        #2a67db 14%,
        #4b82e3 34%,
        #79a3ee 56%,
        #c1d6fb 80%,
        #eef4ff 100%);
    background-size: 100vw 100vh;
    background-position: calc(-1 * var(--headline-view-x, 0px)) calc(-1 * var(--headline-view-y, 0px));
    background-repeat: no-repeat;
    background-origin: border-box;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    text-shadow: 0 0 0.01em rgba(10, 22, 47, .10);
    filter: saturate(.92) brightness(.94) contrast(1.03);
  }

  .section.contact [data-headline-fx]{
    background-image:
      radial-gradient(42vw 28vw at 5vw 6vh,
        rgba(249, 251, 255, .48) 0%,
        rgba(234, 242, 255, .38) 18%,
        rgba(174, 205, 250, .17) 38%,
        rgba(18, 35, 79, 0) 72%),
      radial-gradient(26vw 18vw at 9vw 10vh,
        rgba(209, 226, 255, .19) 0%,
        rgba(128, 167, 239, .10) 38%,
        rgba(17, 33, 73, 0) 74%),
      radial-gradient(62vw 54vw at var(--reactive-x, 52vw) var(--reactive-y, 42vh),
        rgba(246, 249, 255, .78) 0%,
        rgba(226, 236, 255, .68) 16%,
        rgba(174, 201, 250, .46) 32%,
        rgba(89, 129, 214, .18) 52%,
        rgba(18, 35, 79, 0) 74%),
      radial-gradient(84vw 72vw at var(--reactive-x-soft, 58vw) var(--reactive-y-soft, 48vh),
        rgba(195, 216, 255, .18) 0%,
        rgba(126, 158, 226, .12) 36%,
        rgba(17, 33, 73, 0) 76%),
      linear-gradient(90deg,
        #1b5cd5 0%,
        #316edf 16%,
        #5d91e8 42%,
        #a9c7f6 72%,
        #f2f7ff 100%);
  }
}
.hero .lead{color: rgba(255,255,255,.74)}
.hero-actions{display:flex; gap:18px; align-items:center; margin-top:26px}
.scroll-hint{color: rgba(255,255,255,.58); font-size: 12px; letter-spacing: .08em}
.hero-scroll-cue{
  position:absolute;
  left:50%;
  bottom:clamp(24px, 4.25vh, 42px);
  transform:translateX(-50%);
  z-index:2;
  pointer-events:none;
  text-align:center;
  opacity: var(--hero-scroll-cue-opacity, 1);
  transition: opacity .32s linear;
  will-change: opacity;
}
.hero-scroll-cue__text{
  display:inline-block;
  color: rgba(255,255,255,.72);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  white-space: nowrap;
  animation: heroScrollCueDrift 3.8s cubic-bezier(.22,.61,.36,1) infinite;
  will-change: transform;
}
@keyframes heroScrollCueDrift{
  0%, 66.666%, 77.777%, 100%{transform: translateY(0);}
  72.222%, 88.888%{transform: translateY(9px);}
}
@media (prefers-reduced-motion: reduce){
  .hero-scroll-cue__text{animation:none;}
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.08);
  color:white;
  text-decoration:none;
  font-weight:900;
  cursor:pointer;
}

/* Story */
.cols{display:grid; grid-template-columns: 1fr 1fr; gap:26px}
@media (max-width: 860px){ .cols{grid-template-columns: 1fr}
}

/* How */
.steps{display:grid; grid-template-columns: repeat(3, 1fr); gap:16px}
@media (max-width: 860px){ .steps{grid-template-columns: 1fr}
}
.step{
  border: 1px solid rgba(11,18,32,.12);
  border-radius: var(--r);
  padding: 18px;
  background: rgba(255,255,255,.70);
  backdrop-filter: blur(8px);
}
.step .num{font-weight:900; letter-spacing:.12em; font-size:12px; color: rgba(11,18,32,.55)}
.step h3{margin:10px 0 8px; letter-spacing:-.02em}
.step p{margin:0; color: rgba(11,18,32,.72)}

/* Dark sections text tweaks */
.theme-dark .h2{color: rgba(255,255,255,.94)}
.theme-dark p{color: rgba(255,255,255,.76)}
.theme-dark .cols p{color: rgba(255,255,255,.76)}

/* Services snap slider */
.section-head{display:flex; justify-content:space-between; gap:18px; align-items:flex-end; flex-wrap:wrap}
.slider-ui{display:flex; align-items:center; gap:14px}
.slider-indicator{font-weight:900; letter-spacing:.10em; font-size:12px; color: rgba(255,255,255,.72)}
.slider-buttons{display:flex; gap:10px}
.icon-btn{
  width:42px; height:42px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.20);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  font-size: 20px;
  cursor:pointer;
}
.icon-btn:disabled{opacity:.35; cursor:default}

.snap-wrap{padding: 14px 0 72px}
.snap-track{
  display:flex;
  gap:18px;
  overflow-x:auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 22px;
  padding: 18px 22px 24px;
  -webkit-overflow-scrolling: touch;
}
.snap-track:focus{outline:none}
.snap-slide{
  flex: 0 0 min(560px, 86vw);
  scroll-snap-align: center;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--r);
  padding: 24px 22px;
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
}
.slide-num{font-weight:900; letter-spacing:.14em; font-size:12px; color: rgba(255,255,255,.72)}
.slide-title{margin:12px 0 10px; letter-spacing:-.02em; font-size: clamp(20px, 2.1vw, 28px); color: rgba(255,255,255,.94)}
.slide-desc{margin:0; color: rgba(255,255,255,.74)}

/* prettier scrollbar (optional, subtle) */
.snap-track::-webkit-scrollbar{height:10px}
.snap-track::-webkit-scrollbar-track{background: rgba(255,255,255,.06); border-radius: 999px}
.snap-track::-webkit-scrollbar-thumb{background: rgba(255,255,255,.18); border-radius: 999px}

/* Contact (dark inputs) */
.form{margin-top: 20px; max-width: 720px}
.form-row{display:flex; flex-direction:column; gap:8px; margin-bottom:14px}
.form-row.two{display:grid; grid-template-columns: 1fr 1fr; gap:12px}
@media (max-width: 700px){ .form-row.two{grid-template-columns:1fr}
}

.theme-dark input,
.theme-dark select,
.theme-dark textarea{
  border:1px solid rgba(255,255,255,.18);
  border-radius: 14px;
  padding: 12px 12px;
  font: inherit;
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
}
.theme-dark textarea{min-height:120px; resize:vertical}
.theme-dark label{color: rgba(255,255,255,.82)}
.theme-dark input::placeholder,
.theme-dark textarea::placeholder{color: rgba(255,255,255,.45)}

/* Honeypot */
.hp{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden}

/* Footer (dark continuation) */
.footer{
  padding: 46px 0 64px;
  background: linear-gradient(120deg, var(--bg), var(--bg2));
  color: rgba(255,255,255,.82);
  border-top: 1px solid rgba(255,255,255,.10);
}
.footer-inner{
  max-width: var(--max);
  margin:0 auto;
  padding: 0 22px;
  display:flex;
  justify-content:space-between;
  gap: 18px;
  flex-wrap:wrap;
}
.footer a{color: rgba(255,255,255,.70); text-decoration:none}
.footer a:hover{color: rgba(255,255,255,.92)}
.footer-copy{color: rgba(255,255,255,.55)}

/* Reveal */
.reveal{opacity:0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease}
.reveal.is-visible{opacity:1; transform: translateY(0)}

/* Page Loader (homepage only) */
.page-loader{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  opacity: 1;
  visibility: visible;
  transition: opacity .38s ease, visibility .38s ease;
}

/* Default: keep loader hidden until JS decides to show it (prevents flashes on subsequent navigations). */
.page-loader[aria-hidden="true"]{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

body.is-loading{overflow:hidden}
.page-loader.is-done{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.page-loader.is-hidden{display:none}

.page-loader-bg{
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 500px at 20% 20%, rgba(122,167,255,.35), transparent 60%),
    radial-gradient(800px 500px at 80% 30%, rgba(90,190,170,.16), transparent 60%),
    linear-gradient(120deg, #074485, var(--bg2));
  transform: scale(1.02);
}
.page-loader-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background-image: url('/assets/img/grain.png');
  background-size: 360px 360px;
  opacity: .10;
  mix-blend-mode: overlay;
  pointer-events:none;
}

.page-loader-inner{
  position: relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 20px;
  transform: translateY(-1vh);
}

.loader-logo{
  position: relative;
  width: clamp(58px, 5.5vw, 78px);
  height: clamp(58px, 5.5vw, 78px);
  display:flex;
  align-items:center;
  justify-content:center;
}

.loader-logo-svg{
  width:100%;
  height:100%;
  display:block;
  overflow: visible;
}

.loader-tagline{
  margin: 0;
  color: rgba(255,255,255,.95);
  text-align:center;
  text-shadow: 0 2px 18px rgba(0,0,0,.18);
  /* Keep the loader tagline closer to the illustration (smaller than site H2) */
  font-size: clamp(22px, 2.2vw, 34px);
  line-height: 1.15;
}

/* ============================
   Scroll Scene (logo camera flight)
   ============================ */

/* Fixed canvas behind the whole onepage (homepage only; enabled via JS by adding .has-scene) */
.scene{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.scene canvas{
  width: 100%;
  height: 100%;
  display: block;
}

/* Ensure content layers above the scene */
body.has-scene main,
body.has-scene footer{position:relative; z-index:1;}

/* Slight transparency so the scene can "shine through" without destroying readability */
body.has-scene{background: #050b15;}
body.has-scene .theme-light{
  background: rgba(246,245,241,.86);
  backdrop-filter: none;
}
body.has-scene .theme-dark{
  background: linear-gradient(120deg, rgba(11,18,32,.82), rgba(6,25,46,.82));
  backdrop-filter: none;
}
body.has-scene .hero-bg{opacity:.92;}


/* Subtle pointer-reactive glow for selected dark sections only (start / leistungen / kontakt).
   Built to avoid layout shifts and overflow. */
.hero-media > .section-reactive-bg,
.section.services > .section-pin > .section-reactive-bg,
.section.contact > .section-pin > .section-reactive-bg{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:0;
}

.section.services > .section-pin > .container,
.section.contact > .section-pin > .container{
  position:relative;
  z-index:1;
}

.section-reactive-bg::before,
.section-reactive-bg::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  will-change:transform, opacity;
}

.section-reactive-bg::before{
  background:
    radial-gradient(38rem 24rem at 4vw 5vh, rgba(222, 236, 255, 0.20), transparent 64%),
    radial-gradient(22rem 15rem at 8vw 9vh, rgba(154, 198, 255, 0.11), transparent 62%),
    radial-gradient(30rem 18rem at var(--reactive-x, 52vw) var(--reactive-y, 42vh), rgba(112, 168, 255, 0.095), transparent 60%),
    radial-gradient(22rem 14rem at var(--reactive-x-soft, 58vw) var(--reactive-y-soft, 48vh), rgba(88, 144, 232, 0.07), transparent 62%),
    radial-gradient(44rem 24rem at 18% 82%, rgba(255,255,255,0.025), transparent 74%);
  filter: blur(18px);
}

.section-reactive-bg::after{
  background:
    radial-gradient(14rem 14rem at 4vw 5vh, rgba(245, 249, 255, 0.11), transparent 56%),
    radial-gradient(11rem 11rem at 8vw 9vh, rgba(224, 238, 255, 0.07), transparent 58%),
    radial-gradient(10rem 10rem at calc(var(--reactive-x, 52vw) + 8px) calc(var(--reactive-y, 42vh) + 6px), rgba(214, 234, 255, 0.042), transparent 58%),
    radial-gradient(18rem 12rem at calc(var(--reactive-x-soft, 58vw) - 18px) calc(var(--reactive-y-soft, 48vh) - 10px), rgba(93, 156, 244, 0.055), transparent 62%);
  mix-blend-mode: screen;
  opacity: .96;
}

.section-reactive-bg--hero{
  opacity:.78;
}

.section-reactive-bg--section{
  opacity:.58;
}

@media (max-width:900.98px){
  .section-reactive-bg::before{
    filter: blur(14px);
  }
}

@media (prefers-reduced-motion: reduce){
  .section-reactive-bg::before,
  .section-reactive-bg::after{
    filter:none;
  }
}

/* Paint sticky full-screen section backgrounds only on the pinned viewport.
   This avoids horizontal seams where duplicated gradients on the outer section
   and its sticky .section-pin used to restart at slightly different positions. */
.section.services.theme-dark,
.section.contact.theme-dark,
.section.coverage.theme-light{
  background: transparent !important;
}

.section.services,
.section.contact,
.section.coverage{
  padding-top: 0;
  padding-bottom: 0;
}

.section.services.theme-dark > .section-pin,
.section.contact.theme-dark > .section-pin{
  background: var(--hero-surface);
}

.section.coverage.theme-light > .section-pin{
  background: #ddf1fb;
}

.section.services > .section-pin{
  --leistungen-marquee-opacity: 0;
  --leistungen-symbol-base-size: clamp(39px, 4vw, 74px);
  --leistungen-outro-symbol-size: calc(var(--leistungen-symbol-base-size) * 4);
}

body.has-scene .section.services.theme-dark,
body.has-scene .section.contact.theme-dark,
body.has-scene .section.coverage.theme-light{
  background: transparent !important;
}

body.has-scene .section.services.theme-dark > .section-pin,
body.has-scene .section.contact.theme-dark > .section-pin{
  background: var(--hero-surface);
}

body.has-scene .section.coverage.theme-light > .section-pin{
  background: #ddf1fb;
}

.section.coverage:not(.hero):not(.story){
  min-height: 220vh;
}

.section.coverage > .section-pin{
  justify-content:center;
  padding-top: 0;
  overflow:hidden;
  overflow:clip;
}

.coverage-bg{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  contain:paint;
}

.coverage-layout.container{
  position:relative;
  z-index:1;
  max-width:none;
  width:100%;
  min-height:100vh;
  margin:0;
  padding:0;
}

.coverage-title{
  position:absolute;
  left:5.2%;
  top:12vh;
  margin:0;
  width:min(34.2vw, 640px);
  max-width:640px;
  font-size:clamp(60px, 5.05vw, 82px);
  line-height:.90;
  letter-spacing:.002em;
  font-weight:400;
  color:#304f89;
  text-wrap:balance;
  z-index:2;
}

@supports ((-webkit-background-clip:text) or (background-clip:text)) {
  .coverage-title{
    background-image: linear-gradient(180deg, #304f89 0%, #4e6eb1 100%);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}

.coverage-copy{
  position:absolute;
  inset:0;
  overflow:hidden;
}

.coverage-copy-inner{
  position:relative;
  width:100%;
  min-height:100%;
}

.coverage-item{
  --coverage-item-progress: 1;
  --coverage-body-progress: 1;
  position:absolute;
  inset:auto;
  color:#192b4a;
  opacity:calc(var(--coverage-item-progress) * var(--coverage-item-progress));
  transform:translate3d(
    0,
    calc((1 - var(--coverage-item-progress)) * 180px),
    0
  );
}

.coverage-item:nth-child(1){
  left:6.0%;
  top:43.5%;
  width:min(21.1vw, 396px);
}

.coverage-item:nth-child(2){
  left:38.2%;
  top:57.5%;
  width:min(23.9vw, 440px);
}

.coverage-item:nth-child(3){
  left:70.4%;
  top:71.5%;
  width:min(23.7vw, 438px);
}

.coverage-item-title{
  margin:0 0 clamp(18px, 1.3vw, 24px);
  color:#192b4a;
  font-family:Roboto, var(--font-sans);
  font-size:clamp(14px, .92vw, 16px);
  line-height:1.18;
  font-weight:500;
  letter-spacing:.05em;
  text-transform:uppercase;
}

.coverage-item p{
  margin:0;
  width:100%;
  max-width:100%;
  color:#192b4a;
  font-size:clamp(16px, 1.03vw, 18px);
  line-height:1.58;
  letter-spacing:.05em;
  text-wrap:pretty;
  opacity:calc(var(--coverage-body-progress) * var(--coverage-body-progress));
  transform:translate3d(
    0,
    calc((1 - var(--coverage-body-progress)) * 36px),
    0
  );
}

@media (max-width: 1280px){
  .coverage-title{
    top:12vh;
    width:min(38vw, 560px);
    font-size:clamp(52px, 5vw, 72px);
  }

  .coverage-item:nth-child(1){
    left:6.0%;
    top:45%;
    width:min(22vw, 332px);
  }

  .coverage-item:nth-child(2){
    left:37.8%;
    top:59%;
    width:min(24.5vw, 360px);
  }

  .coverage-item:nth-child(3){
    left:69.6%;
    top:73%;
    width:min(24.2vw, 356px);
  }

  .coverage-item p{
    font-size:clamp(15px, 1vw, 17px);
    line-height:1.54;
  }
}

@media (max-width: 1080px){
  .section.coverage:not(.hero):not(.story){
    min-height: 230vh;
  }

  .coverage-title{
    top:12vh;
    width:min(42vw, 500px);
    font-size:clamp(44px, 4.9vw, 62px);
  }

  .coverage-item:nth-child(1){
    left:5.6%;
    top:47%;
    width:min(25vw, 300px);
  }

  .coverage-item:nth-child(2){
    left:36.8%;
    top:61%;
    width:min(27vw, 324px);
  }

  .coverage-item:nth-child(3){
    left:68%;
    top:75%;
    width:min(27vw, 326px);
  }

  .coverage-item-title{
    margin-bottom:16px;
    font-size:14px;
  }

  .coverage-item p{
    font-size:15px;
    line-height:1.48;
  }
}

@media (max-width:900.98px){
  .section.coverage:not(.hero):not(.story){
    min-height: 240vh;
  }

  .section.coverage > .section-pin{
    justify-content:flex-start;
    padding-top: 12vh;
  }

  .coverage-layout.container{
    width:min(100%, calc(100vw - 28px));
    min-height:100vh;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;
    gap:clamp(38px, 5vh, 56px);
    padding:0;
  }

  .coverage-title{
    position:relative;
    left:auto;
    top:auto;
    width:min(100%, 640px);
    font-size:clamp(36px, 8.2vw, 58px);
    line-height:.92;
    margin-left:14px;
  }

  .coverage-copy{
    position:relative;
    inset:auto;
    width:min(100%, 100%);
    max-width:420px;
    height:clamp(640px, 68vh, 760px);
    overflow:visible;
    margin-left:14px;
  }

  .coverage-copy-inner{
    min-height:100%;
  }

  .coverage-item{
    position:absolute;
    left:0 !important;
    width:min(100%, 100%) !important;
    transform:translate3d(
      0,
      calc((1 - var(--coverage-item-progress)) * 150px),
      0
    );
  }

  .coverage-item:nth-child(1){
    top:0;
  }

  .coverage-item:nth-child(2){
    top:34%;
  }

  .coverage-item:nth-child(3){
    top:68%;
  }

  .coverage-item-title{
    font-size:13px;
    letter-spacing:.05em;
  }

  .coverage-item p{
    font-size:15px;
    line-height:1.44;
    letter-spacing:.032em;
    transform:translate3d(
      0,
      calc((1 - var(--coverage-body-progress)) * 30px),
      0
    );
  }
}

@media (prefers-reduced-motion: reduce){
  .coverage-item{
    opacity:1;
    transform:none;
  }

  .coverage-item p{
    opacity:1;
    transform:none;
  }
}



/* --- v0.27: Scroll "Vollbild"-Steps (sticky pin) --- */

/* Note: .section.story has its own scroll duration (3-slide story slider) */
.section:not(.hero):not(.story) {

  /* Each section behaves like a full-screen "step" with its own scroll duration */
  min-height: 200vh;
}
.section:not(.hero) > .section-pin {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* Keep contact readable when pinned */
.section.contact > .section-pin {
  justify-content: flex-start;
  padding-top: clamp(24px, 6vh, 72px);
}

/* Scene canvas should stay transparent; content sits above it */
.scene, #scene-canvas {
  background: transparent !important;
}


/* v0.39: legacy in-page anchors (keep old hashes working without affecting layout) */
.anchor-legacy{display:block;width:0;height:0;overflow:hidden;}



/* Leistungen scroller (scroll-driven horizontal stage) */
.section.services:not(.hero):not(.story){min-height:100vh;}
.section.services .section-pin{justify-content:center;padding-top:0;}

.leistungen-scroller{width:100%;}
.section.services > .section-pin > .container.leistungen-scroller{
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}
.leistungen-shell{
  display:grid;
  grid-template-rows:auto minmax(0, 1fr) auto;
  gap: clamp(24px, 4.2vh, 52px);
  min-height:100vh;
  padding: clamp(72px, 10vh, 116px) 0 clamp(42px, 7vh, 80px);
  --leistungen-edge-gutter: 5vw;
}

.leistungen-topline{
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 24px;
  padding: 0 var(--leistungen-edge-gutter);
}

.leistungen-kicker{
  margin:0;
  padding-left: 0;
  color: rgba(255,255,255,.76);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.leistungen-spectrum-trigger{
  appearance: none;
  border: 0;
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 13px;
  color: rgba(232, 240, 255, .78);
  background: transparent;
  font: inherit;
  font-size: clamp(13px, .93vw, 17px);
  line-height: 1;
  font-weight: 400;
  letter-spacing: .15em;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  opacity: .88;
  transform: translate3d(0, 0, 0);
  transition: opacity 220ms ease, color 220ms ease, transform 220ms ease;
}

.leistungen-spectrum-trigger:hover,
.leistungen-spectrum-trigger:focus-visible{
  color: rgba(255,255,255,.96);
  opacity: 1;
  transform: translate3d(2px, 0, 0);
}

.leistungen-spectrum-trigger:focus-visible{
  outline: 1px solid rgba(255,255,255,.56);
  outline-offset: 6px;
  border-radius: 999px;
}

.leistungen-spectrum-trigger-dot{
  flex: 0 0 auto;
  width: clamp(9px, .72vw, 13px);
  height: clamp(9px, .72vw, 13px);
  border-radius: 999px;
  background: rgba(96, 136, 217, .92);
  box-shadow: 0 0 18px rgba(96, 136, 217, .24);
}

.leistungen-spectrum-trigger-text{
  display: block;
}

.leistungen-stage{
  position:relative;
  width: calc(100vw - var(--viewport-scrollbar, 0px));
  margin-left: calc(50% - ((100vw - var(--viewport-scrollbar, 0px)) * 0.5));
  overflow:hidden;
  min-height: clamp(360px, 52vh, 620px);
  display:flex;
  align-items:center;
}

.leistungen-slide{
  position:absolute;
  inset:0;
  display:flex;
  align-items:stretch;
  justify-content:flex-start;
  opacity:1;
  pointer-events:none;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}
.leistungen-slide.is-active{opacity:1;}

.leistungen-slide-inner{
  --leistungen-head-drop: 50px;
  --leistungen-head-half: 0px;
  display:flex;
  align-items:flex-start;
  gap: clamp(38px, 5vw, 98px);
  width:max-content;
  min-width:max-content;
  height:auto;
  min-height:0;
  position:relative;
  top:50%;
  transform:translateY(-50%);
}

.leistungen-slide-head,
.leistungen-slide-copy{position:relative;}

.leistungen-slide-head{
  margin-top: var(--leistungen-head-drop);
}

.leistungen-slide-copy{
  margin-top: calc(var(--leistungen-head-drop) + var(--leistungen-head-half));
}

.leistungen-headline{
  position:relative;
  top:auto;
  left:auto;
  transform:none;
  font-family: var(--font-display-serif), var(--font-serif);
  font-style: normal !important;
  font-synthesis: none !important;
  margin:0;
  width: min(44vw, 580px);
  max-width: 580px;
  color:#d5e8f0;
  font-size: clamp(46px, 4.8vw, 74px);
  font-weight: 400;
  line-height: .92;
  letter-spacing: .005em;
  opacity: 1;
  transition: none;
  pointer-events:none;
  will-change: auto;
}
.leistungen-headline.is-active{opacity:1;}

/* v1.164/v1.310/v1.311: Leistungen headline static gradient calibration.
   Keep the existing reactive headline layers and pointer/hover colour effect,
   but lift the left-side fill for the newer brighter image background. */
@supports ((-webkit-background-clip:text) or (background-clip:text)) {
  .section.services .leistungen-headline[data-headline-fx]{
    background-image:
      linear-gradient(90deg,
        rgba(236, 246, 255, .74) 0%,
        rgba(214, 232, 255, .52) 22%,
        rgba(168, 202, 248, .25) 43%,
        rgba(130, 161, 216, 0) 68%),
      radial-gradient(42vw 28vw at 5vw 6vh,
        rgba(248, 251, 255, .46) 0%,
        rgba(232, 241, 255, .36) 18%,
        rgba(170, 202, 250, .16) 38%,
        rgba(18, 35, 79, 0) 72%),
      radial-gradient(26vw 18vw at 9vw 10vh,
        rgba(206, 224, 255, .18) 0%,
        rgba(125, 164, 238, .10) 38%,
        rgba(17, 33, 73, 0) 74%),
      radial-gradient(66vw 58vw at var(--reactive-x, 52vw) var(--reactive-y, 42vh),
        rgba(244, 248, 255, .76) 0%,
        rgba(224, 235, 255, .66) 16%,
        rgba(170, 198, 250, .44) 32%,
        rgba(88, 128, 214, .18) 52%,
        rgba(18, 35, 79, 0) 74%),
      radial-gradient(88vw 76vw at var(--reactive-x-soft, 58vw) var(--reactive-y-soft, 48vh),
        rgba(193, 214, 255, .18) 0%,
        rgba(126, 158, 226, .12) 36%,
        rgba(17, 33, 73, 0) 76%),
      linear-gradient(90deg,
        #3d82ea 0%,
        #4b8ded 14%,
        #6ca0f1 34%,
        #8fb3f3 56%,
        #c6dcfc 80%,
        #eef4ff 100%);
    background-size:
      100% 100%,
      100vw 100vh,
      100vw 100vh,
      100vw 100vh,
      100vw 100vh,
      100vw 100vh;
    background-position:
      0 0,
      calc(-1 * var(--headline-view-x, 0px)) calc(-1 * var(--headline-view-y, 0px)),
      calc(-1 * var(--headline-view-x, 0px)) calc(-1 * var(--headline-view-y, 0px)),
      calc(-1 * var(--headline-view-x, 0px)) calc(-1 * var(--headline-view-y, 0px)),
      calc(-1 * var(--headline-view-x, 0px)) calc(-1 * var(--headline-view-y, 0px)),
      calc(-1 * var(--headline-view-x, 0px)) calc(-1 * var(--headline-view-y, 0px));
    filter:saturate(.96) brightness(1.04) contrast(.98);
    text-shadow:0 0 0.01em rgba(10, 22, 47, .08);
  }
}

.leistungen-text{
  position:relative;
  top:auto;
  left:auto;
  transform:none;
  width: min(26vw, 370px);
  max-width: 370px;
  margin-left:0;
  opacity:1;
  pointer-events:auto;
  transition: none;
}
.leistungen-text.is-active{
  opacity:1;
  pointer-events:auto;
}

.leistungen-scroller.is-scroll-driven .leistungen-text{transition:none;}

.leistungen-text p{
  display:block;
  justify-content: initial;
  align-items: initial;
  min-height: 0;
  margin: 0 0 24px 0;
  color: rgba(255,255,255,.74);
  font-size: 14px;
  line-height: 1.35;
  font-weight: 500;
  letter-spacing: .02em;
}
.leistungen-text p:last-child{margin-bottom:0;}

.leistungen-symbol-row{
  display:grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: clamp(3px, .45vw, 8px);
  align-items:end;
  width: min(calc((100vw - var(--viewport-scrollbar, 0px)) * 0.38), 620px);
  margin: 0 0 0 auto;
  padding: 0 var(--leistungen-edge-gutter) 0 0;
}

.leistungen-symbol{
  --symbol-scale: 1;
  width: var(--leistungen-symbol-base-size);
  height: var(--leistungen-symbol-base-size);
  justify-self:center;
  display:grid;
  place-items:center;
  color: rgba(231,239,249,.24);
  opacity:.58;
  transition:
    opacity 220ms ease,
    transform 280ms ease,
    color 240ms ease,
    filter 240ms ease;
  transform: scale(var(--symbol-scale));
}

.leistungen-symbol.is-passed,
.leistungen-symbol.is-active{
  color: rgba(244,248,255,.96);
  opacity:1;
}

.leistungen-symbol.is-active{
  --symbol-scale: 1.05;
  filter: drop-shadow(0 0 18px rgba(255,255,255,.15));
}

.leistungen-symbol-svg{
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

img.leistungen-symbol-svg,
.leistungen-symbol-asset{
  object-fit: contain;
}

svg.leistungen-symbol-svg circle{fill: currentColor;}

.leistungen-shell{
  position: relative;
  overflow: hidden;
  --leistungen-stage-opacity: 1;
  --leistungen-symbol-row-opacity: 1;
  --leistungen-symbol-base-size: clamp(39px, 4vw, 74px);
  --leistungen-outro-symbol-size: calc(var(--leistungen-symbol-base-size) * 4);
  --leistungen-marquee-opacity: 0;
  --leistungen-panel-progress: 0;
  --leistungen-person-progress: 0;
  --leistungen-copy-progress: 0;
  --leistungen-social-progress: 0;
  --leistungen-signature-opacity: 0;
  --leistungen-signature-progress: 0;
  --leistungen-whiteout-progress: 0;
  --leistungen-copy-fit: 1;
  --leistungen-outro-panel-center-x: 50%;
  --leistungen-outro-panel-width: 39.1%;
  --leistungen-outro-copy-width: min(48rem, calc(100vw - clamp(80px, 8vw, 132px)));
}

.leistungen-topline,
.leistungen-stage{
  position: relative;
  z-index: 2;
  opacity: var(--leistungen-stage-opacity);
  transition: none;
}

.leistungen-shell.is-outro-active .leistungen-stage{
  filter: blur(calc((1 - var(--leistungen-stage-opacity)) * 8px));
}

.leistungen-symbol-row{
  position: relative;
  z-index: 3;
  opacity: var(--leistungen-symbol-row-opacity);
}

.leistungen-shell.is-outro-active .leistungen-symbol-row{
  will-change: opacity;
}

/* v1.154 — Guard against stale Leistungen icons when returning upward from Coverage. */
.section.services.is-after-leistungen .leistungen-symbol-row{
  opacity: 0 !important;
  visibility: hidden;
  pointer-events: none;
}

.leistungen-outro{
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: none;
}

.leistungen-shell.is-outro-active .leistungen-outro{
  opacity: 1;
  visibility: visible;
}

.leistungen-outro-divider,
.leistungen-outro-panel{
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--leistungen-outro-panel-center-x);
  transform: translateX(-50%);
}

.leistungen-outro-divider{
  display: none;
}

.leistungen-outro-panel{
  display: none;
}

.leistungen-outro-layout{
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
  z-index: 5;
}

.leistungen-outro-visual{
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  width: min(29vw, 392px);
  min-height: 0;
  padding: clamp(86px, 11vh, 128px) clamp(10px, 1.4vw, 22px) clamp(34px, 5vh, 58px) 0;
  box-sizing: border-box;
  opacity: var(--leistungen-person-progress);
  transform: none;
  transform-origin: 50% 100%;
}

.leistungen-outro-person{
  display: block;
  width: auto;
  max-width: min(100%, 372px);
  height: auto;
  max-height: min(980px, 87vh);
  margin: 0 auto;
  filter: drop-shadow(0 24px 34px rgba(0,0,0,.22));
}

.leistungen-outro-copy{
  position: absolute;
  inset: 0;
  width: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  box-sizing: border-box;
  padding: clamp(106px, 13.5vh, 148px) clamp(28px, 4vw, 56px);
  opacity: var(--leistungen-copy-progress);
  transform: translate3d(clamp(74px, 6.3vw, 118px), calc((1 - var(--leistungen-copy-progress)) * 18px), 0);
  --about-signature-progress: var(--leistungen-signature-progress);
}

.leistungen-outro-copy-inner{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: max-content;
  max-width: min(var(--leistungen-outro-copy-width), calc(100vw - clamp(56px, 8vw, 112px) - clamp(80px, 6.2vw, 126px)));
  margin: 0 auto;
  transform: translate3d(-5vw, 0, 0);
}

.leistungen-outro-title{
  margin: 0 0 calc(clamp(8px, 1.05vh, 13px) * var(--leistungen-copy-fit, 1));
  width: max-content;
  max-width: none;
  font-family: var(--font-display-serif), var(--font-serif);
  font-style: normal !important;
  font-synthesis: none !important;
  font-weight: 400;
  font-size: calc(5.5vw * var(--leistungen-copy-fit, 1));
  line-height: .92;
  letter-spacing: .005em;
  color: #d5e8f0;
}

.leistungen-outro-title-line{
  display: block;
}

.leistungen-outro-title-line.is-gradient{
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: inherit;
  color: inherit;
}

.leistungen-outro-subtitle{
  margin: 0 0 calc(clamp(42px, 5vh, 58px) * var(--leistungen-copy-fit, 1));
  font-family: "Playfair Display", var(--font-display-serif), var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: calc(clamp(25px, min(2.65vw, 4.5vh), 40px) * var(--leistungen-copy-fit, 1));
  line-height: .94;
  letter-spacing: -.012em;
  color: rgba(255,255,255,.98);
}

.leistungen-outro-text{
  max-width: 55ch;
}

.leistungen-outro-text p{
  margin: 0 0 calc(clamp(20px, 2.55vh, 28px) * var(--leistungen-copy-fit, 1));
  font-size: calc(clamp(14.6px, min(1.0vw, 1.82vh), 15.4px) * var(--leistungen-copy-fit, 1));
  line-height: 1.46;
  letter-spacing: .034em;
  color: rgba(255,255,255,.95);
}

.leistungen-outro-text p:last-child{
  margin-bottom: 0;
}

.leistungen-outro-signature{
  position: relative;
  align-self: flex-end;
  margin-top: calc(clamp(24px, 3vh, 36px) * var(--leistungen-copy-fit, 1));
  margin-left: auto;
  width: calc(clamp(168px, min(15vw, 19vh), 248px) * var(--leistungen-copy-fit, 1));
  overflow: hidden;
  opacity: var(--leistungen-signature-opacity);
  transform: translate3d(0, calc((1 - var(--leistungen-signature-opacity)) * 10px), 0);
}

.leistungen-outro-signature::after{
  content: "";
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 42px;
  left: calc((var(--leistungen-signature-progress) * 100%) - 18px);
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.42) 48%, rgba(255,255,255,0));
  opacity: calc(var(--leistungen-signature-opacity) * (1 - var(--leistungen-signature-progress)));
  mix-blend-mode: screen;
  pointer-events: none;
}
/* Shared signature image clipping (also used in Leistungen-Outro) */
.about-hero-signature-img,
.leistungen-outro-signature-img{
  display: block;
  width: 100%;
  height: auto;
  clip-path: inset(0 calc((1 - var(--about-signature-progress, var(--leistungen-signature-progress, 1))) * 100%) 0 0);
  will-change: clip-path;
}

.leistungen-outro-signature-img{
  filter: brightness(0) invert(1);
}




/* v1.187 — Über-mich: Referenzen-Button mit festem oberen Abstand */
.about-references-button{
  --about-ref-btn-width: clamp(234px, 12.7vw, 252px);
  --about-ref-btn-height: calc(var(--about-ref-btn-width) / 4.1212);
  --about-ref-btn-circle-size: calc(var(--about-ref-btn-height) * .82);
  --about-ref-btn-pad-left: calc(var(--about-ref-btn-height) * .62);
  --about-ref-btn-pad-right: calc((var(--about-ref-btn-height) - var(--about-ref-btn-circle-size)) / 2);
  --about-ref-btn-text-gap: calc(var(--about-ref-btn-height) * .34);
  --about-ref-btn-text-size: calc(var(--about-ref-btn-height) * .275);
  position: relative;
  align-self: flex-start;
  display: block;
  width: var(--about-ref-btn-width);
  height: var(--about-ref-btn-height);
  margin-top: calc(35px * var(--leistungen-copy-fit, 1));
  margin-left: 0;
  border-radius: 999px;
  background: #f5f5f5;
  color: #151515;
  text-decoration: none !important;
  isolation: isolate;
  overflow: hidden;
  opacity: var(--leistungen-signature-opacity);
  transform: translate3d(0, calc((1 - var(--leistungen-signature-opacity)) * 10px), 0);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.025);
  pointer-events: none;
}

.about-references-button:visited,
.about-references-button:hover,
.about-references-button:focus,
.about-references-button:focus-visible{
  color: #151515;
  text-decoration: none !important;
}

.leistungen-shell.is-outro-social-visible .about-references-button{
  pointer-events: auto;
}

.about-references-button-text{
  position: absolute;
  left: var(--about-ref-btn-pad-left);
  right: calc(var(--about-ref-btn-circle-size) + var(--about-ref-btn-pad-right) + var(--about-ref-btn-text-gap));
  top: 50%;
  z-index: 1;
  display: block;
  min-width: 0;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
  transform: translate3d(0, -50%, 0);
  font-size: var(--about-ref-btn-text-size);
  line-height: 1;
  font-weight: 400;
  letter-spacing: .01em;
  color: #151515;
  text-decoration: none !important;
}

/* v1.221 — Button-Text bleibt proportional stabil im Button. */
.about-references-button-text{
  max-width: calc(var(--about-ref-btn-width) - var(--about-ref-btn-pad-left) - var(--about-ref-btn-circle-size) - var(--about-ref-btn-pad-right) - var(--about-ref-btn-text-gap));
}

.about-references-button-circle{
  position: absolute;
  right: var(--about-ref-btn-pad-right);
  top: 50%;
  z-index: 1;
  display: block;
  width: var(--about-ref-btn-circle-size);
  height: var(--about-ref-btn-circle-size);
  border-radius: 50%;
  background: #1a1a1a;
  color: #ffffff;
  overflow: hidden;
  transform: translate3d(0, -50%, 0);
}

.about-references-button-arrow{
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  width: 48%;
  height: 48%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: translate3d(-50%, -50%, 0) translateX(0);
  will-change: transform, opacity;
}

.about-references-button-arrow--primary{
  opacity: 1;
}

.about-references-button-arrow--secondary{
  opacity: 0;
  transform: translate3d(-50%, -50%, 0) translateX(-150%);
}

.about-references-button:hover .about-references-button-arrow--primary,
.about-references-button:focus-visible .about-references-button-arrow--primary{
  animation: aboutReferencesArrowOut .68s linear both;
}

.about-references-button:hover .about-references-button-arrow--secondary,
.about-references-button:focus-visible .about-references-button-arrow--secondary{
  animation: aboutReferencesArrowIn .68s linear both;
}

.about-references-button:focus-visible{
  outline: 1px solid rgba(255,255,255,.62);
  outline-offset: 4px;
}

@keyframes aboutReferencesArrowOut{
  0%{
    transform: translate3d(-50%, -50%, 0) translateX(0);
    opacity: 1;
  }
  70%{
    transform: translate3d(-50%, -50%, 0) translateX(150%);
    opacity: 1;
  }
  71%, 100%{
    transform: translate3d(-50%, -50%, 0) translateX(150%);
    opacity: 0;
  }
}

@keyframes aboutReferencesArrowIn{
  0%, 29%{
    transform: translate3d(-50%, -50%, 0) translateX(-150%);
    opacity: 0;
  }
  30%{
    transform: translate3d(-50%, -50%, 0) translateX(-150%);
    opacity: 1;
  }
  100%{
    transform: translate3d(-50%, -50%, 0) translateX(0);
    opacity: 1;
  }
}

.leistungen-outro-social{
  position: absolute;
  right: clamp(34px, 4vw, 64px);
  bottom: clamp(28px, 4.7vh, 58px);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(26px, 2.7vw, 42px);
  padding: 0;
  opacity: var(--leistungen-social-progress);
  transform: translate3d(calc((1 - var(--leistungen-social-progress)) * 20px), calc((1 - var(--leistungen-social-progress)) * 20px), 0);
  pointer-events: none;
  visibility: hidden;
  z-index: 6;
}

.leistungen-shell.is-outro-social-visible .leistungen-outro-social{
  pointer-events: auto;
  visibility: visible;
}

.leistungen-shell.is-outro-finale .leistungen-outro-social{
  pointer-events: auto;
}

.leistungen-shell.is-outro-active .leistungen-outro-visual,
.leistungen-shell.is-outro-active .leistungen-outro-copy,
.leistungen-shell.is-outro-active .leistungen-outro-signature,
.leistungen-shell.is-outro-active .leistungen-outro-social{
  will-change: transform, opacity;
}


.leistungen-outro-social-link{
  display: inline-flex;
  align-items: center;
  gap: clamp(10px, .88vw, 15px);
  text-decoration: none;
  color: #ffffff;
  opacity: .82;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: .015em;
  font-weight: 300;
  margin-top: 0;
  white-space: nowrap;
}

.leistungen-outro-social-link:first-child{
  margin-top: 0;
}

.leistungen-outro-social-link img{
  display: block;
  width: clamp(24px, 1.72vw, 34px);
  height: auto;
  opacity: .82;
}

.leistungen-outro-social-link:hover,
.leistungen-outro-social-link:focus,
.leistungen-outro-social-link:focus-visible{
  text-decoration: none;
  opacity: .96;
}

.leistungen-outro-social-link:hover img,
.leistungen-outro-social-link:focus img,
.leistungen-outro-social-link:focus-visible img{
  opacity: .96;
}

.section.services > .section-pin > .leistungen-outro-marquee{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
  mix-blend-mode: overlay;
}

.leistungen-outro-title[data-headline-fx]{
  mix-blend-mode: normal;
}

[data-headline-fx] .leistungen-outro-title-line{
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: inherit;
  color: inherit;
}

.leistungen-outro-marquee-track{
  display: flex;
  align-items: center;
  width: max-content;
  min-width: 0;
  gap: 0;
  opacity: var(--leistungen-marquee-opacity);
  animation: leistungenOutroMarquee var(--leistungen-marquee-duration, 36s) linear infinite;
  animation-play-state: paused;
  will-change: transform, opacity;
}

.section.services.is-outro-marquee-active .leistungen-outro-marquee-track{
  animation-play-state: running;
}

.leistungen-outro-marquee-symbol{
  --leistungen-marquee-slot: min(var(--leistungen-outro-symbol-size), 34vh);
  flex: 0 0 var(--leistungen-marquee-slot);
  width: var(--leistungen-marquee-slot);
  height: var(--leistungen-marquee-slot);
  display: grid;
  place-items: center;
  color: rgba(246,250,255,.96);
}

.leistungen-outro-marquee-symbol .leistungen-symbol-svg{
  width: 100%;
  height: 100%;
  max-height: none;
  display: block;
}

@keyframes leistungenOutroMarquee{
  from{ transform: translate3d(0, 0, 0); }
  to{ transform: translate3d(calc(-1 * var(--leistungen-marquee-cycle-width, 50%)), 0, 0); }
}

@media (max-width:900.98px){
  .leistungen-shell{
    --leistungen-outro-panel-width: min(74.8vw, 544px);
    --leistungen-outro-copy-width: min(44rem, calc(100vw - clamp(56px, 7vw, 96px)));
  }

  .leistungen-outro-layout{
    display: block;
  }

  .leistungen-outro-visual{
    width: min(24vw, 260px);
    padding: clamp(74px, 11vh, 104px) 10px clamp(24px, 4vh, 42px) 0;
  }

  .leistungen-outro-person{
    max-width: min(100%, 240px);
    max-height: min(1300px, 85vh);
  }

  .leistungen-outro-copy{
    align-items: center;
    padding: clamp(90px, 12vh, 118px) clamp(28px, 4vw, 40px);
    transform: translate3d(clamp(42px, 4vw, 72px), calc((1 - var(--leistungen-copy-progress)) * 18px), 0);
  }

  .leistungen-outro-copy-inner{
    max-width: min(var(--leistungen-outro-copy-width), calc(100vw - clamp(56px, 9vw, 96px) - clamp(44px, 4vw, 74px)));
  }

  .leistungen-outro-title{
    font-size: calc(clamp(42px, min(6.4vw, 7.45vh), 62px) * var(--leistungen-copy-fit, 1));
    max-width: none;
  }

  .leistungen-outro-subtitle{
    font-size: calc(clamp(23px, min(3.5vw, 4.35vh), 34px) * var(--leistungen-copy-fit, 1));
    margin-bottom: calc(clamp(24px, 3vh, 34px) * var(--leistungen-copy-fit, 1));
  }

  .leistungen-outro-signature{
    margin-left: auto;
  }

  .leistungen-outro-social{
    right: clamp(22px, 3vw, 34px);
    bottom: clamp(22px, 4.2vh, 36px);
    gap: clamp(18px, 2vw, 28px);
  }

  .leistungen-outro-social-link{
    font-size: 14px;
    gap: 8px;
  }

  .leistungen-outro-social-link img{
    width: clamp(17px, 3.36vw, 24px);
  }

  .leistungen-outro-marquee{
    height: clamp(102px, 16vw, 164px);
  }

  .leistungen-outro-marquee-symbol{
    --leistungen-marquee-slot: calc((100vw - var(--viewport-scrollbar, 0px)) / 5.6);
  }

  .leistungen-outro-marquee-symbol .leistungen-symbol-svg{
    width: clamp(88px, 13vw, 142px);
    max-height: min(100%, 142px);
  }
}

@media (max-width: 720px){
  .leistungen-shell{
    --leistungen-outro-panel-width: min(74.8vw, 527px);
    --leistungen-outro-copy-width: min(33rem, calc(100vw - clamp(32px, 9vw, 48px)));
  }

  .leistungen-outro-layout{
    grid-template-columns: 1fr;
  }

  .leistungen-outro-visual{
    position: absolute;
    left: 0;
    top: 0;
    bottom: auto;
    width: min(44vw, 220px);
    padding: clamp(82px, 12vh, 104px) 0 clamp(24px, 4vh, 32px) 8px;
  }

  .leistungen-outro-person{
    width: auto;
    max-width: 100%;
    max-height: min(1300px, 85vh);
  }

  .leistungen-outro-copy{
    position: absolute;
    inset: 0;
    width: auto;
    align-items: center;
    justify-content: center;
    padding: clamp(102px, 14vh, 124px) clamp(18px, 4.8vw, 24px);
    transform: translate3d(0, calc((1 - var(--leistungen-copy-progress)) * 18px), 0);
  }

  .leistungen-outro-copy-inner{
    width: 100%;
    max-width: min(var(--leistungen-outro-copy-width), calc(100vw - clamp(32px, 9vw, 48px)));
  }

  .leistungen-outro-title{
    width: 100%;
    font-size: calc(clamp(38px, 9vw, 56px) * var(--leistungen-copy-fit, 1));
  }

  .leistungen-outro-subtitle{
    font-size: calc(clamp(22px, 5.1vw, 30px) * var(--leistungen-copy-fit, 1));
    margin-bottom: calc(clamp(22px, 3.2vh, 28px) * var(--leistungen-copy-fit, 1));
  }

  .leistungen-outro-text{
    max-width: 36.9ch;
  }

  .leistungen-outro-text p{
    font-size: calc(clamp(15px, 4vw, 16px) * var(--leistungen-copy-fit, 1));
    margin-bottom: calc(clamp(16px, 2.5vh, 24px) * var(--leistungen-copy-fit, 1));
    line-height: 1.5;
    letter-spacing: .04em;
  }

  .leistungen-outro-signature{
    margin-left: auto;
    width: calc(clamp(144px, 36vw, 194px) * var(--leistungen-copy-fit, 1));
  }

  .leistungen-outro-social{
    right: clamp(16px, 4.5vw, 24px);
    bottom: clamp(18px, 3.8vh, 28px);
    gap: clamp(14px, 4vw, 24px);
  }

  .leistungen-outro-marquee{
    height: clamp(86px, 18vw, 132px);
  }

  .leistungen-outro-marquee-symbol{
    --leistungen-marquee-slot: calc((100vw - var(--viewport-scrollbar, 0px)) / 4.8);
  }

  .leistungen-outro-marquee-symbol .leistungen-symbol-svg{
    width: clamp(72px, 14vw, 112px);
    max-height: min(100%, 112px);
  }
}

@media (max-width:900.98px){
  .leistungen-shell{
    gap: clamp(18px, 3.2vh, 30px);
    padding: clamp(52px, 9vh, 88px) 0 clamp(30px, 6vh, 54px);
  }

  .leistungen-stage{min-height: clamp(430px, 60vh, 660px);}

  .leistungen-slide-inner{
    flex-direction:column;
    align-items:flex-start;
    gap: clamp(18px, 3.8vh, 32px);
    width:min(92vw, 620px);
    min-width:min(92vw, 620px);
    height:auto;
    min-height:0;
    top:auto;
    transform:none;
  }

  .leistungen-slide-head,
  .leistungen-slide-copy{
    margin-top: 0;
    transform:none;
  }

  .leistungen-headline{
    width:min(76vw, 460px);
    max-width:460px;
    font-size: clamp(36px, 8.2vw, 58px);
  }

  .leistungen-text{
    width:min(82vw, 370px);
    max-width:370px;
  }

  .leistungen-symbol-row{
    padding: 0 var(--leistungen-edge-gutter);
    gap: 4px;
  }

  .leistungen-symbol{
    width: clamp(40px, 11vw, 72px);
    height: clamp(40px, 11vw, 72px);
  }
}





/* --- v1.107: premium contact section + simplified copyright footer --- */
.footer{
  padding: 18px 0 22px;
  background:#06233e;
  border-top: 1px solid rgba(255,255,255,.08);
}
.footer-inner{
  max-width:none;
  justify-content:center;
  text-align:center;
  padding:0 22px;
}
.footer-copy{
  width:100%;
  color:rgba(255,255,255,.58);
  font-size:13px;
  letter-spacing:.04em;
}

.section.contact.contact-v107{
  min-height:200vh;
  overflow:visible;
}
.section.contact.contact-v107 > .section-pin.contact-pin{
  position:sticky;
  top:0;
  min-height:100vh;
  height:100vh;
  padding:0;
  justify-content:flex-start;
  overflow:hidden;
  background:
    radial-gradient(780px 520px at 17% 17%, rgba(86,142,213,.56), transparent 67%),
    radial-gradient(950px 620px at 78% 40%, rgba(31,93,126,.22), transparent 70%),
    linear-gradient(112deg, #064785 0%, #073e73 27%, #083251 57%, #062238 100%) !important;
}
.contact-v107 .section-reactive-bg{opacity:.16;}
.contact-wave{
  position:absolute;
  z-index:1;
  right:-3.8vw;
  bottom:25.8vh;
  width:min(74vw, 1360px);
  max-width:none;
  display:block;
  opacity:.18;
  mix-blend-mode:normal;
  filter:none;
  transform:none;
  pointer-events:none;
  user-select:none;
}
.contact-main{
  position:relative;
  z-index:2;
  width:100%;
  height:72.3vh;
  min-height:620px;
  display:grid;
  grid-template-columns: 44.2% 55.8%;
  padding:0 clamp(38px, 8.85vw, 172px);
}
.contact-brand--top{
  position:absolute;
  left:clamp(22px, 1.8vw, 34px);
  top:clamp(22px, 2.65vh, 34px);
  width:clamp(140px, 11.4vw, 194px);
  opacity:.96;
}
.contact-brand img,
.contact-footer-logo img{display:block;width:100%;height:auto;}
.contact-left{
  align-self:center;
  transform:translateY(1.8vh);
}
.contact-title{
  margin:0;
  max-width:620px;
  padding-right:clamp(12px, 1.4vw, 28px);
  font-family:var(--font-display-serif), var(--font-serif);
  font-style:normal !important;
  font-weight:400;
  font-size:clamp(54px, min(5.25vw, 9vh), 88px);
  line-height:.96;
  letter-spacing:-.028em;
  color:rgba(183,202,246,.72);
}
.contact-direct{
  margin-top:clamp(30px, 4.2vh, 52px);
  font-style:normal;
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:clamp(16px, 1.22vw, 21px);
  line-height:1.5;
}
.contact-direct a{color:rgba(225,235,250,.86);text-decoration:none;}
.contact-direct a:hover{color:#fff;text-decoration:none;}
.contact-social{
  margin-top:clamp(26px, 4.3vh, 46px);
  display:flex;
  gap:18px;
}
.contact-social-icon{
  width:clamp(38px, 3vw, 48px);
  height:clamp(38px, 3vw, 48px);
  display:block;
  text-decoration:none;
  transition:opacity .2s ease, transform .2s ease;
}
.contact-social-icon:hover{opacity:.86;transform:translateY(-1px);text-decoration:none;}
.contact-social-icon img{width:100%;height:100%;display:block;}
.contact-right{
  align-self:center;
  justify-self:end;
  width:min(100%, 590px);
  transform:translateY(1.5vh);
}
.contact-form-v107{width:100%;margin:0;color:rgba(231,239,250,.82);}
.contact-form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px;
  margin-bottom:36px;
}
.contact-field{
  display:flex;
  flex-direction:column;
  gap:26px;
  margin:0;
  color:rgba(226,236,248,.76);
  text-transform:uppercase;
  font-size:clamp(12px, .82vw, 15px);
  font-weight: 500;
  line-height:1;
  letter-spacing:.18em;
}
.contact-field span{display:block;}
.contact-input-wrap{position:relative;display:block;}
.contact-hover-placeholder{
  position:absolute;
  left:0;
  top:0;
  z-index:0;
  display:block;
  width:100%;
  color:rgba(232,240,250,.75);
  font:500 16px/1.35 var(--font-sans);
  letter-spacing:0;
  text-transform:none;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  opacity:0;
  transform:translateY(4px);
  transition:opacity .84s ease, transform .84s cubic-bezier(.22,1,.36,1);
  pointer-events:none;
}
.contact-field input,
.contact-field textarea,
.theme-dark .contact-field input,
.theme-dark .contact-field textarea{
  appearance:none;
  width:100%;
  border:0;
  border-radius:0;
  border-bottom:1px solid rgba(229,238,248,.77);
  background:transparent;
  box-shadow:none;
  outline:none;
  padding:0 0 11px;
  min-height:28px;
  color:#fff;
  font:500 16px/1.35 var(--font-sans);
  position:relative;
  z-index:1;
}
.contact-field input::placeholder,
.contact-field textarea::placeholder,
.theme-dark .contact-field input::placeholder,
.theme-dark .contact-field textarea::placeholder{color:transparent;}
.contact-field input:hover:placeholder-shown + .contact-hover-placeholder,
.contact-field input:focus:placeholder-shown + .contact-hover-placeholder,
.contact-field textarea:hover:placeholder-shown + .contact-hover-placeholder,
.contact-field textarea:focus:placeholder-shown + .contact-hover-placeholder{
  opacity:.75;
  transform:translateY(0);
}
.contact-field textarea,
.theme-dark .contact-field textarea{
  min-height:28px;
  height:28px;
  max-height:116px;
  resize:none;
  overflow:hidden;
}
.contact-field--message{gap:26px;margin-bottom:24px;}
.contact-note{
  margin:0 0 24px;
  max-width:590px;
  color:rgba(231,239,250,.82);
  font-size:clamp(13px, .94vw, 16px);
  line-height:1.38;
  font-weight: 500;
}
.contact-consent{
  display:flex;
  align-items:center;
  gap:12px;
  margin:0 0 32px;
  color:rgba(231,239,250,.86);
  font-size:clamp(13px, .94vw, 16px);
  font-weight: 500;
  line-height:1.3;
  text-transform:none;
  letter-spacing:0;
}
.contact-consent input,
.theme-dark .contact-consent input{
  appearance:none;
  width:23px;
  height:23px;
  flex:0 0 23px;
  border:2px solid rgba(223,237,250,.82);
  border-radius:5px;
  background:rgba(255,255,255,.03);
  padding:0;
}
.contact-consent input:checked{background:rgba(223,237,250,.86);box-shadow:inset 0 0 0 5px #0a3558;}
.contact-submit{
  border:0;
  border-radius:6px;
  background:rgba(232,239,247,.92);
  color:#244563;
  padding:13px 23px 12px;
  min-width:178px;
  font:500 14px/1 var(--font-sans);
  letter-spacing:.12em;
  text-transform:uppercase;
  cursor:pointer;
  box-shadow:0 8px 22px rgba(0,0,0,.08);
}
.contact-submit:hover{background:#fff;}
.contact-footer-band{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:3;
  min-height:27.7vh;
  background:linear-gradient(115deg, #073a69 0%, #062f55 43%, #051d33 100%);
  border-top:1px solid rgba(225,238,250,.22);
  display:flex;
  align-items:center;
}
.contact-footer-inner{
  width:100%;
  display:grid;
  grid-template-columns: 1.15fr .55fr .55fr 1fr;
  gap:clamp(46px, 6vw, 118px);
  align-items:start;
  padding:clamp(28px, 5.5vh, 62px) clamp(38px, 8.85vw, 172px) clamp(22px, 4vh, 48px);
  color:rgba(223,235,248,.78);
}
.contact-footer-col h3{
  margin:0 0 24px;
  font-size:clamp(11.9px, .85vw, 16.15px);
  line-height:1;
  font-weight: 600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(232,241,252,.86);
}
.contact-footer-col p,
.contact-footer-col a{
  display:block;
  margin:0 0 9px;
  color:rgba(223,235,248,.78);
  font-size:clamp(12.75px, .98vw, 17.85px);
  line-height:1.24;
  letter-spacing:.08em;
  text-decoration:none;
}
.contact-footer-col a:hover{color:#fff;text-decoration:none;}
.contact-footer-col--about{margin-left:-3vw;}
.contact-footer-col--legal h3,
.contact-footer-col--legal a{white-space:nowrap;}
.contact-footer-col--legal h3{
  font-size:clamp(11px, .8vw, 15px);
  letter-spacing:.15em;
}
.contact-footer-col--legal a{
  font-size:clamp(12px, .92vw, 16.2px);
  letter-spacing:.04em;
}
.contact-footer-logo{
  justify-self:end;
  align-self:end;
  width:clamp(180px, 15vw, 270px);
  opacity:.92;
  margin-top:8.4vh;
}

@media (max-width:900.98px){
  .section.contact.contact-v107 > .section-pin.contact-pin{height:auto;min-height:100vh;position:relative;overflow:hidden;}
  .contact-main{height:auto;min-height:0;grid-template-columns:1fr;padding:96px 28px 40px;gap:36px;}
  .contact-left,.contact-right{transform:none;justify-self:stretch;width:100%;}
  .contact-title{font-size:clamp(48px, 13vw, 70px);padding-right:clamp(10px, 4vw, 18px);}
  .contact-form-grid{grid-template-columns:1fr;gap:30px;}
  .contact-wave{width:132vw;right:-55vw;bottom:290px;opacity:.14;}
  .contact-footer-band{position:relative;min-height:0;}
  .contact-footer-inner{grid-template-columns:1fr 1fr;padding:34px 28px;gap:30px;}
  .contact-footer-col--about{margin-left:0;}
  .contact-footer-col--legal h3,
  .contact-footer-col--legal a{white-space:normal;}
  .contact-footer-logo{justify-self:start;margin-top:10px;}
}
@media (max-width: 560px){
  .contact-footer-inner{grid-template-columns:1fr;}
  .contact-social-icon{width:42px;height:42px;}
}

/* v1.120 — coverage layout refinement to match reference */
.coverage-layout.container{
  max-width:min(1400px, calc(100vw - 64px));
  margin:0 auto;
  padding:0;
}

.coverage-title{
  left:7.25%;
  top:42.857%;
  width:min(38vw, 660px);
  text-align:right;
  transform:translateY(-50%);
}

.coverage-item{
  transform:none !important;
}

.coverage-item p{
  transform:none !important;
}

.coverage-item:nth-child(1){
  left:58.8%;
  top:12.5%;
  width:min(23vw, 350px);
}

.coverage-item:nth-child(2){
  left:28.5%;
  top:66%;
  width:min(24vw, 360px);
}

.coverage-item:nth-child(3){
  left:72.2%;
  top:52.5%;
  width:min(21vw, 330px);
}

@media (max-width: 1280px){
  .coverage-layout.container{
    max-width:min(1240px, calc(100vw - 52px));
  }

  .coverage-title{
    left:8%;
    width:min(40vw, 560px);
  }

  .coverage-item:nth-child(1){
    left:58.2%;
    top:13%;
    width:min(24vw, 320px);
  }

  .coverage-item:nth-child(2){
    left:27.8%;
    top:66.5%;
    width:min(25vw, 340px);
  }

  .coverage-item:nth-child(3){
    left:70.8%;
    top:53.5%;
    width:min(22.5vw, 310px);
  }
}

@media (max-width: 1080px){
  .coverage-layout.container{
    max-width:min(1020px, calc(100vw - 40px));
  }

  .coverage-title{
    left:8.5%;
    width:min(42vw, 430px);
    font-size:clamp(42px, 4.6vw, 58px);
  }

  .coverage-item:nth-child(1){
    left:55.8%;
    top:14%;
    width:min(27vw, 250px);
  }

  .coverage-item:nth-child(2){
    left:25.8%;
    top:66%;
    width:min(28vw, 270px);
  }

  .coverage-item:nth-child(3){
    left:68.2%;
    top:53%;
    width:min(25vw, 240px);
  }
}

@media (max-width:900.98px){
  .coverage-title{
    text-align:left;
    transform:none;
  }
}

/* v1.121 — Coverage vertical text-slider with icon placeholders */
.section.coverage:not(.hero):not(.story){
  min-height: 440vh;
}

.section.coverage > .section-pin{
  min-height:100vh;
  justify-content:center;
  padding-top:0;
  overflow:hidden;
  overflow:clip;
}

.coverage-layout.container{
  position:relative;
  z-index:1;
  width:100%;
  max-width:none;
  min-height:100vh;
  height:100vh;
  margin:0;
  padding:0;
}

.coverage-title{
  left:9.8%;
  top:47.9%;
  width:min(38.5vw, 670px);
  max-width:670px;
  margin:0;
  transform:translateY(-50%);
  text-align:center;
  font-size:clamp(56px, 5.05vw, 82px);
  line-height:.90;
  letter-spacing:.002em;
}

.coverage-copy{
  position:absolute;
  inset:0;
  overflow:visible;
  pointer-events:none;
}

.coverage-copy-inner{
  position:relative;
  width:100%;
  height:100%;
  min-height:100%;
}

.coverage-item{
  --coverage-item-opacity:1;
  --coverage-item-y:0px;
  --coverage-body-opacity:1;
  --coverage-body-y:0px;
  --coverage-dot-size:clamp(62px, 5.08vw, 80px);
  --coverage-item-gap:clamp(26px, 2vw, 34px);
  position:absolute;
  left:54.8% !important;
  width:min(42.4vw, 650px) !important;
  display:grid;
  grid-template-columns:var(--coverage-dot-size) minmax(0, 1fr);
  column-gap:var(--coverage-item-gap);
  align-items:start;
  color:#192b4a;
  opacity:var(--coverage-item-opacity) !important;
  transform:translate3d(0, var(--coverage-item-y), 0) !important;
  will-change:transform, opacity;
}

.coverage-item:nth-child(1){top:33.3%;}
.coverage-item:nth-child(2){top:44.55%;}
.coverage-item:nth-child(3){top:55.65%;}

.coverage-icon-placeholder{
  display:block;
  width:var(--coverage-dot-size);
  height:var(--coverage-dot-size);
  border-radius:50%;
  background:
    radial-gradient(circle at 62% 34%, rgba(68, 103, 166, .98) 0%, rgba(50, 83, 150, 1) 56%, rgba(36, 66, 124, 1) 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.34) inset;
  transform:translateZ(0);
}

.coverage-item-copy{
  width:min(28.5vw, 430px);
  max-width:100%;
}

.coverage-item-title{
  margin:0 0 clamp(18px, 1.9vh, 23px);
  padding-top:clamp(1px, .35vw, 5px);
  width:min(22vw, 340px);
  color:#304f89;
  font-family:var(--font-display-serif), var(--font-serif);
  font-size:clamp(31px, 2.6vw, 42px);
  line-height:.96;
  font-weight:400;
  letter-spacing:.01em;
  text-transform:uppercase;
}

.coverage-item p{
  margin:0;
  width:min(27.5vw, 410px);
  max-width:100%;
  color:#05070b;
  font-size:clamp(17px, 1.35vw, 22px);
  line-height:1.42;
  font-weight:400;
  letter-spacing:.115em;
  text-wrap:pretty;
  opacity:var(--coverage-body-opacity) !important;
  transform:translate3d(0, var(--coverage-body-y), 0) !important;
  will-change:transform, opacity;
}

@media (max-width: 1280px){
  .coverage-title{
    left:8.2%;
    width:min(40vw, 560px);
    font-size:clamp(50px, 5vw, 72px);
  }
  .coverage-item{
    left:54.2% !important;
    width:min(44vw, 560px) !important;
    --coverage-dot-size:clamp(58px, 5.5vw, 72px);
    --coverage-item-gap:clamp(22px, 2vw, 30px);
  }
  .coverage-item-title{
    width:min(24vw, 310px);
    font-size:clamp(29px, 2.7vw, 38px);
  }
  .coverage-item p{
    width:min(31vw, 380px);
    font-size:clamp(16px, 1.42vw, 19px);
    line-height:1.42;
  }
}

@media (max-width: 1080px){
  .section.coverage:not(.hero):not(.story){
    min-height: 460vh;
  }
  .coverage-title{
    left:7%;
    width:min(42vw, 465px);
    font-size:clamp(42px, 4.8vw, 58px);
  }
  .coverage-item{
    left:52.5% !important;
    width:min(46vw, 500px) !important;
    --coverage-dot-size:clamp(52px, 5.8vw, 64px);
    --coverage-item-gap:clamp(18px, 2vw, 24px);
  }
  .coverage-item-title{
    width:min(27vw, 270px);
    font-size:clamp(26px, 2.9vw, 34px);
  }
  .coverage-item p{
    width:min(34vw, 340px);
    font-size:clamp(15px, 1.48vw, 17px);
    letter-spacing:.08em;
  }
}

@media (max-width:900.98px){
  .section.coverage > .section-pin{
    justify-content:flex-start;
    padding-top:0;
  }
  .coverage-layout.container{
    width:100%;
    min-height:100vh;
    height:100vh;
  }
  .coverage-title{
    position:absolute;
    left:24px;
    top:12vh;
    width:calc(100vw - 48px);
    max-width:640px;
    transform:none;
    text-align:left;
    font-size:clamp(36px, 8.2vw, 58px);
    line-height:.92;
  }
  .coverage-copy{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    margin:0;
    max-width:none;
  }
  .coverage-item{
    left:24px !important;
    width:calc(100vw - 48px) !important;
    grid-template-columns:var(--coverage-dot-size) minmax(0, 1fr);
    --coverage-dot-size:clamp(44px, 10vw, 58px);
    --coverage-item-gap:clamp(14px, 4vw, 22px);
  }
  .coverage-item:nth-child(1){top:38%;}
  .coverage-item:nth-child(2){top:54%;}
  .coverage-item:nth-child(3){top:70%;}
  .coverage-item-copy,
  .coverage-item-title,
  .coverage-item p{
    width:100%;
    max-width:420px;
  }
  .coverage-item-title{
    font-size:clamp(24px, 6.4vw, 34px);
    line-height:.98;
    margin-bottom:14px;
  }
  .coverage-item p{
    font-size:clamp(14px, 3.4vw, 16px);
    line-height:1.38;
    letter-spacing:.05em;
  }
}

@media (max-width: 560px){
  .coverage-title{
    left:18px;
    width:calc(100vw - 36px);
  }
  .coverage-item{
    left:18px !important;
    width:calc((100vw - 36px) * .85) !important;
    --coverage-dot-size:42px;
    --coverage-item-gap:14px;
  }
  .coverage-item-title{
    font-size:clamp(22px, 7vw, 29px);
  }
  .coverage-item p{
    font-size:14px;
    line-height:1.34;
    letter-spacing:.035em;
  }
}

@media (prefers-reduced-motion: reduce){
  .coverage-item,
  .coverage-item p{
    will-change:auto;
  }
}

/* v1.122 — Coverage slider containment fix
   Keep all scroll-driven coverage items inside one fixed right-hand stage so
   incoming steps can never drift over the large left headline. */
.section.coverage:not(.hero):not(.story){
  min-height:440vh;
}

.coverage-layout.container{
  position:relative;
  width:100%;
  max-width:none;
  min-height:100vh;
  height:100vh;
  margin:0;
  padding:0;
}

.coverage-title{
  position:absolute;
  left:9.8%;
  top:47.9%;
  width:min(38.5vw, 670px);
  max-width:670px;
  margin:0;
  transform:translateY(-50%);
  text-align:center;
  z-index:3;
}

.coverage-copy{
  position:absolute;
  left:54.6%;
  right:5.6%;
  top:0;
  bottom:0;
  width:auto;
  height:auto;
  max-width:none;
  margin:0;
  overflow:hidden;
  overflow:clip;
  pointer-events:none;
  z-index:2;
  contain:paint;
}

.coverage-copy-inner{
  position:relative;
  width:100%;
  height:100%;
  min-height:100%;
}

.coverage-item,
.coverage-item:nth-child(1),
.coverage-item:nth-child(2),
.coverage-item:nth-child(3){
  left:0 !important;
  right:0 !important;
  width:100% !important;
  max-width:none !important;
}

.coverage-item:nth-child(1){top:33.3% !important;}
.coverage-item:nth-child(2){top:44.55% !important;}
.coverage-item:nth-child(3){top:55.65% !important;}

.coverage-item-copy{
  width:min(28.5vw, 430px);
  max-width:calc(100% - var(--coverage-dot-size) - var(--coverage-item-gap));
}

.coverage-item-title{
  width:min(22vw, 340px);
  max-width:100%;
}

.coverage-item p{
  width:min(27.5vw, 410px);
  max-width:100%;
}

@media (max-width: 1280px){
  .coverage-title{
    left:8.2%;
    width:min(40vw, 560px);
  }
  .coverage-copy{
    left:53.8%;
    right:4.2%;
  }
  .coverage-item-copy{
    width:min(31vw, 380px);
  }
  .coverage-item-title{
    width:min(24vw, 310px);
  }
  .coverage-item p{
    width:min(31vw, 380px);
  }
}

@media (max-width: 1080px){
  .section.coverage:not(.hero):not(.story){
    min-height:460vh;
  }
  .coverage-title{
    left:7%;
    width:min(42vw, 465px);
  }
  .coverage-copy{
    left:52%;
    right:3.2%;
  }
  .coverage-item-copy{
    width:min(34vw, 340px);
  }
  .coverage-item-title{
    width:min(27vw, 270px);
  }
  .coverage-item p{
    width:min(34vw, 340px);
  }
}

@media (max-width:900.98px){
  .coverage-title{
    left:24px;
    top:12vh;
    width:calc(100vw - 48px);
    max-width:640px;
    transform:none;
    text-align:left;
  }
  .coverage-copy{
    left:24px;
    right:24px;
    top:0;
    bottom:0;
    overflow:hidden;
    overflow:clip;
  }
  .coverage-item,
  .coverage-item:nth-child(1),
  .coverage-item:nth-child(2),
  .coverage-item:nth-child(3){
    left:0 !important;
    right:0 !important;
    width:100% !important;
  }
  .coverage-item:nth-child(1){top:38% !important;}
  .coverage-item:nth-child(2){top:54% !important;}
  .coverage-item:nth-child(3){top:70% !important;}
  .coverage-item-copy,
  .coverage-item-title,
  .coverage-item p{
    width:100%;
    max-width:420px;
  }
}

@media (max-width: 560px){
  .coverage-title{
    left:18px;
    width:calc(100vw - 36px);
  }
  .coverage-copy{
    left:18px;
    right:18px;
  }
}

/* v1.123 — Coverage fine tuning */
@media (min-width: 901px){
  .coverage-title{
    text-align:right;
  }
}

.coverage-item p{
  font-size:14px;
  line-height:1.35;
  font-weight:500;
  letter-spacing:.02em;
}

@media (max-width:900.98px){
  .coverage-item p{
    font-size:14px;
    line-height:1.35;
    font-weight:500;
    letter-spacing:.02em;
  }
}

/* --- v1.124: Hero premium headline layout --- */
.hero .hero-content{
  width: 100%;
  z-index: 2;
}

.hero-copy{
  width: min(100%, 74rem);
  margin: 0 auto;
  text-align: center;
  transform: translateY(clamp(-64px, -5vh, -32px));
}

.hero-title{
  width: max-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  font-size: clamp(4.6rem, 6.55vw, 8.55rem);
  line-height: .79;
  letter-spacing: -.035em;
  text-transform: none;
  text-align: center;
}

.hero-title__line{
  display: block;
  white-space: nowrap;
}

.hero-title__line--one{
  transform: translateX(clamp(-70px, -3.15vw, -30px));
}

.hero-title__line--two{
  transform: translateX(clamp(26px, 2.35vw, 56px));
}

.hero-subtitle{
  width: max-content;
  max-width: min(100%, 34rem);
  margin: clamp(18px, 2.05vh, 28px) auto 0;
  transform: translateX(clamp(34px, 6.6vw, 138px));
  color: rgba(255,255,255,.95);
  font-size: clamp(1.28rem, 1.52vw, 2.22rem);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -.025em;
  text-align: right;
  text-wrap: balance;
}

.hero-subtitle__line{
  display: block;
  white-space: nowrap;
}

html[lang="pl"] .hero-title{
  font-size: clamp(4.1rem, 5.9vw, 7.85rem);
  letter-spacing: -.04em;
}

html[lang="pl"] .hero-subtitle{
  font-size: clamp(1.18rem, 1.38vw, 2rem);
}

@media (max-width:900.98px){
  .hero-copy{
    transform: translateY(clamp(-42px, -4vh, -22px));
  }

  .hero-title{
    font-size: clamp(3.5rem, 12vw, 6rem);
    line-height: .82;
  }

  html[lang="pl"] .hero-title{
    font-size: clamp(3rem, 10.5vw, 5.2rem);
  }

  .hero-title__line--one{
    transform: translateX(clamp(-32px, -4vw, -14px));
  }

  .hero-title__line--two{
    transform: translateX(clamp(14px, 3.5vw, 34px));
  }

  .hero-subtitle{
    margin-top: 16px;
    transform: translateX(clamp(10px, 5vw, 38px));
    font-size: clamp(1.08rem, 3.2vw, 1.55rem);
  }
}

@media (max-width: 560px){
  .hero-copy{
    transform: translateY(-3vh);
  }

  .hero-title,
  html[lang="pl"] .hero-title{
    width: 100%;
    font-size: clamp(2.42rem, 11.4vw, 3.7rem);
    line-height: .86;
    letter-spacing: -.04em;
  }

  .hero-title__line--one,
  .hero-title__line--two{
    transform: none;
  }

  .hero-subtitle,
  html[lang="pl"] .hero-subtitle{
    max-width: 100%;
    transform: none;
    font-size: clamp(1rem, 4.35vw, 1.32rem);
    text-align: center;
  }
}

/* --- v1.126: Hero headline uses the shared Leistungen headline effect; reduce scale by 10%. --- */
.hero-title{
  font-size: clamp(6.62rem, 9.43vw, 12.31rem);
}

html[lang="pl"] .hero-title{
  font-size: clamp(5.90rem, 8.50vw, 11.30rem);
}

@media (max-width:900.98px){
  .hero-title{
    font-size: clamp(5.04rem, 17.28vw, 8.64rem);
  }

  html[lang="pl"] .hero-title{
    font-size: clamp(4.32rem, 15.12vw, 7.49rem);
  }
}

@media (max-width: 560px){
  .hero-title,
  html[lang="pl"] .hero-title{
    font-size: clamp(3.48rem, 16.42vw, 5.33rem);
  }
}

/* --- v1.127: Hero headline calibration.
   Keep the shared Leistungen headline effect, but make the two Hero line spans
   participate in that same clipped-text effect instead of rendering only the
   fallback shadow. No extra gradients, shadows, filters or animations are added. */
.hero-title[data-headline-fx]{
  color: #d5e8f0;
}

@supports ((-webkit-background-clip:text) or (background-clip:text)) {
  .hero-title[data-headline-fx]{
    background-position:
      calc(-1 * var(--headline-view-x, 0px) + clamp(260px, 24vw, 430px))
      calc(-1 * var(--headline-view-y, 0px) + clamp(140px, 18vh, 220px));
  }

  .hero-title[data-headline-fx] .hero-title__line{
    background-image: inherit;
    background-size: inherit;
    background-position: inherit;
    background-repeat: inherit;
    background-origin: inherit;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}

/* --- v1.128: Hero headline clip stability.
   Keep the shared headline-fx artwork, but render the two-line Hero title as one
   clipped text canvas. This gives descenders (e.g. the g in Pflege) enough room
   and keeps the visible light field locked to the Hero title while scrolling. */
.hero-title[data-headline-fx]{
  line-height: .83;
  padding-top: .12em;
  padding-bottom: .20em;
  margin-top: -.12em;
  margin-bottom: -.20em;
}

.hero-title[data-headline-fx] .hero-title__line{
  line-height: .83;
  padding-bottom: .08em;
  margin-bottom: -.08em;
  overflow: visible;
}

@supports ((-webkit-background-clip:text) or (background-clip:text)) {
  .hero-title[data-headline-fx]{
    background-position:
      clamp(-132px, -4.6vw, -54px)
      clamp(-116px, -6.4vh, -58px);
    background-size: 100vw 100vh;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }

  .hero-title[data-headline-fx] .hero-title__line{
    background-image: none;
    background-size: auto;
    background-position: 0 0;
    background-repeat: repeat;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-text-fill-color: inherit;
    color: inherit;
  }
}

/* --- v1.129: Hero headline layer restoration + stable clipped lines.
   Cause of the v1.128 regression: the Hero title was converted to one parent
   clip canvas while its line spans no longer carried the clipped text artwork.
   In Chromium this can leave only a very dark fallback impression. Keep the
   lightweight shared headline-fx artwork, but clip it again on each visible
   line, with enough vertical breathing room for descenders and accents in DE,
   EN and PL. The Hero position is locked so the text does not scroll out of
   its calibrated light field. */
.hero-title[data-headline-fx]{
  line-height: .83;
  padding-top: .14em;
  padding-bottom: .26em;
  margin-top: -.14em;
  margin-bottom: -.26em;
  color: #d5e8f0;
  overflow: visible;
}

.hero-title[data-headline-fx] .hero-title__line{
  line-height: .83;
  padding-top: .055em;
  padding-bottom: .18em;
  margin-top: -.055em;
  margin-bottom: -.18em;
  overflow: visible;
}

@supports ((-webkit-background-clip:text) or (background-clip:text)) {
  .hero-title[data-headline-fx]{
    /* Locked, calibrated light-field position: this restores the visible pale
       blue layer from v1.127 while avoiding viewport drift during scroll. */
    background-position:
      0px
      clamp(-108px, -5.2vh, -46px);
    background-size: 100vw 100vh;
    background-repeat: no-repeat;
    background-origin: border-box;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }

  .hero-title[data-headline-fx] .hero-title__line{
    background-image: inherit;
    background-size: inherit;
    background-position: inherit;
    background-repeat: inherit;
    background-origin: inherit;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}

/* v1.131 — Referenzen-Unterseite */
.references-page,
.reference-detail-page{
  background:#f2f2f2;
  color:#121212;
}

.references-main,
.reference-detail-main{
  min-height:100vh;
  background:#f2f2f2;
}

.references-landing{
  min-height:100vh;
  height:100vh;
  padding:0;
  overflow:hidden;
  overflow:clip;
  background:
    radial-gradient(circle at 75% 38%, #ffffff 0%, #ffffff 22%, #f2f2f2 68%, #f2f2f2 100%);
  color:#121212;
}

.references-bg{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 74% 37%, rgba(255,255,255,1) 0%, rgba(255,255,255,.96) 24%, rgba(242,242,242,.72) 58%, rgba(242,242,242,1) 100%);
  pointer-events:none;
}

.references-intro{
  position:absolute;
  left:clamp(68px, 6.85vw, 132px);
  top:clamp(92px, 10.2vh, 132px);
  z-index:3;
  max-width:min(560px, 37vw);
}

.references-title{
  margin:0;
  font-family:var(--font-display-serif), var(--font-serif);
  font-weight:400;
  font-style:normal;
  font-synthesis:none;
  color:#304f89;
  font-size:clamp(58px, 5.05vw, 86px);
  line-height:.82;
  letter-spacing:.002em;
}

.references-title span{
  display:block;
}

.references-title span:nth-child(3),
.references-title span:nth-child(4){
  color:#5481c3;
}

.references-kicker{
  margin:clamp(18px, 2.2vh, 28px) 0 0;
  font-family:var(--font-sans);
  font-size:clamp(14px, 1.08vw, 18px);
  line-height:1;
  letter-spacing:.055em;
  font-weight:700;
  color:#111;
}

.references-globe-wrap{
  position:absolute;
  z-index:1;
  right:clamp(54px, 6.2vw, 138px);
  top:clamp(70px, 8.4vh, 105px);
  width:min(57vw, 840px);
  aspect-ratio:1/1;
  opacity:.78;
  pointer-events:none;
}

.references-globe{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
}

.references-crosshair{
  position:absolute;
  left:64.5%;
  top:24.5%;
  width:clamp(56px, 5.2vw, 86px);
  height:auto;
  transform:translate(-50%, -50%);
  opacity:.92;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.22));
}

.references-teaser-stage{
  position:absolute;
  z-index:4;
  left:0;
  right:0;
  --ref-card-size:clamp(310px, 24vw, 390px);
  bottom:0;
  height:var(--ref-card-size);
  overflow:visible;
  cursor:grab;
  user-select:none;
  touch-action:pan-y;
}

.references-teaser-stage.is-dragging{
  cursor:grabbing;
}

.references-teaser-track{
  position:absolute;
  left:0;
  top:0;
  height:100%;
  display:flex;
  gap:clamp(20px, 1.55vw, 30px);
  will-change:transform;
  transform:translate3d(0,0,0);
}

.references-teaser{
  position:relative;
  flex:0 0 var(--ref-card-size);
  height:100%;
  display:flex;
  align-items:flex-end;
  padding:clamp(28px, 3.1vw, 48px) clamp(24px, 2.1vw, 36px);
  background-color:#5481c3;
  background-image:linear-gradient(45deg, #4371b5 0%, #5481c3 100%);
  color:#ffffff;
  text-decoration:none;
  overflow:hidden;
  box-shadow:none;
  transition:background-color .34s cubic-bezier(.22,1,.36,1), background-image .34s cubic-bezier(.22,1,.36,1), color .34s cubic-bezier(.22,1,.36,1), transform .34s cubic-bezier(.22,1,.36,1);
}

.references-teaser:hover,
.references-teaser:focus-visible{
  background-color:#ffffff;
  background-image:none;
  color:#111111;
  text-decoration:none;
}

.references-teaser:focus-visible{
  outline:2px solid rgba(84,129,195,.72);
  outline-offset:-2px;
}

.references-teaser-plus{
  position:absolute;
  top:clamp(22px, 2vw, 32px);
  right:clamp(22px, 2vw, 32px);
  width:clamp(48px, 4vw, 58px);
  height:clamp(48px, 4vw, 58px);
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px solid currentColor;
  font-size:clamp(30px, 2.4vw, 38px);
  line-height:1;
  font-family:var(--font-sans);
  font-weight:400;
  transition:border-color .34s cubic-bezier(.22,1,.36,1), color .34s cubic-bezier(.22,1,.36,1), transform .34s cubic-bezier(.22,1,.36,1);
}

.references-teaser:hover .references-teaser-plus,
.references-teaser:focus-visible .references-teaser-plus{
  color:#5481c3;
}

.references-teaser-copy{
  display:block;
  width:min(100%, 310px);
  pointer-events:none;
}

.references-teaser-title{
  display:block;
  font-family:var(--font-sans);
  font-size:clamp(21px, 1.55vw, 28px);
  line-height:1.14;
  letter-spacing:.045em;
  font-weight:400;
}

.references-teaser-location{
  display:block;
  margin-top:clamp(12px, 1.1vw, 18px);
  font-family:var(--font-sans);
  font-size:clamp(10px, .7vw, 12px);
  line-height:1;
  letter-spacing:.18em;
  text-transform:uppercase;
  opacity:.58;
}

.reference-detail-hero{
  min-height:100vh;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:radial-gradient(circle at 50% 44%, #ffffff 0%, #ffffff 26%, #f2f2f2 76%);
}

.reference-detail-card{
  width:min(760px, calc(100vw - 48px));
  padding:clamp(42px, 7vw, 84px);
  background:#ffffff;
  color:#111111;
}

.reference-detail-kicker{
  margin:0 0 20px;
  font-size:12px;
  letter-spacing:.18em;
  font-weight:700;
  color:#304f89;
}

.reference-detail-title{
  margin:0;
  font-family:var(--font-display-serif), var(--font-serif);
  color:#304f89;
  font-size:clamp(56px, 7vw, 86px);
  line-height:.9;
  font-weight:400;
}

.reference-detail-copy{
  margin:30px 0 0;
  max-width:56ch;
  font-size:18px;
  line-height:1.5;
}

.reference-detail-back{
  display:inline-block;
  margin-top:34px;
  color:#304f89;
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:700;
  text-decoration:none;
}

.reference-detail-back:hover{
  text-decoration:underline;
}

@media (max-width: 1180px){
  .references-intro{
    left:clamp(42px, 5vw, 72px);
    max-width:min(560px, 45vw);
  }
  .references-title{
    font-size:clamp(50px, 5.4vw, 70px);
  }
  .references-globe-wrap{
    right:-2vw;
    width:min(66vw, 760px);
  }
}

@media (max-width:900.98px){
  .references-landing{
    height:auto;
    min-height:100vh;
    overflow:hidden;
  }
  .references-intro{
    position:relative;
    left:auto;
    top:auto;
    max-width:none;
    padding:102px 24px 0;
    z-index:3;
  }
  .references-title{
    font-size:clamp(48px, 12vw, 72px);
    line-height:.88;
    max-width:9.5em;
  }
  .references-globe-wrap{
    top:130px;
    right:-22vw;
    width:92vw;
    opacity:.46;
  }
  .references-crosshair{
    width:62px;
  }
  .references-teaser-stage{
    position:relative;
    margin-top:clamp(170px, 28vh, 260px);
    bottom:auto;
    --ref-card-size:300px;
    height:var(--ref-card-size);
  }
  .references-teaser{
    flex-basis:var(--ref-card-size);
  }
}

@media (max-width: 560px){
  .references-intro{
    padding:94px 18px 0;
  }
  .references-title{
    font-size:clamp(42px, 14vw, 58px);
  }
  .references-kicker{
    font-size:13px;
  }
  .references-globe-wrap{
    top:160px;
    right:-42vw;
    width:122vw;
  }
  .references-teaser-stage{
    margin-top:210px;
    --ref-card-size:280px;
    height:var(--ref-card-size);
  }
  .references-teaser{
    flex-basis:var(--ref-card-size);
    padding:28px 24px;
  }
}

@media (prefers-reduced-motion: reduce){
  .references-teaser-track,
  .references-teaser{
    transition:none !important;
    will-change:auto;
  }
}


/* v1.133 — Referenzen-Seite: feste Bühne, korrekt überlagerte Teaser, kein vertikales Scrollen */
html:has(body.references-page),
html.references-page-lock{
  height:100%;
  overflow:hidden;
  overscroll-behavior:none;
}

body.references-page,
body.references-page.references-page-lock{
  height:100vh;
  min-height:100vh;
  overflow:hidden !important;
  overscroll-behavior:none;
}

body.references-page .references-main{
  height:100vh;
  min-height:100vh;
  max-height:100vh;
  overflow:hidden;
}

body.references-page .references-landing{
  position:relative;
  height:100vh;
  min-height:100vh;
  max-height:100vh;
  padding:0 !important;
  overflow:hidden !important;
  box-sizing:border-box;
}

body.references-page .footer{
  display:none !important;
}

body.references-page .references-teaser-stage{
  position:absolute;
  left:0;
  right:0;
  top:calc(50vh + clamp(8px, 1.8vh, 22px));
  bottom:auto;
  --ref-card-size:clamp(330px, 36.5vh, 390px);
  height:var(--ref-card-size);
  margin-top:0 !important;
  overflow:visible;
  touch-action:none;
  z-index:4;
}

body.references-page .references-teaser-track{
  top:0;
  height:100%;
  will-change:transform;
  backface-visibility:hidden;
}

body.references-page .references-teaser{
  height:100%;
  flex-basis:var(--ref-card-size);
  transform:translateZ(0);
}

@media (max-width:900.98px){
  body.references-page .references-landing{
    height:100vh;
    min-height:100vh;
    max-height:100vh;
  }

  body.references-page .references-intro{
    position:absolute;
    left:clamp(24px, 5vw, 42px);
    top:clamp(92px, 11vh, 116px);
    padding:0;
    max-width:min(560px, 58vw);
  }

  body.references-page .references-globe-wrap{
    top:clamp(88px, 13vh, 140px);
    right:-8vw;
    width:min(82vw, 720px);
    opacity:.58;
  }

  body.references-page .references-teaser-stage{
    position:absolute;
    top:calc(55vh + 8px);
    bottom:auto;
    --ref-card-size:clamp(260px, 34vh, 320px);
    height:var(--ref-card-size);
    margin-top:0 !important;
  }
}

@media (max-width: 560px){
  body.references-page .references-intro{
    left:18px;
    top:88px;
    max-width:72vw;
    padding:0;
  }

  body.references-page .references-globe-wrap{
    top:150px;
    right:-44vw;
    width:124vw;
  }

  body.references-page .references-teaser-stage{
    top:calc(57vh + 4px);
    --ref-card-size:260px;
  }
}

/* v1.134 — Referenzen Mini-CMS + Einzelseiten */
body.references-page .references-title,
body.reference-detail-page .reference-detail-title{
  color:#304f89;
}

body.references-page .references-empty{
  min-width:320px;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:30px;
  background:#fff;
  color:#111;
  font-family:var(--font-sans);
  font-size:18px;
}

body.reference-detail-page{
  height:100vh;
  min-height:100vh;
  overflow:hidden !important;
  background:
    radial-gradient(circle at 50% 34%, #ffffff 0%, #ffffff 30%, #f2f2f2 76%, #f2f2f2 100%);
  color:#111;
}

body.reference-detail-page .footer{
  display:none !important;
}

.reference-detail-main{
  height:100vh;
  min-height:100vh;
  max-height:100vh;
  overflow:hidden;
  background:transparent;
}

.reference-detail-layout{
  position:relative;
  height:100vh;
  min-height:100vh;
  max-height:100vh;
  padding:0;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 34%, #ffffff 0%, #ffffff 28%, #f2f2f2 74%, #f2f2f2 100%);
}

.reference-detail-left{
  position:absolute;
  z-index:3;
  left:clamp(54px, 5.55vw, 104px);
  top:clamp(116px, 12vh, 148px);
  font-family:var(--font-sans);
  font-size:clamp(13px, .95vw, 18px);
  line-height:1;
  letter-spacing:.065em;
  font-weight:700;
  text-transform:uppercase;
  color:#111;
}

.reference-detail-left a{
  color:inherit;
  text-decoration:none;
}

.reference-detail-left a:hover{
  color:#304f89;
}

.reference-detail-content{
  position:absolute;
  z-index:2;
  top:clamp(92px, 11.2vh, 128px);
  bottom:clamp(34px, 5vh, 68px);
  left:clamp(340px, 27vw, 520px);
  width:min(47vw, 770px);
  max-width:770px;
  padding-right:clamp(12px, 1.4vw, 24px);
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:rgba(48,79,137,.45) transparent;
}

.reference-detail-content::-webkit-scrollbar{
  width:8px;
}

.reference-detail-content::-webkit-scrollbar-track{
  background:transparent;
}

.reference-detail-content::-webkit-scrollbar-thumb{
  background:rgba(48,79,137,.38);
  border-radius:999px;
}

.reference-detail-title{
  margin:0;
  font-family:var(--font-display-serif), var(--font-serif);
  font-size:clamp(62px, 5.8vw, 102px);
  line-height:.82;
  letter-spacing:.002em;
  font-weight:400;
  text-wrap:balance;
}

.reference-detail-meta{
  margin:clamp(24px, 3vh, 36px) 0 clamp(24px, 3.2vh, 38px);
  font-family:var(--font-sans);
  font-size:clamp(14px, 1vw, 19px);
  line-height:1.1;
  letter-spacing:.055em;
  font-weight:700;
  text-transform:uppercase;
  color:#111;
}

.reference-detail-text{
  max-width:64ch;
  padding-bottom:clamp(44px, 8vh, 90px);
  font-family:var(--font-sans);
  font-size:clamp(18px, 1.32vw, 25px);
  line-height:1.16;
  letter-spacing:.018em;
  color:#111;
}

.reference-detail-text p{
  margin:0 0 clamp(22px, 3.1vh, 36px);
}

.reference-detail-text ul{
  margin:0 0 clamp(22px, 3.1vh, 36px);
  padding-left:1.15em;
}

.reference-detail-text li{
  margin:.22em 0;
}

.reference-detail-text a{
  color:#304f89;
  font-weight:700;
  text-decoration:none;
}

.reference-detail-text a:hover{
  text-decoration:underline;
}

.reference-detail-nav{
  position:absolute;
  z-index:3;
  right:clamp(54px, 5.5vw, 108px);
  top:10vh;
  bottom:10vh;
  width:min(310px, 22vw);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:clamp(10px, 1.4vh, 20px);
  overflow:visible;
}

.reference-detail-nav-link{
  display:grid;
  grid-template-columns:12px minmax(0, 1fr);
  column-gap:clamp(12px, 1.1vw, 18px);
  align-items:start;
  color:#111;
  text-decoration:none;
  font-family:var(--font-sans);
  font-size:clamp(13px, .92vw, 17px);
  line-height:1.14;
  letter-spacing:.025em;
  transition:color .25s cubic-bezier(.22,1,.36,1), transform .25s cubic-bezier(.22,1,.36,1);
}

.reference-detail-nav-link:hover,
.reference-detail-nav-link:focus-visible,
.reference-detail-nav-link.is-active{
  color:#4f7cc1;
  text-decoration:none;
}

.reference-detail-nav-link:focus-visible{
  outline:2px solid rgba(79,124,193,.35);
  outline-offset:6px;
}

.reference-detail-nav-dot{
  width:9px;
  height:9px;
  margin-top:.26em;
  border-radius:999px;
  background:#4f7cc1;
  transform:translateZ(0);
}

.reference-detail-nav-link.is-active .reference-detail-nav-dot{
  box-shadow:0 0 0 4px rgba(79,124,193,.12);
}

body.references-admin-page{
  width:100%;
  height:100dvh;
  min-height:100dvh;
  overflow:hidden !important;
  background:#f2f2f2;
  color:#111;
}

body.references-admin-page .footer{
  display:none !important;
}

.references-admin-main{
  position:fixed;
  inset:0;
  width:100%;
  height:auto;
  min-height:0;
  max-height:none;
  overflow:hidden;
  background:radial-gradient(circle at 50% 22%, #fff 0%, #fff 28%, #f2f2f2 78%);
}

.references-admin-section{
  position:absolute;
  inset:clamp(100px, 13vh, 132px) clamp(28px, 4.5vw, 82px) clamp(18px, 3vh, 34px);
  height:auto;
  min-height:0;
  padding:0;
  background:transparent;
  overflow:hidden;
}

.references-admin-layout{
  width:100%;
  height:100%;
  min-height:0;
  display:grid;
  grid-template-columns:minmax(320px, .88fr) minmax(460px, 1.12fr);
  gap:clamp(28px, 4.4vw, 78px);
  align-items:stretch;
}

.references-admin-left,
.references-admin-right{
  min-width:0;
  min-height:0;
  padding-top:clamp(8px, 2.2vh, 26px);
}

.references-admin-left{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}

.references-admin-right{
  display:grid;
  grid-template-rows:auto minmax(0, 1fr);
  gap:clamp(12px, 2vh, 18px);
}

.references-admin-title{
  margin:0 0 clamp(20px, 3vh, 32px);
  font-family:Arial, Helvetica, ui-sans-serif, sans-serif;
  color:#304f89;
  font-weight:700;
  font-size:32px;
  line-height:1.05;
  letter-spacing:0;
}

.references-admin-input-panel{
  width:min(520px, 100%);
  display:grid;
  gap:clamp(14px, 2vh, 18px);
}

.references-admin-form{
  display:grid;
  gap:clamp(14px, 2vh, 18px);
  width:100%;
  margin:0;
}

.references-admin-form label{
  display:grid;
  gap:8px;
  font-size:12px;
  letter-spacing:.1em;
  font-weight:700;
  text-transform:uppercase;
  color:#23385f;
}

.references-admin-form input{
  width:100%;
  min-height:48px;
  padding:10px 14px;
  border:1px solid rgba(48,79,137,.28);
  background:rgba(255,255,255,.78);
  color:#111;
  font:inherit;
  text-transform:none;
  letter-spacing:normal;
  font-weight:400;
}

.references-admin-form input:focus-visible{
  outline:2px solid rgba(79,124,193,.32);
  outline-offset:2px;
}

.references-admin-form button,
.references-admin-logout button{
  justify-self:start;
  min-height:48px;
  padding:0 24px;
  border:1px solid #304f89;
  background:#304f89;
  color:#fff;
  font-size:12px;
  letter-spacing:.14em;
  font-weight:700;
  text-transform:uppercase;
  cursor:pointer;
}

.references-admin-logout{
  margin:0;
}

.references-admin-logout button{
  background:#fff;
  color:#304f89;
}

.references-admin-form button:hover,
.references-admin-form button:focus-visible,
.references-admin-logout button:hover,
.references-admin-logout button:focus-visible{
  background:#1f4187;
  border-color:#1f4187;
  color:#fff;
}

.references-admin-notices{
  width:min(520px, 100%);
  margin:0 0 clamp(14px, 2vh, 22px);
  display:grid;
  gap:8px;
}

.references-admin-message{
  margin:0;
  padding:12px 14px;
  font-size:15px;
  line-height:1.35;
}

.references-admin-message.is-ok{
  background:rgba(79,124,193,.1);
  color:#304f89;
}

.references-admin-message.is-error{
  background:rgba(160,40,40,.1);
  color:#8a1f1f;
}

.references-admin-current-title{
  margin:0;
  color:#304f89;
  font-size:13px;
  line-height:1.2;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:700;
}

.references-admin-language-stack{
  min-height:0;
  display:grid;
  grid-template-rows:repeat(3, minmax(0, 1fr));
  gap:clamp(10px, 1.5vh, 14px);
}

.references-admin-language-panel{
  min-height:0;
  display:grid;
  grid-template-rows:auto minmax(0, 1fr);
  background:rgba(255,255,255,.84);
  border:1px solid rgba(48,79,137,.14);
  box-shadow:0 18px 42px rgba(16,35,62,.06);
  overflow:hidden;
}

.references-admin-language-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:11px 16px 10px;
  border-bottom:1px solid rgba(48,79,137,.12);
}

.references-admin-language-head h3{
  margin:0;
  color:#304f89;
  font-size:14px;
  line-height:1;
  letter-spacing:.18em;
  font-weight:700;
}

.references-admin-language-head span{
  color:rgba(17,17,17,.48);
  font-size:11px;
  line-height:1;
  letter-spacing:.12em;
  font-weight:700;
  text-transform:uppercase;
  white-space:nowrap;
}

.references-admin-language-scroll{
  min-height:0;
  overflow:auto;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  padding:10px 14px 12px;
}

.references-admin-language-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:8px;
}

.references-admin-reference-link{
  display:grid;
  grid-template-columns:auto minmax(0, 1fr);
  grid-template-areas:
    "date title"
    "date place";
  gap:3px 12px;
  min-height:58px;
  padding:10px 12px;
  background:#fff;
  border:1px solid rgba(48,79,137,.1);
  color:#111;
  text-decoration:none;
  transition:background .18s ease, border-color .18s ease, transform .18s ease;
}

.references-admin-reference-link:hover,
.references-admin-reference-link:focus-visible{
  background:#f7f9fd;
  border-color:rgba(48,79,137,.28);
  transform:translateY(-1px);
  outline:none;
}

.references-admin-reference-date{
  grid-area:date;
  align-self:center;
  color:#304f89;
  font-size:12px;
  line-height:1.15;
  font-weight:700;
  white-space:nowrap;
}

.references-admin-reference-title{
  grid-area:title;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:14px;
  line-height:1.25;
  font-weight:700;
}

.references-admin-reference-place{
  grid-area:place;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:rgba(17,17,17,.55);
  font-size:12px;
  line-height:1.25;
}

.references-admin-empty{
  margin:0;
  padding:12px;
  color:rgba(17,17,17,.58);
  font-size:14px;
  line-height:1.35;
}

@media (max-width:900.98px){
  .references-admin-section{
    padding:82px 16px 18px;
  }

  .references-admin-layout{
    grid-template-columns:minmax(230px, .9fr) minmax(280px, 1.1fr);
    gap:16px;
  }

  .references-admin-title{
    font-size:28px;
  }

  .references-admin-reference-link{
    grid-template-columns:1fr;
    grid-template-areas:"date" "title" "place";
  }
}

@media (max-width: 1180px){
  .reference-detail-content{
    left:clamp(280px, 28vw, 360px);
    width:min(50vw, 700px);
  }

  .reference-detail-nav{
    right:clamp(32px, 4vw, 58px);
    width:min(280px, 24vw);
  }
}

@media (max-width:900.98px){
  body.reference-detail-page{
    height:auto;
    min-height:100vh;
    overflow:auto !important;
  }

  .reference-detail-main,
  .reference-detail-layout{
    height:auto;
    min-height:100vh;
    max-height:none;
    overflow:visible;
  }

  .reference-detail-layout{
    padding:104px 24px 60px;
  }

  .reference-detail-left,
  .reference-detail-content,
  .reference-detail-nav{
    position:relative;
    left:auto;
    right:auto;
    top:auto;
    bottom:auto;
    width:auto;
    max-width:none;
  }

  .reference-detail-left{
    margin:0 0 28px;
  }

  .reference-detail-content{
    overflow:visible;
    padding-right:0;
  }

  .reference-detail-title{
    font-size:clamp(48px, 12vw, 78px);
  }

  .reference-detail-text{
    font-size:18px;
    line-height:1.32;
  }

  .reference-detail-nav{
    margin-top:40px;
    gap:18px;
    justify-content:flex-start;
  }
}

@media (max-width: 560px){
  .reference-detail-layout{
    padding:92px 18px 48px;
  }

  .reference-detail-meta{
    font-size:13px;
  }

  .reference-detail-nav-link{
    font-size:14px;
  }
}

/* v1.136 — Referenz-Einzelseiten: echte mittlere Scrollspalte und präzisere rechte Navigation */
body.reference-detail-page .reference-detail-content{
  top:clamp(92px, 11vh, 128px);
  bottom:clamp(38px, 5.4vh, 74px);
  left:clamp(340px, 27vw, 520px);
  width:min(42vw, 740px);
  max-width:740px;
  box-sizing:border-box;
  overflow-y:scroll !important;
  overflow-x:hidden;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y;
}

body.reference-detail-page .reference-detail-title{
  max-width:100%;
}

body.reference-detail-page .reference-detail-text{
  max-width:62ch;
}

body.reference-detail-page .reference-detail-nav{
  top:0;
  bottom:0;
  right:clamp(38px, 5vw, 92px);
  width:min(248px, 17.6vw);
  height:100vh;
  display:block;
  gap:0;
  pointer-events:none;
  overflow:visible;
}

body.reference-detail-page .reference-detail-nav-link{
  position:absolute;
  top:var(--ref-nav-y, 50vh);
  left:0;
  right:0;
  display:grid;
  grid-template-columns:12px minmax(0, 1fr);
  align-items:center;
  transform:translateY(-50%);
  pointer-events:auto;
}

body.reference-detail-page .reference-detail-nav-dot{
  margin-top:0;
}

@media (min-width:901px) and (max-width:1180px){
  body.reference-detail-page .reference-detail-content{
    left:clamp(270px, 27vw, 340px);
    width:min(43vw, 640px);
  }

  body.reference-detail-page .reference-detail-nav{
    right:clamp(28px, 4vw, 52px);
    width:min(224px, 18.5vw);
  }

  body.reference-detail-page .reference-detail-nav-link{
    font-size:clamp(12px, 1.2vw, 15px);
  }
}

@media (max-width:900.98px){
  body.reference-detail-page .reference-detail-content{
    overflow:visible !important;
    touch-action:auto;
  }

  body.reference-detail-page .reference-detail-nav{
    position:relative;
    top:auto;
    right:auto;
    bottom:auto;
    left:auto;
    width:auto;
    height:auto;
    display:flex;
    flex-direction:column;
    gap:18px;
    pointer-events:auto;
  }

  body.reference-detail-page .reference-detail-nav-link{
    position:relative;
    top:auto;
    left:auto;
    right:auto;
    transform:none;
  }
}

/* v1.137 — Referenz-Einzelseite: Leistungen-Typografie, weiche interne Scrollspalte, unsichtbarer Scrollbalken */
body.reference-detail-page .reference-detail-content{
  top:clamp(104px, 12vh, 138px);
  bottom:0;
  left:clamp(340px, 27vw, 500px);
  width:min(39vw, 650px);
  max-width:650px;
  padding-right:0;
  overflow-y:auto !important;
  overflow-x:hidden;
  overscroll-behavior:contain;
  scrollbar-width:none;
  -ms-overflow-style:none;
  scroll-behavior:auto;
}

body.reference-detail-page .reference-detail-content::-webkit-scrollbar{
  width:0;
  height:0;
  display:none;
}

body.reference-detail-page .reference-detail-scroll-inner{
  box-sizing:border-box;
  min-height:100%;
  padding-bottom:20vh;
}

body.reference-detail-page .reference-detail-title{
  max-width:100%;
  font-size:clamp(46px, 4.8vw, 74px);
  line-height:.92;
  letter-spacing:.005em;
  color:#304f89;
}

body.reference-detail-page .reference-detail-meta{
  margin:clamp(22px, 3vh, 34px) 0 clamp(22px, 3.1vh, 34px);
  font-size:clamp(13px, .95vw, 16px);
  line-height:1.12;
}

body.reference-detail-page .reference-detail-text{
  max-width:62ch;
  padding-bottom:0;
  font-size:14px;
  line-height:1.35;
  font-weight:500;
  letter-spacing:.02em;
}

body.reference-detail-page .reference-detail-text p,
body.reference-detail-page .reference-detail-text ul{
  margin:0 0 24px 0;
}

body.reference-detail-page .reference-detail-text ul{
  padding-left:1.15em;
}

body.reference-detail-page .reference-detail-nav{
  right:clamp(40px, 4.8vw, 86px);
  width:min(220px, 15.2vw);
}

@media (min-width:901px) and (max-width:1180px){
  body.reference-detail-page .reference-detail-content{
    left:clamp(270px, 27vw, 340px);
    width:min(40vw, 560px);
  }

  body.reference-detail-page .reference-detail-nav{
    right:clamp(24px, 3.5vw, 48px);
    width:min(198px, 17vw);
  }
}

@media (max-width:900.98px){
  body.reference-detail-page .reference-detail-content{
    top:auto;
    bottom:auto;
    width:auto;
    max-width:none;
    overflow:visible !important;
    scrollbar-width:auto;
    -ms-overflow-style:auto;
  }

  body.reference-detail-page .reference-detail-scroll-inner{
    padding-bottom:0;
  }

  body.reference-detail-page .reference-detail-title{
    font-size:clamp(44px, 11vw, 70px);
  }

  body.reference-detail-page .reference-detail-text{
    font-size:16px;
    line-height:1.38;
  }
}

body.reference-detail-page .reference-detail-content:focus{
  outline:none;
}

body.reference-detail-page .reference-detail-content:focus-visible{
  outline:2px solid rgba(79,124,193,.18);
  outline-offset:8px;
}

/* v1.138 — Referenz-Einzelseiten: Scroll-Container bis Oberkante und 30vh Endabstand */
@media (min-width: 901px){
  body.reference-detail-page .reference-detail-content{
    top:0;
    bottom:0;
    height:100vh;
    max-height:100vh;
    overflow-y:auto !important;
    overflow-x:hidden;
    scrollbar-width:none;
    -ms-overflow-style:none;
    overscroll-behavior:contain;
  }

  body.reference-detail-page .reference-detail-content::-webkit-scrollbar{
    width:0;
    height:0;
    display:none;
  }

  body.reference-detail-page .reference-detail-scroll-inner{
    min-height:auto;
    padding-top:clamp(104px, 12vh, 138px);
    padding-bottom:0;
    box-sizing:border-box;
  }

  body.reference-detail-page .reference-detail-scroll-inner::after{
    content:"";
    display:block;
    height:30vh;
    min-height:30vh;
  }
}

@media (max-width:900.98px){
  body.reference-detail-page .reference-detail-scroll-inner::after{
    content:none;
  }
}

/* v1.236 — Referenzen-Admin: zweigeteilte, nicht scrollbar aufgebaute Arbeitsfläche */
body.references-admin-page .references-admin-title{
  margin-bottom:clamp(20px, 3vh, 32px);
}

.references-admin-format-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  justify-self:start;
  min-height:48px;
  margin:0;
  padding:0 24px;
  border:1px solid #304f89;
  background:#fff;
  color:#304f89;
  font-size:12px;
  letter-spacing:.14em;
  font-weight:700;
  text-transform:uppercase;
  cursor:pointer;
}

.references-admin-format-button:hover,
.references-admin-format-button:focus-visible{
  background:#304f89;
  color:#fff;
  outline:none;
}

.references-admin-modal{
  width:min(760px, calc(100vw - 36px));
  max-height:min(82vh, 760px);
  padding:0;
  border:0;
  background:transparent;
  color:#111;
}

.references-admin-modal::backdrop{
  background:rgba(8,18,34,.44);
  backdrop-filter:blur(2px);
}

.references-admin-modal-card{
  position:relative;
  padding:clamp(26px, 4vw, 44px);
  background:#fff;
  box-shadow:0 34px 90px rgba(16,35,62,.22);
}

.references-admin-modal-card h2{
  margin:0 0 14px;
  color:#304f89;
  font-size:clamp(28px, 4vw, 44px);
  font-family:var(--font-display-serif), var(--font-serif);
  font-weight:400;
  line-height:.95;
}

.references-admin-modal-card .reference-format-title,
.references-admin-modal-card #reference-format-title{
  font-family:Arial, Helvetica, ui-sans-serif, sans-serif;
  font-size:32px;
  font-weight:700;
  line-height:1.05;
  letter-spacing:0;
}

.references-admin-modal-card p,
.references-admin-modal-card li{
  font-size:15px;
  line-height:1.45;
}

.references-admin-modal-card ol{
  margin:18px 0 22px;
  padding-left:1.35em;
}

.references-admin-modal-close{
  position:absolute;
  top:14px;
  right:14px;
  width:42px;
  height:42px;
  border:1px solid rgba(48,79,137,.34);
  background:#fff;
  color:#304f89;
  font-size:26px;
  line-height:1;
  cursor:pointer;
}

.references-admin-modal-close:hover,
.references-admin-modal-close:focus-visible{
  background:#304f89;
  color:#fff;
}

.references-admin-example{
  max-height:260px;
  overflow:auto;
  margin:0;
  padding:18px 20px;
  background:#f5f6f8;
  border:1px solid rgba(48,79,137,.18);
  color:#111;
  font-size:14px;
  line-height:1.45;
  white-space:pre-wrap;
}

@media (max-width: 560px){
  .references-admin-modal{
    width:calc(100vw - 22px);
  }

  .references-admin-modal-card{
    padding:28px 18px 20px;
  }
}

/* v1.140 — Referenz-Einzelseiten: rechte Navigation wird bei vielen Referenzen scrollbar */
@media (min-width: 901px){
  body.reference-detail-page .reference-detail-nav{
    top:20vh;
    bottom:10vh;
    height:70vh;
    max-height:70vh;
    overflow-y:auto;
    overflow-x:visible;
    overscroll-behavior:contain;
    scrollbar-width:none;
    -ms-overflow-style:none;
    pointer-events:auto;
  }

  body.reference-detail-page .reference-detail-nav::-webkit-scrollbar{
    width:0;
    height:0;
    display:none;
  }

  body.reference-detail-page .reference-detail-nav-inner{
    position:relative;
    height:70vh;
    min-height:max(70vh, var(--ref-nav-min-height, 70vh));
  }

  body.reference-detail-page .reference-detail-nav-link{
    top:calc(var(--ref-nav-y, 50) * 1%);
  }
}

@media (max-width:900.98px){
  body.reference-detail-page .reference-detail-nav-inner{
    display:flex;
    flex-direction:column;
    gap:18px;
  }
}

/* v1.141 — Referenz-Einzelseiten: rechte Punktnavigation ohne Abschneiden und nur bei Bedarf scrollbar */
@media (min-width: 901px){
  body.reference-detail-page .reference-detail-nav{
    top:17vh;
    bottom:10vh;
    height:73vh;
    max-height:73vh;
    overflow-y:auto;
    overflow-x:visible;
    overscroll-behavior:contain;
    scrollbar-width:none;
    -ms-overflow-style:none;
    pointer-events:auto;
  }

  body.reference-detail-page .reference-detail-nav::-webkit-scrollbar{
    width:0;
    height:0;
    display:none;
  }

  body.reference-detail-page .reference-detail-nav-inner{
    position:relative;
    height:100%;
    min-height:max(100%, var(--ref-nav-min-height, 100%));
    box-sizing:border-box;
    overflow:visible;
  }

  body.reference-detail-page .reference-detail-nav-link{
    top:calc(var(--ref-nav-y, 50) * 1%);
  }
}

/* v1.142 — Referenz-Einzelseiten: mobile Stapelansicht für drei Spalten */
@media (max-width:900.98px){
  body.reference-detail-page{
    height:auto;
    min-height:100vh;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    background:
      radial-gradient(circle at 50% 16%, #ffffff 0%, #ffffff 30%, #f2f2f2 78%, #f2f2f2 100%);
  }

  body.reference-detail-page .reference-detail-main,
  body.reference-detail-page .reference-detail-layout{
    height:auto;
    min-height:100vh;
    max-height:none;
    overflow:visible;
  }

  body.reference-detail-page .reference-detail-layout{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:clamp(26px, 5vh, 48px);
    padding:clamp(104px, 14vh, 136px) clamp(20px, 6vw, 56px) clamp(70px, 10vh, 110px);
    box-sizing:border-box;
  }

  body.reference-detail-page .reference-detail-left,
  body.reference-detail-page .reference-detail-content,
  body.reference-detail-page .reference-detail-nav{
    position:relative !important;
    inset:auto !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;
    width:100% !important;
    max-width:none !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    transform:none !important;
    box-sizing:border-box;
  }

  body.reference-detail-page .reference-detail-left{
    order:1;
    margin:0;
    font-size:clamp(13px, 3.5vw, 16px);
    line-height:1.1;
  }

  body.reference-detail-page .reference-detail-content{
    order:2;
    padding:0;
    overflow:visible !important;
    touch-action:auto;
    overscroll-behavior:auto;
    scrollbar-width:none;
    -ms-overflow-style:none;
  }

  body.reference-detail-page .reference-detail-content::-webkit-scrollbar{
    width:0;
    height:0;
    display:none;
  }

  body.reference-detail-page .reference-detail-scroll-inner{
    min-height:0;
    padding:0 !important;
  }

  body.reference-detail-page .reference-detail-scroll-inner::after{
    content:none !important;
    display:none !important;
  }

  body.reference-detail-page .reference-detail-title{
    max-width:100%;
    font-size:clamp(42px, 11.8vw, 72px);
    line-height:.92;
    letter-spacing:.004em;
    hyphens:auto;
    overflow-wrap:break-word;
  }

  body.reference-detail-page .reference-detail-meta{
    margin:clamp(20px, 4vh, 32px) 0 clamp(22px, 4vh, 34px);
    font-size:clamp(12px, 3.35vw, 15px);
    line-height:1.18;
    letter-spacing:.06em;
  }

  body.reference-detail-page .reference-detail-text{
    max-width:none;
    font-size:clamp(16px, 4.25vw, 20px);
    line-height:1.46;
    letter-spacing:.01em;
    font-weight:400;
    hyphens:auto;
    overflow-wrap:break-word;
  }

  body.reference-detail-page .reference-detail-text p,
  body.reference-detail-page .reference-detail-text ul{
    margin:0 0 clamp(18px, 4.6vw, 28px) 0;
  }

  body.reference-detail-page .reference-detail-text ul{
    padding-left:1.2em;
  }

  body.reference-detail-page .reference-detail-nav{
    order:3;
    margin:clamp(18px, 5vh, 42px) 0 0;
    padding:clamp(20px, 5vw, 30px) 0 0;
    border-top:1px solid rgba(48,79,137,.18);
    display:block;
    overflow:visible !important;
    pointer-events:auto;
  }

  body.reference-detail-page .reference-detail-nav-inner{
    position:relative;
    display:grid;
    grid-template-columns:1fr;
    gap:clamp(16px, 4.5vw, 24px);
    height:auto !important;
    min-height:0 !important;
    overflow:visible !important;
  }

  body.reference-detail-page .reference-detail-nav-link{
    position:relative !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    transform:none !important;
    display:grid;
    grid-template-columns:10px minmax(0, 1fr);
    column-gap:14px;
    align-items:start;
    font-size:clamp(14px, 3.8vw, 17px);
    line-height:1.25;
  }

  body.reference-detail-page .reference-detail-nav-dot{
    width:8px;
    height:8px;
    margin-top:.38em;
  }
}

@media (max-width: 480px){
  body.reference-detail-page .reference-detail-layout{
    padding:96px 18px 62px;
    gap:24px;
  }

  body.reference-detail-page .reference-detail-title{
    font-size:clamp(39px, 12.5vw, 58px);
  }

  body.reference-detail-page .reference-detail-text{
    font-size:16px;
    line-height:1.48;
  }
}


/* v1.146 — Referenzen: kein automatisch hervorgehobener Teaser mehr */
.references-teaser.is-featured{
  background-color:#5481c3;
  background-image:linear-gradient(45deg, #4371b5 0%, #5481c3 100%);
  color:#ffffff;
}

.references-teaser.is-featured .references-teaser-plus{
  color:currentColor;
}

.references-teaser.is-featured:hover,
.references-teaser.is-featured:focus-visible{
  background-color:#ffffff;
  background-image:none;
  color:#111111;
}

.references-teaser.is-featured:hover .references-teaser-plus,
.references-teaser.is-featured:focus-visible .references-teaser-plus{
  color:#5481c3;
}


@media (max-width:900.98px){
  .about-references-button{
    --about-ref-btn-width: clamp(224px, 25.2vw, 244px);
  }
}

@media (max-width: 720px){
  .about-references-button{
    --about-ref-btn-width: clamp(214px, 58vw, 236px);
    margin-top: calc(35px * var(--leistungen-copy-fit, 1));
  }
}

@media (prefers-reduced-motion: reduce){
  .about-references-button,
  .about-references-button-text,
  .about-references-button-circle,
  .about-references-button-arrow{
    animation: none !important;
    transition: none !important;
  }
}

/* v1.224 — Über-mich-Referenzenbutton: Höhe an .reference-detail-cta gekoppelt.
   Die komplette Geometrie läuft weiterhin über eine gemeinsame Breitenvariable,
   damit Text, Innenabstände, Kreis und Pfeil proportional mitskalieren. */
.about-references-button{
  --about-ref-btn-width: calc(clamp(178px, 11.76vw, 224px) + 10px);
}

@media (max-width:900.98px){
  .about-references-button{
    --about-ref-btn-width: calc(clamp(167px, 23.8vw, 213px) + 10px);
  }
}

@media (max-width: 760px){
  .about-references-button{
    --about-ref-btn-width: calc(min(54.6vw, 200px) + 10px);
  }
}

/* v1.156 — Referenz-Einzelseiten: einfache rechte Linkliste und seitenweites Scrollen der mittleren Spalte */
@media (min-width: 901px){
  body.reference-detail-page .reference-detail-nav{
    top:clamp(104px, 12vh, 138px);
    bottom:auto;
    height:auto;
    max-height:calc(100vh - clamp(104px, 12vh, 138px) - 48px);
    display:block;
    overflow-y:auto;
    overflow-x:visible;
    overscroll-behavior:contain;
    pointer-events:auto;
    scrollbar-width:none;
    -ms-overflow-style:none;
  }

  body.reference-detail-page .reference-detail-nav::-webkit-scrollbar{
    width:0;
    height:0;
    display:none;
  }

  body.reference-detail-page .reference-detail-nav-inner{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:clamp(13px, 1.45vh, 20px);
    height:auto !important;
    min-height:0 !important;
    overflow:visible;
  }

  body.reference-detail-page .reference-detail-nav-link{
    position:relative !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    transform:none !important;
    display:grid;
    grid-template-columns:12px minmax(0, 1fr);
    column-gap:clamp(12px, 1vw, 16px);
    align-items:start;
  }

  body.reference-detail-page .reference-detail-nav-dot{
    margin-top:.35em;
  }
}

/* v1.159 — Coverage: principles/value layout from reference image */
.section.coverage:not(.hero):not(.story){
  min-height:210vh !important;
}

.section.coverage > .section-pin{
  min-height:100vh;
  justify-content:center;
  padding-top:0;
  overflow:hidden;
  overflow:clip;
}

.coverage-layout.container{
  position:relative;
  z-index:1;
  width:100%;
  max-width:none !important;
  height:100vh;
  min-height:100vh;
  margin:0;
  padding:0;
}

.coverage-eyebrow{
  position:absolute;
  left:10.25%;
  top:13.25%;
  margin:0;
  z-index:4;
  color:#05070b;
  font-family:var(--font-sans);
  font-size:clamp(13px, .98vw, 18px);
  line-height:1.15;
  font-weight:700;
  letter-spacing:.075em;
  text-transform:uppercase;
  text-wrap:balance;
}

.coverage-title{
  position:absolute;
  left:10.25% !important;
  top:22.95% !important;
  width:min(42vw, 680px) !important;
  max-width:680px;
  margin:0;
  transform:none !important;
  z-index:3;
  text-align:left !important;
  color:#304f89;
  font-family:var(--font-display-serif), var(--font-serif);
  font-size:clamp(56px, 5.2vw, 88px);
  line-height:.91;
  letter-spacing:.002em;
  font-weight:400;
  text-wrap:balance;
}

.coverage-copy{
  position:absolute;
  left:52.75% !important;
  right:7.75% !important;
  top:0 !important;
  bottom:0 !important;
  width:auto !important;
  height:auto !important;
  max-width:none !important;
  margin:0 !important;
  overflow:visible !important;
  contain:none !important;
  pointer-events:none;
  z-index:3;
}

.coverage-copy-inner{
  position:relative;
  width:100%;
  height:100%;
  min-height:100%;
}

.coverage-item,
.coverage-item:nth-child(1),
.coverage-item:nth-child(2),
.coverage-item:nth-child(3){
  --coverage-item-opacity:0;
  --coverage-item-x:clamp(180px, 22vw, 380px);
  --coverage-number-width:clamp(58px, 5.1vw, 88px);
  --coverage-item-gap:clamp(21px, 1.65vw, 32px);
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  width:100% !important;
  max-width:none !important;
  display:grid !important;
  grid-template-columns:var(--coverage-number-width) minmax(0, 1fr) !important;
  column-gap:var(--coverage-item-gap) !important;
  align-items:start !important;
  color:#05070b;
  opacity:var(--coverage-item-opacity) !important;
  transform:translate3d(var(--coverage-item-x), 0, 0) !important;
  will-change:transform, opacity;
}

.coverage-item:nth-child(1){top:24.0% !important;}
.coverage-item:nth-child(2){top:46.95% !important;}
.coverage-item:nth-child(3){top:68.85% !important;}

.coverage-icon-placeholder{
  display:none !important;
}

.coverage-number{
  display:block;
  align-self:start;
  width:var(--coverage-number-width);
  color:#1f4187;
  font-family:var(--font-sans);
  font-size:clamp(62px, 5.25vw, 96px);
  line-height:.78;
  font-weight:700;
  letter-spacing:-.065em;
  text-align:left;
  transform:translateY(.03em);
}

.coverage-item-copy{
  width:min(31.2vw, 520px) !important;
  max-width:100% !important;
}

.coverage-item-title{
  margin:0 0 clamp(18px, 1.55vh, 24px) !important;
  padding-top:clamp(0px, .23vw, 4px) !important;
  width:100% !important;
  max-width:100% !important;
  color:#05070b !important;
  font-family:var(--font-sans) !important;
  font-size:clamp(28px, 2.15vw, 42px) !important;
  line-height:1.08 !important;
  font-weight:700 !important;
  letter-spacing:-.018em !important;
  text-transform:none !important;
}

.coverage-item p{
  margin:0 !important;
  width:min(31.2vw, 520px) !important;
  max-width:100% !important;
  color:#05070b !important;
  font-family:var(--font-sans);
  font-size:clamp(15px, 1.13vw, 20px) !important;
  line-height:1.48 !important;
  font-weight:500 !important;
  letter-spacing:.115em !important;
  text-wrap:pretty;
  opacity:1 !important;
  transform:none !important;
  will-change:auto !important;
}

@media (max-width: 1280px){
  .coverage-eyebrow{
    left:8.7%;
    top:13.6%;
  }
  .coverage-title{
    left:8.7% !important;
    width:min(43vw, 560px) !important;
    font-size:clamp(50px, 5.05vw, 72px);
  }
  .coverage-copy{
    left:52.4% !important;
    right:5.6% !important;
  }
  .coverage-item,
  .coverage-item:nth-child(1),
  .coverage-item:nth-child(2),
  .coverage-item:nth-child(3){
    --coverage-number-width:clamp(54px, 5.2vw, 76px);
    --coverage-item-gap:clamp(18px, 1.7vw, 28px);
  }
  .coverage-number{
    font-size:clamp(58px, 5.25vw, 82px);
  }
  .coverage-item-title{
    font-size:clamp(26px, 2.35vw, 36px) !important;
  }
  .coverage-item p{
    width:min(33vw, 430px) !important;
    font-size:clamp(14px, 1.2vw, 17px) !important;
    letter-spacing:.075em !important;
  }
}

@media (max-width: 1080px){
  .section.coverage:not(.hero):not(.story){
    min-height:215vh !important;
  }
  .coverage-eyebrow{
    left:7%;
    top:13.8%;
  }
  .coverage-title{
    left:7% !important;
    top:23.8% !important;
    width:min(42vw, 470px) !important;
    font-size:clamp(40px, 4.9vw, 58px);
  }
  .coverage-copy{
    left:50.8% !important;
    right:3.8% !important;
  }
  .coverage-item:nth-child(1){top:25.0% !important;}
  .coverage-item:nth-child(2){top:47.9% !important;}
  .coverage-item:nth-child(3){top:69.4% !important;}
  .coverage-item,
  .coverage-item:nth-child(1),
  .coverage-item:nth-child(2),
  .coverage-item:nth-child(3){
    --coverage-number-width:clamp(48px, 5.6vw, 64px);
    --coverage-item-gap:clamp(15px, 1.8vw, 22px);
  }
  .coverage-number{
    font-size:clamp(50px, 5.7vw, 70px);
  }
  .coverage-item-title{
    font-size:clamp(22px, 2.55vw, 30px) !important;
    line-height:1.08 !important;
  }
  .coverage-item p{
    width:min(35vw, 350px) !important;
    font-size:clamp(13px, 1.28vw, 15px) !important;
    line-height:1.42 !important;
    letter-spacing:.045em !important;
  }
}

@media (max-width:900.98px){
  .section.coverage:not(.hero):not(.story){
    min-height:225vh !important;
  }
  .coverage-layout.container{
    height:100vh;
    min-height:100vh;
  }
  .coverage-eyebrow{
    left:24px;
    top:9.8vh;
    width:calc(100vw - 48px);
    font-size:clamp(12px, 3.3vw, 14px);
  }
  .coverage-title{
    left:24px !important;
    top:15.8vh !important;
    width:calc(100vw - 48px) !important;
    max-width:620px;
    font-size:clamp(35px, 8.3vw, 56px);
    line-height:.92;
  }
  .coverage-copy{
    left:24px !important;
    right:24px !important;
    top:37.5vh !important;
    bottom:0 !important;
    overflow:visible !important;
  }
  .coverage-item,
  .coverage-item:nth-child(1),
  .coverage-item:nth-child(2),
  .coverage-item:nth-child(3){
    --coverage-number-width:clamp(38px, 9vw, 54px);
    --coverage-item-gap:clamp(12px, 3vw, 18px);
    grid-template-columns:var(--coverage-number-width) minmax(0, 1fr) !important;
  }
  .coverage-item:nth-child(1){top:0 !important;}
  .coverage-item:nth-child(2){top:31% !important;}
  .coverage-item:nth-child(3){top:62% !important;}
  .coverage-number{
    font-size:clamp(42px, 10vw, 58px);
  }
  .coverage-item-copy,
  .coverage-item-title,
  .coverage-item p{
    width:100% !important;
    max-width:440px !important;
  }
  .coverage-item-title{
    font-size:clamp(21px, 5.6vw, 31px) !important;
    line-height:1.05 !important;
    margin-bottom:10px !important;
  }
  .coverage-item p{
    font-size:clamp(12px, 3.0vw, 14px) !important;
    line-height:1.34 !important;
    letter-spacing:.025em !important;
    font-weight:500 !important;
  }
}

@media (max-width: 560px){
  .coverage-eyebrow,
  .coverage-title{
    left:18px !important;
    width:calc(100vw - 36px) !important;
  }
  .coverage-copy{
    left:18px !important;
    right:18px !important;
    top:36.6vh !important;
  }
  .coverage-item,
  .coverage-item:nth-child(1),
  .coverage-item:nth-child(2),
  .coverage-item:nth-child(3){
    --coverage-number-width:37px;
    --coverage-item-gap:12px;
  }
  .coverage-item-title{
    font-size:clamp(19px, 6.2vw, 26px) !important;
  }
  .coverage-item p{
    font-size:12px !important;
  }
}

@media (prefers-reduced-motion: reduce){
  .coverage-item,
  .coverage-item:nth-child(1),
  .coverage-item:nth-child(2),
  .coverage-item:nth-child(3){
    will-change:auto;
  }
}

/* v1.160 — Coverage item proportions from block reference
   Headline and copy are reduced by ~20%; the copy begins at the same left
   edge as the number, while the title remains top-aligned with the number. */
.coverage-item,
.coverage-item:nth-child(1),
.coverage-item:nth-child(2),
.coverage-item:nth-child(3){
  --coverage-number-width:clamp(46px, 3.72vw, 64px) !important;
  --coverage-item-gap:clamp(17px, 1.25vw, 24px) !important;
  row-gap:clamp(17px, 2.05vh, 27px) !important;
  grid-template-columns:var(--coverage-number-width) minmax(0, 1fr) !important;
  grid-template-rows:auto auto !important;
  align-items:start !important;
}

.coverage-number{
  align-self:start !important;
  width:var(--coverage-number-width) !important;
  line-height:.80 !important;
  transform:none !important;
}

.coverage-item-copy{
  display:contents !important;
}

.coverage-item-title{
  grid-column:2 !important;
  grid-row:1 !important;
  align-self:start !important;
  margin:0 !important;
  padding-top:0 !important;
  width:100% !important;
  max-width:100% !important;
  font-size:clamp(22px, 1.72vw, 34px) !important;
  line-height:1.10 !important;
  letter-spacing:-.012em !important;
}

.coverage-item p{
  grid-column:1 / -1 !important;
  grid-row:2 !important;
  align-self:start !important;
  margin:0 !important;
  width:100% !important;
  max-width:min(39.4vw, 650px) !important;
  font-size:clamp(12px, .90vw, 16px) !important;
  line-height:1.52 !important;
  letter-spacing:.115em !important;
}

@media (max-width:1280px){
  .coverage-item,
  .coverage-item:nth-child(1),
  .coverage-item:nth-child(2),
  .coverage-item:nth-child(3){
    --coverage-number-width:clamp(43px, 4vw, 57px) !important;
    --coverage-item-gap:clamp(15px, 1.25vw, 20px) !important;
    row-gap:clamp(15px, 2vh, 23px) !important;
  }
  .coverage-item-title{
    font-size:clamp(21px, 1.88vw, 29px) !important;
  }
  .coverage-item p{
    max-width:min(40.5vw, 540px) !important;
    font-size:clamp(12px, .96vw, 14px) !important;
    line-height:1.50 !important;
    letter-spacing:.085em !important;
  }
}

@media (max-width:1080px){
  .coverage-item,
  .coverage-item:nth-child(1),
  .coverage-item:nth-child(2),
  .coverage-item:nth-child(3){
    --coverage-number-width:clamp(39px, 4.35vw, 50px) !important;
    --coverage-item-gap:clamp(13px, 1.35vw, 17px) !important;
    row-gap:clamp(13px, 1.9vh, 20px) !important;
  }
  .coverage-item-title{
    font-size:clamp(18px, 2.05vw, 24px) !important;
  }
  .coverage-item p{
    max-width:min(43vw, 430px) !important;
    font-size:clamp(11px, 1.02vw, 12px) !important;
    line-height:1.46 !important;
    letter-spacing:.055em !important;
  }
}

@media (max-width:900.98px){
  .coverage-item,
  .coverage-item:nth-child(1),
  .coverage-item:nth-child(2),
  .coverage-item:nth-child(3){
    --coverage-number-width:clamp(35px, 7.2vw, 44px) !important;
    --coverage-item-gap:clamp(11px, 2.5vw, 15px) !important;
    row-gap:clamp(9px, 1.4vh, 14px) !important;
  }
  .coverage-item-title{
    font-size:clamp(17px, 4.45vw, 25px) !important;
    line-height:1.08 !important;
  }
  .coverage-item p{
    max-width:440px !important;
    font-size:clamp(11px, 2.45vw, 12px) !important;
    line-height:1.38 !important;
    letter-spacing:.025em !important;
  }
}

@media (max-width:560px){
  .coverage-item,
  .coverage-item:nth-child(1),
  .coverage-item:nth-child(2),
  .coverage-item:nth-child(3){
    --coverage-number-width:32px !important;
    --coverage-item-gap:10px !important;
    row-gap:8px !important;
  }
  .coverage-item-title{
    font-size:clamp(16px, 5vw, 21px) !important;
  }
  .coverage-item p{
    font-size:11px !important;
    line-height:1.34 !important;
  }
}

/* v1.161 — Coverage detail corrections
   Tighter number/title spacing, lighter item headline, copy lifted 10px,
   and gradient treatment for the coverage numbers. */
.coverage-item,
.coverage-item:nth-child(1),
.coverage-item:nth-child(2),
.coverage-item:nth-child(3){
  --coverage-item-gap:clamp(10px, .75vw, 14px) !important;
  row-gap:clamp(7px, 1.25vh, 17px) !important;
}

.coverage-number{
  color:transparent !important;
  background:linear-gradient(45deg, #304f89 0%, #5e7fbb 100%) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
}

.coverage-item-title{
  font-weight:500 !important;
}

.coverage-item p{
  margin:-10px 0 0 !important;
}

@media (max-width:1280px){
  .coverage-item,
  .coverage-item:nth-child(1),
  .coverage-item:nth-child(2),
  .coverage-item:nth-child(3){
    --coverage-item-gap:clamp(9px, .82vw, 12px) !important;
    row-gap:clamp(6px, 1.2vh, 13px) !important;
  }
}

@media (max-width:1080px){
  .coverage-item,
  .coverage-item:nth-child(1),
  .coverage-item:nth-child(2),
  .coverage-item:nth-child(3){
    --coverage-item-gap:clamp(8px, 1vw, 11px) !important;
    row-gap:clamp(5px, 1.1vh, 10px) !important;
  }
}

@media (max-width:900.98px){
  .coverage-item,
  .coverage-item:nth-child(1),
  .coverage-item:nth-child(2),
  .coverage-item:nth-child(3){
    --coverage-item-gap:clamp(8px, 2vw, 12px) !important;
    row-gap:clamp(5px, 1vh, 8px) !important;
  }
  .coverage-item p{
    margin:-8px 0 0 !important;
  }
}

@media (max-width:560px){
  .coverage-item,
  .coverage-item:nth-child(1),
  .coverage-item:nth-child(2),
  .coverage-item:nth-child(3){
    --coverage-item-gap:8px !important;
    row-gap:5px !important;
  }
  .coverage-item p{
    margin:-6px 0 0 !important;
  }
}

/* v1.162 — Coverage detail corrections
   Pull title closer to the number, move copy 5px farther down from the number,
   and reduce the copy block width by 20%. */
.coverage-item,
.coverage-item:nth-child(1),
.coverage-item:nth-child(2),
.coverage-item:nth-child(3){
  --coverage-item-gap:clamp(6px, .48vw, 9px) !important;
}

.coverage-item p{
  margin:-5px 0 0 !important;
  max-width:min(31.5vw, 520px) !important;
}

@media (max-width:1280px){
  .coverage-item,
  .coverage-item:nth-child(1),
  .coverage-item:nth-child(2),
  .coverage-item:nth-child(3){
    --coverage-item-gap:clamp(6px, .58vw, 9px) !important;
  }
  .coverage-item p{
    max-width:min(32.4vw, 432px) !important;
  }
}

@media (max-width:1080px){
  .coverage-item,
  .coverage-item:nth-child(1),
  .coverage-item:nth-child(2),
  .coverage-item:nth-child(3){
    --coverage-item-gap:clamp(6px, .75vw, 9px) !important;
  }
  .coverage-item p{
    max-width:min(34.4vw, 344px) !important;
  }
}

@media (max-width:900.98px){
  .coverage-item,
  .coverage-item:nth-child(1),
  .coverage-item:nth-child(2),
  .coverage-item:nth-child(3){
    --coverage-item-gap:clamp(6px, 1.55vw, 9px) !important;
  }
  .coverage-item p{
    margin:-4px 0 0 !important;
    max-width:352px !important;
  }
}

@media (max-width:560px){
  .coverage-item,
  .coverage-item:nth-child(1),
  .coverage-item:nth-child(2),
  .coverage-item:nth-child(3){
    --coverage-item-gap:6px !important;
  }
  .coverage-item p{
    margin:-3px 0 0 !important;
    max-width:282px !important;
  }
}

/* v1.165 — Behutsame linke Aufhellung für Über-mich- und Kontakt-Hauptzeilen.
   Baut auf v1.164 auf: nur ein weicher statischer Verlauf auf der linken
   Textseite, die vorhandenen reaktiven Headline-Layer bleiben erhalten. */
@supports ((-webkit-background-clip:text) or (background-clip:text)) {
  .section.services .leistungen-outro-title[data-headline-fx]{
    background-image:
      linear-gradient(90deg,
        rgba(185, 205, 236, .30) 0%,
        rgba(165, 190, 229, .18) 20%,
        rgba(130, 161, 216, .07) 38%,
        rgba(130, 161, 216, 0) 58%),
      radial-gradient(42vw 28vw at 5vw 6vh,
        rgba(248, 251, 255, .46) 0%,
        rgba(232, 241, 255, .36) 18%,
        rgba(170, 202, 250, .16) 38%,
        rgba(18, 35, 79, 0) 72%),
      radial-gradient(26vw 18vw at 9vw 10vh,
        rgba(206, 224, 255, .18) 0%,
        rgba(125, 164, 238, .10) 38%,
        rgba(17, 33, 73, 0) 74%),
      radial-gradient(66vw 58vw at var(--reactive-x, 52vw) var(--reactive-y, 42vh),
        rgba(244, 248, 255, .76) 0%,
        rgba(224, 235, 255, .66) 16%,
        rgba(170, 198, 250, .44) 32%,
        rgba(88, 128, 214, .18) 52%,
        rgba(18, 35, 79, 0) 74%),
      radial-gradient(88vw 76vw at var(--reactive-x-soft, 58vw) var(--reactive-y-soft, 48vh),
        rgba(193, 214, 255, .18) 0%,
        rgba(126, 158, 226, .12) 36%,
        rgba(17, 33, 73, 0) 76%),
      linear-gradient(90deg,
        #1b5cd5 0%,
        #2a67db 14%,
        #4b82e3 34%,
        #79a3ee 56%,
        #c1d6fb 80%,
        #eef4ff 100%);
    background-size:
      100% 100%,
      100vw 100vh,
      100vw 100vh,
      100vw 100vh,
      100vw 100vh,
      100vw 100vh;
    background-position:
      0 0,
      calc(-1 * var(--headline-view-x, 0px)) calc(-1 * var(--headline-view-y, 0px)),
      calc(-1 * var(--headline-view-x, 0px)) calc(-1 * var(--headline-view-y, 0px)),
      calc(-1 * var(--headline-view-x, 0px)) calc(-1 * var(--headline-view-y, 0px)),
      calc(-1 * var(--headline-view-x, 0px)) calc(-1 * var(--headline-view-y, 0px)),
      calc(-1 * var(--headline-view-x, 0px)) calc(-1 * var(--headline-view-y, 0px));
    filter:saturate(.92) brightness(.95) contrast(1.03);
  }

  .section.contact .contact-title[data-headline-fx]{
    background-image:
      linear-gradient(90deg,
        rgba(205, 222, 247, .50) 0%,
        rgba(178, 203, 239, .32) 22%,
        rgba(138, 171, 224, .13) 42%,
        rgba(138, 171, 224, 0) 64%),
      radial-gradient(42vw 28vw at 5vw 6vh,
        rgba(249, 251, 255, .48) 0%,
        rgba(234, 242, 255, .38) 18%,
        rgba(174, 205, 250, .17) 38%,
        rgba(18, 35, 79, 0) 72%),
      radial-gradient(26vw 18vw at 9vw 10vh,
        rgba(209, 226, 255, .19) 0%,
        rgba(128, 167, 239, .10) 38%,
        rgba(17, 33, 73, 0) 74%),
      radial-gradient(62vw 54vw at var(--reactive-x, 52vw) var(--reactive-y, 42vh),
        rgba(246, 249, 255, .78) 0%,
        rgba(226, 236, 255, .68) 16%,
        rgba(174, 201, 250, .46) 32%,
        rgba(89, 129, 214, .18) 52%,
        rgba(18, 35, 79, 0) 74%),
      radial-gradient(84vw 72vw at var(--reactive-x-soft, 58vw) var(--reactive-y-soft, 48vh),
        rgba(195, 216, 255, .18) 0%,
        rgba(126, 158, 226, .12) 36%,
        rgba(17, 33, 73, 0) 76%),
      linear-gradient(90deg,
        #1b5cd5 0%,
        #316edf 16%,
        #5d91e8 42%,
        #a9c7f6 72%,
        #f2f7ff 100%);
    background-size:
      100% 100%,
      100vw 100vh,
      100vw 100vh,
      100vw 100vh,
      100vw 100vh,
      100vw 100vh;
    background-position:
      0 0,
      calc(-1 * var(--headline-view-x, 0px)) calc(-1 * var(--headline-view-y, 0px)),
      calc(-1 * var(--headline-view-x, 0px)) calc(-1 * var(--headline-view-y, 0px)),
      calc(-1 * var(--headline-view-x, 0px)) calc(-1 * var(--headline-view-y, 0px)),
      calc(-1 * var(--headline-view-x, 0px)) calc(-1 * var(--headline-view-y, 0px)),
      calc(-1 * var(--headline-view-x, 0px)) calc(-1 * var(--headline-view-y, 0px));
    filter:saturate(.93) brightness(.96) contrast(1.03);
  }
}


/* v1.166 — Coverage icons instead of numeric markers.
   Uses the supplied DS icon PNGs as decorative markers and scales them from
   the proportion reference: icon diameter is roughly 3.2× the visible title
   height; title sits optically centered on the icon row, while the body copy
   continues to align with the icon's left edge. */
@media (min-width:1081px){
  .coverage-copy{
    left:53.8% !important;
    right:6.7% !important;
  }

  .coverage-item:nth-child(1){top:21.3% !important;}
  .coverage-item:nth-child(2){top:43.25% !important;}
  .coverage-item:nth-child(3){top:64.25% !important;}
}

.coverage-item,
.coverage-item:nth-child(1),
.coverage-item:nth-child(2),
.coverage-item:nth-child(3){
  --coverage-number-width:clamp(76px, 5.32vw, 109px) !important;
  --coverage-item-gap:clamp(20px, 1.5vw, 31px) !important;
  row-gap:clamp(14px, 1.55vh, 23px) !important;
}

.coverage-number.coverage-icon{
  display:block !important;
  width:var(--coverage-number-width) !important;
  height:var(--coverage-number-width) !important;
  min-width:var(--coverage-number-width) !important;
  aspect-ratio:1 / 1;
  object-fit:contain;
  align-self:start !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  color:inherit !important;
  background:none !important;
  -webkit-background-clip:border-box !important;
  background-clip:border-box !important;
  -webkit-text-fill-color:rgba(184,199,243,.66) !important;
  transform:none !important;
}

.coverage-item-title{
  align-self:center !important;
}

.coverage-item p{
  margin:0 !important;
}

@media (max-width:1280px) and (min-width:1081px){
  .coverage-copy{
    left:53.35% !important;
    right:4.65% !important;
  }
  .coverage-item,
  .coverage-item:nth-child(1),
  .coverage-item:nth-child(2),
  .coverage-item:nth-child(3){
    --coverage-number-width:clamp(70px, 5.6vw, 92px) !important;
    --coverage-item-gap:clamp(18px, 1.7vw, 26px) !important;
  }
}

@media (max-width:1080px){
  .coverage-item,
  .coverage-item:nth-child(1),
  .coverage-item:nth-child(2),
  .coverage-item:nth-child(3){
    --coverage-number-width:clamp(56px, 6.7vw, 72px) !important;
    --coverage-item-gap:clamp(14px, 2vw, 22px) !important;
    row-gap:clamp(12px, 1.55vh, 18px) !important;
  }
}

@media (max-width:900.98px){
  .coverage-item,
  .coverage-item:nth-child(1),
  .coverage-item:nth-child(2),
  .coverage-item:nth-child(3){
    --coverage-number-width:clamp(46px, 11vw, 62px) !important;
    --coverage-item-gap:clamp(12px, 3vw, 18px) !important;
    row-gap:clamp(8px, 1.2vh, 13px) !important;
  }
  .coverage-item-title{
    align-self:center !important;
  }
}

@media (max-width:560px){
  .coverage-item,
  .coverage-item:nth-child(1),
  .coverage-item:nth-child(2),
  .coverage-item:nth-child(3){
    --coverage-number-width:42px !important;
    --coverage-item-gap:11px !important;
    row-gap:8px !important;
  }
}

/* v1.167 — Coverage fine tuning: smaller DS icons, kicker alignment, vertical rhythm.
   The coverage eyebrow now uses the same screen anchor as the Leistungen kicker
   on desktop. The headline and right-hand coverage block are nudged upward, while
   the three icon/text rows get more vertical breathing room and remain visually
   centered in the viewport. */
.coverage-item,
.coverage-item:nth-child(1),
.coverage-item:nth-child(2),
.coverage-item:nth-child(3){
  --coverage-number-width:clamp(68px, 4.8vw, 98px) !important;
}

@media (min-width:901px){
  .coverage-eyebrow{
    left:5vw !important;
    top:clamp(72px, 10vh, 116px) !important;
  }

  .coverage-title{
    top:clamp(178px, 20.2vh, 224px) !important;
  }
}

@media (min-width:1081px){
  .coverage-item:nth-child(1){top:19.4% !important;}
  .coverage-item:nth-child(2){top:43.8% !important;}
  .coverage-item:nth-child(3){top:67.9% !important;}
}

@media (max-width:1280px) and (min-width:1081px){
  .coverage-item,
  .coverage-item:nth-child(1),
  .coverage-item:nth-child(2),
  .coverage-item:nth-child(3){
    --coverage-number-width:clamp(63px, 5.04vw, 83px) !important;
  }
}

@media (max-width:1080px){
  .coverage-item,
  .coverage-item:nth-child(1),
  .coverage-item:nth-child(2),
  .coverage-item:nth-child(3){
    --coverage-number-width:clamp(50px, 6.03vw, 65px) !important;
  }
}

@media (max-width:1080px) and (min-width:901px){
  .coverage-title{
    top:clamp(164px, 20.8vh, 198px) !important;
  }
  .coverage-item:nth-child(1){top:22.6% !important;}
  .coverage-item:nth-child(2){top:47.0% !important;}
  .coverage-item:nth-child(3){top:70.7% !important;}
}

@media (max-width:900.98px){
  .coverage-item,
  .coverage-item:nth-child(1),
  .coverage-item:nth-child(2),
  .coverage-item:nth-child(3){
    --coverage-number-width:clamp(41px, 9.9vw, 56px) !important;
  }
}

@media (max-width:560px){
  .coverage-item,
  .coverage-item:nth-child(1),
  .coverage-item:nth-child(2),
  .coverage-item:nth-child(3){
    --coverage-number-width:38px !important;
  }
}

/* v1.168 — Coverage title/block alignment refinement.
   Align the left headline with the coverage eyebrow and with the first
   icon-text row. Tighten the vertical rhythm between rows and reduce the
   horizontal spacing between DS icon and item title. */
@media (min-width:901px){
  .coverage-title{
    left:5vw !important;
  }
}

@media (min-width:1081px){
  .coverage-title{
    top:19.4% !important;
  }

  .coverage-item:nth-child(1){top:19.4% !important;}
  .coverage-item:nth-child(2){top:38.9% !important;}
  .coverage-item:nth-child(3){top:58.2% !important;}

  .coverage-item,
  .coverage-item:nth-child(1),
  .coverage-item:nth-child(2),
  .coverage-item:nth-child(3){
    --coverage-item-gap:clamp(15px, 1.125vw, 23px) !important;
  }
}

@media (max-width:1280px) and (min-width:1081px){
  .coverage-item,
  .coverage-item:nth-child(1),
  .coverage-item:nth-child(2),
  .coverage-item:nth-child(3){
    --coverage-item-gap:clamp(14px, 1.275vw, 20px) !important;
  }
}

@media (max-width:1080px) and (min-width:901px){
  .coverage-title{
    left:5vw !important;
    top:22.6% !important;
  }

  .coverage-item:nth-child(1){top:22.6% !important;}
  .coverage-item:nth-child(2){top:42.1% !important;}
  .coverage-item:nth-child(3){top:60.8% !important;}

  .coverage-item,
  .coverage-item:nth-child(1),
  .coverage-item:nth-child(2),
  .coverage-item:nth-child(3){
    --coverage-item-gap:clamp(11px, 1.5vw, 17px) !important;
  }
}

/* v1.169 — Coverage vertical rhythm fix.
   Stack the three coverage icon/text rows with an exact 35px distance between
   the individual blocks while keeping the first row aligned to the headline. */
@media (min-width:1081px){
  .coverage-copy-inner{
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    top:19.4% !important;
    height:auto !important;
    min-height:0 !important;
    display:flex !important;
    flex-direction:column !important;
    gap:35px !important;
  }

  .coverage-item,
  .coverage-item:nth-child(1),
  .coverage-item:nth-child(2),
  .coverage-item:nth-child(3){
    position:relative !important;
    top:auto !important;
  }
}

@media (max-width:1080px) and (min-width:901px){
  .coverage-copy-inner{
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    top:22.6% !important;
    height:auto !important;
    min-height:0 !important;
    display:flex !important;
    flex-direction:column !important;
    gap:35px !important;
  }

  .coverage-item,
  .coverage-item:nth-child(1),
  .coverage-item:nth-child(2),
  .coverage-item:nth-child(3){
    position:relative !important;
    top:auto !important;
  }
}


/* v1.179 — Coverage left column statement and signature.
   Adds the static trust copy below the coverage headline, aligns the left
   column with the contact title inset, and keeps the right-hand principle
   blocks at their existing positions. */
.coverage-eyebrow,
.coverage-title,
.coverage-statement{
  left:clamp(38px, 8.85vw, 172px) !important;
}

.coverage-title{
  width:min(40.8vw, 690px) !important;
  max-width:690px !important;
}

.coverage-statement{
  position:absolute;
  top:48.0% !important;
  width:min(31.8vw, 527px);
  max-width:527px;
  z-index:3;
  margin:0;
  color:#05070b;
  font-family:var(--font-sans);
  font-size:clamp(14px, 1.02vw, 18px);
  line-height:1.48;
  font-weight:500;
  letter-spacing:.115em;
  text-align:left;
  text-wrap:pretty;
  pointer-events:none;
  transform:translateY(-25px);
}

.coverage-statement p{
  margin:0;
}

.coverage-statement p + p{
  margin-top:clamp(22px, 3.05vh, 36px);
}

.coverage-signature{
  display:block;
  width:clamp(170px, 14.3vw, 255px);
  height:auto;
  margin-top:clamp(22px, 3.2vh, 38px);
  margin-left:0;
  opacity:.94;
  user-select:none;
  pointer-events:none;
}

@media (max-width:1280px){
  .coverage-eyebrow,
  .coverage-title,
  .coverage-statement{
    left:clamp(36px, 8.85vw, 134px) !important;
  }
  .coverage-title{
    width:min(39.4vw, 560px) !important;
  }
  .coverage-statement{
    top:47.4% !important;
    width:min(32.7vw, 434px);
    font-size:clamp(12px, 1.05vw, 14px);
    line-height:1.46;
    letter-spacing:.075em;
  }
  .coverage-signature{
    width:clamp(150px, 13.5vw, 205px);
  }
}

@media (max-width:1080px){
  .coverage-eyebrow,
  .coverage-title,
  .coverage-statement{
    left:7% !important;
  }
  .coverage-title{
    width:min(40.5vw, 470px) !important;
  }
  .coverage-statement{
    top:46.2% !important;
    width:min(33.6vw, 357px);
    font-size:clamp(11px, 1.08vw, 12px);
    line-height:1.42;
    letter-spacing:.045em;
  }
  .coverage-statement p + p{
    margin-top:clamp(16px, 2.25vh, 24px);
  }
  .coverage-signature{
    width:clamp(132px, 13vw, 170px);
    margin-top:clamp(15px, 2.4vh, 24px);
  }
}

@media (max-width:900.98px){
  .section.coverage:not(.hero):not(.story){
    min-height:250vh !important;
  }
  .coverage-eyebrow,
  .coverage-title,
  .coverage-statement{
    left:24px !important;
    width:calc(100vw - 48px) !important;
  }
  .coverage-title{
    top:14.4vh !important;
    max-width:620px !important;
  }
  .coverage-statement{
    top:32.5vh !important;
    width:calc((100vw - 48px) * .85) !important;
    max-width:510px;
    font-size:clamp(12px, 2.7vw, 14px);
    line-height:1.42;
    letter-spacing:.04em;
  }
  .coverage-statement p + p{
    margin-top:14px;
  }
  .coverage-signature{
    width:clamp(130px, 33vw, 185px);
    margin-top:16px;
  }
  .coverage-copy{
    top:62vh !important;
  }
  .coverage-item:nth-child(1){top:0 !important;}
  .coverage-item:nth-child(2){top:28.5% !important;}
  .coverage-item:nth-child(3){top:57% !important;}
}

@media (max-width:560px){
  .coverage-eyebrow,
  .coverage-title,
  .coverage-statement{
    left:18px !important;
    width:calc(100vw - 36px) !important;
  }
  .coverage-title{
    top:14.1vh !important;
  }
  .coverage-statement{
    top:31.5vh !important;
    width:calc((100vw - 36px) * .85) !important;
    font-size:11px;
    line-height:1.36;
    letter-spacing:.025em;
  }
  .coverage-statement p + p{
    margin-top:12px;
  }
  .coverage-signature{
    width:132px;
    margin-top:13px;
  }
  .coverage-copy{
    top:63vh !important;
  }
}


/* v1.189 — Leistungen: seitlich einfahrendes Detailpanel / Leistungsspektrum */
html.has-leistungen-detail-open,
html.has-leistungen-detail-open body{
  overflow: hidden;
}

.leistungen-detail{
  position: fixed;
  inset: 0;
  z-index: 8500;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  pointer-events: none;
  visibility: hidden;
}

.leistungen-detail.is-open,
.leistungen-detail.is-closing{
  visibility: visible;
}

.leistungen-detail-backdrop{
  position: absolute;
  inset: 0;
  display: block;
  border: 0;
  margin: 0;
  padding: 0;
  cursor: default;
  background: rgba(2, 10, 22, 0);
  -webkit-backdrop-filter: blur(0px) brightness(1);
  backdrop-filter: blur(0px) brightness(1);
  opacity: 0;
  transition:
    opacity 300ms ease,
    background-color 300ms ease,
    backdrop-filter 360ms ease,
    -webkit-backdrop-filter 360ms ease;
}

.leistungen-detail.is-open .leistungen-detail-backdrop{
  pointer-events: auto;
  opacity: 1;
  background: rgba(3, 12, 28, .34);
  -webkit-backdrop-filter: blur(8px) brightness(.78);
  backdrop-filter: blur(8px) brightness(.78);
}

.leistungen-detail-panel{
  position: relative;
  z-index: 2;
  width: min(86vw, 1680px);
  min-width: min(86vw, 980px);
  height: min(88vh, 1080px);
  margin-right: clamp(18px, 2.4vw, 46px);
  border-radius: clamp(18px, 1.45vw, 30px);
  background: #f7f7f5;
  color: #101010;
  box-shadow: 0 34px 84px rgba(0,0,0,.25);
  overflow: hidden;
  pointer-events: auto;
  transform: translate3d(108%, 0, 0);
  opacity: .985;
  transition:
    transform 760ms cubic-bezier(.19, .86, .22, 1),
    opacity 520ms ease;
  will-change: transform;
}

.leistungen-detail.is-open .leistungen-detail-panel{
  transform: translate3d(0, 0, 0);
  transition-delay: 135ms, 135ms;
  opacity: 1;
}

.leistungen-detail.is-closing .leistungen-detail-panel{
  transform: translate3d(108%, 0, 0);
  transition-duration: 520ms;
  transition-timing-function: cubic-bezier(.62, 0, .72, .28);
}

.leistungen-detail-close{
  position: absolute;
  right: clamp(38px, 4.1vw, 78px);
  top: clamp(38px, 5.5vh, 76px);
  z-index: 8;
  width: clamp(34px, 2.5vw, 52px);
  height: clamp(34px, 2.5vw, 52px);
  display: grid;
  place-items: center;
  border: 0;
  margin: 0;
  padding: 0;
  color: #0e0e0e;
  background: transparent;
  cursor: pointer;
  transition: color 220ms ease;
}

.leistungen-detail-close span,
.leistungen-detail-close span::before{
  content: "";
  display: block;
  width: clamp(34px, 2.4vw, 50px);
  height: 2px;
  border-radius: 999px;
  background: currentColor;
}

/* v1.223 — Leistungen-Detail: Close-Icon dreht auf Hover wie im Referenzclip */
.leistungen-detail-close span{
  transform: rotate(45deg);
  transform-origin: 50% 50%;
  transition: transform 360ms cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
}

.leistungen-detail-close span::before{
  transform: rotate(90deg);
  transform-origin: 50% 50%;
}

.leistungen-detail-close:hover span,
.leistungen-detail-close:focus-visible span{
  transform: rotate(135deg);
}

@media (prefers-reduced-motion: reduce){
  .leistungen-detail-close span{
    transition-duration: 1ms;
  }
}

.leistungen-detail-close:hover,
.leistungen-detail-close:focus-visible{
  color: #000000;
}

.leistungen-detail-close:focus-visible{
  outline: 1px solid rgba(0,0,0,.55);
  outline-offset: 7px;
  border-radius: 999px;
}

.leistungen-detail-grid{
  height: 100%;
  display: grid;
  grid-template-columns: minmax(310px, .82fr) minmax(500px, 1fr);
  column-gap: clamp(66px, 7vw, 142px);
  padding: clamp(60px, 6.9vh, 88px) clamp(76px, 6.4vw, 124px) clamp(116px, 12.2vh, 162px) clamp(72px, 5.5vw, 108px);
  box-sizing: border-box;
}

.leistungen-detail-left,
.leistungen-detail-right{
  min-width: 0;
}

.leistungen-detail-left{
  display: flex;
  flex-direction: column;
}

.leistungen-detail-title,
.leistungen-detail-right-title{
  margin: 0;
  color: #101010;
  font-family: var(--font-sans);
  font-weight: 400;
  letter-spacing: -.035em;
  line-height: 1.05;
}

.leistungen-detail-title{
  font-size: clamp(32px, 2.65vw, 58px);
}

.leistungen-detail-right-title{
  padding-right: clamp(62px, 5vw, 94px);
  font-size: clamp(31px, 2.55vw, 56px);
}

.leistungen-detail-intro{
  max-width: 52ch;
  margin: clamp(50px, 5.8vh, 78px) 0 0;
  color: #161616;
  font-size: clamp(14.6px, .86vw, 17px);
  line-height: 1.43;
  font-weight: 400;
  letter-spacing: -.01em;
}

.leistungen-detail-highlights{
  display: grid;
  gap: clamp(28px, 3.3vh, 48px);
  margin-top: clamp(54px, 7.2vh, 92px);
  padding-left: clamp(14px, 2.25vw, 46px);
}

.leistungen-detail-highlight{
  display: grid;
  grid-template-columns: clamp(72px, 5.1vw, 106px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 2.4vw, 44px);
}

.leistungen-detail-highlight-icon{
  display: grid;
  place-items: center;
  width: clamp(66px, 4.9vw, 98px);
  height: clamp(58px, 4.4vw, 86px);
}

.leistungen-detail-highlight-icon img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.leistungen-detail-highlight-copy{
  display: block;
}

.leistungen-detail-highlight-title{
  display: block;
  margin: 0 0 clamp(5px, .65vh, 9px);
  color: #111111;
  font-size: clamp(24px, 1.9vw, 38px);
  line-height: 1.02;
  letter-spacing: -.045em;
  font-weight: 500;
}

.leistungen-detail-highlight-text{
  display: block;
  color: #171717;
  font-size: clamp(13px, .8vw, 16px);
  line-height: 1.25;
  letter-spacing: .045em;
  font-weight: 400;
}

.leistungen-detail-outro{
  max-width: 54ch;
  margin: auto 0 0;
  color: #111111;
  font-size: clamp(14.6px, .88vw, 17px);
  line-height: 1.44;
  letter-spacing: -.01em;
  font-weight: 400;
}

.leistungen-detail-accordion{
  margin-top: clamp(30px, 4.6vh, 58px);
  border-top: 1px solid rgba(0,0,0,.14);
}

.leistungen-detail-acc-item{
  border-bottom: 1px solid rgba(0,0,0,.14);
}

.leistungen-detail-acc-button{
  appearance: none;
  width: 100%;
  border: 0;
  margin: 0;
  padding: clamp(25px, 3.4vh, 43px) 0;
  display: grid;
  grid-template-columns: clamp(42px, 3.0vw, 68px) 1fr clamp(30px, 2vw, 42px);
  gap: clamp(10px, 1vw, 18px);
  align-items: center;
  color: #111111;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.leistungen-detail-acc-number,
.leistungen-detail-acc-title{
  font-size: clamp(21px, 1.68vw, 34px);
  line-height: 1.12;
  letter-spacing: -.04em;
  font-weight: 400;
}

.leistungen-detail-acc-number{
  color: #0e0e0e;
}

.leistungen-detail-acc-plus{
  justify-self: end;
  position: relative;
  display: block;
  width: clamp(23px, 1.65vw, 34px);
  height: clamp(23px, 1.65vw, 34px);
}

.leistungen-detail-acc-plus::before,
.leistungen-detail-acc-plus::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(18px, 1.35vw, 28px);
  height: 1.5px;
  border-radius: 999px;
  background: currentColor;
  transform: translate3d(-50%, -50%, 0);
  transition: transform 240ms ease, opacity 240ms ease;
}

.leistungen-detail-acc-plus::after{
  transform: translate3d(-50%, -50%, 0) rotate(90deg);
}

.leistungen-detail-acc-item.is-open .leistungen-detail-acc-plus::after{
  transform: translate3d(-50%, -50%, 0) rotate(0deg);
  opacity: 0;
}

.leistungen-detail-acc-panel{
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 360ms cubic-bezier(.22, .72, .24, 1), opacity 260ms ease;
}

.leistungen-detail-acc-item.is-open .leistungen-detail-acc-panel{
  max-height: 320px;
  opacity: 1;
}

.leistungen-detail-acc-panel ul{
  list-style: none;
  margin: 0;
  padding: 0 0 clamp(25px, 3.25vh, 42px) clamp(42px, 3.0vw, 68px);
}

.leistungen-detail-acc-panel li{
  position: relative;
  margin: 0 0 clamp(10px, 1.22vh, 16px);
  color: #121212;
  font-size: clamp(13.5px, .9vw, 17px);
  line-height: 1.3;
  font-weight: 400;
  letter-spacing: -.015em;
}

.leistungen-detail-acc-panel li:last-child{
  margin-bottom: 0;
}

.leistungen-detail-acc-panel li::before{
  content: "•";
  margin-right: .35em;
}

.leistungen-detail-cta{
  --detail-cta-width: clamp(220px, 14.8vw, 326px);
  --detail-cta-height: calc(var(--detail-cta-width) / 4.12);
  --detail-cta-circle-size: calc(var(--detail-cta-height) * .82);
  position: absolute;
  left: 50%;
  bottom: clamp(36px, 4.0vh, 64px);
  z-index: 5;
  display: block;
  width: var(--detail-cta-width);
  height: var(--detail-cta-height);
  border-radius: 999px;
  background: #121212;
  color: #ffffff;
  text-decoration: none !important;
  transform: translate3d(-50%, 0, 0);
  overflow: hidden;
}

.leistungen-detail-cta:visited,
.leistungen-detail-cta:hover,
.leistungen-detail-cta:focus,
.leistungen-detail-cta:focus-visible{
  color: #ffffff;
  text-decoration: none !important;
}

.leistungen-detail-cta > span:first-child{
  position: absolute;
  left: calc(var(--detail-cta-height) * .68);
  right: calc(var(--detail-cta-circle-size) + calc(var(--detail-cta-height) * .50));
  top: 50%;
  display: block;
  transform: translate3d(0, -50%, 0);
  color: currentColor;
  font-size: clamp(13px, .85vw, 17px);
  line-height: 1;
  font-weight: 400;
  white-space: nowrap;
}

.leistungen-detail-cta-circle{
  position: absolute;
  right: calc((var(--detail-cta-height) - var(--detail-cta-circle-size)) / 2);
  top: 50%;
  display: grid;
  place-items: center;
  width: var(--detail-cta-circle-size);
  height: var(--detail-cta-circle-size);
  border-radius: 999px;
  background: #ffffff;
  color: #111111;
  transform: translate3d(0, -50%, 0);
}

.leistungen-detail-cta-circle svg{
  display: block;
  width: 48%;
  height: 48%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.leistungen-detail-cta:focus-visible{
  outline: 1px solid rgba(0,0,0,.52);
  outline-offset: 6px;
}

@media (max-width: 1100px){
  .leistungen-detail-panel{
    width: min(92vw, 980px);
    min-width: 0;
    height: min(90vh, 980px);
    margin-right: 4vw;
    overflow-y: auto;
  }

  .leistungen-detail-grid{
    grid-template-columns: 1fr;
    row-gap: 48px;
    height: auto;
    min-height: 100%;
    padding: 64px clamp(34px, 7vw, 72px) 124px;
  }

  .leistungen-detail-outro{
    margin-top: 48px;
  }
}

@media (max-width: 760px){
  .leistungen-topline{
    align-items: flex-start;
    gap: 18px;
  }

  .leistungen-spectrum-trigger{
    font-size: 12px;
    letter-spacing: .11em;
    gap: 9px;
    max-width: 52vw;
    white-space: normal;
    line-height: 1.25;
    text-align: right;
  }

  .leistungen-detail{
    justify-content: center;
    align-items: flex-end;
  }

  .leistungen-detail-panel{
    width: 100vw;
    height: 92vh;
    margin-right: 0;
    border-radius: 22px 22px 0 0;
  }

  .leistungen-detail.is-open .leistungen-detail-panel{
    transform: translate3d(0, 0, 0);
  }

  .leistungen-detail-panel,
  .leistungen-detail.is-closing .leistungen-detail-panel{
    transform: translate3d(0, 108%, 0);
  }

  .leistungen-detail-close{
    right: 24px;
    top: 24px;
  }

  .leistungen-detail-grid{
    padding: 58px 24px 116px;
  }

  .leistungen-detail-highlights{
    padding-left: 0;
  }

  .leistungen-detail-highlight{
    grid-template-columns: 66px 1fr;
    gap: 20px;
  }

  .leistungen-detail-right-title{
    padding-right: 54px;
  }
}

@media (prefers-reduced-motion: reduce){
  .leistungen-detail-backdrop,
  .leistungen-detail-panel,
  .leistungen-detail-acc-panel,
  .leistungen-detail-acc-plus::before,
  .leistungen-detail-acc-plus::after{
    transition: none !important;
  }

  .leistungen-detail.is-open .leistungen-detail-panel,
  .leistungen-detail-panel{
    transform: none;
  }
}

/* v1.190 — Leistungen-Detail: Fine-Tuning Skalierung, Lesbarkeit, Backdrop und CTA */
.leistungen-detail-panel{
  --leistungen-detail-fit: 1;
  color:#000000;
}

.leistungen-detail-panel :where(
  .leistungen-detail-title,
  .leistungen-detail-right-title,
  .leistungen-detail-intro,
  .leistungen-detail-highlight-title,
  .leistungen-detail-highlight-text,
  .leistungen-detail-outro,
  .leistungen-detail-acc-button,
  .leistungen-detail-acc-number,
  .leistungen-detail-acc-title,
  .leistungen-detail-acc-panel li,
  .leistungen-detail-close
){
  color:#000000 !important;
}

.leistungen-detail-backdrop{
  background:rgba(3, 12, 28, 0);
  -webkit-backdrop-filter:blur(0px) brightness(1);
  backdrop-filter:blur(0px) brightness(1);
  transition:
    opacity 620ms ease,
    background-color 760ms cubic-bezier(.22,.61,.36,1),
    backdrop-filter 820ms cubic-bezier(.22,.61,.36,1),
    -webkit-backdrop-filter 820ms cubic-bezier(.22,.61,.36,1);
}

.leistungen-detail.is-open .leistungen-detail-backdrop{
  background:rgba(4, 14, 31, .13);
  -webkit-backdrop-filter:blur(5px) brightness(.93);
  backdrop-filter:blur(5px) brightness(.93);
}

.leistungen-detail-grid{
  transform:scale(var(--leistungen-detail-fit));
  transform-origin:center top;
  transition:transform 260ms cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}

.leistungen-detail-cta{
  --detail-cta-width:calc(clamp(178px, 11.76vw, 224px) + 10px);
  --detail-cta-height:calc(var(--detail-cta-width) / 4.1212);
  --detail-cta-circle-size:calc(var(--detail-cta-height) * .82);
  --detail-cta-pad-left:calc(var(--detail-cta-height) * .62);
  --detail-cta-pad-right:calc((var(--detail-cta-height) - var(--detail-cta-circle-size)) / 2);
  width:var(--detail-cta-width);
  height:var(--detail-cta-height);
  bottom:calc(clamp(34px, 4.2vh, 58px) * var(--leistungen-detail-fit));
  background:#151515;
  color:#f5f5f5;
  isolation:isolate;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.035);
  transform:translate3d(-50%, 0, 0) scale(var(--leistungen-detail-fit));
  transform-origin:center bottom;
}

.leistungen-detail-cta:visited,
.leistungen-detail-cta:hover,
.leistungen-detail-cta:focus,
.leistungen-detail-cta:focus-visible{
  color:#f5f5f5;
  text-decoration:none !important;
}

.leistungen-detail-cta .leistungen-detail-cta-text{
  position:absolute;
  left:var(--detail-cta-pad-left);
  right:calc(var(--detail-cta-circle-size) + var(--detail-cta-pad-right) + calc(var(--detail-cta-height) * .22));
  top:50%;
  z-index:1;
  display:block;
  min-width:0;
  overflow:visible;
  text-overflow:clip;
  white-space:nowrap;
  transform:translate3d(0, -50%, 0);
  color:#f5f5f5;
  font-size:clamp(14px, min(.86vw, 1.58vh), 16.5px);
  line-height:1;
  font-weight:400;
  letter-spacing:.01em;
  text-decoration:none !important;
}

.leistungen-detail-cta-circle{
  right:var(--detail-cta-pad-right);
  display:block;
  width:var(--detail-cta-circle-size);
  height:var(--detail-cta-circle-size);
  background:#f5f5f5;
  color:#151515;
  overflow:hidden;
}

.leistungen-detail-cta-arrow{
  position:absolute;
  left:50%;
  top:50%;
  display:block;
  width:48%;
  height:48%;
  fill:none;
  stroke:currentColor;
  stroke-width:2.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  transform:translate3d(-50%, -50%, 0) translateX(0);
  will-change:transform, opacity;
}

.leistungen-detail-cta-arrow--primary{
  opacity:1;
}

.leistungen-detail-cta-arrow--secondary{
  opacity:0;
  transform:translate3d(-50%, -50%, 0) translateX(-150%);
}

.leistungen-detail-cta:hover .leistungen-detail-cta-arrow--primary,
.leistungen-detail-cta:focus-visible .leistungen-detail-cta-arrow--primary{
  animation:aboutReferencesArrowOut .68s linear both;
}

.leistungen-detail-cta:hover .leistungen-detail-cta-arrow--secondary,
.leistungen-detail-cta:focus-visible .leistungen-detail-cta-arrow--secondary{
  animation:aboutReferencesArrowIn .68s linear both;
}

.leistungen-detail-cta:focus-visible{
  outline:1px solid rgba(0,0,0,.52);
  outline-offset:4px;
}

@media (max-width:900.98px){
  .leistungen-detail-cta{
    --detail-cta-width:calc(clamp(167px, 23.8vw, 213px) + 10px);
  }
}

@media (max-width: 760px){
  .leistungen-detail-grid,
  .leistungen-detail-cta{
    transform:none;
  }

  .leistungen-detail-cta{
    --detail-cta-width:calc(min(54.6vw, 200px) + 10px);
    bottom:24px;
  }

  .leistungen-detail-cta .leistungen-detail-cta-text{
    font-size:clamp(13px, 3.8vw, 15.5px);
  }
}

@media (prefers-reduced-motion: reduce){
  .leistungen-detail-grid,
  .leistungen-detail-cta,
  .leistungen-detail-cta-text,
  .leistungen-detail-cta-circle,
  .leistungen-detail-cta-arrow{
    animation:none !important;
    transition:none !important;
  }
}

/* v1.190 — proportionaler Inhalts-Fit ohne Verschieben der Panel-Komposition */
.leistungen-detail-grid{
  transform:none;
  column-gap:calc(clamp(66px, 7vw, 142px) * var(--leistungen-detail-fit));
  padding:
    calc(clamp(60px, 6.9vh, 88px) * var(--leistungen-detail-fit))
    calc(clamp(76px, 6.4vw, 124px) * var(--leistungen-detail-fit))
    calc(clamp(116px, 12.2vh, 162px) * var(--leistungen-detail-fit))
    calc(clamp(72px, 5.5vw, 108px) * var(--leistungen-detail-fit));
}

.leistungen-detail-title{
  font-size:calc(clamp(32px, 2.65vw, 58px) * var(--leistungen-detail-fit));
}

.leistungen-detail-right-title{
  padding-right:calc(clamp(62px, 5vw, 94px) * var(--leistungen-detail-fit));
  font-size:calc(clamp(31px, 2.55vw, 56px) * var(--leistungen-detail-fit));
}

.leistungen-detail-intro{
  margin-top:calc(clamp(50px, 5.8vh, 78px) * var(--leistungen-detail-fit));
  font-size:calc(clamp(14.6px, .86vw, 17px) * var(--leistungen-detail-fit));
}

.leistungen-detail-highlights{
  gap:calc(clamp(28px, 3.3vh, 48px) * var(--leistungen-detail-fit));
  margin-top:calc(clamp(54px, 7.2vh, 92px) * var(--leistungen-detail-fit));
  padding-left:calc(clamp(14px, 2.25vw, 46px) * var(--leistungen-detail-fit));
}

.leistungen-detail-highlight{
  grid-template-columns:calc(clamp(72px, 5.1vw, 106px) * var(--leistungen-detail-fit)) minmax(0, 1fr);
  gap:calc(clamp(28px, 2.4vw, 44px) * var(--leistungen-detail-fit));
}

.leistungen-detail-highlight-icon{
  width:calc(clamp(66px, 4.9vw, 98px) * var(--leistungen-detail-fit));
  height:calc(clamp(58px, 4.4vw, 86px) * var(--leistungen-detail-fit));
}

.leistungen-detail-highlight-title{
  margin-bottom:calc(clamp(5px, .65vh, 9px) * var(--leistungen-detail-fit));
  font-size:calc(clamp(24px, 1.9vw, 38px) * var(--leistungen-detail-fit));
}

.leistungen-detail-highlight-text{
  font-size:calc(clamp(13px, .8vw, 16px) * var(--leistungen-detail-fit));
}

.leistungen-detail-outro{
  font-size:calc(clamp(14.6px, .88vw, 17px) * var(--leistungen-detail-fit));
}

.leistungen-detail-accordion{
  margin-top:calc(clamp(30px, 4.6vh, 58px) * var(--leistungen-detail-fit));
}

.leistungen-detail-acc-button{
  padding:calc(clamp(25px, 3.4vh, 43px) * var(--leistungen-detail-fit)) 0;
  grid-template-columns:
    calc(clamp(42px, 3.0vw, 68px) * var(--leistungen-detail-fit))
    1fr
    calc(clamp(30px, 2vw, 42px) * var(--leistungen-detail-fit));
  gap:calc(clamp(10px, 1vw, 18px) * var(--leistungen-detail-fit));
}

.leistungen-detail-acc-number,
.leistungen-detail-acc-title{
  font-size:calc(clamp(21px, 1.68vw, 34px) * var(--leistungen-detail-fit));
}

.leistungen-detail-acc-plus{
  width:calc(clamp(23px, 1.65vw, 34px) * var(--leistungen-detail-fit));
  height:calc(clamp(23px, 1.65vw, 34px) * var(--leistungen-detail-fit));
}

.leistungen-detail-acc-plus::before,
.leistungen-detail-acc-plus::after{
  width:calc(clamp(18px, 1.35vw, 28px) * var(--leistungen-detail-fit));
}

.leistungen-detail-acc-panel ul{
  padding:
    0
    0
    calc(clamp(25px, 3.25vh, 42px) * var(--leistungen-detail-fit))
    calc(clamp(42px, 3.0vw, 68px) * var(--leistungen-detail-fit));
}

.leistungen-detail-acc-panel li{
  margin-bottom:calc(clamp(10px, 1.22vh, 16px) * var(--leistungen-detail-fit));
  font-size:calc(clamp(13.5px, .9vw, 17px) * var(--leistungen-detail-fit));
}

.leistungen-detail-cta{
  bottom:clamp(34px, 4.2vh, 58px);
  transform:translate3d(-50%, 0, 0);
}

@media (max-width: 1100px){
  .leistungen-detail-grid{
    row-gap:calc(48px * var(--leistungen-detail-fit));
    height:auto;
    min-height:100%;
    padding:
      calc(64px * var(--leistungen-detail-fit))
      clamp(34px, 7vw, 72px)
      calc(124px * var(--leistungen-detail-fit));
  }

  .leistungen-detail-outro{
    margin-top:calc(48px * var(--leistungen-detail-fit));
  }
}

@media (max-width: 760px){
  .leistungen-detail-grid{
    transform:none;
    column-gap:0;
    padding:58px 24px 116px;
  }

  .leistungen-detail-highlights{
    padding-left:0;
  }

  .leistungen-detail-highlight{
    grid-template-columns:66px 1fr;
    gap:20px;
  }

  .leistungen-detail-right-title{
    padding-right:54px;
  }

  .leistungen-detail-cta{
    bottom:24px;
    transform:translate3d(-50%, 0, 0);
  }
}


/* v1.191 — Leistungen-Detail: CTA nur verbreitert, Outro entkoppelt, Hintergrund-Scroll pausiert */
html.has-leistungen-detail-open body{
  position: fixed;
  left: 0;
  right: 0;
  top: var(--leistungen-detail-scroll-top, 0px);
  width: 100%;
  min-height: 100vh;
}

.leistungen-detail-outro{
  margin: calc(clamp(54px, 7.2vh, 92px) * var(--leistungen-detail-fit)) 0 0;
}

.leistungen-detail-cta{
  --detail-cta-base-width: clamp(178px, 11.76vw, 224px);
  --detail-cta-width: calc(var(--detail-cta-base-width) + 40px);
  --detail-cta-height: calc((var(--detail-cta-base-width) + 10px) / 4.1212);
}

@media (max-width:900.98px){
  .leistungen-detail-cta{
    --detail-cta-base-width: clamp(167px, 23.8vw, 213px);
  }
}

@media (max-width: 760px){
  .leistungen-detail-cta{
    --detail-cta-base-width: min(54.6vw, 200px);
  }
}


/* v1.193 — Leistungen-Detail: Scroll-Lock ohne Layout-Eingriff; Sticky-Hintergrund bleibt sichtbar */
html.has-leistungen-detail-open,
html.has-leistungen-detail-open body{
  overflow:visible !important;
}

html.has-leistungen-detail-open{
  overscroll-behavior:none;
}

html.has-leistungen-detail-open body{
  position:static;
  top:auto;
  left:auto;
  right:auto;
  width:auto;
  min-height:auto;
}

.leistungen-detail-panel{
  overscroll-behavior:contain;
}

/* v1.194 — Referenz-Einzelseite: Layout gemäß Referenzbild mit blauer Bühne, Globus/Marker und Pfeilnavigation */
body.reference-detail-page{
  --reference-detail-blue-height: clamp(360px, 39.2vh, 520px);
  --reference-detail-content-left: clamp(470px, 39vw, 630px);
  --reference-detail-content-width: min(34vw, 640px);
  height:100vh;
  min-height:100vh;
  overflow:hidden !important;
  background:#ffffff !important;
  color:#111111;
}

body.reference-detail-page .footer{
  display:none !important;
}

body.reference-detail-page .reference-detail-main,
body.reference-detail-page .reference-detail-layout{
  height:100vh;
  min-height:100vh;
  max-height:100vh;
  overflow:hidden;
  background:#ffffff !important;
}

body.reference-detail-page .reference-detail-layout{
  position:relative;
  padding:0 !important;
  isolation:isolate;
  background:#ddf1fb !important;
}

body.reference-detail-page .reference-detail-blue{
  position:absolute;
  z-index:4;
  inset:0 0 auto 0;
  height:var(--reference-detail-blue-height);
  overflow:hidden;
  pointer-events:none;
  background:
    radial-gradient(circle at 13% 23%, rgba(84,129,195,.86) 0%, rgba(84,129,195,.56) 18%, rgba(84,129,195,.18) 42%, rgba(84,129,195,0) 66%),
    radial-gradient(circle at 70% 43%, rgba(78,146,174,.32) 0%, rgba(78,146,174,.18) 23%, rgba(78,146,174,0) 52%),
    linear-gradient(113deg, #295e98 0%, #174c80 30%, #0e3d63 56%, #061625 100%);
}

body.reference-detail-page .reference-detail-blue-vignette{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 30%),
    linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 42%);
  opacity:.76;
}
body.reference-detail-page .reference-detail-heading{
  position:absolute;
  z-index:6;
  left:var(--reference-detail-content-left);
  top:clamp(116px, 12.1vh, 156px);
  width:min(56vw, 1040px);
  color:#ffffff;
  pointer-events:auto;
}

body.reference-detail-page .reference-detail-kicker{
  display:inline-block;
  margin:0 0 clamp(30px, 3.1vh, 42px);
  font-family:var(--font-sans);
  font-size:clamp(12px, .92vw, 16px);
  line-height:1;
  letter-spacing:.115em;
  font-weight:500;
  text-transform:uppercase;
  color:rgba(255,255,255,.92);
  text-decoration:none;
}

body.reference-detail-page .reference-detail-kicker:hover,
body.reference-detail-page .reference-detail-kicker:focus-visible{
  color:#ffffff;
  text-decoration:none;
}

body.reference-detail-page .reference-detail-title{
  margin:0;
  max-width:min(100%, 1030px);
  font-family:var(--font-display-serif), var(--font-serif);
  font-size:clamp(54px, 5.1vw, 96px);
  line-height:.86;
  letter-spacing:.003em;
  font-weight:400;
  color:rgba(174,191,242,.62);
  text-wrap:balance;
}

body.reference-detail-page .reference-detail-meta{
  margin:clamp(36px, 4.6vh, 60px) 0 0;
  font-family:var(--font-sans);
  font-size:clamp(14px, 1.03vw, 20px);
  line-height:1.18;
  letter-spacing:.005em;
  font-weight:400;
  text-transform:none;
  color:rgba(255,255,255,.78);
}

body.reference-detail-page .reference-detail-content{
  position:absolute;
  z-index:2;
  inset:0 auto 0 var(--reference-detail-content-left);
  width:var(--reference-detail-content-width);
  max-width:640px;
  height:100vh;
  max-height:100vh;
  padding:0;
  overflow-y:auto !important;
  overflow-x:hidden;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  -ms-overflow-style:none;
  touch-action:pan-y;
  background:transparent;
}

body.reference-detail-page .reference-detail-content::-webkit-scrollbar{
  width:0;
  height:0;
  display:none;
}

body.reference-detail-page .reference-detail-scroll-inner{
  min-height:auto;
  padding-top:calc(var(--reference-detail-blue-height) + clamp(42px, 4.7vh, 62px));
  padding-bottom:0;
  box-sizing:border-box;
}

body.reference-detail-page .reference-detail-scroll-inner::after{
  content:"";
  display:block;
  height:28vh;
  min-height:28vh;
}

body.reference-detail-page .reference-detail-text{
  max-width:100%;
  padding:0;
  font-family:var(--font-sans);
  font-size:clamp(16px, 1.02vw, 20px);
  line-height:1.39;
  letter-spacing:.005em;
  font-weight:600;
  color:#080808;
}

body.reference-detail-page .reference-detail-text p,
body.reference-detail-page .reference-detail-text ul{
  margin:0 0 clamp(22px, 2.6vh, 34px) 0;
}

body.reference-detail-page .reference-detail-text ul{
  padding-left:1.15em;
}

body.reference-detail-page .reference-detail-text li{
  margin:.22em 0;
}

body.reference-detail-page .reference-detail-text a{
  color:#1f4187;
  font-weight:700;
  text-decoration:none;
}

body.reference-detail-page .reference-detail-text a:hover,
body.reference-detail-page .reference-detail-text a:focus-visible{
  text-decoration:underline;
}

body.reference-detail-page .reference-detail-arrows{
  position:absolute;
  z-index:8;
  inset:0;
  pointer-events:none;
}

body.reference-detail-page .reference-detail-arrow{
  position:absolute;
  top:calc(var(--reference-detail-blue-height) + ((100vh - var(--reference-detail-blue-height)) * .50));
  width:clamp(58px, 5.1vw, 82px);
  height:clamp(58px, 5.1vw, 82px);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#2c5e95;
  pointer-events:auto;
  transform:translateY(-50%);
  text-decoration:none;
  opacity:.96;
  transition:opacity .22s cubic-bezier(.22,1,.36,1), transform .22s cubic-bezier(.22,1,.36,1), color .22s cubic-bezier(.22,1,.36,1);
}

body.reference-detail-page .reference-detail-arrow:hover,
body.reference-detail-page .reference-detail-arrow:focus-visible{
  color:#1f4187;
  opacity:1;
  text-decoration:none;
}

body.reference-detail-page .reference-detail-arrow:focus-visible{
  outline:2px solid rgba(31,65,135,.32);
  outline-offset:8px;
}

body.reference-detail-page .reference-detail-arrow--prev{
  left:clamp(62px, 7.4vw, 150px);
}

body.reference-detail-page .reference-detail-arrow--next{
  right:clamp(62px, 7.4vw, 150px);
}

body.reference-detail-page .reference-detail-arrow span{
  display:block;
  width:clamp(34px, 3.25vw, 54px);
  height:clamp(34px, 3.25vw, 54px);
  border-color:currentColor;
  border-style:solid;
  border-width:0 0 clamp(3px, .24vw, 5px) clamp(3px, .24vw, 5px);
}

body.reference-detail-page .reference-detail-arrow--prev span{
  transform:rotate(45deg);
}

body.reference-detail-page .reference-detail-arrow--next span{
  transform:rotate(225deg);
}

body.reference-detail-page .reference-detail-left,
body.reference-detail-page .reference-detail-nav{
  display:none !important;
}

body.reference-detail-page .reference-detail-content:focus{
  outline:none;
}

body.reference-detail-page .reference-detail-content:focus-visible{
  outline:2px solid rgba(31,65,135,.20);
  outline-offset:10px;
}

@media (max-width: 1180px){
  body.reference-detail-page{
    --reference-detail-content-left:clamp(360px, 37vw, 470px);
    --reference-detail-content-width:min(45vw, 560px);
  }

  body.reference-detail-page .reference-detail-heading{
    width:min(58vw, 760px);
  }

  body.reference-detail-page .reference-detail-title{
    font-size:clamp(48px, 5.4vw, 72px);
  }
}

@media (max-width:900.98px){
  body.reference-detail-page{
    --reference-detail-blue-height:clamp(390px, 46vh, 520px);
    --reference-detail-content-left:clamp(22px, 7vw, 48px);
    --reference-detail-content-width:calc(100vw - (var(--reference-detail-content-left) * 2));
    height:100vh;
    min-height:100vh;
    overflow:hidden !important;
  }

  body.reference-detail-page .reference-detail-blue{
    height:var(--reference-detail-blue-height);
  }
body.reference-detail-page .reference-detail-heading{
    left:var(--reference-detail-content-left);
    right:var(--reference-detail-content-left);
    top:clamp(94px, 11vh, 126px);
    width:auto;
  }

  body.reference-detail-page .reference-detail-kicker{
    margin-bottom:24px;
  }

  body.reference-detail-page .reference-detail-title{
    max-width:min(100%, 10.6em);
    font-size:clamp(42px, 10.5vw, 68px);
    line-height:.9;
  }

  body.reference-detail-page .reference-detail-meta{
    margin-top:clamp(28px, 4vh, 42px);
    font-size:clamp(13px, 3.2vw, 16px);
  }

  body.reference-detail-page .reference-detail-content{
    left:var(--reference-detail-content-left);
    width:var(--reference-detail-content-width);
    max-width:none;
  }

  body.reference-detail-page .reference-detail-scroll-inner{
    padding-top:calc(var(--reference-detail-blue-height) + 34px);
  }

  body.reference-detail-page .reference-detail-text{
    font-size:clamp(15px, 3.9vw, 18px);
    line-height:1.47;
    font-weight:500;
  }

  body.reference-detail-page .reference-detail-arrow{
    top:calc(var(--reference-detail-blue-height) + 48px);
    width:48px;
    height:48px;
  }

  body.reference-detail-page .reference-detail-arrow--prev{
    left:var(--reference-detail-content-left);
  }

  body.reference-detail-page .reference-detail-arrow--next{
    right:var(--reference-detail-content-left);
  }

  body.reference-detail-page .reference-detail-arrow span{
    width:26px;
    height:26px;
    border-width:0 0 3px 3px;
  }
}

@media (max-width: 520px){
  body.reference-detail-page{
    --reference-detail-blue-height:clamp(360px, 47vh, 450px);
  }

  body.reference-detail-page .reference-detail-title{
    font-size:clamp(36px, 11.5vw, 54px);
  }
}

/* v1.196 — Referenz-Einzelseite: niedrigerer Header, dunklere linke Kante, feinere Texttypografie und Content-Fade */
body.reference-detail-page{
  --reference-detail-blue-height: clamp(324px, 35.28vh, 468px);
}

body.reference-detail-page .reference-detail-blue{
  background:
    linear-gradient(90deg, rgba(2,10,23,.42) 0%, rgba(3,13,28,.24) 18%, rgba(3,13,28,0) 39%),
    radial-gradient(circle at 13% 23%, rgba(84,129,195,.82) 0%, rgba(84,129,195,.52) 18%, rgba(84,129,195,.16) 42%, rgba(84,129,195,0) 66%),
    radial-gradient(circle at 70% 43%, rgba(78,146,174,.30) 0%, rgba(78,146,174,.17) 23%, rgba(78,146,174,0) 52%),
    linear-gradient(113deg, #1d4e84 0%, #174b7e 30%, #0e3d63 56%, #061625 100%);
}

body.reference-detail-page .reference-detail-title,
body.reference-detail-page .reference-detail-meta,
body.reference-detail-page .reference-detail-text{
  transition:
    opacity .58s cubic-bezier(.22,1,.36,1),
    transform .58s cubic-bezier(.22,1,.36,1),
    filter .58s cubic-bezier(.22,1,.36,1);
  will-change:opacity, transform, filter;
}

body.reference-detail-page.is-reference-content-fading .reference-detail-title,
body.reference-detail-page.is-reference-content-fading .reference-detail-meta,
body.reference-detail-page.is-reference-content-fading .reference-detail-text{
  opacity:0;
  transform:translate3d(0, 10px, 0);
  filter:blur(3px);
}

body.reference-detail-page .reference-detail-text{
  color:#000000 !important;
  font-size:clamp(14px, .92vw, 18px);
  line-height:1.43;
  font-weight:400 !important;
  letter-spacing:.002em;
}

@media (max-width:900.98px){
  body.reference-detail-page{
    --reference-detail-blue-height:clamp(351px, 41.4vh, 468px);
  }

  body.reference-detail-page .reference-detail-text{
    color:#000000 !important;
    font-size:clamp(14px, 3.55vw, 17px);
    line-height:1.48;
    font-weight:400 !important;
  }
}

@media (max-width: 520px){
  body.reference-detail-page{
    --reference-detail-blue-height:clamp(324px, 42.3vh, 405px);
  }
}

@media (prefers-reduced-motion: reduce){
  body.reference-detail-page .reference-detail-title,
  body.reference-detail-page .reference-detail-meta,
  body.reference-detail-page .reference-detail-text{
    transition:none !important;
    transform:none !important;
    filter:none !important;
  }
}

/* v1.197 — Referenz-Einzelseite: Header-Inhalt unten verankert, Textfarbe auf Absatzebene fixiert, Fade ohne Bewegung */
body.reference-detail-page .reference-detail-heading{
  top:auto;
  bottom:clamp(28px, 3.4vh, 44px);
}

body.reference-detail-page .reference-detail-title,
body.reference-detail-page .reference-detail-meta,
body.reference-detail-page .reference-detail-text{
  transition:
    opacity .58s cubic-bezier(.22,1,.36,1),
    filter .58s cubic-bezier(.22,1,.36,1);
  will-change:opacity, filter;
  transform:none !important;
}

body.reference-detail-page.is-reference-content-fading .reference-detail-title,
body.reference-detail-page.is-reference-content-fading .reference-detail-meta,
body.reference-detail-page.is-reference-content-fading .reference-detail-text{
  opacity:0;
  transform:none !important;
  filter:blur(3px);
}

body.reference-detail-page .reference-detail-text,
body.reference-detail-page .reference-detail-text p,
body.reference-detail-page .reference-detail-text ul,
body.reference-detail-page .reference-detail-text li{
  color:#000000 !important;
  font-weight:400 !important;
}

@media (max-width:900.98px){
  body.reference-detail-page .reference-detail-heading{
    top:auto;
    bottom:clamp(26px, 4vh, 38px);
  }
}

@media (max-width: 520px){
  body.reference-detail-page .reference-detail-heading{
    bottom:clamp(22px, 4vh, 32px);
  }
}

body.reference-detail-page .reference-detail-heading{
  top:auto !important;
  bottom:clamp(24px, 3.05vh, 38px) !important;
  max-height:calc(var(--reference-detail-blue-height) - clamp(48px, 6vh, 80px));
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  overflow:visible;
}

body.reference-detail-page .reference-detail-kicker{
  margin-bottom:clamp(18px, 2.15vh, 28px) !important;
  color:rgba(255,255,255,.94) !important;
}

body.reference-detail-page .reference-detail-title{
  font-size:clamp(48px, 4.65vw, 82px) !important;
  line-height:.88 !important;
}

body.reference-detail-page .reference-detail-meta{
  margin-top:clamp(18px, 2.55vh, 32px) !important;
  color:rgba(255,255,255,.82) !important;
}

@media (max-width: 1180px){
  body.reference-detail-page .reference-detail-title{
    font-size:clamp(44px, 5.05vw, 68px) !important;
  }

  body.reference-detail-page .reference-detail-kicker{
    margin-bottom:clamp(16px, 2vh, 24px) !important;
  }

  body.reference-detail-page .reference-detail-meta{
    margin-top:clamp(16px, 2.4vh, 28px) !important;
  }
}

@media (max-width:900.98px){
body.reference-detail-page .reference-detail-heading{
    bottom:clamp(22px, 3.7vh, 34px) !important;
    max-height:calc(var(--reference-detail-blue-height) - clamp(44px, 7vh, 70px));
  }

  body.reference-detail-page .reference-detail-title{
    font-size:clamp(40px, 9.8vw, 62px) !important;
    line-height:.9 !important;
  }
}

@media (max-width: 520px){
  body.reference-detail-page .reference-detail-heading{
    bottom:clamp(20px, 3.6vh, 30px) !important;
  }

  body.reference-detail-page .reference-detail-kicker{
    margin-bottom:16px !important;
  }

  body.reference-detail-page .reference-detail-title{
    font-size:clamp(34px, 9.9vw, 50px) !important;
  }

  body.reference-detail-page .reference-detail-meta{
    margin-top:16px !important;
  }
}

/* v1.199 — Referenz-Einzelseite: Header-Texte fest im blauen Header sichtbar halten */
body.reference-detail-page .reference-detail-heading{
  position:absolute !important;
  z-index:50 !important;
  top:0 !important;
  bottom:auto !important;
  left:var(--reference-detail-content-left) !important;
  height:var(--reference-detail-blue-height) !important;
  width:min(55vw, 980px) !important;
  max-height:none !important;
  box-sizing:border-box;
  padding-bottom:clamp(24px, 3.05vh, 38px);
  display:flex !important;
  flex-direction:column;
  justify-content:flex-end;
  align-items:flex-start;
  overflow:visible !important;
  opacity:1 !important;
  visibility:visible !important;
  color:#ffffff !important;
  pointer-events:none;
}

body.reference-detail-page .reference-detail-heading .reference-detail-kicker,
body.reference-detail-page .reference-detail-heading .reference-detail-title,
body.reference-detail-page .reference-detail-heading .reference-detail-meta{
  position:relative;
  z-index:51;
  visibility:visible !important;
}

body.reference-detail-page .reference-detail-heading .reference-detail-kicker{
  display:inline-block !important;
  flex:0 0 auto;
  margin:0 0 clamp(14px, 1.8vh, 22px) !important;
  color:rgba(255,255,255,.96) !important;
  opacity:1 !important;
  pointer-events:auto;
}

body.reference-detail-page .reference-detail-heading .reference-detail-title{
  flex:0 0 auto;
  max-width:min(100%, 12.5em) !important;
  font-size:clamp(42px, 4.05vw, 68px) !important;
  line-height:.9 !important;
  color:rgba(184,199,243,.66) !important;
}

body.reference-detail-page .reference-detail-heading .reference-detail-meta{
  flex:0 0 auto;
  margin:clamp(14px, 2vh, 24px) 0 0 !important;
  color:rgba(255,255,255,.86) !important;
  opacity:1 !important;
}

body.reference-detail-page.is-reference-content-fading .reference-detail-heading .reference-detail-meta,
body.reference-detail-page.is-reference-content-fading .reference-detail-heading .reference-detail-title{
  visibility:visible !important;
}

body.reference-detail-page .reference-detail-blue{
  z-index:4 !important;
}
@media (max-width: 1180px){
  body.reference-detail-page .reference-detail-heading{
    width:min(58vw, 720px) !important;
  }

  body.reference-detail-page .reference-detail-heading .reference-detail-title{
    font-size:clamp(39px, 4.85vw, 60px) !important;
    max-width:min(100%, 11em) !important;
  }
}

@media (max-width:900.98px){
  body.reference-detail-page .reference-detail-heading{
    left:var(--reference-detail-content-left) !important;
    right:var(--reference-detail-content-left) !important;
    width:auto !important;
    padding-bottom:clamp(22px, 3.7vh, 34px);
  }

  body.reference-detail-page .reference-detail-heading .reference-detail-title{
    font-size:clamp(36px, 8.9vw, 56px) !important;
    max-width:min(100%, 10.5em) !important;
  }
}

@media (max-width: 520px){
  body.reference-detail-page .reference-detail-heading{
    padding-bottom:clamp(20px, 3.6vh, 30px);
  }

  body.reference-detail-page .reference-detail-heading .reference-detail-title{
    font-size:clamp(32px, 9.3vw, 46px) !important;
  }
}

/* v1.200 — Referenz-Einzelseite: Textspalte zentriert, Header-Inhalte an Textachse ausgerichtet */
body.reference-detail-page{
  --reference-detail-content-width:min(34vw, 640px);
  --reference-detail-content-half:min(17vw, 320px);
  --reference-detail-content-left:calc(50vw - var(--reference-detail-content-half));
}

body.reference-detail-page .reference-detail-content{
  left:var(--reference-detail-content-left) !important;
  width:var(--reference-detail-content-width) !important;
  max-width:640px !important;
}

body.reference-detail-page .reference-detail-heading{
  left:var(--reference-detail-content-left) !important;
  width:min(calc(100vw - var(--reference-detail-content-left) - clamp(58px, 7vw, 142px)), 980px) !important;
  padding-bottom:calc(clamp(24px, 3.05vh, 38px) + (var(--reference-detail-blue-height) * .15)) !important;
}

body.reference-detail-page .reference-detail-heading .reference-detail-title{
  font-size:clamp(48px, 4.45vw, 76px) !important;
  line-height:.89 !important;
  max-width:min(100%, 12.8em) !important;
}

body.reference-detail-page .reference-detail-heading .reference-detail-kicker,
body.reference-detail-page .reference-detail-heading .reference-detail-title,
body.reference-detail-page .reference-detail-heading .reference-detail-meta{
  text-align:left !important;
}

@media (max-width:1180px){
  body.reference-detail-page{
    --reference-detail-content-width:min(45vw, 560px);
    --reference-detail-content-half:min(22.5vw, 280px);
    --reference-detail-content-left:calc(50vw - var(--reference-detail-content-half));
  }

  body.reference-detail-page .reference-detail-heading{
    width:min(calc(100vw - var(--reference-detail-content-left) - clamp(42px, 6vw, 100px)), 760px) !important;
  }

  body.reference-detail-page .reference-detail-heading .reference-detail-title{
    font-size:clamp(42px, 5.2vw, 66px) !important;
    max-width:min(100%, 11.4em) !important;
  }
}

@media (max-width:900.98px){
  body.reference-detail-page{
    --reference-detail-content-left:clamp(22px, 7vw, 48px);
    --reference-detail-content-width:calc(100vw - (var(--reference-detail-content-left) * 2));
  }

  body.reference-detail-page .reference-detail-heading{
    left:var(--reference-detail-content-left) !important;
    right:var(--reference-detail-content-left) !important;
    width:auto !important;
    padding-bottom:calc(clamp(22px, 3.7vh, 34px) + (var(--reference-detail-blue-height) * .12)) !important;
  }

  body.reference-detail-page .reference-detail-heading .reference-detail-title{
    font-size:clamp(39px, 9.4vw, 60px) !important;
    max-width:min(100%, 10.8em) !important;
  }
}

@media (max-width:520px){
  body.reference-detail-page .reference-detail-heading{
    padding-bottom:calc(clamp(20px, 3.6vh, 30px) + (var(--reference-detail-blue-height) * .10)) !important;
  }

  body.reference-detail-page .reference-detail-heading .reference-detail-title{
    font-size:clamp(34px, 9.7vw, 48px) !important;
  }
}


/* v1.201 — Referenzdetail: Titel-Hover, weißes Fadenkreuz, CTA unter Text und helles Menüpanel */
body.reference-detail-page .reference-detail-heading .reference-detail-title{
  pointer-events:auto;
  cursor:default;
}

body.reference-detail-page .reference-detail-heading .reference-detail-title[data-headline-fx]{
  color:rgba(184,199,243,.66) !important;
  background-image:none !important;
  background-size:auto !important;
  background-position:0 0 !important;
  background-repeat:no-repeat !important;
  -webkit-background-clip:border-box !important;
  background-clip:border-box !important;
  -webkit-text-fill-color:currentColor !important;
  text-shadow:none !important;
  filter:none !important;
  transition:
    opacity .58s cubic-bezier(.22,1,.36,1),
    filter .58s cubic-bezier(.22,1,.36,1),
    color .42s cubic-bezier(.22,1,.36,1);
}

@supports ((-webkit-background-clip:text) or (background-clip:text)){
  body.reference-detail-page .reference-detail-heading .reference-detail-title[data-headline-fx]:hover{
    background-image:
      radial-gradient(42vw 28vw at 5vw 6vh,
        rgba(248, 251, 255, .46) 0%,
        rgba(232, 241, 255, .36) 18%,
        rgba(170, 202, 250, .16) 38%,
        rgba(18, 35, 79, 0) 72%),
      radial-gradient(26vw 18vw at 9vw 10vh,
        rgba(206, 224, 255, .18) 0%,
        rgba(125, 164, 238, .10) 38%,
        rgba(17, 33, 73, 0) 74%),
      radial-gradient(66vw 58vw at var(--reactive-x, 52vw) var(--reactive-y, 42vh),
        rgba(244, 248, 255, .76) 0%,
        rgba(224, 235, 255, .66) 16%,
        rgba(170, 198, 250, .44) 32%,
        rgba(88, 128, 214, .18) 52%,
        rgba(18, 35, 79, 0) 74%),
      radial-gradient(88vw 76vw at var(--reactive-x-soft, 58vw) var(--reactive-y-soft, 48vh),
        rgba(193, 214, 255, .18) 0%,
        rgba(126, 158, 226, .12) 36%,
        rgba(17, 33, 73, 0) 76%),
      linear-gradient(90deg,
        #1b5cd5 0%,
        #2a67db 14%,
        #4b82e3 34%,
        #79a3ee 56%,
        #c1d6fb 80%,
        #eef4ff 100%) !important;
    background-size:100vw 100vh !important;
    background-position:calc(-1 * var(--headline-view-x, 0px)) calc(-1 * var(--headline-view-y, 0px)) !important;
    background-repeat:no-repeat !important;
    background-origin:border-box !important;
    -webkit-box-decoration-break:clone;
    box-decoration-break:clone;
    -webkit-background-clip:text !important;
    background-clip:text !important;
    -webkit-text-fill-color:transparent !important;
    color:transparent !important;
    text-shadow:0 0 0.01em rgba(10, 22, 47, .10) !important;
    filter:saturate(.92) brightness(.94) contrast(1.03) !important;
  }
}
body.reference-detail-page .reference-detail-cta{
  position:relative !important;
  left:auto !important;
  right:auto !important;
  bottom:auto !important;
  top:auto !important;
  display:block !important;
  margin:clamp(46px, 6.2vh, 78px) auto 0 !important;
  transform:none !important;
  transform-origin:center center !important;
}

body.reference-detail-page .reference-detail-scroll-inner::after{
  height:20vh;
  min-height:140px;
}

body.reference-detail-page .menu .menu-links a,
body.reference-detail-page .menu .menu-legal{
  color:var(--menu-link-on-light) !important;
  text-shadow:0 2px 18px rgba(255,255,255,.14) !important;
}

body.reference-detail-page .menu-panel-bottom{
  border-top-color:rgba(31,65,135,.16) !important;
}

@media (max-width:900.98px){
body.reference-detail-page .reference-detail-cta{
    margin-top:clamp(36px, 5.4vh, 58px) !important;
  }
}

/* v1.202 — Referenzdetail: Titel-Farbwechsel ohne abruptes Layer-Ausblenden.
   Der Headline-FX bleibt permanent aktiv wie in der Leistungen-Sektion; :hover
   schaltet keinen separaten Text-Layer mehr ein/aus. Die Farbänderung entsteht
   nur über die bereits weich interpolierten --reactive-* Variablen. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  body.reference-detail-page .reference-detail-heading .reference-detail-title[data-headline-fx],
  body.reference-detail-page .reference-detail-heading .reference-detail-title[data-headline-fx]:hover{
    background-image:
      linear-gradient(90deg,
        rgba(220, 235, 255, .58) 0%,
        rgba(196, 218, 251, .38) 22%,
        rgba(150, 186, 240, .16) 42%,
        rgba(130, 161, 216, 0) 62%),
      radial-gradient(42vw 28vw at 5vw 6vh,
        rgba(248, 251, 255, .46) 0%,
        rgba(232, 241, 255, .36) 18%,
        rgba(170, 202, 250, .16) 38%,
        rgba(18, 35, 79, 0) 72%),
      radial-gradient(26vw 18vw at 9vw 10vh,
        rgba(206, 224, 255, .18) 0%,
        rgba(125, 164, 238, .10) 38%,
        rgba(17, 33, 73, 0) 74%),
      radial-gradient(66vw 58vw at var(--reactive-x, 52vw) var(--reactive-y, 42vh),
        rgba(244, 248, 255, .76) 0%,
        rgba(224, 235, 255, .66) 16%,
        rgba(170, 198, 250, .44) 32%,
        rgba(88, 128, 214, .18) 52%,
        rgba(18, 35, 79, 0) 74%),
      radial-gradient(88vw 76vw at var(--reactive-x-soft, 58vw) var(--reactive-y-soft, 48vh),
        rgba(193, 214, 255, .18) 0%,
        rgba(126, 158, 226, .12) 36%,
        rgba(17, 33, 73, 0) 76%),
      linear-gradient(90deg,
        #1b5cd5 0%,
        #2a67db 14%,
        #4b82e3 34%,
        #79a3ee 56%,
        #c1d6fb 80%,
        #eef4ff 100%) !important;
    background-size:
      100% 100%,
      100vw 100vh,
      100vw 100vh,
      100vw 100vh,
      100vw 100vh,
      100vw 100vh !important;
    background-position:
      0 0,
      calc(-1 * var(--headline-view-x, 0px)) calc(-1 * var(--headline-view-y, 0px)),
      calc(-1 * var(--headline-view-x, 0px)) calc(-1 * var(--headline-view-y, 0px)),
      calc(-1 * var(--headline-view-x, 0px)) calc(-1 * var(--headline-view-y, 0px)),
      calc(-1 * var(--headline-view-x, 0px)) calc(-1 * var(--headline-view-y, 0px)),
      calc(-1 * var(--headline-view-x, 0px)) calc(-1 * var(--headline-view-y, 0px)) !important;
    background-repeat:no-repeat !important;
    background-origin:border-box !important;
    -webkit-box-decoration-break:clone;
    box-decoration-break:clone;
    -webkit-background-clip:text !important;
    background-clip:text !important;
    -webkit-text-fill-color:transparent !important;
    color:transparent !important;
    text-shadow:0 0 0.01em rgba(10, 22, 47, .10) !important;
    filter:saturate(.92) brightness(.94) contrast(1.03) !important;
    transition:
      opacity .58s cubic-bezier(.22,1,.36,1),
      filter .58s cubic-bezier(.22,1,.36,1) !important;
  }
}


/* v1.203 — Referenzdetail: CTA erscheint beim unteren Scrollbereich, Heading wieder tiefer, kurzer Scroll-Auslauf */
body.reference-detail-page .reference-detail-heading{
  padding-bottom:clamp(24px, 3.05vh, 38px) !important;
}

body.reference-detail-page .reference-detail-scroll-inner::after{
  height:10vh !important;
  min-height:10vh !important;
}

body.reference-detail-page .reference-detail-cta{
  opacity:0;
  filter:blur(5px);
  pointer-events:none;
  transition:
    opacity 1.05s cubic-bezier(.22,1,.36,1),
    filter 1.05s cubic-bezier(.22,1,.36,1);
  will-change:opacity, filter;
}

body.reference-detail-page .reference-detail-cta.is-reference-cta-visible{
  opacity:1;
  filter:blur(0);
  pointer-events:auto;
}

@media (max-width:900.98px){
  body.reference-detail-page .reference-detail-heading{
    padding-bottom:clamp(22px, 3.7vh, 34px) !important;
  }
}

@media (max-width:520px){
  body.reference-detail-page .reference-detail-heading{
    padding-bottom:clamp(20px, 3.6vh, 30px) !important;
  }
}

@media (prefers-reduced-motion: reduce){
  body.reference-detail-page .reference-detail-cta{
    transition:none !important;
    filter:none !important;
  }
}

/* v1.204 — Referenzdetail: Kicker/Titel separat höher und CTA invertiert wie Über-mich-Button */
body.reference-detail-page .reference-detail-heading .reference-detail-kicker,
body.reference-detail-page .reference-detail-heading .reference-detail-title{
  transform:translate3d(0, -20px, 0) !important;
}

body.reference-detail-page.is-reference-content-fading .reference-detail-heading .reference-detail-title{
  transform:translate3d(0, -20px, 0) !important;
}

body.reference-detail-page .reference-detail-cta,
body.reference-detail-page .reference-detail-cta:visited,
body.reference-detail-page .reference-detail-cta:hover,
body.reference-detail-page .reference-detail-cta:focus,
body.reference-detail-page .reference-detail-cta:focus-visible{
  box-sizing:border-box;
  border:0 !important;
  background:#ffffff !important;
  color:#000000 !important;
  text-decoration:none !important;
  box-shadow:0 0 18px rgba(0,0,0,.07) !important;
}

body.reference-detail-page .reference-detail-cta .leistungen-detail-cta-text{
  color:#000000 !important;
}

body.reference-detail-page .reference-detail-cta .leistungen-detail-cta-circle{
  background:#000000 !important;
  color:#ffffff !important;
}

body.reference-detail-page .reference-detail-cta .leistungen-detail-cta-arrow{
  stroke:#ffffff !important;
}

body.reference-detail-page .reference-detail-cta:focus-visible{
  outline:1px solid rgba(0,0,0,.52) !important;
  outline-offset:6px;
}


@media (min-width:901px){
}

/* v1.211 — Referenzdetail: statt Blur weiche Transparenzmaske am Header-Übergang */
body.reference-detail-page{
  --reference-detail-text-edge-opacity:.20;
  --reference-detail-text-fade-height:clamp(58px, 7.4vh, 96px);
}

body.reference-detail-page .reference-detail-layout::after,
body.reference-detail-page .reference-detail-layout::before{
  content:none !important;
  display:none !important;
  background:none !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  -webkit-mask-image:none !important;
  mask-image:none !important;
}

body.reference-detail-page .reference-detail-content{
  -webkit-mask-image:linear-gradient(180deg,
    rgba(0,0,0,0) 0,
    rgba(0,0,0,0) calc(var(--reference-detail-blue-height) - 1px),
    rgba(0,0,0,var(--reference-detail-text-edge-opacity)) var(--reference-detail-blue-height),
    rgba(0,0,0,1) calc(var(--reference-detail-blue-height) + var(--reference-detail-text-fade-height)),
    rgba(0,0,0,1) 100%);
  mask-image:linear-gradient(180deg,
    rgba(0,0,0,0) 0,
    rgba(0,0,0,0) calc(var(--reference-detail-blue-height) - 1px),
    rgba(0,0,0,var(--reference-detail-text-edge-opacity)) var(--reference-detail-blue-height),
    rgba(0,0,0,1) calc(var(--reference-detail-blue-height) + var(--reference-detail-text-fade-height)),
    rgba(0,0,0,1) 100%);
  -webkit-mask-size:100% 100%;
  mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
}

@media (max-width:900.98px){
  body.reference-detail-page{
    --reference-detail-text-fade-height:clamp(54px, 7vh, 84px);
  }
}



/* v1.218 — Referenzdetail: Coverage-Hintergrund entfernt, radialer Verlauf */
body.reference-detail-page .reference-detail-main,
body.reference-detail-page .reference-detail-layout{
  background:radial-gradient(circle at 50% 50%, #f2f2f2 0%, #ffffff 100%) !important;
}

body.reference-detail-page .reference-detail-layout::before,
body.reference-detail-page .reference-detail-layout::after{
  content:none !important;
  display:none !important;
  background:none !important;
  background-image:none !important;
  opacity:0 !important;
}

body.reference-detail-page .reference-detail-blue,
body.reference-detail-page .reference-detail-heading,
body.reference-detail-page .reference-detail-content,
body.reference-detail-page .reference-detail-arrows{
  position:absolute;
}

body.reference-detail-page .reference-detail-content{
  z-index:2 !important;
}

body.reference-detail-page .reference-detail-blue{
  z-index:4 !important;
}

body.reference-detail-page .reference-detail-arrows{
  z-index:8 !important;
}

body.reference-detail-page .reference-detail-heading{
  z-index:50 !important;
}


/* v1.217 — Leistungen-Detail: symmetrische Desktop-Ränder und proportionaler Inhaltsausbau */
@media (min-width: 1101px){
  .leistungen-detail-panel{
    --leistungen-detail-edge: clamp(18px, 2.4vw, 46px);
    width: calc(100vw - (var(--leistungen-detail-edge) * 2));
    max-width: none;
    min-width: 0;
    margin-right: var(--leistungen-detail-edge);
    margin-left: 0;
  }

  .leistungen-detail-grid{
    grid-template-columns: minmax(330px, .82fr) minmax(540px, 1fr);
  }
}


/* v1.218 — Leistungen-Detail: gleiche Desktop-Ränder, ausgewogenerer Block-Satz und stärkere Inhaltsausnutzung */
@media (min-width: 1101px){
  .leistungen-detail{
    justify-content:center;
  }

  .leistungen-detail-panel{
    --leistungen-detail-edge: clamp(28px, 2.4vw, 46px);
    flex:1 1 auto;
    width:auto;
    max-width:none;
    min-width:0;
    margin-left:var(--leistungen-detail-edge);
    margin-right:var(--leistungen-detail-edge);
  }

  .leistungen-detail-grid{
    grid-template-columns:minmax(400px, .92fr) minmax(500px, .86fr);
    column-gap:clamp(50px, 4.6vw, 96px);
    padding:clamp(64px, 7.1vh, 94px) clamp(74px, 5.25vw, 114px) clamp(116px, 11.6vh, 154px) clamp(74px, 5.25vw, 114px);
    transform-origin:center top;
  }

  .leistungen-detail-left{
    max-width:min(40vw, 650px);
  }

  .leistungen-detail-right{
    justify-self:start;
    width:100%;
    max-width:min(43vw, 720px);
  }

  .leistungen-detail-title,
  .leistungen-detail-right-title{
    font-size:clamp(34px, 2.92vw, 62px);
  }

  .leistungen-detail-right-title{
    padding-right:clamp(54px, 4.4vw, 84px);
  }

  .leistungen-detail-intro,
  .leistungen-detail-outro{
    max-width:56ch;
    font-size:clamp(15.2px, .98vw, 19.5px);
    line-height:1.44;
  }

  .leistungen-detail-intro{
    margin-top:clamp(52px, 6.2vh, 84px);
  }

  .leistungen-detail-highlights{
    margin-top:clamp(58px, 7.8vh, 104px);
    gap:clamp(30px, 3.7vh, 54px);
    padding-left:clamp(18px, 2.25vw, 48px);
  }

  .leistungen-detail-highlight{
    grid-template-columns:clamp(76px, 5.45vw, 112px) minmax(0, 1fr);
    gap:clamp(30px, 2.55vw, 48px);
  }

  .leistungen-detail-highlight-icon{
    width:clamp(70px, 5.2vw, 104px);
    height:clamp(62px, 4.65vw, 92px);
  }

  .leistungen-detail-highlight-title{
    font-size:clamp(25px, 2.05vw, 42px);
  }

  .leistungen-detail-highlight-text{
    font-size:clamp(13.8px, .88vw, 17px);
  }

  .leistungen-detail-accordion{
    margin-top:clamp(32px, 4.9vh, 64px);
  }

  .leistungen-detail-acc-button{
    padding:clamp(27px, 3.65vh, 47px) 0;
    grid-template-columns:clamp(44px, 3.1vw, 70px) 1fr clamp(30px, 2vw, 42px);
  }

  .leistungen-detail-acc-number,
  .leistungen-detail-acc-title{
    font-size:clamp(22px, 1.82vw, 37px);
  }

  .leistungen-detail-acc-panel ul{
    padding-left:clamp(44px, 3.1vw, 70px);
    padding-bottom:clamp(27px, 3.3vh, 44px);
  }

  .leistungen-detail-acc-panel li{
    font-size:clamp(14.4px, .98vw, 18.5px);
    line-height:1.34;
  }

  .leistungen-detail-cta{
    bottom:clamp(34px, 4.2vh, 58px);
    transform:translate3d(-50%, 0, 0);
  }
}


/* v1.219 — Leistungen-Detail: Inhalts-Skalierung endet 30px oberhalb des CTA */
@media (min-width: 1101px){
  .leistungen-detail-panel{
    --leistungen-detail-scale-bottom-pad: clamp(116px, 11.6vh, 154px);
  }

  .leistungen-detail-grid{
    grid-template-columns:
      minmax(calc(400px * var(--leistungen-detail-fit)), .92fr)
      minmax(calc(500px * var(--leistungen-detail-fit)), .86fr);
    column-gap: calc(clamp(50px, 4.6vw, 96px) * var(--leistungen-detail-fit));
    padding:
      calc(clamp(64px, 7.1vh, 94px) * var(--leistungen-detail-fit))
      calc(clamp(74px, 5.25vw, 114px) * var(--leistungen-detail-fit))
      var(--leistungen-detail-scale-bottom-pad)
      calc(clamp(74px, 5.25vw, 114px) * var(--leistungen-detail-fit));
  }

  .leistungen-detail-left{
    max-width: min(40vw, calc(650px * var(--leistungen-detail-fit)));
  }

  .leistungen-detail-right{
    max-width: min(43vw, calc(720px * var(--leistungen-detail-fit)));
  }

  .leistungen-detail-title,
  .leistungen-detail-right-title{
    font-size: calc(clamp(34px, 2.92vw, 62px) * var(--leistungen-detail-fit));
  }

  .leistungen-detail-right-title{
    padding-right: calc(clamp(54px, 4.4vw, 84px) * var(--leistungen-detail-fit));
  }

  .leistungen-detail-intro,
  .leistungen-detail-outro{
    max-width: 56ch;
    font-size: calc(clamp(15.2px, .98vw, 19.5px) * var(--leistungen-detail-fit));
    line-height: 1.44;
  }

  .leistungen-detail-intro{
    margin-top: calc(clamp(52px, 6.2vh, 84px) * var(--leistungen-detail-fit));
  }

  .leistungen-detail-highlights{
    margin-top: calc(clamp(58px, 7.8vh, 104px) * var(--leistungen-detail-fit));
    gap: calc(clamp(30px, 3.7vh, 54px) * var(--leistungen-detail-fit));
    padding-left: calc(clamp(18px, 2.25vw, 48px) * var(--leistungen-detail-fit));
  }

  .leistungen-detail-highlight{
    grid-template-columns: calc(clamp(76px, 5.45vw, 112px) * var(--leistungen-detail-fit)) minmax(0, 1fr);
    gap: calc(clamp(30px, 2.55vw, 48px) * var(--leistungen-detail-fit));
  }

  .leistungen-detail-highlight-icon{
    width: calc(clamp(70px, 5.2vw, 104px) * var(--leistungen-detail-fit));
    height: calc(clamp(62px, 4.65vw, 92px) * var(--leistungen-detail-fit));
  }

  .leistungen-detail-highlight-title{
    font-size: calc(clamp(25px, 2.05vw, 42px) * var(--leistungen-detail-fit));
  }

  .leistungen-detail-highlight-text{
    font-size: calc(clamp(13.8px, .88vw, 17px) * var(--leistungen-detail-fit));
  }

  .leistungen-detail-accordion{
    margin-top: calc(clamp(32px, 4.9vh, 64px) * var(--leistungen-detail-fit));
  }

  .leistungen-detail-acc-button{
    padding: calc(clamp(27px, 3.65vh, 47px) * var(--leistungen-detail-fit)) 0;
    grid-template-columns:
      calc(clamp(44px, 3.1vw, 70px) * var(--leistungen-detail-fit))
      1fr
      calc(clamp(30px, 2vw, 42px) * var(--leistungen-detail-fit));
  }

  .leistungen-detail-acc-number,
  .leistungen-detail-acc-title{
    font-size: calc(clamp(22px, 1.82vw, 37px) * var(--leistungen-detail-fit));
  }

  .leistungen-detail-acc-plus{
    width: calc(clamp(23px, 1.65vw, 34px) * var(--leistungen-detail-fit));
    height: calc(clamp(23px, 1.65vw, 34px) * var(--leistungen-detail-fit));
  }

  .leistungen-detail-acc-plus::before,
  .leistungen-detail-acc-plus::after{
    width: calc(clamp(18px, 1.35vw, 28px) * var(--leistungen-detail-fit));
  }

  .leistungen-detail-acc-panel ul{
    padding-left: calc(clamp(44px, 3.1vw, 70px) * var(--leistungen-detail-fit));
    padding-bottom: calc(clamp(27px, 3.3vh, 44px) * var(--leistungen-detail-fit));
  }

  .leistungen-detail-acc-panel li{
    font-size: calc(clamp(14.4px, .98vw, 18.5px) * var(--leistungen-detail-fit));
    line-height: 1.34;
  }
}

/* v1.225 — Referenzdetail: Pfeile im blauen Header, CTA-Leiste am Textende */
body.reference-detail-page{
  --reference-detail-cta-band-height:clamp(112px, 13.5vh, 184px);
}

body.reference-detail-page .reference-detail-blue{
  pointer-events:none;
}

body.reference-detail-page .reference-detail-blue-vignette{
  pointer-events:none;
}

body.reference-detail-page .reference-detail-blue .reference-detail-arrows{
  position:absolute !important;
  inset:0 !important;
  z-index:12 !important;
  pointer-events:none;
}

body.reference-detail-page .reference-detail-blue .reference-detail-arrow{
  top:50% !important;
  width:clamp(58px, 5.1vw, 82px) !important;
  height:clamp(58px, 5.1vw, 82px) !important;
  color:rgba(139, 178, 233, .72) !important;
  transform:translate3d(0, -50%, 0) !important;
  pointer-events:auto;
}

body.reference-detail-page .reference-detail-blue .reference-detail-arrow:hover,
body.reference-detail-page .reference-detail-blue .reference-detail-arrow:focus-visible{
  color:rgba(190, 212, 247, .95) !important;
  opacity:1 !important;
}

body.reference-detail-page .reference-detail-blue .reference-detail-arrow:focus-visible{
  outline:2px solid rgba(255,255,255,.42) !important;
  outline-offset:8px;
}

body.reference-detail-page .reference-detail-blue .reference-detail-arrow--prev{
  left:clamp(64px, 6.7vw, 148px) !important;
  right:auto !important;
}

body.reference-detail-page .reference-detail-blue .reference-detail-arrow--next{
  right:clamp(64px, 6.7vw, 148px) !important;
  left:auto !important;
}

body.reference-detail-page .reference-detail-blue .reference-detail-arrow span{
  width:clamp(34px, 3.25vw, 54px) !important;
  height:clamp(34px, 3.25vw, 54px) !important;
  border-width:0 0 clamp(3px, .24vw, 5px) clamp(3px, .24vw, 5px) !important;
}

body.reference-detail-page .reference-detail-scroll-inner::after{
  height:calc(var(--reference-detail-cta-band-height) + clamp(34px, 6vh, 82px)) !important;
  min-height:calc(var(--reference-detail-cta-band-height) + clamp(34px, 6vh, 82px)) !important;
}

body.reference-detail-page .reference-detail-cta-band{
  --reference-detail-cta-progress:0;
  position:absolute;
  z-index:7;
  left:0;
  right:0;
  bottom:0;
  height:var(--reference-detail-cta-band-height);
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle at 50% 0%, rgba(80, 129, 197, .32) 0%, rgba(80, 129, 197, .12) 34%, rgba(80, 129, 197, 0) 70%),
    linear-gradient(113deg, #295e98 0%, #174c80 30%, #0e3d63 56%, #061625 100%);
  box-shadow:0 -22px 55px rgba(6, 22, 37, .10);
  opacity:0;
  transform:translate3d(0, 100%, 0);
  transition:
    transform 90ms linear,
    opacity 140ms linear;
  pointer-events:none;
  will-change:transform, opacity;
}

body.reference-detail-page .reference-detail-cta-band.is-reference-cta-visible{
  pointer-events:auto;
}

body.reference-detail-page .reference-detail-cta-band .reference-detail-cta{
  position:relative !important;
  left:auto !important;
  right:auto !important;
  bottom:auto !important;
  top:auto !important;
  z-index:2 !important;
  margin:0 !important;
  transform:none !important;
  transform-origin:center center !important;
  opacity:0;
  filter:blur(4px);
}

body.reference-detail-page .reference-detail-cta-band .reference-detail-cta.is-reference-cta-visible{
  opacity:1;
  filter:blur(0);
  pointer-events:auto;
}

@media (max-width:900.98px){
  body.reference-detail-page{
    --reference-detail-cta-band-height:clamp(96px, 12.75vh, 135px);
  }

  body.reference-detail-page .reference-detail-blue .reference-detail-arrow{
    top:56% !important;
    width:clamp(42px, 11vw, 58px) !important;
    height:clamp(42px, 11vw, 58px) !important;
  }

  body.reference-detail-page .reference-detail-blue .reference-detail-arrow--prev{
    left:clamp(16px, 4.8vw, 38px) !important;
  }

  body.reference-detail-page .reference-detail-blue .reference-detail-arrow--next{
    right:clamp(16px, 4.8vw, 38px) !important;
  }

  body.reference-detail-page .reference-detail-blue .reference-detail-arrow span{
    width:clamp(24px, 7vw, 36px) !important;
    height:clamp(24px, 7vw, 36px) !important;
    border-width:0 0 3px 3px !important;
  }
}

@media (prefers-reduced-motion: reduce){
  body.reference-detail-page .reference-detail-cta-band,
  body.reference-detail-page .reference-detail-cta-band .reference-detail-cta{
    transition:none !important;
    filter:none !important;
  }
}

/* v1.226 — Referenzdetail: Header 10% niedriger, CTA-Band bleibt am Textende sichtbar */
body.reference-detail-page{
  --reference-detail-blue-height:clamp(292px, 31.75vh, 421px);
}

body.reference-detail-page .reference-detail-blue .reference-detail-arrow{
  top:50% !important;
}

body.reference-detail-page .reference-detail-cta-band{
  visibility:visible;
}

@media (max-width:900.98px){
  body.reference-detail-page{
    --reference-detail-blue-height:clamp(316px, 37.26vh, 421px);
  }

  body.reference-detail-page .reference-detail-blue .reference-detail-arrow{
    top:50% !important;
  }
}

@media (max-width:520px){
  body.reference-detail-page{
    --reference-detail-blue-height:clamp(292px, 38.07vh, 365px);
  }
}


/* v1.229 — Referenzdetail: CTA-Leiste stabil per JS sichtbar machen, ohne CSS-calc-Multiplikation */
body.reference-detail-page .reference-detail-cta-band{
  z-index:18 !important;
  visibility:visible !important;
}

body.reference-detail-page .reference-detail-cta-band .reference-detail-cta{
  transition:opacity 160ms linear, filter 160ms linear !important;
}


/* v1.230 — Referenzdetail: CTA-Leiste robust sichtbar, sobald das Textende erreicht wird */
body.reference-detail-page .reference-detail-cta-band{
  position:fixed !important;
  z-index:80 !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  visibility:visible !important;
  opacity:0;
  transform:translate3d(0, 100%, 0);
  pointer-events:none;
}

body.reference-detail-page .reference-detail-cta-band.is-reference-cta-visible{
  pointer-events:auto !important;
}

body.reference-detail-page .reference-detail-cta-band .reference-detail-cta{
  position:relative !important;
  margin:0 auto !important;
}


/* v1.231 — Referenzdetail: CTA-Leiste um ein Viertel niedriger */

/* v1.233 — Referenzdetail: CTA-Leiste ohne vergrößerten Abstand nach Scroll-Intent zeigen */
body.reference-detail-page .reference-detail-scroll-inner::after{
  height:calc(var(--reference-detail-cta-band-height) + clamp(12px, 2.1vh, 28px)) !important;
  min-height:calc(var(--reference-detail-cta-band-height) + clamp(12px, 2.1vh, 28px)) !important;
}

@media (max-width:900.98px){
  body.reference-detail-page .reference-detail-scroll-inner::after{
    height:calc(var(--reference-detail-cta-band-height) + clamp(10px, 2.4vh, 24px)) !important;
    min-height:calc(var(--reference-detail-cta-band-height) + clamp(10px, 2.4vh, 24px)) !important;
  }
}

/* v1.234 — Referenzdetail: schlankerer Laufzeitbetrieb */
body.reference-detail-page .reference-detail-blue,
body.reference-detail-page .reference-detail-heading,
body.reference-detail-page .reference-detail-content,
body.reference-detail-page .reference-detail-cta-band{
  contain:layout paint;
}

body.reference-detail-page .reference-detail-title,
body.reference-detail-page .reference-detail-meta,
body.reference-detail-page .reference-detail-text{
  will-change:auto !important;
}

body.reference-detail-page.is-reference-content-fading .reference-detail-title,
body.reference-detail-page.is-reference-content-fading .reference-detail-meta,
body.reference-detail-page.is-reference-content-fading .reference-detail-text{
  will-change:opacity, filter;
}

body.reference-detail-page .reference-detail-cta-band{
  will-change:auto !important;
}

body.reference-detail-page .reference-detail-cta-band.is-reference-cta-visible{
  will-change:transform, opacity;
}


/* v1.235 — CTA-Geometrie vereinheitlicht: .about-references-button übernimmt Höhe und Kreisgröße von .leistungen-detail-cta. */
.about-references-button{
  --about-ref-btn-base-width: clamp(178px, 11.76vw, 224px);
  --about-ref-btn-width: calc(var(--about-ref-btn-base-width) + 40px);
  --about-ref-btn-height: calc((var(--about-ref-btn-base-width) + 10px) / 4.1212);
  --about-ref-btn-circle-size: calc(var(--about-ref-btn-height) * .82);
  --about-ref-btn-pad-left: calc(var(--about-ref-btn-height) * .62);
  --about-ref-btn-pad-right: calc((var(--about-ref-btn-height) - var(--about-ref-btn-circle-size)) / 2);
  --about-ref-btn-text-gap: calc(var(--about-ref-btn-height) * .22);
  --about-ref-btn-text-size: clamp(14px, min(.86vw, 1.58vh), 16.5px);
}

@media (max-width:900.98px){
  .about-references-button{
    --about-ref-btn-base-width: clamp(167px, 23.8vw, 213px);
  }
}

@media (max-width: 760px){
  .about-references-button{
    --about-ref-btn-base-width: min(54.6vw, 200px);
  }
}

/* v1.237 — Referenzen-Admin: Viewport exakt aufteilen, rechte Sprachfenster gleichmäßig einpassen */
body.references-admin-page .references-admin-layout{
  height:100%;
  max-height:100%;
  min-height:0;
}

body.references-admin-page .references-admin-right{
  height:100%;
  max-height:100%;
  min-height:0;
  overflow:hidden;
}

body.references-admin-page .references-admin-language-stack{
  height:100%;
  max-height:100%;
  min-height:0;
  overflow:hidden;
}

body.references-admin-page .references-admin-language-panel{
  min-height:0;
  max-height:100%;
}

body.references-admin-page .references-admin-language-scroll{
  min-height:0;
  max-height:100%;
  overflow-y:auto;
  overflow-x:hidden;
}

@media (max-height: 760px){
  body.references-admin-page .references-admin-section{
    inset:92px clamp(28px, 4.5vw, 82px) 20px;
  }

  body.references-admin-page .references-admin-left,
  body.references-admin-page .references-admin-right{
    padding-top:0;
  }

  body.references-admin-page .references-admin-title{
    margin-bottom:20px;
  }

  body.references-admin-page .references-admin-current-title{
    line-height:1;
  }

  body.references-admin-page .references-admin-right{
    gap:12px;
  }

  body.references-admin-page .references-admin-language-stack{
    gap:10px;
  }

  body.references-admin-page .references-admin-language-head{
    padding:9px 16px 8px;
  }

  body.references-admin-page .references-admin-language-scroll{
    padding:9px 14px 10px;
  }

  body.references-admin-page .references-admin-reference-link{
    min-height:54px;
    padding:9px 12px;
  }
}


/* v1.238 — Referenzen-Admin: rechte Spalte scrollbar, Sprachboxen als schlanke Akkordeons */
body.references-admin-page .references-admin-right{
  display:block;
  height:100%;
  max-height:100%;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  padding-right:clamp(8px, 1vw, 14px);
  scrollbar-gutter:stable;
  overscroll-behavior:contain;
}

body.references-admin-page .references-admin-current-title{
  margin:0 0 clamp(12px, 1.8vh, 18px);
}

body.references-admin-page .references-admin-language-stack{
  height:auto;
  max-height:none;
  min-height:0;
  overflow:visible;
  display:grid;
  grid-template-rows:none;
  gap:clamp(14px, 2vh, 20px);
  padding-bottom:clamp(18px, 3vh, 32px);
}

body.references-admin-page .references-admin-language-panel{
  display:block;
  min-height:0;
  max-height:none;
  overflow:visible;
}

body.references-admin-page .references-admin-language-scroll{
  min-height:0;
  max-height:none;
  overflow:visible;
  padding:12px 14px 14px;
}

body.references-admin-page .references-admin-language-list{
  display:grid;
  gap:8px;
}

body.references-admin-page .references-admin-language-extra[hidden]{
  display:none !important;
}

body.references-admin-page .references-admin-language-toggle{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:86px;
  min-height:34px;
  margin:12px auto 0;
  padding:0 18px;
  border:1px solid rgba(48,79,137,.24);
  background:rgba(255,255,255,.72);
  color:#304f89;
  font-family:Arial, Helvetica, ui-sans-serif, sans-serif;
  font-size:12px;
  line-height:1;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

body.references-admin-page .references-admin-language-toggle:hover,
body.references-admin-page .references-admin-language-toggle:focus-visible{
  background:#304f89;
  border-color:#304f89;
  color:#fff;
  outline:none;
  transform:translateY(-1px);
}

@media (max-height: 760px){
  body.references-admin-page .references-admin-language-stack{
    gap:12px;
    padding-bottom:22px;
  }

  body.references-admin-page .references-admin-language-scroll{
    padding:10px 12px 12px;
  }

  body.references-admin-page .references-admin-language-toggle{
    min-height:32px;
    margin-top:10px;
  }
}

body.references-admin-page .references-admin-language-accordion.has-more{
  max-height:205px;
  overflow:hidden;
}

body.references-admin-page .references-admin-language-accordion.is-ready{
  transition:max-height .34s cubic-bezier(.22,.61,.36,1);
}

body.references-admin-page .references-admin-language-toggle{
  min-width:74px;
  min-height:32px;
  color:#304f89;
  font-size:13px;
  letter-spacing:.02em;
  text-transform:none;
}


/* v1.239 — Referenzen-Admin: rechte Spalte wirklich als eigenes, sichtbares Scrollgebiet */
body.references-admin-page .references-admin-right{
  box-sizing:border-box;
  height:100%;
  max-height:100%;
  min-height:0;
  overflow-y:scroll !important;
  overflow-x:hidden !important;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  padding-right:clamp(10px, 1.15vw, 18px);
  -webkit-overflow-scrolling:touch;
}

body.references-admin-page .references-admin-right::-webkit-scrollbar{
  width:8px;
}

body.references-admin-page .references-admin-right::-webkit-scrollbar-track{
  background:rgba(48,79,137,.08);
}

body.references-admin-page .references-admin-right::-webkit-scrollbar-thumb{
  background:rgba(48,79,137,.34);
  border-radius:999px;
}

body.references-admin-page .references-admin-right::-webkit-scrollbar-thumb:hover{
  background:rgba(48,79,137,.5);
}

body.references-admin-page .references-admin-language-stack{
  padding-bottom:clamp(40px, 7vh, 72px);
}


/* v1.240 — Referenzen-Admin: rechte Spalte scrollt wieder; eingeklappt exakt 3 Referenzen */
body.references-admin-page .references-admin-section{
  min-height:0 !important;
  height:auto !important;
}

body.references-admin-page .references-admin-layout{
  height:100% !important;
  max-height:100% !important;
  min-height:0 !important;
}

body.references-admin-page .references-admin-left,
body.references-admin-page .references-admin-right{
  min-height:0 !important;
}

body.references-admin-page .references-admin-right{
  height:100% !important;
  max-height:100% !important;
  overflow-y:scroll !important;
  overflow-x:hidden !important;
}

body.references-admin-page .references-admin-language-accordion.has-more{
  overflow:hidden;
}


/* v1.242: decorative, scroll-driven background fragments for Leistungen */
.section.services > .section-pin{
  overflow: hidden;
}

.leistungen-bg-layer{
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  isolation: isolate;
}

.leistungen-bg-image{
  position: absolute;
  inset: -3%;
  width: 106%;
  height: 106%;
  object-fit: cover;
  object-position: 58% 50%;
  opacity: calc(var(--bg-t, 0) * .30);
  transform: scale(calc(1.045 - (var(--bg-t, 0) * 0.025))) translate3d(
    calc((1 - var(--bg-t, 0)) * var(--bg-drift-x, 16px)),
    calc((1 - var(--bg-t, 0)) * var(--bg-drift-y, 12px)),
    0
  );
  filter: saturate(0.55) contrast(1.18) brightness(0.92);
  pointer-events: none;
  user-select: none;
  will-change: opacity, transform;
}

.leistungen-bg-image:nth-child(1){ --bg-drift-x: 16px; --bg-drift-y: 10px; }
.leistungen-bg-image:nth-child(2){ --bg-drift-x: -14px; --bg-drift-y: 12px; }
.leistungen-bg-image:nth-child(3){ --bg-drift-x: 12px; --bg-drift-y: -10px; }
.leistungen-bg-image:nth-child(4){ --bg-drift-x: -18px; --bg-drift-y: 8px; }
.leistungen-bg-image:nth-child(5){ --bg-drift-x: 15px; --bg-drift-y: -12px; }
.leistungen-bg-image:nth-child(6){ --bg-drift-x: -12px; --bg-drift-y: -8px; }
.leistungen-bg-image:nth-child(7){ --bg-drift-x: 18px; --bg-drift-y: 12px; }

.leistungen-bg-layer::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      rgba(4, 10, 24, 0.88) 0%,
      rgba(4, 10, 24, 0.52) 45%,
      rgba(4, 10, 24, 0.76) 100%
    ),
    radial-gradient(
      circle at 72% 52%,
      rgba(52, 86, 145, 0.20),
      transparent 44%
    );
}

.section.services > .section-pin > .container.leistungen-scroller{
  position: relative;
  z-index: 3;
}

.section.services > .section-pin > .leistungen-outro-marquee{
  z-index: 2;
}

@media (max-width:900.98px){
  .leistungen-bg-image{
    object-position: center center;
    opacity: calc(var(--bg-t, 0) * .30 * 0.82);
    transform: scale(calc(1.03 - (var(--bg-t, 0) * 0.012))) translate3d(
      calc((1 - var(--bg-t, 0)) * var(--bg-drift-x, 8px)),
      calc((1 - var(--bg-t, 0)) * var(--bg-drift-y, 6px)),
      0
    );
    filter: saturate(0.48) contrast(1.14) brightness(0.82);
  }

  .leistungen-bg-layer::after{
    background:
      linear-gradient(
        90deg,
        rgba(4, 10, 24, 0.92) 0%,
        rgba(4, 10, 24, 0.68) 50%,
        rgba(4, 10, 24, 0.84) 100%
      ),
      radial-gradient(
        circle at 50% 52%,
        rgba(52, 86, 145, 0.13),
        transparent 42%
      );
  }
}

@media (prefers-reduced-motion: reduce){
  .leistungen-bg-image{
    transform: scale(1.02) translate3d(0, 0, 0);
  }
}

/* v1.243: Leistungen background brightness tuning
   Keep the new image layer elegant, but lift the section out of the overly black range. */
.section.services.theme-dark > .section-pin,
body.has-scene .section.services.theme-dark > .section-pin{
  background:
    radial-gradient(980px 560px at 18% 28%, rgba(76, 129, 214, 0.30), transparent 62%),
    radial-gradient(760px 470px at 72% 46%, rgba(68, 117, 190, 0.20), transparent 66%),
    radial-gradient(620px 420px at 44% 76%, rgba(34, 84, 154, 0.15), transparent 68%),
    linear-gradient(120deg, #0a2d5d 0%, #071f40 48%, #050f26 100%);
}

.leistungen-bg-image{
  filter: saturate(0.66) contrast(1.10) brightness(1.08);
}

.leistungen-bg-layer::after{
  background:
    linear-gradient(
      90deg,
      rgba(5, 14, 34, 0.70) 0%,
      rgba(5, 14, 34, 0.34) 45%,
      rgba(5, 14, 34, 0.58) 100%
    ),
    radial-gradient(
      circle at 72% 52%,
      rgba(88, 136, 214, 0.26),
      transparent 46%
    );
}

@media (max-width:900.98px){
  .leistungen-bg-image{
    filter: saturate(0.56) contrast(1.09) brightness(0.96);
  }

  .leistungen-bg-layer::after{
    background:
      linear-gradient(
        90deg,
        rgba(5, 14, 34, 0.84) 0%,
        rgba(5, 14, 34, 0.58) 50%,
        rgba(5, 14, 34, 0.76) 100%
      ),
      radial-gradient(
        circle at 50% 52%,
        rgba(88, 136, 214, 0.18),
        transparent 44%
      );
  }
}

/* v1.244/v1.245: Selected Leistungen motifs slightly more visible, per feedback. */
.leistungen-bg-image:nth-child(1){ }
.leistungen-bg-image:nth-child(2){ }


/* v1.247 — Leistungen-Outro / Über-mich als heller persönlicher Schlussakt.
   Minimal-invasiv: bestehende Scroll-, Anchor-, Symbol- und Modal-Logik bleibt erhalten. */
.leistungen-shell{
  --about-bg-t: 0;
  --about-light-t: 0;
  --about-content-t: 0;
  --about-final-text-t: 0;
  --about-panel-1-t: 0;
  --about-panel-2-t: 0;
  --about-panel-3-t: 0;
  --about-panel-1-x: 100px;
  --about-panel-2-x: 100px;
  --about-panel-3-x: 100px;
  --about-panel-1-y: 8px;
  --about-panel-2-y: 8px;
  --about-panel-3-y: 8px;
}

.leistungen-outro{
  overflow: hidden;
  isolation: isolate;
  background: transparent;
}

.leistungen-outro::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: var(--about-light-t, 0);
  background:
    linear-gradient(
      135deg,
      #f7f3ed 0%,
      #f2f5f8 58%,
      #eef3f7 100%
    );
  will-change: opacity;
}

.about-bg-layer{
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.about-bg-image{
  position: absolute;
  inset: -3%;
  width: 106%;
  height: 106%;
  object-fit: cover;
  object-position: 47% 50%;
  opacity: calc(0.08 + (var(--about-bg-t, 0) * 0.28));
  transform:
    scale(calc(1.036 - (var(--about-bg-t, 0) * 0.018)))
    translate3d(0, calc((1 - var(--about-bg-t, 0)) * 12px), 0);
  filter:
    saturate(calc(0.65 + (var(--about-bg-t, 0) * 0.23)))
    contrast(calc(1.04 - (var(--about-bg-t, 0) * 0.01)))
    brightness(calc(0.78 + (var(--about-bg-t, 0) * 0.18)));
  pointer-events: none;
  user-select: none;
  will-change: opacity, transform;
}

.about-bg-layer::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: calc(0.10 + (var(--about-light-t, 0) * 0.56));
  background:
    linear-gradient(
      90deg,
      rgba(247, 243, 237, 0.76) 0%,
      rgba(247, 243, 237, 0.64) 30%,
      rgba(242, 245, 248, 0.56) 66%,
      rgba(238, 243, 247, 0.72) 100%
    ),
    radial-gradient(
      circle at 34% 42%,
      rgba(255, 255, 255, 0.30),
      transparent 44%
    );
  will-change: opacity;
}

/* v1.249: Die temporäre about-text-track Animation wurde entfernt. Bestehen bleiben die semantischen Original-Absätze in .leistungen-outro-text. */

.leistungen-outro-layout{
  z-index: 5;
}

.leistungen-outro-visual{
  z-index: 3;
}

.leistungen-outro-copy{
  z-index: 4;
  --about-content-t: var(--leistungen-copy-progress, 0);
}

.leistungen-outro-copy-inner{
  position: relative;
  z-index: 4;
  transform: translate3d(-4.8vw, 0, 0);
}

.leistungen-outro-title{
  color: #1b437d;
  text-shadow: 0 1px 0 rgba(255,255,255,.38);
}

@supports ((-webkit-background-clip:text) or (background-clip:text)) {
  .section.services .leistungen-outro-title[data-headline-fx]{
    background-image:
      linear-gradient(90deg,
        rgba(212, 225, 246, .16) 0%,
        rgba(176, 200, 236, .10) 20%,
        rgba(120, 154, 214, .04) 42%,
        rgba(120, 154, 214, 0) 64%),
      radial-gradient(46vw 32vw at 6vw 7vh,
        rgba(242, 247, 255, .18) 0%,
        rgba(209, 225, 250, .13) 24%,
        rgba(83, 118, 181, .05) 52%,
        rgba(18, 35, 79, 0) 76%),
      radial-gradient(66vw 58vw at var(--reactive-x, 52vw) var(--reactive-y, 42vh),
        rgba(237, 243, 255, .34) 0%,
        rgba(206, 220, 246, .24) 18%,
        rgba(121, 153, 216, .16) 36%,
        rgba(42, 80, 148, .10) 54%,
        rgba(18, 35, 79, 0) 78%),
      linear-gradient(90deg,
        #183d77 0%,
        #224a8a 20%,
        #2d589f 46%,
        #4872b3 70%,
        #7ea2d0 100%);
    background-size:
      100% 100%,
      100vw 100vh,
      100vw 100vh,
      100vw 100vh;
    background-position:
      0 0,
      calc(-1 * var(--headline-view-x, 0px)) calc(-1 * var(--headline-view-y, 0px)),
      calc(-1 * var(--headline-view-x, 0px)) calc(-1 * var(--headline-view-y, 0px)),
      calc(-1 * var(--headline-view-x, 0px)) calc(-1 * var(--headline-view-y, 0px));
    filter: saturate(.96) brightness(.84) contrast(1.06);
  }
}

.leistungen-outro-signature{
  align-self: flex-start;
  margin-top: calc(clamp(24px, 3.25vh, 38px) * var(--leistungen-copy-fit, 1));
  margin-left: 0;
  width: calc(clamp(182px, min(12.5vw, 15.4vh), 214px) * var(--leistungen-copy-fit, 1));
  opacity: var(--leistungen-signature-opacity);
  transform: translate3d(0, calc((1 - var(--leistungen-signature-opacity)) * 8px), 0);
}

.leistungen-outro-signature::after{
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.30) 48%, rgba(255,255,255,0));
  mix-blend-mode: soft-light;
}

.leistungen-outro-signature-img{
  filter: none;
}

.leistungen-outro-title{
  color: #17365f;
  text-shadow: 0 1px 0 rgba(255,255,255,.42);
}

.leistungen-outro-subtitle{
  color: rgba(25, 36, 54, .86);
  text-shadow: 0 1px 0 rgba(255,255,255,.48);
}

.leistungen-outro-text{
  max-width: 44ch;
  opacity: 1;
  transform: none;
}

.leistungen-outro-text p{
  color: rgba(29, 43, 64, .90);
  font-weight: 400;
  text-shadow: 0 1px 0 rgba(255,255,255,.48);
}

.about-references-button{
  background: rgba(20, 31, 47, .94);
  color: #ffffff;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.16),
    0 14px 30px rgba(34, 45, 62, .14);
}

.about-references-button:visited,
.about-references-button:hover,
.about-references-button:focus,
.about-references-button:focus-visible,
.about-references-button-text{
  color: #ffffff;
}

.about-references-button-circle{
  background: rgba(255,255,255,.96);
  color: #151515;
}

.about-references-button:focus-visible{
  outline: 1px solid rgba(23, 54, 95, .52);
}

.about-references-seal{
  position: absolute;
  top: clamp(170px, 24.85vh, 238px);
  right: clamp(116px, 12.8vw, 204px);
  width: clamp(172px, 13.4vw, 214px);
  height: clamp(172px, 13.4vw, 214px);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: clamp(18px, 1.6vw, 24px);
  box-sizing: border-box;
  text-align: center;
  text-decoration: none;
  color: #ffffff;
  background: linear-gradient(90deg, #4f78c3 0%, #264b8c 100%);
  box-shadow: 0 16px 34px rgba(37, 56, 93, .14);
  opacity: var(--leistungen-copy-progress);
  transform: translate3d(calc((1 - var(--leistungen-copy-progress)) * 24px), calc((1 - var(--leistungen-copy-progress)) * 16px), 0);
  pointer-events: none;
  z-index: 4;
}

.leistungen-shell.is-outro-active .about-references-seal{
  pointer-events: auto;
}

.about-references-seal:hover,
.about-references-seal:focus,
.about-references-seal:focus-visible,
.about-references-seal:visited{
  color: #ffffff;
  text-decoration: none;
}

.about-references-seal:focus-visible{
  outline: 1px solid rgba(23, 54, 95, .52);
  outline-offset: 4px;
}

.about-references-seal-text{
  display: block;
  max-width: 10ch;
  font-size: clamp(16px, 1.18vw, 18px);
  line-height: 1.18;
  font-weight: 400;
  letter-spacing: .01em;
}

.leistungen-outro-social-link{
  color: rgba(23, 36, 56, .78);
  opacity: .82;
  text-shadow: 0 1px 0 rgba(255,255,255,.45);
}

.leistungen-outro-social-link img{
  filter: brightness(0) saturate(1) invert(17%) sepia(24%) saturate(715%) hue-rotate(178deg) brightness(92%) contrast(91%);
}

.leistungen-shell.is-outro-active .about-bg-image,
.leistungen-shell.is-outro-active .leistungen-outro-text{
  will-change: opacity, transform;
}

@media (max-width:900.98px){
  .about-bg-image{
    object-position: center center;
    opacity: calc(0.06 + (var(--about-bg-t, 0) * 0.18));
    transform: scale(1.02) translate3d(0, 0, 0);
  }

  .about-bg-layer::after{
    opacity: calc(0.14 + (var(--about-light-t, 0) * 0.58));
    background:
      linear-gradient(
        180deg,
        rgba(247, 243, 237, 0.88) 0%,
        rgba(242, 245, 248, 0.74) 52%,
        rgba(238, 243, 247, 0.88) 100%
      );
  }

  .about-references-seal{
    top: clamp(186px, 26vh, 244px);
    right: clamp(48px, 8vw, 116px);
    width: clamp(146px, 18vw, 186px);
    height: clamp(146px, 18vw, 186px);
  }
}

@media (max-width: 720px){
  .about-references-seal{
    top: auto;
    right: clamp(22px, 6vw, 34px);
    bottom: clamp(124px, 18vh, 154px);
    width: clamp(126px, 35vw, 156px);
    height: clamp(126px, 35vw, 156px);
    padding: 16px;
  }

  .about-references-seal-text{
    font-size: clamp(14px, 3.4vw, 16px);
  }

  .leistungen-outro-text{
    opacity: 1;
    transform: none;
  }

  .leistungen-outro-title{
    color: #17365f;
  }

  .leistungen-outro-subtitle,
  .leistungen-outro-text p,
  .leistungen-outro-social-link{
    color: rgba(24, 36, 54, .90);
  }
}

@media (prefers-reduced-motion: reduce){
  .about-bg-image,
  .leistungen-outro-text{
    transform: none !important;
  }
}


/* v1.250 — About/Outro Feinschliff: proportionale Signatur und konsistente Textbox-Höhe. */
@media (max-width:900.98px){
  .leistungen-outro-copy-inner{
    transform: translate3d(-3.9vw, 0, 0);
  }
  .leistungen-outro-signature{
    width: calc(clamp(162px, min(18vw, 14vh), 194px) * var(--leistungen-copy-fit, 1));
    margin-top: calc(clamp(20px, 2.7vh, 28px) * var(--leistungen-copy-fit, 1));
  }
}
@media (max-width: 720px){
  .leistungen-outro-copy-inner{
    transform: none;
  }
  .leistungen-outro-signature{
    width: calc(clamp(156px, 44vw, 188px) * var(--leistungen-copy-fit, 1));
    margin-top: 18px;
  }
}
.coverage-signature{display:none !important;}


/* v1.250b — finale Priorität für dunkleren About-Titel und proportionale Mittelbox. */
.leistungen-outro-title{
  color: #1b437d !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.34);
}

@supports ((-webkit-background-clip:text) or (background-clip:text)) {
  .section.services .leistungen-outro-title[data-headline-fx]{
    background-image:
      linear-gradient(90deg,
        rgba(212, 225, 246, .12) 0%,
        rgba(176, 200, 236, .07) 22%,
        rgba(120, 154, 214, .03) 44%,
        rgba(120, 154, 214, 0) 66%),
      radial-gradient(46vw 32vw at 6vw 7vh,
        rgba(242, 247, 255, .14) 0%,
        rgba(209, 225, 250, .10) 24%,
        rgba(83, 118, 181, .04) 54%,
        rgba(18, 35, 79, 0) 78%),
      radial-gradient(66vw 58vw at var(--reactive-x, 52vw) var(--reactive-y, 42vh),
        rgba(237, 243, 255, .24) 0%,
        rgba(206, 220, 246, .17) 18%,
        rgba(121, 153, 216, .12) 36%,
        rgba(42, 80, 148, .07) 54%,
        rgba(18, 35, 79, 0) 78%),
      linear-gradient(90deg,
        #163b74 0%,
        #1e467f 22%,
        #295291 46%,
        #3b67a8 70%,
        #6c92c5 100%) !important;
    filter: saturate(.98) brightness(.82) contrast(1.07);
  }
}

@media (max-width: 720px){
  .leistungen-outro-title{
    color: #1b437d !important;
  }
}


/* v1.251 — About/Outro: dunklerer Titel, integrierte Signatur,
   proportional zentrierter Textblock, Coverage-Signatur entfernt. */
.leistungen-outro-copy{
  padding-block: clamp(86px, 11.55vh, 112px);
}

.leistungen-outro-copy-inner{
  width: min(36.25rem, calc(100vw - clamp(56px, 8vw, 112px) - clamp(80px, 6.2vw, 126px)));
  max-width: min(36.25rem, calc(100vw - clamp(56px, 8vw, 112px) - clamp(80px, 6.2vw, 126px)));
  margin: 0;
  transform: translate3d(-4.35vw, 0, 0);
}

.leistungen-outro-title{
  color: #16376d;
}

.leistungen-outro-text{
  max-width: 44ch;
}

.leistungen-outro-signature{
  align-self: flex-start;
  margin-top: calc(clamp(16px, 2.2vh, 22px) * var(--leistungen-copy-fit, 1));
  width: calc(clamp(156px, min(11.2vw, 12.8vh), 182px) * var(--leistungen-copy-fit, 1));
  opacity: var(--leistungen-signature-opacity);
  transform: translate3d(0, calc((1 - var(--leistungen-signature-opacity)) * 8px), 0);
}

.leistungen-outro-signature::after{
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.24) 48%, rgba(255,255,255,0));
  mix-blend-mode: soft-light;
}

.leistungen-outro-signature-img{
  display: block;
  width: 100%;
  height: auto;
}

@supports ((-webkit-background-clip:text) or (background-clip:text)) {
  .section.services .leistungen-outro-title[data-headline-fx]{
    background-image:
      linear-gradient(90deg,
        rgba(165, 188, 228, .18) 0%,
        rgba(140, 168, 215, .10) 20%,
        rgba(92, 126, 187, .05) 38%,
        rgba(92, 126, 187, 0) 58%),
      radial-gradient(42vw 28vw at 5vw 6vh,
        rgba(244, 248, 255, .30) 0%,
        rgba(220, 232, 251, .22) 18%,
        rgba(124, 162, 229, .10) 38%,
        rgba(18, 35, 79, 0) 72%),
      radial-gradient(26vw 18vw at 9vw 10vh,
        rgba(193, 214, 250, .12) 0%,
        rgba(92, 126, 187, .08) 38%,
        rgba(17, 33, 73, 0) 74%),
      radial-gradient(66vw 58vw at var(--reactive-x, 52vw) var(--reactive-y, 42vh),
        rgba(240, 245, 255, .36) 0%,
        rgba(208, 223, 248, .28) 16%,
        rgba(117, 151, 214, .20) 32%,
        rgba(56, 93, 162, .12) 52%,
        rgba(18, 35, 79, 0) 74%),
      radial-gradient(88vw 76vw at var(--reactive-x-soft, 58vw) var(--reactive-y-soft, 48vh),
        rgba(169, 191, 235, .12) 0%,
        rgba(89, 119, 177, .10) 36%,
        rgba(17, 33, 73, 0) 76%),
      linear-gradient(90deg,
        #123064 0%,
        #1a417d 15%,
        #285392 36%,
        #3f68a8 58%,
        #8eacd7 82%,
        #dfe9fa 100%);
    filter: saturate(.98) brightness(.83) contrast(1.08);
  }
}

@media (max-width:900.98px){
  .leistungen-outro-copy{
    padding-block: clamp(74px, 10vh, 94px);
  }
  .leistungen-outro-copy-inner{
    width: min(33.25rem, calc(100vw - clamp(32px, 9vw, 48px)));
    max-width: min(33.25rem, calc(100vw - clamp(32px, 9vw, 48px)));
    transform: translate3d(-2.9vw, 0, 0);
  }
  .leistungen-outro-signature{
    width: calc(clamp(148px, min(16vw, 12.8vh), 176px) * var(--leistungen-copy-fit, 1));
    margin-top: calc(clamp(14px, 1.9vh, 19px) * var(--leistungen-copy-fit, 1));
  }
}

@media (max-width: 720px){
  .leistungen-outro-copy{
    padding-block: clamp(64px, 8.6vh, 84px);
  }
  .leistungen-outro-copy-inner{
    width: min(31rem, calc(100vw - clamp(32px, 9vw, 48px)));
    max-width: min(31rem, calc(100vw - clamp(32px, 9vw, 48px)));
    transform: none;
  }
  .leistungen-outro-signature{
    width: calc(clamp(142px, 42vw, 176px) * var(--leistungen-copy-fit, 1));
    margin-top: 14px;
  }
}

.coverage-signature{
  display:none !important;
}


/* v1.252 — Über-mich: feste 30%-Textkante, Peter zentriert davor,
   stärkere Copy, größere Signatur und klarer Titelverlauf. */
.leistungen-shell{
  --about-copy-left-x: calc((100vw - var(--viewport-scrollbar, 0px)) * 0.30);
  --about-copy-right-gutter: clamp(28px, 4vw, 64px);
}

.leistungen-outro-visual{
  left: 0;
  width: var(--about-copy-left-x);
  padding-left: 0;
  padding-right: 0;
  justify-content: center;
}

.leistungen-outro-copy{
  display: block;
  padding: 0;
  transform: translate3d(0, calc((1 - var(--leistungen-copy-progress)) * 18px), 0);
}

.leistungen-outro-copy-inner{
  position: absolute;
  left: var(--about-copy-left-x);
  top: 50%;
  width: min(36.25rem, calc(100vw - var(--about-copy-left-x) - var(--about-copy-right-gutter)));
  max-width: min(36.25rem, calc(100vw - var(--about-copy-left-x) - var(--about-copy-right-gutter)));
  margin: 0;
  transform: translate3d(0, -50%, 0);
}

.leistungen-outro-title{
  background-image: linear-gradient(90deg, #263c67 0%, #4e71b3 100%) !important;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  filter: none !important;
  text-shadow: none;
}

.leistungen-outro-text p{
  font-weight: 500;
}

.leistungen-outro-signature{
  align-self: flex-start;
  margin-left: 66.666%;
  margin-right: 0;
  width: min(calc(clamp(156px, min(11.2vw, 12.8vh), 182px) * 1.25 * var(--leistungen-copy-fit, 1)), 62%);
  transform: translate3d(-50%, calc((1 - var(--leistungen-signature-opacity)) * 8px), 0);
}

@media (max-width:900.98px){
  .leistungen-outro-copy{
    padding: 0;
  }

  .leistungen-outro-copy-inner{
    left: var(--about-copy-left-x);
    top: 50%;
    width: min(33.25rem, calc(100vw - var(--about-copy-left-x) - var(--about-copy-right-gutter)));
    max-width: min(33.25rem, calc(100vw - var(--about-copy-left-x) - var(--about-copy-right-gutter)));
    transform: translate3d(0, -50%, 0);
  }

  .leistungen-outro-signature{
    width: min(calc(clamp(148px, min(16vw, 12.8vh), 176px) * 1.25 * var(--leistungen-copy-fit, 1)), 62%);
    margin-left: 66.666%;
    transform: translate3d(-50%, calc((1 - var(--leistungen-signature-opacity)) * 8px), 0);
  }
}

@media (max-width: 720px){
  .leistungen-outro-copy{
    padding: 0;
  }

  .leistungen-outro-copy-inner{
    left: var(--about-copy-left-x);
    top: 50%;
    width: min(31rem, calc(100vw - var(--about-copy-left-x) - var(--about-copy-right-gutter)));
    max-width: min(31rem, calc(100vw - var(--about-copy-left-x) - var(--about-copy-right-gutter)));
    transform: translate3d(0, -50%, 0);
  }

  .leistungen-outro-signature{
    width: min(calc(clamp(142px, 42vw, 176px) * 1.25 * var(--leistungen-copy-fit, 1)), 62%);
    margin-left: 66.666%;
    transform: translate3d(-50%, calc((1 - var(--leistungen-signature-opacity)) * 8px), 0);
  }
}

/* v1.252b — finale Priorität für den vereinbarten zweifarbigen Titelverlauf. */
@supports ((-webkit-background-clip:text) or (background-clip:text)) {
  .section.services .leistungen-outro-title[data-headline-fx]{
    background-image: linear-gradient(90deg, #263c67 0%, #4e71b3 100%) !important;
    background-size: 100% 100% !important;
    background-position: 0 0 !important;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    filter: none !important;
    text-shadow: none;
  }
}


/* v1.253 — Über-mich: vertikale Proportions-Skalierung des Textblocks
   und Signaturposition leicht nach links versetzt. Horizontalwerte aus v1.252 bleiben bestehen. */
.leistungen-shell{
  --leistungen-copy-top-gap: 13vh;
  --leistungen-copy-bottom-gap: 8vh;
  --about-signature-shift-x: clamp(48px, 6vw, 100px);
}

.leistungen-outro-copy-inner{
  top: var(--leistungen-copy-top-gap);
  bottom: auto;
  transform: none;
  transform-origin: 0 0;
}

.leistungen-outro-signature{
  margin-left: calc(66.666% - var(--about-signature-shift-x));
}

/* v1.254 — Über-mich: neue Peter-Witt-Signatur mit natürlichem Seitenverhältnis
   und Peter-Foto 4vh kleiner, bei unverändertem unteren Abstand. */
.leistungen-outro-signature-img{
  width: 100%;
  height: auto;
  object-fit: contain;
}

.leistungen-outro-person{
  max-height: min(980px, 83vh);
}

@media (max-width:900.98px){
  .leistungen-outro-person{
    max-height: min(1300px, 81vh);
  }
}

@media (max-width: 720px){
  .leistungen-outro-person{
    max-height: min(1300px, 81vh);
  }
}


/* v1.255 — Über-mich: Signatur kleiner, näher am Fließtext
   und vollständig in die 13%/8%-Textblock-Skalierung eingebunden. */
.leistungen-shell{
  --about-signature-size-factor: 1.0625; /* v1.254-Größe minus 15% */
}

.leistungen-outro-signature{
  margin-top: max(0px, calc((clamp(16px, 2.2vh, 22px) * var(--leistungen-copy-fit, 1)) - 25px));
  width: min(calc(clamp(156px, min(11.2vw, 12.8vh), 182px) * var(--about-signature-size-factor) * var(--leistungen-copy-fit, 1)), 62%);
}

@media (max-width:900.98px){
  .leistungen-outro-signature{
    margin-top: max(0px, calc((clamp(14px, 1.9vh, 19px) * var(--leistungen-copy-fit, 1)) - 25px));
    width: min(calc(clamp(148px, min(16vw, 12.8vh), 176px) * var(--about-signature-size-factor) * var(--leistungen-copy-fit, 1)), 62%);
  }
}

@media (max-width: 720px){
  .leistungen-outro-signature{
    margin-top: max(0px, calc((clamp(14px, 1.9vh, 19px) * var(--leistungen-copy-fit, 1)) - 25px));
    width: min(calc(clamp(142px, 42vw, 176px) * var(--about-signature-size-factor) * var(--leistungen-copy-fit, 1)), 62%);
  }
}

/* v1.256/v1.257 — Über-mich: Referenz-Siegel zwischen Textblock und rechter Fensterkante;
   v1.257 korrigiert die optische Zentrierung um den Siegelradius und skaliert den Titel wieder proportional mit dem gesamten Textblock. */
.leistungen-shell{
  --about-viewport-width: calc(100vw - var(--viewport-scrollbar, 0px));
  --about-copy-width-current: min(36.25rem, calc(var(--about-viewport-width) - var(--about-copy-left-x) - var(--about-copy-right-gutter)));
  --about-seal-size-current: clamp(172px, 13.4vw, 214px);
  --about-seal-radius-current: calc(var(--about-seal-size-current) / 2);
  --about-seal-zone-left: calc(var(--about-copy-left-x) + var(--about-copy-width-current));
  --about-seal-zone-width: calc(var(--about-viewport-width) - var(--about-seal-zone-left));
  --about-seal-center-x: calc(var(--about-seal-zone-left) + ((var(--about-seal-zone-width) - var(--about-seal-radius-current)) / 2));
}

.leistungen-outro-copy-inner{
  width: var(--about-copy-width-current);
  max-width: var(--about-copy-width-current);
}

.about-references-seal{
  right: auto;
  left: var(--about-seal-center-x);
  width: var(--about-seal-size-current);
  height: var(--about-seal-size-current);
  transform: translate3d(calc(-50% + ((1 - var(--leistungen-copy-progress)) * 24px)), calc((1 - var(--leistungen-copy-progress)) * 16px), 0);
}

.leistungen-outro-title{
  font-size: calc(clamp(72px, 5.5vw, 126px) * var(--leistungen-copy-fit, 1));
}

@media (max-width:900.98px){
  .leistungen-shell{
    --about-copy-width-current: min(33.25rem, calc(var(--about-viewport-width) - var(--about-copy-left-x) - var(--about-copy-right-gutter)));
    --about-seal-size-current: clamp(146px, 18vw, 186px);
  }

  .leistungen-outro-title{
    font-size: calc(clamp(58px, 5.5vw, 108px) * var(--leistungen-copy-fit, 1));
  }
}

@media (max-width: 720px){
  .leistungen-shell{
    --about-copy-width-current: min(31rem, calc(var(--about-viewport-width) - var(--about-copy-left-x) - var(--about-copy-right-gutter)));
    --about-seal-size-current: clamp(126px, 35vw, 156px);
  }

  .leistungen-outro-title{
    font-size: calc(clamp(42px, 9.8vw, 72px) * var(--leistungen-copy-fit, 1));
  }
}


/* v1.260 — Coverage section rebuilt to match the approved split-screen mockup.
   Only Coverage visuals are adjusted: dark left scene, bright right principles panel,
   new icons, white left-column copy, and a right-only background/logo field. */
.section.coverage.theme-light{
  background:#edf4fa !important;
}

.section.coverage.theme-light > .section-pin{
  background:transparent !important;
}

.section.coverage .coverage-bg{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
  background:linear-gradient(90deg,
    #04183d 0%,
    #062150 21%,
    #082a62 39%,
    #0a2658 48.8%,
    #f5f8fb 48.8%,
    #f5f8fb 91%,
    #deebf5 91%,
    #deebf5 100%) !important;
}

.section.coverage .coverage-bg::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:49.15%;
  background:
    linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.12)),
    radial-gradient(76% 96% at 29% 33%, rgba(21,67,151,.30) 0%, rgba(10,34,81,.12) 42%, rgba(3,14,38,0) 70%),
    radial-gradient(58% 84% at 68% 48%, rgba(61,101,178,.12) 0%, rgba(20,43,95,.08) 36%, rgba(4,18,48,0) 74%),
    linear-gradient(180deg, rgba(4,22,57,.68), rgba(3,14,38,.88));
  opacity:1;
}

.section.coverage .coverage-bg::after{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:49.15%;
  background:
    radial-gradient(26vw 26vw at 24% 44%, rgba(60,107,194,.12) 0%, rgba(60,107,194,0) 74%),
    radial-gradient(18vw 14vw at 43% 17%, rgba(255,255,255,.025) 0%, rgba(255,255,255,0) 78%);
  mix-blend-mode:screen;
  opacity:.95;
}

.section.coverage .coverage-layout.container{
  position:relative;
  z-index:1;
  min-height:100vh;
  height:100vh;
}

.section.coverage .coverage-eyebrow,
.section.coverage .coverage-title,
.section.coverage .coverage-statement{
  left:clamp(92px, 9.2vw, 148px) !important;
}

.section.coverage .coverage-eyebrow{
  position:absolute;
  top:clamp(118px, 12.8vh, 144px) !important;
  margin:0;
  color:rgba(255,255,255,.98) !important;
  font-size:clamp(14px, .94vw, 18px);
  line-height:1.15;
  font-weight:600;
  letter-spacing:.10em;
  text-transform:uppercase;
}

.section.coverage .coverage-title{
  position:absolute;
  top:clamp(215px, 22.6vh, 262px) !important;
  transform:none !important;
  margin:0;
  width:min(35.6vw, 570px) !important;
  max-width:570px !important;
  color:#7898e2;
  font-family:var(--font-display-serif), var(--font-serif);
  font-size:clamp(60px, 4.92vw, 80px);
  line-height:.92;
  letter-spacing:.003em;
  text-align:left;
  text-shadow:none;
}

.section.coverage .coverage-title[data-headline-fx]{
  mix-blend-mode:normal;
}

@supports ((-webkit-background-clip:text) or (background-clip:text)) {
  .section.coverage .coverage-title[data-headline-fx]{
    background-image:
      linear-gradient(90deg,
        rgba(224, 236, 255, .16) 0%,
        rgba(192, 214, 246, .12) 20%,
        rgba(143, 176, 226, .06) 42%,
        rgba(143, 176, 226, 0) 64%),
      radial-gradient(46vw 32vw at 6vw 7vh,
        rgba(242, 247, 255, .16) 0%,
        rgba(209, 225, 250, .13) 24%,
        rgba(83, 118, 181, .05) 52%,
        rgba(18, 35, 79, 0) 76%),
      radial-gradient(66vw 58vw at var(--reactive-x, 52vw) var(--reactive-y, 42vh),
        rgba(237, 243, 255, .32) 0%,
        rgba(206, 220, 246, .22) 18%,
        rgba(121, 153, 216, .14) 36%,
        rgba(42, 80, 148, .08) 54%,
        rgba(18, 35, 79, 0) 78%),
      linear-gradient(90deg,
        #6d8fda 0%,
        #7396de 18%,
        #82a2e5 46%,
        #9eb8ee 70%,
        #d0def7 100%);
    background-size:
      100% 100%,
      100vw 100vh,
      100vw 100vh,
      100vw 100vh;
    background-position:
      0 0,
      calc(-1 * var(--headline-view-x, 0px)) calc(-1 * var(--headline-view-y, 0px)),
      calc(-1 * var(--headline-view-x, 0px)) calc(-1 * var(--headline-view-y, 0px)),
      calc(-1 * var(--headline-view-x, 0px)) calc(-1 * var(--headline-view-y, 0px));
    background-repeat:no-repeat;
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    color:transparent;
    filter:saturate(.96) brightness(1.02) contrast(1.02);
    text-shadow:0 0 0.01em rgba(255,255,255,.01);
  }
}

.section.coverage .coverage-statement{
  position:absolute;
  top:clamp(458px, 45.9vh, 530px) !important;
  width:min(33vw, 530px) !important;
  max-width:530px !important;
  transform:none !important;
  color:rgba(255,255,255,.98) !important;
  font-size:clamp(14px, 1.14vw, 21px);
  line-height:1.48;
  font-weight:400;
  letter-spacing:.065em;
  text-wrap:pretty;
}

.section.coverage .coverage-copy{
  position:absolute;
  inset:0;
  left:58.7% !important;
  right:6.7% !important;
  top:0 !important;
  bottom:0 !important;
  width:auto !important;
  overflow:visible !important;
}

.section.coverage .coverage-copy-inner{
  position:relative;
  width:100%;
  height:100%;
}

.section.coverage .coverage-item,
.section.coverage .coverage-item:nth-child(1),
.section.coverage .coverage-item:nth-child(2),
.section.coverage .coverage-item:nth-child(3){
  --coverage-number-width:clamp(72px, 4.7vw, 88px) !important;
  --coverage-item-gap:clamp(18px, 1.45vw, 26px) !important;
  left:0 !important;
  right:0 !important;
  width:100% !important;
  max-width:none !important;
  grid-template-columns:var(--coverage-number-width) minmax(0, 1fr) !important;
  column-gap:var(--coverage-item-gap) !important;
  row-gap:clamp(14px, 1.3vh, 18px) !important;
  align-items:start !important;
  color:#05070b !important;
  transform:translate3d(var(--coverage-item-x, 0px), 0, 0) !important;
}

.section.coverage .coverage-item:nth-child(1){top:20.6% !important;}
.section.coverage .coverage-item:nth-child(2){top:42.0% !important;}
.section.coverage .coverage-item:nth-child(3){top:63.4% !important;}

.section.coverage .coverage-number.coverage-icon{
  width:var(--coverage-number-width) !important;
  height:var(--coverage-number-width) !important;
  min-width:var(--coverage-number-width) !important;
  align-self:start !important;
}

.section.coverage .coverage-item-copy{
  width:100% !important;
  max-width:none !important;
}

.section.coverage .coverage-item-title{
  width:auto !important;
  margin:0 0 clamp(16px, 1.65vh, 22px) !important;
  padding-top:clamp(2px, .25vw, 4px);
  color:#05070b !important;
  font-family:var(--font-sans) !important;
  font-size:clamp(26px, 2.32vw, 44px) !important;
  line-height:1.06 !important;
  font-weight:500 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
}

.section.coverage .coverage-item p{
  width:min(28.4vw, 455px) !important;
  max-width:100% !important;
  color:#14171d !important;
  font-size:clamp(14px, 1.14vw, 21px) !important;
  line-height:1.45 !important;
  font-weight:400 !important;
  letter-spacing:.065em !important;
  text-wrap:pretty;
}

@media (max-width: 1280px){
  .section.coverage .coverage-eyebrow,
  .section.coverage .coverage-title,
  .section.coverage .coverage-statement{
    left:clamp(72px, 7.2vw, 112px) !important;
  }
  .section.coverage .coverage-title{
    top:clamp(195px, 21vh, 235px) !important;
    width:min(38vw, 500px) !important;
    font-size:clamp(50px, 4.8vw, 68px) !important;
  }
  .section.coverage .coverage-statement{
    top:clamp(414px, 44.5vh, 490px) !important;
    width:min(34.5vw, 420px) !important;
    font-size:clamp(12px, 1.12vw, 17px) !important;
    letter-spacing:.055em !important;
  }
  .section.coverage .coverage-copy{
    left:57.4% !important;
    right:5.8% !important;
  }
  .section.coverage .coverage-item,
  .section.coverage .coverage-item:nth-child(1),
  .section.coverage .coverage-item:nth-child(2),
  .section.coverage .coverage-item:nth-child(3){
    --coverage-number-width:clamp(64px, 5vw, 78px) !important;
  }
  .section.coverage .coverage-item-title{
    font-size:clamp(22px, 2.12vw, 35px) !important;
  }
  .section.coverage .coverage-item p{
    width:min(29.5vw, 360px) !important;
    font-size:clamp(12px, 1.05vw, 17px) !important;
    letter-spacing:.05em !important;
  }
}

@media (max-width:1080px){
  .section.coverage .coverage-eyebrow,
  .section.coverage .coverage-title,
  .section.coverage .coverage-statement{
    left:6.5% !important;
  }
  .section.coverage .coverage-title{
    top:clamp(176px, 20.8vh, 214px) !important;
    width:min(39vw, 420px) !important;
    font-size:clamp(42px, 4.55vw, 58px) !important;
  }
  .section.coverage .coverage-statement{
    top:clamp(370px, 43.8vh, 442px) !important;
    width:min(35.5vw, 325px) !important;
    font-size:clamp(11px, 1vw, 14px) !important;
    line-height:1.42 !important;
    letter-spacing:.04em !important;
  }
  .section.coverage .coverage-copy{
    left:56.4% !important;
    right:4.8% !important;
  }
  .section.coverage .coverage-item,
  .section.coverage .coverage-item:nth-child(1),
  .section.coverage .coverage-item:nth-child(2),
  .section.coverage .coverage-item:nth-child(3){
    --coverage-number-width:clamp(52px, 5.5vw, 66px) !important;
    --coverage-item-gap:clamp(14px, 1.8vw, 20px) !important;
  }
  .section.coverage .coverage-item:nth-child(1){top:22.5% !important;}
  .section.coverage .coverage-item:nth-child(2){top:45.0% !important;}
  .section.coverage .coverage-item:nth-child(3){top:67.2% !important;}
  .section.coverage .coverage-item-title{
    font-size:clamp(19px, 2.15vw, 28px) !important;
  }
  .section.coverage .coverage-item p{
    width:min(30.6vw, 290px) !important;
    font-size:clamp(11px, .98vw, 14px) !important;
    line-height:1.4 !important;
    letter-spacing:.035em !important;
  }
}

@media (max-width:900.98px){
  .section.coverage .coverage-bg{
    background:linear-gradient(180deg,
      #04183d 0%,
      #082a62 42%,
      #f5f8fb 42%,
      #f5f8fb 86%,
      #deebf5 86%,
      #deebf5 100%) !important;
  }
  .section.coverage .coverage-bg::before,
  .section.coverage .coverage-bg::after{
    width:100%;
    left:0 !important;
    top:0;
    bottom:auto;
    height:42%;
  }
  .section.coverage .coverage-eyebrow,
  .section.coverage .coverage-title,
  .section.coverage .coverage-statement{
    left:24px !important;
    width:calc(100vw - 48px) !important;
  }
  .section.coverage .coverage-eyebrow{
    top:8.8vh !important;
  }
  .section.coverage .coverage-title{
    top:14.8vh !important;
    max-width:560px !important;
    font-size:clamp(35px, 7.2vw, 54px) !important;
  }
  .section.coverage .coverage-statement{
    top:31.8vh !important;
    width:min(calc(100vw - 48px), 560px) !important;
    max-width:560px !important;
    font-size:clamp(12px, 2.65vw, 16px) !important;
    line-height:1.42 !important;
    letter-spacing:.035em !important;
  }
  .section.coverage .coverage-copy{
    left:24px !important;
    right:24px !important;
    top:50vh !important;
    bottom:4vh !important;
  }
  .section.coverage .coverage-item,
  .section.coverage .coverage-item:nth-child(1),
  .section.coverage .coverage-item:nth-child(2),
  .section.coverage .coverage-item:nth-child(3){
    --coverage-number-width:clamp(46px, 11vw, 58px) !important;
    --coverage-item-gap:clamp(12px, 3.2vw, 18px) !important;
  }
  .section.coverage .coverage-item:nth-child(1){top:0 !important;}
  .section.coverage .coverage-item:nth-child(2){top:32.5% !important;}
  .section.coverage .coverage-item:nth-child(3){top:65.5% !important;}
  .section.coverage .coverage-item-title{
    font-size:clamp(22px, 5.4vw, 30px) !important;
    margin-bottom:12px !important;
  }
  .section.coverage .coverage-item p{
    width:min(calc(100vw - 48px - var(--coverage-number-width) - var(--coverage-item-gap)), 440px) !important;
    font-size:clamp(13px, 2.9vw, 16px) !important;
    line-height:1.38 !important;
    letter-spacing:.03em !important;
  }
}

@media (max-width:560px){
  .section.coverage .coverage-eyebrow,
  .section.coverage .coverage-title,
  .section.coverage .coverage-statement{
    left:18px !important;
    width:calc(100vw - 36px) !important;
  }
  .section.coverage .coverage-copy{
    left:18px !important;
    right:18px !important;
  }
  .section.coverage .coverage-item,
  .section.coverage .coverage-item:nth-child(1),
  .section.coverage .coverage-item:nth-child(2),
  .section.coverage .coverage-item:nth-child(3){
    --coverage-number-width:42px !important;
    --coverage-item-gap:11px !important;
  }
  .section.coverage .coverage-item-title{
    font-size:clamp(20px, 6vw, 26px) !important;
  }
  .section.coverage .coverage-item p{
    width:min(calc(100vw - 36px - var(--coverage-number-width) - var(--coverage-item-gap)), 320px) !important;
    font-size:13px !important;
  }
}


/* v1.261 — Coverage background cleanup.
   The SVG/logo/pointer background effect is removed. The section keeps only a
   static split-screen color scene so the Coverage content and reveal animation
   remain unchanged. */
.section.coverage .coverage-bg{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
  background:linear-gradient(90deg,
    #04183d 0%,
    #062150 21%,
    #082a62 39%,
    #0a2658 48.8%,
    #f5f8fb 48.8%,
    #f5f8fb 91%,
    #deebf5 91%,
    #deebf5 100%) !important;
}

.section.coverage .coverage-bg::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:49.15%;
  background:
    linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.12)),
    radial-gradient(76% 96% at 29% 33%, rgba(21,67,151,.30) 0%, rgba(10,34,81,.12) 42%, rgba(3,14,38,0) 70%),
    radial-gradient(58% 84% at 68% 48%, rgba(61,101,178,.12) 0%, rgba(20,43,95,.08) 36%, rgba(4,18,48,0) 74%),
    linear-gradient(180deg, rgba(4,22,57,.68), rgba(3,14,38,.88));
  opacity:1;
}

.section.coverage .coverage-bg::after{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:49.15%;
  background:
    radial-gradient(26vw 26vw at 24% 44%, rgba(60,107,194,.12) 0%, rgba(60,107,194,0) 74%),
    radial-gradient(18vw 14vw at 43% 17%, rgba(255,255,255,.025) 0%, rgba(255,255,255,0) 78%);
  mix-blend-mode:screen;
  opacity:.95;
}


@media (max-width:900.98px){
  .section.coverage .coverage-bg{
    background:linear-gradient(180deg,
      #04183d 0%,
      #082a62 42%,
      #f5f8fb 42%,
      #f5f8fb 86%,
      #deebf5 86%,
      #deebf5 100%) !important;
  }
  .section.coverage .coverage-bg::before,
  .section.coverage .coverage-bg::after{
    width:100%;
    left:0 !important;
    top:0;
    bottom:auto;
    height:42%;
  }
}


/* v1.262 — Coverage: remove the right-edge blue band and keep only a soft radial light field.
   The left dark scene stays unchanged; the right field is now one continuous radial gradient
   from white in the center to pale blue toward the edges. */
.section.coverage .coverage-bg{
  background:
    radial-gradient(ellipse 78% 82% at 70% 48%,
      #ffffff 0%,
      #fbfdff 34%,
      #f2f7fb 58%,
      #e8f2f8 78%,
      #dcebf4 100%) !important;
}

.section.coverage .coverage-bg::before{
  width:49.15% !important;
}

.section.coverage .coverage-bg::after{
  width:49.15% !important;
}

@media (max-width:900.98px){
  .section.coverage .coverage-bg{
    background:
      radial-gradient(ellipse 86% 74% at 50% 66%,
        #ffffff 0%,
        #fbfdff 34%,
        #f2f7fb 58%,
        #e8f2f8 78%,
        #dcebf4 100%) !important;
  }
}

/* v1.262 — Coverage-specific logo contrast.
   Only the logo switches to the light version over the dark Coverage left panel;
   language links, menu button and menu panel keep their existing light-background colors. */
.topbar.logo-on-dark .logo-img.is-light{
  display:block !important;
}

.topbar.logo-on-dark .logo-img.is-dark{
  display:none !important;
}


/* v1.263 — Restore the deep Coverage blue from v1.261 while keeping the corrected right-side radial field.
   In v1.262 the radial light field covered the whole .coverage-bg and shone through the translucent
   dark left overlays. Here the right radial field is clipped to the light half only; the left base
   returns to the saturated dark-blue gradient. */
.section.coverage .coverage-bg{
  background-color:#dcebf4 !important;
  background-image:
    radial-gradient(ellipse 78% 82% at 42% 48%,
      #ffffff 0%,
      #fbfdff 34%,
      #f2f7fb 58%,
      #e8f2f8 78%,
      #dcebf4 100%),
    linear-gradient(90deg,
      #04183d 0%,
      #062150 21%,
      #082a62 39%,
      #0a2658 49.15%,
      rgba(10,38,88,0) 49.15%,
      rgba(10,38,88,0) 100%) !important;
  background-size:50.85% 100%, 100% 100% !important;
  background-position:right center, center center !important;
  background-repeat:no-repeat, no-repeat !important;
}

@media (max-width:900.98px){
  .section.coverage .coverage-bg{
    background-color:#dcebf4 !important;
    background-image:
      radial-gradient(ellipse 86% 74% at 50% 42%,
        #ffffff 0%,
        #fbfdff 34%,
        #f2f7fb 58%,
        #e8f2f8 78%,
        #dcebf4 100%),
      linear-gradient(180deg,
        #04183d 0%,
        #062150 23%,
        #082a62 42%,
        rgba(8,42,98,0) 42%,
        rgba(8,42,98,0) 100%) !important;
    background-size:100% 58%, 100% 100% !important;
    background-position:center bottom, center center !important;
    background-repeat:no-repeat, no-repeat !important;
  }
}

/* v1.264 — Refine the Coverage light half: the radial highlight starts in pure white
   at the vertical centre of the left edge of the light field; the outer tone is #ddf0fb. */
.section.coverage .coverage-bg{
  background-color:#ddf0fb !important;
  background-image:
    radial-gradient(ellipse 100% 95% at 0% 50%,
      #ffffff 0%,
      #ffffff 14%,
      #f8fcff 36%,
      #edf8fe 62%,
      #ddf0fb 100%),
    linear-gradient(90deg,
      #04183d 0%,
      #062150 21%,
      #082a62 39%,
      #0a2658 49.15%,
      rgba(10,38,88,0) 49.15%,
      rgba(10,38,88,0) 100%) !important;
  background-size:50.85% 100%, 100% 100% !important;
  background-position:right center, center center !important;
  background-repeat:no-repeat, no-repeat !important;
}

@media (max-width:900.98px){
  .section.coverage .coverage-bg{
    background-color:#ddf0fb !important;
    background-image:
      radial-gradient(ellipse 92% 78% at 50% 0%,
        #ffffff 0%,
        #ffffff 14%,
        #f8fcff 36%,
        #edf8fe 62%,
        #ddf0fb 100%),
      linear-gradient(180deg,
        #04183d 0%,
        #062150 23%,
        #082a62 42%,
        rgba(8,42,98,0) 42%,
        rgba(8,42,98,0) 100%) !important;
    background-size:100% 58%, 100% 100% !important;
    background-position:center bottom, center center !important;
    background-repeat:no-repeat, no-repeat !important;
  }
}

/* v1.265 — Contact background color refinement.
   Fresher, slightly more saturated blue with a cooler violet undertone;
   layout, form styling and scroll behaviour remain unchanged. */
.section.contact.contact-v107 > .section-pin.contact-pin{
  background:
    radial-gradient(820px 560px at 16% 16%, rgba(112, 158, 236, .62), transparent 66%),
    radial-gradient(880px 610px at 73% 38%, rgba(103, 79, 191, .28), transparent 70%),
    radial-gradient(720px 520px at 42% 82%, rgba(33, 83, 178, .22), transparent 72%),
    linear-gradient(112deg, #0754a3 0%, #104489 29%, #1e326f 58%, #111e4a 100%) !important;
}

.section.contact.contact-v107 .section-reactive-bg{
  opacity:.18;
  filter:saturate(1.08) hue-rotate(8deg);
}

@media (max-width:900.98px){
  .section.contact.contact-v107 > .section-pin.contact-pin{
    background:
      radial-gradient(680px 520px at 14% 12%, rgba(112, 158, 236, .60), transparent 68%),
      radial-gradient(720px 580px at 78% 42%, rgba(103, 79, 191, .25), transparent 72%),
      linear-gradient(118deg, #0754a3 0%, #104489 32%, #1e326f 64%, #111e4a 100%) !important;
  }
}

/* v1.266 — Contact colour refinement.
   Darker, more elegant violet light components; brighter headline while keeping
   the existing pointer-reactive headline colour effect; footer band matched to
   the upper contact field, only slightly darker. */
.section.contact.contact-v107 > .section-pin.contact-pin{
  background:
    radial-gradient(820px 560px at 16% 16%, rgba(105, 151, 232, .58), transparent 66%),
    radial-gradient(900px 620px at 74% 38%, rgba(54, 38, 136, .34), transparent 70%),
    radial-gradient(760px 540px at 42% 82%, rgba(27, 70, 166, .20), transparent 72%),
    linear-gradient(112deg, #0752a0 0%, #103f84 29%, #202f70 58%, #121d4c 100%) !important;
}

.section.contact.contact-v107 .section-reactive-bg{
  opacity:.15;
  filter:saturate(1.02) hue-rotate(7deg) brightness(.88);
}

.contact-title{
  color:rgba(218, 230, 255, .90);
  text-shadow:0 1px 0 rgba(0,0,0,.045);
}

@supports ((-webkit-background-clip:text) or (background-clip:text)) {
  .section.contact .contact-title[data-headline-fx]{
    background-image:
      linear-gradient(90deg,
        rgba(246, 250, 255, .40) 0%,
        rgba(224, 236, 255, .29) 22%,
        rgba(174, 199, 242, .15) 42%,
        rgba(174, 199, 242, 0) 64%),
      radial-gradient(42vw 28vw at 5vw 6vh,
        rgba(252, 254, 255, .58) 0%,
        rgba(235, 244, 255, .44) 18%,
        rgba(180, 209, 252, .20) 38%,
        rgba(18, 35, 79, 0) 72%),
      radial-gradient(26vw 18vw at 9vw 10vh,
        rgba(218, 232, 255, .24) 0%,
        rgba(143, 178, 243, .13) 38%,
        rgba(17, 33, 73, 0) 74%),
      radial-gradient(62vw 54vw at var(--reactive-x, 52vw) var(--reactive-y, 42vh),
        rgba(250, 253, 255, .88) 0%,
        rgba(228, 238, 255, .74) 16%,
        rgba(180, 207, 252, .50) 32%,
        rgba(105, 146, 222, .22) 52%,
        rgba(18, 35, 79, 0) 74%),
      radial-gradient(84vw 72vw at var(--reactive-x-soft, 58vw) var(--reactive-y-soft, 48vh),
        rgba(205, 222, 255, .22) 0%,
        rgba(139, 171, 234, .13) 36%,
        rgba(17, 33, 73, 0) 76%),
      linear-gradient(90deg,
        #84a8f2 0%,
        #9cbaf7 18%,
        #b8cdfa 42%,
        #d8e5ff 72%,
        #f7fbff 100%);
    background-size:
      100% 100%,
      100vw 100vh,
      100vw 100vh,
      100vw 100vh,
      100vw 100vh,
      100vw 100vh;
    background-position:
      0 0,
      calc(-1 * var(--headline-view-x, 0px)) calc(-1 * var(--headline-view-y, 0px)),
      calc(-1 * var(--headline-view-x, 0px)) calc(-1 * var(--headline-view-y, 0px)),
      calc(-1 * var(--headline-view-x, 0px)) calc(-1 * var(--headline-view-y, 0px)),
      calc(-1 * var(--headline-view-x, 0px)) calc(-1 * var(--headline-view-y, 0px)),
      calc(-1 * var(--headline-view-x, 0px)) calc(-1 * var(--headline-view-y, 0px));
    filter:saturate(1.03) brightness(1.12) contrast(1.03);
  }
}

.contact-footer-band{
  background:
    radial-gradient(760px 470px at 16% 10%, rgba(78, 125, 205, .36), transparent 68%),
    radial-gradient(820px 520px at 74% 24%, rgba(43, 30, 112, .28), transparent 72%),
    radial-gradient(660px 430px at 42% 90%, rgba(22, 58, 143, .16), transparent 74%),
    linear-gradient(112deg, #064789 0%, #0d3672 31%, #1a285f 61%, #0d183f 100%) !important;
  border-top-color:rgba(225,238,250,.20);
}

@media (max-width:900.98px){
  .section.contact.contact-v107 > .section-pin.contact-pin{
    background:
      radial-gradient(680px 520px at 14% 12%, rgba(105, 151, 232, .56), transparent 68%),
      radial-gradient(740px 590px at 78% 42%, rgba(54, 38, 136, .31), transparent 72%),
      linear-gradient(118deg, #0752a0 0%, #103f84 32%, #202f70 64%, #121d4c 100%) !important;
  }
  .contact-footer-band{
    background:
      radial-gradient(620px 440px at 16% 8%, rgba(78, 125, 205, .34), transparent 70%),
      radial-gradient(660px 500px at 78% 36%, rgba(43, 30, 112, .25), transparent 72%),
      linear-gradient(118deg, #064789 0%, #0d3672 34%, #1a285f 66%, #0d183f 100%) !important;
  }
}


/* v1.267 — Contact colour micro-adjustment.
   The contact title is made roughly 20% darker without removing the existing
   reactive headline light sweep. The contact background gains a touch more
   saturation and the violet components move slightly toward deep blue. The
   global footer adopts the deep blue tone of the left Coverage half. */
.section.contact.contact-v107 > .section-pin.contact-pin{
  background:
    radial-gradient(820px 560px at 16% 16%, rgba(112, 161, 240, .61), transparent 66%),
    radial-gradient(900px 620px at 74% 38%, rgba(42, 55, 150, .35), transparent 70%),
    radial-gradient(760px 540px at 42% 82%, rgba(24, 78, 182, .23), transparent 72%),
    linear-gradient(112deg, #0757a9 0%, #10458f 29%, #203276 58%, #101f55 100%) !important;
}

.section.contact.contact-v107 .section-reactive-bg{
  opacity:.15;
  filter:saturate(1.12) hue-rotate(4deg) brightness(.88);
}

.contact-title{
  color:rgba(174, 198, 244, .90);
  text-shadow:0 1px 0 rgba(0,0,0,.055);
}

@supports ((-webkit-background-clip:text) or (background-clip:text)) {
  .section.contact .contact-title[data-headline-fx]{
    background-image:
      linear-gradient(90deg,
        rgba(210, 226, 255, .32) 0%,
        rgba(185, 208, 250, .23) 22%,
        rgba(142, 173, 235, .12) 42%,
        rgba(142, 173, 235, 0) 64%),
      radial-gradient(42vw 28vw at 5vw 6vh,
        rgba(226, 238, 255, .46) 0%,
        rgba(202, 221, 253, .34) 18%,
        rgba(145, 180, 244, .16) 38%,
        rgba(18, 35, 79, 0) 72%),
      radial-gradient(26vw 18vw at 9vw 10vh,
        rgba(184, 207, 252, .19) 0%,
        rgba(111, 151, 232, .11) 38%,
        rgba(17, 33, 73, 0) 74%),
      radial-gradient(62vw 54vw at var(--reactive-x, 52vw) var(--reactive-y, 42vh),
        rgba(226, 239, 255, .70) 0%,
        rgba(196, 216, 252, .59) 16%,
        rgba(145, 179, 244, .40) 32%,
        rgba(84, 127, 213, .18) 52%,
        rgba(18, 35, 79, 0) 74%),
      radial-gradient(84vw 72vw at var(--reactive-x-soft, 58vw) var(--reactive-y-soft, 48vh),
        rgba(170, 196, 249, .18) 0%,
        rgba(108, 145, 224, .11) 36%,
        rgba(17, 33, 73, 0) 76%),
      linear-gradient(90deg,
        #668bdf 0%,
        #7a9eea 18%,
        #95b2f2 42%,
        #b3c8f7 72%,
        #d7e4ff 100%);
    filter:saturate(1.13) brightness(.98) contrast(1.04);
  }
}

.contact-footer-band{
  background:
    radial-gradient(760px 470px at 16% 10%, rgba(80, 132, 218, .38), transparent 68%),
    radial-gradient(820px 520px at 74% 24%, rgba(35, 47, 130, .29), transparent 72%),
    radial-gradient(660px 430px at 42% 90%, rgba(18, 62, 157, .18), transparent 74%),
    linear-gradient(112deg, #064d95 0%, #0e3979 31%, #182b67 61%, #0c1945 100%) !important;
  border-top-color:rgba(225,238,250,.20);
}

.footer{
  background:
    radial-gradient(76% 110% at 26% 24%, rgba(21,67,151,.28) 0%, rgba(10,34,81,.12) 42%, rgba(3,14,38,0) 72%),
    linear-gradient(90deg,
      #04183d 0%,
      #062150 34%,
      #082a62 68%,
      #0a2658 100%) !important;
  border-top-color:rgba(221,240,251,.12);
}

@media (max-width:900.98px){
  .section.contact.contact-v107 > .section-pin.contact-pin{
    background:
      radial-gradient(680px 520px at 14% 12%, rgba(112, 161, 240, .59), transparent 68%),
      radial-gradient(740px 590px at 78% 42%, rgba(42, 55, 150, .32), transparent 72%),
      linear-gradient(118deg, #0757a9 0%, #10458f 32%, #203276 64%, #101f55 100%) !important;
  }
  .contact-footer-band{
    background:
      radial-gradient(620px 440px at 16% 8%, rgba(80, 132, 218, .36), transparent 70%),
      radial-gradient(660px 500px at 78% 36%, rgba(35, 47, 130, .26), transparent 72%),
      linear-gradient(118deg, #064d95 0%, #0e3979 34%, #182b67 66%, #0c1945 100%) !important;
  }
}


/* v1.268 — Contact colour deepening.
   The violet light field is made stronger and darker, but shifted toward a
   saturated deep-blue/indigo character rather than a purple-lilac cast. */
.section.contact.contact-v107 > .section-pin.contact-pin{
  background:
    radial-gradient(820px 560px at 16% 16%, rgba(106, 156, 238, .64), transparent 66%),
    radial-gradient(920px 640px at 74% 38%, rgba(24, 42, 146, .46), transparent 70%),
    radial-gradient(780px 560px at 42% 82%, rgba(15, 66, 186, .30), transparent 72%),
    linear-gradient(112deg, #0656aa 0%, #0c428f 29%, #172f7a 58%, #091d5c 100%) !important;
}

.section.contact.contact-v107 .section-reactive-bg{
  opacity:.145;
  filter:saturate(1.20) hue-rotate(0deg) brightness(.82);
}

.contact-footer-band{
  background:
    radial-gradient(760px 470px at 16% 10%, rgba(70, 121, 212, .40), transparent 68%),
    radial-gradient(840px 540px at 74% 24%, rgba(19, 35, 125, .36), transparent 72%),
    radial-gradient(680px 450px at 42% 90%, rgba(12, 54, 157, .22), transparent 74%),
    linear-gradient(112deg, #04498f 0%, #0a3477 31%, #132862 61%, #071846 100%) !important;
}

@media (max-width:900.98px){
  .section.contact.contact-v107 > .section-pin.contact-pin{
    background:
      radial-gradient(680px 520px at 14% 12%, rgba(106, 156, 238, .62), transparent 68%),
      radial-gradient(760px 600px at 78% 42%, rgba(24, 42, 146, .42), transparent 72%),
      linear-gradient(118deg, #0656aa 0%, #0c428f 32%, #172f7a 64%, #091d5c 100%) !important;
  }
  .contact-footer-band{
    background:
      radial-gradient(620px 440px at 16% 8%, rgba(70, 121, 212, .38), transparent 70%),
      radial-gradient(680px 510px at 78% 36%, rgba(19, 35, 125, .32), transparent 72%),
      linear-gradient(118deg, #04498f 0%, #0a3477 34%, #132862 66%, #071846 100%) !important;
  }
}


/* v1.269 — Contact section wave replaced by a dreamy botanical memory layer.
   The former wave graphic is removed. A soft botanical image now lives inside
   .contact-main and blends into the blue field like a memory fragment. */
.contact-wave{
  display:none !important;
}

.contact-main{
  overflow:hidden;
  isolation:isolate;
}

.contact-main::before{
  content:"";
  position:absolute;
  inset:-2% -1.5% -3% -1.5%;
  z-index:0;
  pointer-events:none;
  user-select:none;
  background-image:
    linear-gradient(90deg,
      rgba(6, 28, 84, 0) 0%,
      rgba(6, 28, 84, .04) 46%,
      rgba(6, 28, 84, .16) 72%,
      rgba(6, 28, 84, .24) 100%),
    radial-gradient(68% 92% at 86% 64%,
      rgba(236, 243, 255, .20) 0%,
      rgba(210, 225, 255, .14) 28%,
      rgba(150, 175, 238, .08) 48%,
      rgba(150, 175, 238, 0) 72%),
    url('/assets/img/contact-botanical-dream.jpg');
  background-repeat:no-repeat;
  background-size:100% 100%, 100% 100%, cover;
  background-position:center, center, right center;
  opacity:.34;
  mix-blend-mode:screen;
  filter:saturate(.80) brightness(1.04) contrast(.96);
  transform:translate3d(0,0,0) scale(1.02);
}

.contact-main::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(56% 72% at 86% 60%,
      rgba(216, 228, 255, .12) 0%,
      rgba(180, 198, 244, .08) 26%,
      rgba(122, 150, 219, .04) 48%,
      rgba(122, 150, 219, 0) 72%),
    linear-gradient(180deg,
      rgba(9, 28, 78, .04) 0%,
      rgba(9, 28, 78, 0) 28%,
      rgba(9, 28, 78, .06) 100%);
  mix-blend-mode:soft-light;
}

.contact-left,
.contact-right{
  position:relative;
  z-index:1;
}

@media (max-width:900.98px){
  .contact-main::before{
    inset:-2% -3% -2% -3%;
    background-position:center, center, 72% center;
    opacity:.28;
    filter:saturate(.78) brightness(1.03) contrast(.96);
  }

  .contact-main::after{
    background:
      radial-gradient(72% 54% at 78% 18%,
        rgba(216, 228, 255, .10) 0%,
        rgba(180, 198, 244, .07) 24%,
        rgba(122, 150, 219, .04) 44%,
        rgba(122, 150, 219, 0) 70%),
      linear-gradient(180deg,
        rgba(9, 28, 78, .04) 0%,
        rgba(9, 28, 78, 0) 36%,
        rgba(9, 28, 78, .05) 100%);
  }
}

/* v1.270 — Über-mich: neues Background-/Personen-/Signatur-Set und luxuriöses Referenzsiegel.
   Additiv: bestehende Scroll-/Anchor-/REST-Logik bleibt unverändert. */
.about-bg-image{
  opacity:calc(var(--about-bg-t, 0) * .45) !important;
  object-position:50% 50%;
  filter:
    saturate(calc(.86 + (var(--about-bg-t, 0) * .08)))
    contrast(calc(1.00 - (var(--about-bg-t, 0) * .02)))
    brightness(calc(.98 + (var(--about-bg-t, 0) * .04))) !important;
}

.leistungen-outro-text p{
  color:#484537 !important;
  text-shadow:0 1px 0 rgba(255,255,255,.28);
}

.leistungen-outro-subtitle{
  color:#6b6a6a !important;
  text-shadow:0 1px 0 rgba(255,255,255,.30);
}

.leistungen-outro-signature-img{
  filter:none !important;
}

.about-references-seal{
  --about-seal-size:clamp(172px, 13.4vw, 214px);
  --about-seal-hover-y:0px;
  position:absolute;
  top:clamp(170px, 24.85vh, 238px);
  right:clamp(116px, 12.8vw, 204px);
  width:var(--about-seal-size);
  height:auto;
  min-height:calc(var(--about-seal-size) + 30px);
  border-radius:999px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:clamp(10px, .9vw, 14px);
  padding:0 0 14px;
  box-sizing:border-box;
  text-align:center;
  text-decoration:none;
  color:#1e3a58;
  background:transparent !important;
  box-shadow:none !important;
  opacity:var(--leistungen-copy-progress);
  transform:translate3d(
    calc((1 - var(--leistungen-copy-progress)) * 24px),
    calc(((1 - var(--leistungen-copy-progress)) * 16px) + var(--about-seal-hover-y)),
    0
  );
  pointer-events:none;
  z-index:4;
  cursor:pointer;
  transition:
    color 360ms cubic-bezier(.22,.61,.36,1),
    transform 420ms cubic-bezier(.22,.61,.36,1),
    opacity 260ms ease-out;
  will-change:transform, opacity;
}

.leistungen-shell.is-outro-active .about-references-seal{
  pointer-events:auto;
}

.about-references-seal:visited,
.about-references-seal:hover,
.about-references-seal:focus,
.about-references-seal:focus-visible{
  color:#1e3a58;
  text-decoration:none;
}

.about-references-seal-emblem{
  position:relative;
  display:block;
  width:var(--about-seal-size);
  height:var(--about-seal-size);
  border-radius:50%;
  overflow:hidden;
  background:radial-gradient(circle at 50% 42%, rgba(255,255,255,.24), rgba(255,255,255,0) 72%);
  box-shadow:
    0 14px 30px rgba(38, 55, 82, .08),
    0 1px 0 rgba(255,255,255,.55);
  transition:
    box-shadow 420ms cubic-bezier(.22,.61,.36,1),
    filter 420ms cubic-bezier(.22,.61,.36,1);
}

.about-references-seal-emblem::after{
  content:"";
  position:absolute;
  inset:8%;
  border-radius:50%;
  pointer-events:none;
  background:radial-gradient(circle at 46% 38%, rgba(255,255,255,.20), rgba(255,255,255,0) 62%);
  opacity:0;
  transition:opacity 420ms cubic-bezier(.22,.61,.36,1);
  mix-blend-mode:screen;
}

.about-references-seal-img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  opacity:.98;
  filter:saturate(1) contrast(1) brightness(1);
  transition:
    opacity 420ms cubic-bezier(.22,.61,.36,1),
    filter 420ms cubic-bezier(.22,.61,.36,1);
}

.about-references-seal-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.36em;
  max-width:100%;
  color:#1e3a58;
  font-size:clamp(11.5px, .78vw, 13px);
  line-height:1.15;
  font-weight:500;
  letter-spacing:.026em;
  opacity:.70;
  text-shadow:0 1px 0 rgba(255,255,255,.42);
  transition:
    color 360ms cubic-bezier(.22,.61,.36,1),
    opacity 360ms cubic-bezier(.22,.61,.36,1),
    transform 360ms cubic-bezier(.22,.61,.36,1);
}

.about-references-seal-link-arrow{
  display:inline-block;
  transform:translate3d(0,0,0);
  transition:transform 360ms cubic-bezier(.22,.61,.36,1);
}

.about-references-seal:hover,
.about-references-seal:focus-visible{
  --about-seal-hover-y:-3px;
}

.about-references-seal:hover .about-references-seal-emblem,
.about-references-seal:focus-visible .about-references-seal-emblem{
  box-shadow:
    0 22px 44px rgba(30, 58, 88, .16),
    0 8px 18px rgba(30, 58, 88, .08),
    0 0 0 1px rgba(30, 58, 88, .08),
    0 1px 0 rgba(255,255,255,.64);
}

.about-references-seal:hover .about-references-seal-emblem::after,
.about-references-seal:focus-visible .about-references-seal-emblem::after{
  opacity:.64;
}

.about-references-seal:hover .about-references-seal-img,
.about-references-seal:focus-visible .about-references-seal-img{
  opacity:1;
  filter:saturate(1.06) contrast(1.055) brightness(1.015);
}

.about-references-seal:hover .about-references-seal-link,
.about-references-seal:focus-visible .about-references-seal-link{
  color:#1e3a58;
  opacity:.92;
}

.about-references-seal:hover .about-references-seal-link-arrow,
.about-references-seal:focus-visible .about-references-seal-link-arrow{
  transform:translate3d(3px,0,0);
}

.about-references-seal:focus-visible{
  outline:1px solid rgba(30, 58, 88, .42);
  outline-offset:7px;
}

@media (max-width:900.98px){
  .about-bg-image{
    opacity:calc(var(--about-bg-t, 0) * .36) !important;
    object-position:center center;
  }

  .about-references-seal{
    --about-seal-size:clamp(146px, 18vw, 186px);
    top:clamp(186px, 26vh, 244px);
    right:clamp(48px, 8vw, 116px);
  }
}

@media (max-width:720px){
  .about-bg-image{
    opacity:calc(var(--about-bg-t, 0) * .30) !important;
  }

  .about-references-seal{
    --about-seal-size:clamp(126px, 35vw, 156px);
    top:auto;
    right:clamp(22px, 6vw, 34px);
    bottom:clamp(124px, 18vh, 154px);
    gap:9px;
    padding-bottom:10px;
  }

  .about-references-seal-link{
    font-size:clamp(11px, 3.1vw, 12.5px);
  }
}

@media (prefers-reduced-motion:reduce){
  .about-references-seal,
  .about-references-seal-emblem,
  .about-references-seal-emblem::after,
  .about-references-seal-img,
  .about-references-seal-link,
  .about-references-seal-link-arrow{
    transition:color 1ms linear, opacity 1ms linear, filter 1ms linear, box-shadow 1ms linear !important;
    animation:none !important;
  }

  .about-references-seal:hover,
  .about-references-seal:focus-visible{
    --about-seal-hover-y:0px;
  }

  .about-references-seal:hover .about-references-seal-link-arrow,
  .about-references-seal:focus-visible .about-references-seal-link-arrow{
    transform:none;
  }
}

/* v1.271 — Über-mich-Feinkorrektur: Siegel mittig im rechten Freiraum, Social-Links ruhiger, Untertitelton angepasst. */
.leistungen-outro-subtitle{
  color:#646262 !important;
}

.about-references-seal{
  --about-copy-right-edge:clamp(880px, 60.5vw, 1100px);
  right:calc((100vw - var(--about-copy-right-edge) - var(--about-seal-size)) / 2) !important;
  left:auto !important;
}

.leistungen-outro-social-link{
  color:#484537 !important;
  opacity:1 !important;
  font-size:11.2px;
  gap:clamp(8px, .70vw, 12px);
  text-shadow:none;
}

.leistungen-outro-social-link img{
  width:clamp(19px, 1.38vw, 27px) !important;
  opacity:1 !important;
  filter:none !important;
}

.leistungen-outro-social-link:hover,
.leistungen-outro-social-link:focus,
.leistungen-outro-social-link:focus-visible,
.leistungen-outro-social-link:hover img,
.leistungen-outro-social-link:focus img,
.leistungen-outro-social-link:focus-visible img{
  opacity:1 !important;
}

@media (max-width:900.98px){
  .about-references-seal{
    right:clamp(48px, 8vw, 116px) !important;
  }
}

@media (max-width:720px){
  .about-references-seal{
    right:clamp(22px, 6vw, 34px) !important;
  }
}

/* v1.272 — Über-mich: hellen Schleier über dem About-Hintergrundbild deaktiviert.
   Gezielt nur für die Über-mich-Sektion; andere Sektionen/Overlays bleiben unverändert. */
.leistungen-outro .about-bg-layer::after{
  opacity:0 !important;
  background:none !important;
}


/* v1.273 — Über-mich-Feinkorrektur: Untertitelton, Social-Hover und schattenloses Siegel mit ruhigem Scale-Hover. */
.leistungen-outro-subtitle{
  color:#514d3c !important;
}

.leistungen-outro-social-link{
  color:#484537 !important;
  opacity:1 !important;
  transition:
    color 320ms cubic-bezier(.22,.61,.36,1),
    filter 320ms cubic-bezier(.22,.61,.36,1),
    opacity 220ms ease-out;
}

.leistungen-outro-social-link img{
  opacity:1 !important;
  transition:filter 320ms cubic-bezier(.22,.61,.36,1), opacity 220ms ease-out;
}

.leistungen-outro-social-link:hover,
.leistungen-outro-social-link:focus,
.leistungen-outro-social-link:focus-visible{
  color:#6b6758 !important;
  opacity:1 !important;
  filter:brightness(1.14) saturate(1.03) !important;
}

.leistungen-outro-social-link:hover img,
.leistungen-outro-social-link:focus img,
.leistungen-outro-social-link:focus-visible img{
  opacity:1 !important;
  filter:brightness(1.18) saturate(1.03) !important;
}

.about-references-seal{
  --about-seal-hover-y:0px !important;
  --about-seal-hover-scale:1;
  box-shadow:none !important;
  text-shadow:none !important;
  transform:translate3d(
    calc((1 - var(--leistungen-copy-progress)) * 24px),
    calc((1 - var(--leistungen-copy-progress)) * 16px),
    0
  ) scale(var(--about-seal-hover-scale)) !important;
  transform-origin:center center;
}

.about-references-seal-emblem,
.about-references-seal:hover .about-references-seal-emblem,
.about-references-seal:focus-visible .about-references-seal-emblem,
.about-references-seal-link,
.about-references-seal-link-label{
  box-shadow:none !important;
  text-shadow:none !important;
}

.about-references-seal:hover,
.about-references-seal:focus-visible{
  --about-seal-hover-y:0px !important;
  --about-seal-hover-scale:1.04;
}

.about-references-seal:hover .about-references-seal-link,
.about-references-seal:focus-visible .about-references-seal-link{
  text-shadow:none !important;
  transform:none !important;
}

.about-references-seal:hover .about-references-seal-link-arrow,
.about-references-seal:focus-visible .about-references-seal-link-arrow{
  transform:none !important;
}

@media (prefers-reduced-motion:reduce){
  .about-references-seal:hover,
  .about-references-seal:focus-visible{
    --about-seal-hover-scale:1;
  }
}


/* v1.274 — Über-mich: neues blaues Hintergrundbild, goldene Headline,
   braune Siegel-Linkfarbe und eigener Topbar-/Logo-Farbzustand. */
.logo-img.is-about{
  display:none;
}

.topbar.is-about{
  color:#584011 !important;
}

.topbar.is-about .menu-btn,
.topbar.is-about .lang a{
  color:#584011 !important;
}

.topbar.is-about .logo-img.is-light,
.topbar.is-about .logo-img.is-dark{
  display:none !important;
}

.topbar.is-about .logo-img.is-about{
  display:block !important;
}

.leistungen-outro .about-bg-image{
  opacity:calc(var(--about-bg-t, 0) * .95) !important;
  object-position:50% 50%;
  filter:saturate(.98) contrast(1.01) brightness(1.01) !important;
}

.leistungen-outro .about-references-seal-link,
.leistungen-outro .about-references-seal:hover .about-references-seal-link,
.leistungen-outro .about-references-seal:focus-visible .about-references-seal-link{
  color:#4d3a2b !important;
}

.leistungen-outro-title[data-headline-fx]{
  color:#584011 !important;
  text-shadow:0 1px 0 rgba(255,255,255,.34);
  transition:
    filter 380ms cubic-bezier(.22,.61,.36,1),
    text-shadow 380ms cubic-bezier(.22,.61,.36,1);
}

@supports ((-webkit-background-clip:text) or (background-clip:text)) {
  .section.services .leistungen-outro-title[data-headline-fx]{
    background-image:
      radial-gradient(64vw 54vw at var(--reactive-x, 52vw) var(--reactive-y, 42vh),
        rgba(255, 245, 210, .40) 0%,
        rgba(214, 176, 92, .25) 18%,
        rgba(133, 102, 44, .12) 42%,
        rgba(64, 48, 21, 0) 76%),
      radial-gradient(86vw 74vw at var(--reactive-x-soft, 58vw) var(--reactive-y-soft, 48vh),
        rgba(255, 232, 166, .17) 0%,
        rgba(178, 136, 58, .11) 36%,
        rgba(64, 48, 21, 0) 78%),
      linear-gradient(90deg,
        #403015 0%,
        #5a431c 32%,
        #6f5525 62%,
        #85662c 100%) !important;
    background-size:
      100vw 100vh,
      100vw 100vh,
      100% 100% !important;
    background-position:
      calc(-1 * var(--headline-view-x, 0px)) calc(-1 * var(--headline-view-y, 0px)),
      calc(-1 * var(--headline-view-x, 0px)) calc(-1 * var(--headline-view-y, 0px)),
      0 0 !important;
    background-repeat:no-repeat !important;
    -webkit-background-clip:text !important;
    background-clip:text !important;
    -webkit-text-fill-color:transparent !important;
    color:transparent !important;
    filter:saturate(1.02) brightness(1.02) contrast(1.05) !important;
    text-shadow:0 0 0.01em rgba(88,64,17,.10);
  }

  .section.services .leistungen-outro-title[data-headline-fx]:hover,
  .section.services .leistungen-outro-title[data-headline-fx]:focus-visible{
    background-image:
      radial-gradient(64vw 54vw at var(--reactive-x, 52vw) var(--reactive-y, 42vh),
        rgba(255, 249, 224, .55) 0%,
        rgba(232, 195, 108, .34) 18%,
        rgba(171, 128, 50, .18) 42%,
        rgba(88, 64, 17, 0) 76%),
      radial-gradient(86vw 74vw at var(--reactive-x-soft, 58vw) var(--reactive-y-soft, 48vh),
        rgba(255, 239, 190, .24) 0%,
        rgba(196, 151, 64, .15) 36%,
        rgba(88, 64, 17, 0) 78%),
      linear-gradient(90deg,
        #58411d 0%,
        #765823 32%,
        #967233 64%,
        #b58b3e 100%) !important;
    filter:saturate(1.10) brightness(1.15) contrast(1.04) !important;
    text-shadow:0 0 0.01em rgba(126,95,38,.12);
  }
}

/* v1.275 — Contact section: subtly darken the upper botanical field.
   Calibrated against kontakt_soll.jpg. Keeps the existing structure and
   interaction intact while making the upper background slightly deeper and
   the plant-shadow area a touch more present. */
.contact-main::after{
  background:
    linear-gradient(180deg,
      rgba(6, 18, 62, .16) 0%,
      rgba(6, 18, 62, .11) 18%,
      rgba(6, 18, 62, .06) 38%,
      rgba(6, 18, 62, .02) 62%,
      rgba(6, 18, 62, 0) 100%),
    radial-gradient(54% 60% at 84% 28%,
      rgba(7, 20, 72, .18) 0%,
      rgba(7, 20, 72, .11) 30%,
      rgba(7, 20, 72, .05) 50%,
      rgba(7, 20, 72, 0) 74%),
    radial-gradient(56% 72% at 86% 60%,
      rgba(216, 228, 255, .10) 0%,
      rgba(180, 198, 244, .07) 26%,
      rgba(122, 150, 219, .03) 48%,
      rgba(122, 150, 219, 0) 72%),
    linear-gradient(180deg,
      rgba(9, 28, 78, .03) 0%,
      rgba(9, 28, 78, 0) 34%,
      rgba(9, 28, 78, .03) 100%);
  mix-blend-mode:normal;
}

@media (max-width:900.98px){
  .contact-main::after{
    background:
      linear-gradient(180deg,
        rgba(6, 18, 62, .15) 0%,
        rgba(6, 18, 62, .10) 22%,
        rgba(6, 18, 62, .05) 42%,
        rgba(6, 18, 62, .02) 66%,
        rgba(6, 18, 62, 0) 100%),
      radial-gradient(72% 54% at 78% 18%,
        rgba(7, 20, 72, .14) 0%,
        rgba(7, 20, 72, .09) 24%,
        rgba(7, 20, 72, .04) 44%,
        rgba(7, 20, 72, 0) 70%),
      radial-gradient(72% 54% at 78% 18%,
        rgba(216, 228, 255, .08) 0%,
        rgba(180, 198, 244, .05) 24%,
        rgba(122, 150, 219, .03) 44%,
        rgba(122, 150, 219, 0) 70%),
      linear-gradient(180deg,
        rgba(9, 28, 78, .03) 0%,
        rgba(9, 28, 78, 0) 36%,
        rgba(9, 28, 78, .03) 100%);
  }
}

/* v1.276 — Contact section: about 20% deeper than v1.275.
   Adds a slightly stronger darkening pass over the upper botanical field
   while preserving the existing plant-shadow layer and contact layout. */
.contact-main::after{
  background:
    linear-gradient(180deg,
      rgba(6, 18, 62, .19) 0%,
      rgba(6, 18, 62, .13) 18%,
      rgba(6, 18, 62, .07) 38%,
      rgba(6, 18, 62, .025) 62%,
      rgba(6, 18, 62, 0) 100%),
    radial-gradient(54% 60% at 84% 28%,
      rgba(7, 20, 72, .22) 0%,
      rgba(7, 20, 72, .13) 30%,
      rgba(7, 20, 72, .06) 50%,
      rgba(7, 20, 72, 0) 74%),
    radial-gradient(56% 72% at 86% 60%,
      rgba(216, 228, 255, .08) 0%,
      rgba(180, 198, 244, .055) 26%,
      rgba(122, 150, 219, .025) 48%,
      rgba(122, 150, 219, 0) 72%),
    linear-gradient(180deg,
      rgba(9, 28, 78, .035) 0%,
      rgba(9, 28, 78, 0) 34%,
      rgba(9, 28, 78, .035) 100%);
}

@media (max-width:900.98px){
  .contact-main::after{
    background:
      linear-gradient(180deg,
        rgba(6, 18, 62, .18) 0%,
        rgba(6, 18, 62, .12) 22%,
        rgba(6, 18, 62, .06) 42%,
        rgba(6, 18, 62, .025) 66%,
        rgba(6, 18, 62, 0) 100%),
      radial-gradient(72% 54% at 78% 18%,
        rgba(7, 20, 72, .17) 0%,
        rgba(7, 20, 72, .11) 24%,
        rgba(7, 20, 72, .05) 44%,
        rgba(7, 20, 72, 0) 70%),
      radial-gradient(72% 54% at 78% 18%,
        rgba(216, 228, 255, .065) 0%,
        rgba(180, 198, 244, .04) 24%,
        rgba(122, 150, 219, .025) 44%,
        rgba(122, 150, 219, 0) 70%),
      linear-gradient(180deg,
        rgba(9, 28, 78, .035) 0%,
        rgba(9, 28, 78, 0) 36%,
        rgba(9, 28, 78, .035) 100%);
  }
}

/* v1.277 — Contact section real darkening pass.
   Finding: earlier changes only darkened .contact-main::after. The section is
   also brightened by the base gradient, the pointer-reactive light layer and
   the botanical image layer itself, which used screen blending and brightness
   above 1. This pass adjusts all three mechanisms together. */
.section.contact.contact-v107 > .section-pin.contact-pin{
  background:
    radial-gradient(820px 560px at 16% 16%, rgba(82, 132, 212, .48), transparent 66%),
    radial-gradient(920px 640px at 74% 38%, rgba(16, 30, 122, .48), transparent 70%),
    radial-gradient(780px 560px at 42% 82%, rgba(10, 52, 162, .25), transparent 72%),
    linear-gradient(112deg, #044a98 0%, #083675 29%, #142764 58%, #071542 100%) !important;
}

.section.contact.contact-v107 .section-reactive-bg{
  opacity:.07 !important;
  filter:saturate(.98) hue-rotate(0deg) brightness(.62) !important;
}

.contact-main::before{
  background-image:
    linear-gradient(90deg,
      rgba(4, 14, 52, 0) 0%,
      rgba(4, 14, 52, .05) 42%,
      rgba(4, 14, 52, .18) 70%,
      rgba(4, 14, 52, .32) 100%),
    radial-gradient(70% 92% at 84% 58%,
      rgba(7, 17, 58, .20) 0%,
      rgba(7, 17, 58, .14) 30%,
      rgba(7, 17, 58, .06) 52%,
      rgba(7, 17, 58, 0) 74%),
    url('/assets/img/contact-botanical-dream.jpg');
  opacity:.43;
  mix-blend-mode:multiply;
  filter:saturate(.90) brightness(.78) contrast(1.16);
}

.contact-main::after{
  background:
    linear-gradient(180deg,
      rgba(4, 12, 48, .34) 0%,
      rgba(4, 12, 48, .25) 22%,
      rgba(4, 12, 48, .15) 44%,
      rgba(4, 12, 48, .06) 68%,
      rgba(4, 12, 48, 0) 100%),
    radial-gradient(58% 68% at 84% 35%,
      rgba(3, 10, 42, .30) 0%,
      rgba(3, 10, 42, .20) 32%,
      rgba(3, 10, 42, .09) 54%,
      rgba(3, 10, 42, 0) 76%),
    radial-gradient(54% 70% at 86% 62%,
      rgba(190, 210, 255, .045) 0%,
      rgba(150, 178, 238, .028) 28%,
      rgba(110, 140, 210, .014) 48%,
      rgba(110, 140, 210, 0) 72%),
    linear-gradient(180deg,
      rgba(8, 24, 72, .045) 0%,
      rgba(8, 24, 72, 0) 38%,
      rgba(8, 24, 72, .045) 100%);
  mix-blend-mode:normal;
}

.contact-footer-band{
  background:
    radial-gradient(760px 470px at 16% 10%, rgba(52, 96, 180, .30), transparent 68%),
    radial-gradient(840px 540px at 74% 24%, rgba(12, 25, 104, .34), transparent 72%),
    radial-gradient(680px 450px at 42% 90%, rgba(8, 42, 132, .16), transparent 74%),
    linear-gradient(112deg, #033b7c 0%, #072a62 31%, #101f52 61%, #050e33 100%) !important;
}

@media (max-width:900.98px){
  .section.contact.contact-v107 > .section-pin.contact-pin{
    background:
      radial-gradient(680px 520px at 14% 12%, rgba(82, 132, 212, .46), transparent 68%),
      radial-gradient(760px 600px at 78% 42%, rgba(16, 30, 122, .44), transparent 72%),
      linear-gradient(118deg, #044a98 0%, #083675 32%, #142764 64%, #071542 100%) !important;
  }

  .contact-main::before{
    opacity:.38;
    filter:saturate(.88) brightness(.78) contrast(1.14);
    mix-blend-mode:multiply;
  }

  .contact-main::after{
    background:
      linear-gradient(180deg,
        rgba(4, 12, 48, .31) 0%,
        rgba(4, 12, 48, .22) 24%,
        rgba(4, 12, 48, .13) 46%,
        rgba(4, 12, 48, .055) 70%,
        rgba(4, 12, 48, 0) 100%),
      radial-gradient(72% 56% at 78% 18%,
        rgba(3, 10, 42, .24) 0%,
        rgba(3, 10, 42, .15) 26%,
        rgba(3, 10, 42, .07) 48%,
        rgba(3, 10, 42, 0) 72%),
      radial-gradient(72% 54% at 78% 18%,
        rgba(190, 210, 255, .035) 0%,
        rgba(150, 178, 238, .022) 24%,
        rgba(110, 140, 210, .012) 44%,
        rgba(110, 140, 210, 0) 70%);
  }

  .contact-footer-band{
    background:
      radial-gradient(620px 440px at 16% 8%, rgba(52, 96, 180, .28), transparent 70%),
      radial-gradient(680px 510px at 78% 36%, rgba(12, 25, 104, .30), transparent 72%),
      linear-gradient(118deg, #033b7c 0%, #072a62 34%, #101f52 66%, #050e33 100%) !important;
  }
}

/* v1.278 — Contact section: lighten the v1.277 calibration by roughly 10%.
   The adjustment is applied to all brightness-relevant layers introduced in
   v1.277: base gradient, reactive glow, botanical layer, dark overlay and
   footer band. */
.section.contact.contact-v107 > .section-pin.contact-pin{
  background:
    radial-gradient(820px 560px at 16% 16%, rgba(92, 145, 225, .50), transparent 66%),
    radial-gradient(920px 640px at 74% 38%, rgba(20, 36, 136, .46), transparent 70%),
    radial-gradient(780px 560px at 42% 82%, rgba(12, 60, 175, .27), transparent 72%),
    linear-gradient(112deg, #05509f 0%, #093c7f 29%, #172c6e 58%, #081a4b 100%) !important;
}

.section.contact.contact-v107 .section-reactive-bg{
  opacity:.08 !important;
  filter:saturate(1.0) hue-rotate(0deg) brightness(.70) !important;
}

.contact-main::before{
  background-image:
    linear-gradient(90deg,
      rgba(4, 14, 52, 0) 0%,
      rgba(4, 14, 52, .04) 42%,
      rgba(4, 14, 52, .15) 70%,
      rgba(4, 14, 52, .28) 100%),
    radial-gradient(70% 92% at 84% 58%,
      rgba(7, 17, 58, .17) 0%,
      rgba(7, 17, 58, .12) 30%,
      rgba(7, 17, 58, .05) 52%,
      rgba(7, 17, 58, 0) 74%),
    url('/assets/img/contact-botanical-dream.jpg');
  opacity:.40;
  mix-blend-mode:multiply;
  filter:saturate(.92) brightness(.86) contrast(1.12);
}

.contact-main::after{
  background:
    linear-gradient(180deg,
      rgba(4, 12, 48, .30) 0%,
      rgba(4, 12, 48, .22) 22%,
      rgba(4, 12, 48, .13) 44%,
      rgba(4, 12, 48, .05) 68%,
      rgba(4, 12, 48, 0) 100%),
    radial-gradient(58% 68% at 84% 35%,
      rgba(3, 10, 42, .26) 0%,
      rgba(3, 10, 42, .17) 32%,
      rgba(3, 10, 42, .075) 54%,
      rgba(3, 10, 42, 0) 76%),
    radial-gradient(54% 70% at 86% 62%,
      rgba(205, 222, 255, .055) 0%,
      rgba(160, 188, 245, .036) 28%,
      rgba(118, 150, 218, .018) 48%,
      rgba(118, 150, 218, 0) 72%),
    linear-gradient(180deg,
      rgba(8, 24, 72, .038) 0%,
      rgba(8, 24, 72, 0) 38%,
      rgba(8, 24, 72, .038) 100%);
  mix-blend-mode:normal;
}

.contact-footer-band{
  background:
    radial-gradient(760px 470px at 16% 10%, rgba(60, 108, 195, .32), transparent 68%),
    radial-gradient(840px 540px at 74% 24%, rgba(15, 30, 116, .32), transparent 72%),
    radial-gradient(680px 450px at 42% 90%, rgba(10, 48, 148, .18), transparent 74%),
    linear-gradient(112deg, #044286 0%, #082e6b 31%, #12245a 61%, #06113a 100%) !important;
}

@media (max-width:900.98px){
  .section.contact.contact-v107 > .section-pin.contact-pin{
    background:
      radial-gradient(680px 520px at 14% 12%, rgba(92, 145, 225, .48), transparent 68%),
      radial-gradient(760px 600px at 78% 42%, rgba(20, 36, 136, .42), transparent 72%),
      linear-gradient(118deg, #05509f 0%, #093c7f 32%, #172c6e 64%, #081a4b 100%) !important;
  }

  .contact-main::before{
    opacity:.36;
    filter:saturate(.90) brightness(.86) contrast(1.10);
    mix-blend-mode:multiply;
  }

  .contact-main::after{
    background:
      linear-gradient(180deg,
        rgba(4, 12, 48, .27) 0%,
        rgba(4, 12, 48, .19) 24%,
        rgba(4, 12, 48, .11) 46%,
        rgba(4, 12, 48, .045) 70%,
        rgba(4, 12, 48, 0) 100%),
      radial-gradient(72% 56% at 78% 18%,
        rgba(3, 10, 42, .21) 0%,
        rgba(3, 10, 42, .13) 26%,
        rgba(3, 10, 42, .06) 48%,
        rgba(3, 10, 42, 0) 72%),
      radial-gradient(72% 54% at 78% 18%,
        rgba(205, 222, 255, .045) 0%,
        rgba(160, 188, 245, .028) 24%,
        rgba(118, 150, 218, .016) 44%,
        rgba(118, 150, 218, 0) 70%);
  }

  .contact-footer-band{
    background:
      radial-gradient(620px 440px at 16% 8%, rgba(60, 108, 195, .30), transparent 70%),
      radial-gradient(680px 510px at 78% 36%, rgba(15, 30, 116, .28), transparent 72%),
      linear-gradient(118deg, #044286 0%, #082e6b 34%, #12245a 66%, #06113a 100%) !important;
  }
}


/* v1.279 — About image at full final opacity + Leistungen blue surface lifted.
   The services blue background is brightened in HSL-style steps so the hue and
   saturation stay in the same family; image layers and existing scroll logic
   remain untouched. */
.leistungen-outro .about-bg-image{
  opacity:var(--about-bg-t, 0) !important;
}

.section.services.theme-dark > .section-pin,
body.has-scene .section.services.theme-dark > .section-pin{
  background:
    radial-gradient(980px 560px at 18% 28%, rgba(123, 162, 225, 0.30), transparent 62%),
    radial-gradient(760px 470px at 72% 46%, rgba(106, 145, 203, 0.20), transparent 66%),
    radial-gradient(620px 420px at 44% 76%, rgba(41, 101, 185, 0.15), transparent 68%),
    linear-gradient(120deg, #0c3670 0%, #08254d 48%, #06122e 100%) !important;
}

.leistungen-bg-layer::after{
  background:
    linear-gradient(
      90deg,
      rgba(5, 14, 34, 0.56) 0%,
      rgba(5, 14, 34, 0.27) 45%,
      rgba(5, 14, 34, 0.46) 100%
    ),
    radial-gradient(
      circle at 72% 52%,
      rgba(88, 136, 214, 0.31),
      transparent 46%
    );
}

@media (max-width:900.98px){
  .section.services.theme-dark > .section-pin,
  body.has-scene .section.services.theme-dark > .section-pin{
    background:
      radial-gradient(980px 560px at 18% 28%, rgba(123, 162, 225, 0.26), transparent 62%),
      radial-gradient(760px 470px at 72% 46%, rgba(106, 145, 203, 0.18), transparent 66%),
      radial-gradient(620px 420px at 44% 76%, rgba(41, 101, 185, 0.13), transparent 68%),
      linear-gradient(120deg, #0c3670 0%, #08254d 48%, #06122e 100%) !important;
  }

  .leistungen-bg-layer::after{
    background:
      linear-gradient(
        90deg,
        rgba(5, 14, 34, 0.67) 0%,
        rgba(5, 14, 34, 0.46) 50%,
        rgba(5, 14, 34, 0.61) 100%
      ),
      radial-gradient(
        circle at 50% 52%,
        rgba(88, 136, 214, 0.22),
        transparent 44%
      );
  }
}

/* v1.283 — Coverage: lift the left blue field toward the Leistungen tone.
   The right light half remains unchanged. Only the dark left half receives a
   brighter, saturated blue base and softer depth overlays so it sits closer to
   the Leistungen section without losing the elegant split-screen character. */
.section.coverage .coverage-bg{
  background-color:#ddf0fb !important;
  background-image:
    radial-gradient(ellipse 100% 95% at 0% 50%,
      #ffffff 0%,
      #ffffff 14%,
      #f8fcff 36%,
      #edf8fe 62%,
      #ddf0fb 100%),
    radial-gradient(980px 560px at 17% 30%,
      rgba(123, 162, 225, .26) 0%,
      rgba(60, 112, 200, .12) 42%,
      rgba(60, 112, 200, 0) 64%),
    radial-gradient(720px 470px at 38% 55%,
      rgba(74, 130, 214, .16) 0%,
      rgba(33, 86, 174, .07) 46%,
      rgba(33, 86, 174, 0) 70%),
    linear-gradient(90deg,
      #0c3670 0%,
      #0a2f63 21%,
      #082954 39%,
      #08254d 49.15%,
      rgba(8,37,77,0) 49.15%,
      rgba(8,37,77,0) 100%) !important;
  background-size:50.85% 100%, 49.15% 100%, 49.15% 100%, 100% 100% !important;
  background-position:right center, left center, left center, center center !important;
  background-repeat:no-repeat, no-repeat, no-repeat, no-repeat !important;
}

.section.coverage .coverage-bg::before{
  background:
    linear-gradient(180deg, rgba(0,0,0,.07), rgba(0,0,0,.05)),
    radial-gradient(76% 96% at 29% 33%, rgba(58,112,210,.22) 0%, rgba(17,58,132,.10) 42%, rgba(3,14,38,0) 70%),
    radial-gradient(58% 84% at 68% 48%, rgba(90,139,220,.11) 0%, rgba(28,72,154,.06) 36%, rgba(4,18,48,0) 74%),
    linear-gradient(180deg, rgba(5,24,61,.36), rgba(3,14,38,.56));
}

.section.coverage .coverage-bg::after{
  background:
    radial-gradient(30vw 28vw at 24% 44%, rgba(93,145,224,.18) 0%, rgba(93,145,224,0) 74%),
    radial-gradient(20vw 15vw at 43% 17%, rgba(255,255,255,.035) 0%, rgba(255,255,255,0) 78%);
  opacity:1;
}

@media (max-width:900.98px){
  .section.coverage .coverage-bg{
    background-color:#ddf0fb !important;
    background-image:
      radial-gradient(ellipse 92% 78% at 50% 0%,
        #ffffff 0%,
        #ffffff 14%,
        #f8fcff 36%,
        #edf8fe 62%,
        #ddf0fb 100%),
      radial-gradient(840px 420px at 18% 18%,
        rgba(123, 162, 225, .22) 0%,
        rgba(60, 112, 200, .11) 42%,
        rgba(60, 112, 200, 0) 64%),
      linear-gradient(180deg,
        #0c3670 0%,
        #0a2f63 23%,
        #08254d 42%,
        rgba(8,37,77,0) 42%,
        rgba(8,37,77,0) 100%) !important;
    background-size:100% 58%, 100% 42%, 100% 100% !important;
    background-position:center bottom, center top, center center !important;
    background-repeat:no-repeat, no-repeat, no-repeat !important;
  }

  .section.coverage .coverage-bg::before{
    background:
      linear-gradient(180deg, rgba(0,0,0,.07), rgba(0,0,0,.05)),
      radial-gradient(76% 96% at 29% 33%, rgba(58,112,210,.20) 0%, rgba(17,58,132,.09) 42%, rgba(3,14,38,0) 70%),
      linear-gradient(180deg, rgba(5,24,61,.34), rgba(3,14,38,.52));
  }

  .section.coverage .coverage-bg::after{
    background:
      radial-gradient(62vw 34vw at 28% 22%, rgba(93,145,224,.14) 0%, rgba(93,145,224,0) 74%),
      radial-gradient(34vw 20vw at 50% 10%, rgba(255,255,255,.028) 0%, rgba(255,255,255,0) 78%);
  }
}

/* v1.284 — Coverage: align eyebrow typography/vertical start with Leistungen.
   The coverage eyebrow now uses the same top distance and text treatment as
   .leistungen-kicker. The coverage title follows that upward movement and is
   drawn 50px closer to the eyebrow for a tighter premium composition. */
.section.coverage .coverage-eyebrow{
  top:clamp(72px, 10vh, 116px) !important;
  font-family:inherit !important;
  font-size:15px !important;
  font-weight:500 !important;
  line-height:1.5 !important;
  letter-spacing:.18em !important;
}

.section.coverage .coverage-title{
  top:calc(clamp(72px, 10vh, 116px) + 48px) !important;
}

@media (max-width:900.98px){
  .section.coverage .coverage-eyebrow{
    top:clamp(72px, 10vh, 116px) !important;
    font-family:inherit !important;
    font-size:15px !important;
    font-weight:500 !important;
    line-height:1.5 !important;
    letter-spacing:.18em !important;
  }

  .section.coverage .coverage-title{
    top:calc(clamp(72px, 10vh, 116px) + 46px) !important;
  }
}

/* v1.285 — Coverage: align title top with first right-side icon and tighten copy gap.
   The desktop split-screen composition now uses the first Coverage icon as the
   vertical reference. The statement starts roughly three quarters of one title
   line below the three-line title block. */
.section.coverage .coverage-title{
  top:20.6% !important;
}

.section.coverage .coverage-statement{
  top:calc(20.6% + clamp(207px, 16.98vw, 276px)) !important;
}

@media (max-width:1280px){
  .section.coverage .coverage-title{
    top:20.6% !important;
  }

  .section.coverage .coverage-statement{
    top:calc(20.6% + clamp(173px, 16.56vw, 235px)) !important;
  }
}

@media (max-width:1080px){
  .section.coverage .coverage-title{
    top:22.5% !important;
  }

  .section.coverage .coverage-statement{
    top:calc(22.5% + clamp(145px, 15.70vw, 200px)) !important;
  }
}

@media (max-width:900.98px){
  /* On the stacked/mobile layout there is no right-side icon column to align to,
     so keep the compact mobile vertical rhythm while applying the tighter
     title-to-statement relationship. */
  .section.coverage .coverage-title{
    top:calc(clamp(72px, 10vh, 116px) + 46px) !important;
  }

  .section.coverage .coverage-statement{
    top:calc(clamp(72px, 10vh, 116px) + 46px + clamp(121px, 27vw, 186px)) !important;
  }
}

/* v1.286 — Coverage: final vertical micro-adjustment.
   Per feedback: title rises by 30px; statement rises by 50px total
   (30px with the title plus an additional 20px closer to it). */
.section.coverage .coverage-title{
  top:calc(20.6% - 30px) !important;
}

.section.coverage .coverage-statement{
  top:calc(20.6% + clamp(207px, 16.98vw, 276px) - 50px) !important;
}

@media (max-width:1280px){
  .section.coverage .coverage-title{
    top:calc(20.6% - 30px) !important;
  }

  .section.coverage .coverage-statement{
    top:calc(20.6% + clamp(173px, 16.56vw, 235px) - 50px) !important;
  }
}

@media (max-width:1080px){
  .section.coverage .coverage-title{
    top:calc(22.5% - 30px) !important;
  }

  .section.coverage .coverage-statement{
    top:calc(22.5% + clamp(145px, 15.70vw, 200px) - 50px) !important;
  }
}

@media (max-width:900.98px){
  .section.coverage .coverage-title{
    top:calc(clamp(72px, 10vh, 116px) + 46px - 30px) !important;
  }

  .section.coverage .coverage-statement{
    top:calc(clamp(72px, 10vh, 116px) + 46px + clamp(121px, 27vw, 186px) - 50px) !important;
  }
}

/* v1.287 — Coverage: stable internal coordinate system.
   Replaces the previous one-off pixel/percentage nudges with shared layout
   variables. The headline and the first right-hand icon now start on the same
   coordinate line; the statement uses a proportional title-to-copy offset, and
   compact viewport-height rules keep a safe lower margin instead of pushing
   elements by independent pixel corrections. */
.section.coverage{
  --coverage-eyebrow-top:clamp(72px, 10svh, 116px);
  --coverage-left-x:clamp(72px, 7.2vw, 138px);
  --coverage-right-x:58.7%;
  --coverage-right-edge:6.7%;
  --coverage-stage-top:clamp(142px, 20.6svh, 206px);
  --coverage-title-size:clamp(52px, 4.85vw, 82px);
  --coverage-title-line-height:.92;
  --coverage-title-to-statement:clamp(179px, 16.75vw, 283px);
  --coverage-statement-width:min(33vw, 530px);
  --coverage-icon-size:clamp(72px, 4.7vw, 88px);
  --coverage-item-gap-stable:clamp(18px, 1.45vw, 26px);
  --coverage-row-gap-1:clamp(148px, 21svh, 224px);
  --coverage-row-gap-2:clamp(296px, 42svh, 448px);
  --coverage-bottom-safe:clamp(58px, 7svh, 100px);
}

.section.coverage > .section-pin{
  min-height:100svh !important;
  height:100svh;
  overflow:hidden !important;
  overflow:clip !important;
}

.section.coverage .coverage-layout.container{
  height:100svh !important;
  min-height:100svh !important;
  position:relative !important;
  overflow:hidden !important;
  overflow:clip !important;
}

.section.coverage .coverage-eyebrow{
  left:var(--coverage-left-x) !important;
  top:var(--coverage-eyebrow-top) !important;
  font-family:inherit !important;
  font-size:15px !important;
  font-weight:500 !important;
  line-height:1.5 !important;
  letter-spacing:.18em !important;
}

.section.coverage .coverage-title{
  left:var(--coverage-left-x) !important;
  top:var(--coverage-stage-top) !important;
  width:min(40.8vw, 690px) !important;
  max-width:690px !important;
  transform:none !important;
  font-size:var(--coverage-title-size) !important;
  line-height:var(--coverage-title-line-height) !important;
}

.section.coverage .coverage-statement{
  left:var(--coverage-left-x) !important;
  top:calc(var(--coverage-stage-top) + var(--coverage-title-to-statement)) !important;
  width:var(--coverage-statement-width) !important;
  max-width:530px !important;
  transform:none !important;
}

.section.coverage .coverage-copy{
  left:var(--coverage-right-x) !important;
  right:var(--coverage-right-edge) !important;
  top:0 !important;
  bottom:var(--coverage-bottom-safe) !important;
  height:auto !important;
  overflow:visible !important;
  contain:none !important;
}

.section.coverage .coverage-copy-inner{
  height:100svh !important;
  min-height:100svh !important;
  position:relative !important;
}

.section.coverage .coverage-item,
.section.coverage .coverage-item:nth-child(1),
.section.coverage .coverage-item:nth-child(2),
.section.coverage .coverage-item:nth-child(3){
  --coverage-number-width:var(--coverage-icon-size) !important;
  --coverage-item-gap:var(--coverage-item-gap-stable) !important;
  left:0 !important;
  right:0 !important;
  width:100% !important;
  max-width:none !important;
  grid-template-columns:var(--coverage-icon-size) minmax(0, 1fr) !important;
  column-gap:var(--coverage-item-gap-stable) !important;
  align-items:start !important;
}

.section.coverage .coverage-item:nth-child(1){top:var(--coverage-stage-top) !important;}
.section.coverage .coverage-item:nth-child(2){top:calc(var(--coverage-stage-top) + var(--coverage-row-gap-1)) !important;}
.section.coverage .coverage-item:nth-child(3){top:calc(var(--coverage-stage-top) + var(--coverage-row-gap-2)) !important;}

.section.coverage .coverage-number.coverage-icon{
  width:var(--coverage-icon-size) !important;
  height:var(--coverage-icon-size) !important;
  min-width:var(--coverage-icon-size) !important;
  transform:none !important;
}

@media (max-width:1280px) and (min-width:901px){
  .section.coverage{
    --coverage-left-x:clamp(64px, 7.1vw, 112px);
    --coverage-right-x:57.4%;
    --coverage-right-edge:5.8%;
    --coverage-stage-top:clamp(132px, 20.6svh, 188px);
    --coverage-title-size:clamp(46px, 4.55vw, 68px);
    --coverage-title-to-statement:clamp(159px, 15.7vw, 235px);
    --coverage-statement-width:min(34.5vw, 420px);
    --coverage-icon-size:clamp(64px, 5vw, 78px);
    --coverage-row-gap-1:clamp(136px, 20svh, 206px);
    --coverage-row-gap-2:clamp(272px, 40svh, 412px);
  }
}

@media (max-width:1080px) and (min-width:901px){
  .section.coverage{
    --coverage-left-x:6.5%;
    --coverage-right-x:56.4%;
    --coverage-right-edge:4.8%;
    --coverage-stage-top:clamp(124px, 21svh, 172px);
    --coverage-title-size:clamp(40px, 4.35vw, 58px);
    --coverage-title-to-statement:clamp(138px, 15.0vw, 200px);
    --coverage-statement-width:min(35.5vw, 325px);
    --coverage-icon-size:clamp(52px, 5.5vw, 66px);
    --coverage-item-gap-stable:clamp(14px, 1.8vw, 20px);
    --coverage-row-gap-1:clamp(124px, 19.5svh, 186px);
    --coverage-row-gap-2:clamp(248px, 39svh, 372px);
  }
}

@media (min-width:901px) and (max-height:760px){
  .section.coverage{
    --coverage-eyebrow-top:clamp(56px, 8.8svh, 78px);
    --coverage-stage-top:clamp(108px, 18.2svh, 142px);
    --coverage-title-size:clamp(40px, 4.25vw, 64px);
    --coverage-title-to-statement:clamp(138px, 14.65vw, 221px);
    --coverage-icon-size:clamp(54px, 4.1vw, 72px);
    --coverage-row-gap-1:clamp(116px, 19svh, 152px);
    --coverage-row-gap-2:clamp(232px, 38svh, 304px);
    --coverage-bottom-safe:clamp(44px, 6svh, 72px);
  }

  .section.coverage .coverage-statement,
  .section.coverage .coverage-item p{
    font-size:clamp(11px, .96vw, 15px) !important;
    line-height:1.39 !important;
  }

  .section.coverage .coverage-item-title{
    font-size:clamp(19px, 2vw, 32px) !important;
    margin-bottom:clamp(10px, 1.25svh, 16px) !important;
  }
}

@media (max-width:900.98px){
  .section.coverage{
    --coverage-eyebrow-top:clamp(62px, 8.8svh, 94px);
    --coverage-left-x:24px;
    --coverage-stage-top:clamp(112px, 14.8svh, 152px);
    --coverage-title-size:clamp(35px, 7.2vw, 54px);
    --coverage-title-to-statement:clamp(124px, 17svh, 184px);
    --coverage-bottom-safe:clamp(26px, 4svh, 42px);
  }

  .section.coverage .coverage-eyebrow,
  .section.coverage .coverage-title,
  .section.coverage .coverage-statement{
    left:var(--coverage-left-x) !important;
    width:calc(100vw - 48px) !important;
  }

  .section.coverage .coverage-title{
    top:var(--coverage-stage-top) !important;
    font-size:var(--coverage-title-size) !important;
  }

  .section.coverage .coverage-statement{
    top:calc(var(--coverage-stage-top) + var(--coverage-title-to-statement)) !important;
    width:min(calc(100vw - 48px), 560px) !important;
  }

  .section.coverage .coverage-copy{
    left:24px !important;
    right:24px !important;
    top:calc(var(--coverage-stage-top) + var(--coverage-title-to-statement) + clamp(180px, 22svh, 240px)) !important;
    bottom:var(--coverage-bottom-safe) !important;
  }
}

@media (max-width:560px){
  .section.coverage{
    --coverage-left-x:18px;
    --coverage-stage-top:clamp(106px, 14.2svh, 140px);
    --coverage-title-to-statement:clamp(112px, 16.5svh, 168px);
  }

  .section.coverage .coverage-eyebrow,
  .section.coverage .coverage-title,
  .section.coverage .coverage-statement{
    width:calc(100vw - 36px) !important;
  }

  .section.coverage .coverage-copy{
    left:18px !important;
    right:18px !important;
  }
}

/* v1.288 — Coverage: rebuild the right-hand stage as a responsive internal
   coordinate system. This removes the fragile absolute top percentages for
   the three principle blocks on desktop: the right column now starts on the
   same line as the left title, distributes all three blocks inside the visible
   viewport, and keeps a safe bottom margin. Body copy is aligned to the
   Über-mich paragraph scale. */
.section.coverage{
  --coverage-stage-top:clamp(148px, 17.8svh, 206px);
  --coverage-left-x:clamp(72px, 7.2vw, 138px);
  --coverage-right-x:58.7%;
  --coverage-right-edge:6.7%;
  --coverage-title-size:clamp(52px, 4.85vw, 82px);
  --coverage-title-line-height:.92;
  --coverage-title-block-space:clamp(178px, 14.2vw, 258px);
  --coverage-title-copy-gap:clamp(36px, 3.65vw, 60px);
  --coverage-body-size:clamp(14.6px, min(1vw, 1.82svh), 15.4px);
  --coverage-body-line-height:1.46;
  --coverage-body-letter-spacing:.034em;
  --coverage-icon-size:clamp(70px, 4.55vw, 86px);
  --coverage-item-gap-stable:clamp(18px, 1.45vw, 26px);
  --coverage-bottom-safe:clamp(68px, 8svh, 118px);
  --coverage-statement-width:min(33vw, 530px);
}

@media (min-width:901px){
  .section.coverage > .section-pin,
  .section.coverage .coverage-layout.container{
    height:100svh !important;
    min-height:100svh !important;
    overflow:hidden !important;
    overflow:clip !important;
  }

  .section.coverage .coverage-title{
    left:var(--coverage-left-x) !important;
    top:var(--coverage-stage-top) !important;
    width:min(40.8vw, 690px) !important;
    max-width:690px !important;
    font-size:var(--coverage-title-size) !important;
    line-height:var(--coverage-title-line-height) !important;
    transform:none !important;
  }

  .section.coverage .coverage-statement{
    left:var(--coverage-left-x) !important;
    top:calc(var(--coverage-stage-top) + var(--coverage-title-block-space) + var(--coverage-title-copy-gap)) !important;
    width:var(--coverage-statement-width) !important;
    max-width:530px !important;
    transform:none !important;
  }

  .section.coverage .coverage-copy{
    left:var(--coverage-right-x) !important;
    right:var(--coverage-right-edge) !important;
    top:var(--coverage-stage-top) !important;
    bottom:var(--coverage-bottom-safe) !important;
    height:auto !important;
    min-height:0 !important;
    overflow:visible !important;
    contain:none !important;
  }

  .section.coverage .coverage-copy-inner{
    position:relative !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:space-between !important;
    align-items:stretch !important;
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
  }

  body .section.coverage .coverage-copy .coverage-copy-inner > .coverage-item,
  body .section.coverage .coverage-copy .coverage-copy-inner > .coverage-item:nth-child(1),
  body .section.coverage .coverage-copy .coverage-copy-inner > .coverage-item:nth-child(2),
  body .section.coverage .coverage-copy .coverage-copy-inner > .coverage-item:nth-child(3){
    position:relative !important;
    top:auto !important;
    left:0 !important;
    right:auto !important;
    width:100% !important;
    max-width:none !important;
    display:grid !important;
    grid-template-columns:var(--coverage-icon-size) minmax(0, 1fr) !important;
    column-gap:var(--coverage-item-gap-stable) !important;
    align-items:start !important;
    transform:translate3d(var(--coverage-item-x, 0px), 0, 0) !important;
  }

  .section.coverage .coverage-number.coverage-icon{
    width:var(--coverage-icon-size) !important;
    height:var(--coverage-icon-size) !important;
    min-width:var(--coverage-icon-size) !important;
    align-self:start !important;
  }

  .section.coverage .coverage-item-copy{
    width:min(31.2vw, 520px) !important;
    max-width:100% !important;
  }

  .section.coverage .coverage-statement,
  .section.coverage .coverage-statement p,
  .section.coverage .coverage-item p{
    font-size:var(--coverage-body-size) !important;
    line-height:var(--coverage-body-line-height) !important;
    letter-spacing:var(--coverage-body-letter-spacing) !important;
    font-weight:500 !important;
  }

  .section.coverage .coverage-item-title{
    margin-bottom:clamp(14px, 1.35svh, 21px) !important;
  }
}

@media (max-width:1280px) and (min-width:901px){
  .section.coverage{
    --coverage-left-x:clamp(64px, 7.1vw, 112px);
    --coverage-right-x:57.4%;
    --coverage-right-edge:5.8%;
    --coverage-stage-top:clamp(132px, 17.5svh, 188px);
    --coverage-title-size:clamp(46px, 4.55vw, 68px);
    --coverage-title-block-space:clamp(154px, 13.6vw, 218px);
    --coverage-title-copy-gap:clamp(30px, 3.2vw, 50px);
    --coverage-statement-width:min(34.5vw, 420px);
    --coverage-icon-size:clamp(62px, 4.9vw, 76px);
    --coverage-bottom-safe:clamp(56px, 7svh, 94px);
  }
}

@media (max-width:1080px) and (min-width:901px){
  .section.coverage{
    --coverage-left-x:6.5%;
    --coverage-right-x:56.4%;
    --coverage-right-edge:4.8%;
    --coverage-stage-top:clamp(120px, 17svh, 168px);
    --coverage-title-size:clamp(40px, 4.35vw, 58px);
    --coverage-title-block-space:clamp(132px, 13.1vw, 184px);
    --coverage-title-copy-gap:clamp(26px, 2.9vw, 42px);
    --coverage-statement-width:min(35.5vw, 325px);
    --coverage-icon-size:clamp(52px, 5.3vw, 64px);
    --coverage-item-gap-stable:clamp(14px, 1.8vw, 20px);
    --coverage-bottom-safe:clamp(48px, 6.4svh, 78px);
  }
}

@media (min-width:901px) and (max-height:760px){
  .section.coverage{
    --coverage-stage-top:clamp(104px, 15.8svh, 128px);
    --coverage-title-size:clamp(38px, 4.05vw, 58px);
    --coverage-title-block-space:clamp(126px, 12.7vw, 186px);
    --coverage-title-copy-gap:clamp(22px, 2.6vw, 38px);
    --coverage-icon-size:clamp(50px, 4vw, 66px);
    --coverage-bottom-safe:clamp(40px, 5.5svh, 64px);
    --coverage-body-size:clamp(13.2px, .9vw, 14.6px);
  }

  .section.coverage .coverage-item-title{
    font-size:clamp(18px, 1.85vw, 29px) !important;
    margin-bottom:clamp(9px, 1.05svh, 15px) !important;
  }
}

@media (max-width:900.98px){
  .section.coverage .coverage-statement,
  .section.coverage .coverage-statement p,
  .section.coverage .coverage-item p{
    font-size:clamp(14.6px, min(3.75vw, 1.82svh), 15.4px) !important;
    line-height:1.46 !important;
    letter-spacing:.034em !important;
    font-weight:500 !important;
  }
}

/* v1.289 — Coverage: lock title/right-block geometry to one proportional stage.
   The title now uses the same headline scale as the Leistungen titles. The
   right-hand principle blocks use a symmetric vertical stage: the first block
   starts exactly on the title line, and the last block ends with the same
   distance to the viewport bottom as the first block has to the viewport top. */
.section.coverage{
  --coverage-stage-top:clamp(148px, 16.1svh, 206px);
  --coverage-title-size:clamp(46px, 4.8vw, 74px);
  --coverage-title-line-height:.92;
  --coverage-right-bottom:var(--coverage-stage-top);
  --coverage-body-size:calc(clamp(14.6px, min(1.0vw, 1.82svh), 15.4px) * var(--leistungen-copy-fit, 1));
  --coverage-body-line-height:1.46;
  --coverage-body-letter-spacing:.034em;
}

@media (min-width:901px){
  .section.coverage .coverage-title{
    top:var(--coverage-stage-top) !important;
    font-size:var(--coverage-title-size) !important;
    line-height:var(--coverage-title-line-height) !important;
    width:min(40.8vw, 640px) !important;
    max-width:640px !important;
  }

  .section.coverage .coverage-copy{
    top:var(--coverage-stage-top) !important;
    bottom:var(--coverage-right-bottom) !important;
    height:auto !important;
    min-height:0 !important;
    overflow:visible !important;
    contain:none !important;
  }

  .section.coverage .coverage-copy-inner{
    position:absolute !important;
    inset:0 !important;
    display:grid !important;
    grid-template-rows:auto auto auto !important;
    align-content:space-between !important;
    row-gap:clamp(28px, 4.2svh, 72px) !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
  }

  body .section.coverage .coverage-copy .coverage-copy-inner > .coverage-item,
  body .section.coverage .coverage-copy .coverage-copy-inner > .coverage-item:nth-child(1),
  body .section.coverage .coverage-copy .coverage-copy-inner > .coverage-item:nth-child(2),
  body .section.coverage .coverage-copy .coverage-copy-inner > .coverage-item:nth-child(3){
    position:relative !important;
    top:auto !important;
    bottom:auto !important;
    left:0 !important;
    right:auto !important;
    margin:0 !important;
    width:100% !important;
    max-width:none !important;
    display:grid !important;
    grid-template-columns:var(--coverage-icon-size) minmax(0, 1fr) !important;
    column-gap:var(--coverage-item-gap-stable) !important;
    align-items:start !important;
    align-self:auto !important;
    transform:translate3d(var(--coverage-item-x, 0px), 0, 0) !important;
  }

  .section.coverage .coverage-copy .coverage-copy-inner > .coverage-item:first-child{
    align-self:start !important;
  }

  .section.coverage .coverage-copy .coverage-copy-inner > .coverage-item:last-child{
    align-self:end !important;
  }

  .section.coverage .coverage-statement,
  .section.coverage .coverage-statement p,
  .section.coverage .coverage-item p{
    font-size:var(--coverage-body-size) !important;
    line-height:var(--coverage-body-line-height) !important;
    letter-spacing:var(--coverage-body-letter-spacing) !important;
    font-weight:500 !important;
  }
}

@media (max-width:1280px) and (min-width:901px){
  .section.coverage{
    --coverage-stage-top:clamp(132px, 16.1svh, 188px);
    --coverage-title-size:clamp(46px, 4.8vw, 74px);
    --coverage-right-bottom:var(--coverage-stage-top);
  }
}

@media (max-width:1080px) and (min-width:901px){
  .section.coverage{
    --coverage-stage-top:clamp(120px, 16.1svh, 168px);
    --coverage-title-size:clamp(40px, 4.8vw, 62px);
    --coverage-right-bottom:var(--coverage-stage-top);
  }
}

@media (min-width:901px) and (max-height:760px){
  .section.coverage{
    --coverage-stage-top:clamp(100px, 14.8svh, 126px);
    --coverage-title-size:clamp(40px, 4.8vw, 62px);
    --coverage-right-bottom:var(--coverage-stage-top);
    --coverage-body-size:clamp(13.2px, .9vw, 14.6px);
  }

  .section.coverage .coverage-copy-inner{
    row-gap:clamp(18px, 3.2svh, 42px) !important;
  }
}

/* v1.290 — Mobile responsive pass only.
   Desktop rules are intentionally untouched: every rule in this block is scoped
   to <= 900px. On phones/tablets the complex pinned desktop compositions are
   turned into readable vertical sections while the visual language remains the
   same. */
@media (max-width:900.98px){
  :root{
    --mobile-page-pad:clamp(18px, 5.8vw, 30px);
    --mobile-section-pad-y:clamp(72px, 11svh, 108px);
  }

  html{
    scroll-padding-top:72px;
    overflow-x:hidden;
  }

  body{
    overflow-x:hidden;
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
  }

  .container{
    max-width:none;
    padding-left:var(--mobile-page-pad);
    padding-right:var(--mobile-page-pad);
  }

  .scene,
  #scene,
  #scene-canvas{
    display:none !important;
  }

  .topbar{
    min-height:58px;
    padding:15px var(--mobile-page-pad) 11px;
    align-items:center;
  }

  .logo-img{
    height:20px;
  }

  .topbar-right{
    gap:clamp(10px, 3vw, 14px);
  }

  .lang{
    gap:clamp(9px, 2.8vw, 13px);
  }

  .lang a,
  .menu-btn{
    font-size:11px;
    letter-spacing:.13em;
  }

  .menu-btn{
    min-height:34px;
  }

  .menu-panel{
    width:100vw;
    padding:clamp(76px, 11svh, 108px) var(--mobile-page-pad) 26px;
    background:rgba(5, 22, 56, .64);
    border-left:0;
    -webkit-backdrop-filter:blur(18px);
    backdrop-filter:blur(18px);
  }

  .menu-links{
    justify-content:center;
    align-items:flex-start;
    text-align:left;
    gap:clamp(16px, 3svh, 28px);
    padding:0 0 clamp(34px, 6svh, 62px);
  }

  .menu-links a{
    font-size:clamp(42px, 12.4vw, 72px);
    line-height:.9;
    letter-spacing:.035em;
  }

  .menu-panel-bottom{
    justify-content:flex-start;
    flex-wrap:wrap;
    gap:14px 22px;
  }

  .section:not(.hero):not(.story){
    min-height:0 !important;
    padding:0 !important;
  }

  .section:not(.hero):not(.story) > .section-pin{
    position:relative !important;
    top:auto !important;
    display:block !important;
    min-height:0 !important;
    height:auto !important;
    padding:0 !important;
    overflow:visible !important;
    overflow:clip !important;
  }

  .hero{
    min-height:100svh;
    padding:86px 0 74px;
    align-items:center;
  }

  .hero .hero-content{
    width:100%;
    padding-left:var(--mobile-page-pad);
    padding-right:var(--mobile-page-pad);
  }

  .hero-copy{
    width:100%;
    transform:translateY(clamp(-22px, -3svh, -8px));
  }

  .hero-title,
  html[lang="pl"] .hero-title{
    width:100%;
    max-width:100%;
    font-size:clamp(52px, 15.7vw, 84px) !important;
    line-height:.86;
    letter-spacing:-.045em;
  }

  .hero-title__line--one,
  .hero-title__line--two{
    transform:none !important;
    white-space:normal;
  }

  .hero-subtitle,
  html[lang="pl"] .hero-subtitle{
    width:100%;
    max-width:min(100%, 24rem);
    margin-top:clamp(16px, 2.8svh, 24px);
    transform:none;
    font-size:clamp(17px, 4.8vw, 24px);
    line-height:1.08;
    text-align:center;
  }

  .hero-subtitle__line{
    white-space:normal;
  }

  .hero-scroll-cue{
    bottom:clamp(18px, 4svh, 32px);
  }

  .story-slider{
    min-height:100svh;
    padding:84px 0 72px;
  }

  .story-container{
    padding-left:var(--mobile-page-pad);
    padding-right:var(--mobile-page-pad);
  }

  .story-slides{
    min-height:clamp(280px, 44svh, 390px);
  }

  .story-text{
    width:100%;
    max-width:20ch;
    font-size:clamp(26px, 7.2vw, 36px);
    line-height:1.12;
    white-space:normal;
    letter-spacing:-.035em;
  }

  .story-ui{
    margin-top:clamp(30px, 7svh, 64px);
  }

  .story-progress{
    width:min(260px, 68vw);
  }

  .section.services > .section-pin{
    background:
      radial-gradient(620px 420px at 16% 10%, rgba(95, 147, 230, .26), transparent 65%),
      radial-gradient(760px 520px at 84% 32%, rgba(38, 84, 177, .18), transparent 70%),
      linear-gradient(130deg, #0b346b 0%, #082650 48%, #061634 100%) !important;
  }

  .leistungen-shell{
    display:block !important;
    min-height:0 !important;
    padding:clamp(82px, 12svh, 104px) 0 clamp(68px, 10svh, 98px) !important;
    overflow:visible !important;
    --leistungen-edge-gutter:var(--mobile-page-pad);
  }

  .leistungen-topline{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    padding:0 var(--mobile-page-pad);
  }

  .leistungen-kicker{
    max-width:60%;
    font-size:12px;
    line-height:1.25;
    letter-spacing:.17em;
  }

  .leistungen-spectrum-trigger{
    max-width:38%;
    gap:8px;
    font-size:11px;
    line-height:1.25;
    letter-spacing:.13em;
    white-space:normal;
    text-align:right;
  }

  .leistungen-spectrum-trigger-dot{
    width:9px;
    height:9px;
    margin-top:.16em;
  }

  .leistungen-bg-layer{
    opacity:.72;
  }

  .leistungen-stage{
    width:100% !important;
    margin-left:0 !important;
    min-height:0 !important;
    display:block !important;
    overflow:visible !important;
    padding:clamp(42px, 7svh, 64px) var(--mobile-page-pad) clamp(12px, 2svh, 24px);
  }

  .leistungen-slide,
  .leistungen-slide.is-active{
    position:relative !important;
    inset:auto !important;
    display:block !important;
    min-height:0 !important;
    margin:0 0 clamp(52px, 8svh, 76px) !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:none !important;
  }

  .leistungen-slide-inner{
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    top:auto !important;
    transform:none !important;
  }

  .leistungen-slide-head,
  .leistungen-slide-copy{
    margin-top:0 !important;
  }

  .leistungen-headline{
    width:min(100%, 10.8ch) !important;
    max-width:none !important;
    margin:0 0 clamp(18px, 3svh, 28px) !important;
    font-size:clamp(42px, 12.4vw, 62px) !important;
    line-height:.91 !important;
    letter-spacing:-.01em;
    pointer-events:auto;
  }

  .leistungen-text,
  .leistungen-text.is-active{
    width:min(100%, 38ch) !important;
    max-width:none !important;
    opacity:1 !important;
    pointer-events:auto !important;
  }

  .leistungen-text p{
    margin:0 0 16px;
    color:rgba(239,246,255,.82);
    font-size:clamp(15px, 4vw, 16.2px);
    line-height:1.52;
    letter-spacing:.025em;
    font-weight:500;
  }

  .leistungen-symbol-row{
    width:100% !important;
    grid-template-columns:repeat(7, minmax(0, 1fr));
    gap:5px;
    margin:6px 0 0 !important;
    padding:0 var(--mobile-page-pad) !important;
    opacity:.76 !important;
  }

  .leistungen-symbol{
    width:clamp(30px, 8.3vw, 42px) !important;
    height:clamp(30px, 8.3vw, 42px) !important;
  }

  .leistungen-outro{
    position:relative !important;
    inset:auto !important;
    display:block !important;
    min-height:0 !important;
    margin-top:clamp(34px, 8svh, 64px);
    padding:clamp(82px, 12svh, 112px) var(--mobile-page-pad) clamp(72px, 10svh, 96px);
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    overflow:hidden !important;
  }

  .about-bg-layer{
    position:absolute !important;
    inset:0 !important;
    z-index:0 !important;
  }

  .about-bg-image{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:52% 50% !important;
    opacity:1 !important;
  }

  .leistungen-outro-layout{
    position:relative !important;
    inset:auto !important;
    z-index:1 !important;
    display:block !important;
    min-height:0 !important;
  }

  .leistungen-outro-visual{
    position:relative !important;
    left:auto !important;
    top:auto !important;
    bottom:auto !important;
    width:min(46vw, 190px) !important;
    padding:0 !important;
    margin:0 0 clamp(22px, 4svh, 34px);
    opacity:.86;
  }

  .leistungen-outro-person{
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    max-height:none !important;
  }

  .leistungen-outro-copy{
    position:relative !important;
    inset:auto !important;
    width:100% !important;
    padding:0 !important;
    display:block !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
  }

  .leistungen-outro-copy-inner{
    width:100% !important;
    max-width:38rem !important;
    opacity:1 !important;
    transform:none !important;
  }

  .leistungen-outro-title{
    width:100% !important;
    max-width:10.6ch !important;
    font-size:clamp(42px, 12vw, 58px) !important;
    line-height:.94 !important;
  }

  .leistungen-outro-subtitle{
    font-size:clamp(22px, 6vw, 31px) !important;
    line-height:1.06 !important;
    margin:14px 0 24px !important;
  }

  .leistungen-outro-text{
    max-width:38ch !important;
  }

  .leistungen-outro-text p{
    font-size:clamp(15px, 4vw, 16.2px) !important;
    line-height:1.55 !important;
    letter-spacing:.03em !important;
    margin-bottom:16px !important;
  }

  .leistungen-outro-signature{
    width:clamp(142px, 40vw, 190px) !important;
    margin:20px 0 0 auto !important;
    opacity:1 !important;
    transform:none !important;
  }

  .about-references-seal{
    --about-seal-size:clamp(138px, 42vw, 178px);
    position:relative !important;
    top:auto !important;
    right:auto !important;
    margin:34px auto 0 !important;
    opacity:1 !important;
    transform:none !important;
    pointer-events:auto !important;
  }

  .leistungen-outro-social{
    position:relative !important;
    right:auto !important;
    bottom:auto !important;
    margin-top:32px;
    justify-content:flex-start;
    opacity:1 !important;
    transform:none !important;
    pointer-events:auto !important;
  }

  .leistungen-outro-marquee{
    display:none !important;
  }

  .leistungen-detail-panel{
    inset:10px !important;
    width:auto !important;
    height:auto !important;
    max-height:calc(100svh - 20px) !important;
    padding:64px 20px 116px !important;
    overflow:auto !important;
    border-radius:18px !important;
  }

  .leistungen-detail-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:34px !important;
    transform:none !important;
  }

  .leistungen-detail-left,
  .leistungen-detail-right{
    width:100% !important;
    max-width:none !important;
  }

  .leistungen-detail-title,
  .leistungen-detail-right-title{
    font-size:clamp(34px, 9.4vw, 48px) !important;
    line-height:.96 !important;
  }

  .leistungen-detail-highlights{
    grid-template-columns:1fr !important;
  }

  .leistungen-detail-cta{
    left:20px !important;
    right:20px !important;
    bottom:20px !important;
    width:auto !important;
    transform:none !important;
    justify-content:space-between;
  }

  .section.coverage,
  .section.coverage:not(.hero):not(.story){
    min-height:0 !important;
    background:#061b3f !important;
  }

  .section.coverage > .section-pin{
    min-height:0 !important;
    height:auto !important;
    display:block !important;
    overflow:visible !important;
    background:#061b3f !important;
  }

  .section.coverage .coverage-bg{
    display:none !important;
  }

  .section.coverage .coverage-layout.container{
    position:relative !important;
    display:block !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-width:none !important;
    padding:0 !important;
    margin:0 !important;
    overflow:visible !important;
  }

  .section.coverage .coverage-eyebrow,
  .section.coverage .coverage-title,
  .section.coverage .coverage-statement{
    position:relative !important;
    left:auto !important;
    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    transform:none !important;
    width:100% !important;
    max-width:none !important;
    z-index:2 !important;
  }

  .section.coverage .coverage-eyebrow{
    padding:clamp(82px, 11svh, 104px) var(--mobile-page-pad) 0 !important;
    margin:0 !important;
    color:rgba(255,255,255,.88) !important;
    font-size:12px !important;
    line-height:1.2 !important;
    font-weight:500 !important;
    letter-spacing:.18em !important;
  }

  .section.coverage .coverage-title{
    padding:clamp(42px, 7svh, 62px) var(--mobile-page-pad) 0 !important;
    margin:0 !important;
    color:#8ea9ee !important;
    font-size:clamp(42px, 12vw, 60px) !important;
    line-height:.92 !important;
    text-align:left !important;
  }

  .section.coverage .coverage-statement{
    padding:clamp(26px, 4.8svh, 40px) var(--mobile-page-pad) clamp(70px, 10svh, 96px) !important;
    color:rgba(255,255,255,.90) !important;
  }

  .section.coverage .coverage-statement p{
    max-width:39ch !important;
    margin:0 0 20px !important;
    color:rgba(255,255,255,.90) !important;
    font-size:clamp(15px, 4vw, 16.2px) !important;
    line-height:1.52 !important;
    letter-spacing:.025em !important;
    font-weight:500 !important;
  }

  .section.coverage .coverage-copy{
    position:relative !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-width:none !important;
    padding:clamp(72px, 10svh, 96px) var(--mobile-page-pad) clamp(72px, 10svh, 104px) !important;
    background:linear-gradient(135deg, #f9fbfd 0%, #e9f7ff 58%, #dceffb 100%) !important;
    overflow:visible !important;
    pointer-events:auto !important;
  }

  .section.coverage .coverage-copy-inner{
    position:relative !important;
    inset:auto !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:clamp(42px, 7svh, 68px) !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    align-content:start !important;
  }

  body .section.coverage .coverage-copy .coverage-copy-inner > .coverage-item,
  body .section.coverage .coverage-copy .coverage-copy-inner > .coverage-item:nth-child(1),
  body .section.coverage .coverage-copy .coverage-copy-inner > .coverage-item:nth-child(2),
  body .section.coverage .coverage-copy .coverage-copy-inner > .coverage-item:nth-child(3){
    position:relative !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;
    display:grid !important;
    grid-template-columns:clamp(54px, 15vw, 70px) minmax(0, 1fr) !important;
    column-gap:clamp(16px, 5vw, 22px) !important;
    align-items:start !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    opacity:1 !important;
    transform:none !important;
    pointer-events:auto !important;
  }

  .section.coverage .coverage-number.coverage-icon{
    width:clamp(54px, 15vw, 70px) !important;
    height:clamp(54px, 15vw, 70px) !important;
    min-width:clamp(54px, 15vw, 70px) !important;
  }

  .section.coverage .coverage-item-copy,
  .section.coverage .coverage-item-title,
  .section.coverage .coverage-item p{
    width:100% !important;
    max-width:100% !important;
  }

  .section.coverage .coverage-item-title{
    margin:0 0 14px !important;
    padding:0 !important;
    font-size:clamp(25px, 7vw, 34px) !important;
    line-height:1.08 !important;
    letter-spacing:-.02em !important;
  }

  .section.coverage .coverage-item p{
    font-size:clamp(15px, 4vw, 16.2px) !important;
    line-height:1.5 !important;
    letter-spacing:.025em !important;
    color:#05070b !important;
  }

  .section.contact.contact-v107,
  .section.contact.contact-v107 > .section-pin.contact-pin{
    min-height:0 !important;
    height:auto !important;
    overflow:visible !important;
  }

  .contact-main{
    height:auto !important;
    min-height:0 !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:clamp(38px, 7svh, 56px) !important;
    padding:clamp(82px, 11svh, 108px) var(--mobile-page-pad) clamp(54px, 8svh, 78px) !important;
  }

  .contact-left,
  .contact-right{
    width:100% !important;
    max-width:none !important;
    justify-self:stretch !important;
    align-self:start !important;
    transform:none !important;
  }

  .contact-title{
    max-width:9.8ch;
    font-size:clamp(44px, 12.2vw, 62px) !important;
    line-height:.98 !important;
  }

  .contact-direct{
    margin-top:clamp(24px, 4.2svh, 36px);
    font-size:clamp(16px, 4.2vw, 19px);
  }

  .contact-social{
    margin-top:24px;
  }

  .contact-form-grid{
    grid-template-columns:1fr !important;
    gap:30px !important;
    margin-bottom:30px !important;
  }

  .contact-field,
  .contact-field--message{
    gap:16px !important;
  }

  .contact-field input,
  .contact-field textarea,
  .theme-dark .contact-field input,
  .theme-dark .contact-field textarea{
    min-height:38px;
    font-size:16px;
    padding-bottom:12px;
  }

  .contact-note,
  .contact-consent{
    font-size:clamp(14px, 3.8vw, 16px);
    line-height:1.42;
  }

  .contact-submit{
    width:100%;
    min-height:50px;
  }

  .contact-footer-band{
    position:relative !important;
    min-height:0 !important;
  }

  .contact-footer-inner{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:32px !important;
    padding:clamp(42px, 7svh, 62px) var(--mobile-page-pad) clamp(48px, 8svh, 72px) !important;
  }

  .contact-footer-col--about{
    margin-left:0 !important;
  }

  .contact-footer-logo{
    justify-self:start !important;
    width:clamp(174px, 54vw, 238px) !important;
    margin-top:6px !important;
  }
}

@media (max-width: 560px){
  .topbar{
    padding-left:16px;
    padding-right:16px;
  }

  .logo-img{
    height:18px;
  }

  .topbar-right{
    gap:9px;
  }

  .lang{
    gap:9px;
  }

  .lang a,
  .menu-btn{
    font-size:10.5px;
    letter-spacing:.12em;
  }

  .menu-icon{
    width:13px;
    height:13px;
  }

  .menu-links a{
    font-size:clamp(38px, 13.4vw, 62px);
  }

  .hero-title,
  html[lang="pl"] .hero-title{
    font-size:clamp(48px, 16vw, 68px) !important;
  }

  .leistungen-kicker{
    max-width:52%;
  }

  .leistungen-spectrum-trigger{
    max-width:46%;
  }

  .section.coverage .coverage-title{
    font-size:clamp(40px, 12.2vw, 54px) !important;
  }

  body .section.coverage .coverage-copy .coverage-copy-inner > .coverage-item,
  body .section.coverage .coverage-copy .coverage-copy-inner > .coverage-item:nth-child(1),
  body .section.coverage .coverage-copy .coverage-copy-inner > .coverage-item:nth-child(2),
  body .section.coverage .coverage-copy .coverage-copy-inner > .coverage-item:nth-child(3){
    grid-template-columns:clamp(48px, 14vw, 62px) minmax(0, 1fr) !important;
  }

  .section.coverage .coverage-number.coverage-icon{
    width:clamp(48px, 14vw, 62px) !important;
    height:clamp(48px, 14vw, 62px) !important;
    min-width:clamp(48px, 14vw, 62px) !important;
  }
}

/* v1.291 — Leistungen: radically lighter blue surface + GIMP-style image blending.
   Target based on leistungen_hell.jpg: brighter cyan-blue ground, soft dreamlike
   light veils, and background images blended as grayscale + screen at 30% opacity
   (German GIMP: Füllmethode »Negativ multiplizieren«, Deckkraft 30%, Farbmodus Graustufen). */
.section.services.theme-dark > .section-pin,
body.has-scene .section.services.theme-dark > .section-pin{
  background:
    radial-gradient(760px 540px at -2% 0%, rgba(154, 218, 255, .62), rgba(106, 184, 231, .34) 32%, transparent 66%),
    radial-gradient(980px 660px at 15% 16%, rgba(55, 168, 225, .54), rgba(18, 129, 198, .28) 44%, transparent 72%),
    radial-gradient(980px 760px at 12% 78%, rgba(0, 119, 201, .50), rgba(0, 95, 174, .24) 42%, transparent 72%),
    radial-gradient(920px 620px at 56% 42%, rgba(35, 142, 204, .36), rgba(0, 91, 162, .16) 42%, transparent 74%),
    radial-gradient(1120px 760px at 91% 70%, rgba(2, 33, 107, .62), rgba(2, 28, 91, .30) 48%, transparent 78%),
    linear-gradient(124deg, #1687c8 0%, #006fb5 31%, #005493 62%, #032164 100%) !important;
}

.section.services > .section-pin > .section-reactive-bg{
  opacity:.72;
}

.section.services > .section-pin > .section-reactive-bg::before{
  background:
    radial-gradient(42rem 28rem at 2vw 3vh, rgba(230, 247, 255, .30), transparent 64%),
    radial-gradient(34rem 22rem at 13vw 14vh, rgba(119, 207, 255, .18), transparent 65%),
    radial-gradient(34rem 22rem at var(--reactive-x, 52vw) var(--reactive-y, 42vh), rgba(106, 202, 255, .11), transparent 62%),
    radial-gradient(48rem 28rem at 17% 86%, rgba(33, 158, 229, .13), transparent 74%);
  filter:blur(20px);
}

.section.services > .section-pin > .section-reactive-bg::after{
  background:
    radial-gradient(18rem 16rem at 4vw 5vh, rgba(250, 253, 255, .16), transparent 58%),
    radial-gradient(14rem 12rem at 11vw 12vh, rgba(226, 246, 255, .10), transparent 60%),
    radial-gradient(20rem 16rem at calc(var(--reactive-x, 52vw) + 8px) calc(var(--reactive-y, 42vh) + 6px), rgba(166, 226, 255, .06), transparent 62%);
  mix-blend-mode:screen;
  opacity:1;
}


.leistungen-bg-layer::after{
  z-index:2;
  background:
    linear-gradient(90deg,
      rgba(0, 26, 72, .15) 0%,
      rgba(0, 38, 91, .04) 45%,
      rgba(0, 18, 74, .24) 100%),
    radial-gradient(80% 78% at 0% 0%,
      rgba(220, 244, 255, .16) 0%,
      rgba(124, 203, 247, .08) 36%,
      transparent 68%),
    radial-gradient(72% 68% at 12% 94%,
      rgba(0, 117, 205, .15) 0%,
      rgba(0, 91, 179, .07) 44%,
      transparent 76%),
    radial-gradient(80% 80% at 92% 58%,
      rgba(0, 18, 76, .24) 0%,
      rgba(0, 18, 76, .11) 42%,
      transparent 76%);
  mix-blend-mode:normal;
}

.leistungen-bg-layer::before{
  z-index:3;
  opacity:calc(var(--leistungen-bg-visual-t, 0) * .66);
  background:
    radial-gradient(64% 72% at 24% 13%,
      rgba(227, 248, 255, .22) 0%,
      rgba(111, 202, 247, .13) 34%,
      rgba(31, 145, 220, .06) 58%,
      transparent 80%),
    radial-gradient(64% 70% at 65% 52%,
      rgba(156, 221, 255, .16) 0%,
      rgba(50, 157, 226, .10) 34%,
      rgba(18, 97, 184, .04) 64%,
      transparent 82%),
    linear-gradient(90deg,
      rgba(4, 92, 176, .06) 0%,
      rgba(68, 178, 238, .13) 44%,
      rgba(3, 47, 134, .05) 100%);
  mix-blend-mode:screen;
}

@media (max-width:900.98px){
  .section.services.theme-dark > .section-pin,
  body.has-scene .section.services.theme-dark > .section-pin{
    background:
      radial-gradient(620px 460px at 0% 0%, rgba(154, 218, 255, .52), rgba(106, 184, 231, .30) 32%, transparent 66%),
      radial-gradient(760px 540px at 18% 12%, rgba(55, 168, 225, .44), rgba(18, 129, 198, .24) 44%, transparent 72%),
      radial-gradient(840px 640px at 8% 78%, rgba(0, 119, 201, .42), rgba(0, 95, 174, .20) 42%, transparent 72%),
      radial-gradient(900px 720px at 92% 72%, rgba(2, 33, 107, .56), rgba(2, 28, 91, .28) 48%, transparent 78%),
      linear-gradient(128deg, #1687c8 0%, #006fb5 32%, #005493 62%, #032164 100%) !important;
  }

  .leistungen-bg-layer{
    opacity:.88;
  }


  .leistungen-bg-layer::after{
    background:
      linear-gradient(90deg,
        rgba(0, 26, 72, .22) 0%,
        rgba(0, 38, 91, .08) 48%,
        rgba(0, 18, 74, .28) 100%),
      radial-gradient(86% 74% at 0% 0%, rgba(220, 244, 255, .13) 0%, rgba(124, 203, 247, .07) 36%, transparent 68%),
      radial-gradient(82% 76% at 88% 56%, rgba(0, 18, 76, .22) 0%, rgba(0, 18, 76, .10) 42%, transparent 76%);
  }

  .leistungen-bg-layer::before{
    opacity:calc(var(--leistungen-bg-visual-t, 0) * .50);
    background:
      radial-gradient(74% 58% at 22% 12%, rgba(227, 248, 255, .17) 0%, rgba(111, 202, 247, .10) 34%, rgba(31, 145, 220, .05) 58%, transparent 80%),
      radial-gradient(74% 58% at 58% 48%, rgba(156, 221, 255, .13) 0%, rgba(50, 157, 226, .08) 34%, rgba(18, 97, 184, .035) 64%, transparent 82%),
      linear-gradient(90deg, rgba(4, 92, 176, .04) 0%, rgba(68, 178, 238, .10) 48%, rgba(3, 47, 134, .04) 100%);
  }
}

/* v1.292 — Hero + Coverage left blue field aligned with the brighter Leistungen palette.
   The Leistungen section established the new lighter, more luminous blue world.
   This patch brings the Hero background and the dark left half of Coverage into
   the same brightness/intensity range. Coverage uses fewer cyan light veils than
   Leistungen, so the split-screen principle section stays calmer and more sober. */
.hero-bg{
  opacity:1 !important;
  background:
    radial-gradient(760px 540px at -2% 0%, rgba(154, 218, 255, .52), rgba(106, 184, 231, .30) 32%, transparent 66%),
    radial-gradient(980px 660px at 15% 16%, rgba(55, 168, 225, .46), rgba(18, 129, 198, .25) 44%, transparent 72%),
    radial-gradient(980px 760px at 12% 78%, rgba(0, 119, 201, .42), rgba(0, 95, 174, .21) 42%, transparent 72%),
    radial-gradient(920px 620px at 56% 42%, rgba(35, 142, 204, .30), rgba(0, 91, 162, .14) 42%, transparent 74%),
    radial-gradient(1120px 760px at 91% 70%, rgba(2, 33, 107, .58), rgba(2, 28, 91, .28) 48%, transparent 78%),
    linear-gradient(124deg, #1687c8 0%, #006fb5 31%, #005493 62%, #032164 100%) !important;
}

body.has-scene .hero-bg{
  opacity:1 !important;
}

.hero-media > .section-reactive-bg.section-reactive-bg--hero{
  opacity:.70 !important;
}

.hero-media > .section-reactive-bg.section-reactive-bg--hero::before{
  background:
    radial-gradient(42rem 28rem at 2vw 3vh, rgba(230, 247, 255, .25), transparent 64%),
    radial-gradient(34rem 22rem at 13vw 14vh, rgba(119, 207, 255, .15), transparent 65%),
    radial-gradient(34rem 22rem at var(--reactive-x, 52vw) var(--reactive-y, 42vh), rgba(106, 202, 255, .09), transparent 62%),
    radial-gradient(48rem 28rem at 17% 86%, rgba(33, 158, 229, .11), transparent 74%);
}

.hero-media > .section-reactive-bg.section-reactive-bg--hero::after{
  background:
    radial-gradient(18rem 16rem at 4vw 5vh, rgba(250, 253, 255, .12), transparent 58%),
    radial-gradient(14rem 12rem at 11vw 12vh, rgba(226, 246, 255, .08), transparent 60%),
    radial-gradient(20rem 16rem at calc(var(--reactive-x, 52vw) + 8px) calc(var(--reactive-y, 42vh) + 6px), rgba(166, 226, 255, .05), transparent 62%);
  mix-blend-mode:screen;
  opacity:1;
}

.section.coverage .coverage-bg{
  background-color:#ddf0fb !important;
  background-image:
    radial-gradient(ellipse 100% 95% at 0% 50%,
      #ffffff 0%,
      #ffffff 14%,
      #f8fcff 36%,
      #edf8fe 62%,
      #ddf0fb 100%),
    radial-gradient(740px 500px at 2% 0%,
      rgba(149, 206, 245, .28) 0%,
      rgba(77, 162, 219, .15) 34%,
      rgba(77, 162, 219, 0) 66%),
    radial-gradient(900px 560px at 18% 29%,
      rgba(62, 151, 216, .32) 0%,
      rgba(20, 104, 181, .15) 44%,
      rgba(20, 104, 181, 0) 72%),
    radial-gradient(760px 560px at 13% 78%,
      rgba(0, 107, 190, .26) 0%,
      rgba(0, 77, 156, .12) 44%,
      rgba(0, 77, 156, 0) 74%),
    radial-gradient(820px 620px at 45% 58%,
      rgba(2, 42, 120, .28) 0%,
      rgba(2, 31, 91, .14) 44%,
      rgba(2, 31, 91, 0) 76%),
    linear-gradient(90deg,
      #137fc0 0%,
      #006aad 20%,
      #00558f 39%,
      #052b67 49.15%,
      rgba(5,43,103,0) 49.15%,
      rgba(5,43,103,0) 100%) !important;
  background-size:50.85% 100%, 49.15% 100%, 49.15% 100%, 49.15% 100%, 49.15% 100%, 100% 100% !important;
  background-position:right center, left center, left center, left center, left center, center center !important;
  background-repeat:no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat !important;
}

.section.coverage .coverage-bg::before{
  width:49.15% !important;
  background:
    linear-gradient(180deg, rgba(0, 8, 34, .06), rgba(0, 8, 34, .11)),
    radial-gradient(76% 96% at 29% 33%, rgba(39, 118, 205, .18) 0%, rgba(8, 57, 137, .08) 42%, rgba(3, 14, 38, 0) 70%),
    radial-gradient(58% 84% at 68% 48%, rgba(48, 119, 204, .08) 0%, rgba(18, 64, 144, .04) 36%, rgba(4, 18, 48, 0) 74%),
    linear-gradient(180deg, rgba(6, 51, 118, .18), rgba(3, 22, 69, .34));
  opacity:1;
}

.section.coverage .coverage-bg::after{
  width:49.15% !important;
  background:
    radial-gradient(28vw 26vw at 21% 31%, rgba(204, 235, 255, .075) 0%, rgba(115, 194, 239, .040) 36%, rgba(115, 194, 239, 0) 76%),
    radial-gradient(28vw 26vw at 25% 74%, rgba(38, 148, 222, .080) 0%, rgba(38, 148, 222, 0) 74%),
    radial-gradient(20vw 15vw at 43% 17%, rgba(255,255,255,.025) 0%, rgba(255,255,255,0) 78%);
  mix-blend-mode:screen;
  opacity:1;
}

@media (max-width:900.98px){
  .hero-bg{
    background:
      radial-gradient(620px 460px at 0% 0%, rgba(154, 218, 255, .46), rgba(106, 184, 231, .27) 32%, transparent 66%),
      radial-gradient(760px 540px at 18% 12%, rgba(55, 168, 225, .40), rgba(18, 129, 198, .22) 44%, transparent 72%),
      radial-gradient(840px 640px at 8% 78%, rgba(0, 119, 201, .36), rgba(0, 95, 174, .18) 42%, transparent 72%),
      radial-gradient(900px 720px at 92% 72%, rgba(2, 33, 107, .52), rgba(2, 28, 91, .26) 48%, transparent 78%),
      linear-gradient(128deg, #1687c8 0%, #006fb5 32%, #005493 62%, #032164 100%) !important;
  }

  .section.coverage,
  .section.coverage:not(.hero):not(.story),
  .section.coverage > .section-pin{
    background:
      radial-gradient(620px 460px at 0% 0%, rgba(149, 206, 245, .34), rgba(77, 162, 219, .20) 32%, transparent 66%),
      radial-gradient(760px 540px at 16% 16%, rgba(62, 151, 216, .30), rgba(20, 104, 181, .16) 44%, transparent 72%),
      radial-gradient(840px 640px at 12% 82%, rgba(0, 107, 190, .25), rgba(0, 77, 156, .12) 42%, transparent 72%),
      linear-gradient(128deg, #137fc0 0%, #006aad 34%, #00558f 62%, #052b67 100%) !important;
  }
}

/* v1.293 — Kontakt: brighter fresh blue/violet upper field.
   Calibrated against kontakt_hell.jpg: a lifted blue base with soft cyan light
   veils on the left and a subtle violet shimmer toward the plant-shadow area.
   The sitemap/footer band is kept calmer and less saturated than the mockup,
   closer to the refreshed blue language used in Hero/Leistungen/Coverage. */
.section.contact.contact-v107 > .section-pin.contact-pin{
  background:
    radial-gradient(900px 620px at -3% 0%, rgba(196, 230, 255, .66), rgba(133, 195, 239, .42) 32%, transparent 68%),
    radial-gradient(1120px 720px at 17% 22%, rgba(86, 171, 226, .54), rgba(28, 121, 202, .30) 44%, transparent 74%),
    radial-gradient(980px 690px at 18% 78%, rgba(0, 132, 204, .44), rgba(0, 102, 184, .22) 42%, transparent 74%),
    radial-gradient(900px 620px at 78% 38%, rgba(113, 122, 226, .36), rgba(54, 71, 185, .24) 42%, transparent 74%),
    radial-gradient(1040px 760px at 96% 70%, rgba(26, 33, 142, .50), rgba(11, 22, 105, .26) 50%, transparent 80%),
    linear-gradient(122deg, #3099d2 0%, #147ec2 31%, #235cad 64%, #071f78 100%) !important;
}

.section.contact.contact-v107 .section-reactive-bg{
  opacity:.18 !important;
  filter:saturate(1.04) hue-rotate(2deg) brightness(1.08) !important;
}

.contact-main::before{
  background-image:
    linear-gradient(90deg,
      rgba(16, 111, 184, 0) 0%,
      rgba(22, 92, 184, .035) 42%,
      rgba(38, 53, 155, .14) 70%,
      rgba(20, 22, 111, .25) 100%),
    radial-gradient(82% 96% at 14% 16%,
      rgba(232, 248, 255, .20) 0%,
      rgba(124, 204, 245, .11) 34%,
      rgba(124, 204, 245, 0) 72%),
    radial-gradient(70% 92% at 84% 58%,
      rgba(78, 83, 194, .17) 0%,
      rgba(45, 55, 152, .12) 31%,
      rgba(15, 23, 98, .06) 54%,
      rgba(15, 23, 98, 0) 76%),
    url('/assets/img/contact-botanical-dream.jpg');
  opacity:.42;
  mix-blend-mode:multiply;
  filter:grayscale(.35) saturate(.72) brightness(1.28) contrast(1.02);
}

.contact-main::after{
  background:
    radial-gradient(82% 86% at 0% 0%,
      rgba(241, 251, 255, .22) 0%,
      rgba(162, 219, 252, .12) 34%,
      rgba(62, 161, 226, .05) 62%,
      rgba(62, 161, 226, 0) 82%),
    radial-gradient(68% 76% at 80% 38%,
      rgba(154, 162, 246, .18) 0%,
      rgba(88, 104, 220, .10) 34%,
      rgba(37, 47, 153, .04) 62%,
      rgba(37, 47, 153, 0) 82%),
    linear-gradient(180deg,
      rgba(233, 248, 255, .06) 0%,
      rgba(98, 175, 231, .025) 42%,
      rgba(17, 42, 127, .035) 100%);
  mix-blend-mode:screen;
}

.contact-footer-band{
  background:
    radial-gradient(760px 470px at 13% 8%, rgba(44, 134, 204, .36), transparent 68%),
    radial-gradient(840px 540px at 44% 46%, rgba(22, 73, 174, .24), transparent 72%),
    radial-gradient(900px 560px at 88% 58%, rgba(10, 18, 111, .38), transparent 75%),
    linear-gradient(112deg, #0b67ad 0%, #064f98 31%, #0b2d78 62%, #050c4a 100%) !important;
  border-top-color:rgba(225,238,250,.18);
}

@media (max-width:900.98px){
  .section.contact.contact-v107 > .section-pin.contact-pin{
    background:
      radial-gradient(680px 520px at 0% 0%, rgba(196, 230, 255, .54), rgba(133, 195, 239, .34) 32%, transparent 68%),
      radial-gradient(760px 560px at 17% 18%, rgba(86, 171, 226, .44), rgba(28, 121, 202, .25) 44%, transparent 74%),
      radial-gradient(780px 620px at 86% 42%, rgba(113, 122, 226, .30), rgba(54, 71, 185, .20) 42%, transparent 74%),
      linear-gradient(126deg, #3099d2 0%, #147ec2 32%, #235cad 64%, #071f78 100%) !important;
  }

  .contact-main::before{
    opacity:.34;
    filter:grayscale(.35) saturate(.70) brightness(1.24) contrast(1.00);
    mix-blend-mode:multiply;
  }

  .contact-main::after{
    background:
      radial-gradient(84% 64% at 0% 0%, rgba(241, 251, 255, .18) 0%, rgba(162, 219, 252, .10) 34%, rgba(62, 161, 226, .04) 62%, rgba(62, 161, 226, 0) 82%),
      radial-gradient(74% 58% at 78% 24%, rgba(154, 162, 246, .14) 0%, rgba(88, 104, 220, .08) 34%, rgba(37, 47, 153, .035) 62%, rgba(37, 47, 153, 0) 82%),
      linear-gradient(180deg, rgba(233, 248, 255, .05) 0%, rgba(98, 175, 231, .02) 42%, rgba(17, 42, 127, .03) 100%);
  }

  .contact-footer-band{
    background:
      radial-gradient(620px 440px at 16% 8%, rgba(44, 134, 204, .30), transparent 70%),
      radial-gradient(680px 510px at 78% 36%, rgba(10, 18, 111, .30), transparent 72%),
      linear-gradient(118deg, #0b67ad 0%, #064f98 34%, #0b2d78 66%, #050c4a 100%) !important;
  }
}

/* v1.294 — Leistungen image frame, Leitidee accent blue, Coverage eyebrow opacity.
   1) Leistungen background images are no longer full-bleed. They are centered
      and shown proportionally in a viewport frame with 15% vertical margins.
   2) Leitidee story accent blue updated from #1f4187 to #227dc8.
   3) Coverage eyebrow opacity set to 0.6. */

.leistungen-bg-image{
  inset:auto !important;
  top:15svh !important;
  left:50% !important;
  right:auto !important;
  bottom:auto !important;
  width:auto !important;
  height:70svh !important;
  max-width:none !important;
  object-fit:contain !important;
  object-position:center center !important;
  transform:translate3d(-50%, 0, 0) !important;
  transform-origin:center center !important;
  will-change:opacity !important;
}

.story-slide .story-text .story-accent{
  color:#227dc8 !important;
}

.section.coverage .coverage-eyebrow,
.coverage-eyebrow{
  opacity:.6 !important;
}

@media (max-width:900.98px){
  .leistungen-bg-image{
    top:15svh !important;
    left:50% !important;
    width:auto !important;
    height:70svh !important;
    object-fit:contain !important;
    object-position:center center !important;
    transform:translate3d(-50%, 0, 0) !important;
  }
}

@media (max-width: 700px){
  .leistungen-bg-image{
    /* On very narrow screens, keep the motif proportional and centered without
       forcing horizontal overflow. The desktop/large-tablet 15% frame remains
       untouched above. */
    top:50% !important;
    width:86vw !important;
    height:auto !important;
    max-height:70svh !important;
    transform:translate3d(-50%, -50%, 0) !important;
  }
}

/* v1.303 — Leistungen: single grayscale control for all JPG background motifs.
   Clean implementation:
   - only original JPGs from assets/img/leistungen-bg/
   - no overlay, no glaze, no pseudo layer above images
   - screen/»Negativ multiplizieren« lives on the transparent image group
   - each image has exactly one opacity variable: --leistungen-bg-opacity
   - all images share exactly one grayscale control: --leistungen-bg-grayscale

   DevTools:
   .section.services { --leistungen-bg-grayscale: 0; } disables grayscale for all motifs.
   .section.services { --leistungen-bg-grayscale: 1; } restores full grayscale. */

.section.services{
  --leistungen-bg-grayscale:1;
}

.section.services .leistungen-bg-layer{
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  overflow:hidden !important;
  pointer-events:none !important;

  background:transparent !important;
  background-color:transparent !important;
  opacity:1 !important;
  isolation:auto !important;
  filter:none !important;

  /* GIMP equivalent: group/layer blend mode = Negativ multiplizieren. */
  mix-blend-mode:screen !important;

  box-shadow:none !important;
  border:0 !important;
  outline:0 !important;
  -webkit-mask-image:none !important;
  mask-image:none !important;
}

.section.services .leistungen-bg-layer::before,
.section.services .leistungen-bg-layer::after{
  content:none !important;
  display:none !important;
  opacity:0 !important;
  background:none !important;
  background-color:transparent !important;
  box-shadow:none !important;
  border:0 !important;
  outline:0 !important;
  -webkit-mask-image:none !important;
  mask-image:none !important;
}

/* Per-motif opacity controls. Change these values in DevTools. */
.section.services .leistungen-bg-image:nth-child(1){ --leistungen-bg-opacity:.30; }
.section.services .leistungen-bg-image:nth-child(2){ --leistungen-bg-opacity:.30; }
.section.services .leistungen-bg-image:nth-child(3){ --leistungen-bg-opacity:.30; }
.section.services .leistungen-bg-image:nth-child(4){ --leistungen-bg-opacity:.30; }
.section.services .leistungen-bg-image:nth-child(5){ --leistungen-bg-opacity:.30; }
.section.services .leistungen-bg-image:nth-child(6){ --leistungen-bg-opacity:.30; }
.section.services .leistungen-bg-image:nth-child(7){ --leistungen-bg-opacity:.30; }

.section.services .leistungen-bg-image{
  position:absolute !important;
  inset:auto !important;
  top:15svh !important;
  left:50% !important;
  right:auto !important;
  bottom:auto !important;
  width:auto !important;
  height:70svh !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:contain !important;
  object-position:center center !important;

  /* Only opacity calculation: scroll fade times per-image target opacity. */
  opacity:calc(var(--bg-t, 0) * var(--leistungen-bg-opacity, .30)) !important;

  /* The JPG itself is normal. The group above performs screen blending.
     The single shared grayscale control is --leistungen-bg-grayscale on .section.services. */
  mix-blend-mode:normal !important;
  filter:grayscale(var(--leistungen-bg-grayscale, 1)) !important;

  background:transparent !important;
  background-color:transparent !important;
  box-shadow:none !important;
  border:0 !important;
  outline:0 !important;
  -webkit-mask-image:none !important;
  mask-image:none !important;

  transform:translate3d(calc(-50% + (var(--bg-phase, 0) * -44px)), 0, 0) !important;
  transform-origin:center center !important;
  will-change:opacity, transform !important;
  pointer-events:none !important;
  user-select:none !important;
}

@media (max-width:900.98px){
  .section.services .leistungen-bg-layer{
    mix-blend-mode:screen !important;
    opacity:1 !important;
    background:transparent !important;
    isolation:auto !important;
    filter:none !important;
  }

  .section.services .leistungen-bg-layer::before,
  .section.services .leistungen-bg-layer::after{
    content:none !important;
    display:none !important;
    opacity:0 !important;
    background:none !important;
  }

  .section.services .leistungen-bg-image{
    top:15svh !important;
    left:50% !important;
    width:auto !important;
    height:70svh !important;
    max-width:none !important;
    max-height:none !important;
    object-fit:contain !important;
    object-position:center center !important;
    opacity:calc(var(--bg-t, 0) * var(--leistungen-bg-opacity, .30)) !important;
    mix-blend-mode:normal !important;
    background:transparent !important;
    box-shadow:none !important;
    border:0 !important;
    -webkit-mask-image:none !important;
    mask-image:none !important;
    transform:translate3d(calc(-50% + (var(--bg-phase, 0) * -28px)), 0, 0) !important;
  }
}

@media (max-width: 700px){
  .section.services .leistungen-bg-image{
    top:50% !important;
    width:86vw !important;
    height:auto !important;
    max-height:70svh !important;
    transform:translate3d(calc(-50% + (var(--bg-phase, 0) * -18px)), -50%, 0) !important;
  }
}


/* v1.304 — Leistungen contour ghosts during image transitions.
   The JPG background images remain the main visual layer. The contour PNGs are
   introduced only as transient echo-lines during fade-in/out and disappear when
   the image is fully built. */
.section.services{
  --leistungen-bg-ghost-color: rgba(180, 224, 255, .42);
  --leistungen-bg-ghost-opacity: .92;
}

.section.services .leistungen-bg-ghost-layer{
  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;
  overflow:hidden !important;
  pointer-events:none !important;
  background:transparent !important;
  background-color:transparent !important;
  opacity:1 !important;
  isolation:auto !important;
  filter:none !important;
  mix-blend-mode:screen !important;
  box-shadow:none !important;
  border:0 !important;
  outline:0 !important;
}

.section.services .leistungen-bg-ghost{
  position:absolute !important;
  inset:auto !important;
  top:15svh !important;
  left:50% !important;
  width:1672px !important;
  height:941px !important;
  max-width:none !important;
  max-height:none !important;
  background:var(--leistungen-bg-ghost-color) !important;
  background-color:var(--leistungen-bg-ghost-color) !important;
  -webkit-mask-image:var(--leistungen-bg-ghost-mask) !important;
  mask-image:var(--leistungen-bg-ghost-mask) !important;
  -webkit-mask-repeat:no-repeat !important;
  mask-repeat:no-repeat !important;
  -webkit-mask-position:center center !important;
  mask-position:center center !important;
  -webkit-mask-size:contain !important;
  mask-size:contain !important;
  opacity:calc(var(--bg-ghost-t, 0) * var(--leistungen-bg-ghost-opacity, .92)) !important;
  transform:translate3d(calc(-50% + (var(--bg-ghost-phase, 0) * -58px)), 0, 0) !important;
  transform-origin:center center !important;
  will-change:opacity, transform !important;
  pointer-events:none !important;
  user-select:none !important;
}

.section.services .leistungen-bg-ghost:nth-child(1){ --leistungen-bg-ghost-mask:url("/assets/img/leistungen-bg-ghost/01_weltweit_ghost.png"); }
.section.services .leistungen-bg-ghost:nth-child(2){ --leistungen-bg-ghost-mask:url("/assets/img/leistungen-bg-ghost/02_reisebegleitung_ghost.png"); }
.section.services .leistungen-bg-ghost:nth-child(3){ --leistungen-bg-ghost-mask:url("/assets/img/leistungen-bg-ghost/03_entlassung_klinik_ghost.png"); }
.section.services .leistungen-bg-ghost:nth-child(4){ --leistungen-bg-ghost-mask:url("/assets/img/leistungen-bg-ghost/04_begleitung_ghost.png"); }
.section.services .leistungen-bg-ghost:nth-child(5){ --leistungen-bg-ghost-mask:url("/assets/img/leistungen-bg-ghost/05_family_office_ghost.png"); }
.section.services .leistungen-bg-ghost:nth-child(6){ --leistungen-bg-ghost-mask:url("/assets/img/leistungen-bg-ghost/06_demenz_ghost.png"); }
.section.services .leistungen-bg-ghost:nth-child(7){ --leistungen-bg-ghost-mask:url("/assets/img/leistungen-bg-ghost/07_palliativ_ghost.png"); }

@media (max-width:900.98px){
  .section.services .leistungen-bg-ghost{
    top:15svh !important;
    width:1672px !important;
    height:941px !important;
    transform:translate3d(calc(-50% + (var(--bg-ghost-phase, 0) * -38px)), 0, 0) !important;
  }
}

@media (max-width: 700px){
  .section.services .leistungen-bg-ghost{
    top:50% !important;
    width:86vw !important;
    height:calc(86vw * 941 / 1672) !important;
    transform:translate3d(calc(-50% + (var(--bg-ghost-phase, 0) * -22px)), -50%, 0) !important;
  }
}

/* v1.305 — Leistungen contour ghosts: match the framed JPG backgrounds exactly.
   The background JPGs are no longer full-viewport; they live in a 70svh-high
   centered frame with 15svh top/bottom breathing room. The contour masks now
   use the exact same frame and the exact same horizontal phase as the JPGs. */
.section.services{
  --leistungen-bg-ratio-w:1672;
  --leistungen-bg-ratio-h:941;
  --leistungen-bg-frame-h:70svh;
  --leistungen-bg-frame-w:calc(var(--leistungen-bg-frame-h) * var(--leistungen-bg-ratio-w) / var(--leistungen-bg-ratio-h));
}

.section.services .leistungen-bg-image,
.section.services .leistungen-bg-ghost{
  top:15svh !important;
  left:50% !important;
  width:var(--leistungen-bg-frame-w) !important;
  height:var(--leistungen-bg-frame-h) !important;
  max-width:none !important;
  max-height:none !important;
}

.section.services .leistungen-bg-image{
  object-fit:contain !important;
  object-position:center center !important;
  transform:translate3d(calc(-50% + (var(--bg-phase, 0) * -44px)), 0, 0) !important;
}

.section.services .leistungen-bg-ghost{
  -webkit-mask-size:100% 100% !important;
  mask-size:100% 100% !important;
  transform:translate3d(calc(-50% + (var(--bg-phase, 0) * -44px)), 0, 0) !important;
}

@media (max-width:900.98px){
  .section.services .leistungen-bg-image,
  .section.services .leistungen-bg-ghost{
    top:15svh !important;
    left:50% !important;
    width:var(--leistungen-bg-frame-w) !important;
    height:var(--leistungen-bg-frame-h) !important;
    max-width:none !important;
    max-height:none !important;
  }

  .section.services .leistungen-bg-image,
  .section.services .leistungen-bg-ghost{
    transform:translate3d(calc(-50% + (var(--bg-phase, 0) * -28px)), 0, 0) !important;
  }
}

@media (max-width: 700px){
  .section.services{
    --leistungen-bg-frame-w:min(86vw, calc(70svh * 1672 / 941));
    --leistungen-bg-frame-h:calc(var(--leistungen-bg-frame-w) * 941 / 1672);
  }

  .section.services .leistungen-bg-image,
  .section.services .leistungen-bg-ghost{
    top:50% !important;
    left:50% !important;
    width:var(--leistungen-bg-frame-w) !important;
    height:var(--leistungen-bg-frame-h) !important;
    max-width:none !important;
    max-height:none !important;
  }

  .section.services .leistungen-bg-image,
  .section.services .leistungen-bg-ghost{
    transform:translate3d(calc(-50% + (var(--bg-phase, 0) * -18px)), -50%, 0) !important;
  }
}


/* v1.306 — Leistungen: requested background-image opacity/color tuning.
   Single shared grayscale control set to color; per-motif opacity set to 40%. */
.section.services{
  --leistungen-bg-grayscale:0;
}

.section.services .leistungen-bg-image:nth-child(1){ --leistungen-bg-opacity:.40; }
.section.services .leistungen-bg-image:nth-child(2){ --leistungen-bg-opacity:.40; }
.section.services .leistungen-bg-image:nth-child(3){ --leistungen-bg-opacity:.40; }
.section.services .leistungen-bg-image:nth-child(4){ --leistungen-bg-opacity:.40; }
.section.services .leistungen-bg-image:nth-child(5){ --leistungen-bg-opacity:.40; }
.section.services .leistungen-bg-image:nth-child(6){ --leistungen-bg-opacity:.40; }
.section.services .leistungen-bg-image:nth-child(7){ --leistungen-bg-opacity:.40; }

/* v1.312 — Über-mich: helle radiale Bühne, Zitat-/Siegel-Spalte und Social-Alignment.
   Coverage: weiße Peter-Witt-Signatur unter dem linken Statement-Textblock. */
.section.services .leistungen-outro{
  background:radial-gradient(ellipse at 50% 47%, #ffffff 0%, #ffffff 48%, #f0f0f0 100%) !important;
}

.section.services .leistungen-outro::before{
  opacity:var(--about-light-t, 0) !important;
  background:radial-gradient(ellipse at 50% 47%, #ffffff 0%, #ffffff 48%, #f0f0f0 100%) !important;
}

.section.services .leistungen-outro .about-bg-layer{
  background:radial-gradient(ellipse at 50% 47%, #ffffff 0%, #ffffff 48%, #f0f0f0 100%) !important;
  opacity:1 !important;
}

.section.services .leistungen-outro .about-bg-layer::after,
.section.services .leistungen-outro .about-bg-image{
  content:none !important;
  display:none !important;
  opacity:0 !important;
  background:none !important;
}

@media (min-width: 901px){
  .section.services .leistungen-shell{
    --about-copy-x:clamp(412px, 29.25vw, 612px);
    --about-copy-y:clamp(102px, 12.1svh, 154px);
    --about-copy-w:min(43vw, 704px);
    --about-side-x:clamp(948px, 72.1vw, 1482px);
    --about-side-w:min(22vw, 382px);
    --about-side-top-offset:clamp(220px, 24.4svh, 310px);
  }

  .section.services .leistungen-outro-visual{
    left:clamp(118px, 10.15vw, 208px) !important;
    top:0 !important;
    bottom:0 !important;
    width:clamp(230px, 15.25vw, 314px) !important;
    padding:clamp(96px, 9.9svh, 124px) 0 clamp(52px, 6.1svh, 76px) !important;
    align-items:flex-end !important;
    justify-content:center !important;
    z-index:3 !important;
  }

  .section.services .leistungen-outro-person{
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    max-height:min(1010px, 85svh) !important;
    object-fit:contain !important;
    filter:drop-shadow(0 26px 32px rgba(0,0,0,.18)) !important;
  }

  .section.services .leistungen-outro-copy{
    inset:auto !important;
    left:var(--about-copy-x) !important;
    top:var(--about-copy-y) !important;
    width:var(--about-copy-w) !important;
    max-width:var(--about-copy-w) !important;
    height:auto !important;
    min-height:0 !important;
    display:block !important;
    padding:0 !important;
    align-items:normal !important;
    justify-content:flex-start !important;
    transform:translate3d(0, calc((1 - var(--leistungen-copy-progress)) * 18px), 0) !important;
    z-index:4 !important;
  }

  .section.services .leistungen-outro-copy-inner{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    transform:none !important;
  }

  .section.services .leistungen-outro-title{
    margin:0 0 calc(clamp(12px, 1.55svh, 20px) * var(--leistungen-copy-fit, 1)) !important;
    font-size:calc(clamp(68px, 5.55vw, 116px) * var(--leistungen-copy-fit, 1)) !important;
    line-height:.86 !important;
    letter-spacing:-.012em !important;
  }

  .section.services .leistungen-outro-subtitle{
    margin:0 0 calc(clamp(36px, 4.25svh, 54px) * var(--leistungen-copy-fit, 1)) !important;
    font-size:calc(clamp(26px, min(2.58vw, 4.35svh), 42px) * var(--leistungen-copy-fit, 1)) !important;
    line-height:.98 !important;
    color:#35343a !important;
    text-shadow:none !important;
  }

  .section.services .leistungen-outro-text{
    width:min(100%, 63ch) !important;
    max-width:63ch !important;
  }

  .section.services .leistungen-outro-text p{
    margin:0 0 calc(clamp(20px, 2.55svh, 30px) * var(--leistungen-copy-fit, 1)) !important;
    font-size:calc(clamp(14.6px, min(1.0vw, 1.82svh), 15.8px) * var(--leistungen-copy-fit, 1)) !important;
    line-height:1.48 !important;
    letter-spacing:.056em !important;
    color:#25262b !important;
    text-shadow:none !important;
  }

  .section.services .leistungen-outro-text p:last-child{
    margin-bottom:0 !important;
  }

  .section.services .leistungen-outro-side{
    position:absolute;
    left:var(--about-side-x);
    top:calc(var(--about-copy-y) + var(--about-side-top-offset));
    width:var(--about-side-w);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    opacity:var(--leistungen-copy-progress);
    transform:translate3d(
      calc((1 - var(--leistungen-copy-progress)) * 24px),
      calc((1 - var(--leistungen-copy-progress)) * 14px),
      0
    );
    pointer-events:none;
    z-index:5;
    will-change:opacity, transform;
  }

  .section.services .leistungen-outro-quote{
    margin:0;
    width:100%;
    max-width:100%;
    color:#28262a;
    font-family:"Playfair Display", var(--font-display-serif), var(--font-serif) !important;
    font-style:italic !important;
    font-weight:400 !important;
    font-size:clamp(22px, 1.42vw, 32px);
    line-height:1.18;
    letter-spacing:-.012em;
    text-align:center;
    text-wrap:balance;
  }

  .section.services .leistungen-outro-quote p{
    margin:0;
  }

  .section.services .leistungen-outro-side .about-references-seal{
    --about-seal-size:clamp(164px, 10.9vw, 228px);
    position:relative !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;
    width:var(--about-seal-size) !important;
    min-height:calc(var(--about-seal-size) + 30px) !important;
    margin:clamp(62px, 8.0svh, 106px) auto 0 !important;
    opacity:1 !important;
    transform:scale(var(--about-seal-hover-scale, 1)) !important;
    pointer-events:auto !important;
  }

  .section.services .leistungen-outro-social{
    left:var(--about-copy-x) !important;
    right:auto !important;
    bottom:clamp(40px, 5.1svh, 66px) !important;
    justify-content:flex-start !important;
    gap:clamp(36px, 3.1vw, 56px) !important;
    transform:translate3d(0, calc((1 - var(--leistungen-social-progress)) * 20px), 0) !important;
  }

  .section.services .leistungen-outro-social-link{
    font-size:clamp(12px, .78vw, 15px) !important;
    letter-spacing:.02em !important;
  }

  .section.services .leistungen-outro-social-link img{
    width:clamp(23px, 1.55vw, 32px) !important;
  }
}

@media (min-width: 901px) and (max-height: 860px){
  .section.services .leistungen-shell{
    --about-copy-y:clamp(76px, 9.6svh, 112px);
    --about-side-top-offset:clamp(160px, 19.6svh, 212px);
  }

  .section.services .leistungen-outro-visual{
    padding-top:clamp(70px, 8.5svh, 94px) !important;
    padding-bottom:clamp(36px, 5.2svh, 54px) !important;
    width:clamp(204px, 13.6vw, 278px) !important;
  }

  .section.services .leistungen-outro-title{
    font-size:calc(clamp(56px, 5.05vw, 94px) * var(--leistungen-copy-fit, 1)) !important;
  }

  .section.services .leistungen-outro-subtitle{
    margin-bottom:calc(clamp(22px, 3.1svh, 36px) * var(--leistungen-copy-fit, 1)) !important;
  }

  .section.services .leistungen-outro-text p{
    margin-bottom:calc(clamp(15px, 2.0svh, 22px) * var(--leistungen-copy-fit, 1)) !important;
  }

  .section.services .leistungen-outro-quote{
    font-size:clamp(19px, 1.25vw, 27px);
    line-height:1.16;
  }

  .section.services .leistungen-outro-side .about-references-seal{
    --about-seal-size:clamp(136px, 9.4vw, 188px);
    margin-top:clamp(34px, 5.6svh, 58px) !important;
  }

  .section.services .leistungen-outro-social{
    bottom:clamp(24px, 3.8svh, 42px) !important;
  }
}

/* The old signature class is no longer used inside the Über-mich block. */
.section.services .leistungen-outro .leistungen-outro-copy .leistungen-outro-signature{
  display:none !important;
}

@media (max-width:900.98px){
  .section.services .leistungen-outro{
    background:radial-gradient(ellipse at 50% 38%, #ffffff 0%, #ffffff 50%, #f0f0f0 100%) !important;
  }

  .section.services .leistungen-outro::before,
  .section.services .leistungen-outro .about-bg-layer{
    background:radial-gradient(ellipse at 50% 38%, #ffffff 0%, #ffffff 50%, #f0f0f0 100%) !important;
  }

  .section.services .leistungen-outro-side{
    position:relative !important;
    left:auto !important;
    top:auto !important;
    width:100% !important;
    max-width:38rem !important;
    margin:clamp(30px, 6svh, 46px) 0 0 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    opacity:1 !important;
    transform:none !important;
    pointer-events:auto !important;
  }

  .section.services .leistungen-outro-quote{
    margin:0 !important;
    max-width:28ch !important;
    color:#28262a !important;
    font-family:"Playfair Display", var(--font-display-serif), var(--font-serif) !important;
    font-style:italic !important;
    font-weight:400 !important;
    font-size:clamp(22px, 7vw, 30px) !important;
    line-height:1.15 !important;
    text-align:left !important;
  }

  .section.services .leistungen-outro-quote p{
    margin:0 !important;
  }

  .section.services .leistungen-outro-side .about-references-seal{
    position:relative !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;
    --about-seal-size:clamp(132px, 42vw, 172px);
    margin:clamp(26px, 6svh, 38px) 0 0 !important;
    opacity:1 !important;
    transform:none !important;
    pointer-events:auto !important;
  }

  .section.services .leistungen-outro-social{
    margin-top:clamp(30px, 6svh, 44px) !important;
    justify-content:flex-start !important;
  }
}

.section.coverage .coverage-statement .coverage-signature{
  position:relative !important;
  display:block !important;
  width:clamp(172px, 11.6vw, 238px) !important;
  max-width:52% !important;
  margin:clamp(34px, 4.8svh, 64px) clamp(12px, 1.0vw, 22px) 0 auto !important;
  padding:0 !important;
  overflow:visible !important;
  opacity:1 !important;
  transform:none !important;
  pointer-events:none !important;
  z-index:4 !important;
}

.section.coverage .coverage-statement .coverage-signature::after{
  content:none !important;
  display:none !important;
}

.section.coverage .coverage-statement .coverage-signature-img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  filter:brightness(0) invert(1) !important;
  opacity:.96 !important;
  clip-path:none !important;
}

@media (max-width:1280px) and (min-width:901px){
  .section.coverage .coverage-statement .coverage-signature{
    width:clamp(146px, 11.2vw, 202px) !important;
    margin-top:clamp(26px, 4.0svh, 48px) !important;
  }
}

@media (max-width:1080px) and (min-width:901px){
  .section.coverage .coverage-statement .coverage-signature{
    width:clamp(128px, 11vw, 176px) !important;
    margin-top:clamp(22px, 3.4svh, 38px) !important;
  }
}

@media (min-width:901px) and (max-height:760px){
  .section.coverage .coverage-statement .coverage-signature{
    width:clamp(122px, 10.3vw, 166px) !important;
    margin-top:clamp(18px, 3svh, 34px) !important;
  }
}

@media (max-width:900.98px){
  .section.coverage .coverage-statement .coverage-signature{
    width:clamp(132px, 32vw, 190px) !important;
    max-width:52% !important;
    margin:clamp(24px, 4.8svh, 34px) 0 0 auto !important;
  }
}

/* v1.312b — Fix Über-mich desktop geometry after v1.312.
   Cause of the broken screenshot: older v1.252/v1.253 rules still positioned
   .leistungen-outro-copy-inner absolutely and added a second horizontal offset.
   The outer copy block was correctly placed, but the inner block inherited
   left:var(--about-copy-left-x), pushing text/heading into the right quote/seal
   column. This final override makes the inner copy block flow inside its
   positioned parent again. */
.section.services .leistungen-outro .leistungen-outro-copy-inner{
  position:relative !important;
  left:auto !important;
  right:auto !important;
  top:auto !important;
  bottom:auto !important;
  inset:auto !important;
  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
  transform:none !important;
  transform-origin:50% 50% !important;
}

@media (min-width:901px){
  html body #leistungen.section.services .leistungen-shell{
    --about-copy-x:clamp(456px, 29.25vw, 612px);
    --about-copy-y:clamp(96px, 11.7svh, 150px);
    --about-copy-w:min(43vw, 704px);
    --about-side-x:clamp(958px, 72.1vw, 1482px);
    --about-side-w:min(22vw, 382px);
    --about-side-top-offset:clamp(210px, 24.4svh, 302px);
  }

  html body #leistungen.section.services .leistungen-outro-copy{
    position:absolute !important;
    inset:auto !important;
    left:var(--about-copy-x) !important;
    right:auto !important;
    top:var(--about-copy-y) !important;
    bottom:auto !important;
    width:var(--about-copy-w) !important;
    max-width:var(--about-copy-w) !important;
    min-width:0 !important;
    height:auto !important;
    min-height:0 !important;
    display:block !important;
    padding:0 !important;
    align-items:normal !important;
    justify-content:flex-start !important;
    overflow:visible !important;
    transform:translate3d(0, calc((1 - var(--leistungen-copy-progress)) * 18px), 0) !important;
    z-index:4 !important;
  }

  html body #leistungen.section.services .leistungen-outro-title{
    width:100% !important;
    max-width:100% !important;
    white-space:normal !important;
  }

  html body #leistungen.section.services .leistungen-outro-title-line{
    display:block !important;
    white-space:nowrap !important;
  }

  html body #leistungen.section.services .leistungen-outro-side{
    position:absolute !important;
    left:var(--about-side-x) !important;
    right:auto !important;
    top:calc(var(--about-copy-y) + var(--about-side-top-offset)) !important;
    bottom:auto !important;
    width:var(--about-side-w) !important;
    max-width:var(--about-side-w) !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-start !important;
    opacity:var(--leistungen-copy-progress) !important;
    transform:translate3d(
      calc((1 - var(--leistungen-copy-progress)) * 24px),
      calc((1 - var(--leistungen-copy-progress)) * 14px),
      0
    ) !important;
    pointer-events:none !important;
    z-index:5 !important;
  }

  html body #leistungen.section.services .leistungen-outro-side .about-references-seal{
    position:relative !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;
    margin:clamp(58px, 7.8svh, 100px) auto 0 !important;
    opacity:1 !important;
    transform:scale(var(--about-seal-hover-scale, 1)) !important;
    pointer-events:auto !important;
  }

  html body #leistungen.section.services .leistungen-outro-social{
    position:absolute !important;
    left:var(--about-copy-x) !important;
    right:auto !important;
    bottom:clamp(40px, 5.1svh, 66px) !important;
    top:auto !important;
    justify-content:flex-start !important;
    gap:clamp(36px, 3.1vw, 56px) !important;
    transform:translate3d(0, calc((1 - var(--leistungen-social-progress)) * 20px), 0) !important;
  }
}

@media (min-width:901px) and (max-height:860px){
  html body #leistungen.section.services .leistungen-shell{
    --about-copy-y:clamp(72px, 9.2svh, 108px);
    --about-side-top-offset:clamp(156px, 19.2svh, 208px);
  }

  html body #leistungen.section.services .leistungen-outro-side .about-references-seal{
    margin-top:clamp(32px, 5.2svh, 56px) !important;
  }
}

@media (max-width:900.98px){
  html body #leistungen.section.services .leistungen-outro .leistungen-outro-copy-inner{
    position:relative !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;
    inset:auto !important;
    width:100% !important;
    max-width:38rem !important;
    margin:0 !important;
    transform:none !important;
  }
}

/* v1.312c — Über-mich: restored proportional desktop geometry.
   The whole desktop composition is tied to Peter's frame again:
   15svh top distance, 10svh lower distance, max-height 1300px. The copy,
   quote, seal and social row scale from that same frame, so the section stays
   visible across desktop viewport shapes instead of drifting or clipping. */
@media (min-width:1101px){
  html body #leistungen.section.services .leistungen-outro{
    --about-stage-top:15svh;
    --about-stage-bottom:10svh;
    --about-peter-h:min(1300px, calc(100svh - var(--about-stage-top) - var(--about-stage-bottom)));
    --about-peter-w:calc(var(--about-peter-h) * .38373);
    --about-peter-left:clamp(84px, 7.1vw, 170px);
    --about-copy-gap:calc(var(--about-peter-h) * .10);
    --about-copy-left:calc(var(--about-peter-left) + var(--about-peter-w) + var(--about-copy-gap));
    --about-side-w:clamp(220px, calc(var(--about-peter-h) * .30), 330px);
    --about-side-right:clamp(92px, 13.4vw, 300px);
    --about-copy-w:min(
      clamp(430px, calc(var(--about-peter-h) * .56), 560px),
      calc(100vw - var(--about-copy-left) - var(--about-side-w) - var(--about-side-right) - clamp(56px, 4.2vw, 96px))
    );
    --about-copy-top:calc(var(--about-stage-top) - calc(var(--about-peter-h) * .03));
    --about-side-top:calc(var(--about-stage-top) + calc(var(--about-peter-h) * .29));
    overflow:hidden !important;
    background:radial-gradient(ellipse at 50% 47%, #ffffff 0%, #ffffff 50%, #f0f0f0 100%) !important;
  }

  html body #leistungen.section.services .leistungen-outro .about-bg-layer,
  html body #leistungen.section.services .leistungen-outro::before{
    background:radial-gradient(ellipse at 50% 47%, #ffffff 0%, #ffffff 50%, #f0f0f0 100%) !important;
  }

  html body #leistungen.section.services .leistungen-outro-layout{
    position:absolute !important;
    inset:0 !important;
    display:block !important;
    overflow:visible !important;
    pointer-events:none !important;
  }

  html body #leistungen.section.services .leistungen-outro-visual{
    position:absolute !important;
    left:var(--about-peter-left) !important;
    top:var(--about-stage-top) !important;
    bottom:auto !important;
    width:var(--about-peter-w) !important;
    height:var(--about-peter-h) !important;
    max-width:none !important;
    padding:0 !important;
    display:flex !important;
    align-items:flex-start !important;
    justify-content:center !important;
    opacity:var(--leistungen-person-progress, 1) !important;
    transform:none !important;
    overflow:visible !important;
    z-index:3 !important;
  }

  html body #leistungen.section.services .leistungen-outro-person{
    display:block !important;
    width:auto !important;
    height:100% !important;
    max-width:none !important;
    max-height:1300px !important;
    object-fit:contain !important;
    object-position:center top !important;
    margin:0 auto !important;
    filter:drop-shadow(0 26px 32px rgba(0,0,0,.18)) !important;
  }

  html body #leistungen.section.services .leistungen-outro-copy{
    position:absolute !important;
    inset:auto !important;
    left:var(--about-copy-left) !important;
    top:var(--about-copy-top) !important;
    right:auto !important;
    bottom:auto !important;
    width:var(--about-copy-w) !important;
    max-width:var(--about-copy-w) !important;
    min-width:0 !important;
    height:auto !important;
    min-height:0 !important;
    padding:0 !important;
    display:block !important;
    overflow:visible !important;
    opacity:var(--leistungen-copy-progress, 1) !important;
    transform:translate3d(0, calc((1 - var(--leistungen-copy-progress, 1)) * 18px), 0) !important;
    z-index:4 !important;
  }

  html body #leistungen.section.services .leistungen-outro-copy-inner{
    position:relative !important;
    inset:auto !important;
    left:auto !important;
    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
    transform:none !important;
    overflow:visible !important;
  }

  html body #leistungen.section.services .leistungen-outro-title{
    width:100% !important;
    max-width:100% !important;
    margin:0 0 calc(clamp(10px, 1.35svh, 18px) * var(--leistungen-copy-fit, 1)) !important;
    font-size:calc(clamp(54px, min(5.35vw, calc(var(--about-peter-h) * .097)), 108px) * var(--leistungen-copy-fit, 1)) !important;
    line-height:.86 !important;
    letter-spacing:-.012em !important;
    color:#5b421d !important;
    background:none !important;
    -webkit-text-fill-color:#5b421d !important;
    text-shadow:none !important;
  }

  html body #leistungen.section.services .leistungen-outro-title-line{
    display:block !important;
    white-space:nowrap !important;
  }

  html body #leistungen.section.services .leistungen-outro-subtitle{
    margin:0 0 calc(clamp(26px, calc(var(--about-peter-h) * .046), 48px) * var(--leistungen-copy-fit, 1)) !important;
    font-size:calc(clamp(25px, min(2.2vw, calc(var(--about-peter-h) * .034)), 40px) * var(--leistungen-copy-fit, 1)) !important;
    line-height:1.02 !important;
    color:#35343a !important;
    -webkit-text-fill-color:#35343a !important;
    text-shadow:none !important;
  }

  html body #leistungen.section.services .leistungen-outro-text{
    width:100% !important;
    max-width:100% !important;
  }

  html body #leistungen.section.services .leistungen-outro-text p{
    margin:0 0 calc(clamp(17px, calc(var(--about-peter-h) * .026), 28px) * var(--leistungen-copy-fit, 1)) !important;
    font-size:calc(clamp(13.2px, min(.86vw, calc(var(--about-peter-h) * .0168)), 16px) * var(--leistungen-copy-fit, 1)) !important;
    line-height:1.50 !important;
    letter-spacing:.056em !important;
    font-weight:500 !important;
    color:#25262b !important;
    -webkit-text-fill-color:#25262b !important;
    text-shadow:none !important;
  }

  html body #leistungen.section.services .leistungen-outro-text p:last-child{
    margin-bottom:0 !important;
  }

  html body #leistungen.section.services .leistungen-outro-side{
    position:absolute !important;
    left:auto !important;
    right:var(--about-side-right) !important;
    top:var(--about-side-top) !important;
    bottom:auto !important;
    width:var(--about-side-w) !important;
    max-width:var(--about-side-w) !important;
    min-width:0 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-start !important;
    opacity:var(--leistungen-copy-progress, 1) !important;
    transform:translate3d(calc((1 - var(--leistungen-copy-progress, 1)) * 24px), calc((1 - var(--leistungen-copy-progress, 1)) * 14px), 0) !important;
    pointer-events:none !important;
    overflow:visible !important;
    z-index:5 !important;
  }

  html body #leistungen.section.services .leistungen-outro-quote{
    margin:0 !important;
    width:100% !important;
    max-width:100% !important;
    font-family:"Playfair Display", var(--font-display-serif), var(--font-serif) !important;
    font-style:italic !important;
    font-weight:400 !important;
    font-size:clamp(19px, min(1.36vw, calc(var(--about-peter-h) * .028)), 30px) !important;
    line-height:1.18 !important;
    letter-spacing:-.012em !important;
    text-align:center !important;
    text-wrap:balance;
    color:#28262a !important;
    -webkit-text-fill-color:#28262a !important;
    text-shadow:none !important;
  }

  html body #leistungen.section.services .leistungen-outro-quote p{
    margin:0 !important;
    color:#28262a !important;
    -webkit-text-fill-color:#28262a !important;
    text-shadow:none !important;
  }

  html body #leistungen.section.services .leistungen-outro-side .about-references-seal{
    --about-seal-size:clamp(142px, calc(var(--about-peter-h) * .19), 220px);
    position:relative !important;
    inset:auto !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;
    width:var(--about-seal-size) !important;
    min-height:calc(var(--about-seal-size) + clamp(22px, 2.4svh, 32px)) !important;
    margin:clamp(46px, calc(var(--about-peter-h) * .078), 88px) auto 0 !important;
    opacity:1 !important;
    transform:scale(var(--about-seal-hover-scale, 1)) !important;
    pointer-events:auto !important;
    color:#5e5a52 !important;
    -webkit-text-fill-color:#5e5a52 !important;
  }

  html body #leistungen.section.services .leistungen-outro-social{
    position:absolute !important;
    left:var(--about-copy-left) !important;
    right:auto !important;
    bottom:clamp(50px, 7.0svh, 92px) !important;
    top:auto !important;
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:clamp(32px, calc(var(--about-peter-h) * .052), 56px) !important;
    padding:0 !important;
    opacity:var(--leistungen-social-progress, 1) !important;
    transform:translate3d(0, calc((1 - var(--leistungen-social-progress, 1)) * 20px), 0) !important;
    pointer-events:auto !important;
    z-index:6 !important;
  }

  html body #leistungen.section.services .leistungen-outro-social-link{
    color:#25262b !important;
    -webkit-text-fill-color:#25262b !important;
    opacity:.82 !important;
    font-size:clamp(12px, calc(var(--about-peter-h) * .015), 15px) !important;
    line-height:1.2 !important;
  }

  html body #leistungen.section.services .leistungen-outro-social-link img{
    width:clamp(22px, calc(var(--about-peter-h) * .031), 32px) !important;
    opacity:.86 !important;
    filter:none !important;
  }
}

@media (min-width:1101px) and (max-height:860px){
  html body #leistungen.section.services .leistungen-outro{
    --about-stage-top:15svh;
    --about-stage-bottom:10svh;
    --about-copy-gap:calc(var(--about-peter-h) * .088);
    --about-side-top:calc(var(--about-stage-top) + calc(var(--about-peter-h) * .27));
  }

  html body #leistungen.section.services .leistungen-outro-side .about-references-seal{
    margin-top:clamp(34px, calc(var(--about-peter-h) * .062), 58px) !important;
  }

  html body #leistungen.section.services .leistungen-outro-social{
    bottom:clamp(32px, 5.2svh, 54px) !important;
  }
}

@media (min-width:901px) and (max-width:1100px){
  html body #leistungen.section.services .leistungen-outro{
    --about-stage-top:12svh;
    --about-stage-bottom:8svh;
    --about-peter-h:min(780px, 78svh);
    --about-peter-w:calc(var(--about-peter-h) * .38373);
    overflow:hidden !important;
  }

  html body #leistungen.section.services .leistungen-outro-visual{
    position:absolute !important;
    left:clamp(44px, 7vw, 78px) !important;
    top:var(--about-stage-top) !important;
    bottom:auto !important;
    width:var(--about-peter-w) !important;
    height:var(--about-peter-h) !important;
    padding:0 !important;
  }

  html body #leistungen.section.services .leistungen-outro-person{
    height:100% !important;
    width:auto !important;
    max-height:1300px !important;
    max-width:none !important;
  }

  html body #leistungen.section.services .leistungen-outro-copy,
  html body #leistungen.section.services .leistungen-outro-side,
  html body #leistungen.section.services .leistungen-outro-social{
    left:calc(clamp(44px, 7vw, 78px) + var(--about-peter-w) + clamp(34px, 5vw, 52px)) !important;
    right:clamp(34px, 5vw, 58px) !important;
    width:auto !important;
    max-width:none !important;
  }

  html body #leistungen.section.services .leistungen-outro-copy{
    position:absolute !important;
    top:calc(var(--about-stage-top) - 2svh) !important;
    bottom:auto !important;
    padding:0 !important;
  }

  html body #leistungen.section.services .leistungen-outro-copy-inner{
    position:relative !important;
    inset:auto !important;
    left:auto !important;
    top:auto !important;
    width:100% !important;
    max-width:100% !important;
    transform:none !important;
  }

  html body #leistungen.section.services .leistungen-outro-title{
    font-size:clamp(44px, 6vw, 62px) !important;
    line-height:.88 !important;
    color:#5b421d !important;
    -webkit-text-fill-color:#5b421d !important;
    background:none !important;
  }

  html body #leistungen.section.services .leistungen-outro-subtitle{
    margin-bottom:clamp(20px, 3.2svh, 30px) !important;
    font-size:clamp(23px, 3.2vw, 30px) !important;
    color:#35343a !important;
    -webkit-text-fill-color:#35343a !important;
  }

  html body #leistungen.section.services .leistungen-outro-text p{
    font-size:clamp(13px, 1.48vw, 15px) !important;
    line-height:1.46 !important;
    margin-bottom:clamp(13px, 2svh, 19px) !important;
    color:#25262b !important;
    -webkit-text-fill-color:#25262b !important;
  }

  html body #leistungen.section.services .leistungen-outro-side{
    position:absolute !important;
    top:calc(var(--about-stage-top) + 50svh) !important;
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:clamp(22px, 3.4vw, 38px) !important;
    pointer-events:none !important;
  }

  html body #leistungen.section.services .leistungen-outro-quote{
    width:min(35ch, 55%) !important;
    margin:0 !important;
    color:#28262a !important;
    -webkit-text-fill-color:#28262a !important;
    font-family:"Playfair Display", var(--font-display-serif), var(--font-serif) !important;
    font-style:italic !important;
    font-weight:400 !important;
    font-size:clamp(18px, 2.15vw, 24px) !important;
    line-height:1.16 !important;
    text-align:left !important;
  }

  html body #leistungen.section.services .leistungen-outro-quote p{
    color:#28262a !important;
    -webkit-text-fill-color:#28262a !important;
  }

  html body #leistungen.section.services .leistungen-outro-side .about-references-seal{
    --about-seal-size:clamp(118px, 13vw, 150px);
    position:relative !important;
    inset:auto !important;
    margin:0 !important;
    min-height:calc(var(--about-seal-size) + 24px) !important;
    pointer-events:auto !important;
  }

  html body #leistungen.section.services .leistungen-outro-social{
    position:absolute !important;
    bottom:clamp(28px, 5svh, 46px) !important;
    top:auto !important;
    justify-content:flex-start !important;
  }
}

/* v1.312d — Über-mich: final proportional desktop lock.
   Geometry is now derived from Peter's frame again: 15svh top, 10svh bottom,
   hard max-height 1300px. Copy, quote, seal and social row use the same frame
   as scale reference, and the side column is constrained by the right viewport
   edge so it cannot drift out of view. */
@media (min-width:1101px){
  html body #leistungen.section.services .leistungen-outro{
    --about-stage-top:15svh;
    --about-stage-bottom:10svh;
    --about-peter-h:min(1300px, calc(100svh - var(--about-stage-top) - var(--about-stage-bottom)));
    --about-peter-w:calc(var(--about-peter-h) * .3607);
    --about-peter-left:clamp(86px, 9.6vw, 168px);
    --about-copy-gap:clamp(58px, calc(var(--about-peter-h) * .12), 104px);
    --about-copy-left:calc(var(--about-peter-left) + var(--about-peter-w) + var(--about-copy-gap));
    --about-side-right:clamp(112px, 11.2vw, 190px);
    --about-side-w:clamp(220px, calc(var(--about-peter-h) * .35), 330px);
    --about-columns-gap:clamp(42px, calc(var(--about-peter-h) * .085), 78px);
    --about-copy-w:min(
      clamp(360px, calc(var(--about-peter-h) * .80), 570px),
      calc(100vw - var(--about-copy-left) - var(--about-side-w) - var(--about-side-right) - var(--about-columns-gap))
    );
    --about-copy-top:calc(var(--about-stage-top) - calc(var(--about-peter-h) * .018));
    --about-side-top:calc(var(--about-stage-top) + calc(var(--about-peter-h) * .315));
    overflow:hidden !important;
  }

  html body #leistungen.section.services .leistungen-outro-visual{
    position:absolute !important;
    left:var(--about-peter-left) !important;
    top:var(--about-stage-top) !important;
    bottom:auto !important;
    width:var(--about-peter-w) !important;
    height:var(--about-peter-h) !important;
    max-width:none !important;
    max-height:1300px !important;
    padding:0 !important;
    display:flex !important;
    align-items:flex-start !important;
    justify-content:center !important;
    overflow:visible !important;
    transform:none !important;
    z-index:3 !important;
  }

  html body #leistungen.section.services .leistungen-outro-person{
    height:100% !important;
    max-height:1300px !important;
    width:auto !important;
    max-width:none !important;
    min-width:0 !important;
    object-fit:contain !important;
    object-position:center top !important;
    margin:0 auto !important;
  }

  html body #leistungen.section.services .leistungen-outro-copy{
    position:absolute !important;
    inset:auto !important;
    left:var(--about-copy-left) !important;
    top:var(--about-copy-top) !important;
    right:auto !important;
    bottom:auto !important;
    width:var(--about-copy-w) !important;
    max-width:var(--about-copy-w) !important;
    min-width:0 !important;
    height:auto !important;
    min-height:0 !important;
    padding:0 !important;
    display:block !important;
    overflow:visible !important;
    opacity:var(--leistungen-copy-progress, 1) !important;
    transform:translate3d(0, calc((1 - var(--leistungen-copy-progress, 1)) * 18px), 0) !important;
    z-index:4 !important;
  }

  html body #leistungen.section.services .leistungen-outro-copy-inner{
    position:relative !important;
    inset:auto !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
    transform:none !important;
    overflow:visible !important;
  }

  html body #leistungen.section.services .leistungen-outro-title{
    margin:0 0 calc(clamp(8px, calc(var(--about-peter-h) * .018), 17px) * var(--leistungen-copy-fit, 1)) !important;
    width:100% !important;
    max-width:100% !important;
    font-size:calc(clamp(50px, min(5.6vw, calc(var(--about-peter-h) * .14)), 106px) * var(--leistungen-copy-fit, 1)) !important;
    line-height:.86 !important;
    letter-spacing:-.014em !important;
    color:#5b421d !important;
    -webkit-text-fill-color:#5b421d !important;
    background:none !important;
    text-shadow:none !important;
  }

  html body #leistungen.section.services .leistungen-outro-title-line{
    white-space:nowrap !important;
  }

  html body #leistungen.section.services .leistungen-outro-subtitle{
    margin:0 0 calc(clamp(24px, calc(var(--about-peter-h) * .045), 46px) * var(--leistungen-copy-fit, 1)) !important;
    font-size:calc(clamp(24px, min(2.4vw, calc(var(--about-peter-h) * .038)), 38px) * var(--leistungen-copy-fit, 1)) !important;
    line-height:1.02 !important;
    color:#35343a !important;
    -webkit-text-fill-color:#35343a !important;
    text-shadow:none !important;
  }

  html body #leistungen.section.services .leistungen-outro-text{
    width:100% !important;
    max-width:100% !important;
  }

  html body #leistungen.section.services .leistungen-outro-text p{
    margin:0 0 calc(clamp(14px, calc(var(--about-peter-h) * .026), 27px) * var(--leistungen-copy-fit, 1)) !important;
    font-size:calc(clamp(12.6px, min(.95vw, calc(var(--about-peter-h) * .023)), 15.8px) * var(--leistungen-copy-fit, 1)) !important;
    line-height:1.48 !important;
    letter-spacing:.052em !important;
    color:#25262b !important;
    -webkit-text-fill-color:#25262b !important;
    text-shadow:none !important;
  }

  html body #leistungen.section.services .leistungen-outro-side{
    position:absolute !important;
    left:auto !important;
    right:var(--about-side-right) !important;
    top:var(--about-side-top) !important;
    bottom:auto !important;
    width:var(--about-side-w) !important;
    max-width:var(--about-side-w) !important;
    min-width:0 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-start !important;
    opacity:var(--leistungen-copy-progress, 1) !important;
    transform:translate3d(calc((1 - var(--leistungen-copy-progress, 1)) * 24px), calc((1 - var(--leistungen-copy-progress, 1)) * 14px), 0) !important;
    overflow:visible !important;
    pointer-events:none !important;
    z-index:5 !important;
  }

  html body #leistungen.section.services.theme-dark .leistungen-outro-side .leistungen-outro-quote,
  html body #leistungen.section.services.theme-dark .leistungen-outro-side .leistungen-outro-quote p,
  html body #leistungen.section.services .leistungen-outro-side .leistungen-outro-quote,
  html body #leistungen.section.services .leistungen-outro-side .leistungen-outro-quote p{
    color:#28262a !important;
    -webkit-text-fill-color:#28262a !important;
    text-shadow:none !important;
  }

  html body #leistungen.section.services .leistungen-outro-quote{
    margin:0 !important;
    width:100% !important;
    max-width:100% !important;
    font-family:"Playfair Display", var(--font-display-serif), var(--font-serif) !important;
    font-style:italic !important;
    font-weight:400 !important;
    font-size:clamp(18px, min(1.42vw, calc(var(--about-peter-h) * .030)), 29px) !important;
    line-height:1.18 !important;
    letter-spacing:-.012em !important;
    text-align:center !important;
    text-wrap:balance;
  }

  html body #leistungen.section.services .leistungen-outro-quote p{
    margin:0 !important;
  }

  html body #leistungen.section.services .leistungen-outro-side .about-references-seal{
    --about-seal-size:clamp(136px, calc(var(--about-peter-h) * .205), 220px);
    position:relative !important;
    inset:auto !important;
    width:var(--about-seal-size) !important;
    min-height:calc(var(--about-seal-size) + clamp(22px, 2.4svh, 32px)) !important;
    margin:clamp(42px, calc(var(--about-peter-h) * .082), 84px) auto 0 !important;
    opacity:1 !important;
    transform:scale(var(--about-seal-hover-scale, 1)) !important;
    pointer-events:auto !important;
  }

  html body #leistungen.section.services .leistungen-outro-social{
    position:absolute !important;
    left:var(--about-copy-left) !important;
    right:auto !important;
    top:auto !important;
    bottom:calc(var(--about-stage-bottom) * .70) !important;
    display:flex !important;
    flex-direction:row !important;
    justify-content:flex-start !important;
    align-items:center !important;
    gap:clamp(30px, calc(var(--about-peter-h) * .052), 54px) !important;
    transform:translate3d(0, calc((1 - var(--leistungen-social-progress, 1)) * 20px), 0) !important;
    pointer-events:auto !important;
    z-index:6 !important;
  }
}

@media (min-width:1101px) and (max-height:820px){
  html body #leistungen.section.services .leistungen-outro{
    --about-copy-gap:clamp(48px, calc(var(--about-peter-h) * .095), 82px);
    --about-side-top:calc(var(--about-stage-top) + calc(var(--about-peter-h) * .30));
    --about-side-w:clamp(205px, calc(var(--about-peter-h) * .33), 300px);
    --about-side-right:clamp(88px, 9.2vw, 162px);
  }

  html body #leistungen.section.services .leistungen-outro-title{
    font-size:calc(clamp(48px, min(5.1vw, calc(var(--about-peter-h) * .125)), 90px) * var(--leistungen-copy-fit, 1)) !important;
  }

  html body #leistungen.section.services .leistungen-outro-subtitle{
    margin-bottom:calc(clamp(18px, calc(var(--about-peter-h) * .034), 32px) * var(--leistungen-copy-fit, 1)) !important;
  }

  html body #leistungen.section.services .leistungen-outro-text p{
    margin-bottom:calc(clamp(12px, calc(var(--about-peter-h) * .020), 18px) * var(--leistungen-copy-fit, 1)) !important;
    font-size:calc(clamp(12px, min(.86vw, calc(var(--about-peter-h) * .020)), 14.6px) * var(--leistungen-copy-fit, 1)) !important;
    line-height:1.43 !important;
  }

  html body #leistungen.section.services .leistungen-outro-quote{
    font-size:clamp(17px, min(1.22vw, calc(var(--about-peter-h) * .026)), 25px) !important;
  }

  html body #leistungen.section.services .leistungen-outro-side .about-references-seal{
    --about-seal-size:clamp(126px, calc(var(--about-peter-h) * .18), 178px);
    margin-top:clamp(28px, calc(var(--about-peter-h) * .055), 48px) !important;
  }
}

/* v1.312e — Über-mich: one proportional desktop composition.
   Peter, main copy, quote/seal and social links now share one virtual design
   grid. The grid is scaled down by the stricter viewport axis, so either the
   15%/10% vertical Peter frame or the horizontal safety margin wins without
   letting the side column collide with the text. */
@media (min-width:1101px){
  html body #leistungen.section.services .leistungen-outro{
    /* Natural Peter PNG: 401 × 1045. The desktop design is based on this as
       one proportional unit and capped at the requested 1300px height. */
    --about-u:min(1.244px, calc(75svh / 1045), calc((100vw - 128px) / 1660));
    --about-peter-h:calc(var(--about-u) * 1045);
    --about-peter-w:calc(var(--about-u) * 401);
    --about-group-w:calc(var(--about-u) * 1660);
    --about-group-left:calc((100vw - var(--about-group-w)) / 2);
    --about-top-gap:calc((100svh - var(--about-peter-h)) * .60);
    --about-bottom-gap:calc((100svh - var(--about-peter-h)) * .40);
    --leistungen-copy-fit:1;
    overflow:hidden !important;
    background:radial-gradient(circle at 50% 47%, #ffffff 0%, #ffffff 38%, #f0f0f0 100%) !important;
  }

  html body #leistungen.section.services .leistungen-outro .about-bg-layer,
  html body #leistungen.section.services .leistungen-outro::before{
    background:radial-gradient(circle at 50% 47%, #ffffff 0%, #ffffff 38%, #f0f0f0 100%) !important;
  }

  html body #leistungen.section.services .leistungen-outro-visual{
    position:absolute !important;
    inset:auto !important;
    left:var(--about-group-left) !important;
    top:var(--about-top-gap) !important;
    width:var(--about-peter-w) !important;
    height:var(--about-peter-h) !important;
    max-width:none !important;
    max-height:1300px !important;
    padding:0 !important;
    display:flex !important;
    align-items:flex-start !important;
    justify-content:center !important;
    opacity:var(--leistungen-person-progress, 1) !important;
    transform:none !important;
    overflow:visible !important;
    z-index:3 !important;
  }

  html body #leistungen.section.services .leistungen-outro-person{
    display:block !important;
    height:100% !important;
    max-height:1300px !important;
    width:auto !important;
    max-width:none !important;
    min-width:0 !important;
    object-fit:contain !important;
    object-position:center top !important;
    margin:0 auto !important;
  }

  html body #leistungen.section.services .leistungen-outro-copy{
    position:absolute !important;
    inset:auto !important;
    left:calc(var(--about-group-left) + (var(--about-u) * 430)) !important;
    top:calc(var(--about-top-gap) + (var(--about-u) * 34)) !important;
    width:calc(var(--about-u) * 660) !important;
    max-width:calc(var(--about-u) * 660) !important;
    min-width:0 !important;
    height:auto !important;
    min-height:0 !important;
    padding:0 !important;
    display:block !important;
    overflow:visible !important;
    opacity:var(--leistungen-copy-progress, 1) !important;
    transform:translate3d(0, calc((1 - var(--leistungen-copy-progress, 1)) * 18px), 0) !important;
    z-index:4 !important;
  }

  html body #leistungen.section.services .leistungen-outro-copy-inner{
    position:relative !important;
    inset:auto !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    margin:0 !important;
    padding:0 !important;
    transform:none !important;
    overflow:visible !important;
  }

  html body #leistungen.section.services .leistungen-outro-title{
    margin:0 0 calc(var(--about-u) * 16) !important;
    width:100% !important;
    max-width:100% !important;
    font-size:calc(var(--about-u) * 104) !important;
    line-height:.86 !important;
    letter-spacing:-.014em !important;
    color:#5b421d !important;
    -webkit-text-fill-color:#5b421d !important;
    background:none !important;
    text-shadow:none !important;
  }

  html body #leistungen.section.services .leistungen-outro-title-line{
    display:block !important;
    white-space:nowrap !important;
  }

  html body #leistungen.section.services .leistungen-outro-subtitle{
    margin:0 0 calc(var(--about-u) * 44) !important;
    font-size:calc(var(--about-u) * 37) !important;
    line-height:1.02 !important;
    color:#35343a !important;
    -webkit-text-fill-color:#35343a !important;
    text-shadow:none !important;
  }

  html body #leistungen.section.services .leistungen-outro-text{
    width:100% !important;
    max-width:100% !important;
  }

  html body #leistungen.section.services .leistungen-outro-text p{
    margin:0 0 calc(var(--about-u) * 27) !important;
    font-size:calc(var(--about-u) * 18.6) !important;
    line-height:1.49 !important;
    letter-spacing:.048em !important;
    color:#25262b !important;
    -webkit-text-fill-color:#25262b !important;
    text-shadow:none !important;
  }

  html body #leistungen.section.services .leistungen-outro-text p:last-child{
    margin-bottom:0 !important;
  }

  html body #leistungen.section.services .leistungen-outro-side{
    position:absolute !important;
    inset:auto !important;
    left:calc(var(--about-group-left) + (var(--about-u) * 1235)) !important;
    right:auto !important;
    top:calc(var(--about-top-gap) + (var(--about-u) * 330)) !important;
    width:calc(var(--about-u) * 340) !important;
    max-width:calc(var(--about-u) * 340) !important;
    min-width:0 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-start !important;
    opacity:var(--leistungen-copy-progress, 1) !important;
    transform:translate3d(calc((1 - var(--leistungen-copy-progress, 1)) * 24px), calc((1 - var(--leistungen-copy-progress, 1)) * 14px), 0) !important;
    overflow:visible !important;
    pointer-events:none !important;
    z-index:5 !important;
  }

  html body #leistungen.section.services.theme-dark .leistungen-outro-side .leistungen-outro-quote,
  html body #leistungen.section.services.theme-dark .leistungen-outro-side .leistungen-outro-quote p,
  html body #leistungen.section.services .leistungen-outro-side .leistungen-outro-quote,
  html body #leistungen.section.services .leistungen-outro-side .leistungen-outro-quote p{
    color:#28262a !important;
    -webkit-text-fill-color:#28262a !important;
    text-shadow:none !important;
  }

  html body #leistungen.section.services .leistungen-outro-quote{
    margin:0 !important;
    width:100% !important;
    max-width:100% !important;
    font-family:"Playfair Display", var(--font-display-serif), var(--font-serif) !important;
    font-style:italic !important;
    font-weight:400 !important;
    font-size:calc(var(--about-u) * 28.5) !important;
    line-height:1.18 !important;
    letter-spacing:-.012em !important;
    text-align:center !important;
    text-wrap:balance;
  }

  html body #leistungen.section.services .leistungen-outro-quote p{
    margin:0 !important;
  }

  html body #leistungen.section.services .leistungen-outro-side .about-references-seal{
    --about-seal-size:calc(var(--about-u) * 220);
    position:relative !important;
    inset:auto !important;
    width:var(--about-seal-size) !important;
    min-height:calc(var(--about-seal-size) + (var(--about-u) * 35)) !important;
    margin:calc(var(--about-u) * 86) auto 0 !important;
    opacity:1 !important;
    transform:scale(var(--about-seal-hover-scale, 1)) !important;
    pointer-events:auto !important;
  }

  html body #leistungen.section.services .leistungen-outro-social{
    position:absolute !important;
    left:calc(var(--about-group-left) + (var(--about-u) * 430)) !important;
    right:auto !important;
    top:auto !important;
    bottom:calc(var(--about-bottom-gap) * .55) !important;
    display:flex !important;
    flex-direction:row !important;
    justify-content:flex-start !important;
    align-items:center !important;
    gap:calc(var(--about-u) * 76) !important;
    transform:translate3d(0, calc((1 - var(--leistungen-social-progress, 1)) * 20px), 0) !important;
    pointer-events:auto !important;
    z-index:6 !important;
  }

  html body #leistungen.section.services .leistungen-outro-social-link{
    font-size:calc(var(--about-u) * 18.5) !important;
    line-height:1 !important;
    color:#504d43 !important;
    -webkit-text-fill-color:#504d43 !important;
  }

  html body #leistungen.section.services .leistungen-outro-social-link img{
    width:calc(var(--about-u) * 32) !important;
    height:calc(var(--about-u) * 32) !important;
  }
}

@media (min-width:1101px) and (max-height:760px){
  html body #leistungen.section.services .leistungen-outro{
    --about-u:min(1.244px, calc(73svh / 1045), calc((100vw - 128px) / 1660));
  }
}

/* v1.312f — Über-mich: one shared proportional desktop unit from 901px upward.
   Fixes the 901–1100px regression where the side quote was laid over the main text.
   Peter, copy, quote/seal and social links now live on the same virtual 1660×1045
   composition. The unit is reduced by the stricter viewport axis, so the group never
   violates the horizontal safety margin and otherwise keeps Peter at 15% top / 10% bottom. */
@media (min-width:901px){
  html body #leistungen.section.services .leistungen-outro{
    --about-stage-safe-x:clamp(64px, 8vw, 128px);
    --about-u:min(1.244px, calc(75svh / 1045), calc((100vw - var(--about-stage-safe-x)) / 1660));
    --about-peter-h:calc(var(--about-u) * 1045);
    --about-peter-w:calc(var(--about-u) * 401);
    --about-group-w:calc(var(--about-u) * 1660);
    --about-group-left:calc((100vw - var(--about-group-w)) / 2);
    --about-top-gap:max(15svh, calc((100svh - var(--about-peter-h)) * .60));
    --about-bottom-gap:calc(100svh - var(--about-top-gap) - var(--about-peter-h));
    --leistungen-copy-fit:1;
    overflow:hidden !important;
    background:radial-gradient(circle at 50% 47%, #ffffff 0%, #ffffff 38%, #f0f0f0 100%) !important;
  }

  html body #leistungen.section.services .leistungen-outro .about-bg-layer,
  html body #leistungen.section.services .leistungen-outro::before{
    background:radial-gradient(circle at 50% 47%, #ffffff 0%, #ffffff 38%, #f0f0f0 100%) !important;
  }

  html body #leistungen.section.services .leistungen-outro-layout{
    position:absolute !important;
    inset:0 !important;
    display:block !important;
    overflow:visible !important;
    pointer-events:none !important;
  }

  html body #leistungen.section.services .leistungen-outro-visual{
    position:absolute !important;
    inset:auto !important;
    left:var(--about-group-left) !important;
    top:var(--about-top-gap) !important;
    width:var(--about-peter-w) !important;
    height:var(--about-peter-h) !important;
    max-width:none !important;
    max-height:1300px !important;
    padding:0 !important;
    display:flex !important;
    align-items:flex-start !important;
    justify-content:center !important;
    opacity:var(--leistungen-person-progress, 1) !important;
    transform:none !important;
    overflow:visible !important;
    z-index:3 !important;
  }

  html body #leistungen.section.services .leistungen-outro-person{
    display:block !important;
    height:100% !important;
    max-height:1300px !important;
    width:auto !important;
    max-width:none !important;
    min-width:0 !important;
    object-fit:contain !important;
    object-position:center top !important;
    margin:0 auto !important;
    filter:drop-shadow(0 26px 32px rgba(0,0,0,.18)) !important;
  }

  html body #leistungen.section.services .leistungen-outro-copy{
    position:absolute !important;
    inset:auto !important;
    left:calc(var(--about-group-left) + (var(--about-u) * 430)) !important;
    right:auto !important;
    top:calc(var(--about-top-gap) + (var(--about-u) * 34)) !important;
    bottom:auto !important;
    width:calc(var(--about-u) * 660) !important;
    max-width:calc(var(--about-u) * 660) !important;
    min-width:0 !important;
    height:auto !important;
    min-height:0 !important;
    padding:0 !important;
    display:block !important;
    overflow:visible !important;
    opacity:var(--leistungen-copy-progress, 1) !important;
    transform:translate3d(0, calc((1 - var(--leistungen-copy-progress, 1)) * 18px), 0) !important;
    z-index:4 !important;
  }

  html body #leistungen.section.services .leistungen-outro-copy-inner{
    position:relative !important;
    inset:auto !important;
    left:auto !important;
    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    margin:0 !important;
    padding:0 !important;
    transform:none !important;
    overflow:visible !important;
  }

  html body #leistungen.section.services .leistungen-outro-title{
    margin:0 0 calc(var(--about-u) * 16) !important;
    width:100% !important;
    max-width:100% !important;
    font-size:calc(var(--about-u) * 104) !important;
    line-height:.86 !important;
    letter-spacing:-.014em !important;
    color:#5b421d !important;
    -webkit-text-fill-color:#5b421d !important;
    background:none !important;
    filter:none !important;
    text-shadow:none !important;
  }

  html body #leistungen.section.services .leistungen-outro-title-line{
    display:block !important;
    white-space:nowrap !important;
  }

  html body #leistungen.section.services .leistungen-outro-subtitle{
    margin:0 0 calc(var(--about-u) * 44) !important;
    font-size:calc(var(--about-u) * 37) !important;
    line-height:1.02 !important;
    color:#35343a !important;
    -webkit-text-fill-color:#35343a !important;
    text-shadow:none !important;
  }

  html body #leistungen.section.services .leistungen-outro-text{
    width:100% !important;
    max-width:100% !important;
  }

  html body #leistungen.section.services .leistungen-outro-text p{
    margin:0 0 calc(var(--about-u) * 27) !important;
    font-size:calc(var(--about-u) * 18.6) !important;
    line-height:1.49 !important;
    letter-spacing:.048em !important;
    font-weight:500 !important;
    color:#25262b !important;
    -webkit-text-fill-color:#25262b !important;
    text-shadow:none !important;
  }

  html body #leistungen.section.services .leistungen-outro-text p:last-child{
    margin-bottom:0 !important;
  }

  html body #leistungen.section.services .leistungen-outro-side{
    position:absolute !important;
    inset:auto !important;
    left:calc(var(--about-group-left) + (var(--about-u) * 1235)) !important;
    right:auto !important;
    top:calc(var(--about-top-gap) + (var(--about-u) * 330)) !important;
    bottom:auto !important;
    width:calc(var(--about-u) * 340) !important;
    max-width:calc(var(--about-u) * 340) !important;
    min-width:0 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:0 !important;
    opacity:var(--leistungen-copy-progress, 1) !important;
    transform:translate3d(calc((1 - var(--leistungen-copy-progress, 1)) * 24px), calc((1 - var(--leistungen-copy-progress, 1)) * 14px), 0) !important;
    overflow:visible !important;
    pointer-events:none !important;
    z-index:5 !important;
  }

  html body #leistungen.section.services.theme-dark .leistungen-outro-side .leistungen-outro-quote,
  html body #leistungen.section.services.theme-dark .leistungen-outro-side .leistungen-outro-quote p,
  html body #leistungen.section.services .leistungen-outro-side .leistungen-outro-quote,
  html body #leistungen.section.services .leistungen-outro-side .leistungen-outro-quote p{
    color:#28262a !important;
    -webkit-text-fill-color:#28262a !important;
    text-shadow:none !important;
  }

  html body #leistungen.section.services .leistungen-outro-quote{
    margin:0 !important;
    width:100% !important;
    max-width:100% !important;
    font-family:"Playfair Display", var(--font-display-serif), var(--font-serif) !important;
    font-style:italic !important;
    font-weight:400 !important;
    font-size:calc(var(--about-u) * 28.5) !important;
    line-height:1.18 !important;
    letter-spacing:-.012em !important;
    text-align:center !important;
    text-wrap:balance;
  }

  html body #leistungen.section.services .leistungen-outro-quote p{
    margin:0 !important;
  }

  html body #leistungen.section.services .leistungen-outro-side .about-references-seal{
    --about-seal-size:calc(var(--about-u) * 220);
    position:relative !important;
    inset:auto !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;
    width:var(--about-seal-size) !important;
    max-width:var(--about-seal-size) !important;
    min-height:calc(var(--about-seal-size) + (var(--about-u) * 35)) !important;
    margin:calc(var(--about-u) * 86) auto 0 !important;
    padding:0 0 calc(var(--about-u) * 14) !important;
    opacity:1 !important;
    transform:scale(var(--about-seal-hover-scale, 1)) !important;
    pointer-events:auto !important;
    color:#5e5a52 !important;
    -webkit-text-fill-color:#5e5a52 !important;
  }

  html body #leistungen.section.services .leistungen-outro-side .about-references-seal-emblem{
    width:var(--about-seal-size) !important;
    height:var(--about-seal-size) !important;
  }

  html body #leistungen.section.services .leistungen-outro-side .about-references-seal-link{
    font-size:calc(var(--about-u) * 14.2) !important;
    color:#7b7469 !important;
    -webkit-text-fill-color:#7b7469 !important;
  }

  html body #leistungen.section.services .leistungen-outro-social{
    position:absolute !important;
    left:calc(var(--about-group-left) + (var(--about-u) * 430)) !important;
    right:auto !important;
    top:auto !important;
    bottom:calc(max(24px, var(--about-bottom-gap) * .55)) !important;
    width:auto !important;
    max-width:none !important;
    display:flex !important;
    flex-direction:row !important;
    justify-content:flex-start !important;
    align-items:center !important;
    gap:calc(var(--about-u) * 76) !important;
    padding:0 !important;
    opacity:var(--leistungen-social-progress, 1) !important;
    transform:translate3d(0, calc((1 - var(--leistungen-social-progress, 1)) * 20px), 0) !important;
    pointer-events:auto !important;
    z-index:6 !important;
  }

  html body #leistungen.section.services .leistungen-outro-social-link{
    font-size:calc(var(--about-u) * 18.5) !important;
    line-height:1 !important;
    color:#504d43 !important;
    -webkit-text-fill-color:#504d43 !important;
    opacity:.86 !important;
  }

  html body #leistungen.section.services .leistungen-outro-social-link img{
    width:calc(var(--about-u) * 32) !important;
    height:calc(var(--about-u) * 32) !important;
    opacity:.86 !important;
    filter:none !important;
  }
}

/* v1.313 — Transition-only fix: restore the scroll-driven fade between Leistungen and Über-mich.
   Keine Layout-/Positionsänderungen: Peter, Textblock, Zitat, Siegel und Social Links bleiben unverändert.
   Die radiale Über-mich-Fläche liegt wieder auf den vorhandenen Scroll-Variablen aus app.js. */
html body #leistungen.section.services .leistungen-outro{
  background:transparent !important;
}

html body #leistungen.section.services .leistungen-outro::before{
  opacity:var(--about-light-t, 0) !important;
  background:radial-gradient(circle at 50% 47%, #ffffff 0%, #ffffff 38%, #f0f0f0 100%) !important;
}

html body #leistungen.section.services .leistungen-outro .about-bg-layer{
  opacity:var(--about-bg-t, 0) !important;
  background:radial-gradient(circle at 50% 47%, #ffffff 0%, #ffffff 38%, #f0f0f0 100%) !important;
}

/* v1.314 — Über-mich: Peter sichtbar auf 15% / 10% skalieren.
   Die vorhandene proportionale 1660×1045-Komposition bleibt unverändert:
   Es wird nur die gemeinsame Skaleneinheit --about-u auf die sichtbare
   Personenhöhe statt auf die komplette PNG-Höhe inklusive Schatten bezogen. */
@media (min-width:901px){
  html body #leistungen.section.services .leistungen-outro{
    /* PNG: 401 × 1045; sichtbare Person ohne unteren Schattenbereich ca. 985px.
       Damit endet der sichtbare Peter bei vertikal ausreichendem Platz wieder
       ungefähr bei 10svh Abstand zum unteren Viewport, während die ganze
       Komposition proportional mitwächst. */
    --about-u:min(1.244px, calc(75svh / 985), calc((100vw - var(--about-stage-safe-x)) / 1660));
  }
}

/* v1.315 — Über-mich: Peter tatsächlich größer skalieren.
   v1.314 konnte in horizontal begrenzten Viewports wirkungslos bleiben, weil
   --about-u weiterhin durch die alte 1660er Sicherheitsbreite begrenzt wurde.
   Die Einheit nutzt jetzt die reale rechte Kante der sichtbaren Desktop-
   Komposition (1235 + 340 = 1575 Design-Einheiten), hält den oberen Abstand
   exakt bei 15svh und skaliert Text, Zitat, Siegel und Social Links weiter
   über dieselbe gemeinsame Variable --about-u proportional mit Peter. */
@media (min-width:901px){
  html body #leistungen.section.services .leistungen-outro{
    --about-stage-safe-x:clamp(48px, 6vw, 96px);
    --about-u:min(1.244px, 0.076142svh, calc((100vw - var(--about-stage-safe-x)) / 1575));
    --about-peter-h:calc(var(--about-u) * 1045);
    --about-peter-w:calc(var(--about-u) * 401);
    --about-group-w:calc(var(--about-u) * 1575);
    --about-group-left:calc((100vw - var(--about-group-w)) / 2);
    --about-top-gap:15svh;
    --about-bottom-gap:calc(100svh - var(--about-top-gap) - var(--about-peter-h));
  }
}

/* v1.316 — Über-mich: Peter ca. 8–10% größer und etwas weiter vom Textblock entfernt.
   Die bestehende proportionale Komposition bleibt erhalten: Textblock, Zitat,
   Siegel und Social Links skalieren weiter über dieselbe gemeinsame Einheit
   --about-u. Nur die Desktop-Skala, der vertikale Ansatz und Peters Abstand
   zum Text werden feinjustiert. */
@media (min-width:901px){
  html body #leistungen.section.services .leistungen-outro{
    --about-stage-safe-x:clamp(40px, 5vw, 88px);
    --about-u:min(1.244px, 0.0830svh, calc((100vw - var(--about-stage-safe-x)) / 1575));
    --about-peter-h:calc(var(--about-u) * 1045);
    --about-peter-w:calc(var(--about-u) * 401);
    --about-group-w:calc(var(--about-u) * 1575);
    --about-group-left:calc((100vw - var(--about-group-w)) / 2);
    --about-top-gap:10.8svh;
    --about-bottom-gap:calc(100svh - var(--about-top-gap) - var(--about-peter-h));
    --about-peter-shift:calc(var(--about-u) * 128);
  }

  html body #leistungen.section.services .leistungen-outro-visual{
    left:calc(var(--about-group-left) - var(--about-peter-shift)) !important;
    top:var(--about-top-gap) !important;
    width:var(--about-peter-w) !important;
    height:var(--about-peter-h) !important;
  }
}

/* v1.317 — Über-mich: sichtbare Gesamtkomposition horizontal zentrieren.
   Peter wird wieder etwas näher an den Haupttext geführt. Der sichtbare Block
   aus Peter, Haupttext und rechter Zitat-/Siegel-Spalte wird als Einheit
   zentriert und bei knapper Breite proportional verkleinert, sodass links und
   rechts mindestens ca. 10vw Abstand bleiben. Die vertikale Skalierung aus
   v1.316 bleibt erhalten. */
@media (min-width:901px){
  html body #leistungen.section.services .leistungen-outro{
    /* Design-Koordinaten:
       - Peter-Bildbox: 401 Einheiten breit
       - Haupttext beginnt bei 430
       - rechter Block endet bei 1235 + 340 = 1575
       - sichtbarer Peter beginnt in der PNG ungefähr 55 Einheiten nach der
         Bildbox-Kante. Mit 48 Einheiten Linksversatz ergibt sich eine sichtbare
         linke Blockkante bei +7 Einheiten relativ zu --about-group-left. */
    --about-peter-shift:calc(var(--about-u) * 48);
    --about-visible-left-x:7;
    --about-visible-w-units:1568;
    --about-u:min(1.244px, 0.0830svh, calc(80vw / 1568));
    --about-peter-h:calc(var(--about-u) * 1045);
    --about-peter-w:calc(var(--about-u) * 401);
    --about-group-w:calc(var(--about-u) * 1575);
    --about-visible-w:calc(var(--about-u) * 1568);
    --about-group-left:calc(((100vw - var(--about-visible-w)) / 2) - (var(--about-u) * 7));
    --about-top-gap:10.8svh;
    --about-bottom-gap:calc(100svh - var(--about-top-gap) - var(--about-peter-h));
  }

  html body #leistungen.section.services .leistungen-outro-visual{
    left:calc(var(--about-group-left) - var(--about-peter-shift)) !important;
    top:var(--about-top-gap) !important;
    width:var(--about-peter-w) !important;
    height:var(--about-peter-h) !important;
  }
}

/* v1.318 — Über-mich: Fließtext im mittleren Textblock optisch um ca. 1px vergrößern.
   Nur die Absatzschrift im Haupttext wird angepasst; Peter, Titel, Zitat,
   Siegel, Social Links und die proportionale Gesamtgeometrie bleiben unverändert. */
@media (min-width:901px){
  html body #leistungen.section.services .leistungen-outro-text p{
    font-size:calc(var(--about-u) * 19.4) !important;
  }
}

/* v1.320 — Über-mich: Fließtext im mittleren Textblock gegenüber v1.319
   optisch um ca. 1px reduzieren. Nur die Absatzschrift wird angepasst; Peter,
   Titel, Zitat, Siegel, Social Links und Gesamtgeometrie bleiben unverändert. */
@media (min-width:901px){
  html body #leistungen.section.services .leistungen-outro-text p{
    font-size:calc(var(--about-u) * 20.7) !important;
  }
}

/* v1.321 — Coverage: Fließtextgröße an den optimalen Über-mich-Fließtext angleichen.
   Nur die Absatzgrößen der Coverage-Fließtexte werden angepasst; Layout,
   Positionierung, Icons, Titel und Signatur bleiben unverändert. Die Größe
   nutzt dieselbe Desktop-Skala wie der Über-mich-Fließtext aus v1.320. */
@media (min-width:901px){
  .section.coverage{
    --coverage-body-size:calc(min(1.244px, 0.0830svh, calc(80vw / 1568)) * 20.7);
  }

  .section.coverage .coverage-statement,
  .section.coverage .coverage-statement p,
  .section.coverage .coverage-item-copy p{
    font-size:var(--coverage-body-size) !important;
  }
}

/* v1.322 — Coverage: tighten right icon/text stack and move left content down with it.
   Only desktop geometry is adjusted: the eyebrow stays fixed. The first right
   block moves 60px down, the last right block moves 60px up by shrinking the
   visible right-hand stage symmetrically. Title, statement and signature on
   the left move down by the same 60px so their top aligns with the first item. */
@media (min-width:901px){
  .section.coverage{
    --coverage-stack-tighten-y:60px;
  }

  .section.coverage .coverage-title{
    top:calc(var(--coverage-stage-top) + var(--coverage-stack-tighten-y)) !important;
  }

  .section.coverage .coverage-statement{
    top:calc(var(--coverage-stage-top) + var(--coverage-stack-tighten-y) + var(--coverage-title-block-space) + var(--coverage-title-copy-gap)) !important;
  }

  .section.coverage .coverage-copy{
    top:calc(var(--coverage-stage-top) + var(--coverage-stack-tighten-y)) !important;
    bottom:calc(var(--coverage-right-bottom) + var(--coverage-stack-tighten-y)) !important;
  }
}

/* v1.323 — Coverage: optische vertikale Zentrierung der rechten Icon-Text-Struktur.
   Der rechte Block wird als Ganzes leicht nach oben verschoben, ohne die in
   v1.322 erzeugte engere Stapelhöhe wieder aufzuheben: top wird um denselben
   Betrag kleiner und bottom größer. Der linke Titel-/Text-/Signaturblock folgt
   derselben Oberkante, sodass er oben bündig mit dem ersten rechten Item bleibt.
   .coverage-eyebrow bleibt unverändert. */
@media (min-width:901px){
  .section.coverage{
    --coverage-optical-center-y:clamp(26px, 3.1svh, 38px);
  }

  .section.coverage .coverage-title{
    top:calc(var(--coverage-stage-top) + var(--coverage-stack-tighten-y) - var(--coverage-optical-center-y)) !important;
  }

  .section.coverage .coverage-statement{
    top:calc(var(--coverage-stage-top) + var(--coverage-stack-tighten-y) - var(--coverage-optical-center-y) + var(--coverage-title-block-space) + var(--coverage-title-copy-gap)) !important;
  }

  .section.coverage .coverage-copy{
    top:calc(var(--coverage-stage-top) + var(--coverage-stack-tighten-y) - var(--coverage-optical-center-y)) !important;
    bottom:calc(var(--coverage-right-bottom) + var(--coverage-stack-tighten-y) + var(--coverage-optical-center-y)) !important;
  }
}

/* v1.324 — Kontakt: Titel/Form oben bündig, dunklere Headline und sichere Formhöhe.
   Nur die Contact-Sektion wird angepasst. Der Titel beginnt auf derselben
   Oberkante wie die rechte Formularspalte. Die Formularspalte wird bei
   niedriger Viewport-Höhe kompakter skaliert, damit zwischen Formularende und
   Footer-Band mindestens Luft bleibt und der Senden-Button nicht abgeschnitten
   wird. */
@media (min-width:901px){
  .section.contact.contact-v107{
    --contact-footer-height:27.7svh;
    --contact-main-top:clamp(156px, 20.8svh, 220px);
    --contact-right-scale:1;
  }

  .section.contact.contact-v107 .contact-main{
    height:calc(100svh - var(--contact-footer-height)) !important;
    min-height:0 !important;
    box-sizing:border-box !important;
    align-items:start !important;
    padding-top:var(--contact-main-top) !important;
    overflow:hidden !important;
  }

  .section.contact.contact-v107 .contact-left,
  .section.contact.contact-v107 .contact-right{
    align-self:start !important;
    transform:none !important;
  }

  .section.contact.contact-v107 .contact-right{
    transform:scale(var(--contact-right-scale)) !important;
    transform-origin:top right !important;
  }

  .section.contact.contact-v107 .contact-title{
    margin-top:0 !important;
    color:#082f63 !important;
    text-shadow:0 1px 0 rgba(255,255,255,.08) !important;
  }

  @supports ((-webkit-background-clip:text) or (background-clip:text)){
    .section.contact.contact-v107 .contact-title[data-headline-fx]{
      background-image:
        linear-gradient(90deg,
          rgba(3, 32, 78, .98) 0%,
          rgba(5, 48, 105, .96) 35%,
          rgba(10, 67, 139, .92) 68%,
          rgba(28, 91, 173, .86) 100%),
        radial-gradient(58vw 48vw at var(--reactive-x, 52vw) var(--reactive-y, 42vh),
          rgba(210, 226, 255, .58) 0%,
          rgba(126, 167, 238, .32) 24%,
          rgba(36, 92, 180, .16) 48%,
          rgba(8, 34, 82, 0) 74%),
        radial-gradient(76vw 62vw at var(--reactive-x-soft, 58vw) var(--reactive-y-soft, 48vh),
          rgba(180, 205, 255, .22) 0%,
          rgba(82, 128, 220, .13) 36%,
          rgba(8, 34, 82, 0) 76%);
      background-size:100% 100%, 100vw 100vh, 100vw 100vh;
      background-position:
        0 0,
        calc(-1 * var(--headline-view-x, 0px)) calc(-1 * var(--headline-view-y, 0px)),
        calc(-1 * var(--headline-view-x, 0px)) calc(-1 * var(--headline-view-y, 0px));
      filter:saturate(1.06) brightness(.92) contrast(1.08) !important;
    }

    .section.contact.contact-v107 .contact-title[data-headline-fx]:hover,
    .section.contact.contact-v107 .contact-title[data-headline-fx]:focus-visible{
      filter:saturate(1.12) brightness(1.02) contrast(1.08) !important;
    }
  }
}

@media (min-width:901px) and (max-height:1000px){
  .section.contact.contact-v107{
    --contact-main-top:clamp(136px, 17.6svh, 176px);
    --contact-right-scale:.90;
  }
}

@media (min-width:901px) and (max-height:860px){
  .section.contact.contact-v107{
    --contact-main-top:clamp(104px, 14.2svh, 132px);
    --contact-right-scale:.82;
  }
}

@media (min-width:901px) and (max-height:740px){
  .section.contact.contact-v107{
    --contact-main-top:86px;
    --contact-right-scale:.74;
  }
}

/* v1.325 — Kontakt: dunkler radialer Headline-Verlauf und weniger aggressive Formularskalierung.
   Der vorhandene Mouse-Over-/Reactive-Headline-Effekt bleibt erhalten: Nur die
   Grundfarbigkeit der geklippten Textfläche wird auf den gewünschten radialen
   Verlauf #2e4f89 / #416295 gesetzt. Die rechte Formularspalte wird nicht mehr
   unnötig stark verkleinert; die Desktop-Kompaktstufen zielen auf ca. 60px Luft
   zwischen Formularende und Footer-Band. */
@media (min-width:901px){
  .section.contact.contact-v107 .contact-title{
    color:#2e4f89 !important;
  }

  @supports ((-webkit-background-clip:text) or (background-clip:text)){
    .section.contact.contact-v107 .contact-title[data-headline-fx]{
      background-image:
        radial-gradient(118% 92% at 18% 18%,
          #416295 0%,
          #3a5b90 46%,
          #2e4f89 100%),
        radial-gradient(58vw 48vw at var(--reactive-x, 52vw) var(--reactive-y, 42vh),
          rgba(210, 226, 255, .45) 0%,
          rgba(126, 167, 238, .24) 24%,
          rgba(65, 98, 149, .13) 48%,
          rgba(46, 79, 137, 0) 74%),
        radial-gradient(76vw 62vw at var(--reactive-x-soft, 58vw) var(--reactive-y-soft, 48vh),
          rgba(180, 205, 255, .17) 0%,
          rgba(65, 98, 149, .11) 36%,
          rgba(46, 79, 137, 0) 76%) !important;
      background-size:100% 100%, 100vw 100vh, 100vw 100vh !important;
      background-position:
        0 0,
        calc(-1 * var(--headline-view-x, 0px)) calc(-1 * var(--headline-view-y, 0px)),
        calc(-1 * var(--headline-view-x, 0px)) calc(-1 * var(--headline-view-y, 0px)) !important;
      filter:saturate(1.04) brightness(1) contrast(1.04) !important;
    }

    .section.contact.contact-v107 .contact-title[data-headline-fx]:hover,
    .section.contact.contact-v107 .contact-title[data-headline-fx]:focus-visible{
      filter:saturate(1.10) brightness(1.06) contrast(1.05) !important;
    }
  }
}

@media (min-width:901px) and (max-height:1000px){
  .section.contact.contact-v107{
    --contact-main-top:clamp(124px, 16.3svh, 164px);
    --contact-right-scale:.94;
  }
}

@media (min-width:901px) and (max-height:860px){
  .section.contact.contact-v107{
    --contact-main-top:clamp(94px, 12.6svh, 118px);
    --contact-right-scale:.88;
  }
}

@media (min-width:901px) and (max-height:740px){
  .section.contact.contact-v107{
    --contact-main-top:76px;
    --contact-right-scale:.78;
  }
}

/* v1.326 — Kontakt: Formularhöhe nutzt den verfügbaren Raum bis 60px vor dem Footer.
   Die obere Bündigkeit von .contact-title und .contact-right bleibt erhalten. Der bisherige
   große Restabstand entstand, weil --contact-main-top bei großen Viewports gedeckelt war,
   während das Formular selbst eine nahezu feste Höhe behielt. Statt den ganzen Block nach
   unten zu schieben, wird nur die vertikale Luft im Formular proportional erweitert. */
@media (min-width:901px){
  .section.contact.contact-v107{
    --contact-footer-gap-target:60px;
    --contact-form-base-visual-h:374px;
    --contact-form-extra-y:max(0px, calc(72.3svh - var(--contact-main-top) - (var(--contact-form-base-visual-h) * var(--contact-right-scale)) - var(--contact-footer-gap-target)));
  }

  .section.contact.contact-v107 .contact-form-grid{
    margin-bottom:calc(36px + (var(--contact-form-extra-y) * .18)) !important;
  }

  .section.contact.contact-v107 .contact-field{
    gap:calc(26px + (var(--contact-form-extra-y) * .20)) !important;
  }

  .section.contact.contact-v107 .contact-field input,
  .section.contact.contact-v107 .contact-field textarea,
  .section.contact.contact-v107.theme-dark .contact-field input,
  .section.contact.contact-v107.theme-dark .contact-field textarea{
    padding-bottom:calc(11px + (var(--contact-form-extra-y) * .025)) !important;
  }

  .section.contact.contact-v107 .contact-field--message{
    margin-bottom:calc(24px + (var(--contact-form-extra-y) * .13)) !important;
  }

  .section.contact.contact-v107 .contact-note{
    margin-bottom:calc(24px + (var(--contact-form-extra-y) * .13)) !important;
  }

  .section.contact.contact-v107 .contact-consent{
    margin-bottom:calc(32px + (var(--contact-form-extra-y) * .13)) !important;
  }

  .section.contact.contact-v107 .contact-title{
    color:#2c69ab !important;
  }

  @supports ((-webkit-background-clip:text) or (background-clip:text)){
    .section.contact.contact-v107 .contact-title[data-headline-fx]{
      background-image:
        radial-gradient(118% 92% at 18% 18%,
          #327dbb 0%,
          #2f73b4 46%,
          #2c69ab 100%),
        radial-gradient(58vw 48vw at var(--reactive-x, 52vw) var(--reactive-y, 42vh),
          rgba(210, 226, 255, .45) 0%,
          rgba(126, 167, 238, .24) 24%,
          rgba(50, 125, 187, .13) 48%,
          rgba(44, 105, 171, 0) 74%),
        radial-gradient(76vw 62vw at var(--reactive-x-soft, 58vw) var(--reactive-y-soft, 48vh),
          rgba(180, 205, 255, .17) 0%,
          rgba(50, 125, 187, .11) 36%,
          rgba(44, 105, 171, 0) 76%) !important;
    }
  }
}

/* v1.326 — Feintuning für niedrigere Desktop-Höhen: Da .contact-right dort
   zusätzlich per transform skaliert wird, wird die Basishöhe etwas angepasst,
   damit der reale visuelle Abstand zum Footer-Band weiterhin bei ca. 60px liegt. */
@media (min-width:901px) and (max-height:1000px){
  .section.contact.contact-v107{--contact-form-base-visual-h:350px;}
}
@media (min-width:901px) and (max-height:860px){
  .section.contact.contact-v107{--contact-form-base-visual-h:346px;}
}
@media (min-width:901px) and (max-height:740px){
  .section.contact.contact-v107{--contact-form-base-visual-h:330px;}
}

/* v1.328 — Leistungen: Social-Media-Links im Outro ausblenden, ohne Markup zu entfernen. */
#leistungen.section.services .leistungen-outro-social{
  display:none !important;
}


/* v1.329 — Leistungen/Über-mich-Outro: Social Links robust ausblenden.
   v1.328 enthielt nur einen einfachen Selector am Dateiende. Zur Absicherung
   gegen alte spezifischere Outro-Regeln, JS-Klassen und gecachte Layoutpfade
   wird nun sowohl die Klasse als auch das Data-Attribut innerhalb #leistungen
   eindeutig ausgeblendet. Das Markup bleibt erhalten. */
html body #leistungen.section.services .leistungen-outro-social,
html body #leistungen.section.services [data-leistungen-outro-social]{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}


/* v1.330 — Kontakt/Über-mich: Headline-Farbverläufe und scrollabhängige Kontaktfarbe.
   Die Basisfarbe der Kontakt-Headline wird während des Einrollens der Kontakt-Sektion
   per JS in Richtung eines leichten Violetts interpoliert und endet in der angepinnten
   Position bei #4689d0 / #6575bd. Die bestehenden pointer-/hover-reactive Layer bleiben
   als transparente Overlays erhalten. Die Über-mich-Headline erhält analog den blauen
   Verlauf #2c69ab / #327dbb, ohne Layout oder Headline-FX-Mechanik zu verändern. */
.section.contact.contact-v107 .contact-title{
  --contact-title-left-color:#4689d0;
  --contact-title-right-color:#6575bd;
  color:#4689d0 !important;
}

@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .section.contact.contact-v107 .contact-title[data-headline-fx]{
    background-image:
      radial-gradient(58vw 48vw at var(--reactive-x, 52vw) var(--reactive-y, 42vh),
        rgba(222, 232, 255, .42) 0%,
        rgba(146, 174, 246, .24) 24%,
        rgba(101, 117, 189, .13) 48%,
        rgba(70, 137, 208, 0) 74%),
      radial-gradient(76vw 62vw at var(--reactive-x-soft, 58vw) var(--reactive-y-soft, 48vh),
        rgba(210, 218, 255, .18) 0%,
        rgba(116, 132, 212, .11) 36%,
        rgba(70, 137, 208, 0) 76%),
      linear-gradient(90deg,
        var(--contact-title-left-color, #4689d0) 0%,
        var(--contact-title-right-color, #6575bd) 100%) !important;
    background-size:100vw 100vh, 100vw 100vh, 100% 100% !important;
    background-position:
      calc(-1 * var(--headline-view-x, 0px)) calc(-1 * var(--headline-view-y, 0px)),
      calc(-1 * var(--headline-view-x, 0px)) calc(-1 * var(--headline-view-y, 0px)),
      0 0 !important;
    background-repeat:no-repeat !important;
    -webkit-background-clip:text !important;
    background-clip:text !important;
    -webkit-text-fill-color:transparent !important;
    color:transparent !important;
    filter:saturate(1.04) brightness(1.01) contrast(1.04) !important;
  }

  .section.contact.contact-v107 .contact-title[data-headline-fx]:hover,
  .section.contact.contact-v107 .contact-title[data-headline-fx]:focus-visible{
    filter:saturate(1.14) brightness(1.07) contrast(1.05) !important;
  }

  html body #leistungen.section.services .leistungen-outro-title[data-headline-fx]{
    color:#2c69ab !important;
    background-image:
      radial-gradient(64vw 54vw at var(--reactive-x, 52vw) var(--reactive-y, 42vh),
        rgba(220, 235, 255, .40) 0%,
        rgba(122, 181, 238, .25) 20%,
        rgba(50, 125, 187, .12) 44%,
        rgba(44, 105, 171, 0) 76%),
      radial-gradient(86vw 74vw at var(--reactive-x-soft, 58vw) var(--reactive-y-soft, 48vh),
        rgba(200, 224, 255, .17) 0%,
        rgba(75, 145, 215, .11) 36%,
        rgba(44, 105, 171, 0) 78%),
      linear-gradient(90deg,
        #2c69ab 0%,
        #327dbb 100%) !important;
    background-size:100vw 100vh, 100vw 100vh, 100% 100% !important;
    background-position:
      calc(-1 * var(--headline-view-x, 0px)) calc(-1 * var(--headline-view-y, 0px)),
      calc(-1 * var(--headline-view-x, 0px)) calc(-1 * var(--headline-view-y, 0px)),
      0 0 !important;
    background-repeat:no-repeat !important;
    -webkit-background-clip:text !important;
    background-clip:text !important;
    -webkit-text-fill-color:transparent !important;
    color:transparent !important;
    filter:saturate(1.04) brightness(1.01) contrast(1.04) !important;
    text-shadow:none !important;
  }

  html body #leistungen.section.services .leistungen-outro-title[data-headline-fx] .leistungen-outro-title-line{
    background-image:inherit !important;
    background-size:inherit !important;
    background-position:inherit !important;
    background-repeat:inherit !important;
    -webkit-background-clip:text !important;
    background-clip:text !important;
    -webkit-text-fill-color:transparent !important;
    color:transparent !important;
  }

  html body #leistungen.section.services .leistungen-outro-title[data-headline-fx]:hover,
  html body #leistungen.section.services .leistungen-outro-title[data-headline-fx]:focus-visible{
    filter:saturate(1.12) brightness(1.07) contrast(1.05) !important;
  }
}


/* v1.331 — Über-mich: luxuriöser Goldverlauf für .leistungen-outro-title.
   Nur Farb-/FX-Layer der Headline werden überschrieben. Layout, Größen,
   Scroll-Logik und der bestehende Mouse-Over-/Reactive-Headline-Effekt bleiben erhalten. */
html body #leistungen.section.services .leistungen-outro-title[data-headline-fx]{
  color:#b88a36 !important;
  text-shadow:none !important;
}

@supports ((-webkit-background-clip:text) or (background-clip:text)){
  html body #leistungen.section.services .leistungen-outro-title[data-headline-fx]{
    background-image:
      radial-gradient(60vw 50vw at var(--reactive-x, 52vw) var(--reactive-y, 42vh),
        rgba(255, 241, 190, .54) 0%,
        rgba(230, 186, 89, .32) 20%,
        rgba(169, 112, 38, .14) 44%,
        rgba(120, 78, 24, 0) 76%),
      radial-gradient(82vw 70vw at var(--reactive-x-soft, 58vw) var(--reactive-y-soft, 48vh),
        rgba(255, 231, 157, .22) 0%,
        rgba(202, 148, 54, .13) 34%,
        rgba(120, 78, 24, 0) 78%),
      linear-gradient(105deg,
        #8a6325 0%,
        #b88935 24%,
        #e7c56e 48%,
        #c2933a 70%,
        #7a5520 100%) !important;
    background-size:100vw 100vh, 100vw 100vh, 100% 100% !important;
    background-position:
      calc(-1 * var(--headline-view-x, 0px)) calc(-1 * var(--headline-view-y, 0px)),
      calc(-1 * var(--headline-view-x, 0px)) calc(-1 * var(--headline-view-y, 0px)),
      0 0 !important;
    background-repeat:no-repeat !important;
    -webkit-background-clip:text !important;
    background-clip:text !important;
    -webkit-text-fill-color:transparent !important;
    color:transparent !important;
    filter:saturate(1.05) brightness(1.02) contrast(1.06) !important;
  }

  html body #leistungen.section.services .leistungen-outro-title[data-headline-fx] .leistungen-outro-title-line{
    background-image:inherit !important;
    background-size:inherit !important;
    background-position:inherit !important;
    background-repeat:inherit !important;
    -webkit-background-clip:text !important;
    background-clip:text !important;
    -webkit-text-fill-color:transparent !important;
    color:transparent !important;
  }

  html body #leistungen.section.services .leistungen-outro-title[data-headline-fx]:hover,
  html body #leistungen.section.services .leistungen-outro-title[data-headline-fx]:focus-visible{
    filter:saturate(1.18) brightness(1.10) contrast(1.08) !important;
  }
}

/* v1.332 — Über-mich: Goldverlauf etwas dunkler gesetzt.
   Nur der Farb-/FX-Layer der .leistungen-outro-title wird überschrieben;
   Layout, Größen, Positionen und der bestehende Mouse-Over-/Reactive-Effekt bleiben unverändert. */
html body #leistungen.section.services .leistungen-outro-title[data-headline-fx]{
  color:#8f6728 !important;
  text-shadow:none !important;
}

@supports ((-webkit-background-clip:text) or (background-clip:text)){
  html body #leistungen.section.services .leistungen-outro-title[data-headline-fx]{
    background-image:
      radial-gradient(60vw 50vw at var(--reactive-x, 52vw) var(--reactive-y, 42vh),
        rgba(231, 204, 128, .42) 0%,
        rgba(181, 128, 42, .28) 20%,
        rgba(122, 78, 24, .14) 44%,
        rgba(77, 49, 14, 0) 76%),
      radial-gradient(82vw 70vw at var(--reactive-x-soft, 58vw) var(--reactive-y-soft, 48vh),
        rgba(218, 181, 94, .18) 0%,
        rgba(145, 94, 25, .12) 34%,
        rgba(77, 49, 14, 0) 78%),
      linear-gradient(105deg,
        #624318 0%,
        #8b6425 25%,
        #c19a4a 48%,
        #98702a 70%,
        #523715 100%) !important;
    background-size:100vw 100vh, 100vw 100vh, 100% 100% !important;
    background-position:
      calc(-1 * var(--headline-view-x, 0px)) calc(-1 * var(--headline-view-y, 0px)),
      calc(-1 * var(--headline-view-x, 0px)) calc(-1 * var(--headline-view-y, 0px)),
      0 0 !important;
    background-repeat:no-repeat !important;
    -webkit-background-clip:text !important;
    background-clip:text !important;
    -webkit-text-fill-color:transparent !important;
    color:transparent !important;
    filter:saturate(1.06) brightness(.94) contrast(1.10) !important;
  }

  html body #leistungen.section.services .leistungen-outro-title[data-headline-fx] .leistungen-outro-title-line{
    background-image:inherit !important;
    background-size:inherit !important;
    background-position:inherit !important;
    background-repeat:inherit !important;
    -webkit-background-clip:text !important;
    background-clip:text !important;
    -webkit-text-fill-color:transparent !important;
    color:transparent !important;
  }

  html body #leistungen.section.services .leistungen-outro-title[data-headline-fx]:hover,
  html body #leistungen.section.services .leistungen-outro-title[data-headline-fx]:focus-visible{
    filter:saturate(1.18) brightness(1.03) contrast(1.12) !important;
  }
}

/* v1.333 — Coverage/Kontakt: Coverage-Signatur 15px höher; Kontakt-Headline-Hover weicher und dunkler.
   Ursache des abrupten Kontakt-Effekts: Der Hover-Zustand änderte bisher den Filter sofort,
   wodurch der ohnehin helle geklippte Reactive-Layer schlagartig stärker wirkte. Der Layer bleibt
   erhalten, wird aber dunkler dosiert und der Filterwechsel bekommt eine weichere Transition. */
.section.coverage .coverage-statement .coverage-signature{
  transform:translateY(-15px) !important;
}

@media (min-width:901px){
  .section.contact.contact-v107 .contact-title[data-headline-fx]{
    transition:
      filter 820ms cubic-bezier(.22, 1, .36, 1),
      text-shadow 820ms cubic-bezier(.22, 1, .36, 1) !important;
  }

  @supports ((-webkit-background-clip:text) or (background-clip:text)){
    html body .section.contact.contact-v107 .contact-title[data-headline-fx]{
      background-image:
        radial-gradient(58vw 48vw at var(--reactive-x, 52vw) var(--reactive-y, 42vh),
          rgba(205, 219, 255, .24) 0%,
          rgba(138, 157, 226, .15) 24%,
          rgba(101, 117, 189, .08) 48%,
          rgba(70, 137, 208, 0) 74%),
        radial-gradient(76vw 62vw at var(--reactive-x-soft, 58vw) var(--reactive-y-soft, 48vh),
          rgba(190, 199, 248, .10) 0%,
          rgba(103, 118, 198, .07) 36%,
          rgba(70, 137, 208, 0) 76%),
        linear-gradient(90deg,
          var(--contact-title-left-color, #4689d0) 0%,
          var(--contact-title-right-color, #6575bd) 100%) !important;
      background-size:100vw 100vh, 100vw 100vh, 100% 100% !important;
      background-position:
        calc(-1 * var(--headline-view-x, 0px)) calc(-1 * var(--headline-view-y, 0px)),
        calc(-1 * var(--headline-view-x, 0px)) calc(-1 * var(--headline-view-y, 0px)),
        0 0 !important;
      background-repeat:no-repeat !important;
      -webkit-background-clip:text !important;
      background-clip:text !important;
      -webkit-text-fill-color:transparent !important;
      color:transparent !important;
      filter:saturate(1.01) brightness(.95) contrast(1.07) !important;
    }

    html body .section.contact.contact-v107 .contact-title[data-headline-fx]:hover,
    html body .section.contact.contact-v107 .contact-title[data-headline-fx]:focus-visible{
      filter:saturate(1.07) brightness(.985) contrast(1.09) !important;
    }
  }
}


/* v1.334 — Referenzen: Kacheln in tieferem Haptia-Blau, dezente 5px-Abrundung, feineres Plus-Symbol.
   Nur die Referenzen-Teaser-Kacheln und ihr Plus-Icon werden überschrieben. */
body.references-page .references-teaser,
body.references-page .references-teaser.is-featured{
  background-color:#1f4187 !important;
  background-image:linear-gradient(135deg,
    #1e4387 0%,
    #214b91 58%,
    #28589d 100%) !important;
  border-radius:5px !important;
  overflow:hidden !important;
}

body.references-page .references-teaser:hover,
body.references-page .references-teaser:focus-visible,
body.references-page .references-teaser.is-featured:hover,
body.references-page .references-teaser.is-featured:focus-visible{
  background-color:#ffffff !important;
  background-image:none !important;
  color:#111111 !important;
}

body.references-page .references-teaser:focus-visible{
  outline:1.5px solid rgba(31, 65, 135, .72) !important;
  outline-offset:-1.5px !important;
}

body.references-page .references-teaser-plus{
  border:1.25px solid currentColor !important;
  border-radius:5px !important;
  font-size:0 !important;
  font-weight:300 !important;
  line-height:1 !important;
}

body.references-page .references-teaser-plus::before,
body.references-page .references-teaser-plus::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:clamp(18px, 1.55vw, 23px);
  height:1.45px;
  border-radius:999px;
  background:currentColor;
  transform:translate(-50%, -50%);
}

body.references-page .references-teaser-plus::after{
  transform:translate(-50%, -50%) rotate(90deg);
}

body.references-page .references-teaser:hover .references-teaser-plus,
body.references-page .references-teaser:focus-visible .references-teaser-plus,
body.references-page .references-teaser.is-featured:hover .references-teaser-plus,
body.references-page .references-teaser.is-featured:focus-visible .references-teaser-plus{
  color:#1f4187 !important;
}


/* v1.335 — Referenzen-Menü: einzelne Menüpunkte über den blauen Referenzkacheln hell darstellen.
   Die JS-Kontrastlogik setzt .on-dark nur für die Links, deren Mittelpunkt über dem dunklen
   Kachelbereich liegt; die oberen Links über dem hellen Intro bleiben dunkelblau. */
body.references-page .menu .menu-links a.on-dark,
body.references-page .menu .menu-legal.on-dark{
  color:var(--menu-link-on-dark) !important;
  text-shadow:0 2px 18px rgba(0,0,0,.24) !important;
}

body.references-page .menu .menu-links a.on-light,
body.references-page .menu .menu-legal.on-light{
  color:var(--menu-link-on-light) !important;
  text-shadow:0 2px 18px rgba(255,255,255,.14) !important;
}

/* v1.336 — Referenzen: Einzelreferenzen in einem Pop-up gemäß Illustration statt Seitenwechsel. */
html.has-reference-modal-open,
body.has-reference-modal-open{
  overscroll-behavior:none;
}

.references-modal{
  position:fixed;
  inset:0;
  z-index:120;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(18px, 2.1vw, 26px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity 380ms cubic-bezier(.22,.61,.36,1), visibility 0s linear 380ms;
}

.references-modal.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:opacity 430ms cubic-bezier(.22,.61,.36,1), visibility 0s linear 0s;
}

.references-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(242,242,242,.10);
  -webkit-backdrop-filter:blur(1.5px) brightness(1.02);
  backdrop-filter:blur(1.5px) brightness(1.02);
}

.references-modal-panel{
  position:relative;
  width:min(1540px, calc(100vw - clamp(36px, 4.2vw, 52px)));
  height:min(948px, calc(100svh - clamp(36px, 4.4vw, 54px)));
  min-height:560px;
  border-radius:clamp(15px, 1.25vw, 21px);
  background:#ffffff;
  color:#111111;
  overflow:hidden;
  isolation:isolate;
  box-shadow:0 24px 70px rgba(13, 38, 72, .11);
  transform:translate3d(0, 18px, 0) scale(.985);
  transition:transform 430ms cubic-bezier(.22,.61,.36,1);
}

.references-modal.is-open .references-modal-panel{
  transform:translate3d(0, 0, 0) scale(1);
}

.references-modal-panel:focus{
  outline:none;
}

.references-modal-bg{
  position:absolute;
  z-index:0;
  left:0;
  bottom:0;
  width:min(52%, 780px);
  height:83%;
  background-image:url('/assets/img/BG_ref.jpg');
  background-repeat:no-repeat;
  background-position:left bottom;
  background-size:contain;
  opacity:.88;
  pointer-events:none;
}

.references-modal-bg::after{
  content:"";
  position:absolute;
  inset:-1px;
  background:
    linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.12) 42%, rgba(255,255,255,.78) 74%, #ffffff 100%),
    linear-gradient(0deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.15) 38%, rgba(255,255,255,.64) 80%, #ffffff 100%);
  pointer-events:none;
}

.references-modal-layout{
  position:relative;
  z-index:2;
  height:100%;
  display:grid;
  grid-template-columns:minmax(300px, .56fr) minmax(410px, 1fr);
  column-gap:clamp(82px, 7vw, 122px);
  padding:
    clamp(92px, 11.2vh, 124px)
    clamp(142px, 10.9vw, 224px)
    clamp(84px, 9.2vh, 118px)
    clamp(190px, 14.8vw, 230px);
  box-sizing:border-box;
}

.references-modal-heading{
  align-self:start;
  max-width:390px;
  color:#2a5d9a;
}

.references-modal-title{
  margin:0;
  font-family:var(--font-sans);
  font-size:clamp(30px, 2.35vw, 45px);
  line-height:1.08;
  letter-spacing:.085em;
  font-weight:500;
  color:#2b64a3;
  text-wrap:balance;
}

.references-modal-meta{
  margin:clamp(28px, 3.8vh, 46px) 0 0;
  font-family:var(--font-sans);
  font-size:clamp(14px, 1.03vw, 18px);
  line-height:1.15;
  letter-spacing:.01em;
  font-weight:400;
  color:rgba(0,0,0,.68);
}

.references-modal-content{
  align-self:start;
  justify-self:stretch;
  max-width:min(620px, 100%);
  max-height:calc(100% - clamp(160px, 16vh, 190px));
  margin-top:clamp(170px, 21vh, 205px);
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:rgba(31,65,135,.30) rgba(31,65,135,.06);
  padding-right:clamp(12px, 1.4vw, 22px);
}

.references-modal-content::-webkit-scrollbar{
  width:6px;
}

.references-modal-content::-webkit-scrollbar-track{
  background:rgba(31,65,135,.06);
  border-radius:999px;
}

.references-modal-content::-webkit-scrollbar-thumb{
  background:rgba(31,65,135,.28);
  border-radius:999px;
}

.references-modal-content:focus{
  outline:none;
}

.references-modal-content:focus-visible{
  outline:1.5px solid rgba(31,65,135,.22);
  outline-offset:8px;
}

.references-modal-text{
  font-family:var(--font-sans);
  font-size:clamp(14.5px, .98vw, 17.5px);
  line-height:1.43;
  letter-spacing:.105em;
  font-weight:600;
  color:#111111;
}

.references-modal-text p,
.references-modal-text ul{
  margin:0 0 clamp(22px, 2.8vh, 34px);
}

.references-modal-text ul{
  padding-left:1.15em;
}

.references-modal-text li{
  margin:.25em 0;
}

.references-modal-close{
  position:absolute;
  z-index:5;
  top:clamp(48px, 5.3vh, 68px);
  right:clamp(48px, 4.8vw, 72px);
  width:clamp(44px, 4vw, 62px);
  height:clamp(44px, 4vw, 62px);
  border:0;
  border-radius:999px;
  background:transparent;
  color:#1f5d9d;
  cursor:pointer;
}

.references-modal-close span,
.references-modal-close span::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:clamp(44px, 3.7vw, 58px);
  height:clamp(2px, .18vw, 3px);
  border-radius:999px;
  background:currentColor;
  transform:translate(-50%, -50%) rotate(45deg);
}

.references-modal-close span::before{
  transform:translate(-50%, -50%) rotate(-90deg);
}

.references-modal-close:hover,
.references-modal-close:focus-visible{
  color:#123e78;
}

.references-modal-close:focus-visible{
  outline:1.5px solid rgba(31,65,135,.35);
  outline-offset:7px;
}

.references-modal-arrow{
  position:absolute;
  z-index:5;
  top:50%;
  width:clamp(58px, 5.2vw, 78px);
  height:clamp(58px, 5.2vw, 78px);
  border:0;
  border-radius:999px;
  background:transparent;
  color:#2a64a4;
  cursor:pointer;
  transform:translateY(-50%);
  transition:color 220ms ease, transform 220ms ease, opacity 220ms ease;
}

.references-modal-arrow:hover,
.references-modal-arrow:focus-visible{
  color:#143f77;
  transform:translateY(-50%) scale(1.035);
}

.references-modal-arrow:focus-visible{
  outline:1.5px solid rgba(31,65,135,.28);
  outline-offset:6px;
}

.references-modal-arrow--prev{
  left:clamp(42px, 4.9vw, 82px);
}

.references-modal-arrow--next{
  right:clamp(42px, 4.9vw, 82px);
}

.references-modal-arrow span{
  position:absolute;
  left:50%;
  top:50%;
  display:block;
  width:clamp(34px, 3.4vw, 54px);
  height:clamp(34px, 3.4vw, 54px);
  border-style:solid;
  border-color:currentColor;
  border-width:0 0 clamp(2.2px, .22vw, 3.4px) clamp(2.2px, .22vw, 3.4px);
  transform-origin:center;
}

.references-modal-arrow--prev span{
  transform:translate(-35%, -50%) rotate(45deg);
}

.references-modal-arrow--next span{
  transform:translate(-65%, -50%) rotate(225deg);
}

@media (max-width: 1100px){
  .references-modal-panel{
    height:min(948px, calc(100svh - 32px));
    min-height:0;
  }

  .references-modal-layout{
    grid-template-columns:1fr;
    row-gap:24px;
    padding:92px clamp(52px, 9vw, 96px) 72px;
  }

  .references-modal-heading{
    max-width:min(560px, 82%);
  }

  .references-modal-content{
    margin-top:0;
    max-width:100%;
    max-height:calc(100% - 210px);
  }

  .references-modal-bg{
    width:min(68%, 620px);
    height:57%;
    opacity:.36;
  }
}

@media (max-width: 720px){
  .references-modal{
    padding:10px;
  }

  .references-modal-panel{
    width:calc(100vw - 20px);
    height:calc(100svh - 20px);
    border-radius:15px;
  }

  .references-modal-layout{
    padding:76px 26px 52px;
  }

  .references-modal-title{
    font-size:clamp(25px, 7.6vw, 36px);
  }

  .references-modal-meta{
    margin-top:18px;
  }

  .references-modal-content{
    max-height:calc(100% - 178px);
    padding-right:10px;
  }

  .references-modal-text{
    font-size:14px;
    letter-spacing:.055em;
    line-height:1.48;
  }

  .references-modal-close{
    top:18px;
    right:18px;
  }

  .references-modal-arrow{
    top:auto;
    bottom:16px;
    width:48px;
    height:48px;
  }

  .references-modal-arrow--prev{
    left:24px;
  }

  .references-modal-arrow--next{
    right:24px;
  }

  .references-modal-arrow span{
    width:28px;
    height:28px;
  }
}

@media (prefers-reduced-motion: reduce){
  .references-modal,
  .references-modal-panel,
  .references-modal-arrow{
    transition:none !important;
  }
}


/* v1.337 — Referenz-Pop-up: neues Bild, unsichtbarer Smooth-Scroll und höherer Scrollbereich. */
.references-modal-content{
  scroll-behavior:smooth;
  scrollbar-width:none !important;
  -ms-overflow-style:none !important;
}

.references-modal-content::-webkit-scrollbar{
  width:0 !important;
  height:0 !important;
  display:none !important;
}

@media (min-width: 1101px){
  .references-modal-bg{
    width:min(62.4%, 936px);
    height:99.6%;
    background-image:url('/assets/img/BG_ref2.jpg');
  }

  .references-modal-content{
    align-self:stretch;
    margin-top:0;
    height:100%;
    max-height:none;
    min-height:0;
    box-sizing:border-box;
    padding-top:clamp(170px, 21vh, 205px);
    padding-bottom:clamp(18px, 2.1vh, 26px);
  }
}

@media (max-width: 1100px){
  .references-modal-bg{
    background-image:url('/assets/img/BG_ref2.jpg');
    width:min(81.6%, 744px);
    height:68.4%;
  }
}


/* v1.338 — Referenz-Pop-up: normales Wheel-Scrolling, edler Inhaltswechsel und fixierte Meta-Achse. */
.references-modal-title,
.references-modal-meta,
.references-modal-text{
  transition:
    opacity 260ms cubic-bezier(.22,.61,.36,1),
    transform 260ms cubic-bezier(.22,.61,.36,1);
}

.references-modal.is-reference-switching .references-modal-title,
.references-modal.is-reference-switching .references-modal-meta,
.references-modal.is-reference-switching .references-modal-text{
  opacity:0;
  transform:translate3d(0, 8px, 0);
}

.references-modal-content{
  scroll-behavior:smooth;
}

@media (min-width: 1101px){
  .references-modal-layout{
    --references-modal-meta-y:clamp(170px, 21vh, 205px);
    --references-modal-title-meta-gap:clamp(28px, 3.8vh, 46px);
  }

  .references-modal-heading{
    position:relative;
    align-self:stretch;
    height:100%;
    min-height:0;
  }

  .references-modal-title{
    position:absolute;
    left:0;
    bottom:calc(100% - var(--references-modal-meta-y) + var(--references-modal-title-meta-gap));
    width:100%;
    max-width:390px;
  }

  .references-modal-meta{
    position:absolute;
    left:0;
    top:var(--references-modal-meta-y);
    margin:0;
  }

  .references-modal-content{
    align-self:stretch;
    margin-top:0;
    height:100%;
    max-height:none;
    min-height:0;
    box-sizing:border-box;
    padding-top:var(--references-modal-meta-y);
    padding-bottom:clamp(18px, 2.1vh, 26px);
  }
}

@media (prefers-reduced-motion: reduce){
  .references-modal-title,
  .references-modal-meta,
  .references-modal-text{
    transition:none !important;
  }
}

/* v1.339 — Referenz-Pop-up: zentrierte Inhaltsachse, smoothes Modal-Scrolling und reiner Fade beim Wechsel. */
.references-modal-title,
.references-modal-meta,
.references-modal-text{
  transition:opacity 320ms cubic-bezier(.22,.61,.36,1) !important;
  transform:none !important;
}

.references-modal.is-reference-switching .references-modal-title,
.references-modal.is-reference-switching .references-modal-meta,
.references-modal.is-reference-switching .references-modal-text{
  opacity:0;
  transform:none !important;
}

@media (min-width: 1101px){
  .references-modal-layout{
    width:min(1122px, calc(100% - clamp(260px, 18vw, 330px)));
    margin-inline:auto;
    padding:
      clamp(92px, 11.2vh, 124px)
      0
      clamp(84px, 9.2vh, 118px)
      0;
    grid-template-columns:minmax(285px, .42fr) minmax(430px, .58fr);
    column-gap:clamp(82px, 6.8vw, 112px);
  }

  .references-modal-heading{
    max-width:none;
  }

  .references-modal-title{
    max-width:410px;
  }

  .references-modal-content{
    max-width:620px;
    width:100%;
    justify-self:start;
  }
}


/* v1.341 — Referenz-Pop-up: Inhaltsblock höher, Close-Button wie Leistungen-Detail, Text wie Über-mich. */
@media (min-width:1101px){
  .references-modal-layout{
    --references-modal-content-lift:80px;
    padding-top:calc(clamp(92px, 11.2vh, 124px) - var(--references-modal-content-lift)) !important;
  }

  .references-modal-text{
    --references-modal-text-u:min(1.244px, 0.0830svh, calc(80vw / 1568));
    font-family:var(--font-sans) !important;
    font-size:calc(var(--references-modal-text-u) * 20.7) !important;
    line-height:1.49 !important;
    letter-spacing:.048em !important;
    font-weight:500 !important;
    color:#25262b !important;
    -webkit-text-fill-color:#25262b !important;
    text-shadow:none !important;
  }

  .references-modal-text p,
  .references-modal-text ul,
  .references-modal-text li{
    font-family:var(--font-sans) !important;
    font-size:inherit !important;
    line-height:inherit !important;
    letter-spacing:inherit !important;
    font-weight:inherit !important;
    color:inherit !important;
    -webkit-text-fill-color:inherit !important;
    text-shadow:none !important;
  }

  .references-modal-text p,
  .references-modal-text ul{
    margin:0 0 calc(var(--references-modal-text-u) * 27) !important;
  }

  .references-modal-text p:last-child,
  .references-modal-text ul:last-child{
    margin-bottom:0 !important;
  }
}

.references-modal-close{
  right:clamp(38px, 4.1vw, 78px) !important;
  top:clamp(38px, 5.5vh, 76px) !important;
  width:clamp(34px, 2.5vw, 52px) !important;
  height:clamp(34px, 2.5vw, 52px) !important;
  display:grid !important;
  place-items:center !important;
  border:0 !important;
  margin:0 !important;
  padding:0 !important;
  border-radius:999px !important;
  background:transparent !important;
  color:#0e0e0e !important;
  cursor:pointer;
  transition:color 220ms ease !important;
}

.references-modal-close span,
.references-modal-close span::before{
  content:"";
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  display:block !important;
  width:clamp(34px, 2.4vw, 50px) !important;
  height:2px !important;
  border-radius:999px !important;
  background:currentColor !important;
  transform-origin:50% 50% !important;
}

.references-modal-close span{
  transform:translate(-50%, -50%) rotate(45deg) !important;
  transition:transform 360ms cubic-bezier(.22, .61, .36, 1) !important;
  will-change:transform;
}

.references-modal-close span::before{
  transform:translate(-50%, -50%) rotate(90deg) !important;
}

.references-modal-close:hover span,
.references-modal-close:focus-visible span{
  transform:translate(-50%, -50%) rotate(135deg) !important;
}

.references-modal-close:hover,
.references-modal-close:focus-visible{
  color:#000000 !important;
}

.references-modal-close:focus-visible{
  outline:1px solid rgba(0,0,0,.55) !important;
  outline-offset:7px !important;
}

@media (prefers-reduced-motion: reduce){
  .references-modal-close span{
    transition-duration:1ms !important;
  }
}

/* v1.342 — Referenz-Pop-up: Inhaltsachse ca. 13% unter der Pop-up-Oberkante und engerer Titel. */
.references-modal-title{
  line-height:.95 !important;
  letter-spacing:0 !important;
}

@media (min-width:1101px){
  .references-modal-layout{
    --references-modal-content-lift:0px;
    padding-top:clamp(74px, 13svh, 124px) !important;
  }
}

/* v1.343 — Referenz-Pop-up: schmalerer Fließtext und Close-Button im Pfeilblau. */
@media (min-width:1101px){
  .references-modal-text{
    width:90% !important;
    max-width:90% !important;
  }
}

.references-modal-close{
  color:#2a64a4 !important;
}

.references-modal-close:hover,
.references-modal-close:focus-visible{
  color:#143f77 !important;
}

/* v1.345 — Referenz-Pop-up: längeres, edleres Ein- und Ausblenden. */
.references-modal{
  --references-modal-fade-in:1720ms;
  --references-modal-fade-out:1520ms;
  transition:
    opacity var(--references-modal-fade-out) cubic-bezier(.22,.61,.36,1),
    visibility 0s linear var(--references-modal-fade-out) !important;
}

.references-modal.is-open{
  transition:
    opacity var(--references-modal-fade-in) cubic-bezier(.22,.61,.36,1),
    visibility 0s linear 0s !important;
}

.references-modal-panel{
  transition:transform var(--references-modal-fade-in) cubic-bezier(.22,.61,.36,1) !important;
}

@media (prefers-reduced-motion: reduce){
  .references-modal,
  .references-modal.is-open,
  .references-modal-panel{
    transition:none !important;
  }
}

/* v1.346 — Leistungen: desktop typography scales proportionally with the page.
   The original stage capped the text sizes very early (headline max 74px,
   body 14px), so on large/4K viewports the background, spacing and other
   sections grew while the Leistungen text stayed visually small. This keeps
   the existing desktop proportions at normal sizes, but raises the maximums
   and lets the stage type, text widths and headline/copy spacing grow with
   viewport width/height on larger displays. */
@media (min-width:981px){
  #leistungen.section.services .leistungen-shell{
    gap:clamp(24px, 4.2vh, 108px) !important;
    padding-top:clamp(72px, 10vh, 238px) !important;
    padding-bottom:clamp(42px, 7vh, 164px) !important;
  }

  #leistungen.section.services .leistungen-kicker{
    font-size:clamp(15px, min(.98vw, 1.25svh), 25px) !important;
  }

  #leistungen.section.services .leistungen-spectrum-trigger{
    font-size:clamp(13px, min(.93vw, 1.34svh), 30px) !important;
    gap:clamp(13px, .85vw, 27px) !important;
  }

  #leistungen.section.services .leistungen-stage{
    min-height:clamp(360px, 52vh, 1120px) !important;
  }

  #leistungen.section.services .leistungen-slide-inner{
    --leistungen-head-drop:clamp(50px, 3.25vw, 103px);
    gap:clamp(38px, 5vw, 200px) !important;
  }

  #leistungen.section.services .leistungen-headline{
    width:min(44vw, clamp(580px, 30vw, 1180px)) !important;
    max-width:clamp(580px, 30vw, 1180px) !important;
    /* v1.347: Leistungen headline ca. 14% größer, proportional skalierend. */
    font-size:clamp(52px, min(5.47vw, 7.98svh), 173px) !important;
  }

  #leistungen.section.services .leistungen-text{
    width:min(26vw, clamp(370px, 25vw, 760px)) !important;
    max-width:clamp(370px, 25vw, 760px) !important;
  }

  #leistungen.section.services .leistungen-text p{
    margin-bottom:clamp(24px, 1.56vw, 49px) !important;
    font-size:clamp(14px, min(.92vw, 1.45svh), 29px) !important;
    line-height:1.35 !important;
    letter-spacing:.02em !important;
  }
}

/* v1.348 — Über-mich/Kontakt: Titelgrößen und Kontaktverlauf feinjustieren.
   Über-mich-Titel wird um ca. 10% verkleinert, bleibt aber an dieselbe
   proportionale --about-u-Desktop-Skalierung gekoppelt. Der Kontakt-Titel-
   Verlauf wird um ca. 10% dunkler gesetzt; die bestehende Reactive-/Hover-
   Mechanik bleibt unverändert. */
@media (min-width:901px){
  html body #leistungen.section.services .leistungen-outro-title{
    font-size:calc(var(--about-u) * 93.6) !important;
  }

  .section.contact.contact-v107 .contact-title{
    --contact-title-left-color:#3f7bbb;
    --contact-title-right-color:#5b69aa;
    color:#3f7bbb !important;
  }
}

/* v1.349 — Leistungen: blauen Hintergrund ca. 10% dunkler, Sättigung leicht erhöht.
   Nur die Hintergrundfläche der Leistungen-Sektion wird angepasst; Layout,
   Typografie, Scroll-Logik und Background-Motive bleiben unverändert. */
#leistungen.section.services.theme-dark > .section-pin,
body.has-scene #leistungen.section.services.theme-dark > .section-pin{
  background:
    radial-gradient(760px 540px at -2% 0%, rgba(132, 208, 255, .54), rgba(80, 168, 224, .29) 32%, transparent 66%),
    radial-gradient(980px 660px at 15% 16%, rgba(39, 151, 221, .49), rgba(8, 114, 190, .25) 44%, transparent 72%),
    radial-gradient(980px 760px at 12% 78%, rgba(0, 106, 195, .47), rgba(0, 81, 166, .23) 42%, transparent 72%),
    radial-gradient(920px 620px at 56% 42%, rgba(22, 128, 198, .33), rgba(0, 78, 154, .15) 42%, transparent 74%),
    radial-gradient(1120px 760px at 91% 70%, rgba(1, 27, 103, .66), rgba(1, 23, 88, .33) 48%, transparent 78%),
    linear-gradient(124deg, #1179bd 0%, #0063ad 31%, #004988 62%, #031c5d 100%) !important;
}

#leistungen.section.services > .section-pin > .section-reactive-bg{
  opacity:.68;
}

#leistungen.section.services > .section-pin > .section-reactive-bg::before{
  background:
    radial-gradient(42rem 28rem at 2vw 3vh, rgba(210, 241, 255, .24), transparent 64%),
    radial-gradient(34rem 22rem at 13vw 14vh, rgba(95, 197, 255, .15), transparent 65%),
    radial-gradient(34rem 22rem at var(--reactive-x, 52vw) var(--reactive-y, 42vh), rgba(86, 190, 255, .09), transparent 62%),
    radial-gradient(48rem 28rem at 17% 86%, rgba(17, 144, 221, .11), transparent 74%) !important;
}

#leistungen.section.services > .section-pin > .section-reactive-bg::after{
  background:
    radial-gradient(18rem 16rem at 4vw 5vh, rgba(236, 250, 255, .13), transparent 58%),
    radial-gradient(14rem 12rem at 11vw 12vh, rgba(199, 239, 255, .08), transparent 60%),
    radial-gradient(20rem 16rem at calc(var(--reactive-x, 52vw) + 8px) calc(var(--reactive-y, 42vh) + 6px), rgba(132, 213, 255, .05), transparent 62%) !important;
}


/* v1.350 — Feintuning: Hero-Scroll-Cue kompakter, Coverage-Blau an Leistungen angepasst,
   Coverage-Signatur 20px nach links, Kontakt-Titelverlauf nochmals ca. 10% dunkler. */
@media (min-width:901px){
  .section.coverage .coverage-bg{
    background-color:#dceffb !important;
    background-image:
      radial-gradient(ellipse 100% 95% at 0% 50%,
        #ffffff 0%,
        #ffffff 14%,
        #f8fcff 36%,
        #edf8fe 62%,
        #ddf0fb 100%),
      radial-gradient(760px 540px at -2% 0%,
        rgba(132, 208, 255, .54) 0%,
        rgba(80, 168, 224, .29) 32%,
        rgba(80, 168, 224, 0) 66%),
      radial-gradient(980px 660px at 15% 16%,
        rgba(39, 151, 221, .49) 0%,
        rgba(8, 114, 190, .25) 44%,
        rgba(8, 114, 190, 0) 72%),
      radial-gradient(980px 760px at 12% 78%,
        rgba(0, 106, 195, .47) 0%,
        rgba(0, 81, 166, .23) 42%,
        rgba(0, 81, 166, 0) 72%),
      radial-gradient(920px 620px at 56% 42%,
        rgba(22, 128, 198, .33) 0%,
        rgba(0, 78, 154, .15) 42%,
        rgba(0, 78, 154, 0) 74%),
      linear-gradient(90deg,
        #1179bd 0%,
        #0063ad 22%,
        #004988 40%,
        #031c5d 49.15%,
        rgba(3,28,93,0) 49.15%,
        rgba(3,28,93,0) 100%) !important;
    background-size:50.85% 100%, 49.15% 100%, 49.15% 100%, 49.15% 100%, 49.15% 100%, 100% 100% !important;
    background-position:right center, left center, left center, left center, left center, center center !important;
    background-repeat:no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat !important;
  }

  .section.coverage .coverage-bg::before{
    background:
      linear-gradient(180deg, rgba(0, 8, 34, .05), rgba(0, 8, 34, .10)),
      radial-gradient(76% 96% at 29% 33%, rgba(39, 151, 221, .20) 0%, rgba(8, 72, 150, .09) 42%, rgba(3, 14, 38, 0) 70%),
      radial-gradient(58% 84% at 68% 48%, rgba(48, 137, 214, .09) 0%, rgba(18, 72, 154, .045) 36%, rgba(4, 18, 48, 0) 74%),
      linear-gradient(180deg, rgba(12, 83, 151, .17), rgba(3, 28, 93, .34)) !important;
  }

  .section.coverage .coverage-bg::after{
    background:
      radial-gradient(28vw 26vw at 21% 31%, rgba(210, 241, 255, .082) 0%, rgba(95, 197, 255, .046) 36%, rgba(95, 197, 255, 0) 76%),
      radial-gradient(28vw 26vw at 25% 74%, rgba(17, 144, 221, .088) 0%, rgba(17, 144, 221, 0) 74%),
      radial-gradient(20vw 15vw at 43% 17%, rgba(255,255,255,.027) 0%, rgba(255,255,255,0) 78%) !important;
  }

  .section.coverage .coverage-statement .coverage-signature{
    transform:translate(-20px, -15px) !important;
  }

  .section.contact.contact-v107 .contact-title{
    --contact-title-left-color:#396fa8;
    --contact-title-right-color:#525f99;
    color:#396fa8 !important;
  }
}


/* v1.351 — Kontakt: Titeltext, Schriftgröße und Zeilenabstand feinjustieren.
   Die Contact-Headline wird ca. 10% kleiner gesetzt; die proportionale
   Skalierung bleibt über dieselben clamp()/Viewport-Bezüge erhalten. Der
   Zeilenabstand wird optisch an .coverage-title angeglichen. */
@media (min-width:901px){
  .section.contact.contact-v107 .contact-title{
    font-size:clamp(48.6px, min(4.725vw, 8.1vh), 79.2px) !important;
    line-height:.92 !important;
  }
}

@media (max-width:900.98px){
  .section.contact.contact-v107 .contact-title,
  .contact-title{
    font-size:clamp(39.6px, 10.98vw, 55.8px) !important;
    line-height:.92 !important;
  }
}

/* v1.352 — Hero: typografische Inszenierung ohne neue Motive oder Struktureingriffe.
   Headline, Subheadline und Scroll-Cue werden als ruhiger Editorial-Block
   präziser gesetzt. Keine IDs, Klassen, Anchors, Scroll-Logik oder Bilddateien
   werden geändert. */
.hero .hero-content{
  width:100%;
  z-index:2;
}

.hero-copy{
  width:min(100%, 76rem);
  margin:0 auto;
  text-align:center;
  transform:translateY(clamp(-58px, -4.6vh, -36px));
  isolation:isolate;
}

.hero-title,
html[lang="pl"] .hero-title{
  width:max-content;
  max-width:100%;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
  text-transform:none;
  font-weight:400;
  line-height:.805 !important;
  letter-spacing:-.047em;
  color:rgba(225, 239, 246, .96);
  text-rendering:geometricPrecision;
}

.hero-title{
  font-size:clamp(7.05rem, 9.82vw, 13rem) !important;
}

html[lang="pl"] .hero-title{
  font-size:clamp(6.1rem, 8.75vw, 11.85rem) !important;
  letter-spacing:-.05em;
}

.hero-title__line{
  display:block;
  white-space:nowrap;
}

.hero-title__line--one{
  transform:translateX(clamp(-64px, -2.65vw, -28px));
}

.hero-title__line--two{
  transform:translateX(clamp(20px, 1.95vw, 48px));
}

.hero-title[data-headline-fx]{
  line-height:.805 !important;
  padding-top:.14em;
  padding-bottom:.27em;
  margin-top:-.14em;
  margin-bottom:-.27em;
  color:rgba(225, 239, 246, .96);
  overflow:visible;
}

.hero-title[data-headline-fx] .hero-title__line{
  line-height:.805 !important;
  padding-top:.055em;
  padding-bottom:.19em;
  margin-top:-.055em;
  margin-bottom:-.19em;
  overflow:visible;
}

@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .hero-title[data-headline-fx]{
    background-position:
      clamp(-18px, -1.25vw, 0px)
      clamp(-102px, -4.85vh, -42px);
    background-size:100vw 100vh;
    filter:saturate(.9) brightness(1.08) contrast(1.03);
    text-shadow:
      0 0 .01em rgba(238, 247, 255, .12),
      0 26px 68px rgba(102, 157, 204, .08);
  }

  .hero-title[data-headline-fx] .hero-title__line{
    background-image:inherit;
    background-size:inherit;
    background-position:inherit;
    background-repeat:inherit;
    background-origin:inherit;
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    color:transparent;
  }
}

.hero-subtitle,
html[lang="pl"] .hero-subtitle{
  width:max-content;
  max-width:min(100%, 32rem);
  margin:clamp(17px, 1.75vh, 24px) auto 0;
  transform:translateX(clamp(22px, 4.25vw, 92px));
  color:rgba(229, 240, 245, .78);
  font-size:clamp(1.36rem, 1.62vw, 2.34rem);
  font-weight:400;
  line-height:1.1;
  letter-spacing:.006em;
  text-align:right;
  text-wrap:balance;
  text-shadow:0 16px 42px rgba(8, 20, 44, .16);
}

html[lang="pl"] .hero-subtitle{
  max-width:min(100%, 35rem);
  font-size:clamp(1.26rem, 1.45vw, 2.1rem);
  transform:translateX(clamp(18px, 3.6vw, 78px));
}

.hero-subtitle__line{
  display:block;
  white-space:nowrap;
}

.hero-scroll-cue{
  bottom:clamp(30px, 3.9vh, 46px);
}

.hero-scroll-cue__text{
  color:rgba(229, 240, 245, .54);
  font-size:10px;
  font-weight:500;
  letter-spacing:.32em;
  text-transform:uppercase;
  animation-duration:4.8s;
}

@keyframes heroScrollCueDrift{
  0%, 68%, 80%, 100%{transform:translateY(0);}
  74%, 90%{transform:translateY(5px);}
}

@media (max-width:900.98px){
  .hero-copy{
    width:100%;
    transform:translateY(clamp(-34px, -3.8svh, -14px));
  }

  .hero-title,
  html[lang="pl"] .hero-title{
    width:100%;
    max-width:100%;
    line-height:.84 !important;
    letter-spacing:-.047em;
  }

  .hero-title{
    font-size:clamp(58px, 14.4vw, 92px) !important;
  }

  html[lang="pl"] .hero-title{
    font-size:clamp(50px, 12.4vw, 78px) !important;
    letter-spacing:-.048em;
  }

  .hero-title__line--one{
    transform:translateX(clamp(-16px, -2vw, -8px));
  }

  .hero-title__line--two{
    transform:translateX(clamp(8px, 1.8vw, 16px));
  }

  .hero-subtitle,
  html[lang="pl"] .hero-subtitle{
    max-width:min(100%, 29rem);
    margin-top:clamp(15px, 2.1svh, 21px);
    transform:translateX(clamp(6px, 2.2vw, 18px));
    font-size:clamp(18px, 3.65vw, 26px);
    line-height:1.12;
  }

  html[lang="pl"] .hero-subtitle{
    font-size:clamp(17px, 3.35vw, 24px);
  }

  .hero-scroll-cue{
    bottom:clamp(22px, 3.6svh, 34px);
  }
}

@media (max-width:560px){
  .hero{
    min-height:100svh;
    padding-top:86px;
    padding-bottom:72px;
  }

  .hero-copy{
    transform:translateY(clamp(-24px, -2.8svh, -10px));
  }

  .hero-title,
  html[lang="pl"] .hero-title{
    width:100%;
    line-height:.875 !important;
    letter-spacing:-.044em;
  }

  .hero-title{
    font-size:clamp(42px, 13.25vw, 60px) !important;
  }

  html[lang="pl"] .hero-title{
    font-size:clamp(31px, 9.85vw, 46px) !important;
    letter-spacing:-.055em;
  }

  .hero-title__line--one,
  .hero-title__line--two{
    transform:none !important;
    white-space:normal;
  }

  .hero-subtitle,
  html[lang="pl"] .hero-subtitle{
    width:100%;
    max-width:min(100%, 22rem);
    margin-top:clamp(14px, 2.15svh, 19px);
    transform:none;
    font-size:clamp(16px, 4.15vw, 21px);
    line-height:1.16;
    letter-spacing:.008em;
    text-align:center;
  }

  html[lang="pl"] .hero-subtitle{
    font-size:clamp(15.5px, 3.92vw, 20px);
  }

  .hero-subtitle__line{
    white-space:normal;
  }

  .hero-scroll-cue{
    bottom:clamp(20px, 3.2svh, 28px);
  }

  .hero-scroll-cue__text{
    font-size:9.5px;
    letter-spacing:.29em;
    color:rgba(229, 240, 245, .48);
  }
}

@media (max-width:380px){
  .hero-title{
    font-size:clamp(39px, 12.7vw, 48px) !important;
  }

  html[lang="pl"] .hero-title{
    font-size:clamp(30px, 9.55vw, 39px) !important;
    letter-spacing:-.055em;
  }

  .hero-subtitle,
  html[lang="pl"] .hero-subtitle{
    font-size:15.5px;
  }
}

/* v1.353 — Finaler Hero-Hintergrund mit BG_hero_1.jpg.
   Minimal-invasive Integration als atmosphärische Background-Layer.
   Keine Strukturänderung, keine neuen Motive/Elemente, keine Änderungen an IDs,
   Klassen, Anchors, Mehrsprachigkeit oder Scroll-Logik. */
.hero-bg{
  opacity:1 !important;
  background-image:
    url('/assets/img/BG_hero_1.jpg');
  background-position:50% 46%;
  background-repeat:no-repeat;
  background-size:cover;
  filter:saturate(1.02) brightness(.985) contrast(1.015);
}

.hero-bg::before,
.hero-bg::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
}

.hero-bg::before{
  background:
    linear-gradient(180deg,
      rgba(5, 16, 38, .045) 0%,
      rgba(5, 16, 38, .032) 24%,
      rgba(5, 16, 38, .055) 100%),
    radial-gradient(66% 54% at 50% 43%,
      rgba(6, 18, 42, .115) 0%,
      rgba(6, 18, 42, .05) 34%,
      rgba(6, 18, 42, 0) 66%),
    radial-gradient(54% 42% at 11% 7%,
      rgba(255, 255, 255, .06) 0%,
      rgba(255, 255, 255, .022) 34%,
      rgba(255, 255, 255, 0) 72%);
}

.hero-bg::after{
  background:
    radial-gradient(72% 56% at 50% 50%, rgba(7, 18, 41, .072), transparent 67%),
    radial-gradient(52% 40% at 100% 76%, rgba(2, 10, 28, .09), transparent 72%);
  mix-blend-mode:normal;
}

body.has-scene .hero-bg{
  opacity:1 !important;
}

.hero-media > .section-reactive-bg.section-reactive-bg--hero{
  opacity:.32 !important;
}

.hero-media > .section-reactive-bg.section-reactive-bg--hero::before{
  background:
    radial-gradient(40rem 26rem at 2vw 3vh, rgba(228, 245, 255, .16), transparent 64%),
    radial-gradient(26rem 18rem at 12vw 12vh, rgba(123, 209, 255, .08), transparent 66%),
    radial-gradient(32rem 24rem at var(--reactive-x, 52vw) var(--reactive-y, 42vh), rgba(106, 202, 255, .045), transparent 64%);
}

.hero-media > .section-reactive-bg.section-reactive-bg--hero::after{
  background:
    radial-gradient(14rem 11rem at 4vw 5vh, rgba(250, 253, 255, .075), transparent 58%),
    radial-gradient(16rem 13rem at calc(var(--reactive-x, 52vw) + 8px) calc(var(--reactive-y, 42vh) + 6px), rgba(166, 226, 255, .032), transparent 62%);
  opacity:.9;
}

.hero-noise{
  opacity:.052;
}

.hero .hero-content{
  z-index:3;
}

.hero-title,
html[lang="pl"] .hero-title{
  color:rgba(229, 240, 247, .97);
}

.hero-title[data-headline-fx]{
  color:rgba(229, 240, 247, .97);
}

@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .hero-title[data-headline-fx]{
    filter:saturate(.92) brightness(1.1) contrast(1.03);
    text-shadow:
      0 0 .01em rgba(239, 247, 255, .12),
      0 16px 42px rgba(6, 18, 41, .15);
  }
}

.hero-subtitle,
html[lang="pl"] .hero-subtitle{
  color:rgba(232, 240, 245, .82);
  text-shadow:0 14px 36px rgba(5, 15, 34, .18);
}

.hero-scroll-cue__text{
  color:rgba(231, 239, 244, .56);
  text-shadow:0 8px 22px rgba(5, 15, 34, .14);
}

.topbar.logo-on-dark .logo-img.is-light,
.topbar .menu-btn,
.topbar .lang a{
  filter:drop-shadow(0 8px 22px rgba(5, 15, 34, .10));
}

@media (max-width:1100px){
  .hero-bg{
    background-position:44% 42%;
  }
}

@media (max-width:900.98px){
  .hero-bg{
    background-position:38% 40%;
  }

  .hero-bg::before{
    background:
      linear-gradient(180deg,
        rgba(5, 16, 38, .042) 0%,
        rgba(5, 16, 38, .028) 24%,
        rgba(5, 16, 38, .058) 100%),
      radial-gradient(74% 58% at 50% 42%,
        rgba(6, 18, 42, .11) 0%,
        rgba(6, 18, 42, .048) 34%,
        rgba(6, 18, 42, 0) 68%),
      radial-gradient(50% 36% at 10% 7%,
        rgba(255, 255, 255, .05) 0%,
        rgba(255, 255, 255, .018) 36%,
        rgba(255, 255, 255, 0) 70%);
  }
}

@media (max-width:560px){
  .hero-bg{
    background-position:34% 38%;
    filter:saturate(1.015) brightness(.99) contrast(1.01);
  }

  .hero-media > .section-reactive-bg.section-reactive-bg--hero{
    opacity:.24 !important;
  }

  .hero-noise{
    opacity:.044;
  }
}

@media (max-width:380px){
  .hero-bg{
    background-position:31% 36%;
  }
}


/* v1.354 — Hotfix: BG_hero_1.jpg erzwingt die frühere Hero-Gradient-Background-Regel.
   Hintergrund muss als komplette background-Kurzschreibweise mit !important gesetzt
   werden, weil ältere Hero-Patches ebenfalls background: ... !important nutzen. */
.hero-bg{
  background:url('/assets/img/BG_hero_1.jpg') 50% 46% / cover no-repeat !important;
  opacity:1 !important;
  filter:saturate(1.02) brightness(.985) contrast(1.015);
}

body.has-scene .hero-bg{
  background:url('/assets/img/BG_hero_1.jpg') 50% 46% / cover no-repeat !important;
  opacity:1 !important;
}

@media (max-width:1100px){
  .hero-bg,
  body.has-scene .hero-bg{
    background:url('/assets/img/BG_hero_1.jpg') 44% 42% / cover no-repeat !important;
  }
}

@media (max-width:900.98px){
  .hero-bg,
  body.has-scene .hero-bg{
    background:url('/assets/img/BG_hero_1.jpg') 38% 40% / cover no-repeat !important;
  }
}

@media (max-width:560px){
  .hero-bg,
  body.has-scene .hero-bg{
    background:url('/assets/img/BG_hero_1.jpg') 34% 38% / cover no-repeat !important;
  }
}

@media (max-width:380px){
  .hero-bg,
  body.has-scene .hero-bg{
    background:url('/assets/img/BG_hero_1.jpg') 31% 36% / cover no-repeat !important;
  }
}


/* v1.355 — Hero-Hintergrundbild ersetzt durch BG_hero_3.jpg.
   Minimaler Override auf Basis von v1.354: keine Struktur-, Anchor-,
   Navigations-, Mehrsprachigkeits- oder Scroll-Logik-Änderungen. */
.hero-bg{
  background:url('/assets/img/BG_hero_3.jpg') 50% 46% / cover no-repeat !important;
}

body.has-scene .hero-bg{
  background:url('/assets/img/BG_hero_3.jpg') 50% 46% / cover no-repeat !important;
}

@media (max-width:1100px){
  .hero-bg,
  body.has-scene .hero-bg{
    background:url('/assets/img/BG_hero_3.jpg') 44% 42% / cover no-repeat !important;
  }
}

@media (max-width:900.98px){
  .hero-bg,
  body.has-scene .hero-bg{
    background:url('/assets/img/BG_hero_3.jpg') 38% 40% / cover no-repeat !important;
  }
}

@media (max-width:560px){
  .hero-bg,
  body.has-scene .hero-bg{
    background:url('/assets/img/BG_hero_3.jpg') 34% 38% / cover no-repeat !important;
  }
}

@media (max-width:380px){
  .hero-bg,
  body.has-scene .hero-bg{
    background:url('/assets/img/BG_hero_3.jpg') 31% 36% / cover no-repeat !important;
  }
}


/* v1.356 — Über-mich erweitert: Coverage-Inhalt als zweiter horizontaler Slide.
   Die bisher eigenständige Coverage-Sektion wird visuell aus dem Seitenfluss genommen,
   ihr Inhalt wird in .leistungen-outro integriert. Bestehende IDs/Anchors bleiben erhalten. */
.section.coverage.coverage--standalone-disabled{
  display:none !important;
}

#leistungen.section.services .leistungen-shell{
  --about-coverage-t:0;
  --about-final-y-t:0;
}

html body #leistungen.section.services .leistungen-outro{
  --about-slide-x:calc(var(--about-coverage-t, 0) * -106vw);
  --about-final-y:calc(var(--about-final-y-t, 0) * -22vh);
}

html body #leistungen.section.services .leistungen-outro-layout{
  transform:translate3d(var(--about-slide-x), var(--about-final-y), 0) !important;
  will-change:transform;
}

html body #leistungen.section.services .leistungen-outro-coverage{
  position:absolute;
  inset:0;
  z-index:7;
  display:block;
  pointer-events:none;
  opacity:calc(var(--about-coverage-t, 0) * var(--about-coverage-t, 0));
  transform:
    translate3d(calc((1 - var(--about-coverage-t, 0)) * 72vw), var(--about-final-y), 0);
  will-change:transform, opacity;
}

html body #leistungen.section.services .leistungen-shell.is-outro-coverage-visible .leistungen-outro-coverage{
  pointer-events:auto;
}

html body #leistungen.section.services .leistungen-outro-coverage-inner{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  box-sizing:border-box;
  color:#17191f;
}

@media (min-width:901px){
  html body #leistungen.section.services .leistungen-outro{
    --outro-coverage-u:min(1px, calc(78svh / 820), calc(84vw / 1480));
    --outro-coverage-w:calc(var(--outro-coverage-u) * 1480);
    --outro-coverage-h:calc(var(--outro-coverage-u) * 820);
    --outro-coverage-left:calc((100vw - var(--outro-coverage-w)) / 2);
    --outro-coverage-top:calc((100svh - var(--outro-coverage-h)) / 2 + (var(--outro-coverage-u) * 12));
  }

  html body #leistungen.section.services .leistungen-outro-coverage-left{
    position:absolute;
    left:var(--outro-coverage-left);
    top:var(--outro-coverage-top);
    width:calc(var(--outro-coverage-u) * 650);
    min-height:calc(var(--outro-coverage-u) * 700);
    z-index:2;
  }

  html body #leistungen.section.services .leistungen-outro-coverage-eyebrow{
    margin:0 0 calc(var(--outro-coverage-u) * 74);
    color:rgba(28, 32, 38, .74);
    font-size:calc(var(--outro-coverage-u) * 17);
    line-height:1;
    font-weight:700;
    letter-spacing:.085em;
    text-transform:uppercase;
  }

  html body #leistungen.section.services .leistungen-outro-coverage-title{
    margin:0 0 calc(var(--outro-coverage-u) * 46);
    width:calc(var(--outro-coverage-u) * 600);
    max-width:100%;
    font-family:var(--font-display-serif), var(--font-serif);
    font-style:normal !important;
    font-synthesis:none !important;
    font-weight:400;
    font-size:calc(var(--outro-coverage-u) * 76);
    line-height:.92;
    letter-spacing:-.015em;
    color:#4169a6;
    text-wrap:balance;
  }

  html body #leistungen.section.services .leistungen-outro-coverage-statement{
    width:calc(var(--outro-coverage-u) * 610);
    max-width:100%;
  }

  html body #leistungen.section.services .leistungen-outro-coverage-statement p{
    margin:0 0 calc(var(--outro-coverage-u) * 29);
    color:#24262c;
    font-size:calc(var(--outro-coverage-u) * 19.5);
    line-height:1.47;
    font-weight:500;
    letter-spacing:.055em;
  }

  html body #leistungen.section.services .leistungen-outro-coverage-signature{
    width:calc(var(--outro-coverage-u) * 190);
    margin:calc(var(--outro-coverage-u) * 10) 0 0 auto;
    transform:translateX(calc(var(--outro-coverage-u) * -45));
    opacity:.92;
  }

  html body #leistungen.section.services .leistungen-outro-coverage-signature-img{
    display:block;
    width:100%;
    height:auto;
    filter:none;
  }

  html body #leistungen.section.services .leistungen-outro-coverage-right{
    position:absolute;
    left:calc(var(--outro-coverage-left) + (var(--outro-coverage-u) * 810));
    top:calc(var(--outro-coverage-top) + (var(--outro-coverage-u) * 96));
    width:calc(var(--outro-coverage-u) * 610);
    min-height:calc(var(--outro-coverage-u) * 606);
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    gap:calc(var(--outro-coverage-u) * 54);
    z-index:3;
  }

  html body #leistungen.section.services .leistungen-outro-coverage-item{
    display:grid;
    grid-template-columns:calc(var(--outro-coverage-u) * 70) minmax(0, 1fr);
    align-items:start;
    column-gap:calc(var(--outro-coverage-u) * 26);
    color:#15171c;
  }

  html body #leistungen.section.services .leistungen-outro-coverage-icon{
    width:calc(var(--outro-coverage-u) * 70);
    height:calc(var(--outro-coverage-u) * 70);
    object-fit:contain;
    margin:0;
  }

  html body #leistungen.section.services .leistungen-outro-coverage-item-title{
    margin:calc(var(--outro-coverage-u) * 12) 0 calc(var(--outro-coverage-u) * 22);
    color:#111216;
    font-family:Roboto, var(--font-sans);
    font-size:calc(var(--outro-coverage-u) * 30);
    line-height:1.08;
    font-weight:600;
    letter-spacing:-.012em;
    text-transform:none;
  }

  html body #leistungen.section.services .leistungen-outro-coverage-item-copy p{
    margin:0;
    color:#25262c;
    font-size:calc(var(--outro-coverage-u) * 16.7);
    line-height:1.46;
    font-weight:500;
    letter-spacing:.058em;
    max-width:calc(var(--outro-coverage-u) * 470);
  }

  html body #leistungen.section.services .leistungen-shell.is-outro-finale .leistungen-outro-layout,
  html body #leistungen.section.services .leistungen-shell.is-outro-finale .leistungen-outro-coverage{
    opacity:calc(1 - (var(--about-final-y-t, 0) * .72));
  }
}

@media (max-width:900.98px){
  html body #leistungen.section.services .leistungen-outro{
    --about-slide-x:calc(var(--about-coverage-t, 0) * -110vw);
    --about-final-y:calc(var(--about-final-y-t, 0) * -18vh);
  }

  html body #leistungen.section.services .leistungen-outro-coverage{
    transform:
      translate3d(calc((1 - var(--about-coverage-t, 0)) * 86vw), var(--about-final-y), 0);
  }

  html body #leistungen.section.services .leistungen-outro-coverage-inner{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:clamp(28px, 4.4svh, 46px);
    padding:clamp(88px, 12svh, 124px) clamp(22px, 6vw, 58px) clamp(64px, 8svh, 84px);
    overflow:hidden;
  }

  html body #leistungen.section.services .leistungen-outro-coverage-eyebrow{
    margin:0 0 clamp(26px, 4svh, 42px);
    color:rgba(28, 32, 38, .72);
    font-size:clamp(12px, 3.1vw, 15px);
    line-height:1;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
  }

  html body #leistungen.section.services .leistungen-outro-coverage-title{
    margin:0 0 clamp(24px, 3.5svh, 34px);
    max-width:12ch;
    font-family:var(--font-display-serif), var(--font-serif);
    font-weight:400;
    font-size:clamp(38px, 11vw, 66px);
    line-height:.91;
    letter-spacing:-.015em;
    color:#4169a6;
  }

  html body #leistungen.section.services .leistungen-outro-coverage-statement{
    max-width:38rem;
  }

  html body #leistungen.section.services .leistungen-outro-coverage-statement p{
    margin:0 0 clamp(16px, 2.4svh, 22px);
    color:#25262c;
    font-size:clamp(14px, 3.35vw, 17px);
    line-height:1.46;
    font-weight:500;
    letter-spacing:.035em;
  }

  html body #leistungen.section.services .leistungen-outro-coverage-signature{
    width:clamp(132px, 34vw, 182px);
    margin:clamp(8px, 1.6svh, 14px) 0 0 auto;
    transform:translateX(-10vw);
  }

  html body #leistungen.section.services .leistungen-outro-coverage-signature-img{
    display:block;
    width:100%;
    height:auto;
  }

  html body #leistungen.section.services .leistungen-outro-coverage-right{
    display:flex;
    flex-direction:column;
    gap:clamp(20px, 3svh, 30px);
    max-width:42rem;
  }

  html body #leistungen.section.services .leistungen-outro-coverage-item{
    display:grid;
    grid-template-columns:clamp(44px, 10vw, 62px) minmax(0, 1fr);
    column-gap:clamp(15px, 4vw, 24px);
    align-items:start;
  }

  html body #leistungen.section.services .leistungen-outro-coverage-icon{
    width:clamp(44px, 10vw, 62px);
    height:clamp(44px, 10vw, 62px);
    object-fit:contain;
  }

  html body #leistungen.section.services .leistungen-outro-coverage-item-title{
    margin:2px 0 clamp(8px, 1.7svh, 12px);
    color:#111216;
    font-family:Roboto, var(--font-sans);
    font-size:clamp(20px, 5.2vw, 29px);
    line-height:1.08;
    font-weight:600;
    letter-spacing:-.012em;
  }

  html body #leistungen.section.services .leistungen-outro-coverage-item-copy p{
    margin:0;
    color:#25262c;
    font-size:clamp(13px, 3.1vw, 15px);
    line-height:1.4;
    font-weight:500;
    letter-spacing:.035em;
  }

  html body #leistungen.section.services .leistungen-shell.is-outro-finale .leistungen-outro-layout,
  html body #leistungen.section.services .leistungen-shell.is-outro-finale .leistungen-outro-coverage{
    opacity:calc(1 - (var(--about-final-y-t, 0) * .76));
  }
}

@media (max-width:560px){
  html body #leistungen.section.services .leistungen-outro-coverage-inner{
    justify-content:flex-start;
    padding-top:clamp(82px, 10.5svh, 104px);
    gap:clamp(22px, 3.2svh, 32px);
  }

  html body #leistungen.section.services .leistungen-outro-coverage-title{
    font-size:clamp(32px, 10.2vw, 46px);
    max-width:13ch;
  }

  html body #leistungen.section.services .leistungen-outro-coverage-statement p{
    font-size:clamp(13px, 3.45vw, 15px);
    line-height:1.4;
  }

  html body #leistungen.section.services .leistungen-outro-coverage-item-title{
    font-size:clamp(18px, 5.35vw, 24px);
  }

  html body #leistungen.section.services .leistungen-outro-coverage-item-copy p{
    font-size:clamp(12.4px, 3.25vw, 14px);
  }
}


/* v1.357 — Menü-Kontrast-Fallback.
   Falls die Menü-Kontrastlogik eine dunkle Hintergrundzone erkennt,
   müssen Panel-Links ausdrücklich hell bleiben. */
.menu-links a.on-dark,
.menu-panel-bottom a.on-dark,
.menu a.on-dark{
  color:rgba(255,255,255,.94) !important;
}


/* v1.358 — Leitidee-Safety: erster Slide bleibt sichtbar, bis JS/Scene initialisiert.
   Die eigentliche Scroll-/Slide-Mechanik bleibt unverändert; dies verhindert nur,
   dass ein Reset-Zustand ohne gültiges Leitidee-Scene-Event alle Slides unsichtbar lässt. */
.section.story .story-slide.is-active{
  opacity:1;
  visibility:visible;
}


/* v1.359 — .leistungen-outro: Coverage-Slide als fester zweiter Track-Teil + Scroll-Holds.
   Der Coverage-Inhalt wartet ohne eigene Fade-/Nachlaufanimation rechts außerhalb
   des Viewports. Über-mich und Coverage werden wie zwei horizontal verbundene
   Slides gemeinsam verschoben; die Hold-Phasen entstehen in app.js. */
html body #leistungen.section.services .leistungen-outro{
  --about-slide-distance:106vw;
  --about-slide-x:calc(var(--about-coverage-t, 0) * -1 * var(--about-slide-distance));
  --about-final-y:calc(var(--about-final-y-t, 0) * -22vh);
}

html body #leistungen.section.services .leistungen-outro-coverage{
  opacity:1 !important;
  transform:
    translate3d(calc(var(--about-slide-distance) + var(--about-slide-x)), var(--about-final-y), 0) !important;
  will-change:transform;
}

html body #leistungen.section.services .leistungen-outro-coverage-inner{
  opacity:1 !important;
  transform:none !important;
}

@media (max-width:900.98px){
  html body #leistungen.section.services .leistungen-outro{
    --about-slide-distance:110vw;
    --about-final-y:calc(var(--about-final-y-t, 0) * -18vh);
  }

  html body #leistungen.section.services .leistungen-outro-coverage{
    transform:
      translate3d(calc(var(--about-slide-distance) + var(--about-slide-x)), var(--about-final-y), 0) !important;
  }
}


/* v1.360 — .leistungen-outro: Coverage näher an Über-mich + sauberer Kontakt-Übergang.
   Der zweite Slide steht nur noch ca. eine halbe Slide-Distanz rechts außen,
   sodass er beim horizontalen Scroll sofort sichtbar wird. Die alte interne
   Schlussbewegung nach oben wird neutralisiert; nach dem Coverage-Hold löst
   die gepinnte Section natürlich und Kontakt erscheint von unten. */
html body #leistungen.section.services .leistungen-outro{
  --about-slide-distance:56vw;
  --about-final-y:0px;
}

html body #leistungen.section.services .leistungen-outro-layout{
  transform:translate3d(var(--about-slide-x), 0, 0) !important;
}

html body #leistungen.section.services .leistungen-outro-coverage{
  transform:
    translate3d(calc(var(--about-slide-distance) + var(--about-slide-x)), 0, 0) !important;
}

html body #leistungen.section.services .leistungen-shell.is-outro-finale .leistungen-outro-layout,
html body #leistungen.section.services .leistungen-shell.is-outro-finale .leistungen-outro-coverage{
  opacity:1 !important;
}

@media (max-width:900.98px){
  html body #leistungen.section.services .leistungen-outro{
    --about-slide-distance:58vw;
    --about-final-y:0px;
  }

  html body #leistungen.section.services .leistungen-outro-layout{
    transform:translate3d(var(--about-slide-x), 0, 0) !important;
  }

  html body #leistungen.section.services .leistungen-outro-coverage{
    transform:
      translate3d(calc(var(--about-slide-distance) + var(--about-slide-x)), 0, 0) !important;
  }
}


/* v1.361 — .leistungen-outro: Coverage-Abstand nach Videoanalyse korrigiert.
   v1.360 hatte den Track-Abstand auf 56vw halbiert. Dadurch wartete Coverage
   nicht mehr außerhalb des rechten Viewports, sondern lag bereits sichtbar über
   dem Über-mich-Slide. Der zweite Slide sitzt jetzt knapp hinter der rechten
   Bildschirmkante, kommt durch die kurze Scroll-Strecke aber sofort ins Bild.
   Der natürliche Release zur Kontakt-Sektion aus v1.360 bleibt unverändert. */
html body #leistungen.section.services .leistungen-outro{
  --about-slide-distance:88vw;
  --about-final-y:0px;
}

@media (max-width:900.98px){
  html body #leistungen.section.services .leistungen-outro{
    --about-slide-distance:92vw;
    --about-final-y:0px;
  }
}

@media (max-width:560px){
  html body #leistungen.section.services .leistungen-outro{
    --about-slide-distance:96vw;
  }
}


/* v1.362 — .leistungen-outro: Coverage-Slide vollständig hinter rechter Viewportkante.
   Videoanalyse: Bei 88vw begann der innenliegende Coverage-Content bereits am
   rechten Rand sichtbar zu werden. Der zweite Track-Slide wartet nun mit einer
   kleinen Sicherheitsreserve komplett außerhalb des Viewports. Die kurze
   Scroll-Strecke aus v1.360/v1.361 bleibt erhalten, damit Coverage trotzdem
   direkt und zügig ins Bild fährt. */
html body #leistungen.section.services .leistungen-outro{
  --about-slide-distance:calc(100vw + 24px);
}

@media (max-width:900.98px){
  html body #leistungen.section.services .leistungen-outro{
    --about-slide-distance:calc(100vw + 24px);
  }
}

@media (max-width:560px){
  html body #leistungen.section.services .leistungen-outro{
    --about-slide-distance:calc(100vw + 18px);
  }
}


/* v1.363 — Coverage-Slide Typografie/Abstände in .leistungen-outro.
   - Dachzeile entfernt.
   - Coverage-Titel an die Desktop-Geometrie von .leistungen-outro-title gekoppelt.
   - Abstand Titel → Statement auf 60px gesetzt.
   - Icon-Fließtexte um ca. 1 Punkt vergrößert. */
html body #leistungen.section.services .leistungen-outro-coverage-eyebrow{
  display:none !important;
}

@media (min-width:901px){
  html body #leistungen.section.services .leistungen-outro-coverage-left{
    top:calc(var(--about-top-gap) + (var(--about-u) * 34)) !important;
  }

  html body #leistungen.section.services .leistungen-outro-coverage-title{
    margin:0 0 60px !important;
    width:calc(var(--about-u) * 660) !important;
    max-width:calc(var(--about-u) * 660) !important;
    font-family:var(--font-display-serif), var(--font-serif) !important;
    font-style:normal !important;
    font-synthesis:none !important;
    font-weight:400 !important;
    font-size:calc(var(--about-u) * 93.6) !important;
    line-height:.86 !important;
    letter-spacing:-.014em !important;
  }

  html body #leistungen.section.services .leistungen-outro-coverage-statement{
    width:calc(var(--about-u) * 660) !important;
    max-width:calc(var(--about-u) * 660) !important;
  }

  html body #leistungen.section.services .leistungen-outro-coverage-item-copy p{
    font-size:calc(var(--outro-coverage-u) * 17.7) !important;
    line-height:1.43 !important;
  }

  html body #leistungen.section.services .leistungen-outro-coverage-right{
    gap:calc(var(--outro-coverage-u) * 47) !important;
  }
}

@media (max-width:900.98px){
  html body #leistungen.section.services .leistungen-outro-coverage-title{
    margin-bottom:60px !important;
    line-height:.88 !important;
  }

  html body #leistungen.section.services .leistungen-outro-coverage-item-copy p{
    font-size:clamp(14px, 3.35vw, 16px) !important;
    line-height:1.38 !important;
  }

  html body #leistungen.section.services .leistungen-outro-coverage-right{
    gap:clamp(18px, 2.55svh, 27px) !important;
  }
}

@media (max-width:560px){
  html body #leistungen.section.services .leistungen-outro-coverage-title{
    margin-bottom:44px !important;
  }

  html body #leistungen.section.services .leistungen-outro-coverage-item-copy p{
    font-size:clamp(13.4px, 3.5vw, 15px) !important;
    line-height:1.34 !important;
  }
}

/* v1.364 — Coverage-Slide: optischen Titel/Text-Abstand korrigieren.
   v1.363 setzte 60px als margin-bottom der h2-Layoutbox. Die große Serifenschrift
   bringt unter der letzten sichtbaren Buchstabenzeile jedoch zusätzliche Font-/Linebox-
   Luft mit; dadurch wirkte der Abstand optisch ca. 125px. Die Margin wird deshalb
   um ca. 0.70em der Titelgröße kompensiert, sodass der sichtbare Abstand zum
   Statement-Text bei etwa 60px liegt. */
html body #leistungen.section.services .leistungen-outro-coverage-title{
  margin-bottom:calc(60px - .70em) !important;
}

html body #leistungen.section.services .leistungen-outro-coverage-statement{
  margin-top:0 !important;
}

@media (max-width:560px){
  html body #leistungen.section.services .leistungen-outro-coverage-title{
    margin-bottom:calc(44px - .46em) !important;
  }
}


/* v1.365 — Coverage-Slide: Icon-Text-Blöcke nach Referenzbild korrigiert.
   Während der Integration in .leistungen-outro war der Fließtext der rechten
   Icon-Blöcke zu stark begrenzt. Der Text nutzt nun die volle Breite der
   rechten Textspalte; die Blöcke rücken zugleich leicht kompakter zusammen. */
@media (min-width:901px){
  html body #leistungen.section.services .leistungen-outro-coverage-right{
    width:calc(var(--outro-coverage-u) * 640) !important;
    gap:calc(var(--outro-coverage-u) * 44) !important;
  }

  html body #leistungen.section.services .leistungen-outro-coverage-item{
    grid-template-columns:calc(var(--outro-coverage-u) * 70) minmax(0, 1fr) !important;
    column-gap:calc(var(--outro-coverage-u) * 26) !important;
    align-items:start !important;
  }

  html body #leistungen.section.services .leistungen-outro-coverage-item-copy{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
  }

  html body #leistungen.section.services .leistungen-outro-coverage-item-title{
    margin:calc(var(--outro-coverage-u) * 10) 0 calc(var(--outro-coverage-u) * 19) !important;
  }

  html body #leistungen.section.services .leistungen-outro-coverage-item-copy p{
    width:100% !important;
    max-width:none !important;
    font-size:calc(var(--outro-coverage-u) * 17.7) !important;
    line-height:1.42 !important;
    letter-spacing:.052em !important;
  }
}

@media (max-width:900.98px){
  html body #leistungen.section.services .leistungen-outro-coverage-item-copy{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
  }

  html body #leistungen.section.services .leistungen-outro-coverage-item-copy p{
    width:100% !important;
    max-width:none !important;
  }
}


/* v1.366 — Coverage-Slide: Absatztext spannt über die volle Icon-Text-Blockbreite.
   Analyse: v1.365 entfernte nur max-width, der Absatz blieb aber in
   .leistungen-outro-coverage-item-copy und damit in der rechten Grid-Spalte
   neben dem Icon. Der Absatz kann so nicht mit der Icon-Kante linksbündig
   abschließen. Jetzt wird .item-copy layoutneutral gemacht: Titel bleibt
   rechts neben dem Icon, der Absatz läuft darunter über beide Grid-Spalten. */
@media (min-width:901px){
  html body #leistungen.section.services .leistungen-outro-coverage-right{
    width:calc(var(--outro-coverage-u) * 660) !important;
    gap:calc(var(--outro-coverage-u) * 44) !important;
  }

  html body #leistungen.section.services .leistungen-outro-coverage-item{
    display:grid !important;
    grid-template-columns:calc(var(--outro-coverage-u) * 70) minmax(0, 1fr) !important;
    grid-template-rows:auto auto !important;
    column-gap:calc(var(--outro-coverage-u) * 26) !important;
    row-gap:calc(var(--outro-coverage-u) * 14) !important;
    align-items:start !important;
    width:100% !important;
  }

  html body #leistungen.section.services .leistungen-outro-coverage-icon{
    grid-column:1 !important;
    grid-row:1 !important;
  }

  html body #leistungen.section.services .leistungen-outro-coverage-item-copy{
    display:contents !important;
  }

  html body #leistungen.section.services .leistungen-outro-coverage-item-title{
    grid-column:2 !important;
    grid-row:1 !important;
    align-self:center !important;
    margin:0 !important;
  }

  html body #leistungen.section.services .leistungen-outro-coverage-item-copy p{
    grid-column:1 / -1 !important;
    grid-row:2 !important;
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
    font-size:calc(var(--outro-coverage-u) * 17.7) !important;
    line-height:1.42 !important;
    letter-spacing:.052em !important;
    text-align:left !important;
  }
}

@media (max-width:900.98px){
  html body #leistungen.section.services .leistungen-outro-coverage-item{
    display:grid !important;
    grid-template-columns:clamp(44px, 10vw, 62px) minmax(0, 1fr) !important;
    grid-template-rows:auto auto !important;
    row-gap:clamp(9px, 1.4svh, 13px) !important;
  }

  html body #leistungen.section.services .leistungen-outro-coverage-icon{
    grid-column:1 !important;
    grid-row:1 !important;
  }

  html body #leistungen.section.services .leistungen-outro-coverage-item-copy{
    display:contents !important;
  }

  html body #leistungen.section.services .leistungen-outro-coverage-item-title{
    grid-column:2 !important;
    grid-row:1 !important;
    align-self:center !important;
    margin:0 !important;
  }

  html body #leistungen.section.services .leistungen-outro-coverage-item-copy p{
    grid-column:1 / -1 !important;
    grid-row:2 !important;
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
    text-align:left !important;
  }
}


/* v1.367 — Coverage-Slide: Icon-Fließtexte an Statement-Fließtextgröße angleichen.
   Nur die Schriftgröße der Absätze in den rechten Icon-Text-Blöcken wird an
   .leistungen-outro-coverage-statement p angepasst. Layout/Grid/Scroll bleiben unverändert. */
@media (min-width:901px){
  html body #leistungen.section.services .leistungen-outro-coverage-item-copy p{
    font-size:calc(var(--outro-coverage-u) * 19.5) !important;
  }
}

@media (max-width:900.98px){
  html body #leistungen.section.services .leistungen-outro-coverage-item-copy p{
    font-size:clamp(14px, 3.35vw, 17px) !important;
  }
}

@media (max-width:560px){
  html body #leistungen.section.services .leistungen-outro-coverage-item-copy p{
    font-size:clamp(13px, 3.45vw, 15px) !important;
  }
}


/* v1.368 — Coverage-Slide: Icon-Absatzbreite um 20% begrenzt + Statement in drei Absätze geteilt.
   Die Absätze in den rechten Icon-Blöcken bleiben linksbündig mit der Icon-Kante,
   nutzen aber nur noch 80% der Blockbreite. */
html body #leistungen.section.services .leistungen-outro-coverage-item-copy p{
  width:80% !important;
  max-width:80% !important;
}

@media (max-width:900.98px){
  html body #leistungen.section.services .leistungen-outro-coverage-item-copy p{
    width:80% !important;
    max-width:80% !important;
  }
}

@media (max-width:560px){
  html body #leistungen.section.services .leistungen-outro-coverage-item-copy p{
    width:86% !important;
    max-width:86% !important;
  }
}


/* v1.369 — Coverage/Kontakt: Blockausrichtung + Kontakt-Titel an Leistungen-Headline angepasst.
   1) Coverage-Rechtsblock beginnt oben auf derselben Linie wie der linke Coverage-Block.
   2) Kontakt-Linksspalte beginnt horizontal auf derselben linken Kante wie .leistungen-outro-coverage-left.
   3) Kontakt-Titel nutzt den hellen Blauverlauf der .leistungen-headline; Reactive-/Hover-Effekt bleibt erhalten. */
@media (min-width:901px){
  html body #leistungen.section.services .leistungen-outro-coverage-right{
    top:calc(var(--about-top-gap) + (var(--about-u) * 34)) !important;
  }

  .section.contact.contact-v107{
    --contact-coverage-u:min(1px, calc(78svh / 820), calc(84vw / 1480));
    --contact-coverage-w:calc(var(--contact-coverage-u) * 1480);
    --contact-left-align:calc((100vw - var(--contact-coverage-w)) / 2);
  }

  .section.contact.contact-v107 .contact-main{
    padding-left:var(--contact-left-align) !important;
  }

  .section.contact.contact-v107 .contact-left{
    justify-self:start !important;
    margin-left:0 !important;
  }

  .section.contact.contact-v107 .contact-title{
    color:#6ca0f1 !important;
    text-shadow:0 0 .01em rgba(10, 22, 47, .08) !important;
  }

  @supports ((-webkit-background-clip:text) or (background-clip:text)){
    html body .section.contact.contact-v107 .contact-title[data-headline-fx]{
      background-image:
        linear-gradient(90deg,
          rgba(236, 246, 255, .74) 0%,
          rgba(214, 232, 255, .52) 22%,
          rgba(168, 202, 248, .25) 43%,
          rgba(130, 161, 216, 0) 68%),
        radial-gradient(42vw 28vw at 5vw 6vh,
          rgba(248, 251, 255, .46) 0%,
          rgba(232, 241, 255, .36) 18%,
          rgba(170, 202, 250, .16) 38%,
          rgba(18, 35, 79, 0) 72%),
        radial-gradient(26vw 18vw at 9vw 10vh,
          rgba(206, 224, 255, .18) 0%,
          rgba(125, 164, 238, .10) 38%,
          rgba(17, 33, 73, 0) 74%),
        radial-gradient(66vw 58vw at var(--reactive-x, 52vw) var(--reactive-y, 42vh),
          rgba(244, 248, 255, .76) 0%,
          rgba(224, 235, 255, .66) 16%,
          rgba(170, 198, 250, .44) 32%,
          rgba(88, 128, 214, .18) 52%,
          rgba(18, 35, 79, 0) 74%),
        radial-gradient(88vw 76vw at var(--reactive-x-soft, 58vw) var(--reactive-y-soft, 48vh),
          rgba(193, 214, 255, .18) 0%,
          rgba(126, 158, 226, .12) 36%,
          rgba(17, 33, 73, 0) 76%),
        linear-gradient(90deg,
          #3d82ea 0%,
          #4b8ded 14%,
          #6ca0f1 34%,
          #8fb3f3 56%,
          #c6dcfc 80%,
          #eef4ff 100%) !important;
      background-size:
        100% 100%,
        100vw 100vh,
        100vw 100vh,
        100vw 100vh,
        100vw 100vh,
        100vw 100vh !important;
      background-position:
        0 0,
        calc(-1 * var(--headline-view-x, 0px)) calc(-1 * var(--headline-view-y, 0px)),
        calc(-1 * var(--headline-view-x, 0px)) calc(-1 * var(--headline-view-y, 0px)),
        calc(-1 * var(--headline-view-x, 0px)) calc(-1 * var(--headline-view-y, 0px)),
        calc(-1 * var(--headline-view-x, 0px)) calc(-1 * var(--headline-view-y, 0px)),
        calc(-1 * var(--headline-view-x, 0px)) calc(-1 * var(--headline-view-y, 0px)) !important;
      background-repeat:no-repeat !important;
      -webkit-background-clip:text !important;
      background-clip:text !important;
      -webkit-text-fill-color:transparent !important;
      color:transparent !important;
      filter:saturate(.96) brightness(1.04) contrast(.98) !important;
      text-shadow:0 0 .01em rgba(10, 22, 47, .08) !important;
    }

    html body .section.contact.contact-v107 .contact-title[data-headline-fx]:hover,
    html body .section.contact.contact-v107 .contact-title[data-headline-fx]:focus-visible{
      filter:saturate(1.06) brightness(1.10) contrast(1.02) !important;
    }
  }
}

@media (max-width:900.98px){
  .section.contact.contact-v107 .contact-title{
    color:#6ca0f1 !important;
  }

  @supports ((-webkit-background-clip:text) or (background-clip:text)){
    html body .section.contact.contact-v107 .contact-title[data-headline-fx]{
      background-image:
        linear-gradient(90deg,
          #3d82ea 0%,
          #6ca0f1 42%,
          #c6dcfc 78%,
          #eef4ff 100%) !important;
      background-size:100% 100% !important;
      background-position:0 0 !important;
      background-repeat:no-repeat !important;
      -webkit-background-clip:text !important;
      background-clip:text !important;
      -webkit-text-fill-color:transparent !important;
      color:transparent !important;
      filter:saturate(.98) brightness(1.04) contrast(.99) !important;
    }
  }
}


/* v1.370 — Kontakt: .contact-title farblich verfeinert, ohne .leistungen-headline zu berühren.
   Ziel nach Referenz: ruhiges, helles, nobles Eisblau im Normalzustand;
   bei Hover heller und erhabener, aber bewusst noch unter reinem Weiß. */
.section.contact.contact-v107 .contact-title{
  color:rgba(214, 231, 255, .66) !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,.035),
    0 18px 44px rgba(42, 104, 184, .10) !important;
}

@supports ((-webkit-background-clip:text) or (background-clip:text)){
  html body .section.contact.contact-v107 .contact-title[data-headline-fx]{
    background-image:
      radial-gradient(92% 118% at 18% 12%,
        rgba(236, 246, 255, .58) 0%,
        rgba(219, 236, 255, .50) 32%,
        rgba(196, 221, 255, .34) 62%,
        rgba(170, 207, 250, 0) 100%),
      radial-gradient(78vw 62vw at var(--reactive-x, 52vw) var(--reactive-y, 42vh),
        rgba(238, 247, 255, .46) 0%,
        rgba(218, 235, 255, .32) 24%,
        rgba(183, 211, 252, .18) 48%,
        rgba(150, 194, 246, 0) 76%),
      radial-gradient(92vw 72vw at var(--reactive-x-soft, 58vw) var(--reactive-y-soft, 48vh),
        rgba(225, 240, 255, .20) 0%,
        rgba(194, 221, 255, .12) 38%,
        rgba(150, 194, 246, 0) 78%),
      linear-gradient(90deg,
        rgba(224, 238, 255, .72) 0%,
        rgba(213, 232, 255, .66) 26%,
        rgba(200, 223, 255, .58) 54%,
        rgba(184, 213, 250, .50) 78%,
        rgba(170, 203, 246, .44) 100%) !important;
    background-size:
      100% 100%,
      100vw 100vh,
      100vw 100vh,
      100% 100% !important;
    background-position:
      0 0,
      calc(-1 * var(--headline-view-x, 0px)) calc(-1 * var(--headline-view-y, 0px)),
      calc(-1 * var(--headline-view-x, 0px)) calc(-1 * var(--headline-view-y, 0px)),
      0 0 !important;
    background-repeat:no-repeat !important;
    -webkit-background-clip:text !important;
    background-clip:text !important;
    -webkit-text-fill-color:transparent !important;
    color:transparent !important;
    filter:saturate(.94) brightness(1.02) contrast(.98) !important;
    text-shadow:
      0 1px 0 rgba(255,255,255,.035),
      0 18px 44px rgba(42, 104, 184, .10) !important;
    transition:
      filter 820ms cubic-bezier(.22, 1, .36, 1),
      text-shadow 820ms cubic-bezier(.22, 1, .36, 1) !important;
  }

  html body .section.contact.contact-v107 .contact-title[data-headline-fx]:hover,
  html body .section.contact.contact-v107 .contact-title[data-headline-fx]:focus-visible{
    background-image:
      radial-gradient(92% 118% at 18% 12%,
        rgba(246, 251, 255, .72) 0%,
        rgba(233, 244, 255, .64) 32%,
        rgba(214, 233, 255, .46) 62%,
        rgba(184, 218, 252, 0) 100%),
      radial-gradient(78vw 62vw at var(--reactive-x, 52vw) var(--reactive-y, 42vh),
        rgba(248, 252, 255, .58) 0%,
        rgba(232, 244, 255, .44) 24%,
        rgba(205, 228, 255, .28) 48%,
        rgba(170, 210, 250, 0) 76%),
      radial-gradient(92vw 72vw at var(--reactive-x-soft, 58vw) var(--reactive-y-soft, 48vh),
        rgba(238, 248, 255, .28) 0%,
        rgba(212, 234, 255, .18) 38%,
        rgba(170, 210, 250, 0) 78%),
      linear-gradient(90deg,
        rgba(238, 248, 255, .86) 0%,
        rgba(226, 240, 255, .80) 27%,
        rgba(213, 232, 255, .70) 54%,
        rgba(198, 222, 253, .62) 78%,
        rgba(184, 213, 250, .56) 100%) !important;
    filter:saturate(1.00) brightness(1.08) contrast(1.00) !important;
    text-shadow:
      0 1px 0 rgba(255,255,255,.07),
      0 20px 54px rgba(56, 126, 211, .16) !important;
  }
}


/* v1.371 — Kontakt: Mouse-Over der .contact-title entflackert und organischer gemacht.
   Analyse: v1.370 tauschte auf :hover das komplette background-image des
   text-geclippten Verlaufs aus. Background-Images überblenden nicht weich,
   wodurch der helle Zustand abrupt einsprang und bei Mausbewegung flackerte.
   Der Verlauf bleibt nun in Normal- und Hover-Zustand identisch; die Erhabenheit
   entsteht ausschließlich über weich animierbare Filter und Schatten. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  html body .section.contact.contact-v107 .contact-title[data-headline-fx],
  html body .section.contact.contact-v107 .contact-title[data-headline-fx]:hover,
  html body .section.contact.contact-v107 .contact-title[data-headline-fx]:focus-visible{
    background-image:
      radial-gradient(92% 118% at 18% 12%,
        rgba(236, 246, 255, .60) 0%,
        rgba(220, 236, 255, .52) 32%,
        rgba(198, 222, 255, .36) 62%,
        rgba(170, 207, 250, 0) 100%),
      radial-gradient(72vw 58vw at var(--reactive-x, 52vw) var(--reactive-y, 42vh),
        rgba(238, 247, 255, .34) 0%,
        rgba(219, 236, 255, .24) 25%,
        rgba(184, 212, 252, .13) 50%,
        rgba(150, 194, 246, 0) 78%),
      radial-gradient(88vw 70vw at var(--reactive-x-soft, 58vw) var(--reactive-y-soft, 48vh),
        rgba(226, 241, 255, .16) 0%,
        rgba(195, 222, 255, .09) 40%,
        rgba(150, 194, 246, 0) 80%),
      linear-gradient(90deg,
        rgba(225, 239, 255, .74) 0%,
        rgba(214, 233, 255, .68) 27%,
        rgba(202, 225, 255, .60) 55%,
        rgba(188, 216, 252, .52) 78%,
        rgba(174, 206, 248, .46) 100%) !important;
    background-size:
      100% 100%,
      100vw 100vh,
      100vw 100vh,
      100% 100% !important;
    background-position:
      0 0,
      calc(-1 * var(--headline-view-x, 0px)) calc(-1 * var(--headline-view-y, 0px)),
      calc(-1 * var(--headline-view-x, 0px)) calc(-1 * var(--headline-view-y, 0px)),
      0 0 !important;
    background-repeat:no-repeat !important;
    -webkit-background-clip:text !important;
    background-clip:text !important;
    -webkit-text-fill-color:transparent !important;
    color:transparent !important;
    backface-visibility:hidden;
    transform:translateZ(0);
    will-change:filter, text-shadow;
    transition:
      filter 1180ms cubic-bezier(.19, 1, .22, 1),
      text-shadow 1180ms cubic-bezier(.19, 1, .22, 1) !important;
  }

  html body .section.contact.contact-v107 .contact-title[data-headline-fx]{
    filter:saturate(.94) brightness(1.015) contrast(.985) !important;
    text-shadow:
      0 1px 0 rgba(255,255,255,.028),
      0 18px 44px rgba(42, 104, 184, .095) !important;
  }

  html body .section.contact.contact-v107 .contact-title[data-headline-fx]:hover,
  html body .section.contact.contact-v107 .contact-title[data-headline-fx]:focus-visible{
    filter:saturate(.98) brightness(1.115) contrast(.99) !important;
    text-shadow:
      0 1px 0 rgba(255,255,255,.055),
      0 22px 58px rgba(70, 140, 222, .16),
      0 0 34px rgba(224, 240, 255, .075) !important;
  }
}


/* v1.372 — .leistungen-outro: Abstand zwischen Über-mich-Side und Coverage-Left reduziert.
   Nach v1.362 war Coverage komplett hinter dem rechten Rand versteckt, aber beim
   horizontalen Übergang zu weit vom Über-mich-Side-Block entfernt. Der Track-Abstand
   wird nun kontrolliert reduziert: näher am Über-mich-Slide, aber weiterhin mit
   Sicherheitsreserve gegen Hervorlugen im Ruhezustand. */
@media (min-width:901px){
  html body #leistungen.section.services .leistungen-outro{
    --about-slide-distance:calc(90vw + 28px);
  }
}

@media (min-width:901px) and (max-height:820px){
  html body #leistungen.section.services .leistungen-outro{
    --about-slide-distance:calc(91.5vw + 28px);
  }
}

@media (max-width:900.98px){
  html body #leistungen.section.services .leistungen-outro{
    --about-slide-distance:calc(96vw + 24px);
  }
}

@media (max-width:560px){
  html body #leistungen.section.services .leistungen-outro{
    --about-slide-distance:calc(98vw + 18px);
  }
}


/* v1.373 — Coverage-Slide als symmetrische Bühne.
   Der linke Coverage-Block bleibt an derselben linken Kante wie die Kontakt-
   Linksspalte. Die rechte Icon-Spalte wird nicht mehr über alte feste Design-
   Koordinaten positioniert, sondern aus einer gemeinsamen Bühne berechnet:
   links und rechts entstehen optisch gleiche Außenräume. */
@media (min-width:901px){
  html body #leistungen.section.services .leistungen-outro{
    --coverage-stage-left:var(--outro-coverage-left);
    --coverage-stage-right:var(--outro-coverage-left);
    --coverage-stage-width:calc(100vw - var(--coverage-stage-left) - var(--coverage-stage-right));
    --coverage-left-w:calc(var(--about-u) * 660);
    --coverage-right-w:clamp(
      calc(var(--outro-coverage-u) * 620),
      calc(var(--coverage-stage-width) - var(--coverage-left-w) - (var(--outro-coverage-u) * 150)),
      calc(var(--outro-coverage-u) * 760)
    );
  }

  html body #leistungen.section.services .leistungen-outro-coverage-left{
    left:var(--coverage-stage-left) !important;
    width:var(--coverage-left-w) !important;
    max-width:var(--coverage-left-w) !important;
  }

  html body #leistungen.section.services .leistungen-outro-coverage-title,
  html body #leistungen.section.services .leistungen-outro-coverage-statement{
    width:var(--coverage-left-w) !important;
    max-width:var(--coverage-left-w) !important;
  }

  html body #leistungen.section.services .leistungen-outro-coverage-right{
    left:auto !important;
    right:var(--coverage-stage-right) !important;
    width:var(--coverage-right-w) !important;
    max-width:var(--coverage-right-w) !important;
  }

  html body #leistungen.section.services .leistungen-outro-coverage-item{
    width:100% !important;
  }

  html body #leistungen.section.services .leistungen-outro-coverage-item-copy p{
    width:88% !important;
    max-width:88% !important;
  }
}

@media (min-width:1700px){
  html body #leistungen.section.services .leistungen-outro-coverage-item-copy p{
    width:90% !important;
    max-width:90% !important;
  }
}

@media (min-width:901px) and (max-width:1240px){
  html body #leistungen.section.services .leistungen-outro{
    --coverage-right-w:calc(var(--outro-coverage-u) * 650);
  }

  html body #leistungen.section.services .leistungen-outro-coverage-item-copy p{
    width:92% !important;
    max-width:92% !important;
  }
}


/* v1.374 — Kontakt: obere linke Hintergrundzone dezent abdunkeln.
   Ziel: Der Titel bleibt leichter lesbar, ohne die luftige, exklusive Wirkung
   der Kontakt-Sektion zu verlieren. Es wird keine neue Bildidee eingeführt,
   sondern nur ein sehr sanfter lokaler Shade im oberen linken Bereich. */
.section.contact.contact-v107 > .section-pin.contact-pin{
  position:sticky;
  isolation:isolate;
}

.section.contact.contact-v107 > .section-pin.contact-pin::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(68vw 48vw at 11% 14%, rgba(9, 45, 86, .20) 0%, rgba(9, 45, 86, .13) 22%, rgba(9, 45, 86, .07) 42%, rgba(9, 45, 86, 0) 68%),
    radial-gradient(42vw 28vw at 18% 22%, rgba(6, 34, 72, .08) 0%, rgba(6, 34, 72, .04) 36%, rgba(6, 34, 72, 0) 72%);
}

.section.contact.contact-v107 .contact-main,
.section.contact.contact-v107 .contact-wave,
.section.contact.contact-v107 .section-reactive-bg{
  position:relative;
}

@media (max-width:900.98px){
  .section.contact.contact-v107 > .section-pin.contact-pin::before{
    background:
      radial-gradient(88vw 64vw at 14% 12%, rgba(9, 45, 86, .17) 0%, rgba(9, 45, 86, .11) 30%, rgba(9, 45, 86, .05) 50%, rgba(9, 45, 86, 0) 74%),
      radial-gradient(56vw 38vw at 20% 22%, rgba(6, 34, 72, .06) 0%, rgba(6, 34, 72, .03) 40%, rgba(6, 34, 72, 0) 74%);
  }
}


/* v1.375 — Leitidee: heller Ruhepol mit subtiler Hero-Verwandtschaft.
   Die Section bleibt strukturell unverändert; nur die weiße Bühne, Textfarbe
   und Progress-Anzeige werden minimal kühler, feiner und redaktioneller gefasst. */
html body #leitidee.section.story.theme-light{
  --story-paper-base:#f7f9fb;
  --story-ink-refined:#58646d;
  --story-accent-refined:#1f6eac;
  background:
    radial-gradient(58vw 46vw at 11% 7%, rgba(62, 122, 194, .055) 0%, rgba(62, 122, 194, .027) 34%, rgba(62, 122, 194, 0) 70%),
    radial-gradient(56vw 42vw at 84% 88%, rgba(12, 40, 78, .034) 0%, rgba(12, 40, 78, .016) 36%, rgba(12, 40, 78, 0) 72%),
    linear-gradient(180deg, #fbfcfd 0%, #f7f9fb 48%, #f4f7fa 100%) !important;
  color:var(--story-ink-refined);
}

html body #leitidee.section.story.theme-light > .section-pin{
  position:sticky;
  isolation:isolate;
  overflow:hidden;
  background:
    radial-gradient(58vw 46vw at 11% 7%, rgba(62, 122, 194, .055) 0%, rgba(62, 122, 194, .027) 34%, rgba(62, 122, 194, 0) 70%),
    radial-gradient(56vw 42vw at 84% 88%, rgba(12, 40, 78, .034) 0%, rgba(12, 40, 78, .016) 36%, rgba(12, 40, 78, 0) 72%),
    linear-gradient(180deg, #fbfcfd 0%, #f7f9fb 48%, #f4f7fa 100%) !important;
}

html body #leitidee.section.story.theme-light > .section-pin::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(920px 620px at 18% 8%, rgba(68, 130, 202, .043) 0%, rgba(68, 130, 202, .018) 38%, rgba(68, 130, 202, 0) 68%),
    linear-gradient(90deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.18) 42%, rgba(239,246,252,.34) 100%);
}

html body #leitidee .story-container{
  position:relative;
  z-index:1;
}

html body #leitidee .story-text{
  color:var(--story-ink-refined);
  letter-spacing:-.032em;
  text-shadow:
    0 1px 0 rgba(255,255,255,.78),
    0 18px 48px rgba(16, 43, 74, .045);
}

html body #leitidee .story-slide .story-text .story-accent{
  color:var(--story-accent-refined) !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,.58),
    0 14px 38px rgba(20, 82, 145, .06);
}

html body #leitidee .story-ui{
  opacity:.94;
}

html body #leitidee .story-count{
  color:rgba(61,72,82,.52);
}

html body #leitidee .story-progress{
  width:clamp(224px, 18vw, 286px);
  height:16px;
}

html body #leitidee .story-progress::before{
  height:1px;
  background:linear-gradient(90deg,
    rgba(30,63,100,0) 0%,
    rgba(30,63,100,.15) 14%,
    rgba(30,63,100,.20) 50%,
    rgba(30,63,100,.15) 86%,
    rgba(30,63,100,0) 100%);
}

html body #leitidee .story-thumb{
  height:1px;
  background:linear-gradient(90deg, rgba(35,83,136,.72), rgba(25,72,128,.86));
  box-shadow:0 0 14px rgba(47,105,168,.08);
}

html body #leitidee .story-hit:focus-visible{
  outline:1px solid rgba(30,91,151,.28);
  outline-offset:5px;
}

@media (max-width:900.98px){
  html body #leitidee.section.story.theme-light,
  html body #leitidee.section.story.theme-light > .section-pin{
    background:
      radial-gradient(92vw 68vw at 14% 6%, rgba(62, 122, 194, .052) 0%, rgba(62, 122, 194, .022) 38%, rgba(62, 122, 194, 0) 72%),
      linear-gradient(180deg, #fbfcfd 0%, #f7f9fb 52%, #f4f7fa 100%) !important;
  }

  html body #leitidee.section.story.theme-light > .section-pin::before{
    background:
      radial-gradient(84vw 62vw at 18% 8%, rgba(68, 130, 202, .036) 0%, rgba(68, 130, 202, .015) 40%, rgba(68, 130, 202, 0) 72%),
      linear-gradient(90deg, rgba(255,255,255,.58) 0%, rgba(255,255,255,.14) 48%, rgba(239,246,252,.28) 100%);
  }

  html body #leitidee .story-progress{
    width:min(252px, 66vw);
  }
}

/* v1.377 — Korrektur Leistungen: ursprüngliche vertikale Position wiederhergestellt.
   Der v1.376-Ansatz wurde bewusst entschärft: keine neuen Positionierungs-,
   Z-Index-, Isolation- oder Pseudo-Overlay-Regeln mehr für die Layout-Ebene.
   Die Veredelung bleibt rein tonal über Hintergrund, Bildfilter und Text-/UI-Farben. */
html body #leistungen.section.services{
  --leistungen-bg-grayscale:.10;
  --leistungen-bg-ghost-color: rgba(165, 196, 235, .32);
  --leistungen-bg-ghost-opacity:.58;
}

html body #leistungen.section.services.theme-dark > .section-pin,
body.has-scene #leistungen.section.services.theme-dark > .section-pin{
  background:
    radial-gradient(760px 540px at -2% 0%, rgba(148, 191, 238, .44), rgba(84, 135, 206, .19) 34%, transparent 66%),
    radial-gradient(980px 660px at 16% 16%, rgba(47, 113, 190, .38), rgba(13, 74, 151, .17) 44%, transparent 72%),
    radial-gradient(980px 760px at 12% 78%, rgba(22, 92, 173, .31), rgba(10, 60, 138, .12) 42%, transparent 72%),
    radial-gradient(920px 620px at 56% 42%, rgba(30, 94, 166, .23), rgba(8, 46, 110, .10) 42%, transparent 74%),
    radial-gradient(1120px 760px at 91% 72%, rgba(2, 19, 76, .72), rgba(2, 19, 76, .33) 48%, transparent 80%),
    linear-gradient(124deg, #0f639f 0%, #084e86 30%, #043862 60%, #021a47 100%) !important;
}

html body #leistungen.section.services > .section-pin > .section-reactive-bg{
  opacity:.60;
}

html body #leistungen.section.services > .section-pin > .section-reactive-bg::before{
  background:
    radial-gradient(42rem 28rem at 2vw 3vh, rgba(222, 236, 252, .19), transparent 64%),
    radial-gradient(34rem 22rem at 13vw 14vh, rgba(108, 153, 224, .105), transparent 65%),
    radial-gradient(34rem 22rem at var(--reactive-x, 52vw) var(--reactive-y, 42vh), rgba(88, 130, 208, .07), transparent 62%),
    radial-gradient(48rem 28rem at 17% 86%, rgba(30, 94, 171, .09), transparent 74%) !important;
  filter:blur(22px);
}

html body #leistungen.section.services > .section-pin > .section-reactive-bg::after{
  background:
    radial-gradient(18rem 16rem at 4vw 5vh, rgba(244, 248, 255, .105), transparent 58%),
    radial-gradient(14rem 12rem at 11vw 12vh, rgba(220, 234, 249, .065), transparent 60%),
    radial-gradient(20rem 16rem at calc(var(--reactive-x, 52vw) + 8px) calc(var(--reactive-y, 42vh) + 6px), rgba(135, 168, 225, .04), transparent 62%) !important;
}

/* Bestehende Motive behalten, nur ruhiger und weniger cyan einbetten.
   Keine neuen Pseudo-Layer: damit bleibt das ursprüngliche Layout exakt erhalten. */
html body #leistungen.section.services .leistungen-bg-image:nth-child(1){ --leistungen-bg-opacity:.36; }
html body #leistungen.section.services .leistungen-bg-image:nth-child(2){ --leistungen-bg-opacity:.36; }
html body #leistungen.section.services .leistungen-bg-image:nth-child(3){ --leistungen-bg-opacity:.36; }
html body #leistungen.section.services .leistungen-bg-image:nth-child(4){ --leistungen-bg-opacity:.36; }
html body #leistungen.section.services .leistungen-bg-image:nth-child(5){ --leistungen-bg-opacity:.36; }
html body #leistungen.section.services .leistungen-bg-image:nth-child(6){ --leistungen-bg-opacity:.36; }
html body #leistungen.section.services .leistungen-bg-image:nth-child(7){ --leistungen-bg-opacity:.36; }

html body #leistungen.section.services .leistungen-bg-image{
  opacity:calc(var(--bg-t, 0) * var(--leistungen-bg-opacity, .36)) !important;
  filter:grayscale(var(--leistungen-bg-grayscale, .10)) saturate(.84) brightness(.89) contrast(1.015) !important;
}

html body #leistungen.section.services .leistungen-bg-ghost{
  opacity:calc(var(--bg-ghost-t, 0) * var(--leistungen-bg-ghost-opacity, .58)) !important;
}

html body #leistungen .leistungen-kicker{
  color:rgba(241, 246, 252, .73);
}

html body #leistungen .leistungen-spectrum-trigger{
  color:rgba(226, 234, 246, .77);
  opacity:.9;
}

html body #leistungen .leistungen-spectrum-trigger:hover,
html body #leistungen .leistungen-spectrum-trigger:focus-visible{
  color:rgba(248, 250, 255, .96);
}

html body #leistungen .leistungen-spectrum-trigger:focus-visible{
  outline-color:rgba(214, 227, 248, .46);
}

html body #leistungen .leistungen-spectrum-trigger-dot{
  background:rgba(105, 143, 215, .84);
  box-shadow:0 0 16px rgba(90, 124, 194, .16);
}

html body #leistungen .leistungen-headline{
  color:#d6e1ec;
  text-shadow:0 18px 48px rgba(4, 17, 43, .15);
}

@supports ((-webkit-background-clip:text) or (background-clip:text)) {
  html body #leistungen.section.services .leistungen-headline[data-headline-fx]{
    background-image:
      linear-gradient(90deg,
        rgba(236, 243, 251, .66) 0%,
        rgba(214, 226, 243, .50) 22%,
        rgba(171, 191, 224, .23) 44%,
        rgba(96, 121, 170, 0) 70%),
      radial-gradient(42vw 28vw at 5vw 6vh,
        rgba(245, 248, 255, .40) 0%,
        rgba(225, 233, 246, .29) 20%,
        rgba(170, 188, 222, .13) 40%,
        rgba(18, 35, 79, 0) 72%),
      radial-gradient(26vw 18vw at 9vw 10vh,
        rgba(194, 211, 239, .13) 0%,
        rgba(118, 151, 216, .07) 38%,
        rgba(17, 33, 73, 0) 74%),
      radial-gradient(66vw 58vw at var(--reactive-x, 52vw) var(--reactive-y, 42vh),
        rgba(236, 241, 250, .56) 0%,
        rgba(214, 224, 242, .46) 18%,
        rgba(159, 180, 219, .31) 34%,
        rgba(82, 107, 164, .12) 54%,
        rgba(18, 35, 79, 0) 76%),
      radial-gradient(88vw 76vw at var(--reactive-x-soft, 58vw) var(--reactive-y-soft, 48vh),
        rgba(172, 193, 230, .12) 0%,
        rgba(111, 140, 207, .08) 36%,
        rgba(17, 33, 73, 0) 76%),
      linear-gradient(90deg,
        #5c88cf 0%,
        #698fd6 18%,
        #7fa2dd 40%,
        #adc2e8 66%,
        #edf3ff 100%);
    filter:saturate(.86) brightness(1.00) contrast(.985);
    text-shadow:0 0 0.01em rgba(7, 19, 41, .08);
  }
}

html body #leistungen .leistungen-text p{
  color:rgba(233, 240, 249, .80);
}

html body #leistungen .leistungen-symbol{
  color:rgba(226, 235, 246, .18);
  opacity:.54;
}

html body #leistungen .leistungen-symbol.is-passed,
html body #leistungen .leistungen-symbol.is-active{
  color:rgba(244, 248, 255, .93);
}

html body #leistungen .leistungen-symbol.is-active{
  filter:drop-shadow(0 0 16px rgba(175, 196, 230, .14));
}

@media (max-width:900.98px){
  html body #leistungen.section.services.theme-dark > .section-pin,
  body.has-scene #leistungen.section.services.theme-dark > .section-pin{
    background:
      radial-gradient(620px 460px at 0% 0%, rgba(148, 191, 238, .38), rgba(84, 135, 206, .17) 34%, transparent 66%),
      radial-gradient(760px 540px at 18% 12%, rgba(47, 113, 190, .33), rgba(13, 74, 151, .15) 44%, transparent 72%),
      radial-gradient(840px 640px at 8% 78%, rgba(22, 92, 173, .26), rgba(10, 60, 138, .105) 42%, transparent 72%),
      radial-gradient(900px 720px at 92% 72%, rgba(2, 19, 76, .64), rgba(2, 19, 76, .28) 48%, transparent 80%),
      linear-gradient(128deg, #1066a1 0%, #085087 32%, #043a64 62%, #021c49 100%) !important;
  }

  html body #leistungen.section.services .leistungen-bg-image{
    filter:grayscale(var(--leistungen-bg-grayscale, .10)) saturate(.86) brightness(.90) contrast(1.015) !important;
  }
}

@media (max-width:700px){
  html body #leistungen.section.services .leistungen-bg-image:nth-child(1){ --leistungen-bg-opacity:.33; }
  html body #leistungen.section.services .leistungen-bg-image:nth-child(2){ --leistungen-bg-opacity:.33; }
  html body #leistungen.section.services .leistungen-bg-image:nth-child(3){ --leistungen-bg-opacity:.33; }
  html body #leistungen.section.services .leistungen-bg-image:nth-child(4){ --leistungen-bg-opacity:.33; }
  html body #leistungen.section.services .leistungen-bg-image:nth-child(5){ --leistungen-bg-opacity:.33; }
  html body #leistungen.section.services .leistungen-bg-image:nth-child(6){ --leistungen-bg-opacity:.33; }
  html body #leistungen.section.services .leistungen-bg-image:nth-child(7){ --leistungen-bg-opacity:.33; }

  html body #leistungen .leistungen-text p{
    color:rgba(236, 242, 250, .84);
  }
}


/* v1.378 — Leistungen: Icon-Progression aus v1.375 wiederhergestellt.
   Der aktuelle bzw. bereits passierte Slide wird wieder über volle Deckkraft
   markiert. Der v1.377-Farbblock darf die Status-Opacity nicht neutralisieren. */
html body #leistungen .leistungen-symbol{
  opacity:.58;
}

html body #leistungen .leistungen-symbol.is-passed,
html body #leistungen .leistungen-symbol.is-active{
  opacity:1;
}

html body #leistungen .leistungen-symbol.is-active{
  --symbol-scale:1.05;
}


/* v1.379 — Über-mich: atmosphärisch veredelte helle Hintergrundfläche.
   Nur die Flächenstimmung wird angepasst: keine Typografie-, Layout-, Größen-,
   Positions-, Slide- oder Scroll-Änderungen. Die vorhandenen Opacity-Variablen
   aus der Scroll-Logik bleiben unverändert. */
html body #leistungen.section.services .leistungen-outro{
  background:transparent !important;
}

html body #leistungen.section.services .leistungen-outro::before{
  background:
    radial-gradient(70vw 58vw at 16% 6%,
      rgba(74, 103, 139, .036) 0%,
      rgba(74, 103, 139, .016) 36%,
      rgba(74, 103, 139, 0) 74%),
    radial-gradient(68vw 54vw at 88% 92%,
      rgba(74, 59, 36, .034) 0%,
      rgba(74, 59, 36, .014) 38%,
      rgba(74, 59, 36, 0) 76%),
    linear-gradient(135deg,
      #fbf8f1 0%,
      #f8f4ec 44%,
      #f4efe6 100%) !important;
}

html body #leistungen.section.services .leistungen-outro .about-bg-layer{
  background:
    radial-gradient(82vw 66vw at 18% 10%,
      rgba(74, 103, 139, .030) 0%,
      rgba(74, 103, 139, .012) 38%,
      rgba(74, 103, 139, 0) 76%),
    radial-gradient(76vw 60vw at 72% 84%,
      rgba(94, 78, 52, .030) 0%,
      rgba(94, 78, 52, .012) 40%,
      rgba(94, 78, 52, 0) 78%),
    linear-gradient(145deg,
      #fbf8f1 0%,
      #f7f3ea 50%,
      #f2ede3 100%) !important;
}

@media (max-width:900.98px){
  html body #leistungen.section.services .leistungen-outro{
    background:transparent !important;
  }

  html body #leistungen.section.services .leistungen-outro::before{
    background:
      radial-gradient(96vw 72vw at 18% 4%,
        rgba(74, 103, 139, .032) 0%,
        rgba(74, 103, 139, .013) 38%,
        rgba(74, 103, 139, 0) 76%),
      radial-gradient(92vw 72vw at 86% 94%,
        rgba(74, 59, 36, .030) 0%,
        rgba(74, 59, 36, .012) 42%,
        rgba(74, 59, 36, 0) 78%),
      linear-gradient(135deg,
        #fbf8f1 0%,
        #f8f4ec 48%,
        #f3eee5 100%) !important;
  }

  html body #leistungen.section.services .leistungen-outro .about-bg-layer{
    background:
      radial-gradient(104vw 78vw at 18% 8%,
        rgba(74, 103, 139, .026) 0%,
        rgba(74, 103, 139, .010) 40%,
        rgba(74, 103, 139, 0) 78%),
      linear-gradient(145deg,
        #fbf8f1 0%,
        #f7f3ea 52%,
        #f2ede3 100%) !important;
  }
}


/* v1.381 — Logo swap: new HaptiaCare SVG wordmark.
   Existing topbar colour-switching remains asset-based:
   light / dark / about variants are generated from the supplied SVG.
   Only optical topbar size is calibrated for the new logo proportions. */
html body .topbar .logo-img{
  height:30px;
}

@media (max-width:560px){
  html body .topbar .logo-img{
    height:24px;
  }
}


/* v1.382 — Leistungen-Detailmodal: Desktop-Inhalte bleiben sichtbar.
   Der bisherige <=1100px-Bruch in eine einspaltige Anordnung wird für
   Desktop-/Tablet-Desktop-Breiten aufgehoben. Zwischen 761px und 1100px bleibt
   die bestehende zweispaltige Modal-Logik erhalten und wird über
   --leistungen-detail-fit proportional skaliert. Mobile <=760px bleibt
   unverändert bei der bestehenden einspaltigen Scroll-Ansicht. */
@media (min-width:761px) and (max-width:1100px){
  html body .leistungen-detail{
    align-items:center;
    justify-content:center;
  }

  html body .leistungen-detail-panel{
    inset:auto !important;
    width:calc(100vw - 36px) !important;
    min-width:0 !important;
    max-width:none !important;
    height:calc(100svh - 36px) !important;
    max-height:none !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    border-radius:clamp(16px, 2.2vw, 24px) !important;
  }

  html body .leistungen-detail-grid{
    display:grid !important;
    height:100% !important;
    min-height:0 !important;
    grid-template-columns:
      minmax(calc(310px * var(--leistungen-detail-fit)), .82fr)
      minmax(calc(420px * var(--leistungen-detail-fit)), 1fr) !important;
    column-gap:calc(clamp(34px, 4.6vw, 58px) * var(--leistungen-detail-fit)) !important;
    row-gap:0 !important;
    padding:
      calc(clamp(54px, 6.8vh, 72px) * var(--leistungen-detail-fit))
      calc(clamp(38px, 5.8vw, 62px) * var(--leistungen-detail-fit))
      var(--leistungen-detail-scale-bottom-pad, calc(clamp(104px, 12vh, 138px) * var(--leistungen-detail-fit)))
      calc(clamp(38px, 5.8vw, 62px) * var(--leistungen-detail-fit)) !important;
    overflow:visible !important;
    transform:none !important;
  }

  html body .leistungen-detail-left,
  html body .leistungen-detail-right{
    width:auto !important;
    max-width:none !important;
    min-width:0 !important;
  }

  html body .leistungen-detail-left{
    display:flex !important;
    flex-direction:column !important;
  }

  html body .leistungen-detail-title,
  html body .leistungen-detail-right-title{
    font-size:calc(clamp(31px, 3.7vw, 42px) * var(--leistungen-detail-fit)) !important;
    line-height:1.04 !important;
  }

  html body .leistungen-detail-right-title{
    padding-right:calc(clamp(44px, 5vw, 64px) * var(--leistungen-detail-fit)) !important;
  }

  html body .leistungen-detail-intro,
  html body .leistungen-detail-outro{
    max-width:56ch !important;
    font-size:calc(clamp(14.2px, 1.55vw, 16px) * var(--leistungen-detail-fit)) !important;
    line-height:1.42 !important;
  }

  html body .leistungen-detail-intro{
    margin-top:calc(clamp(38px, 5.1vh, 56px) * var(--leistungen-detail-fit)) !important;
  }

  html body .leistungen-detail-highlights{
    margin-top:calc(clamp(40px, 5.9vh, 64px) * var(--leistungen-detail-fit)) !important;
    gap:calc(clamp(22px, 3vh, 34px) * var(--leistungen-detail-fit)) !important;
    padding-left:calc(clamp(10px, 1.8vw, 22px) * var(--leistungen-detail-fit)) !important;
    grid-template-columns:1fr !important;
  }

  html body .leistungen-detail-highlight{
    grid-template-columns:
      calc(clamp(58px, 6.4vw, 76px) * var(--leistungen-detail-fit))
      minmax(0, 1fr) !important;
    gap:calc(clamp(18px, 2.8vw, 28px) * var(--leistungen-detail-fit)) !important;
  }

  html body .leistungen-detail-highlight-icon{
    width:calc(clamp(54px, 6vw, 72px) * var(--leistungen-detail-fit)) !important;
    height:calc(clamp(48px, 5.4vw, 64px) * var(--leistungen-detail-fit)) !important;
  }

  html body .leistungen-detail-highlight-title{
    font-size:calc(clamp(21px, 2.55vw, 28px) * var(--leistungen-detail-fit)) !important;
  }

  html body .leistungen-detail-highlight-text{
    font-size:calc(clamp(12.7px, 1.48vw, 14.4px) * var(--leistungen-detail-fit)) !important;
    line-height:1.23 !important;
  }

  html body .leistungen-detail-outro{
    margin-top:auto !important;
  }

  html body .leistungen-detail-accordion{
    margin-top:calc(clamp(24px, 3.8vh, 42px) * var(--leistungen-detail-fit)) !important;
  }

  html body .leistungen-detail-acc-button{
    padding:calc(clamp(20px, 3.1vh, 32px) * var(--leistungen-detail-fit)) 0 !important;
    grid-template-columns:
      calc(clamp(34px, 4.2vw, 48px) * var(--leistungen-detail-fit))
      1fr
      calc(clamp(24px, 3vw, 32px) * var(--leistungen-detail-fit)) !important;
    gap:calc(clamp(8px, 1.3vw, 14px) * var(--leistungen-detail-fit)) !important;
  }

  html body .leistungen-detail-acc-number,
  html body .leistungen-detail-acc-title{
    font-size:calc(clamp(18px, 2.35vw, 25px) * var(--leistungen-detail-fit)) !important;
  }

  html body .leistungen-detail-acc-panel ul{
    padding-left:calc(clamp(34px, 4.2vw, 48px) * var(--leistungen-detail-fit)) !important;
    padding-bottom:calc(clamp(18px, 2.8vh, 30px) * var(--leistungen-detail-fit)) !important;
  }

  html body .leistungen-detail-acc-panel li{
    font-size:calc(clamp(12.8px, 1.55vw, 14.6px) * var(--leistungen-detail-fit)) !important;
    line-height:1.30 !important;
  }

  html body .leistungen-detail-close{
    right:clamp(26px, 4vw, 42px) !important;
    top:clamp(26px, 4.4vh, 42px) !important;
  }

  html body .leistungen-detail-cta{
    left:50% !important;
    right:auto !important;
    bottom:clamp(22px, 3.2vh, 36px) !important;
    width:calc(clamp(178px, 23vw, 232px) * var(--leistungen-detail-fit)) !important;
    height:calc((clamp(178px, 23vw, 232px) * var(--leistungen-detail-fit)) / 4.1212) !important;
    transform:translate3d(-50%, 0, 0) !important;
  }

  html body .leistungen-detail-cta .leistungen-detail-cta-text{
    font-size:calc(clamp(13px, 1.7vw, 15px) * var(--leistungen-detail-fit)) !important;
  }
}


/* v1.383 — Loader: ruhiges HaptiaCare-Markenritual.
   Bestehende Loader-Struktur bleibt erhalten: #page-loader, .page-loader-bg,
   .page-loader-inner und die JS-Progress-Logik werden weiterverwendet.
   Das alte maskierte Logo wird durch das neue HC-Signet, eine feine Linie und
   eine dezente Prozentanzeige ersetzt. */
html body .page-loader{
  padding:22px;
  background:#f8f4ed;
  opacity:1;
  visibility:visible;
  transition:
    opacity 780ms cubic-bezier(.22,.61,.36,1),
    visibility 780ms cubic-bezier(.22,.61,.36,1);
}

html body .page-loader[aria-hidden="true"],
html body .page-loader.is-done{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

html body .page-loader.is-hidden{
  display:none;
}

html body .page-loader-bg{
  background:#f8f4ed !important;
  transform:none;
}

html body .page-loader-bg::after{
  content:none !important;
  display:none !important;
}

html body .page-loader-inner{
  position:relative;
  z-index:1;
  gap:clamp(26px, 3.2vh, 34px);
  transform:translate3d(0, -0.6vh, 0);
  opacity:0;
  animation:loaderBrandIn 820ms cubic-bezier(.22,.61,.36,1) 80ms forwards;
}

html body .loader-logo{
  width:clamp(78px, 7.1vw, 118px);
  height:clamp(78px, 7.1vw, 118px);
}

html body .loader-logo-svg{
  display:none;
}

html body .loader-logo-signet{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}

html body .loader-tagline{
  display:none !important;
}

html body .loader-progress{
  --loader-progress:0;
  position:relative;
  display:grid;
  grid-template-columns:minmax(128px, clamp(136px, 13.8vw, 222px)) auto;
  align-items:center;
  column-gap:clamp(10px, .85vw, 14px);
  width:auto;
  min-width:0;
}

html body .loader-progress-track,
html body .loader-progress-fill{
  grid-column:1;
  grid-row:1;
  display:block;
  height:1px;
  border-radius:999px;
  transform-origin:left center;
}

html body .loader-progress-track{
  background:rgba(12, 30, 66, .15);
}

html body .loader-progress-fill{
  background:#0c1e42;
  transform:scaleX(var(--loader-progress, 0));
  transition:transform 360ms cubic-bezier(.22,.61,.36,1);
}

html body .loader-percent{
  grid-column:2;
  grid-row:1;
  min-width:3.2ch;
  color:rgba(12, 30, 66, .82);
  font:500 clamp(11px, .78vw, 13px)/1 var(--font-sans);
  letter-spacing:.055em;
  text-align:left;
  transform:translateY(.2px);
  font-variant-numeric:tabular-nums;
}

html body .page-loader.is-done .page-loader-inner{
  opacity:0;
  transform:translate3d(0, -1.1vh, 0);
  transition:
    opacity 620ms cubic-bezier(.22,.61,.36,1),
    transform 620ms cubic-bezier(.22,.61,.36,1);
}

@keyframes loaderBrandIn{
  from{
    opacity:0;
    transform:translate3d(0, .75vh, 0);
  }
  to{
    opacity:1;
    transform:translate3d(0, -0.6vh, 0);
  }
}

@media (max-width:700px){
  html body .page-loader-inner{
    gap:24px;
    transform:translate3d(0, -0.4vh, 0);
  }

  html body .loader-logo{
    width:clamp(74px, 22vw, 96px);
    height:clamp(74px, 22vw, 96px);
  }

  html body .loader-progress{
    grid-template-columns:minmax(118px, 42vw) auto;
    column-gap:10px;
  }

  html body .loader-percent{
    font-size:11px;
  }
}

@media (prefers-reduced-motion:reduce){
  html body .page-loader,
  html body .page-loader.is-done .page-loader-inner,
  html body .loader-progress-fill{
    transition:none !important;
  }

  html body .page-loader-inner{
    animation:none !important;
    opacity:1;
    transform:none;
  }
}


/* v1.385 — Topbar-Logo +8%, Leistungen-Titel linear aufgehellt.
   Keine neue Effektlogik und keine neuen Layer: Die bestehende Headline-FX-
   Mechanik der Leistungen-Slides bleibt erhalten. Die Aufhellung erfolgt
   bewusst gleichmäßig über denselben Filter in Normal-/Hover-/Focus-Zustand. */
html body .topbar .logo-img{
  height:32.4px;
}

@media (max-width:560px){
  html body .topbar .logo-img{
    height:25.92px;
  }
}

html body #leistungen .leistungen-headline{
  color:#dae4ee;
}

@supports ((-webkit-background-clip:text) or (background-clip:text)){
  html body #leistungen.section.services .leistungen-slide-head .leistungen-headline[data-headline-fx],
  html body #leistungen.section.services .leistungen-slide-head .leistungen-headline[data-headline-fx]:hover,
  html body #leistungen.section.services .leistungen-slide-head .leistungen-headline[data-headline-fx]:focus-visible{
    filter:saturate(.86) brightness(1.10) contrast(.985) !important;
  }
}


/* v1.386 — Über-mich-/Coverage-Titel: Line-height an Kontakt-Titel angleichen.
   Die finale .contact-title nutzt line-height:.92. Deshalb werden nur die
   Zeilenhöhen von .leistungen-outro-title und .leistungen-outro-coverage-title
   angepasst; keine Größen, Abstände, Positionen oder Headline-FX-Layer. */
html body #leistungen.section.services .leistungen-outro-title,
html body #leistungen.section.services .leistungen-outro-coverage-title{
  line-height:.92 !important;
}


/* v1.387 — Leistungen: Detail-Trigger während Über-mich/.leistungen-outro deaktivieren.
   Der Button wird bereits optisch ausgeblendet; zusätzlich blockiert CSS
   Pointer-Events, und JS verhindert das Öffnen des Popups während is-outro-active. */
html body #leistungen.section.services .leistungen-shell.is-outro-active .leistungen-spectrum-trigger{
  pointer-events:none !important;
  cursor:default !important;
}


/* v1.388 — Coverage-Text, Coverage-Rechtsblock und Referenzen-Landing-Titel.
   1) Der Coverage-Rechtsblock wird nur in der Desktopansicht 20px tiefer gesetzt.
   2) .references-title erhält Schriftgröße und Zeilenhöhe der finalen Kontakt-/Titelwelt.
   Keine neuen Layer, keine Scroll- oder JS-Änderungen. */
@media (min-width:901px){
  html body #leistungen.section.services .leistungen-outro-coverage-right{
    top:calc(var(--about-top-gap) + (var(--about-u) * 34) + 20px) !important;
  }

  html body.references-page .references-title{
    font-size:clamp(48.6px, min(4.725vw, 8.1vh), 79.2px) !important;
    line-height:.92 !important;
  }
}

@media (max-width:900.98px){
  html body.references-page .references-title{
    font-size:clamp(39.6px, 10.98vw, 55.8px) !important;
    line-height:.92 !important;
  }
}


/* v1.389 — Referenzen-Landing: Unterzeile leichter gesetzt. */
html body.references-page .references-kicker{
  font-weight:500 !important;
}


/* v1.392 — Kontaktformular: Nachrichtenfeld auf maximal drei sichtbare Zeilen begrenzen.
   Das Feld wächst weiterhin weich mit, drückt aber Hinweis, Checkbox und Senden-Button
   nicht mehr nach unten. Überzählige Zeilen bleiben im Textarea intern scrollbar. */
html body .section.contact.contact-v107 .contact-field--message textarea,
html body .section.contact.contact-v107.theme-dark .contact-field--message textarea{
  max-height:calc((1.35em * 3) + 12px) !important;
  overflow-y:auto;
  resize:none !important;
  scrollbar-width:thin;
}


/* v1.393 — Kontaktformular: diskreter Marken-Scrollbar für das Nachrichtenfeld.
   Die native Browser-Leiste wird ausgeblendet; ein sehr schlanker Indikator wird
   nur bei tatsächlich scrollbarem Inhalt per JS synchronisiert. Keine Daueranimation. */
html body .section.contact.contact-v107 .contact-field--message .contact-input-wrap{
  position:relative;
}

html body .section.contact.contact-v107 .contact-field--message textarea,
html body .section.contact.contact-v107.theme-dark .contact-field--message textarea{
  padding-right:clamp(18px, 1.15vw, 24px) !important;
  scrollbar-width:none !important;
  -ms-overflow-style:none;
}

html body .section.contact.contact-v107 .contact-field--message textarea::-webkit-scrollbar,
html body .section.contact.contact-v107.theme-dark .contact-field--message textarea::-webkit-scrollbar{
  width:0 !important;
  height:0 !important;
}

html body .section.contact.contact-v107 .contact-textarea-scrollbar{
  --textarea-scrollbar-thumb-h:0px;
  --textarea-scrollbar-thumb-y:0px;
  position:absolute;
  top:3px;
  right:clamp(3px, .36vw, 7px);
  bottom:calc(11px + (var(--contact-form-extra-y, 0px) * .025));
  width:5px;
  z-index:3;
  opacity:0;
  pointer-events:none;
  transform:translate3d(0,0,0);
  transition:opacity 260ms ease;
}

html body .section.contact.contact-v107 .contact-textarea-scrollbar::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:1px;
  border-radius:999px;
  background:rgba(232, 241, 255, .18);
  transform:translateX(-50%);
}

html body .section.contact.contact-v107 .contact-textarea-scrollbar-thumb{
  position:absolute;
  top:0;
  left:50%;
  width:2px;
  height:var(--textarea-scrollbar-thumb-h);
  min-height:0;
  border-radius:999px;
  background:rgba(238, 246, 255, .62);
  box-shadow:0 0 10px rgba(220, 238, 255, .18);
  transform:translate3d(-50%, var(--textarea-scrollbar-thumb-y), 0);
}

html body .section.contact.contact-v107 .contact-input-wrap.is-textarea-scrollable .contact-textarea-scrollbar{
  opacity:.62;
}

html body .section.contact.contact-v107 .contact-input-wrap.is-textarea-scrollable:focus-within .contact-textarea-scrollbar{
  opacity:.82;
}


/* v1.394 — Über-mich/Coverage: gemeinsame helle Markenbühne mit HC-Relief.
   Nur Hintergrundsystem: keine Typografie-, Layout-, Inhalts-, Scroll- oder
   Strukturänderungen. Das vollständige HC-SVG wird per CSS-Maskierung als
   riesiges, angeschnittenes Relief verwendet. */
html body #leistungen.section.services .leistungen-outro{
  --about-bg-warm:#fbf7ee;
  --about-bg-warm-soft:#f7f1e7;
  --about-bg-neutral:#f6f4ee;
  --about-bg-cool:#eff5f8;
  --about-bg-cool-blue:#e8f1f7;

  --about-relief-color-warm:rgba(104, 83, 49, 1);
  --about-relief-color-cool:rgba(63, 91, 130, 1);
  --about-relief-opacity:.044;
  --about-relief-size:clamp(980px, 122vw, 1780px);
  --about-relief-x:clamp(18vw, 31vw, 39vw);
  --about-relief-y:clamp(-36vh, -22vh, -14vh);
  --about-relief-parallax-x:calc(var(--about-coverage-t, 0) * -8vw);
  --about-relief-parallax-y:calc(var(--about-final-y-t, 0) * -3vh);

  --about-mouse-light-opacity:.055;
  --about-mouse-light-size:78vw;
  background:transparent !important;
}

html body #leistungen.section.services .leistungen-outro::before{
  opacity:var(--about-light-t, 0) !important;
  background:
    radial-gradient(72vw 54vw at 14% 8%,
      rgba(255,255,255,.42) 0%,
      rgba(255,255,255,.20) 34%,
      rgba(255,255,255,0) 72%),
    radial-gradient(86vw 62vw at 88% 88%,
      rgba(188, 209, 225,.20) 0%,
      rgba(188, 209, 225,.080) 42%,
      rgba(188, 209, 225,0) 78%),
    linear-gradient(90deg,
      var(--about-bg-warm) 0%,
      var(--about-bg-warm-soft) 28%,
      var(--about-bg-neutral) 51%,
      var(--about-bg-cool) 74%,
      var(--about-bg-cool-blue) 100%) !important;
}

html body #leistungen.section.services .leistungen-outro .about-bg-layer{
  z-index:1 !important;
  opacity:var(--about-bg-t, 0) !important;
  background:
    radial-gradient(68vw 48vw at 15% 16%,
      rgba(186, 143, 74,.040) 0%,
      rgba(186, 143, 74,.016) 38%,
      rgba(186, 143, 74,0) 76%),
    radial-gradient(72vw 50vw at 76% 22%,
      rgba(93, 126, 163,.038) 0%,
      rgba(93, 126, 163,.014) 40%,
      rgba(93, 126, 163,0) 78%),
    radial-gradient(82vw 58vw at 84% 92%,
      rgba(94, 117, 145,.035) 0%,
      rgba(94, 117, 145,.012) 40%,
      rgba(94, 117, 145,0) 78%),
    linear-gradient(90deg,
      rgba(251,247,238,.94) 0%,
      rgba(247,242,233,.90) 30%,
      rgba(246,244,238,.90) 52%,
      rgba(240,246,249,.92) 75%,
      rgba(232,241,247,.94) 100%) !important;
}

/* Vollständiges Monogramm als farblich steuerbare Maske, nicht als beschnittene Datei. */
html body #leistungen.section.services .leistungen-outro .about-bg-layer::before{
  content:"" !important;
  display:none;
  position:absolute;
  left:var(--about-relief-x);
  top:var(--about-relief-y);
  width:var(--about-relief-size);
  aspect-ratio:1.0148;
  z-index:1;
  pointer-events:none;
  opacity:var(--about-relief-opacity);
  background:
    linear-gradient(90deg,
      var(--about-relief-color-warm) 0%,
      rgba(105, 91, 65, 1) 38%,
      rgba(78, 95, 119, 1) 68%,
      var(--about-relief-color-cool) 100%);
  transform:
    translate3d(
      var(--about-relief-parallax-x),
      var(--about-relief-parallax-y),
      0
    );
  transform-origin:50% 50%;
  will-change:transform;
}

/* Sehr leiser Lichtreflex über vorhandene pointer-reactive Variablen, ohne neue JS-Logik. */
html body #leistungen.section.services .leistungen-outro .about-bg-layer::after{
  content:"" !important;
  display:none !important;
  position:absolute !important;
  inset:-1px !important;
  z-index:2 !important;
  pointer-events:none !important;
  opacity:0 !important;
  background:
    radial-gradient(var(--about-mouse-light-size) calc(var(--about-mouse-light-size) * .66) at var(--reactive-x, 52vw) var(--reactive-y, 42vh),
      rgba(255,255,255,var(--about-mouse-light-opacity)) 0%,
      rgba(255,255,255,calc(var(--about-mouse-light-opacity) * .55)) 32%,
      rgba(255,255,255,0) 74%) !important;
  transition:opacity 900ms cubic-bezier(.22,.61,.36,1) !important;
  will-change:opacity, background-position;
}

@supports ((-webkit-mask-image:url("")) or (mask-image:url(""))){
  html body #leistungen.section.services .leistungen-outro .about-bg-layer::before{
    display:block !important;
    -webkit-mask-image:url('/assets/img/hc-monogram-relief.svg');
    mask-image:url('/assets/img/hc-monogram-relief.svg');
    -webkit-mask-repeat:no-repeat;
    mask-repeat:no-repeat;
    -webkit-mask-position:center;
    mask-position:center;
    -webkit-mask-size:contain;
    mask-size:contain;
  }
}

@media (hover:hover) and (pointer:fine){
  html body #leistungen.section.services .leistungen-shell.is-outro-active .leistungen-outro .about-bg-layer::after{
    display:block !important;
    opacity:1 !important;
  }
}

@media (max-width:900.98px){
  html body #leistungen.section.services .leistungen-outro{
    --about-relief-opacity:.028;
    --about-relief-size:clamp(720px, 155vw, 1180px);
    --about-relief-x:14vw;
    --about-relief-y:-10vh;
    --about-relief-parallax-x:calc(var(--about-coverage-t, 0) * -4vw);
    --about-relief-parallax-y:0px;
  }

  html body #leistungen.section.services .leistungen-outro::before{
    background:
      radial-gradient(94vw 68vw at 18% 8%,
        rgba(255,255,255,.34) 0%,
        rgba(255,255,255,.16) 38%,
        rgba(255,255,255,0) 76%),
      linear-gradient(112deg,
        var(--about-bg-warm) 0%,
        var(--about-bg-warm-soft) 42%,
        var(--about-bg-cool) 100%) !important;
  }

  html body #leistungen.section.services .leistungen-outro .about-bg-layer{
    background:
      radial-gradient(106vw 74vw at 18% 8%,
        rgba(186, 143, 74,.030) 0%,
        rgba(186, 143, 74,.010) 40%,
        rgba(186, 143, 74,0) 80%),
      radial-gradient(108vw 78vw at 82% 90%,
        rgba(93, 126, 163,.028) 0%,
        rgba(93, 126, 163,.010) 42%,
        rgba(93, 126, 163,0) 82%),
      linear-gradient(120deg,
        rgba(251,247,238,.94) 0%,
        rgba(247,242,233,.92) 44%,
        rgba(238,246,249,.94) 100%) !important;
  }

  html body #leistungen.section.services .leistungen-outro .about-bg-layer::after{
    display:none !important;
  }
}

@media (prefers-reduced-motion:reduce){
  html body #leistungen.section.services .leistungen-outro{
    --about-relief-parallax-x:0px;
    --about-relief-parallax-y:0px;
  }

  html body #leistungen.section.services .leistungen-outro .about-bg-layer::before{
    transform:none !important;
    will-change:auto !important;
  }

  html body #leistungen.section.services .leistungen-outro .about-bg-layer::after{
    display:none !important;
  }
}


/* v1.395 — CTA-Geometrie und Referenzen-Modal-Ausrichtung.
   1) Alle .leistungen-detail-cta-Buttons wachsen nach Textlänge und behalten
      links sowie rechts vor dem Kreis denselben optischen Textabstand.
   2) Das Referenzen-Modal erhält einen Gespräch-anfragen-Button in der linken
      Headline-Spalte.
   3) Titel und Fließtext beginnen im Referenzen-Modal auf derselben oberen Achse;
      der Titel wächst nicht mehr nach oben aus der Meta-Achse heraus. */
html body .leistungen-detail-cta{
  --detail-cta-outer-gap:calc((var(--detail-cta-height, 54px) - var(--detail-cta-circle-size, 44px)) / 2);
  --detail-cta-text-gap:calc(var(--detail-cta-height, 54px) * .62);
  box-sizing:border-box !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  width:max-content !important;
  min-width:var(--detail-cta-width, 240px) !important;
  max-width:calc(100vw - 48px) !important;
  padding:
    0
    calc(var(--detail-cta-circle-size, 44px) + var(--detail-cta-outer-gap) + var(--detail-cta-text-gap))
    0
    var(--detail-cta-text-gap) !important;
}

html body .leistungen-detail-cta .leistungen-detail-cta-text{
  position:relative !important;
  left:auto !important;
  right:auto !important;
  top:auto !important;
  z-index:1;
  display:block !important;
  min-width:0 !important;
  max-width:none !important;
  overflow:visible !important;
  text-overflow:clip !important;
  white-space:nowrap !important;
  transform:none !important;
}

html body .leistungen-detail-cta .leistungen-detail-cta-circle{
  position:absolute !important;
  right:var(--detail-cta-outer-gap) !important;
  top:50% !important;
  transform:translate3d(0, -50%, 0) !important;
}

@media (min-width:1101px){
  html body.references-page .references-modal-layout{
    --references-modal-meta-y:clamp(170px, 21vh, 205px);
    --references-modal-title-meta-gap:clamp(28px, 3.8vh, 46px);
  }

  html body.references-page .references-modal-heading{
    position:relative !important;
    align-self:stretch !important;
    height:100% !important;
    min-height:0 !important;
  }

  html body.references-page .references-modal-title{
    position:absolute !important;
    left:0 !important;
    top:0 !important;
    bottom:auto !important;
    width:100% !important;
    max-width:410px !important;
  }

  html body.references-page .references-modal-meta{
    position:absolute !important;
    left:0 !important;
    top:var(--references-modal-meta-y) !important;
    margin:0 !important;
  }

  html body.references-page .references-modal-content{
    align-self:stretch !important;
    margin-top:0 !important;
    height:100% !important;
    max-height:none !important;
    min-height:0 !important;
    padding-top:0 !important;
  }

  html body.references-page .references-modal-cta{
    position:absolute !important;
    left:0 !important;
    right:auto !important;
    top:auto !important;
    bottom:0 !important;
    margin:0 !important;
    transform:none !important;
    transform-origin:left bottom !important;
    z-index:3 !important;
  }
}

@media (max-width:1100px){
  html body.references-page .references-modal-cta{
    position:relative !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;
    margin:clamp(28px, 4vh, 42px) 0 0 !important;
    transform:none !important;
  }
}


/* v1.397 — Dunkler HaptiaCare-Loader.
   Bestehende Loader-Struktur und JS-Progress-Logik bleiben erhalten:
   #page-loader, .page-loader-bg, .page-loader-inner, .loader-logo,
   .loader-progress und data-loader-progress-fill werden weiterverwendet.
   Die Prozentanzeige wird durch eine ruhige Markenunterzeile ersetzt. */
html body .page-loader{
  --loader-bg-start:#011840;
  --loader-bg-end:#062251;
  --loader-gold:#c49a55;
  --loader-line-track:rgba(226, 235, 246, .34);
  --loader-line-fill:rgba(241, 246, 255, .78);
  --loader-status-color:rgba(221, 229, 242, .72);
  --loader-logo-size:clamp(94px, 7.6vw, 134px);
  --loader-line-width:clamp(172px, 16.8vw, 268px);
  padding:22px;
  background:linear-gradient(135deg, var(--loader-bg-start) 0%, var(--loader-bg-end) 100%) !important;
  opacity:1;
  visibility:visible;
  transition:
    opacity 860ms cubic-bezier(.22,.61,.36,1),
    visibility 860ms cubic-bezier(.22,.61,.36,1);
}

html body .page-loader[aria-hidden="true"],
html body .page-loader.is-done{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

html body .page-loader.is-hidden{
  display:none;
}

html body .page-loader-bg{
  background:linear-gradient(135deg, #011840 0%, #062251 100%) !important;
  transform:none !important;
}

html body .page-loader-bg::after{
  content:none !important;
  display:none !important;
}

html body .page-loader-inner{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:0;
  transform:translate3d(0, -0.7vh, 0);
  opacity:0;
  animation:loaderDarkBrandIn 980ms cubic-bezier(.22,.61,.36,1) 90ms forwards;
}

html body .loader-logo{
  position:relative;
  width:var(--loader-logo-size);
  height:var(--loader-logo-size);
  display:grid;
  place-items:center;
  margin:0;
  color:var(--loader-gold);
}

html body .loader-logo::before{
  content:"";
  position:absolute;
  inset:0;
  display:block;
  background:var(--loader-gold);
  opacity:.94;
  -webkit-mask-image:url('/assets/img/hc-monogram-relief.svg');
  mask-image:url('/assets/img/hc-monogram-relief.svg');
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-size:contain;
  mask-size:contain;
}

html body .loader-logo-signet{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  opacity:.92;
  filter:brightness(0) saturate(100%) invert(69%) sepia(24%) saturate(806%) hue-rotate(359deg) brightness(88%) contrast(86%);
}

@supports ((-webkit-mask-image:url('/assets/img/hc-monogram-relief.svg')) or (mask-image:url('/assets/img/hc-monogram-relief.svg'))){
  html body .loader-logo-signet{
    opacity:0;
  }
}

html body .loader-logo-svg,
html body .loader-tagline,
html body .loader-percent{
  display:none !important;
}

html body .loader-progress{
  --loader-progress:0;
  position:relative;
  display:block;
  width:var(--loader-line-width);
  height:1px;
  margin-top:clamp(34px, 4.2vh, 54px);
  min-width:0;
  overflow:hidden;
}

html body .loader-progress-track,
html body .loader-progress-fill{
  position:absolute;
  left:0;
  top:0;
  display:block;
  width:100%;
  height:1px;
  border-radius:999px;
  transform-origin:left center;
}

html body .loader-progress-track{
  background:var(--loader-line-track);
}

html body .loader-progress-fill{
  background:var(--loader-line-fill);
  transform:scaleX(var(--loader-progress, 0));
  transition:transform 420ms cubic-bezier(.22,.61,.36,1);
}

html body .loader-status{
  margin:clamp(13px, 1.65vh, 20px) 0 0;
  padding:0;
  color:var(--loader-status-color);
  font-family:"InstrumentSerif-DE-RegularOnly", var(--font-display-serif), var(--font-serif);
  font-size:clamp(13px, .86vw, 16px);
  line-height:1.15;
  font-weight:400;
  letter-spacing:.035em;
  text-align:center;
  white-space:nowrap;
  text-rendering:geometricPrecision;
}

html body .page-loader.is-done .page-loader-inner{
  opacity:0;
  transform:translate3d(0, -1.15vh, 0);
  transition:
    opacity 680ms cubic-bezier(.22,.61,.36,1),
    transform 680ms cubic-bezier(.22,.61,.36,1);
}

@keyframes loaderDarkBrandIn{
  from{
    opacity:0;
    transform:translate3d(0, .65vh, 0);
  }
  to{
    opacity:1;
    transform:translate3d(0, -0.7vh, 0);
  }
}

@media (max-width:700px){
  html body .page-loader{
    --loader-logo-size:clamp(82px, 24vw, 108px);
    --loader-line-width:min(230px, 48vw);
  }

  html body .page-loader-inner{
    transform:translate3d(0, -0.45vh, 0);
  }

  html body .loader-progress{
    margin-top:clamp(28px, 4vh, 42px);
  }

  html body .loader-status{
    font-size:clamp(12px, 3.35vw, 14px);
    letter-spacing:.03em;
  }
}

@media (prefers-reduced-motion:reduce){
  html body .page-loader,
  html body .page-loader.is-done .page-loader-inner,
  html body .loader-progress-fill{
    transition:none !important;
  }

  html body .page-loader-inner{
    animation:none !important;
    opacity:1;
    transform:none;
  }
}


/* v1.398 — Loader-Monogramm entkoppelt + Topbar-Plus filigraner.
   Das Loader-Monogramm verwendet eine eigene SVG-Kopie, damit spätere
   Loader-Feinjustierungen das Über-mich-/Coverage-Relief nicht beeinflussen.
   Das Topbar-Plus bleibt strukturell gleich; nur die Strichstärke wird
   zurückgenommen. Der offene/gedrehte Zustand nutzt dieselben Linien. */
html body .loader-logo::before{
  -webkit-mask-image:url('/assets/img/loader-hc-monogram.svg') !important;
  mask-image:url('/assets/img/loader-hc-monogram.svg') !important;
}

@supports ((-webkit-mask-image:url('/assets/img/loader-hc-monogram.svg')) or (mask-image:url('/assets/img/loader-hc-monogram.svg'))){
  html body .loader-logo-signet{
    opacity:0;
  }
}

html body .topbar .menu-icon::before,
html body .topbar .menu-icon::after{
  width:11.5px !important;
  height:1.35px !important;
  border-radius:999px !important;
}

@media (max-width:560px){
  html body .topbar .menu-icon::before,
  html body .topbar .menu-icon::after{
    width:11px !important;
    height:1.25px !important;
  }
}


/* v1.399 — Referenzen-Modal: Titeltypografie, flexible Meta-Zeile und Textachsen.
   Der Titel steht fest oben im linken Modalbereich; die Meta-Zeile folgt nun
   natürlich mit konstantem Abstand unter dem mehrzeiligen Titel. Der rechte
   Fließtext beginnt auf derselben oberen Achse. */
@media (min-width:1101px){
  html body.references-page .references-modal-heading{
    position:relative !important;
    align-self:stretch !important;
    height:100% !important;
    min-height:0 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
  }

  html body.references-page .references-modal-title{
    position:relative !important;
    left:auto !important;
    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    width:100% !important;
    max-width:410px !important;
    margin:0 !important;
    font-family:"InstrumentSerif-DE-RegularOnly", var(--font-display-serif), var(--font-serif) !important;
    font-style:normal !important;
    font-synthesis:none !important;
    font-size:3.725vw !important;
    line-height:.92 !important;
    font-weight:400 !important;
    letter-spacing:-.014em !important;
    color:#2b64a3 !important;
    text-wrap:balance;
  }

  html body.references-page .references-modal-meta{
    position:relative !important;
    left:auto !important;
    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    margin:clamp(24px, 3.1vh, 36px) 0 0 !important;
  }

  html body.references-page .references-modal-content{
    align-self:stretch !important;
    margin-top:0 !important;
    height:100% !important;
    max-height:none !important;
    min-height:0 !important;
    padding-top:0 !important;
  }
}

@media (max-width:1100px){
  html body.references-page .references-modal-title{
    font-family:"InstrumentSerif-DE-RegularOnly", var(--font-display-serif), var(--font-serif) !important;
    font-style:normal !important;
    font-synthesis:none !important;
    line-height:.92 !important;
    font-weight:400 !important;
    letter-spacing:-.014em !important;
  }

  html body.references-page .references-modal-meta{
    position:relative !important;
    left:auto !important;
    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    margin:clamp(18px, 2.8vh, 28px) 0 0 !important;
  }
}


/* v1.400 — Referenzen-Modal: Tablet/Mobile-Optimierung.
   Desktop >=1101px bleibt unverändert. Zwischen 761px und 1100px wird das
   Modal-Inhaltsraster schmaler, der Titel größer, der CTA ausgeblendet und
   der Scrollbereich bis 50px vor den unteren Modalrand geführt. Unter 761px
   werden CTA und Pfeile ausgeblendet; der Scrollbereich endet 30px vor dem
   unteren Modalrand. */
@media (min-width:761px) and (max-width:1100px){
  html body.references-page .references-modal-layout{
    width:min(760px, calc(100% - 190px)) !important;
    max-width:calc(100% - 190px) !important;
    height:100% !important;
    margin-inline:auto !important;
    padding:92px 0 50px !important;
    box-sizing:border-box !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    grid-template-rows:auto minmax(0, 1fr) !important;
    row-gap:clamp(26px, 3.4vh, 38px) !important;
  }

  html body.references-page .references-modal-heading{
    max-width:100% !important;
    width:100% !important;
  }

  html body.references-page .references-modal-title{
    font-size:clamp(42px, 5vw, 56px) !important;
    line-height:.92 !important;
  }

  html body.references-page .references-modal-meta{
    margin-top:clamp(18px, 2.6vh, 26px) !important;
  }

  html body.references-page .references-modal-content{
    align-self:stretch !important;
    justify-self:stretch !important;
    width:100% !important;
    max-width:100% !important;
    height:100% !important;
    max-height:none !important;
    min-height:0 !important;
    margin-top:0 !important;
    padding-right:clamp(10px, 1.4vw, 16px) !important;
    box-sizing:border-box !important;
  }

  html body.references-page .references-modal-text,
  html body.references-page .references-modal-text p,
  html body.references-page .references-modal-text ul,
  html body.references-page .references-modal-text li{
    font-weight:500 !important;
  }

  html body.references-page .references-modal-cta{
    display:none !important;
  }
}

@media (max-width:760px){
  html body.references-page .references-modal-layout{
    height:100% !important;
    padding:76px 26px 30px !important;
    box-sizing:border-box !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    grid-template-rows:auto minmax(0, 1fr) !important;
    row-gap:clamp(20px, 3.4vh, 30px) !important;
  }

  html body.references-page .references-modal-heading{
    max-width:100% !important;
    width:100% !important;
  }

  html body.references-page .references-modal-content{
    align-self:stretch !important;
    justify-self:stretch !important;
    width:100% !important;
    max-width:100% !important;
    height:100% !important;
    max-height:none !important;
    min-height:0 !important;
    margin-top:0 !important;
    padding-right:10px !important;
    box-sizing:border-box !important;
  }

  html body.references-page .references-modal-text,
  html body.references-page .references-modal-text p,
  html body.references-page .references-modal-text ul,
  html body.references-page .references-modal-text li{
    font-weight:500 !important;
  }

  html body.references-page .references-modal-cta,
  html body.references-page .references-modal-arrow{
    display:none !important;
  }
}


/* v1.490 — Leitidee: Mobile-Editorial-Sequenz erst unterhalb des Hauptbreakpoints.
   Desktop-/Tablet-Desktop bleibt ab 901px vollständig in der gepinnten
   Scroll-Slide-Bühne. Erst im echten Mobile-Layout bis 900.98px fließen
   alle drei Aussagen sichtbar untereinander, ohne Progress-UI und ohne
   leeren Scrollraum. */
@media (max-width:900.98px){
  html body #leitidee.section.story{
    padding-top:0 !important;
    padding-bottom:0 !important;
    min-height:0 !important;
    height:auto !important;
  }

  html body #leitidee.section.story.theme-light > .section-pin{
    position:relative !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;
    height:auto !important;
    min-height:0 !important;
    overflow:hidden !important;
  }

  html body #leitidee .story-container{
    display:block !important;
    width:100% !important;
    max-width:none !important;
    padding-left:var(--mobile-page-pad, clamp(22px, 6vw, 48px)) !important;
    padding-right:var(--mobile-page-pad, clamp(22px, 6vw, 48px)) !important;
  }

  html body #leitidee .story-slider{
    min-height:0 !important;
    height:auto !important;
    display:block !important;
    padding:clamp(96px, 13svh, 132px) 0 clamp(104px, 14svh, 148px) !important;
    text-align:center !important;
  }

  html body #leitidee .story-slides{
    position:relative !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:clamp(72px, 10svh, 116px) !important;
    width:min(100%, 780px) !important;
    min-height:0 !important;
    height:auto !important;
    margin:0 auto !important;
  }

  html body #leitidee .story-slide,
  html body #leitidee .story-slide.is-active,
  html body #leitidee .story-slide.is-reset,
  html body #leitidee .story-slide.is-animating{
    position:relative !important;
    inset:auto !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    min-height:0 !important;
    height:auto !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    transition:none !important;
    pointer-events:auto !important;
  }

  html body #leitidee .story-text{
    width:100% !important;
    max-width:min(100%, 22ch) !important;
    margin:0 auto !important;
    white-space:normal !important;
  }

  html body #leitidee .story-line,
  html body #leitidee .story-line__inner{
    display:inline !important;
    opacity:1 !important;
    visibility:visible !important;
    filter:none !important;
    transform:none !important;
    animation:none !important;
    transition:none !important;
    will-change:auto !important;
  }

  html body #leitidee .story-line{
    overflow:visible !important;
  }

  html body #leitidee .story-ui,
  html body #leitidee .story-count,
  html body #leitidee .story-progress{
    display:none !important;
  }
}

@media (max-width:560px){
  html body #leitidee .story-slider{
    padding:clamp(84px, 11svh, 112px) 0 clamp(92px, 12svh, 126px) !important;
  }

  html body #leitidee .story-slides{
    gap:clamp(58px, 8.5svh, 84px) !important;
  }

  html body #leitidee .story-text{
    max-width:min(100%, 21ch) !important;
  }
}

@media (max-width:900.98px) and (prefers-reduced-motion:reduce){
  html body #leitidee .story-slide,
  html body #leitidee .story-line__inner{
    animation:none !important;
    transition:none !important;
  }
}


/* v1.407 — Leistungen Mobile/Tablet Cold-Load Stabilisierung.
   Dieser Block greift nur im bestehenden statischen Mobile/Tablet-Modus (<=1100px)
   und nur wenn app.js den Sicherheitszustand .is-mobile-static-stable setzt.
   Desktop ab 1101px bleibt unberührt. */
@media (max-width:1100px){
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable{
    overflow:visible !important;
    --leistungen-stage-opacity:1 !important;
    --leistungen-symbol-row-opacity:1 !important;
    --leistungen-panel-progress:1 !important;
    --leistungen-person-progress:1 !important;
    --leistungen-copy-progress:1 !important;
    --leistungen-signature-opacity:1 !important;
    --leistungen-signature-progress:1 !important;
    --about-bg-t:1 !important;
    --about-light-t:1 !important;
    --about-content-t:1 !important;
    --about-final-text-t:1 !important;
    --about-coverage-t:1 !important;
    --about-final-y-t:0 !important;
  }

  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-topline,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-stage,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-symbol-row{
    opacity:1 !important;
    visibility:visible !important;
    filter:none !important;
  }

  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-slide,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-slide.is-active{
    position:relative !important;
    inset:auto !important;
    display:block !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:none !important;
  }

  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-slide-inner,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-slide-head,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-slide-copy,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-headline,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-text{
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    pointer-events:auto !important;
  }

  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-text,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-text.is-active{
    display:block !important;
    opacity:1 !important;
    visibility:visible !important;
  }

  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro{
    position:relative !important;
    inset:auto !important;
    display:block !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:none !important;
    overflow:hidden !important;
  }

  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-layout{
    position:relative !important;
    inset:auto !important;
    display:block !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    min-height:0 !important;
  }

  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-visual,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-copy,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-copy-inner,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-signature{
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    pointer-events:auto !important;
  }

  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-coverage{
    position:relative !important;
    inset:auto !important;
    display:block !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:none !important;
    min-height:0 !important;
    margin-top:clamp(72px, 12svh, 104px) !important;
    z-index:2 !important;
  }

  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-coverage-inner{
    position:relative !important;
    inset:auto !important;
    display:block !important;
    width:100% !important;
    height:auto !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
  }

  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-coverage-left,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-coverage-right{
    position:relative !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;
    display:block !important;
    width:100% !important;
    max-width:38rem !important;
    min-height:0 !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
  }

  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-coverage-right{
    margin-top:clamp(48px, 8svh, 76px) !important;
    display:flex !important;
    flex-direction:column !important;
    gap:clamp(30px, 6svh, 48px) !important;
  }

  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-coverage-title,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-coverage-statement,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-coverage-item,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-coverage-item-copy,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-coverage-item-copy p{
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
  }
}


/* v1.407 — Leistungen Mobile/Tablet Cold-Load robust stabilisiert.
   Ursache: Beim direkten Laden in schmaler Breite bleibt der Leistungen-Scroller
   als .reveal teilweise im unsichtbaren Ausgangszustand, während die dunkle
   Section-Fläche sichtbar ist. Zusätzlich setzte v1.405 den Stabilisierungsklasse
   auf .leistungen-scroller, während der CSS-Block auf .leistungen-shell zielte.
   Dieser Safety-Block macht den bestehenden statischen Mobile/Tablet-Modus
   unabhängig vom Reveal-/Scroll-Initialisierungszeitpunkt. Desktop ab 1101px bleibt unberührt. */
@media (max-width:1100px){
  html body #leistungen.section.services.is-mobile-static-stable,
  html body #leistungen.section.services .leistungen-scroller.is-mobile-static-stable,
  html body #leistungen.section.services .leistungen-scroller.reveal,
  html body #leistungen.section.services .leistungen-scroller.reveal.is-visible,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable{
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
  }

  html body #leistungen.section.services .leistungen-scroller.is-mobile-static-stable{
    display:block !important;
    min-height:0 !important;
    height:auto !important;
    overflow:visible !important;
  }

  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable,
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-shell{
    display:block !important;
    min-height:0 !important;
    height:auto !important;
    overflow:visible !important;
    --leistungen-stage-opacity:1 !important;
    --leistungen-symbol-row-opacity:1 !important;
    --leistungen-panel-progress:1 !important;
    --leistungen-person-progress:1 !important;
    --leistungen-copy-progress:1 !important;
    --leistungen-social-progress:1 !important;
    --leistungen-signature-opacity:1 !important;
    --leistungen-signature-progress:1 !important;
    --leistungen-whiteout-progress:0 !important;
    --about-bg-t:1 !important;
    --about-light-t:1 !important;
    --about-content-t:1 !important;
    --about-final-text-t:1 !important;
    --about-coverage-t:1 !important;
    --about-final-y-t:0 !important;
  }

  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-topline,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-stage,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-symbol-row,
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-topline,
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-stage,
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-symbol-row{
    display:flex;
    opacity:1 !important;
    visibility:visible !important;
    filter:none !important;
    transform:none !important;
  }

  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-stage,
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-stage{
    display:block !important;
  }

  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-slide,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-slide.is-active,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-slide[aria-hidden="true"],
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-slide,
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-slide.is-active,
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-slide[aria-hidden="true"]{
    position:relative !important;
    inset:auto !important;
    display:block !important;
    min-height:0 !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:none !important;
  }

  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-slide-inner,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-slide-head,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-slide-copy,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-headline,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-text,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-text[aria-hidden="true"],
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-slide-inner,
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-slide-head,
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-slide-copy,
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-headline,
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-text,
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-text[aria-hidden="true"]{
    display:block !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    pointer-events:auto !important;
  }

  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro,
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro{
    position:relative !important;
    inset:auto !important;
    display:block !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:none !important;
    overflow:hidden !important;
  }
}


/* v1.408 — Leistungen: Progress-Icons in Mobile/Tablet ausblenden.
   Die sieben Symbol-Icons gehören zur Desktop-Inszenierung. Im statischen
   Mobile-/Tablet-Fluss dürfen sie zwischen Coverage und Kontakt nicht als
   eigener blauer Streifen erscheinen. Desktop ab 1101px bleibt unverändert. */
@media (max-width:1100px){
  html body #leistungen.section.services .leistungen-symbol-row,
  html body #leistungen.section.services .leistungen-symbol-row[aria-hidden],
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-symbol-row,
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-symbol-row{
    display:none !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    height:0 !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
  }
}


/* v1.409 — Mobile-only Feintuning bis 760px.
   Desktop und Tablet bleiben unangetastet. */
@media (max-width:760px){
  html body #leitidee .story-text{
    font-size:clamp(17px, 4.68vw, 23.4px) !important;
  }

  html body #leistungen.section.services .leistungen-headline{
    font-size:clamp(34px, 9.92vw, 50px) !important;
  }

  html body #leistungen.section.services .leistungen-topline{
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:flex-start !important;
    gap:clamp(10px, 2.8svh, 16px) !important;
  }

  html body #leistungen.section.services .leistungen-kicker{
    max-width:100% !important;
  }

  html body #leistungen.section.services .leistungen-spectrum-trigger{
    align-self:flex-start !important;
    justify-content:flex-start !important;
    max-width:100% !important;
    width:auto !important;
    text-align:left !important;
  }
}


/* v1.410 — Leistungen Mobile/Tablet Feinschliff bis 1100px.
   Desktop ab 1101px bleibt unberührt.
   1) Leistungen-Titel dürfen die volle Breite nutzen.
   2) Über-mich-Zitat wird auf hellem Hintergrund sicher dunkel gesetzt.
   3) Der blaue Reststreifen nach Coverage wird entfernt, indem der statische
      Mobile-/Tablet-Flow keine dunkle Shell-Unterkante mehr stehen lässt. */
@media (max-width:1100px){
  html body #leistungen.section.services .leistungen-headline,
  html body #leistungen.section.services .leistungen-slide-head .leistungen-headline,
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-headline,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-headline{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
  }

  html body #leistungen.section.services .leistungen-outro-quote,
  html body #leistungen.section.services .leistungen-outro-quote p,
  html body #leistungen.section.services.theme-dark .leistungen-outro-side .leistungen-outro-quote,
  html body #leistungen.section.services.theme-dark .leistungen-outro-side .leistungen-outro-quote p{
    color:#28262a !important;
    -webkit-text-fill-color:#28262a !important;
    text-shadow:none !important;
  }

  html body #leistungen.section.services.is-mobile-static-stable,
  html body #leistungen.section.services.is-mobile-static-stable > .section-pin,
  html body #leistungen.section.services .leistungen-scroller.is-mobile-static-stable,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable,
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-shell{
    min-height:0 !important;
    height:auto !important;
  }

  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable,
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-shell{
    padding-bottom:0 !important;
    margin-bottom:0 !important;
  }

  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro,
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro{
    margin-bottom:0 !important;
  }

  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-coverage,
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-coverage{
    margin-bottom:0 !important;
  }

  html body #leistungen.section.services.is-mobile-static-stable .leistungen-symbol-row,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-symbol-row{
    display:none !important;
    height:0 !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
  }
}


/* v1.411 — Mobile/Tablet: Titelbreiten, Quote-Zentrierung und Referenzen-Siegel.
   Greift ausschließlich bis 1100px. Desktop ab 1101px bleibt unverändert. */
@media (max-width:1100px){
  html body #leistungen.section.services .leistungen-outro-title,
  html body #leistungen.section.services .leistungen-outro-coverage-title,
  html body .section.contact.contact-v107 .contact-title,
  html body .contact-title{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
  }

  html body #leistungen.section.services .leistungen-outro-title,
  html body #leistungen.section.services .leistungen-outro-coverage-title{
    text-wrap:balance;
  }

  html body #leistungen.section.services .leistungen-outro-quote,
  html body #leistungen.section.services .leistungen-outro-quote p{
    text-align:center !important;
  }

  html body #leistungen.section.services .about-references-seal,
  html body #leistungen.section.services .leistungen-outro-side .about-references-seal{
    position:relative !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;
    display:block !important;
    margin-left:auto !important;
    margin-right:auto !important;
    transform:none !important;
  }
}


/* v1.412 — Mobile/Tablet: Über-mich/Coverage als klare vertikale Sequenz.
   Greift ausschließlich bis 1100px im statischen Mobile/Tablet-Zustand.
   Desktop ab 1101px bleibt unberührt.
   Ziel: keine Überlagerung von Über-mich- und Coverage-Inhalten bei Tabletbreiten;
   der Abstand zwischen Referenzen-Siegel und Coverage-Block wird deutlich reduziert. */
@media (max-width:1100px){
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro{
    overflow:visible !important;
    padding:
      clamp(58px, 7svh, 84px)
      clamp(28px, 7vw, 72px)
      0 !important;
    box-sizing:border-box !important;
  }

  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-layout,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-layout{
    position:relative !important;
    inset:auto !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    gap:clamp(28px, 4.6svh, 48px) !important;
    width:100% !important;
    max-width:none !important;
    min-height:0 !important;
    height:auto !important;
    margin:0 auto !important;
    padding:0 !important;
    overflow:visible !important;
    transform:none !important;
    pointer-events:auto !important;
  }

  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-visual,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-visual{
    position:relative !important;
    inset:auto !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;
    width:min(260px, 36vw) !important;
    height:auto !important;
    max-width:100% !important;
    min-height:0 !important;
    margin:0 auto clamp(8px, 2svh, 20px) !important;
    padding:0 !important;
    display:flex !important;
    justify-content:center !important;
    align-items:flex-start !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    pointer-events:none !important;
    z-index:2 !important;
  }

  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-person,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-person{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    max-height:none !important;
    object-fit:contain !important;
    object-position:center top !important;
    margin:0 auto !important;
  }

  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-copy,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-copy{
    position:relative !important;
    inset:auto !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;
    width:100% !important;
    max-width:none !important;
    height:auto !important;
    min-height:0 !important;
    margin:0 auto !important;
    padding:0 !important;
    display:block !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    pointer-events:auto !important;
    z-index:3 !important;
  }

  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-copy-inner,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-copy-inner{
    position:relative !important;
    inset:auto !important;
    width:100% !important;
    max-width:none !important;
    margin:0 auto !important;
    padding:0 !important;
    transform:none !important;
  }

  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-side,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-side{
    position:relative !important;
    inset:auto !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;
    width:100% !important;
    max-width:none !important;
    min-height:0 !important;
    margin:clamp(36px, 5svh, 56px) auto 0 !important;
    padding:0 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:clamp(24px, 4svh, 38px) !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    pointer-events:auto !important;
    z-index:3 !important;
  }

  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-side .about-references-seal,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-side .about-references-seal,
  html body #leistungen.section.services.is-mobile-static-stable .about-references-seal,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .about-references-seal{
    position:relative !important;
    inset:auto !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;
    margin:0 auto !important;
    transform:none !important;
  }

  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-coverage,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-coverage{
    position:relative !important;
    inset:auto !important;
    display:block !important;
    width:100% !important;
    max-width:none !important;
    height:auto !important;
    min-height:0 !important;
    margin-top:clamp(0px, 2svh, 18px) !important;
    padding:0 !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    pointer-events:auto !important;
    z-index:2 !important;
  }

  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-coverage-inner,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-coverage-inner{
    position:relative !important;
    inset:auto !important;
    display:block !important;
    width:100% !important;
    max-width:none !important;
    height:auto !important;
    min-height:0 !important;
    margin:0 auto !important;
    padding:0 !important;
    transform:none !important;
  }

  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-coverage-left,
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-coverage-right,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-coverage-left,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-coverage-right{
    position:relative !important;
    inset:auto !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;
    display:block !important;
    width:100% !important;
    max-width:none !important;
    min-height:0 !important;
    margin-left:auto !important;
    margin-right:auto !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
  }

  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-coverage-right,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-coverage-right{
    margin-top:clamp(44px, 7svh, 72px) !important;
    display:flex !important;
    flex-direction:column !important;
    gap:clamp(28px, 5svh, 46px) !important;
  }
}

@media (max-width:760px){
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-visual,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-visual{
    width:min(210px, 46vw) !important;
  }
}


/* v1.413 — Mobile/Tablet: Abstand Coverage-Rechtsblock zur Kontakt-Sektion.
   Greift ausschließlich bis 1100px. Der letzte Coverage-Textblock erhält
   unten 40px Luft, damit er die folgende Kontakt-Sektion nicht berührt. */
@media (max-width:1100px){
  html body #leistungen.section.services .leistungen-outro-coverage-right{
    margin-bottom:40px !important;
  }
}



/* v1.414 — Über-mich/Coverage: Hintergrundsystem analog zur Leistungen-Sektion.
   Zwei aufeinander abgestimmte Layer pro Slide (Hauptbild + Ghost) auf einer
   gemeinsamen hellen Grundfläche. Die vorhandenen Scroll-Variablen aus app.js
   bleiben maßgeblich: --about-light-t / --about-bg-t steuern Über-mich,
   --about-coverage-t steuert Coverage. Layout, Typografie und Sliderlogik
   bleiben unverändert. */
html body #leistungen.section.services .leistungen-outro{
  isolation:isolate;
  overflow:hidden;
  --about-bg-main-max-opacity:.36;
  --about-bg-ghost-max-opacity:.30;
  --coverage-bg-main-max-opacity:.78;
  --coverage-bg-ghost-max-opacity:.28;
  --about-bg-shift-x:calc(var(--about-slide-x, 0px) * .14);
}

html body #leistungen.section.services .leistungen-outro::before{
  background:
    radial-gradient(82% 74% at 42% 46%, rgba(255,255,255,.88) 0%, rgba(255,255,255,.64) 36%, rgba(255,255,255,.18) 100%),
    linear-gradient(114deg, rgba(250,248,245,.82) 0%, rgba(245,244,241,.58) 48%, rgba(236,235,231,.24) 100%) !important;
}

html body #leistungen.section.services .leistungen-outro .about-bg-layer{
  position:absolute;
  inset:0;
  z-index:1;
  overflow:hidden;
  pointer-events:none;
  opacity:var(--about-light-t, 0) !important;
  background:
    radial-gradient(84% 74% at 40% 48%, rgba(255,255,255,.98) 0%, rgba(252,252,251,.97) 30%, rgba(246,244,241,.93) 62%, rgba(238,236,232,.89) 100%),
    linear-gradient(116deg, #f7f5f2 0%, #f2f1ee 46%, #ebe9e5 100%) !important;
}

html body #leistungen.section.services .leistungen-outro .about-bg-main,
html body #leistungen.section.services .leistungen-outro .about-bg-ghost,
html body #leistungen.section.services .leistungen-outro .coverage-bg-main,
html body #leistungen.section.services .leistungen-outro .coverage-bg-ghost{
  position:absolute;
  display:block;
  pointer-events:none;
  user-select:none;
  will-change:opacity, transform;
}

html body #leistungen.section.services .leistungen-outro .about-bg-main{
  left:clamp(18px, 5.1vw, 118px);
  bottom:clamp(36px, 8.8svh, 112px);
  width:min(64vw, 860px);
  height:calc(min(64vw, 860px) * 1060 / 1254);
  background:url('/assets/img/about-bg/ueber-mich_BG.jpg') center center / contain no-repeat;
  opacity:calc(var(--about-bg-t, 0) * (1 - (var(--about-coverage-t, 0) * .92)) * var(--about-bg-main-max-opacity)) !important;
  transform:translate3d(var(--about-bg-shift-x), calc((1 - var(--about-bg-t, 0)) * 18px), 0) scale(calc(1.03 - (var(--about-bg-t, 0) * .02)));
  filter:grayscale(1) brightness(1.18) contrast(.96);
  mix-blend-mode:screen;
}

@supports (mix-blend-mode: plus-lighter){
  html body #leistungen.section.services .leistungen-outro .about-bg-main{
    mix-blend-mode:plus-lighter;
    filter:grayscale(1) brightness(1.08) contrast(.98);
  }
}

html body #leistungen.section.services .leistungen-outro .about-bg-ghost{
  left:clamp(32px, 6.1vw, 142px);
  bottom:clamp(48px, 10.4svh, 132px);
  width:min(61vw, 820px);
  height:calc(min(61vw, 820px) * 1060 / 1254);
  background-color:rgba(214, 219, 228, .78);
  -webkit-mask:url('/assets/img/about-bg/ueber-mich_BG_ghost.png') center center / contain no-repeat;
  mask:url('/assets/img/about-bg/ueber-mich_BG_ghost.png') center center / contain no-repeat;
  opacity:calc(var(--about-bg-t, 0) * (1 - (var(--about-coverage-t, 0) * .96)) * var(--about-bg-ghost-max-opacity)) !important;
  transform:translate3d(calc(var(--about-bg-shift-x) - ((1 - var(--about-bg-t, 0)) * 34px)), calc((1 - var(--about-bg-t, 0)) * 10px), 0) scale(calc(1.008 + (var(--about-bg-t, 0) * .015)));
  mix-blend-mode:multiply;
}

html body #leistungen.section.services .leistungen-outro-coverage{
  overflow:hidden;
  isolation:isolate;
}

html body #leistungen.section.services .leistungen-outro-coverage .coverage-bg-layer{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
}

html body #leistungen.section.services .leistungen-outro-coverage .coverage-bg-layer::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(88% 74% at 42% 46%, rgba(255,255,255,.50) 0%, rgba(255,255,255,.18) 46%, rgba(255,255,255,0) 100%),
    linear-gradient(116deg, rgba(247,245,242,.18) 0%, rgba(243,241,237,.08) 48%, rgba(235,233,229,0) 100%);
  opacity:calc(var(--about-coverage-t, 0) * .72);
}

html body #leistungen.section.services .leistungen-outro-coverage .leistungen-outro-coverage-inner{
  position:absolute;
  inset:0;
  z-index:2;
}

html body #leistungen.section.services .leistungen-outro-coverage .coverage-bg-main{
  right:clamp(-84px, 1vw, 44px);
  top:50%;
  width:min(74vw, 1120px);
  height:calc(min(74vw, 1120px) * 941 / 1672);
  background:url('/assets/img/about-bg/coverage_BG.jpg') center center / contain no-repeat;
  opacity:calc(var(--about-coverage-t, 0) * var(--coverage-bg-main-max-opacity)) !important;
  transform:translate3d(calc((1 - var(--about-coverage-t, 0)) * 54px), -50%, 0) scale(calc(1.028 - (var(--about-coverage-t, 0) * .02)));
  filter:saturate(.88) brightness(1.01) contrast(.98);
}

html body #leistungen.section.services .leistungen-outro-coverage .coverage-bg-ghost{
  right:clamp(18px, 8vw, 174px);
  top:52%;
  width:min(36vw, 520px);
  height:calc(min(36vw, 520px) * 941 / 1672);
  background-color:rgba(203, 197, 188, .72);
  -webkit-mask:url('/assets/img/about-bg/coverage_BG_ghost.png') center center / contain no-repeat;
  mask:url('/assets/img/about-bg/coverage_BG_ghost.png') center center / contain no-repeat;
  opacity:calc(var(--about-coverage-t, 0) * var(--coverage-bg-ghost-max-opacity)) !important;
  transform:translate3d(calc((1 - var(--about-coverage-t, 0)) * 34px), -50%, 0);
  mix-blend-mode:multiply;
}

@media (max-width: 1100px){
  html body #leistungen.section.services .leistungen-outro{
    --about-bg-main-max-opacity:.26;
    --about-bg-ghost-max-opacity:.22;
    --coverage-bg-main-max-opacity:.62;
    --coverage-bg-ghost-max-opacity:.22;
  }

  html body #leistungen.section.services .leistungen-outro .about-bg-main{
    left:50%;
    bottom:clamp(28px, 6.4svh, 72px);
    width:min(88vw, 760px);
    height:calc(min(88vw, 760px) * 1060 / 1254);
    transform:translate3d(calc(-50% + var(--about-bg-shift-x)), calc((1 - var(--about-bg-t, 0)) * 14px), 0) scale(calc(1.02 - (var(--about-bg-t, 0) * .015)));
  }

  html body #leistungen.section.services .leistungen-outro .about-bg-ghost{
    left:50%;
    bottom:clamp(42px, 7.2svh, 88px);
    width:min(82vw, 700px);
    height:calc(min(82vw, 700px) * 1060 / 1254);
    transform:translate3d(calc(-50% + var(--about-bg-shift-x) - ((1 - var(--about-bg-t, 0)) * 22px)), 0, 0);
  }

  html body #leistungen.section.services .leistungen-outro-coverage .coverage-bg-main{
    right:clamp(-120px, -4vw, -18px);
    top:45%;
    width:min(102vw, 980px);
    height:calc(min(102vw, 980px) * 941 / 1672);
  }

  html body #leistungen.section.services .leistungen-outro-coverage .coverage-bg-ghost{
    right:clamp(-24px, 10vw, 96px);
    top:46%;
    width:min(54vw, 430px);
    height:calc(min(54vw, 430px) * 941 / 1672);
  }
}

@media (max-width: 760px){
  html body #leistungen.section.services .leistungen-outro{
    --about-bg-main-max-opacity:.20;
    --about-bg-ghost-max-opacity:.18;
    --coverage-bg-main-max-opacity:.48;
    --coverage-bg-ghost-max-opacity:.18;
  }

  html body #leistungen.section.services .leistungen-outro .about-bg-layer{
    background:
      radial-gradient(88% 76% at 44% 42%, rgba(255,255,255,.98) 0%, rgba(249,249,248,.96) 32%, rgba(242,241,238,.92) 66%, rgba(236,234,230,.88) 100%),
      linear-gradient(118deg, #f8f6f3 0%, #f1f0ed 48%, #ebe9e4 100%) !important;
  }

  html body #leistungen.section.services .leistungen-outro .about-bg-main{
    width:min(98vw, 620px);
    height:calc(min(98vw, 620px) * 1060 / 1254);
    bottom:clamp(16px, 4.8svh, 42px);
  }

  html body #leistungen.section.services .leistungen-outro .about-bg-ghost{
    width:min(90vw, 560px);
    height:calc(min(90vw, 560px) * 1060 / 1254);
    bottom:clamp(26px, 5.8svh, 52px);
  }

  html body #leistungen.section.services .leistungen-outro-coverage .coverage-bg-main{
    right:clamp(-146px, -18vw, -58px);
    top:40%;
    width:min(124vw, 760px);
    height:calc(min(124vw, 760px) * 941 / 1672);
  }

  html body #leistungen.section.services .leistungen-outro-coverage .coverage-bg-ghost{
    right:clamp(-42px, 8vw, 40px);
    top:42%;
    width:min(62vw, 300px);
    height:calc(min(62vw, 300px) * 941 / 1672);
  }
}



/* v1.415 — Über-mich/Coverage Hintergrund-Feintuning.
   - HC-Relief/Logo aus der hellen Doppelsektion entfernt.
   - Über-mich-Hauptbild auf Desktop rechts oben an der Browserkante ausgerichtet.
   - Coverage-Hauptbild per Multiply gemischt und links an der Browserkante ausgerichtet.
   - Coverage-Fotolayer aus der bewegten Coverage-Slide-Ebene herausgenommen:
     der bewegte .coverage-bg-layer wird ausgeblendet; die Bühne verwendet stattdessen
     die ruhige .about-bg-layer::before/::after mit der langsameren JS-Variable
     --about-coverage-bg-t. */
html body #leistungen.section.services .leistungen-outro .about-bg-layer::before,
html body #leistungen.section.services .leistungen-outro .about-bg-layer::after{
  -webkit-mask-image:none !important;
  mask-image:none !important;
  -webkit-mask:none !important;
  mask:none !important;
}

html body #leistungen.section.services .leistungen-outro .about-bg-layer::before{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  left:0 !important;
  right:auto !important;
  top:50% !important;
  bottom:auto !important;
  width:min(72vw, 1100px) !important;
  height:calc(min(72vw, 1100px) * 941 / 1672) !important;
  z-index:1 !important;
  pointer-events:none !important;
  background:url('/assets/img/about-bg/coverage_BG.jpg') left center / contain no-repeat !important;
  opacity:calc(var(--about-coverage-bg-t, 0) * var(--coverage-photo-main-opacity, .62)) !important;
  transform:translate3d(0, -50%, 0) scale(calc(1.012 - (var(--about-coverage-bg-t, 0) * .006))) !important;
  transform-origin:left center !important;
  filter:saturate(.78) brightness(1.05) contrast(.95) !important;
  mix-blend-mode:multiply !important;
  will-change:opacity, transform;
}

html body #leistungen.section.services .leistungen-outro .about-bg-layer::after{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  left:clamp(120px, 16vw, 250px) !important;
  right:auto !important;
  top:51% !important;
  bottom:auto !important;
  width:min(36vw, 520px) !important;
  height:calc(min(36vw, 520px) * 941 / 1672) !important;
  z-index:1 !important;
  pointer-events:none !important;
  background-color:rgba(122, 128, 126, .38) !important;
  -webkit-mask:url('/assets/img/about-bg/coverage_BG_ghost.png') left center / contain no-repeat !important;
  mask:url('/assets/img/about-bg/coverage_BG_ghost.png') left center / contain no-repeat !important;
  opacity:calc(var(--about-coverage-bg-t, 0) * var(--coverage-photo-ghost-opacity, .20)) !important;
  transform:translate3d(0, -50%, 0) !important;
  transform-origin:left center !important;
  mix-blend-mode:multiply !important;
  will-change:opacity;
}

html body #leistungen.section.services .leistungen-outro-coverage .coverage-bg-layer{
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
}

@media (min-width:1101px){
  html body #leistungen.section.services .leistungen-outro .about-bg-main{
    left:auto !important;
    right:0 !important;
    top:0 !important;
    bottom:auto !important;
    background-position:right top !important;
    transform:translate3d(0, calc((1 - var(--about-bg-t, 0)) * 18px), 0) scale(calc(1.032 - (var(--about-bg-t, 0) * .020))) !important;
    transform-origin:right top !important;
  }

  html body #leistungen.section.services .leistungen-outro .about-bg-ghost{
    left:auto !important;
    right:0 !important;
    top:clamp(14px, 2.2svh, 34px) !important;
    bottom:auto !important;
    background-position:right top !important;
    transform:translate3d(calc((1 - var(--about-bg-t, 0)) * 22px), calc((1 - var(--about-bg-t, 0)) * 10px), 0) scale(calc(1.008 + (var(--about-bg-t, 0) * .014))) !important;
    transform-origin:right top !important;
  }
}

@media (max-width:1100px){
  html body #leistungen.section.services .leistungen-outro .about-bg-layer::before{
    width:min(100vw, 960px) !important;
    height:calc(min(100vw, 960px) * 941 / 1672) !important;
    top:44% !important;
    left:0 !important;
  }

  html body #leistungen.section.services .leistungen-outro .about-bg-layer::after{
    width:min(52vw, 420px) !important;
    height:calc(min(52vw, 420px) * 941 / 1672) !important;
    top:45% !important;
    left:clamp(80px, 16vw, 180px) !important;
  }
}

@media (max-width:760px){
  html body #leistungen.section.services .leistungen-outro .about-bg-layer::before{
    width:min(118vw, 720px) !important;
    height:calc(min(118vw, 720px) * 941 / 1672) !important;
    top:38% !important;
    left:0 !important;
  }

  html body #leistungen.section.services .leistungen-outro .about-bg-layer::after{
    width:min(58vw, 280px) !important;
    height:calc(min(58vw, 280px) * 941 / 1672) !important;
    top:40% !important;
    left:clamp(38px, 10vw, 88px) !important;
  }
}



/* v1.416 — Ghost-Layer repariert.
   Ghosts sind keine permanenten Hintergrundbilder mehr, sondern kurze
   Übergangsimpulse wie in der Leistungen-Sektion:
   - ueber-mich_BG_ghost.png beim Einblenden und Ausblenden von ueber-mich_BG.jpg
   - coverage_BG_ghost.png nur beim Einblenden von coverage_BG.jpg */
html body #leistungen.section.services .leistungen-outro .about-bg-ghost{
  opacity:calc(var(--about-photo-ghost-t, 0) * var(--about-photo-ghost-opacity, .24)) !important;
}

html body #leistungen.section.services .leistungen-outro .about-bg-layer::after{
  opacity:calc(var(--coverage-photo-ghost-t, 0) * var(--coverage-photo-ghost-opacity, .20)) !important;
}

/* Der alte bewegte Coverage-Ghost bleibt sicher deaktiviert, damit er nicht
   zusätzlich im Über-mich-Slide oder während der Hold-Phasen sichtbar bleibt. */
html body #leistungen.section.services .leistungen-outro-coverage .coverage-bg-ghost{
  opacity:0 !important;
  visibility:hidden !important;
}



/* v1.417 — Ghost-Konturen als speicherschonende CSS-Masken.
   Die Ghost-PNGs werden nicht mehr gleichzeitig als normales Hintergrundbild
   und als Maske genutzt. Stattdessen liefern sie nur die Alpha-Form; die Farbe
   kommt aus einer einfachen CSS-Fläche. Das hält die Layer schlank und vermeidet
   zusätzliche Filter-/Compositing-Kosten. */
html body #leistungen.section.services .leistungen-outro{
  --about-photo-ghost-color:rgba(126, 153, 182, .30);
  --coverage-photo-ghost-color:rgba(126, 153, 182, .24);
}

html body #leistungen.section.services .leistungen-outro .about-bg-ghost{
  background:var(--about-photo-ghost-color) !important;
  background-image:none !important;
  -webkit-mask:url('/assets/img/about-bg/ueber-mich_BG_ghost.png') right top / contain no-repeat !important;
  mask:url('/assets/img/about-bg/ueber-mich_BG_ghost.png') right top / contain no-repeat !important;
  opacity:calc(var(--about-photo-ghost-t, 0) * var(--about-photo-ghost-opacity, .24)) !important;
  filter:none !important;
  mix-blend-mode:normal !important;
  will-change:auto !important;
}

html body #leistungen.section.services .leistungen-outro .about-bg-layer::after{
  background:var(--coverage-photo-ghost-color) !important;
  background-image:none !important;
  -webkit-mask:url('/assets/img/about-bg/coverage_BG_ghost.png') left center / contain no-repeat !important;
  mask:url('/assets/img/about-bg/coverage_BG_ghost.png') left center / contain no-repeat !important;
  opacity:calc(var(--coverage-photo-ghost-t, 0) * var(--coverage-photo-ghost-opacity, .20)) !important;
  filter:none !important;
  mix-blend-mode:normal !important;
  will-change:auto !important;
}

/* Der deaktivierte alte Coverage-Ghost innerhalb der bewegten Slide-Ebene
   bleibt ohne Bilddekoration, damit keine zweite Ghost-Ressource gerendert wird. */
html body #leistungen.section.services .leistungen-outro-coverage .coverage-bg-ghost{
  background:none !important;
  background-image:none !important;
  -webkit-mask:none !important;
  mask:none !important;
  opacity:0 !important;
  visibility:hidden !important;
}



/* v1.418 — Coverage-Ghost robust entkoppelt von alten Pseudo-Ebenen.
   Ursache in v1.417: coverage_BG_ghost.png lag auf .about-bg-layer::after.
   Diese Pseudo-Ebene wurde von älteren Hover-/Relief-Regeln für die gesamte
   Über-mich/Coverage-Bühne mit opacity:1 !important aktiviert. Dadurch konnte
   der Coverage-Ghost während des ganzen Outro-Bereichs sichtbar bleiben.
   Fix: Coverage-Hauptbild und Coverage-Ghost liegen jetzt auf eigenen echten
   Stage-Layern. ::before/::after der about-bg-layer werden für diese Sektion
   vollständig neutralisiert. */

/* Alte Monogramm-/Hover-/Coverage-Pseudo-Layer sicher abschalten. */
html body #leistungen.section.services .leistungen-outro .about-bg-layer::before,
html body #leistungen.section.services .leistungen-outro .about-bg-layer::after,
html body #leistungen.section.services .leistungen-shell.is-outro-active .leistungen-outro .about-bg-layer::before,
html body #leistungen.section.services .leistungen-shell.is-outro-active .leistungen-outro .about-bg-layer::after{
  content:none !important;
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  background:none !important;
  background-image:none !important;
  -webkit-mask:none !important;
  mask:none !important;
  transform:none !important;
}

/* Neue ruhige Coverage-Bühnenlayer: nicht Teil des horizontal bewegten Slides. */
html body #leistungen.section.services .leistungen-outro .coverage-bg-stage-main,
html body #leistungen.section.services .leistungen-outro .coverage-bg-stage-ghost{
  position:absolute;
  display:block;
  pointer-events:none;
  user-select:none;
  z-index:1;
  backface-visibility:hidden;
}

/* Coverage-Hauptbild: an coverage_BG.jpg gekoppelt, links an der Browserkante,
   multiply, langsame Einblendung über --about-coverage-bg-t. */
html body #leistungen.section.services .leistungen-outro .coverage-bg-stage-main{
  left:0;
  right:auto;
  top:50%;
  width:min(72vw, 1100px);
  height:calc(min(72vw, 1100px) * 941 / 1672);
  background:url('/assets/img/about-bg/coverage_BG.jpg') left center / contain no-repeat;
  opacity:calc(var(--about-coverage-bg-t, 0) * var(--coverage-photo-main-opacity, .62)) !important;
  transform:translate3d(0, -50%, 0) scale(calc(1.012 - (var(--about-coverage-bg-t, 0) * .006)));
  transform-origin:left center;
  filter:saturate(.78) brightness(1.05) contrast(.95);
  mix-blend-mode:multiply;
}

/* Coverage-Ghost: nur kurzer Impuls beim Einblenden von coverage_BG.jpg.
   Farbe per Maske aus v1.417, aber nicht mehr auf .about-bg-layer::after. */
html body #leistungen.section.services .leistungen-outro .coverage-bg-stage-ghost{
  left:clamp(120px, 16vw, 250px);
  right:auto;
  top:51%;
  width:min(36vw, 520px);
  height:calc(min(36vw, 520px) * 941 / 1672);
  background:var(--coverage-photo-ghost-color, rgba(126, 153, 182, .24));
  background-image:none;
  -webkit-mask:url('/assets/img/about-bg/coverage_BG_ghost.png') left center / contain no-repeat;
  mask:url('/assets/img/about-bg/coverage_BG_ghost.png') left center / contain no-repeat;
  opacity:calc(var(--coverage-photo-ghost-t, 0) * var(--coverage-photo-ghost-opacity, .20)) !important;
  transform:translate3d(0, -50%, 0);
  transform-origin:left center;
  filter:none;
  mix-blend-mode:normal;
  will-change:auto;
}

/* Den alten bewegten Coverage-Layer weiterhin deaktiviert halten:
   keine doppelte Anzeige, keine zweite Ghost-Ressource im bewegten Slide. */
html body #leistungen.section.services .leistungen-outro-coverage .coverage-bg-layer,
html body #leistungen.section.services .leistungen-outro-coverage .coverage-bg-main,
html body #leistungen.section.services .leistungen-outro-coverage .coverage-bg-ghost{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  background:none !important;
  background-image:none !important;
  -webkit-mask:none !important;
  mask:none !important;
}

@media (max-width:1100px){
  html body #leistungen.section.services .leistungen-outro .coverage-bg-stage-main{
    left:0;
    top:44%;
    width:min(100vw, 960px);
    height:calc(min(100vw, 960px) * 941 / 1672);
  }

  html body #leistungen.section.services .leistungen-outro .coverage-bg-stage-ghost{
    left:clamp(80px, 16vw, 180px);
    top:45%;
    width:min(52vw, 420px);
    height:calc(min(52vw, 420px) * 941 / 1672);
  }
}

@media (max-width:760px){
  html body #leistungen.section.services .leistungen-outro .coverage-bg-stage-main{
    left:0;
    top:38%;
    width:min(118vw, 720px);
    height:calc(min(118vw, 720px) * 941 / 1672);
  }

  html body #leistungen.section.services .leistungen-outro .coverage-bg-stage-ghost{
    left:clamp(38px, 10vw, 88px);
    top:40%;
    width:min(58vw, 280px);
    height:calc(min(58vw, 280px) * 941 / 1672);
  }
}


/* v1.419 — Coverage-Hauptbild ersetzt und Ghost-Maskenfarbe dunkler.
   coverage_BG.jpg enthält jetzt das neue coverage_BG2.jpg. Die Ghost-Masken
   behalten die speicherschonende Maskenlogik aus v1.417/v1.418; nur die
   CSS-Farbe wird ca. 30% dunkler gesetzt. Keine zusätzlichen Bildlayer,
   keine Filter, keine doppelte PNG-Nutzung. */
html body #leistungen.section.services .leistungen-outro{
  --about-photo-ghost-color:rgba(88, 107, 127, .30);
  --coverage-photo-ghost-color:rgba(88, 107, 127, .24);
}

/* v1.420 — Einblend-Ghosts sichtbar an Hauptbild-Aufbau gekoppelt.
   Die JS-Pulse hängen jetzt am tatsächlichen Fortschritt von ueber-mich_BG.jpg
   bzw. coverage_BG.jpg. Zusätzlich werden nur die Ghost-Opazitätsfaktoren
   moderat angehoben; Maskenlösung, Bildanzahl und Filterfreiheit bleiben erhalten. */
html body #leistungen.section.services .leistungen-outro{
  --about-photo-ghost-opacity:.46;
  --coverage-photo-ghost-opacity:.54;
}

html body #leistungen.section.services .leistungen-outro .about-bg-ghost{
  opacity:calc(var(--about-photo-ghost-t, 0) * var(--about-photo-ghost-opacity, .46)) !important;
}

html body #leistungen.section.services .leistungen-outro .coverage-bg-stage-ghost{
  opacity:calc(var(--coverage-photo-ghost-t, 0) * var(--coverage-photo-ghost-opacity, .54)) !important;
}


/* v1.421 — Drei-Flügel-Choreografie für die bestehende Über-mich/Coverage-Outro-Sequenz.
   Desktop nutzt weiterhin die bestehende gepinnte Leistungen-/Outro-Timeline aus app.js.
   Die seit v1.414 eingeführten Foto-/Ghost-Hintergründe für Über-mich/Coverage werden
   neutralisiert; die eigentlichen Leistungen-Backgrounds/Ghosts bleiben unangetastet. */
@media (min-width:901px){
  html body #leistungen.section.services .leistungen-outro{
    --about-left-width:31vw;
    --about-copy-wing-width:44vw;
    --about-side-wing-width:25vw;
    --about-dark-wing-width:50vw;
    --about-copy-pad-x:clamp(44px, 4.2vw, 78px);
    --about-wing-copy-top:calc(var(--about-top-gap) + (var(--about-u) * 34));
    background:#f7f8f7 !important;
    isolation:isolate !important;
    overflow:hidden !important;
  }

  html body #leistungen.section.services .leistungen-outro::before{
    content:"" !important;
    display:block !important;
    position:absolute !important;
    inset:0 !important;
    z-index:0 !important;
    opacity:var(--about-light-t, 0) !important;
    background:
      radial-gradient(72vw 54vw at 18% 44%, rgba(255,255,255,.96) 0%, rgba(255,255,255,.72) 38%, rgba(255,255,255,.10) 76%),
      linear-gradient(90deg, #ffffff 0%, #fbfcfd 42%, #f2f5f7 100%) !important;
    pointer-events:none !important;
  }

  /* Alte Foto-/Ghost-Bühnen der Über-mich/Coverage-Sequenz abschalten.
     Die Leistungen-Slide-Hintergründe .leistungen-bg-* werden hier nicht berührt. */
  html body #leistungen.section.services .leistungen-outro .about-bg-layer,
  html body #leistungen.section.services .leistungen-outro .about-bg-main,
  html body #leistungen.section.services .leistungen-outro .about-bg-ghost,
  html body #leistungen.section.services .leistungen-outro .coverage-bg-stage-main,
  html body #leistungen.section.services .leistungen-outro .coverage-bg-stage-ghost,
  html body #leistungen.section.services .leistungen-outro-coverage .coverage-bg-layer,
  html body #leistungen.section.services .leistungen-outro-coverage .coverage-bg-main,
  html body #leistungen.section.services .leistungen-outro-coverage .coverage-bg-ghost{
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
    background:none !important;
    background-image:none !important;
    -webkit-mask:none !important;
    mask:none !important;
    filter:none !important;
  }

  html body #leistungen.section.services .leistungen-outro-layout{
    position:absolute !important;
    inset:0 !important;
    z-index:5 !important;
    display:block !important;
    overflow:visible !important;
    pointer-events:none !important;
    transform:none !important;
    will-change:auto !important;
  }

  /* Linker heller Peter-Bereich: Peter bleibt menschlicher Anker und sitzt
     horizontal zentriert innerhalb der 31%-Spalte. */
  html body #leistungen.section.services .leistungen-outro-visual{
    position:absolute !important;
    inset:auto !important;
    left:0 !important;
    top:var(--about-top-gap) !important;
    width:var(--about-left-width) !important;
    height:var(--about-peter-h) !important;
    max-width:none !important;
    max-height:none !important;
    padding:0 !important;
    display:flex !important;
    align-items:flex-start !important;
    justify-content:center !important;
    opacity:var(--leistungen-person-progress, 1) !important;
    transform:translate3d(0,0,0) scale(var(--about-person-scale, 1)) !important;
    transform-origin:50% 64% !important;
    filter:blur(var(--about-person-blur, 0px)) !important;
    overflow:visible !important;
    z-index:3 !important;
    will-change:transform, filter, opacity !important;
  }

  html body #leistungen.section.services .leistungen-outro-person{
    width:var(--about-peter-w) !important;
    max-width:min(82%, var(--about-peter-w)) !important;
    height:auto !important;
    max-height:var(--about-peter-h) !important;
    object-fit:contain !important;
    margin:0 auto !important;
    filter:drop-shadow(0 24px 34px rgba(0,0,0,.18)) !important;
  }

  /* Mittlerer hellblauer Flügel: eigenes Element, weil er Peter beim
     Coverage-Übergang wirklich überfahren/verdecken soll. */
  html body #leistungen.section.services .leistungen-outro-copy{
    position:absolute !important;
    inset:auto !important;
    left:var(--about-light-wing-x, 100vw) !important;
    top:0 !important;
    width:var(--about-copy-wing-width) !important;
    max-width:var(--about-copy-wing-width) !important;
    height:100% !important;
    min-height:100% !important;
    display:block !important;
    box-sizing:border-box !important;
    padding:var(--about-wing-copy-top) var(--about-copy-pad-x) 0 !important;
    background:linear-gradient(33deg, #285f93 0%, #2d6ca4 100%) !important;
    opacity:var(--about-copy-wing-t, 0) !important;
    transform:none !important;
    overflow:hidden !important;
    pointer-events:none !important;
    z-index:6 !important;
    will-change:left, opacity !important;
  }

  html body #leistungen.section.services .leistungen-outro-copy-inner{
    position:relative !important;
    z-index:2 !important;
    width:100% !important;
    max-width:calc(var(--about-copy-wing-width) - (var(--about-copy-pad-x) * 2)) !important;
    margin:0 !important;
    padding:0 !important;
    transform:none !important;
  }

  html body #leistungen.section.services .leistungen-outro-title,
  html body #leistungen.section.services .leistungen-outro-title[data-headline-fx],
  html body #leistungen.section.services .leistungen-outro-title-line{
    color:#f3f9ff !important;
    -webkit-text-fill-color:#f3f9ff !important;
    background:none !important;
    background-image:none !important;
    filter:none !important;
    text-shadow:0 22px 48px rgba(0,18,42,.16) !important;
  }

  html body #leistungen.section.services .leistungen-outro-subtitle{
    color:rgba(236,246,255,.84) !important;
    text-shadow:none !important;
  }

  html body #leistungen.section.services .leistungen-outro-text,
  html body #leistungen.section.services .leistungen-outro-text p{
    color:rgba(246,250,255,.84) !important;
    text-shadow:none !important;
  }

  /* Rechter/dunkler Flügel: in About nur 25vw sichtbar, als Bühne aber 50vw breit,
     damit er beim Übergang links als Coverage-Dunkelbereich einrasten kann. */
  html body #leistungen.section.services .leistungen-outro-side{
    position:absolute !important;
    inset:auto !important;
    left:var(--about-dark-wing-x, 100vw) !important;
    top:0 !important;
    width:var(--about-dark-wing-width) !important;
    max-width:var(--about-dark-wing-width) !important;
    height:100% !important;
    min-height:100% !important;
    box-sizing:border-box !important;
    display:block !important;
    padding:calc(var(--about-top-gap) + (var(--about-u) * 330)) clamp(34px, 3vw, 58px) 0 clamp(36px, 3.2vw, 62px) !important;
    background:linear-gradient(33deg, #19395a 0%, #03457d 100%) !important;
    opacity:var(--about-side-wing-t, 0) !important;
    transform:none !important;
    z-index:5 !important;
    pointer-events:none !important;
    overflow:hidden !important;
    will-change:left, opacity !important;
  }

  html body #leistungen.section.services .leistungen-outro-side .leistungen-outro-quote,
  html body #leistungen.section.services .leistungen-outro-side .leistungen-outro-quote p,
  html body #leistungen.section.services .leistungen-outro-side .about-references-seal{
    opacity:var(--about-side-content-opacity, 0) !important;
    color:rgba(245,250,255,.88) !important;
    -webkit-text-fill-color:currentColor !important;
    text-shadow:none !important;
  }

  html body #leistungen.section.services .leistungen-outro-side .about-references-seal{
    position:relative !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;
    transform:none !important;
    display:block !important;
    margin:calc(var(--about-u) * 76) auto 0 !important;
    width:calc(var(--about-u) * 220) !important;
    height:auto !important;
    min-height:calc((var(--about-u) * 220) + (var(--about-u) * 34)) !important;
    pointer-events:auto !important;
  }

  /* Coverage-Slide bleibt gepinnt, aber nicht mehr als eigenständiger horizontaler
     Track. Die Blöcke werden aus der bestehenden coverageT-Logik positioniert. */
  html body #leistungen.section.services .leistungen-outro-coverage{
    position:absolute !important;
    inset:0 !important;
    z-index:7 !important;
    display:block !important;
    opacity:1 !important;
    transform:none !important;
    pointer-events:none !important;
    overflow:visible !important;
    will-change:auto !important;
  }

  html body #leistungen.section.services .leistungen-shell.is-outro-coverage-visible .leistungen-outro-coverage{
    pointer-events:auto !important;
  }

  html body #leistungen.section.services .leistungen-outro-coverage-inner{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    display:block !important;
    transform:none !important;
    opacity:1 !important;
    color:#17191f !important;
    z-index:7 !important;
  }

  html body #leistungen.section.services .leistungen-outro-coverage-left{
    position:absolute !important;
    left:calc(var(--about-dark-wing-x, 100vw) + var(--coverage-stage-left, var(--outro-coverage-left))) !important;
    width:var(--coverage-left-w) !important;
    max-width:var(--coverage-left-w) !important;
    opacity:var(--about-coverage-left-t, 0) !important;
    transform:none !important;
    z-index:8 !important;
    pointer-events:none !important;
    will-change:left, opacity !important;
  }

  html body #leistungen.section.services .leistungen-outro-coverage-eyebrow,
  html body #leistungen.section.services .leistungen-outro-coverage-title,
  html body #leistungen.section.services .leistungen-outro-coverage-title[data-headline-fx],
  html body #leistungen.section.services .leistungen-outro-coverage-statement,
  html body #leistungen.section.services .leistungen-outro-coverage-statement p{
    color:rgba(245,250,255,.88) !important;
    -webkit-text-fill-color:currentColor !important;
    background:none !important;
    background-image:none !important;
    filter:none !important;
    text-shadow:none !important;
  }

  html body #leistungen.section.services .leistungen-outro-coverage-title,
  html body #leistungen.section.services .leistungen-outro-coverage-statement{
    width:var(--coverage-left-w) !important;
    max-width:var(--coverage-left-w) !important;
  }

  html body #leistungen.section.services .leistungen-outro-coverage-signature-img{
    filter:brightness(0) invert(1) opacity(.82) !important;
  }

  html body #leistungen.section.services .leistungen-outro-coverage-right{
    position:absolute !important;
    right:var(--coverage-stage-right) !important;
    left:auto !important;
    top:calc(var(--about-top-gap) + (var(--about-u) * 34) + 20px) !important;
    width:var(--coverage-right-w) !important;
    max-width:var(--coverage-right-w) !important;
    opacity:var(--about-coverage-right-t, 0) !important;
    transform:translate3d(calc((1 - var(--about-coverage-right-t, 0)) * 24px), 0, 0) !important;
    z-index:8 !important;
    pointer-events:none !important;
    will-change:opacity, transform !important;
  }

  html body #leistungen.section.services .leistungen-outro-coverage-item,
  html body #leistungen.section.services .leistungen-outro-coverage-item-title,
  html body #leistungen.section.services .leistungen-outro-coverage-item-copy p{
    color:#17191f !important;
    text-shadow:none !important;
  }

  html body #leistungen.section.services .leistungen-shell.is-outro-finale .leistungen-outro-layout,
  html body #leistungen.section.services .leistungen-shell.is-outro-finale .leistungen-outro-coverage{
    opacity:1 !important;
  }
}

@media (min-width:901px) and (prefers-reduced-motion:reduce){
  html body #leistungen.section.services .leistungen-outro-copy,
  html body #leistungen.section.services .leistungen-outro-side,
  html body #leistungen.section.services .leistungen-outro-visual,
  html body #leistungen.section.services .leistungen-outro-coverage-left,
  html body #leistungen.section.services .leistungen-outro-coverage-right{
    will-change:auto !important;
  }
}

/* v1.422 — Flügel-Choreografie Feinschliff nach Videoanalyse.
   - Übergang Leistungen -> Über-mich: helle Bühne nicht mehr als harte Grundfläche,
     sondern nur über die scrollgebundene ::before-Opacity.
   - Heller Flügel reicht beim Einfahren immer bis zum rechten Browserrand.
   - Dunkler Flügel liegt über dem hellen Flügel.
   - Side-Inhalt bleibt am dunklen Flügel gebunden und verschwindet durch Bewegung,
     nicht durch Coverage-Fade.
   - Coverage-Left ist an dieselbe dunkle Bühne gebunden. */
@media (min-width:901px){
  html body #leistungen.section.services .leistungen-outro{
    --about-copy-content-width:44vw;
    --about-dark-wing-width:125vw;
    background:transparent !important;
  }

  html body #leistungen.section.services .leistungen-outro::before{
    opacity:var(--about-light-t, 0) !important;
    background:
      radial-gradient(72vw 54vw at 18% 44%, rgba(255,255,255,.96) 0%, rgba(255,255,255,.70) 38%, rgba(255,255,255,.08) 76%),
      linear-gradient(90deg, #ffffff 0%, #fbfcfd 42%, #f2f5f7 100%) !important;
  }

  /* Der helle Flügel fährt mit linker Kante, bleibt rechts aber immer am Viewport-Rand. */
  html body #leistungen.section.services .leistungen-outro-copy{
    left:var(--about-light-wing-x, 100vw) !important;
    right:0 !important;
    width:calc(100vw - var(--about-light-wing-x, 100vw)) !important;
    max-width:none !important;
    opacity:var(--about-copy-wing-t, 0) !important;
    z-index:6 !important;
  }

  html body #leistungen.section.services .leistungen-outro-copy-inner{
    width:calc(var(--about-copy-content-width) - (var(--about-copy-pad-x) * 2)) !important;
    max-width:calc(var(--about-copy-content-width) - (var(--about-copy-pad-x) * 2)) !important;
  }

  html body #leistungen.section.services .leistungen-outro-subtitle,
  html body #leistungen.section.services .leistungen-outro-text,
  html body #leistungen.section.services .leistungen-outro-text p{
    color:rgba(248,252,255,.88) !important;
    -webkit-text-fill-color:currentColor !important;
  }

  /* About-Titel im hellen Flügel: sichtbar, hell und mit der Headline-Anmutung
     der Leistungen-Titel statt der alten dunklen About-Farbe. */
  html body #leistungen.section.services .leistungen-outro-title,
  html body #leistungen.section.services .leistungen-outro-title-line{
    color:#f5fbff !important;
    -webkit-text-fill-color:#f5fbff !important;
    text-shadow:0 18px 42px rgba(0,20,46,.18) !important;
  }

  @supports ((-webkit-background-clip:text) or (background-clip:text)){
    html body #leistungen.section.services .leistungen-outro-title[data-headline-fx],
    html body #leistungen.section.services .leistungen-outro-title[data-headline-fx] .leistungen-outro-title-line{
      background-image:
        linear-gradient(90deg,
          rgba(248,252,255,.92) 0%,
          rgba(232,244,255,.78) 22%,
          rgba(192,218,250,.45) 48%,
          rgba(248,252,255,.96) 100%),
        radial-gradient(48vw 30vw at 7vw 8vh,
          rgba(255,255,255,.62) 0%,
          rgba(230,242,255,.42) 28%,
          rgba(150,194,240,0) 74%),
        radial-gradient(66vw 58vw at var(--reactive-x, 52vw) var(--reactive-y, 42vh),
          rgba(244,248,255,.70) 0%,
          rgba(220,235,255,.54) 20%,
          rgba(130,176,230,.20) 46%,
          rgba(18,35,79,0) 78%) !important;
      background-size:100% 100%, 100vw 100vh, 100vw 100vh !important;
      background-position:
        0 0,
        calc(-1 * var(--headline-view-x, 0px)) calc(-1 * var(--headline-view-y, 0px)),
        calc(-1 * var(--headline-view-x, 0px)) calc(-1 * var(--headline-view-y, 0px)) !important;
      -webkit-background-clip:text !important;
      background-clip:text !important;
      -webkit-text-fill-color:transparent !important;
      color:#f5fbff !important;
      filter:saturate(.94) brightness(1.08) contrast(.98) !important;
    }
  }

  /* Große dunkle Bühne: bei About ist nur der rechte 25vw-Ausschnitt sichtbar,
     bei Coverage steht dieselbe Bühne links. Sie liegt über dem hellen Flügel. */
  html body #leistungen.section.services .leistungen-outro-side{
    left:var(--about-dark-wing-x, 100vw) !important;
    width:var(--about-dark-wing-width) !important;
    max-width:var(--about-dark-wing-width) !important;
    padding:0 !important;
    z-index:9 !important;
    opacity:var(--about-side-wing-t, 0) !important;
    pointer-events:none !important;
    overflow:hidden !important;
  }

  /* Side-Inhalt ist am linken 25vw-Fenster der dunklen Bühne befestigt.
     Er wird nicht mehr für Coverage ausgeblendet, sondern fährt mit der Bühne nach links heraus. */
  html body #leistungen.section.services .leistungen-outro-side .leistungen-outro-quote{
    position:absolute !important;
    left:0 !important;
    top:calc(var(--about-top-gap) + (var(--about-u) * 330)) !important;
    width:var(--about-side-wing-width) !important;
    max-width:var(--about-side-wing-width) !important;
    box-sizing:border-box !important;
    padding:0 clamp(32px, 3vw, 58px) !important;
    margin:0 !important;
    text-align:center !important;
    opacity:1 !important;
    color:rgba(248,252,255,.90) !important;
    -webkit-text-fill-color:currentColor !important;
    text-shadow:none !important;
  }

  html body #leistungen.section.services .leistungen-outro-side .leistungen-outro-quote p{
    color:rgba(248,252,255,.90) !important;
    -webkit-text-fill-color:currentColor !important;
    text-shadow:none !important;
  }

  html body #leistungen.section.services .leistungen-outro-side .about-references-seal{
    position:absolute !important;
    left:calc(var(--about-side-wing-width) / 2) !important;
    top:calc(var(--about-top-gap) + (var(--about-u) * 330) + (var(--about-u) * 260)) !important;
    right:auto !important;
    bottom:auto !important;
    width:calc(var(--about-u) * 220) !important;
    height:auto !important;
    min-height:calc((var(--about-u) * 220) + (var(--about-u) * 34)) !important;
    margin:0 !important;
    transform:translate3d(-50%, 0, 0) !important;
    opacity:1 !important;
    color:rgba(248,252,255,.90) !important;
    -webkit-text-fill-color:currentColor !important;
    pointer-events:auto !important;
  }

  html body #leistungen.section.services .leistungen-outro-side .about-references-seal-link,
  html body #leistungen.section.services .leistungen-outro-side .about-references-seal-link-label,
  html body #leistungen.section.services .leistungen-outro-side .about-references-seal-link-arrow{
    color:rgba(248,252,255,.90) !important;
    -webkit-text-fill-color:currentColor !important;
  }

  html body #leistungen.section.services .leistungen-outro-side .about-references-seal-img{
    filter:brightness(0) invert(1) opacity(.86) !important;
  }

  /* Coverage bleibt in der bestehenden Ebene, liegt aber über der dunklen Bühne,
     damit Coverage-Left lesbar auf derselben Fläche steht. */
  html body #leistungen.section.services .leistungen-outro-coverage{
    z-index:10 !important;
  }

  html body #leistungen.section.services .leistungen-outro-coverage-inner{
    z-index:10 !important;
  }

  /* Coverage-Left ist an die dunkle Bühne gekoppelt: About -> offscreen rechts,
     Coverage-Ende -> bestehender linker Abstand. */
  html body #leistungen.section.services .leistungen-outro-coverage-left{
    left:calc(var(--about-dark-wing-x, 100vw) + 75vw + var(--coverage-stage-left, var(--outro-coverage-left))) !important;
    z-index:11 !important;
    opacity:var(--about-coverage-left-t, 0) !important;
  }

  html body #leistungen.section.services .leistungen-outro-coverage-right{
    z-index:11 !important;
  }
}


/* v1.423 — Flügel-Korrekturen: Titel-Clipping, Seal, Weißtöne, Coverage-Ende.
   Ziel: nur die bestehende v1.421/v1.422-Flügel-Choreografie nachschärfen.
   Keine Änderungen an den Leistungen-Slide-Backgrounds. */
@media (min-width:901px){
  html body #leistungen.section.services .leistungen-outro{
    --about-dark-wing-width:75vw;
  }

  /* Der helle Flügel reicht im About-Zustand weiter bis zum rechten Browserrand,
     endet während Coverage aber an der rechten Kante des dunklen Flügels. */
  html body #leistungen.section.services .leistungen-outro-copy{
    left:var(--about-light-wing-x, 100vw) !important;
    right:auto !important;
    width:calc(var(--about-light-wing-right-edge, 100vw) - var(--about-light-wing-x, 100vw)) !important;
    max-width:none !important;
    overflow:visible !important;
  }

  /* Titel-Layer höher machen, damit Unterlängen wie beim „g" nicht abgeschnitten werden. */
  html body #leistungen.section.services .leistungen-outro-title,
  html body #leistungen.section.services .leistungen-outro-title[data-headline-fx]{
    line-height:.98 !important;
    overflow:visible !important;
    padding-bottom:.10em !important;
    margin-bottom:calc((clamp(12px, 1.55svh, 20px) * var(--leistungen-copy-fit, 1)) - .10em) !important;
  }

  html body #leistungen.section.services .leistungen-outro-title-line,
  html body #leistungen.section.services .leistungen-outro-title[data-headline-fx] .leistungen-outro-title-line{
    display:block !important;
    line-height:.98 !important;
    overflow:visible !important;
    padding-bottom:.10em !important;
    margin-bottom:-.10em !important;
  }

  /* Hellblauer Flügel: Fließtext und Titel konsequent hell/weiß. */
  html body #leistungen.section.services .leistungen-outro-copy,
  html body #leistungen.section.services .leistungen-outro-subtitle,
  html body #leistungen.section.services .leistungen-outro-text,
  html body #leistungen.section.services .leistungen-outro-text p{
    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;
  }

  /* Dunkler Flügel: Quote wirklich weiß, keine alten dunklen Overrides. */
  html body #leistungen.section.services .leistungen-outro-side .leistungen-outro-quote,
  html body #leistungen.section.services .leistungen-outro-side .leistungen-outro-quote p,
  html body #leistungen.section.services .leistungen-outro-quote,
  html body #leistungen.section.services .leistungen-outro-quote p,
  html body #leistungen.section.services.theme-dark .leistungen-outro-side .leistungen-outro-quote,
  html body #leistungen.section.services.theme-dark .leistungen-outro-side .leistungen-outro-quote p{
    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;
    text-shadow:none !important;
  }

  /* Seal wieder als echtes Siegel zeigen, nicht als gefilterten grauen Kreis. */
  html body #leistungen.section.services .leistungen-outro-side .about-references-seal{
    opacity:1 !important;
    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;
  }

  html body #leistungen.section.services .leistungen-outro-side .about-references-seal-emblem{
    display:block !important;
    width:calc(var(--about-u) * 220) !important;
    height:calc(var(--about-u) * 220) !important;
    background:transparent !important;
    box-shadow:none !important;
    overflow:visible !important;
    opacity:1 !important;
  }

  html body #leistungen.section.services .leistungen-outro-side .about-references-seal-emblem::after{
    content:none !important;
    display:none !important;
  }

  html body #leistungen.section.services .leistungen-outro-side .about-references-seal-img{
    display:block !important;
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
    opacity:1 !important;
    visibility:visible !important;
    filter:none !important;
  }

  html body #leistungen.section.services .leistungen-outro-side .about-references-seal-link,
  html body #leistungen.section.services .leistungen-outro-side .about-references-seal-link-label,
  html body #leistungen.section.services .leistungen-outro-side .about-references-seal-link-arrow{
    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;
  }

  /* Dunkle Bühne und Coverage-Left enger als zusammengehörige Einheit:
     Coverage-Left sitzt relativ direkt hinter dem rechten Rand des 25vw-Side-Fensters.
     Dadurch entspricht der Abstand optisch: rechter Abstand der Quote + linker Coverage-Abstand. */
  html body #leistungen.section.services .leistungen-outro-side{
    width:var(--about-dark-wing-width) !important;
    max-width:var(--about-dark-wing-width) !important;
    z-index:9 !important;
  }

  html body #leistungen.section.services .leistungen-outro-coverage-left{
    left:calc(var(--about-dark-wing-x, 100vw) + var(--about-side-wing-width) + var(--coverage-stage-left, var(--outro-coverage-left))) !important;
    z-index:11 !important;
  }

  /* Coverage-Right liegt über der weißen Bühne; der hellblaue Flügel endet links davon. */
  html body #leistungen.section.services .leistungen-outro-coverage-right{
    z-index:12 !important;
  }
}



/* v1.424 — Flügel- und Topbar-Feinschliff.
   1) Hellblauer Flügel endet im Coverage-Endzustand in der Mitte des dunklen Flügels.
   2) Peter-Blur kommt aus app.js nun 50% stärker.
   3) Coverage-Left-Titel erhält dieselbe helle Headline-Anmutung wie der About-Titel.
   4) Virtuelle Topbar-Zustände im integrierten Outro:
      About = dunkles Logo + weiße Controls; Coverage = helles Logo + #1f4187 Controls. */
@media (min-width:901px){
  /* Sicherheitsnetz zur JS-Variable: im Coverage-Endzustand fährt die rechte Kante
     des hellblauen Flügels bis zur Mitte der dunklen 75vw-Bühne (-25vw + 37.5vw = 12.5vw). */
  html body #leistungen.section.services .leistungen-outro-copy{
    width:calc(var(--about-light-wing-right-edge, 100vw) - var(--about-light-wing-x, 100vw)) !important;
  }

  html body #leistungen.section.services .leistungen-outro-coverage-title,
  html body #leistungen.section.services .leistungen-outro-coverage-title[data-headline-fx]{
    color:#f5fbff !important;
    -webkit-text-fill-color:#f5fbff !important;
    text-shadow:0 18px 42px rgba(0,20,46,.18) !important;
    filter:none !important;
  }

  @supports ((-webkit-background-clip:text) or (background-clip:text)){
    html body #leistungen.section.services .leistungen-outro-coverage-title[data-headline-fx]{
      background-image:
        linear-gradient(90deg,
          rgba(248,252,255,.92) 0%,
          rgba(232,244,255,.78) 22%,
          rgba(192,218,250,.45) 48%,
          rgba(248,252,255,.96) 100%),
        radial-gradient(48vw 30vw at 7vw 8vh,
          rgba(255,255,255,.62) 0%,
          rgba(230,242,255,.42) 28%,
          rgba(150,194,240,0) 74%),
        radial-gradient(66vw 58vw at var(--reactive-x, 52vw) var(--reactive-y, 42vh),
          rgba(244,248,255,.70) 0%,
          rgba(220,235,255,.54) 20%,
          rgba(130,176,230,.20) 46%,
          rgba(18,35,79,0) 78%) !important;
      background-size:100% 100%, 100vw 100vh, 100vw 100vh !important;
      background-position:
        0 0,
        calc(-1 * var(--headline-view-x, 0px)) calc(-1 * var(--headline-view-y, 0px)),
        calc(-1 * var(--headline-view-x, 0px)) calc(-1 * var(--headline-view-y, 0px)) !important;
      -webkit-background-clip:text !important;
      background-clip:text !important;
      -webkit-text-fill-color:transparent !important;
      color:#f5fbff !important;
      filter:saturate(.94) brightness(1.08) contrast(.98) !important;
    }
  }
}

/* About-Teil der integrierten Outro-Bühne: dunkles Logo wie Leitidee, aber weiße Controls. */
html body .topbar.is-about:not(.is-outro-coverage){
  color:#ffffff !important;
}

html body .topbar.is-about:not(.is-outro-coverage) .menu-btn,
html body .topbar.is-about:not(.is-outro-coverage) .lang a{
  color:#ffffff !important;
}

html body .topbar.is-about:not(.is-outro-coverage) .logo-img.is-light,
html body .topbar.is-about:not(.is-outro-coverage) .logo-img.is-about{
  display:none !important;
}

html body .topbar.is-about:not(.is-outro-coverage) .logo-img.is-dark{
  display:block !important;
}

/* Coverage-Teil der integrierten Outro-Bühne: helles Logo, dunkle Controls. */
html body .topbar.is-outro-coverage{
  color:#1f4187 !important;
}

html body .topbar.is-outro-coverage .menu-btn,
html body .topbar.is-outro-coverage .lang a{
  color:#1f4187 !important;
}

html body .topbar.is-outro-coverage .logo-img.is-light{
  display:block !important;
}

html body .topbar.is-outro-coverage .logo-img.is-dark,
html body .topbar.is-outro-coverage .logo-img.is-about{
  display:none !important;
}

/* v1.425 — Flügel-/Menü-/Referenzen-Feinschliff.
   1) Quote im dunklen Flügel 10% kleiner, line-height unverändert.
   2) Dunkler Flügel an die dunkle Blauwelt der Leistungen-Sektion angeglichen.
   3) Menüpanel im Über-mich-Zustand hell.
   4) Referenzsiegel bei offenem Menü im Über-mich-Zustand halbtransparent. */
@media (min-width:901px){
  html body #leistungen.section.services .leistungen-outro-side{
    background:
      radial-gradient(92% 82% at 18% 18%, rgba(22, 135, 200, .20) 0%, rgba(22, 135, 200, .08) 34%, rgba(22, 135, 200, 0) 68%),
      radial-gradient(90% 86% at 92% 72%, rgba(0, 84, 147, .22) 0%, rgba(0, 84, 147, .10) 38%, rgba(0, 84, 147, 0) 76%),
      linear-gradient(33deg, #071f40 0%, #032164 58%, #005493 100%) !important;
  }

  html body #leistungen.section.services .leistungen-outro-side .leistungen-outro-quote{
    font-size:calc(var(--about-u) * 25.65) !important;
    line-height:1.18 !important;
  }
}

html body .topbar.is-about:not(.is-outro-coverage) ~ .menu.is-open .menu-links a,
html body .topbar.is-about:not(.is-outro-coverage) ~ .menu.is-open .menu-legal,
html body .topbar.is-about:not(.is-outro-coverage) ~ .menu.is-open .menu-close{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  text-shadow:0 2px 18px rgba(0,0,0,.22) !important;
}

html body .topbar.is-about:not(.is-outro-coverage) ~ .menu.is-open .menu-links a.on-light,
html body .topbar.is-about:not(.is-outro-coverage) ~ .menu.is-open .menu-legal.on-light,
html body .topbar.is-about:not(.is-outro-coverage) ~ .menu.is-open.menu-on-light .menu-links a,
html body .topbar.is-about:not(.is-outro-coverage) ~ .menu.is-open.menu-on-light .menu-legal{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  text-shadow:0 2px 18px rgba(0,0,0,.22) !important;
}

html body.menu-open .topbar.is-about:not(.is-outro-coverage) ~ main #leistungen.section.services .leistungen-outro-side .about-references-seal{
  opacity:.50 !important;
}


/* v1.426 — Outro-Flügel Feintuning.
   1) Quote im dunklen Flügel: line-height 1.28.
   2) Coverage-Right horizontal in der weißen rechten Fläche zentrieren.
   3) Mittleren Flügel ruhiger / tiefer / weniger cyan abstimmen. */
@media (min-width:901px){
  html body #leistungen.section.services .leistungen-outro-side .leistungen-outro-quote{
    line-height:1.28 !important;
  }

  /* Der mittlere Informationsflügel bleibt heller als der dunkle Flügel,
     wirkt aber gedeckter und stärker aus derselben HaptiaCare-Blauwelt. */
  html body #leistungen.section.services .leistungen-outro-copy{
    background:linear-gradient(33deg, #0a4d8a 0%, #407eb9 100%) !important;
  }

  /* Coverage-Right mittig in der hellen rechten Bühne platzieren.
     Die weiße Fläche beginnt am rechten Rand des dunklen Flügels. */
  html body #leistungen.section.services .leistungen-outro{
    --coverage-right-area-left:calc(var(--about-dark-wing-x, 0vw) + var(--about-dark-wing-width));
    --coverage-right-area-width:calc(100vw - var(--coverage-right-area-left));
  }

  html body #leistungen.section.services .leistungen-outro-coverage-right{
    left:calc(var(--coverage-right-area-left) + ((var(--coverage-right-area-width) - var(--coverage-right-w)) / 2)) !important;
    right:auto !important;
  }
}

/* v1.428 — sehr subtile Farbveredelung der beiden blauen Flügel.
   Nur die Gradients der Flügel werden feinjustiert; Layout/Choreografie bleiben unverändert. */
@media (min-width:901px){
  /* Mittlerer Flügel: etwas mehr Verlaufstiefe, Grundcharakter bleibt offen und lebendig. */
  html body #leistungen.section.services .leistungen-outro-copy{
    background:linear-gradient(33deg, #084a86 0%, #4582be 100%) !important;
  }

  /* Rechter Flügel: weiterhin tief und ruhig, aber mit minimal mehr sichtbarem Blauanteil. */
  html body #leistungen.section.services .leistungen-outro-side{
    background:
      radial-gradient(92% 82% at 18% 18%, rgba(22, 135, 200, .20) 0%, rgba(22, 135, 200, .08) 34%, rgba(22, 135, 200, 0) 68%),
      radial-gradient(90% 86% at 92% 72%, rgba(0, 84, 147, .22) 0%, rgba(0, 84, 147, .10) 38%, rgba(0, 84, 147, 0) 76%),
      linear-gradient(33deg, #082448 0%, #063071 58%, #0a5b9d 100%) !important;
  }
}



/* v1.429 — Über-mich-Slide: typografische Veredelung.
   Ausschließlich Text-/Typografie-Werte im About-Zustand der integrierten
   Leistungen-Outro-Bühne. Keine Choreografie-, Layout-, Breiten- oder
   Coverage-Änderungen. */
@media (min-width:901px){
  /* Haupttitel: minimal mehr Präsenz und Substanz, ohne harte Weißwirkung. */
  html body #leistungen.section.services .leistungen-outro-copy .leistungen-outro-title,
  html body #leistungen.section.services .leistungen-outro-copy .leistungen-outro-title-line{
    color:rgba(247, 251, 255, .96) !important;
    -webkit-text-fill-color:rgba(247, 251, 255, .96) !important;
    text-shadow:0 20px 46px rgba(0, 18, 42, .20) !important;
  }

  @supports ((-webkit-background-clip:text) or (background-clip:text)){
    html body #leistungen.section.services .leistungen-outro-copy .leistungen-outro-title[data-headline-fx],
    html body #leistungen.section.services .leistungen-outro-copy .leistungen-outro-title[data-headline-fx] .leistungen-outro-title-line{
      background-image:
        linear-gradient(90deg,
          rgba(250,253,255,.98) 0%,
          rgba(237,247,255,.88) 24%,
          rgba(205,226,252,.56) 52%,
          rgba(250,253,255,.98) 100%),
        radial-gradient(48vw 30vw at 7vw 8vh,
          rgba(255,255,255,.68) 0%,
          rgba(232,244,255,.48) 28%,
          rgba(150,194,240,0) 74%),
        radial-gradient(66vw 58vw at var(--reactive-x, 52vw) var(--reactive-y, 42vh),
          rgba(246,250,255,.76) 0%,
          rgba(222,237,255,.60) 20%,
          rgba(130,176,230,.23) 46%,
          rgba(18,35,79,0) 78%) !important;
      -webkit-background-clip:text !important;
      background-clip:text !important;
      -webkit-text-fill-color:transparent !important;
      color:rgba(247, 251, 255, .96) !important;
      filter:saturate(.98) brightness(1.10) contrast(1.01) !important;
      text-shadow:0 20px 46px rgba(0, 18, 42, .18) !important;
    }
  }

  /* Name / Untertitel: persönlich und fein, aber etwas ruhiger/offener. */
  html body #leistungen.section.services .leistungen-outro-copy .leistungen-outro-subtitle{
    color:rgba(240, 247, 255, .88) !important;
    -webkit-text-fill-color:rgba(240, 247, 255, .88) !important;
    letter-spacing:.006em !important;
    font-weight:400 !important;
    text-shadow:0 12px 30px rgba(0, 18, 42, .10) !important;
  }

  /* Fließtext: weniger UI-artig, weniger hart weiß, ruhiger editorialer Satz. */
  html body #leistungen.section.services .leistungen-outro-copy .leistungen-outro-text,
  html body #leistungen.section.services .leistungen-outro-copy .leistungen-outro-text p{
    color:rgba(245, 248, 250, .92) !important;
    -webkit-text-fill-color:rgba(245, 248, 250, .92) !important;
    letter-spacing:.014em !important;
    line-height:1.62 !important;
    font-weight:400 !important;
    text-shadow:none !important;
  }

  /* Zitat: etwas präsenter, warmes Off-White, weiterhin diskret und hochwertig. */
  html body #leistungen.section.services .leistungen-outro-side .leistungen-outro-quote{
    font-size:calc(var(--about-u) * 26.9) !important;
    line-height:1.31 !important;
    color:rgba(250, 247, 239, .93) !important;
    -webkit-text-fill-color:rgba(250, 247, 239, .93) !important;
    text-shadow:0 18px 42px rgba(0, 12, 30, .18) !important;
  }

  html body #leistungen.section.services .leistungen-outro-side .leistungen-outro-quote p{
    color:rgba(250, 247, 239, .93) !important;
    -webkit-text-fill-color:rgba(250, 247, 239, .93) !important;
    letter-spacing:.004em !important;
    line-height:inherit !important;
    font-weight:400 !important;
    text-shadow:inherit !important;
  }

  /* Referenzen-Link: diskret, aber nicht verloren. Keine Button-Anmutung. */
  html body #leistungen.section.services .leistungen-outro-side .about-references-seal-link,
  html body #leistungen.section.services .leistungen-outro-side .about-references-seal-link-label,
  html body #leistungen.section.services .leistungen-outro-side .about-references-seal-link-arrow{
    color:rgba(250, 247, 239, .90) !important;
    -webkit-text-fill-color:rgba(250, 247, 239, .90) !important;
    opacity:.94 !important;
    letter-spacing:.018em !important;
    text-shadow:0 10px 24px rgba(0, 12, 30, .16) !important;
  }
}



/* v1.430 — Typografie Feinschliff: Leistungen-Fließtexte + Leitidee.
   Keine Scroll-/Pinning-/JS-/Layout-Änderungen; nur Textwerte und bewusste
   Zeilen-/Hierarchiegestaltung innerhalb bestehender Elemente. */

/* Leistungen-Slides: Fließtexte etwas ruhiger, leichter und klarer lesbar. */
html body #leistungen.section.services .leistungen-text p{
  color:rgba(238, 246, 252, 0.92) !important;
  line-height:1.45 !important;
  letter-spacing:.01em !important;
  font-weight:400 !important;
}

/* Leitidee: ruhiger Markenleitsatz statt lauter Claim. */
html body #leitidee.section.story.theme-light{
  --story-ink-refined:rgba(82, 94, 106, .82);
  --story-accent-refined:#205c96;
}

html body #leitidee .story-text{
  gap:.035em !important;
  font-size:clamp(29px, 2.46vw, 34px) !important;
  line-height:1.13 !important;
  letter-spacing:-.026em !important;
  font-weight:400 !important;
  color:var(--story-ink-refined) !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,.72),
    0 18px 46px rgba(16, 43, 74, .038) !important;
}

html body #leitidee .story-slide .story-text .story-accent{
  color:var(--story-accent-refined) !important;
  font-weight:550 !important;
  letter-spacing:-.028em !important;
  line-height:1.08 !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,.58),
    0 14px 34px rgba(20, 82, 145, .052) !important;
}

html body #leitidee .story-slide .story-text .story-detail{
  display:inline-block;
  color:rgba(82, 94, 106, .76) !important;
  -webkit-text-fill-color:rgba(82, 94, 106, .76) !important;
  font-size:.91em;
  line-height:1.52;
  letter-spacing:-.010em;
  font-weight:400;
  text-shadow:
    0 1px 0 rgba(255,255,255,.70),
    0 14px 38px rgba(16, 43, 74, .028);
}

html body #leitidee .story-slide .story-text .story-detail-start{
  padding-top:.54em;
}

html body #leitidee .story-ui{
  margin-top:clamp(56px, 10.7vh, 108px) !important;
  opacity:.88 !important;
}

html body #leitidee .story-count{
  color:rgba(61,72,82,.46) !important;
}

html body #leitidee .story-progress::before{
  background:linear-gradient(90deg,
    rgba(30,63,100,0) 0%,
    rgba(30,63,100,.12) 14%,
    rgba(30,63,100,.17) 50%,
    rgba(30,63,100,.12) 86%,
    rgba(30,63,100,0) 100%) !important;
}

html body #leitidee .story-thumb{
  height:1px !important;
  background:linear-gradient(90deg, rgba(35,83,136,.64), rgba(25,72,128,.78)) !important;
  box-shadow:0 0 12px rgba(47,105,168,.06) !important;
}

@media (max-width:1100px){
  html body #leitidee .story-text{
    font-size:clamp(24px, 3.25vw, 31px) !important;
    line-height:1.14 !important;
    letter-spacing:-.022em !important;
  }

  html body #leitidee .story-slide .story-text .story-detail{
    font-size:.92em;
    line-height:1.50;
  }

  html body #leitidee .story-slide .story-text .story-detail-start{
    padding-top:.48em;
  }
}

@media (max-width:760px){
  html body #leitidee .story-text{
    font-size:clamp(17px, 4.58vw, 22.8px) !important;
  }

  html body #leitidee .story-slide .story-text .story-detail{
    font-size:.93em;
    line-height:1.46;
  }
}



/* v1.431 — Leitidee: konsistente Typografie und bewusst gesetzte Umbrüche.
   Nur Leitidee-Textsystematik; keine Scroll-/Pinning-/Slider-/Layoutänderung. */
html body #leitidee.section.story.theme-light{
  --story-ink-refined:rgba(82, 94, 106, .80);
  --story-accent-refined:#205c96;
}

html body #leitidee .story-text{
  gap:.028em !important;
  font-size:clamp(29px, 2.42vw, 34px) !important;
  line-height:1.12 !important;
  letter-spacing:-.024em !important;
  font-weight:400 !important;
  color:var(--story-ink-refined) !important;
}

html body #leitidee .story-line{
  line-height:1.12 !important;
  overflow:visible !important;
}

html body #leitidee .story-line__inner{
  line-height:inherit !important;
}

html body #leitidee .story-slide .story-text .story-accent{
  display:inline-block !important;
  color:var(--story-accent-refined) !important;
  font-weight:550 !important;
  line-height:1.10 !important;
  letter-spacing:-.026em !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,.58),
    0 14px 34px rgba(20, 82, 145, .050) !important;
}

html body #leitidee .story-slide .story-text .story-detail{
  display:inline-block !important;
  color:rgba(82, 94, 106, .76) !important;
  -webkit-text-fill-color:rgba(82, 94, 106, .76) !important;
  font-size:.91em !important;
  line-height:1.14 !important;
  letter-spacing:-.008em !important;
  font-weight:400 !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,.70),
    0 14px 38px rgba(16, 43, 74, .026) !important;
}

/* Einziger systematischer Abstand zwischen blauem Hauptteil und grauem Zusatz —
   identisch für alle Slides und alle Sprachen. */
html body #leitidee .story-slide .story-text .story-detail-start{
  padding-top:.56em !important;
}

html body #leitidee .story-ui{
  margin-top:clamp(56px, 10.7vh, 108px) !important;
}

@media (max-width:1100px){
  html body #leitidee .story-text{
    font-size:clamp(24px, 3.20vw, 31px) !important;
    line-height:1.13 !important;
    letter-spacing:-.021em !important;
  }

  html body #leitidee .story-slide .story-text .story-accent{
    line-height:1.11 !important;
  }

  html body #leitidee .story-slide .story-text .story-detail{
    font-size:.92em !important;
    line-height:1.15 !important;
  }

  html body #leitidee .story-slide .story-text .story-detail-start{
    padding-top:.50em !important;
  }
}

@media (max-width:760px){
  html body #leitidee .story-text{
    font-size:clamp(17px, 4.50vw, 22.6px) !important;
  }

  html body #leitidee .story-slide .story-text .story-detail{
    font-size:.93em !important;
    line-height:1.16 !important;
  }

  html body #leitidee .story-slide .story-text .story-detail-start{
    padding-top:.46em !important;
  }
}



/* v1.433 — Leitidee: etwas mehr Autorität innerhalb der ruhigen Typografie.
   Nur typografische CSS-Werte der Leitidee. Keine Inhalte, Umbrüche, Scroll-
   Logik, Slider-Mechanik, Hintergründe oder andere Sektionen. */
html body #leitidee.section.story.theme-light{
  --story-ink-refined:rgba(76, 88, 100, .84);
  --story-accent-refined:#205c96;
}

html body #leitidee .story-text{
  font-size:clamp(30px, 2.50vw, 35px) !important;
  line-height:1.12 !important;
  letter-spacing:-.024em !important;
  font-weight:420 !important;
  color:var(--story-ink-refined) !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,.70),
    0 18px 46px rgba(16, 43, 74, .040) !important;
}

html body #leitidee .story-slide .story-text .story-accent{
  color:var(--story-accent-refined) !important;
  font-weight:550 !important;
  letter-spacing:-.026em !important;
}

html body #leitidee .story-slide .story-text .story-detail{
  color:rgba(76, 88, 100, .84) !important;
  -webkit-text-fill-color:rgba(76, 88, 100, .84) !important;
  font-size:.94em !important;
  line-height:1.15 !important;
  letter-spacing:-.009em !important;
  font-weight:420 !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,.68),
    0 14px 38px rgba(16, 43, 74, .030) !important;
}

/* Die Trennung bleibt luftig, wirkt aber etwas weniger wie Headline + Unterzeile. */
html body #leitidee .story-slide .story-text .story-detail-start{
  padding-top:.46em !important;
}

@media (max-width:1100px){
  html body #leitidee .story-text{
    font-size:clamp(24.8px, 3.28vw, 32px) !important;
    line-height:1.13 !important;
    font-weight:420 !important;
  }

  html body #leitidee .story-slide .story-text .story-detail{
    font-size:.94em !important;
    line-height:1.16 !important;
    font-weight:420 !important;
  }

  html body #leitidee .story-slide .story-text .story-detail-start{
    padding-top:.44em !important;
  }
}

@media (max-width:760px){
  html body #leitidee .story-text{
    font-size:clamp(17.4px, 4.62vw, 23.2px) !important;
  }

  html body #leitidee .story-slide .story-text .story-detail{
    font-size:.94em !important;
    line-height:1.17 !important;
  }

  html body #leitidee .story-slide .story-text .story-detail-start{
    padding-top:.42em !important;
  }
}



/* v1.434 — Leitidee: eine gemeinsame typografische Stimme.
   Blau und Grau unterscheiden sich nur noch über den Farbton, nicht mehr über
   Größe, Gewicht, Line-height oder zusätzlichen Blockabstand. */
html body #leitidee.section.story.theme-light{
  --story-ink-refined:rgba(76, 88, 100, .84);
  --story-accent-refined:#205c96;
}

html body #leitidee .story-text{
  font-size:clamp(30px, 2.50vw, 35px) !important;
  line-height:1.14 !important;
  letter-spacing:-.024em !important;
  font-weight:420 !important;
  color:var(--story-ink-refined) !important;
}

html body #leitidee .story-line,
html body #leitidee .story-line__inner{
  line-height:1.14 !important;
}

html body #leitidee .story-slide .story-text .story-accent,
html body #leitidee .story-slide .story-text .story-detail{
  display:inline-block !important;
  font-size:1em !important;
  line-height:1.14 !important;
  letter-spacing:-.024em !important;
  font-weight:420 !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,.68),
    0 14px 38px rgba(16, 43, 74, .028) !important;
}

html body #leitidee .story-slide .story-text .story-accent{
  color:var(--story-accent-refined) !important;
  -webkit-text-fill-color:var(--story-accent-refined) !important;
}

html body #leitidee .story-slide .story-text .story-detail{
  color:var(--story-ink-refined) !important;
  -webkit-text-fill-color:var(--story-ink-refined) !important;
}

/* Kein zusätzlicher typografischer Blockabstand mehr zwischen blauem und grauem Teil. */
html body #leitidee .story-slide .story-text .story-detail-start{
  padding-top:0 !important;
}

@media (max-width:1100px){
  html body #leitidee .story-text{
    font-size:clamp(24.8px, 3.28vw, 32px) !important;
    line-height:1.14 !important;
    font-weight:420 !important;
  }

  html body #leitidee .story-line,
  html body #leitidee .story-line__inner,
  html body #leitidee .story-slide .story-text .story-accent,
  html body #leitidee .story-slide .story-text .story-detail{
    line-height:1.14 !important;
    font-weight:420 !important;
  }

  html body #leitidee .story-slide .story-text .story-detail-start{
    padding-top:0 !important;
  }
}

@media (max-width:760px){
  html body #leitidee .story-text{
    font-size:clamp(17.4px, 4.62vw, 23.2px) !important;
  }

  html body #leitidee .story-line,
  html body #leitidee .story-line__inner,
  html body #leitidee .story-slide .story-text .story-accent,
  html body #leitidee .story-slide .story-text .story-detail{
    line-height:1.15 !important;
  }
}



/* v1.435 — Font-weight-Feinschliff Leistungen / Über-mich / Coverage.
   Nur gewünschte Schriftgewichte, keine Layout-, Scroll- oder Inhaltsänderungen. */
html body #leistungen.section.services .leistungen-text,
html body #leistungen.section.services .leistungen-text p,
html body #leistungen.section.services .leistungen-outro-text,
html body #leistungen.section.services .leistungen-outro-text p,
html body #leistungen.section.services .leistungen-outro-coverage-statement,
html body #leistungen.section.services .leistungen-outro-coverage-statement p{
  font-weight:450 !important;
}

html body #leistungen.section.services .leistungen-outro-coverage-item,
html body #leistungen.section.services .leistungen-outro-coverage-item-copy,
html body #leistungen.section.services .leistungen-outro-coverage-item-copy p{
  font-weight:400 !important;
}

html body #leistungen.section.services .leistungen-outro-coverage-item-title{
  font-weight:500 !important;
}



/* v1.436 — Feinkorrektur Font-weight / Quote-Zeilenhöhe.
   Nur die zwei gewünschten Werte, keine Layout-, Scroll- oder Inhaltsänderungen. */
html body #leistungen.section.services .leistungen-outro-coverage-statement,
html body #leistungen.section.services .leistungen-outro-coverage-statement p{
  font-weight:400 !important;
}

html body #leistungen.section.services .leistungen-outro-side .leistungen-outro-quote,
html body #leistungen.section.services .leistungen-outro-side .leistungen-outro-quote p,
html body #leistungen.section.services .leistungen-outro-quote,
html body #leistungen.section.services .leistungen-outro-quote p{
  line-height:1.40 !important;
}



/* v1.437 — Über-mich-Fließtext visuell an Coverage-Statement angleichen.
   Nur typografische Angleichung der Fließtextgröße; keine Layout-, Scroll-
   oder Inhaltsänderungen. */
@media (min-width:901px){
  html body #leistungen.section.services .leistungen-outro-copy .leistungen-outro-text,
  html body #leistungen.section.services .leistungen-outro-copy .leistungen-outro-text p{
    font-size:calc(var(--about-u) * 21.7) !important;
  }
}



/* v1.438 — Coverage-Right wird nicht mehr spät eingeblendet.
   Der rechte Coverage-Block steht früh an seiner finalen Position unter dem
   dunkelblauen Flügel. Die Sichtbarkeit entsteht durch Aufdeckung beim
   Wegfahren des dunklen Flügels, nicht durch einen späten Fade-in. */
@media (min-width:901px){
  /* Die Coverage-Ebene darf keine eigene höhere Stacking-Context-Bühne mehr
     erzwingen, damit Coverage-Left über, Coverage-Right aber unter dem
     dunklen Flügel liegen kann. */
  html body #leistungen.section.services .leistungen-outro-coverage{
    z-index:auto !important;
    isolation:auto !important;
  }

  html body #leistungen.section.services .leistungen-outro-coverage-inner{
    z-index:auto !important;
    isolation:auto !important;
  }

  /* Dunkler Flügel bleibt die deckende Ebene. */
  html body #leistungen.section.services .leistungen-outro-side{
    z-index:9 !important;
  }

  /* Linker Coverage-Block bleibt über dem dunklen Flügel lesbar. */
  html body #leistungen.section.services .leistungen-outro-coverage-left{
    z-index:11 !important;
  }

  /* Rechter Coverage-Block: finale Position bereits während des Übergangs.
     Er liegt unter dem dunklen Flügel und wird durch dessen Bewegung enthüllt. */
  html body #leistungen.section.services .leistungen-outro{
    --coverage-right-final-area-left:calc(-25vw + var(--about-dark-wing-width));
    --coverage-right-final-area-width:calc(100vw - var(--coverage-right-final-area-left));
  }

  html body #leistungen.section.services .leistungen-outro-coverage-right{
    left:calc(var(--coverage-right-final-area-left) + ((var(--coverage-right-final-area-width) - var(--coverage-right-w)) / 2)) !important;
    right:auto !important;
    opacity:var(--about-coverage-right-t, 0) !important;
    transform:none !important;
    z-index:8 !important;
    will-change:opacity !important;
  }
}


/* v1.439 — Coverage-Right wirklich unter dem dunklen Flügel.
   Ursache: .leistungen-outro-layout hatte z-index:5 und bildete damit einen
   eigenen Stacking Context. Der dunkle Flügel war darin gefangen, während
   Coverage-Right als Coverage-Child darüber malen konnte. Auf Desktop wird
   dieser parent Stacking Context neutralisiert; die eigentlichen Elemente
   staffeln nun direkt gegeneinander: Right 8, dunkler Flügel 9, Left 11. */
@media (min-width:901px){
  html body #leistungen.section.services .leistungen-outro-layout{
    z-index:auto !important;
    isolation:auto !important;
    transform:none !important;
  }

  html body #leistungen.section.services .leistungen-outro-coverage,
  html body #leistungen.section.services .leistungen-outro-coverage-inner{
    z-index:auto !important;
    isolation:auto !important;
    transform:none !important;
  }

  html body #leistungen.section.services .leistungen-outro-coverage-right{
    z-index:8 !important;
  }

  html body #leistungen.section.services .leistungen-outro-side{
    z-index:9 !important;
  }

  html body #leistungen.section.services .leistungen-outro-coverage-left{
    z-index:11 !important;
  }
}

/* v1.440 — About-Referenzsiegel: Hover-Vergrößerung im dunklen Flügel wiederherstellen.
   Ursache der Regression: die spätere Flügel-Positionierung setzte transform
   ohne den vorhandenen Hover-Scale. Nur Transform/Transition am Seal, keine
   Layout-, Scroll- oder Inhaltsänderungen. */
@media (min-width:901px){
  html body #leistungen.section.services .leistungen-outro-side .about-references-seal{
    --about-seal-hover-scale:1;
    transform:translate3d(-50%, 0, 0) scale(var(--about-seal-hover-scale)) !important;
    transform-origin:center top !important;
    transition:
      transform 420ms cubic-bezier(.22,.61,.36,1),
      opacity 260ms ease-out,
      color 360ms cubic-bezier(.22,.61,.36,1) !important;
    will-change:transform, opacity !important;
  }

  html body #leistungen.section.services .leistungen-outro-side .about-references-seal:hover,
  html body #leistungen.section.services .leistungen-outro-side .about-references-seal:focus-visible{
    --about-seal-hover-scale:1.04;
  }

  html body #leistungen.section.services .leistungen-outro-side .about-references-seal-emblem{
    transition:
      transform 420ms cubic-bezier(.22,.61,.36,1),
      filter 420ms cubic-bezier(.22,.61,.36,1),
      opacity 420ms cubic-bezier(.22,.61,.36,1) !important;
    transform-origin:center center !important;
  }

  @media (prefers-reduced-motion:reduce){
    html body #leistungen.section.services .leistungen-outro-side .about-references-seal:hover,
    html body #leistungen.section.services .leistungen-outro-side .about-references-seal:focus-visible{
      --about-seal-hover-scale:1;
    }
  }
}



/* v1.441 — About-Referenzsiegel: Hover-Scale nur auf dem Emblem.
   Der untere Referenzen-Link bleibt unskaliert; das Siegel selbst skaliert aus
   seiner optischen Mitte. Keine Layout-, Scroll- oder Inhaltsänderungen. */
@media (min-width:901px){
  html body #leistungen.section.services .leistungen-outro-side .about-references-seal{
    --about-seal-hover-scale:1;
    transform:translate3d(-50%, 0, 0) !important;
    transform-origin:center top !important;
    transition:
      opacity 260ms ease-out,
      color 360ms cubic-bezier(.22,.61,.36,1) !important;
    will-change:opacity !important;
  }

  html body #leistungen.section.services .leistungen-outro-side .about-references-seal:hover,
  html body #leistungen.section.services .leistungen-outro-side .about-references-seal:focus-visible{
    --about-seal-hover-scale:1.04;
  }

  html body #leistungen.section.services .leistungen-outro-side .about-references-seal-emblem{
    transform:scale(var(--about-seal-hover-scale)) !important;
    transform-origin:50% 50% !important;
    transition:
      transform 420ms cubic-bezier(.22,.61,.36,1),
      filter 420ms cubic-bezier(.22,.61,.36,1),
      opacity 420ms cubic-bezier(.22,.61,.36,1) !important;
    will-change:transform !important;
  }

  html body #leistungen.section.services .leistungen-outro-side .about-references-seal-link,
  html body #leistungen.section.services .leistungen-outro-side .about-references-seal-link-label,
  html body #leistungen.section.services .leistungen-outro-side .about-references-seal-link-arrow{
    transform:none !important;
    will-change:auto !important;
  }

  @media (prefers-reduced-motion:reduce){
    html body #leistungen.section.services .leistungen-outro-side .about-references-seal:hover,
    html body #leistungen.section.services .leistungen-outro-side .about-references-seal:focus-visible{
      --about-seal-hover-scale:1;
    }
  }
}



/* v1.443 — Leitidee: story-count farblich exakt an graue Textebene koppeln.
   Nur Farbdetail; keine Typografie-, Layout-, Hintergrund- oder Logikänderung. */
html body #leitidee.section.story.theme-light{
  --story-gray-text:var(--story-ink-refined);
}

html body #leitidee .story-slide .story-text .story-detail{
  color:var(--story-gray-text) !important;
  -webkit-text-fill-color:var(--story-gray-text) !important;
}

html body #leitidee .story-count{
  color:var(--story-gray-text) !important;
}


/* v1.444 — About-Referenzsiegel: Abstand zur Quote stabilisieren.
   Ursache: Quote und Siegel waren absolut mit festem Top-Offset positioniert.
   Wenn die Quote bei schmalerer Fensterbreite mehr Zeilen bekam, rückte ihr
   optisches Ende nach unten, das Siegel aber blieb auf derselben Top-Position.
   Jetzt laufen Quote und Siegel innerhalb des sichtbaren 25vw-Fensters im
   vertikalen Flow; der Abstand entsteht als konstante Margin nach der realen
   Quote-Höhe. Keine Choreografie-, Scroll- oder Inhaltsänderung. */
@media (min-width:901px){
  html body #leistungen.section.services .leistungen-outro-side{
    --about-quote-seal-gap:clamp(34px, 3.4svh, 46px);
    padding:calc(var(--about-top-gap) + (var(--about-u) * 330)) 0 0 0 !important;
  }

  html body #leistungen.section.services .leistungen-outro-side .leistungen-outro-quote{
    position:relative !important;
    left:0 !important;
    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    width:var(--about-side-wing-width) !important;
    max-width:var(--about-side-wing-width) !important;
    box-sizing:border-box !important;
    padding:0 clamp(32px, 3vw, 58px) !important;
    margin:0 !important;
    transform:none !important;
  }

  html body #leistungen.section.services .leistungen-outro-side .about-references-seal{
    position:relative !important;
    left:calc(var(--about-side-wing-width) / 2) !important;
    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    width:calc(var(--about-u) * 220) !important;
    height:auto !important;
    min-height:calc((var(--about-u) * 220) + (var(--about-u) * 34)) !important;
    margin:var(--about-quote-seal-gap) 0 0 0 !important;
    transform:translate3d(-50%, 0, 0) !important;
    transform-origin:center top !important;
  }

  html body #leistungen.section.services .leistungen-outro-side .about-references-seal-emblem{
    transform:scale(var(--about-seal-hover-scale, 1)) !important;
    transform-origin:50% 50% !important;
  }
}



/* v1.456 — Über-mich: hellerer Flügel dunkler/frischer, weniger Cyan.
   Nur Farbverlauf des hellblauen Copy-Flügels; keine Layout-, Scroll- oder JS-Änderung. */
@media (min-width:901px){
  html body #leistungen.section.services .leistungen-outro-copy{
    background:linear-gradient(33deg, #006eb4 0%, #00257e 100%) !important;
  }
}



/* v1.457 — Über-mich: hellen Flügel-Verlauf um 180° drehen und Titel abdunkeln.
   Nur Farbdetails; keine Layout-, Scroll-, Timeline- oder Inhaltsänderung. */
@media (min-width:901px){
  html body #leistungen.section.services .leistungen-outro-copy{
    background:linear-gradient(213deg, #006eb4 0%, #00257e 100%) !important;
  }

  html body #leistungen.section.services .leistungen-outro-copy .leistungen-outro-title{
    color:#154f85 !important;
    -webkit-text-fill-color:#154f85 !important;
  }
}


/* v1.458 — Kontakt: vorhandenen lokalen Titel-Shade um ca. 15% verdunkeln.
   Nutzt denselben Layer unterhalb des Kontaktinhalts (.contact-pin::before);
   keine Layout-, Text-, Hintergrundidee- oder Scroll-Änderung. */
.section.contact.contact-v107 > .section-pin.contact-pin::before{
  background:
    radial-gradient(68vw 48vw at 11% 14%, rgba(9, 45, 86, .23) 0%, rgba(9, 45, 86, .15) 22%, rgba(9, 45, 86, .08) 42%, rgba(9, 45, 86, 0) 68%),
    radial-gradient(42vw 28vw at 18% 22%, rgba(6, 34, 72, .092) 0%, rgba(6, 34, 72, .046) 36%, rgba(6, 34, 72, 0) 72%) !important;
}

@media (max-width:900.98px){
  .section.contact.contact-v107 > .section-pin.contact-pin::before{
    background:
      radial-gradient(88vw 64vw at 14% 12%, rgba(9, 45, 86, .196) 0%, rgba(9, 45, 86, .127) 30%, rgba(9, 45, 86, .058) 50%, rgba(9, 45, 86, 0) 74%),
      radial-gradient(56vw 38vw at 20% 22%, rgba(6, 34, 72, .069) 0%, rgba(6, 34, 72, .035) 40%, rgba(6, 34, 72, 0) 74%) !important;
  }
}


/* v1.460 — Coverage-Right: Tiefeneffekt analog zu Peter.
   Die drei Punkte starten unter dem dunklen Flügel leicht kleiner und weich;
   beim Aufdecken skalieren sie auf 100% und verlieren den Blur. */
@media (min-width:901px){
  html body #leistungen.section.services .leistungen-outro-coverage-right{
    transform:scale(var(--coverage-right-scale, .9)) !important;
    transform-origin:50% 50% !important;
    filter:blur(var(--coverage-right-blur, 6.3px)) !important;
    will-change:opacity, transform, filter !important;
  }
}

@media (min-width:901px) and (prefers-reduced-motion:reduce){
  html body #leistungen.section.services .leistungen-outro-coverage-right{
    transform:none !important;
    filter:none !important;
  }
}



/* v1.461 — Über-mich: dunkleren Wert des hellen Flügel-Verlaufs ca. 20% entsättigen.
   Nur Farbdetail; keine Layout-, Scroll-, Timeline- oder Inhaltsänderung. */
@media (min-width:901px){
  html body #leistungen.section.services .leistungen-outro-copy{
    background:linear-gradient(213deg, #006eb4 0%, #0d2a71 100%) !important;
  }
}


/* v1.462 — Loader-Monogramm: realerer, satter Goldverlauf.
   Nur Goldwirkung des Loader-Monogramms; keine Layout-, Animations- oder Loader-Logikänderung. */
html body .page-loader{
  --loader-gold:#d6a33a;
}

html body .loader-logo::before{
  background:
    linear-gradient(135deg,
      #6f4712 0%,
      #9b681d 16%,
      #d6a33a 34%,
      #fff0b7 47%,
      #e3b84f 58%,
      #8b5a17 75%,
      #f2d27a 100%) !important;
}


/* v1.466 — Leistungen/Über-mich/Coverage: Responsive-Breakpoint und mobiles Blauflügel-Layout.
   Desktop-/Scroll-Choreografie bleibt ab 901px aktiv. Der statische mobile Modus
   greift erst bis 900px. In diesem Modus werden die alten hellen Hintergrundbilder
   entfernt und Über-mich/Coverage als ruhige vertikale Blauflügel-Sequenz gesetzt. */
@media (min-width:901px) and (max-width:1100px){
  html body #leistungen.section.services .leistungen-symbol-row,
  html body #leistungen.section.services .leistungen-symbol-row[aria-hidden]{
    display:grid !important;
    visibility:visible !important;
    height:auto !important;
    min-height:0 !important;
    margin:0 0 0 auto !important;
    padding:0 var(--leistungen-edge-gutter) 0 0 !important;
    overflow:visible !important;
    pointer-events:auto !important;
    opacity:var(--leistungen-symbol-row-opacity, 1) !important;
  }

  html body #leistungen.section.services .leistungen-outro-title,
  html body #leistungen.section.services .leistungen-outro-coverage-title{
    max-width:revert !important;
  }
}

@media (max-width:900.98px){
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable{
    --about-bg-t:0 !important;
    --about-coverage-bg-t:0 !important;
    --about-photo-ghost-t:0 !important;
    --coverage-photo-ghost-t:0 !important;
    --coverage-right-scale:1 !important;
    --coverage-right-blur:0px !important;
  }

  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .about-bg-layer,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .about-bg-main,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .about-bg-ghost,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .coverage-bg-stage-main,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .coverage-bg-stage-ghost,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .coverage-bg-layer,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .coverage-bg-main,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .coverage-bg-ghost,
  html body #leistungen.section.services.is-mobile-static-stable .about-bg-layer,
  html body #leistungen.section.services.is-mobile-static-stable .about-bg-main,
  html body #leistungen.section.services.is-mobile-static-stable .about-bg-ghost,
  html body #leistungen.section.services.is-mobile-static-stable .coverage-bg-stage-main,
  html body #leistungen.section.services.is-mobile-static-stable .coverage-bg-stage-ghost,
  html body #leistungen.section.services.is-mobile-static-stable .coverage-bg-layer,
  html body #leistungen.section.services.is-mobile-static-stable .coverage-bg-main,
  html body #leistungen.section.services.is-mobile-static-stable .coverage-bg-ghost{
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
    background:none !important;
    background-image:none !important;
    -webkit-mask:none !important;
    mask:none !important;
    filter:none !important;
  }

  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro{
    position:relative !important;
    inset:auto !important;
    overflow:visible !important;
    padding:0 !important;
    margin:clamp(42px, 7svh, 72px) 0 0 !important;
    background:#f5f7f8 !important;
    isolation:isolate !important;
  }

  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro::before,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro::before{
    content:none !important;
    display:none !important;
  }

  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-layout,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-layout{
    position:relative !important;
    inset:auto !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    gap:0 !important;
    width:100% !important;
    max-width:none !important;
    height:auto !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    overflow:visible !important;
    transform:none !important;
    pointer-events:auto !important;
    z-index:2 !important;
  }

  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-visual,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-visual{
    position:relative !important;
    inset:auto !important;
    width:100% !important;
    max-width:none !important;
    height:auto !important;
    min-height:0 !important;
    margin:0 !important;
    padding:clamp(48px, 8svh, 72px) clamp(22px, 7vw, 44px) 0 !important;
    display:flex !important;
    justify-content:center !important;
    align-items:flex-start !important;
    background:linear-gradient(180deg, #f8fafb 0%, #eef3f6 100%) !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    pointer-events:none !important;
    z-index:2 !important;
  }

  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-person,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-person{
    display:block !important;
    width:auto !important;
    height:min(58svh, 520px) !important;
    max-width:82vw !important;
    max-height:520px !important;
    object-fit:contain !important;
    object-position:center bottom !important;
    margin:0 auto !important;
    filter:drop-shadow(0 22px 28px rgba(2, 20, 44, .16)) !important;
  }

  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-copy,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-copy{
    position:relative !important;
    inset:auto !important;
    width:100% !important;
    max-width:none !important;
    min-height:0 !important;
    margin:0 !important;
    padding:clamp(54px, 8svh, 76px) clamp(24px, 7vw, 46px) clamp(58px, 8svh, 82px) !important;
    display:block !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    pointer-events:auto !important;
    background:
      radial-gradient(96% 72% at 18% 14%, rgba(255,255,255,.18) 0%, rgba(255,255,255,.06) 38%, rgba(255,255,255,0) 76%),
      linear-gradient(213deg, #006eb4 0%, #0d2a71 100%) !important;
    color:rgba(248,252,255,.94) !important;
    z-index:3 !important;
  }

  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-copy-inner,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-copy-inner{
    position:relative !important;
    inset:auto !important;
    width:min(100%, 640px) !important;
    max-width:640px !important;
    margin:0 auto !important;
    padding:0 !important;
    transform:none !important;
  }

  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-title,
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-title-line,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-title,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-title-line{
    color:rgba(248,252,255,.96) !important;
    -webkit-text-fill-color:rgba(248,252,255,.96) !important;
    background:none !important;
    text-shadow:0 18px 42px rgba(0, 16, 46, .22) !important;
  }

  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-subtitle,
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-text,
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-text p,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-subtitle,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-text,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-text p{
    color:rgba(238,247,255,.90) !important;
    -webkit-text-fill-color:rgba(238,247,255,.90) !important;
    text-shadow:0 10px 28px rgba(0, 18, 54, .16) !important;
  }

  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-side,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-side{
    position:relative !important;
    inset:auto !important;
    width:100% !important;
    max-width:none !important;
    min-height:0 !important;
    margin:0 !important;
    padding:clamp(52px, 8svh, 76px) clamp(24px, 7vw, 46px) clamp(54px, 8svh, 78px) !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:clamp(30px, 5svh, 46px) !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    pointer-events:auto !important;
    background:
      radial-gradient(92% 82% at 18% 18%, rgba(22,135,200,.18) 0%, rgba(22,135,200,.07) 36%, rgba(22,135,200,0) 72%),
      linear-gradient(33deg, #082448 0%, #063071 58%, #0a5b9d 100%) !important;
    z-index:3 !important;
  }

  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-side .leistungen-outro-quote,
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-side .leistungen-outro-quote p,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-side .leistungen-outro-quote,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-side .leistungen-outro-quote p{
    width:min(100%, 620px) !important;
    max-width:620px !important;
    color:rgba(246,250,255,.93) !important;
    -webkit-text-fill-color:rgba(246,250,255,.93) !important;
    text-shadow:0 18px 40px rgba(0, 10, 32, .22) !important;
  }

  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-side .about-references-seal,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-side .about-references-seal{
    position:relative !important;
    inset:auto !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;
    margin:0 auto !important;
    transform:none !important;
    color:rgba(236,244,252,.82) !important;
    -webkit-text-fill-color:rgba(236,244,252,.82) !important;
  }

  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-coverage,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-coverage{
    position:relative !important;
    inset:auto !important;
    display:block !important;
    width:100% !important;
    max-width:none !important;
    height:auto !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    pointer-events:auto !important;
    z-index:2 !important;
  }

  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-coverage-inner,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-coverage-inner{
    position:relative !important;
    inset:auto !important;
    display:flex !important;
    flex-direction:column !important;
    width:100% !important;
    max-width:none !important;
    height:auto !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    transform:none !important;
    opacity:1 !important;
    visibility:visible !important;
  }

  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-coverage-left,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-coverage-left{
    position:relative !important;
    inset:auto !important;
    width:100% !important;
    max-width:none !important;
    min-height:0 !important;
    margin:0 !important;
    padding:clamp(58px, 8svh, 82px) clamp(24px, 7vw, 46px) clamp(54px, 7.5svh, 76px) !important;
    display:block !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    background:
      radial-gradient(88% 68% at 18% 12%, rgba(255,255,255,.16) 0%, rgba(255,255,255,.05) 40%, rgba(255,255,255,0) 78%),
      linear-gradient(213deg, #006eb4 0%, #0d2a71 100%) !important;
    color:rgba(248,252,255,.95) !important;
  }

  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-coverage-title,
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-coverage-title[data-headline-fx],
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-coverage-statement,
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-coverage-statement p,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-coverage-title,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-coverage-title[data-headline-fx],
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-coverage-statement,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-coverage-statement p{
    color:rgba(248,252,255,.95) !important;
    -webkit-text-fill-color:rgba(248,252,255,.95) !important;
    background:none !important;
    text-shadow:0 18px 40px rgba(0, 16, 46, .18) !important;
  }

  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-coverage-eyebrow,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-coverage-eyebrow{
    color:rgba(238,247,255,.72) !important;
    -webkit-text-fill-color:rgba(238,247,255,.72) !important;
  }

  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-coverage-right,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-coverage-right{
    position:relative !important;
    inset:auto !important;
    width:100% !important;
    max-width:none !important;
    min-height:0 !important;
    margin:0 !important;
    padding:clamp(54px, 8svh, 78px) clamp(24px, 7vw, 46px) clamp(68px, 10svh, 104px) !important;
    display:flex !important;
    flex-direction:column !important;
    gap:clamp(28px, 5svh, 44px) !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    filter:none !important;
    background:
      radial-gradient(92% 82% at 16% 18%, rgba(22,135,200,.18) 0%, rgba(22,135,200,.07) 36%, rgba(22,135,200,0) 72%),
      linear-gradient(33deg, #082448 0%, #063071 58%, #0a5b9d 100%) !important;
    color:rgba(246,250,255,.92) !important;
  }

  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-coverage-item,
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-coverage-item-copy,
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-coverage-item-title,
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-coverage-item-copy p,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-coverage-item,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-coverage-item-copy,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-coverage-item-title,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-coverage-item-copy p{
    color:rgba(246,250,255,.92) !important;
    -webkit-text-fill-color:rgba(246,250,255,.92) !important;
    text-shadow:0 12px 32px rgba(0, 10, 32, .18) !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
  }
}



/* v1.467 — Leistungen: Zwischenbereich 901–1100px sauber skalieren.
   Desktop-Choreografie bleibt aktiv, aber Titel und Symbolreihe werden für diese
   schmale Desktop-/Tablet-Breite deutlich reduziert. Keine Scroll- oder JS-Änderung. */
@media (min-width:901px) and (max-width:1100px){
  html body #leistungen.section.services .leistungen-shell{
    --leistungen-symbol-base-size:clamp(19.5px, 2vw, 37px) !important;
    --leistungen-outro-symbol-size:calc(var(--leistungen-symbol-base-size) * 4) !important;
  }

  html body #leistungen.section.services .leistungen-slide-inner{
    gap:clamp(24px, 3.4vw, 48px) !important;
  }

  html body #leistungen.section.services .leistungen-headline,
  html body #leistungen.section.services .leistungen-slide-head .leistungen-headline{
    /* ca. 30% kleiner als die Desktop-Regel aus v1.347 */
    font-size:clamp(36px, min(3.83vw, 5.59svh), 121px) !important;
    width:min(39vw, clamp(400px, 27vw, 720px)) !important;
    max-width:clamp(400px, 27vw, 720px) !important;
    line-height:.92 !important;
  }

  html body #leistungen.section.services .leistungen-text{
    width:min(31vw, 390px) !important;
    max-width:390px !important;
  }

  html body #leistungen.section.services .leistungen-symbol-row,
  html body #leistungen.section.services .leistungen-symbol-row[aria-hidden]{
    width:min(calc((100vw - var(--viewport-scrollbar, 0px)) * 0.30), 360px) !important;
    gap:clamp(2px, .25vw, 4px) !important;
    padding:0 var(--leistungen-edge-gutter) 0 0 !important;
  }

  html body #leistungen.section.services .leistungen-symbol{
    width:var(--leistungen-symbol-base-size) !important;
    height:var(--leistungen-symbol-base-size) !important;
  }

  html body #leistungen.section.services .leistungen-symbol.is-active{
    --symbol-scale:1.03 !important;
    filter:drop-shadow(0 0 10px rgba(175, 196, 230, .12)) !important;
  }
}



/* v1.468 — Breakpoint-Schutz 899–901px.
   Ursache: Nach der Umstellung auf 900px blieben ältere <=980px-Outro-Regeln
   oberhalb des neuen Breakpoints aktiv. Gleichzeitig konnte der exakte 900px-
   Übergang wegen Rundung/Scrollbar zwischen CSS und JS auseinanderlaufen.
   Ergebnis war ein Mischzustand aus altem hellem About-Layout und neuer Bühne.
   Diese finale Sicherung erzwingt: bis 900.98px statisches Mobile-Layout,
   ab 901px Desktop-/Blauflügel-Choreografie ohne alte 980px-Fallbacks. */
@media (min-width:901px) and (max-width:1100px){
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro,
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro{
    position:absolute !important;
    inset:0 !important;
    margin:0 !important;
    padding:0 !important;
    background:#f7f8f7 !important;
    overflow:hidden !important;
  }

  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-layout,
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-layout{
    position:absolute !important;
    inset:0 !important;
    display:block !important;
    height:100% !important;
    min-height:100% !important;
    transform:none !important;
  }
}



/* v1.469 — Leistungen-Icons 901–1100px: proportional statt hart halbiert.
   Die Symbolgröße läuft jetzt linear von ca. 37px bei 1100px auf ca. 30px bei
   901px. Dadurch bleiben die sieben Icons lesbar und schrumpfen gleichmäßig
   mit der Fensterbreite, statt abrupt auf 50% zu fallen. */
@media (min-width:901px) and (max-width:1100px){
  html body #leistungen.section.services .leistungen-shell{
    --leistungen-symbol-base-size:clamp(
      30px,
      calc(30px + ((100vw - 901px) * 0.0352)),
      37px
    ) !important;
    --leistungen-outro-symbol-size:calc(var(--leistungen-symbol-base-size) * 4) !important;
  }

  html body #leistungen.section.services .leistungen-symbol-row,
  html body #leistungen.section.services .leistungen-symbol-row[aria-hidden]{
    width:min(calc((100vw - var(--viewport-scrollbar, 0px)) * 0.42), 430px) !important;
    gap:clamp(4px, .55vw, 8px) !important;
  }

  html body #leistungen.section.services .leistungen-symbol{
    width:var(--leistungen-symbol-base-size) !important;
    height:var(--leistungen-symbol-base-size) !important;
  }

  html body #leistungen.section.services .leistungen-symbol.is-active{
    --symbol-scale:1.06 !important;
  }
}



/* v1.470 — Mobile Über-mich/Coverage bis 900px: ruhiger Warmweiß-Aufbau.
   Nur mobile statische Ansicht: Peter zentriert, alte Bildhintergründe bleiben aus,
   Flächen warmweiß, Titel im Desktop-Blau, Fließtexte/Quote schwarz. */
@media (max-width:900.98px){
  html body #leistungen.section.services.is-mobile-static-stable,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable,
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro{
    background:#f7f3ed !important;
  }

  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-visual,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-visual{
    justify-content:center !important;
    align-items:flex-start !important;
    text-align:center !important;
    background:#f7f3ed !important;
  }

  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-person,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-person{
    margin-left:auto !important;
    margin-right:auto !important;
    transform:none !important;
  }

  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-copy,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-copy,
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-side,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-side,
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-coverage,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-coverage,
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-coverage-inner,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-coverage-inner,
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-coverage-left,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-coverage-left,
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-coverage-right,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-coverage-right{
    background:#f7f3ed !important;
    color:#141414 !important;
  }

  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-title,
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-title-line,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-title,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-title-line{
    color:#154f85 !important;
    -webkit-text-fill-color:#154f85 !important;
    background:none !important;
    text-shadow:none !important;
  }

  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-subtitle,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-subtitle{
    color:#2b2b2b !important;
    -webkit-text-fill-color:#2b2b2b !important;
    text-shadow:none !important;
  }

  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-text,
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-text p,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-text,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-text p,
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-side .leistungen-outro-quote,
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-side .leistungen-outro-quote p,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-side .leistungen-outro-quote,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-side .leistungen-outro-quote p,
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-coverage-statement,
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-coverage-statement p,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-coverage-statement,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-coverage-statement p,
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-coverage-item,
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-coverage-item-title,
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-coverage-item-copy,
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-coverage-item-copy p,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-coverage-item,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-coverage-item-title,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-coverage-item-copy,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-coverage-item-copy p{
    color:#141414 !important;
    -webkit-text-fill-color:#141414 !important;
    text-shadow:none !important;
  }

  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-coverage-title,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-coverage-title{
    color:#154f85 !important;
    -webkit-text-fill-color:#154f85 !important;
    background:none !important;
    text-shadow:none !important;
  }

  html body #leistungen.section.services.is-mobile-static-stable .about-references-seal,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .about-references-seal,
  html body #leistungen.section.services.is-mobile-static-stable .about-references-seal-link,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .about-references-seal-link{
    color:#5e5a52 !important;
    -webkit-text-fill-color:#5e5a52 !important;
  }
}



/* v1.471 — Mobile Warmweiß nur für Über-mich/Coverage, nicht für die Leistungen-Slides.
   Ursache in v1.470: Warmweiß lag auch auf #leistungen und .leistungen-shell.
   Dadurch wurde die gesamte Leistungen-Sektion hell. Die eigentliche Leistungen-
   Bühne bleibt wieder blau; Warmweiß gilt nur für die statische Outro-Sequenz. */
@media (max-width:900.98px){
  html body #leistungen.section.services.is-mobile-static-stable,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable{
    background:transparent !important;
  }

  html body #leistungen.section.services.theme-dark > .section-pin,
  body.has-scene html body #leistungen.section.services.theme-dark > .section-pin,
  body.has-scene #leistungen.section.services.theme-dark > .section-pin{
    background:
      radial-gradient(620px 460px at 0% 0%, rgba(154, 213, 255, .18), rgba(154, 213, 255, 0) 62%),
      radial-gradient(720px 520px at 78% 34%, rgba(48, 117, 200, .18), rgba(48, 117, 200, 0) 62%),
      linear-gradient(135deg, #071d3d 0%, #062a5c 46%, #02132c 100%) !important;
  }

  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro,
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-visual,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-visual,
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-copy,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-copy,
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-side,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-side,
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-coverage,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-coverage,
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-coverage-inner,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-coverage-inner,
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-coverage-left,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-coverage-left,
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-coverage-right,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-coverage-right{
    background:#f7f3ed !important;
  }

  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-coverage-title,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-coverage-title{
    color:#154f85 !important;
    -webkit-text-fill-color:#154f85 !important;
    background:none !important;
    text-shadow:none !important;
  }
}



/* v1.472 — Mobile Coverage-Titel: Headline-FX-Farbe wirklich überschreiben.
   Ursache: Der Titel "Vertrauen entsteht durch Integrität und Verlässlichkeit"
   trägt zusätzlich data-headline-fx bzw. Title-Line-Spans. Dadurch blieb ein
   älterer heller Headline-FX/Textfill aktiv. Diese Regel überschreibt gezielt
   Titel, FX-Zustand und innere Zeilen im mobilen statischen Layout. */
@media (max-width:900.98px){
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-coverage-title,
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-coverage-title[data-headline-fx],
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-coverage-title .leistungen-outro-title-line,
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-coverage-title-line,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-coverage-title,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-coverage-title[data-headline-fx],
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-coverage-title .leistungen-outro-title-line,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-coverage-title-line{
    color:#154f85 !important;
    -webkit-text-fill-color:#154f85 !important;
    background:none !important;
    background-image:none !important;
    background-clip:border-box !important;
    -webkit-background-clip:border-box !important;
    filter:none !important;
    text-shadow:none !important;
  }
}



/* v1.473 — Mobile Titelgrößen angleichen.
   Die mobilen Über-mich- und Coverage-Titel orientieren sich jetzt an der
   optischen Größe der Leistungen-Titel. Dadurch wirkt .leistungen-outro-title
   nicht mehr größer als .leistungen-outro-coverage-title. */
@media (max-width:900.98px){
  html body #leistungen.section.services{
    --hc-mobile-section-title-size:clamp(34px, 9.92vw, 50px);
  }

  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-title,
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-title[data-headline-fx],
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-title-line,
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-coverage-title,
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-coverage-title[data-headline-fx],
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-coverage-title .leistungen-outro-title-line,
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-coverage-title-line,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-title,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-title[data-headline-fx],
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-title-line,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-coverage-title,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-coverage-title[data-headline-fx],
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-coverage-title .leistungen-outro-title-line,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-coverage-title-line{
    font-size:var(--hc-mobile-section-title-size) !important;
    line-height:.92 !important;
    letter-spacing:-.012em !important;
    text-wrap:balance !important;
  }

  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-title-line,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-title-line{
    white-space:normal !important;
  }
}



/* v1.474 — Smartphone-Feinschliff: mobile Abstände und Seitenpadding.
   Gilt nur für die statische Smartphone-Ansicht bis 900.98px. Desktop,
   Tablet-Desktop-Choreografie und Scroll-/Magnet-Logik bleiben unverändert. */
@media (max-width:900.98px){
  html body{
    --hc-mobile-edge-gutter:clamp(24px, 6.4vw, 36px);
    --hc-mobile-slide-gap:clamp(54px, 8svh, 82px);
  }

  /* Leitidee: die drei Aussagen als getrennte Slides wahrnehmbar machen. */
  html body #leitidee .story-container{
    padding-left:var(--hc-mobile-edge-gutter) !important;
    padding-right:var(--hc-mobile-edge-gutter) !important;
    box-sizing:border-box !important;
  }

  html body #leitidee .story-slides{
    gap:0 !important;
  }

  html body #leitidee .story-slide,
  html body #leitidee .story-slide.is-active,
  html body #leitidee .story-slide.is-reset,
  html body #leitidee .story-slide.is-animating{
    padding:0 !important;
    margin:0 auto !important;
    box-sizing:border-box !important;
  }

  html body #leitidee .story-slide:not(:last-child){
    margin-bottom:var(--hc-mobile-slide-gap) !important;
  }

  /* Leistungen: untereinander dargestellte Service-Slides optisch trennen
     und den Inhalt vom Bildschirmrand lösen. */
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable,
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-shell{
    box-sizing:border-box !important;
  }

  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-topline,
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-topline{
    padding-left:var(--hc-mobile-edge-gutter) !important;
    padding-right:var(--hc-mobile-edge-gutter) !important;
    box-sizing:border-box !important;
  }

  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-stage,
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-stage{
    width:100% !important;
    margin-left:0 !important;
    padding-left:var(--hc-mobile-edge-gutter) !important;
    padding-right:var(--hc-mobile-edge-gutter) !important;
    box-sizing:border-box !important;
    overflow:visible !important;
  }

  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-slide,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-slide.is-active,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-slide[aria-hidden="true"],
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-slide,
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-slide.is-active,
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-slide[aria-hidden="true"]{
    width:100% !important;
    box-sizing:border-box !important;
    margin:0 auto !important;
  }

  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-slide:not(:last-child),
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-slide:not(:last-child){
    margin-bottom:var(--hc-mobile-slide-gap) !important;
  }

  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-slide-inner,
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-slide-inner{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    margin-left:auto !important;
    margin-right:auto !important;
    box-sizing:border-box !important;
  }

  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-headline,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-text,
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-headline,
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-text{
    max-width:100% !important;
    box-sizing:border-box !important;
  }

  /* Peter: oberhalb der Figur mehr Luft schaffen. */
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-visual,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-visual{
    padding-top:clamp(74px, 10.5svh, 104px) !important;
    padding-left:var(--hc-mobile-edge-gutter) !important;
    padding-right:var(--hc-mobile-edge-gutter) !important;
    box-sizing:border-box !important;
  }

  /* Über-mich/Coverage: Inhalte konsequent vom Rand lösen. */
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-copy,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-copy,
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-side,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-side,
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-coverage-left,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-coverage-left,
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-coverage-right,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-coverage-right{
    padding-left:var(--hc-mobile-edge-gutter) !important;
    padding-right:var(--hc-mobile-edge-gutter) !important;
    box-sizing:border-box !important;
  }

  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-copy-inner,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-copy-inner,
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-side .leistungen-outro-quote,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-side .leistungen-outro-quote,
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-coverage-statement,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-coverage-statement{
    width:100% !important;
    max-width:640px !important;
    box-sizing:border-box !important;
  }

  /* Abstand zwischen Siegel und Coverage-Titel. */
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-side,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-side{
    padding-bottom:clamp(72px, 10svh, 104px) !important;
  }

  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-coverage-left,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-coverage-left{
    padding-top:clamp(68px, 9svh, 96px) !important;
  }

  /* Abstand Signatur -> rechte Coverage-Punkte. */
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-coverage-signature,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-coverage-signature{
    margin-bottom:clamp(34px, 5svh, 52px) !important;
  }

  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-coverage-right,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-coverage-right{
    padding-top:clamp(42px, 6svh, 64px) !important;
    padding-bottom:clamp(100px, 13svh, 144px) !important;
  }

  /* Kontakt: auch dort links/rechts sicheren Rand erzwingen. */
  html body .section.contact.contact-v107 .contact-main{
    padding-left:var(--hc-mobile-edge-gutter) !important;
    padding-right:var(--hc-mobile-edge-gutter) !important;
    box-sizing:border-box !important;
  }

  html body .section.contact.contact-v107 .contact-left,
  html body .section.contact.contact-v107 .contact-right,
  html body .section.contact.contact-v107 .contact-form,
  html body .section.contact.contact-v107 .contact-form-grid{
    max-width:100% !important;
    box-sizing:border-box !important;
  }
}

@media (max-width:560px){
  html body{
    --hc-mobile-slide-gap:clamp(62px, 9.5svh, 92px);
  }
}


/* v1.477 — Kontakt: Chrome-Tablet-Viewport-Fix.
   Auf Chrome-Tablets im Desktoplayout können 100vh und 100svh unterschiedlich
   aufgelöst werden. Die Kontakt-Oberfläche nutzte 100svh, während die sticky
   Kontaktfläche und das Footer-Band auf 100vh/vh basierten. Dadurch blieb
   zwischen .contact-main und .contact-footer-band ein sichtbarer Streifen der
   darunterliegenden Contact-Basisfläche. Für das Desktoplayout werden Oberfeld
   und Footer wieder mit derselben vh-Basis berechnet; Mobile bleibt unberührt. */
@media (min-width:901px){
  .section.contact.contact-v107{
    --contact-footer-height:27.7vh;
    --contact-form-extra-y:max(0px, calc(72.3vh - var(--contact-main-top) - (var(--contact-form-base-visual-h) * var(--contact-right-scale)) - var(--contact-footer-gap-target)));
  }

  .section.contact.contact-v107 .contact-main{
    height:calc(100vh - var(--contact-footer-height)) !important;
  }
}

/* v1.478 — Kontakt: Chrome-Tablet-Gap robust schließen.
   Der sichtbare Streifen entsteht nicht durch den Inhalt selbst, sondern durch
   eine Lücke zwischen dem visuellen Oberfeld (.contact-main mit Botanical-
   Layern) und dem absolut unten liegenden Footer-Band. Chrome auf Tablets kann
   die nutzbare Höhe und die dynamische Browserleiste so auflösen, dass die
   Footer-Band-Position und die 72.3vh/svh-Oberfeldhöhe nicht exakt aneinander
   treffen. Deshalb wird die Kontakt-Oberfläche im Desktoplayout visuell bis
   hinter das Footer-Band verlängert. Das Footer-Band liegt weiterhin darüber;
   Formularabstände und Scroll-/Pinning-Logik bleiben unverändert. */
@media (min-width:901px){
  html body .section.contact.contact-v107 .contact-main{
    height:100vh !important;
    min-height:100vh !important;
    max-height:none !important;
  }

  html body .section.contact.contact-v107 .contact-footer-band{
    z-index:4 !important;
  }
}

@supports (height:100dvh){
  @media (min-width:901px) and (pointer:coarse),
         (min-width:901px) and (any-pointer:coarse),
         (min-width:901px) and (hover:none){
    html body .section.contact.contact-v107 .contact-main{
      height:100dvh !important;
      min-height:100dvh !important;
    }
  }
}


/* v1.479 — Android Chrome Smartphone: mobile Abstände unabhängig von svh und JS-State.
   Ursache: Mehrere Smartphone-Abstände aus v1.474 nutzten svh direkt oder in
   Custom Properties. Auf einzelnen Android-Chrome-Konfigurationen fällt diese
   Einheit in berechneten Abständen aus bzw. wird zu instabil aufgelöst; dadurch
   greifen ältere Mobile-Fallbacks mit margin/padding:0. DuckDuck/WebView stellt
   svh dort korrekt dar. Dieser Block setzt zuerst stabile vh/px-Fallbacks und
   nutzt svh nur innerhalb eines @supports-Blocks. Zusätzlich werden die
   wichtigsten mobilen Flow-Abstände bis 900.98px nicht mehr ausschließlich an
   .is-mobile-static-stable gekoppelt. Desktop, Tablet-Desktop und die
   Scroll-/Pinning-Choreografie ab 901px bleiben unberührt. */
@media (max-width:900.98px){
  html body{
    --hc-mobile-edge-gutter:clamp(24px, 6.4vw, 36px);
    --hc-mobile-slide-gap:clamp(62px, 9.5vh, 92px);
    --hc-mobile-section-gap:clamp(58px, 9vh, 92px);
    --hc-mobile-peter-top-gap:clamp(74px, 10.5vh, 104px);
    --hc-mobile-about-coverage-gap:clamp(76px, 11vh, 112px);
    --hc-mobile-coverage-stack-gap:clamp(42px, 6vh, 64px);
    --hc-mobile-coverage-bottom-gap:clamp(100px, 13vh, 144px);
    --hc-mobile-card-gap:clamp(28px, 5vh, 44px);
  }

  @supports (height:100svh){
    html body{
      --hc-mobile-slide-gap:clamp(62px, 9.5svh, 92px);
      --hc-mobile-section-gap:clamp(58px, 9svh, 92px);
      --hc-mobile-peter-top-gap:clamp(74px, 10.5svh, 104px);
      --hc-mobile-about-coverage-gap:clamp(76px, 11svh, 112px);
      --hc-mobile-coverage-stack-gap:clamp(42px, 6svh, 64px);
      --hc-mobile-coverage-bottom-gap:clamp(100px, 13svh, 144px);
      --hc-mobile-card-gap:clamp(28px, 5svh, 44px);
    }
  }

  html body #leitidee .story-slides{
    gap:0 !important;
  }

  html body #leitidee .story-slide,
  html body #leitidee .story-slide.is-active,
  html body #leitidee .story-slide.is-reset,
  html body #leitidee .story-slide.is-animating{
    position:relative !important;
    height:auto !important;
    min-height:0 !important;
    margin:0 auto !important;
  }

  html body #leitidee .story-slide:not(:last-child){
    margin-bottom:var(--hc-mobile-slide-gap) !important;
  }

  html body #leistungen.section.services .leistungen-stage,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-stage,
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-stage{
    display:block !important;
    width:100% !important;
    min-height:0 !important;
    height:auto !important;
    margin-left:0 !important;
    padding-left:var(--hc-mobile-edge-gutter) !important;
    padding-right:var(--hc-mobile-edge-gutter) !important;
    box-sizing:border-box !important;
    overflow:visible !important;
  }

  html body #leistungen.section.services .leistungen-slide,
  html body #leistungen.section.services .leistungen-slide.is-active,
  html body #leistungen.section.services .leistungen-slide[aria-hidden="true"],
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-slide,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-slide.is-active,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-slide[aria-hidden="true"],
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-slide,
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-slide.is-active,
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-slide[aria-hidden="true"]{
    position:relative !important;
    inset:auto !important;
    display:block !important;
    width:100% !important;
    min-height:0 !important;
    height:auto !important;
    margin:0 auto !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    pointer-events:auto !important;
    box-sizing:border-box !important;
  }

  html body #leistungen.section.services .leistungen-slide:not(:last-child),
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-slide:not(:last-child),
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-slide:not(:last-child){
    margin-bottom:var(--hc-mobile-slide-gap) !important;
  }

  html body #leistungen.section.services .leistungen-slide-inner,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-slide-inner,
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-slide-inner{
    position:relative !important;
    top:auto !important;
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    height:auto !important;
    min-height:0 !important;
    margin:0 auto !important;
    transform:none !important;
    box-sizing:border-box !important;
  }

  html body #leistungen.section.services .leistungen-slide-head,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-slide-head,
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-slide-head{
    margin-top:0 !important;
  }

  html body #leistungen.section.services .leistungen-slide-copy,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-slide-copy,
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-slide-copy{
    margin-top:clamp(18px, 4.8vw, 30px) !important;
  }

  html body #leistungen.section.services .leistungen-outro,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro,
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro{
    position:relative !important;
    inset:auto !important;
    display:block !important;
    height:auto !important;
    min-height:0 !important;
    margin:var(--hc-mobile-section-gap) 0 0 !important;
    padding:0 !important;
    overflow:visible !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    pointer-events:auto !important;
  }

  html body #leistungen.section.services .leistungen-outro-layout,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-layout,
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-layout{
    position:relative !important;
    inset:auto !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:0 !important;
    height:auto !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    overflow:visible !important;
    transform:none !important;
  }

  html body #leistungen.section.services .leistungen-outro-visual,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-visual,
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-visual{
    padding-top:var(--hc-mobile-peter-top-gap) !important;
    padding-left:var(--hc-mobile-edge-gutter) !important;
    padding-right:var(--hc-mobile-edge-gutter) !important;
    box-sizing:border-box !important;
  }

  html body #leistungen.section.services .leistungen-outro-side,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-side,
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-side{
    position:relative !important;
    inset:auto !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    width:100% !important;
    max-width:none !important;
    min-height:0 !important;
    margin:0 auto !important;
    padding-left:var(--hc-mobile-edge-gutter) !important;
    padding-right:var(--hc-mobile-edge-gutter) !important;
    padding-bottom:var(--hc-mobile-about-coverage-gap) !important;
    gap:var(--hc-mobile-card-gap) !important;
    box-sizing:border-box !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
  }

  html body #leistungen.section.services .leistungen-outro-side .about-references-seal,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-side .about-references-seal,
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-side .about-references-seal{
    position:relative !important;
    inset:auto !important;
    margin:0 auto !important;
    transform:none !important;
  }

  html body #leistungen.section.services .leistungen-outro-coverage-left,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-coverage-left,
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-coverage-left{
    padding-top:var(--hc-mobile-about-coverage-gap) !important;
    padding-left:var(--hc-mobile-edge-gutter) !important;
    padding-right:var(--hc-mobile-edge-gutter) !important;
    box-sizing:border-box !important;
  }

  html body #leistungen.section.services .leistungen-outro-coverage-signature,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-coverage-signature,
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-coverage-signature{
    margin-bottom:clamp(34px, 5vh, 52px) !important;
  }

  @supports (height:100svh){
    html body #leistungen.section.services .leistungen-outro-coverage-signature,
    html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-coverage-signature,
    html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-coverage-signature{
      margin-bottom:clamp(34px, 5svh, 52px) !important;
    }
  }

  html body #leistungen.section.services .leistungen-outro-coverage-right,
  html body #leistungen.section.services .leistungen-shell.is-mobile-static-stable .leistungen-outro-coverage-right,
  html body #leistungen.section.services.is-mobile-static-stable .leistungen-outro-coverage-right{
    padding-top:var(--hc-mobile-coverage-stack-gap) !important;
    padding-left:var(--hc-mobile-edge-gutter) !important;
    padding-right:var(--hc-mobile-edge-gutter) !important;
    padding-bottom:var(--hc-mobile-coverage-bottom-gap) !important;
    gap:var(--hc-mobile-card-gap) !important;
    box-sizing:border-box !important;
  }
}

/* v1.481 — Mobile Topbar/Menu-Kontrast nach statischem Smartphone-Flow.
   Nach der Mobil-Stabilisierung ist #leistungen auf Smartphones keine virtuelle
   Desktop-Timeline mehr, sondern eine echte vertikale Abfolge. Dieser Block
   härtet die optischen Zustände für Chrome/Android ab: dunkle Service-Slides
   bekommen helle Topbar/Menu-Controls; der helle Über-mich/Coverage-Flow bekommt
   das dunkle Logo. Außerdem nutzt das mobile Menüpanel wieder die transparente
   Desktop-Anmutung statt des alten dunklen Smartphone-Tints. */
@media (max-width:900.98px){
  html body .menu-panel{
    background:rgba(213,232,240,.001) !important;
    border-left:0 !important;
    -webkit-backdrop-filter:blur(14px) !important;
    backdrop-filter:blur(14px) !important;
  }

  html body .menu-panel::before{
    background:none !important;
    opacity:0 !important;
  }

  html body .menu-panel::after{
    opacity:.12 !important;
    mix-blend-mode:overlay !important;
  }

  html body .topbar.is-dark:not(.is-about):not(.is-outro-coverage):not(.logo-on-dark){
    color:#ffffff !important;
  }

  html body .topbar.is-dark:not(.is-about):not(.is-outro-coverage):not(.logo-on-dark) .menu-btn,
  html body .topbar.is-dark:not(.is-about):not(.is-outro-coverage):not(.logo-on-dark) .lang a{
    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;
  }

  html body .topbar.is-dark:not(.is-about):not(.is-outro-coverage):not(.logo-on-dark) .logo-img.is-light{
    display:block !important;
  }

  html body .topbar.is-dark:not(.is-about):not(.is-outro-coverage):not(.logo-on-dark) .logo-img.is-dark,
  html body .topbar.is-dark:not(.is-about):not(.is-outro-coverage):not(.logo-on-dark) .logo-img.is-about{
    display:none !important;
  }

  html body .topbar:not(.is-dark):not(.is-about):not(.is-outro-coverage):not(.logo-on-dark){
    color:var(--logo-dark, #1f4187) !important;
  }

  html body .topbar:not(.is-dark):not(.is-about):not(.is-outro-coverage):not(.logo-on-dark) .menu-btn,
  html body .topbar:not(.is-dark):not(.is-about):not(.is-outro-coverage):not(.logo-on-dark) .lang a{
    color:var(--logo-dark, #1f4187) !important;
    -webkit-text-fill-color:var(--logo-dark, #1f4187) !important;
  }

  html body .topbar:not(.is-dark):not(.is-about):not(.is-outro-coverage):not(.logo-on-dark) .logo-img.is-light,
  html body .topbar:not(.is-dark):not(.is-about):not(.is-outro-coverage):not(.logo-on-dark) .logo-img.is-about{
    display:none !important;
  }

  html body .topbar:not(.is-dark):not(.is-about):not(.is-outro-coverage):not(.logo-on-dark) .logo-img.is-dark{
    display:block !important;
  }

  html body .topbar.is-dark ~ .menu.is-open .menu-links a,
  html body .topbar.is-dark ~ .menu.is-open .menu-links a.on-light,
  html body .topbar.is-dark ~ .menu.is-open .menu-links a.on-dark,
  html body .topbar.is-dark ~ .menu.is-open .menu-legal,
  html body .topbar.is-dark ~ .menu.is-open .menu-legal.on-light,
  html body .topbar.is-dark ~ .menu.is-open .menu-legal.on-dark{
    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;
    text-shadow:0 2px 18px rgba(0,0,0,.22) !important;
  }
}

/* v1.484 — Referenzen: responsive Reader statt klassischem Modal.
   Der alte Sessel-/Bild-Layer wird entfernt. Titel, Datum und Text liegen nun
   in einem gemeinsamen Scroll-Reader, damit Desktop und Smartphone dieselbe
   robuste Lesefläche verwenden. */
html.has-reference-modal-open,
body.has-reference-modal-open{
  height:100%;
  overflow:hidden !important;
  overscroll-behavior:none;
}

html body.references-page .references-modal{
  z-index:120 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:clamp(14px, 2.8vw, 36px) !important;
  background:transparent !important;
  transition:
    opacity 420ms cubic-bezier(.22,.61,.36,1),
    visibility 0s linear 420ms !important;
}

html body.references-page .references-modal.is-open{
  transition:
    opacity 440ms cubic-bezier(.22,.61,.36,1),
    visibility 0s linear 0s !important;
}

html body.references-page .references-modal-backdrop{
  background:rgba(242,242,242,.72) !important;
  -webkit-backdrop-filter:blur(7px) brightness(1.02) !important;
  backdrop-filter:blur(7px) brightness(1.02) !important;
}

html body.references-page .references-modal-panel{
  width:min(1160px, calc(100vw - clamp(28px, 5.4vw, 76px))) !important;
  height:min(920px, calc(100vh - clamp(28px, 5.4vw, 76px))) !important;
  min-height:0 !important;
  max-height:calc(100vh - clamp(28px, 5.4vw, 76px)) !important;
  border-radius:clamp(18px, 1.65vw, 28px) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,1) 0%, rgba(255,255,255,.98) 38%, rgba(248,249,250,.98) 100%) !important;
  color:#111111 !important;
  overflow:hidden !important;
  box-shadow:0 24px 78px rgba(13,38,72,.13) !important;
  transform:translate3d(0, 14px, 0) scale(.988) !important;
  transition:transform 440ms cubic-bezier(.22,.61,.36,1) !important;
}

@supports (height:100dvh){
  html body.references-page .references-modal-panel{
    height:min(920px, calc(100dvh - clamp(28px, 5.4vw, 76px))) !important;
    max-height:calc(100dvh - clamp(28px, 5.4vw, 76px)) !important;
  }
}

html body.references-page .references-modal.is-open .references-modal-panel{
  transform:translate3d(0, 0, 0) scale(1) !important;
}

html body.references-page .references-modal-bg,
html body.references-page .references-modal-bg::after,
html body.references-page .references-modal-layout,
html body.references-page .references-modal-cta{
  display:none !important;
  background-image:none !important;
}

html body.references-page .references-modal-content{
  position:relative !important;
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  min-height:0 !important;
  margin:0 !important;
  padding:
    clamp(102px, 11.4vh, 132px)
    clamp(112px, 10.5vw, 178px)
    clamp(82px, 9vh, 116px) !important;
  box-sizing:border-box !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  overscroll-behavior:contain !important;
  -webkit-overflow-scrolling:touch !important;
  scroll-behavior:smooth !important;
  scrollbar-width:thin !important;
  -ms-overflow-style:auto !important;
  scrollbar-color:rgba(31,65,135,.26) rgba(31,65,135,.065) !important;
}

html body.references-page .references-modal-content::-webkit-scrollbar{
  width:6px !important;
  height:6px !important;
  display:block !important;
}

html body.references-page .references-modal-content::-webkit-scrollbar-track{
  background:rgba(31,65,135,.055) !important;
  border-radius:999px !important;
}

html body.references-page .references-modal-content::-webkit-scrollbar-thumb{
  background:rgba(31,65,135,.22) !important;
  border-radius:999px !important;
}

html body.references-page .references-modal-content:focus,
html body.references-page .references-modal-panel:focus{
  outline:none !important;
}

html body.references-page .references-modal-content:focus-visible{
  outline:1.5px solid rgba(31,65,135,.24) !important;
  outline-offset:-14px !important;
}

html body.references-page .references-modal-heading{
  position:relative !important;
  left:auto !important;
  right:auto !important;
  top:auto !important;
  bottom:auto !important;
  display:block !important;
  width:min(760px, 100%) !important;
  max-width:min(760px, 100%) !important;
  height:auto !important;
  min-height:0 !important;
  margin:0 auto clamp(34px, 4.4vh, 52px) !important;
  color:#2b64a3 !important;
}

html body.references-page .references-modal-title{
  position:relative !important;
  left:auto !important;
  right:auto !important;
  top:auto !important;
  bottom:auto !important;
  display:block !important;
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  font-family:"InstrumentSerif-DE-RegularOnly", var(--font-display-serif), var(--font-serif) !important;
  font-style:normal !important;
  font-synthesis:none !important;
  font-size:clamp(46px, 4.9vw, 78px) !important;
  line-height:.94 !important;
  font-weight:400 !important;
  letter-spacing:-.014em !important;
  color:#2b64a3 !important;
  text-wrap:balance !important;
}

html body.references-page .references-modal-meta{
  position:relative !important;
  left:auto !important;
  right:auto !important;
  top:auto !important;
  bottom:auto !important;
  display:block !important;
  margin:clamp(18px, 2.6vh, 30px) 0 0 !important;
  font-family:var(--font-sans) !important;
  font-size:clamp(13px, 1vw, 17px) !important;
  line-height:1.25 !important;
  letter-spacing:.055em !important;
  font-weight:500 !important;
  color:rgba(17,17,17,.62) !important;
}

html body.references-page .references-modal-text{
  width:min(760px, 100%) !important;
  max-width:min(760px, 100%) !important;
  margin:0 auto !important;
  font-family:var(--font-sans) !important;
  font-size:clamp(15px, 1.05vw, 18px) !important;
  line-height:1.62 !important;
  letter-spacing:.072em !important;
  font-weight:500 !important;
  color:#111111 !important;
}

html body.references-page .references-modal-text p,
html body.references-page .references-modal-text ul{
  margin:0 0 clamp(22px, 3.2vh, 34px) !important;
}

html body.references-page .references-modal-text p:last-child,
html body.references-page .references-modal-text ul:last-child{
  margin-bottom:0 !important;
}

html body.references-page .references-modal-text ul{
  padding-left:1.15em !important;
}

html body.references-page .references-modal-text li{
  margin:.32em 0 !important;
}

html body.references-page .references-modal-close{
  z-index:8 !important;
  top:clamp(26px, 4.4vh, 54px) !important;
  right:clamp(28px, 4.8vw, 64px) !important;
  width:clamp(42px, 4.2vw, 58px) !important;
  height:clamp(42px, 4.2vw, 58px) !important;
  display:block !important;
  color:#1f5d9d !important;
  background:rgba(255,255,255,.34) !important;
  -webkit-backdrop-filter:blur(3px) !important;
  backdrop-filter:blur(3px) !important;
  border-radius:999px !important;
}

html body.references-page .references-modal-close span,
html body.references-page .references-modal-close span::before{
  width:clamp(34px, 3vw, 48px) !important;
  height:clamp(1.8px, .16vw, 2.5px) !important;
}

html body.references-page .references-modal-arrow{
  z-index:8 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  top:50% !important;
  bottom:auto !important;
  width:clamp(54px, 4.8vw, 72px) !important;
  height:clamp(54px, 4.8vw, 72px) !important;
  color:#2a64a4 !important;
  background:rgba(255,255,255,.28) !important;
  -webkit-backdrop-filter:blur(3px) !important;
  backdrop-filter:blur(3px) !important;
  border-radius:999px !important;
  transform:translateY(-50%) !important;
}

html body.references-page .references-modal-arrow:hover,
html body.references-page .references-modal-arrow:focus-visible{
  color:#143f77 !important;
  background:rgba(255,255,255,.44) !important;
  transform:translateY(-50%) scale(1.025) !important;
}

html body.references-page .references-modal-arrow--prev{
  left:clamp(20px, 3.3vw, 46px) !important;
}

html body.references-page .references-modal-arrow--next{
  right:clamp(20px, 3.3vw, 46px) !important;
}

html body.references-page .references-modal-arrow span{
  position:relative !important;
  left:auto !important;
  top:auto !important;
  width:clamp(28px, 2.9vw, 42px) !important;
  height:clamp(28px, 2.9vw, 42px) !important;
  border-width:0 0 clamp(2px, .19vw, 3px) clamp(2px, .19vw, 3px) !important;
}

@media (max-width:760px){
  html body.references-page .references-modal{
    padding:0 !important;
  }

  html body.references-page .references-modal-backdrop{
    background:rgba(242,242,242,.94) !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
  }

  html body.references-page .references-modal-panel{
    width:100vw !important;
    height:100vh !important;
    max-height:100vh !important;
    border-radius:0 !important;
    box-shadow:none !important;
  }

  @supports (height:100dvh){
    html body.references-page .references-modal-panel{
      height:100dvh !important;
      max-height:100dvh !important;
    }
  }

  html body.references-page .references-modal-content{
    padding:92px 26px 118px !important;
  }

  html body.references-page .references-modal-heading,
  html body.references-page .references-modal-text{
    width:100% !important;
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }

  html body.references-page .references-modal-title{
    font-size:clamp(40px, 12.8vw, 58px) !important;
    line-height:.94 !important;
  }

  html body.references-page .references-modal-meta{
    font-size:13px !important;
    letter-spacing:.045em !important;
    margin-top:16px !important;
  }

  html body.references-page .references-modal-text,
  html body.references-page .references-modal-text p,
  html body.references-page .references-modal-text ul,
  html body.references-page .references-modal-text li{
    font-size:15px !important;
    line-height:1.58 !important;
    letter-spacing:.052em !important;
    font-weight:500 !important;
  }

  html body.references-page .references-modal-close{
    top:18px !important;
    right:18px !important;
    width:48px !important;
    height:48px !important;
    background:rgba(255,255,255,.55) !important;
  }

  html body.references-page .references-modal-close span,
  html body.references-page .references-modal-close span::before{
    width:34px !important;
    height:2px !important;
  }

  html body.references-page .references-modal-arrow{
    top:auto !important;
    bottom:20px !important;
    width:52px !important;
    height:52px !important;
    background:rgba(255,255,255,.62) !important;
    box-shadow:0 10px 28px rgba(13,38,72,.08) !important;
    transform:none !important;
  }

  html body.references-page .references-modal-arrow:hover,
  html body.references-page .references-modal-arrow:focus-visible{
    transform:none !important;
  }

  html body.references-page .references-modal-arrow--prev{
    left:22px !important;
  }

  html body.references-page .references-modal-arrow--next{
    right:22px !important;
  }

  html body.references-page .references-modal-arrow span{
    width:28px !important;
    height:28px !important;
    border-width:0 0 2.2px 2.2px !important;
  }
}

@media (prefers-reduced-motion:reduce){
  html body.references-page .references-modal,
  html body.references-page .references-modal-panel,
  html body.references-page .references-modal-title,
  html body.references-page .references-modal-meta,
  html body.references-page .references-modal-text{
    transition:none !important;
  }
}

html body.references-page .references-modal-arrow--prev span{
  transform:rotate(45deg) !important;
  margin-left:clamp(4px, .4vw, 7px) !important;
}

html body.references-page .references-modal-arrow--next span{
  transform:rotate(225deg) !important;
  margin-right:clamp(4px, .4vw, 7px) !important;
}

@media (max-width:760px){
  html body.references-page .references-modal-arrow--prev span{
    margin-left:5px !important;
  }
  html body.references-page .references-modal-arrow--next span{
    margin-right:5px !important;
  }
}

/* v1.485 — Referenzen-Reader: robuste Smartphone-Lesbarkeit.
   Auf mobilen Browsern darf der Reader keine alten Modal-/Headline-FX-Werte
   erben. Android/WebKit/Chromium übernehmen -webkit-text-fill-color teilweise
   stärker als color; deshalb werden alle Reader-Texte im Mobile-Layout explizit
   sichtbar gesetzt. Außerdem ist der Reader dort eine echte Vollbild-Lesefläche
   mit einem einzigen nativen Scrollcontainer. */
@media (max-width:760px){
  html.has-reference-modal-open,
  body.has-reference-modal-open{
    height:100% !important;
    overflow:hidden !important;
  }

  html body.references-page .references-modal.is-open{
    position:fixed !important;
    inset:0 !important;
    display:block !important;
    padding:0 !important;
    background:#f7f8f9 !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }

  html body.references-page .references-modal.is-open .references-modal-backdrop{
    display:block !important;
    position:absolute !important;
    inset:0 !important;
    background:#f7f8f9 !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
  }

  html body.references-page .references-modal.is-open .references-modal-panel{
    position:fixed !important;
    inset:0 !important;
    display:block !important;
    width:100vw !important;
    max-width:none !important;
    height:100vh !important;
    max-height:none !important;
    min-height:0 !important;
    margin:0 !important;
    border-radius:0 !important;
    background:#f8f9fa !important;
    color:#111111 !important;
    -webkit-text-fill-color:#111111 !important;
    overflow:hidden !important;
    box-shadow:none !important;
    transform:none !important;
    filter:none !important;
    mix-blend-mode:normal !important;
  }

  @supports (height:100dvh){
    html body.references-page .references-modal.is-open .references-modal-panel{
      height:100dvh !important;
    }
  }

  html body.references-page .references-modal.is-open .references-modal-content,
  html body.references-page .references-modal.is-open .references-reader-scroll{
    position:absolute !important;
    z-index:2 !important;
    inset:0 !important;
    display:block !important;
    width:auto !important;
    max-width:none !important;
    height:auto !important;
    max-height:none !important;
    min-height:0 !important;
    margin:0 !important;
    padding:
      calc(env(safe-area-inset-top, 0px) + 92px)
      calc(env(safe-area-inset-right, 0px) + 26px)
      calc(env(safe-area-inset-bottom, 0px) + 122px)
      calc(env(safe-area-inset-left, 0px) + 26px) !important;
    box-sizing:border-box !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior:contain !important;
    background:transparent !important;
    color:#111111 !important;
    -webkit-text-fill-color:#111111 !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    filter:none !important;
    mix-blend-mode:normal !important;
    text-shadow:none !important;
    contain:none !important;
  }

  html body.references-page .references-modal.is-open .references-modal-heading,
  html body.references-page .references-modal.is-open .references-reader-heading{
    position:relative !important;
    z-index:3 !important;
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    min-height:0 !important;
    margin:0 0 34px !important;
    padding:0 !important;
    color:#2b64a3 !important;
    -webkit-text-fill-color:#2b64a3 !important;
    background:none !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    filter:none !important;
    mix-blend-mode:normal !important;
    text-shadow:none !important;
  }

  html body.references-page .references-modal.is-open .references-modal-title,
  html body.references-page .references-modal.is-open .references-reader-title{
    position:relative !important;
    z-index:3 !important;
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    margin:0 !important;
    padding:0 !important;
    font-family:"InstrumentSerif-DE-RegularOnly", var(--font-display-serif), var(--font-serif) !important;
    font-size:clamp(38px, 12.2vw, 56px) !important;
    line-height:.96 !important;
    letter-spacing:-.012em !important;
    font-weight:400 !important;
    color:#2b64a3 !important;
    -webkit-text-fill-color:#2b64a3 !important;
    background:none !important;
    -webkit-background-clip:border-box !important;
    background-clip:border-box !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    filter:none !important;
    mix-blend-mode:normal !important;
    text-shadow:none !important;
  }

  html body.references-page .references-modal.is-open .references-modal-meta,
  html body.references-page .references-modal.is-open .references-reader-meta{
    position:relative !important;
    z-index:3 !important;
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    margin:17px 0 0 !important;
    padding:0 !important;
    font-family:var(--font-sans) !important;
    font-size:13px !important;
    line-height:1.28 !important;
    letter-spacing:.045em !important;
    font-weight:500 !important;
    color:rgba(36,42,48,.70) !important;
    -webkit-text-fill-color:rgba(36,42,48,.70) !important;
    background:none !important;
    -webkit-background-clip:border-box !important;
    background-clip:border-box !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    filter:none !important;
    mix-blend-mode:normal !important;
    text-shadow:none !important;
  }

  html body.references-page .references-modal.is-open .references-modal-text,
  html body.references-page .references-modal.is-open .references-reader-text{
    position:relative !important;
    z-index:3 !important;
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    margin:0 !important;
    padding:0 !important;
    font-family:var(--font-sans) !important;
    font-size:15.5px !important;
    line-height:1.62 !important;
    letter-spacing:.045em !important;
    font-weight:500 !important;
    color:#15171a !important;
    -webkit-text-fill-color:#15171a !important;
    background:none !important;
    -webkit-background-clip:border-box !important;
    background-clip:border-box !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    filter:none !important;
    mix-blend-mode:normal !important;
    text-shadow:none !important;
  }

  html body.references-page .references-modal.is-open .references-modal-text p,
  html body.references-page .references-modal.is-open .references-modal-text ul,
  html body.references-page .references-modal.is-open .references-modal-text li,
  html body.references-page .references-modal.is-open .references-reader-text p,
  html body.references-page .references-modal.is-open .references-reader-text ul,
  html body.references-page .references-modal.is-open .references-reader-text li{
    font-family:var(--font-sans) !important;
    font-size:inherit !important;
    line-height:inherit !important;
    letter-spacing:inherit !important;
    font-weight:inherit !important;
    color:#15171a !important;
    -webkit-text-fill-color:#15171a !important;
    background:none !important;
    -webkit-background-clip:border-box !important;
    background-clip:border-box !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    filter:none !important;
    mix-blend-mode:normal !important;
    text-shadow:none !important;
  }

  html body.references-page .references-modal.is-open .references-modal-text p,
  html body.references-page .references-modal.is-open .references-modal-text ul,
  html body.references-page .references-modal.is-open .references-reader-text p,
  html body.references-page .references-modal.is-open .references-reader-text ul{
    margin:0 0 25px !important;
  }

  html body.references-page .references-modal.is-open .references-modal-text p:last-child,
  html body.references-page .references-modal.is-open .references-modal-text ul:last-child,
  html body.references-page .references-modal.is-open .references-reader-text p:last-child,
  html body.references-page .references-modal.is-open .references-reader-text ul:last-child{
    margin-bottom:0 !important;
  }

  html body.references-page .references-modal.is-open .references-modal-text ul,
  html body.references-page .references-modal.is-open .references-reader-text ul{
    display:block !important;
    list-style:disc outside !important;
    padding-left:1.18em !important;
  }

  html body.references-page .references-modal.is-open .references-modal-text li,
  html body.references-page .references-modal.is-open .references-reader-text li{
    display:list-item !important;
    margin:.36em 0 !important;
  }

  html body.references-page .references-modal.is-open.is-reference-switching .references-modal-title,
  html body.references-page .references-modal.is-open.is-reference-switching .references-modal-meta,
  html body.references-page .references-modal.is-open.is-reference-switching .references-modal-text,
  html body.references-page .references-modal.is-open.is-reference-switching .references-reader-title,
  html body.references-page .references-modal.is-open.is-reference-switching .references-reader-meta,
  html body.references-page .references-modal.is-open.is-reference-switching .references-reader-text{
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
  }

  html body.references-page .references-modal.is-open .references-modal-close{
    z-index:12 !important;
    top:calc(env(safe-area-inset-top, 0px) + 18px) !important;
    right:calc(env(safe-area-inset-right, 0px) + 18px) !important;
  }

  html body.references-page .references-modal.is-open .references-modal-arrow{
    z-index:12 !important;
    display:flex !important;
    bottom:calc(env(safe-area-inset-bottom, 0px) + 20px) !important;
  }
}

/* v1.487 — Referenzen: eigener Smartphone-Reader ohne alte Modal-Klassen.
   Die Desktop-Lösung bleibt unverändert. Mobil wird das alte Modal vollständig
   umgangen, damit keine Legacy-Positionierung, Clip-/Opacity-Regel oder
   Headline-FX-Vererbung den eigentlichen Referenztext ausblenden kann. */
.references-mobile-reader{
  display:none;
}

@media (max-width:900.98px){
  html.has-reference-mobile-reader-open,
  body.has-reference-mobile-reader-open{
    height:100% !important;
    overflow:hidden !important;
    overscroll-behavior:none !important;
  }

  html body.references-page .references-modal.is-open{
    display:none !important;
  }

  html body.references-page .references-mobile-reader{
    position:fixed !important;
    inset:0 !important;
    z-index:220 !important;
    display:block !important;
    width:100vw !important;
    height:100vh !important;
    min-height:0 !important;
    padding:0 !important;
    margin:0 !important;
    background:#f8f9fa !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    overflow:hidden !important;
    transform:none !important;
    filter:none !important;
    mix-blend-mode:normal !important;
    isolation:isolate !important;
    transition:opacity 220ms cubic-bezier(.22,.61,.36,1), visibility 0s linear 220ms !important;
  }

  @supports (height:100dvh){
    html body.references-page .references-mobile-reader{
      height:100dvh !important;
    }
  }

  html body.references-page .references-mobile-reader.is-open{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transition:opacity 240ms cubic-bezier(.22,.61,.36,1), visibility 0s linear 0s !important;
  }

  html body.references-page .references-mobile-reader__panel{
    position:absolute !important;
    inset:0 !important;
    z-index:1 !important;
    display:block !important;
    width:auto !important;
    height:auto !important;
    min-width:0 !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:#f8f9fa !important;
    color:#111111 !important;
    -webkit-text-fill-color:#111111 !important;
    overflow:hidden !important;
    transform:none !important;
    filter:none !important;
    mix-blend-mode:normal !important;
    box-shadow:none !important;
  }

  html body.references-page .references-mobile-reader__scroll{
    position:absolute !important;
    inset:0 !important;
    z-index:2 !important;
    display:block !important;
    width:auto !important;
    height:auto !important;
    min-width:0 !important;
    min-height:0 !important;
    margin:0 !important;
    padding:
      calc(env(safe-area-inset-top, 0px) + 92px)
      calc(env(safe-area-inset-right, 0px) + 26px)
      calc(env(safe-area-inset-bottom, 0px) + 126px)
      calc(env(safe-area-inset-left, 0px) + 26px) !important;
    box-sizing:border-box !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior:contain !important;
    background:#f8f9fa !important;
    color:#15171a !important;
    -webkit-text-fill-color:#15171a !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    filter:none !important;
    mix-blend-mode:normal !important;
    text-shadow:none !important;
    contain:none !important;
    -webkit-text-size-adjust:100% !important;
  }

  html body.references-page .references-mobile-reader__heading{
    position:relative !important;
    z-index:3 !important;
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    min-height:0 !important;
    margin:0 0 34px !important;
    padding:0 !important;
    background:none !important;
    color:#2b64a3 !important;
    -webkit-text-fill-color:#2b64a3 !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    filter:none !important;
    mix-blend-mode:normal !important;
    text-shadow:none !important;
  }

  html body.references-page .references-mobile-reader__title{
    position:relative !important;
    z-index:3 !important;
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    margin:0 !important;
    padding:0 !important;
    font-family:"InstrumentSerif-DE-RegularOnly", var(--font-display-serif), var(--font-serif) !important;
    font-size:clamp(38px, 12.2vw, 56px) !important;
    line-height:.96 !important;
    letter-spacing:-.012em !important;
    font-style:normal !important;
    font-weight:400 !important;
    color:#2b64a3 !important;
    -webkit-text-fill-color:#2b64a3 !important;
    background:none !important;
    -webkit-background-clip:border-box !important;
    background-clip:border-box !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    filter:none !important;
    mix-blend-mode:normal !important;
    text-shadow:none !important;
    text-wrap:balance !important;
  }

  html body.references-page .references-mobile-reader__meta{
    position:relative !important;
    z-index:3 !important;
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    margin:17px 0 0 !important;
    padding:0 !important;
    font-family:var(--font-sans) !important;
    font-size:13px !important;
    line-height:1.28 !important;
    letter-spacing:.045em !important;
    font-weight:500 !important;
    color:rgba(36,42,48,.70) !important;
    -webkit-text-fill-color:rgba(36,42,48,.70) !important;
    background:none !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    filter:none !important;
    mix-blend-mode:normal !important;
    text-shadow:none !important;
  }

  html body.references-page .references-mobile-reader__text,
  html body.references-page .references-mobile-reader__text p,
  html body.references-page .references-mobile-reader__text ul,
  html body.references-page .references-mobile-reader__text li{
    position:relative !important;
    z-index:3 !important;
    display:block !important;
    width:auto !important;
    max-width:100% !important;
    height:auto !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    font-family:var(--font-sans) !important;
    font-size:15.5px !important;
    line-height:1.62 !important;
    letter-spacing:.045em !important;
    font-weight:500 !important;
    color:#15171a !important;
    -webkit-text-fill-color:#15171a !important;
    background:none !important;
    -webkit-background-clip:border-box !important;
    background-clip:border-box !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    filter:none !important;
    mix-blend-mode:normal !important;
    text-shadow:none !important;
    contain:none !important;
  }

  html body.references-page .references-mobile-reader__text p,
  html body.references-page .references-mobile-reader__text ul{
    margin:0 0 25px !important;
  }

  html body.references-page .references-mobile-reader__text p:last-child,
  html body.references-page .references-mobile-reader__text ul:last-child{
    margin-bottom:0 !important;
  }

  html body.references-page .references-mobile-reader__text ul{
    list-style:disc outside !important;
    padding-left:1.18em !important;
  }

  html body.references-page .references-mobile-reader__text li{
    display:list-item !important;
    margin:.36em 0 !important;
  }

  html body.references-page .references-mobile-reader__close{
    position:absolute !important;
    z-index:12 !important;
    top:calc(env(safe-area-inset-top, 0px) + 18px) !important;
    right:calc(env(safe-area-inset-right, 0px) + 18px) !important;
    width:48px !important;
    height:48px !important;
    border:0 !important;
    border-radius:999px !important;
    background:rgba(255,255,255,.62) !important;
    color:#1f5d9d !important;
    -webkit-text-fill-color:#1f5d9d !important;
    box-shadow:0 10px 28px rgba(13,38,72,.08) !important;
    cursor:pointer !important;
  }

  html body.references-page .references-mobile-reader__close span,
  html body.references-page .references-mobile-reader__close span::before{
    content:"" !important;
    position:absolute !important;
    left:50% !important;
    top:50% !important;
    width:34px !important;
    height:2px !important;
    border-radius:999px !important;
    background:currentColor !important;
    transform:translate(-50%, -50%) rotate(45deg) !important;
  }

  html body.references-page .references-mobile-reader__close span::before{
    transform:translate(-50%, -50%) rotate(-90deg) !important;
  }

  html body.references-page .references-mobile-reader__arrow{
    position:absolute !important;
    z-index:12 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    top:auto !important;
    bottom:calc(env(safe-area-inset-bottom, 0px) + 20px) !important;
    width:52px !important;
    height:52px !important;
    border:0 !important;
    border-radius:999px !important;
    background:rgba(255,255,255,.62) !important;
    color:#2a64a4 !important;
    -webkit-text-fill-color:#2a64a4 !important;
    box-shadow:0 10px 28px rgba(13,38,72,.08) !important;
    transform:none !important;
    cursor:pointer !important;
  }

  html body.references-page .references-mobile-reader__arrow--prev{
    left:calc(env(safe-area-inset-left, 0px) + 22px) !important;
  }

  html body.references-page .references-mobile-reader__arrow--next{
    right:calc(env(safe-area-inset-right, 0px) + 22px) !important;
  }

  html body.references-page .references-mobile-reader__arrow span{
    position:relative !important;
    display:block !important;
    width:28px !important;
    height:28px !important;
    border-style:solid !important;
    border-color:currentColor !important;
    border-width:0 0 2.2px 2.2px !important;
    transform-origin:center !important;
  }

  html body.references-page .references-mobile-reader__arrow--prev span{
    transform:rotate(45deg) !important;
    margin-left:5px !important;
  }

  html body.references-page .references-mobile-reader__arrow--next span{
    transform:rotate(225deg) !important;
    margin-right:5px !important;
  }
}

@media (min-width:901px){
  html body.references-page .references-mobile-reader{
    display:none !important;
  }
}

/* v1.491 — Tablet landscape: vertical Leistungen/Über-mich/Coverage flow.
   Active only through body.is-tablet-landscape-flow, set by app.js from
   touch/coarse-pointer + landscape + desktop layout (>=901px). Desktop mouse
   and smartphone/mobile keep their existing choreography. */
body.is-tablet-landscape-flow #leistungen.section.services,
body.is-tablet-landscape-flow #leistungen.section.services.theme-dark{
  min-height:0 !important;
  height:auto !important;
  overflow:visible !important;
  background:#04152e !important;
  --leistungen-bg-grayscale:.10;
  --leistungen-bg-ghost-color:rgba(178, 216, 255, .34);
  --leistungen-bg-ghost-opacity:.64;
}

body.is-tablet-landscape-flow #leistungen.section.services > .section-pin{
  position:relative !important;
  top:auto !important;
  display:block !important;
  min-height:0 !important;
  height:auto !important;
  padding:0 !important;
  overflow:visible !important;
  background:
    radial-gradient(780px 520px at 68% 42%, rgba(27, 76, 132, .24), transparent 68%),
    linear-gradient(180deg, #04152e 0%, #031226 100%) !important;
}

body.is-tablet-landscape-flow #leistungen.section.services .section-reactive-bg{
  opacity:.18 !important;
}

body.is-tablet-landscape-flow #leistungen.section.services > .section-pin > .leistungen-outro-marquee{
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
}

body.is-tablet-landscape-flow #leistungen.section.services .leistungen-bg-layer,
body.is-tablet-landscape-flow #leistungen.section.services .leistungen-bg-ghost-layer{
  position:sticky !important;
  top:0 !important;
  left:auto !important;
  right:auto !important;
  width:100% !important;
  height:100svh !important;
  min-height:100vh !important;
  margin:0 0 -100svh 0 !important;
  overflow:hidden !important;
  pointer-events:none !important;
  z-index:0 !important;
  mix-blend-mode:screen !important;
}

body.is-tablet-landscape-flow #leistungen.section.services .leistungen-bg-ghost-layer{
  z-index:1 !important;
}

body.is-tablet-landscape-flow #leistungen.section.services .leistungen-bg-image,
body.is-tablet-landscape-flow #leistungen.section.services .leistungen-bg-ghost{
  position:absolute !important;
  inset:auto !important;
  top:50% !important;
  left:50% !important;
  width:min(76vw, calc(72svh * 1672 / 941)) !important;
  height:auto !important;
  max-height:72svh !important;
  aspect-ratio:1672 / 941 !important;
  object-fit:contain !important;
  object-position:center center !important;
  transform:translate3d(calc(-50% + (var(--bg-phase, 0) * -30px)), -50%, 0) !important;
  transition:opacity 120ms linear, transform 180ms ease-out !important;
  will-change:opacity, transform !important;
}

body.is-tablet-landscape-flow #leistungen.section.services .leistungen-bg-ghost{
  background:var(--leistungen-bg-ghost-color) !important;
  -webkit-mask-size:contain !important;
  mask-size:contain !important;
  transform:translate3d(calc(-50% + (var(--bg-ghost-phase, 0) * -38px)), -50%, 0) !important;
}

body.is-tablet-landscape-flow #leistungen.section.services .leistungen-bg-image:nth-child(n){
  --leistungen-bg-opacity:.42;
}

body.is-tablet-landscape-flow #leistungen.section.services > .section-pin > .container.leistungen-scroller,
body.is-tablet-landscape-flow #leistungen.section.services .leistungen-scroller{
  position:relative !important;
  z-index:3 !important;
  display:block !important;
  width:100% !important;
  max-width:none !important;
  min-height:0 !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  overflow:visible !important;
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
}

body.is-tablet-landscape-flow #leistungen.section.services .leistungen-shell{
  display:block !important;
  min-height:0 !important;
  height:auto !important;
  padding:clamp(76px, 12svh, 116px) 0 0 !important;
  overflow:visible !important;
  --leistungen-edge-gutter:clamp(42px, 6.4vw, 86px);
  --leistungen-stage-opacity:1 !important;
  --leistungen-symbol-row-opacity:1 !important;
  --leistungen-panel-progress:1 !important;
  --leistungen-person-progress:1 !important;
  --leistungen-copy-progress:1 !important;
  --leistungen-social-progress:1 !important;
  --leistungen-signature-opacity:1 !important;
  --leistungen-signature-progress:1 !important;
  --leistungen-whiteout-progress:0 !important;
  --about-bg-t:1 !important;
  --about-light-t:1 !important;
  --about-content-t:1 !important;
  --about-final-text-t:1 !important;
  --about-coverage-t:1 !important;
  --about-coverage-bg-t:1 !important;
  --about-photo-ghost-t:0 !important;
  --coverage-photo-ghost-t:0 !important;
  --about-copy-wing-t:1 !important;
  --about-side-wing-t:1 !important;
  --about-coverage-shift-t:1 !important;
  --about-coverage-left-t:1 !important;
  --about-coverage-right-t:1 !important;
  --coverage-right-scale:1 !important;
  --coverage-right-blur:0px !important;
  --about-side-content-opacity:1 !important;
  --about-light-wing-x:0vw !important;
  --about-light-wing-right-edge:100vw !important;
  --about-dark-wing-x:0vw !important;
  --about-person-scale:1 !important;
  --about-person-blur:0px !important;
  --about-final-y-t:0 !important;
}

body.is-tablet-landscape-flow #leistungen.section.services .leistungen-topline{
  position:relative !important;
  z-index:5 !important;
  display:flex !important;
  opacity:1 !important;
  visibility:visible !important;
  filter:none !important;
  transform:none !important;
  padding:0 var(--leistungen-edge-gutter) !important;
  margin:0 0 clamp(26px, 4svh, 42px) !important;
}

body.is-tablet-landscape-flow #leistungen.section.services .leistungen-stage{
  position:relative !important;
  z-index:4 !important;
  display:block !important;
  width:100% !important;
  min-height:0 !important;
  height:auto !important;
  margin:0 !important;
  overflow:visible !important;
  opacity:1 !important;
  filter:none !important;
  transform:none !important;
}

body.is-tablet-landscape-flow #leistungen.section.services .leistungen-slide,
body.is-tablet-landscape-flow #leistungen.section.services .leistungen-slide[aria-hidden="true"],
body.is-tablet-landscape-flow #leistungen.section.services .leistungen-slide.is-active{
  position:relative !important;
  inset:auto !important;
  display:flex !important;
  align-items:center !important;
  min-height:clamp(610px, 100svh, 920px) !important;
  height:auto !important;
  padding:clamp(54px, 8svh, 92px) calc(var(--leistungen-edge-gutter) + clamp(74px, 9vw, 128px)) clamp(64px, 10svh, 112px) var(--leistungen-edge-gutter) !important;
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
  pointer-events:auto !important;
  box-sizing:border-box !important;
}

body.is-tablet-landscape-flow #leistungen.section.services .leistungen-slide-inner{
  position:relative !important;
  top:auto !important;
  display:grid !important;
  grid-template-columns:minmax(0, 1.02fr) minmax(260px, .76fr) !important;
  align-items:center !important;
  gap:clamp(42px, 6.8vw, 92px) !important;
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  height:auto !important;
  margin:0 !important;
  transform:none !important;
}

body.is-tablet-landscape-flow #leistungen.section.services .leistungen-slide-head,
body.is-tablet-landscape-flow #leistungen.section.services .leistungen-slide-copy,
body.is-tablet-landscape-flow #leistungen.section.services .leistungen-headline,
body.is-tablet-landscape-flow #leistungen.section.services .leistungen-text,
body.is-tablet-landscape-flow #leistungen.section.services .leistungen-text[aria-hidden="true"]{
  position:relative !important;
  top:auto !important;
  left:auto !important;
  display:block !important;
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
  pointer-events:auto !important;
}

body.is-tablet-landscape-flow #leistungen.section.services .leistungen-slide-head,
body.is-tablet-landscape-flow #leistungen.section.services .leistungen-slide-copy{
  margin-top:0 !important;
}

body.is-tablet-landscape-flow #leistungen.section.services .leistungen-headline{
  width:min(44vw, 570px) !important;
  max-width:570px !important;
  font-size:clamp(43px, 5.4vw, 70px) !important;
  line-height:.92 !important;
}

body.is-tablet-landscape-flow #leistungen.section.services .leistungen-text{
  width:min(32vw, 390px) !important;
  max-width:390px !important;
  margin-left:0 !important;
}

body.is-tablet-landscape-flow #leistungen.section.services .leistungen-text p{
  font-size:clamp(13.6px, 1.35vw, 16px) !important;
  line-height:1.46 !important;
  letter-spacing:.028em !important;
  color:rgba(255,255,255,.80) !important;
}

body.is-tablet-landscape-flow #leistungen.section.services .leistungen-symbol-row{
  position:fixed !important;
  top:50% !important;
  right:clamp(22px, 3.2vw, 54px) !important;
  bottom:auto !important;
  left:auto !important;
  z-index:8 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:clamp(7px, 1.15svh, 13px) !important;
  width:auto !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  transform:translate3d(0, -50%, 0) !important;
  transition:opacity 260ms ease, visibility 260ms ease !important;
}

body.is-tablet-landscape-flow #leistungen.section.services.is-tablet-landscape-flow-icons-visible .leistungen-symbol-row{
  opacity:.94 !important;
  visibility:visible !important;
  pointer-events:auto !important;
}

body.is-tablet-landscape-flow #leistungen.section.services .leistungen-symbol{
  width:clamp(42px, 4.6vw, 62px) !important;
  height:clamp(42px, 4.6vw, 62px) !important;
  color:rgba(231,239,249,.34) !important;
  opacity:.62 !important;
}

body.is-tablet-landscape-flow #leistungen.section.services .leistungen-symbol.is-passed,
body.is-tablet-landscape-flow #leistungen.section.services .leistungen-symbol.is-active{
  color:rgba(244,248,255,.96) !important;
  opacity:1 !important;
}

body.is-tablet-landscape-flow #leistungen.section.services .leistungen-symbol.is-active{
  transform:scale(1.055) !important;
  filter:drop-shadow(0 0 16px rgba(255,255,255,.16)) !important;
}

body.is-tablet-landscape-flow #leistungen.section.services .leistungen-outro{
  position:relative !important;
  inset:auto !important;
  z-index:5 !important;
  display:block !important;
  width:100% !important;
  min-height:0 !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  overflow:visible !important;
  transform:none !important;
  background:
    radial-gradient(76% 68% at 40% 34%, rgba(255,255,255,.90) 0%, rgba(255,255,255,.62) 42%, rgba(239,245,249,.32) 100%),
    linear-gradient(114deg, rgba(250,248,245,.96) 0%, rgba(245,244,241,.88) 48%, rgba(236,235,231,.62) 100%) !important;
}

body.is-tablet-landscape-flow #leistungen.section.services .leistungen-outro::before{
  opacity:1 !important;
}

body.is-tablet-landscape-flow #leistungen.section.services .leistungen-outro-layout{
  position:relative !important;
  inset:auto !important;
  display:grid !important;
  grid-template-columns:minmax(150px, 23%) minmax(320px, 43%) minmax(220px, 28%) !important;
  align-items:center !important;
  gap:clamp(28px, 4.5vw, 62px) !important;
  width:100% !important;
  min-height:100svh !important;
  height:auto !important;
  margin:0 !important;
  padding:clamp(72px, 10svh, 116px) clamp(46px, 6.4vw, 96px) !important;
  box-sizing:border-box !important;
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
  pointer-events:auto !important;
  overflow:hidden !important;
}

body.is-tablet-landscape-flow #leistungen.section.services .leistungen-outro-visual,
body.is-tablet-landscape-flow #leistungen.section.services .leistungen-outro-copy,
body.is-tablet-landscape-flow #leistungen.section.services .leistungen-outro-side,
body.is-tablet-landscape-flow #leistungen.section.services .leistungen-outro-copy-inner{
  position:relative !important;
  inset:auto !important;
  left:auto !important;
  right:auto !important;
  top:auto !important;
  bottom:auto !important;
  width:100% !important;
  max-width:none !important;
  min-height:0 !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
  filter:none !important;
  pointer-events:auto !important;
}

body.is-tablet-landscape-flow #leistungen.section.services .leistungen-outro-visual{
  align-self:end !important;
  display:flex !important;
  justify-content:center !important;
  align-items:flex-end !important;
  pointer-events:none !important;
}

body.is-tablet-landscape-flow #leistungen.section.services .leistungen-outro-person{
  width:auto !important;
  max-width:min(100%, 310px) !important;
  max-height:76svh !important;
  height:auto !important;
  margin:0 auto !important;
  object-fit:contain !important;
  filter:drop-shadow(0 24px 34px rgba(0,0,0,.18)) !important;
}

body.is-tablet-landscape-flow #leistungen.section.services .leistungen-outro-title{
  width:auto !important;
  max-width:100% !important;
  font-size:clamp(40px, 5.0vw, 68px) !important;
  line-height:.92 !important;
  color:#12305a !important;
}

body.is-tablet-landscape-flow #leistungen.section.services .leistungen-outro-subtitle{
  font-size:clamp(23px, 2.8vw, 36px) !important;
  margin-bottom:clamp(24px, 4.2svh, 48px) !important;
  color:#25466e !important;
}

body.is-tablet-landscape-flow #leistungen.section.services .leistungen-outro-text,
body.is-tablet-landscape-flow #leistungen.section.services .leistungen-outro-text p{
  max-width:52ch !important;
  color:rgba(28, 45, 70, .92) !important;
  -webkit-text-fill-color:rgba(28, 45, 70, .92) !important;
}

body.is-tablet-landscape-flow #leistungen.section.services .leistungen-outro-side{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:clamp(20px, 3.4svh, 34px) !important;
}

body.is-tablet-landscape-flow #leistungen.section.services .leistungen-outro-quote,
body.is-tablet-landscape-flow #leistungen.section.services .leistungen-outro-quote p{
  color:#28262a !important;
  -webkit-text-fill-color:#28262a !important;
}

body.is-tablet-landscape-flow #leistungen.section.services .about-references-seal{
  position:relative !important;
  inset:auto !important;
  transform:none !important;
}

body.is-tablet-landscape-flow #leistungen.section.services .leistungen-outro-coverage{
  position:relative !important;
  inset:auto !important;
  z-index:6 !important;
  display:block !important;
  width:100% !important;
  min-height:100svh !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
  pointer-events:auto !important;
  overflow:hidden !important;
  background:
    linear-gradient(90deg, rgba(4,24,58,.96) 0%, rgba(5,35,75,.94) 47%, rgba(238,247,251,.94) 47.1%, rgba(252,253,252,.98) 100%) !important;
}

body.is-tablet-landscape-flow #leistungen.section.services .leistungen-outro-coverage-inner{
  position:relative !important;
  inset:auto !important;
  display:grid !important;
  grid-template-columns:minmax(0, 45%) minmax(0, 55%) !important;
  align-items:center !important;
  gap:clamp(36px, 5vw, 76px) !important;
  width:100% !important;
  min-height:100svh !important;
  height:auto !important;
  margin:0 !important;
  padding:clamp(70px, 10svh, 112px) clamp(46px, 6.4vw, 96px) !important;
  box-sizing:border-box !important;
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
}

body.is-tablet-landscape-flow #leistungen.section.services .leistungen-outro-coverage-left,
body.is-tablet-landscape-flow #leistungen.section.services .leistungen-outro-coverage-right{
  position:relative !important;
  inset:auto !important;
  left:auto !important;
  right:auto !important;
  top:auto !important;
  bottom:auto !important;
  width:100% !important;
  max-width:none !important;
  height:auto !important;
  min-height:0 !important;
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
  filter:none !important;
  pointer-events:auto !important;
}

body.is-tablet-landscape-flow #leistungen.section.services .leistungen-outro-coverage-title,
body.is-tablet-landscape-flow #leistungen.section.services .leistungen-outro-coverage-title[data-headline-fx]{
  font-size:clamp(40px, 4.9vw, 68px) !important;
  color:rgba(238,246,255,.96) !important;
  -webkit-text-fill-color:rgba(238,246,255,.96) !important;
}

body.is-tablet-landscape-flow #leistungen.section.services .leistungen-outro-coverage-eyebrow,
body.is-tablet-landscape-flow #leistungen.section.services .leistungen-outro-coverage-statement,
body.is-tablet-landscape-flow #leistungen.section.services .leistungen-outro-coverage-statement p{
  color:rgba(238,246,255,.86) !important;
  -webkit-text-fill-color:rgba(238,246,255,.86) !important;
  opacity:1 !important;
  transform:none !important;
}

body.is-tablet-landscape-flow #leistungen.section.services .leistungen-outro-coverage-right{
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  gap:clamp(24px, 4svh, 40px) !important;
}

body.is-tablet-landscape-flow #leistungen.section.services .leistungen-outro-coverage-item,
body.is-tablet-landscape-flow #leistungen.section.services .leistungen-outro-coverage-item-copy,
body.is-tablet-landscape-flow #leistungen.section.services .leistungen-outro-coverage-item-title,
body.is-tablet-landscape-flow #leistungen.section.services .leistungen-outro-coverage-item-copy p{
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
  filter:none !important;
}

body.is-tablet-landscape-flow #leistungen.section.services .leistungen-outro-coverage-item{
  display:grid !important;
  grid-template-columns:clamp(50px, 5vw, 72px) minmax(0, 1fr) !important;
  column-gap:clamp(16px, 2.4vw, 28px) !important;
  align-items:start !important;
}

body.is-tablet-landscape-flow #leistungen.section.services .leistungen-outro-coverage-icon{
  width:clamp(50px, 5vw, 72px) !important;
  height:clamp(50px, 5vw, 72px) !important;
}

body.is-tablet-landscape-flow #leistungen.section.services .leistungen-outro-coverage-item-title{
  color:#304f89 !important;
  -webkit-text-fill-color:#304f89 !important;
}

body.is-tablet-landscape-flow #leistungen.section.services .leistungen-outro-coverage-item-copy p{
  color:rgba(7, 17, 32, .88) !important;
  -webkit-text-fill-color:rgba(7, 17, 32, .88) !important;
  line-height:1.42 !important;
}

@media (prefers-reduced-motion: reduce){
  body.is-tablet-landscape-flow #leistungen.section.services .leistungen-bg-image,
  body.is-tablet-landscape-flow #leistungen.section.services .leistungen-bg-ghost,
  body.is-tablet-landscape-flow #leistungen.section.services .leistungen-symbol-row{
    transition:none !important;
    will-change:auto !important;
  }
}

/* v1.494 — Tablet landscape service backgrounds remain slide-local.
   The old sticky tablet background stage is neutralized in this mode; each
   service slide carries its own background image and ghost silhouette, so
   image, headline and copy scroll together. Opacity is constant in this mode:
   no edge/center opacity modulation is applied. */
.section.services .leistungen-slide-flow-bg{
  display:none;
}

body.is-tablet-landscape-flow #leistungen.section.services .leistungen-bg-layer,
body.is-tablet-landscape-flow #leistungen.section.services .leistungen-bg-ghost-layer{
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

body.is-tablet-landscape-flow #leistungen.section.services .leistungen-slide{
  isolation:isolate !important;
  overflow:hidden !important;
  --tablet-slide-bg-opacity:.42;
}

body.is-tablet-landscape-flow #leistungen.section.services .leistungen-slide-flow-bg{
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  display:block !important;
  overflow:hidden !important;
  pointer-events:none !important;
  mix-blend-mode:screen !important;
}

body.is-tablet-landscape-flow #leistungen.section.services .leistungen-slide-flow-bg-image,
body.is-tablet-landscape-flow #leistungen.section.services .leistungen-slide-flow-bg-ghost{
  position:absolute !important;
  top:50% !important;
  left:50% !important;
  width:min(76vw, calc(72svh * 1672 / 941)) !important;
  height:auto !important;
  max-height:72svh !important;
  aspect-ratio:1672 / 941 !important;
  transform:translate3d(-50%, -50%, 0) !important;
  transform-origin:center center !important;
  pointer-events:none !important;
  user-select:none !important;
  will-change:auto !important;
}

body.is-tablet-landscape-flow #leistungen.section.services .leistungen-slide-flow-bg-image{
  object-fit:contain !important;
  object-position:center center !important;
  opacity:var(--tablet-slide-bg-opacity, .42) !important;
  mix-blend-mode:normal !important;
  filter:saturate(.94) contrast(1.02) brightness(.98) !important;
}

body.is-tablet-landscape-flow #leistungen.section.services .leistungen-slide-flow-bg-ghost{
  height:min(42.75vw, 72svh) !important;
  background:rgba(178, 216, 255, .34) !important;
  -webkit-mask-image:var(--tablet-slide-ghost-mask) !important;
  mask-image:var(--tablet-slide-ghost-mask) !important;
  -webkit-mask-repeat:no-repeat !important;
  mask-repeat:no-repeat !important;
  -webkit-mask-position:center center !important;
  mask-position:center center !important;
  -webkit-mask-size:contain !important;
  mask-size:contain !important;
  opacity:calc(var(--tablet-slide-bg-opacity, .42) * .72) !important;
  mix-blend-mode:screen !important;
}

body.is-tablet-landscape-flow #leistungen.section.services .leistungen-slide-inner{
  z-index:2 !important;
}

/* The tablet-landscape icon rail has its own section-window state now. It is
   not derived from image opacity and therefore remains visible throughout the
   service-slide area, even when a slide background is deliberately faint. */
body.is-tablet-landscape-flow #leistungen.section.services .leistungen-symbol-row{
  transition:opacity 180ms ease, visibility 180ms ease !important;
}

body.is-tablet-landscape-flow #leistungen.section.services:not(.is-tablet-landscape-flow-icons-visible) .leistungen-symbol-row{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

body.is-tablet-landscape-flow #leistungen.section.services.is-tablet-landscape-flow-icons-visible .leistungen-symbol-row{
  opacity:.94 !important;
  visibility:visible !important;
  pointer-events:auto !important;
}

@media (prefers-reduced-motion: reduce){
  body.is-tablet-landscape-flow #leistungen.section.services .leistungen-slide-flow-bg-image,
  body.is-tablet-landscape-flow #leistungen.section.services .leistungen-slide-flow-bg-ghost{
    transition:none !important;
    will-change:auto !important;
  }
}

/* v1.495 — Tablet landscape service backgrounds match the Desktop rendering.
   The slide-local tablet images still scroll with their text, but their visual
   treatment (frame size, placement, opacity, filters, blend mode and ghost
   layer) now mirrors the current Desktop Leistungen background system. */
body.is-tablet-landscape-flow #leistungen.section.services{
  --leistungen-bg-grayscale:.10;
  --leistungen-bg-ghost-color:rgba(165, 196, 235, .32);
  --leistungen-bg-ghost-opacity:.58;
  --leistungen-bg-frame-h:70svh;
  --leistungen-bg-frame-w:calc(var(--leistungen-bg-frame-h) * var(--leistungen-bg-ratio-w, 1672) / var(--leistungen-bg-ratio-h, 941));
}

body.is-tablet-landscape-flow #leistungen.section.services .leistungen-slide{
  --tablet-slide-bg-opacity:.36;
}

body.is-tablet-landscape-flow #leistungen.section.services .leistungen-slide-flow-bg{
  background:transparent !important;
  background-color:transparent !important;
  opacity:1 !important;
  isolation:auto !important;
  filter:none !important;
  mix-blend-mode:screen !important;
  box-shadow:none !important;
  border:0 !important;
  outline:0 !important;
  -webkit-mask-image:none !important;
  mask-image:none !important;
}

body.is-tablet-landscape-flow #leistungen.section.services .leistungen-slide-flow-bg-image,
body.is-tablet-landscape-flow #leistungen.section.services .leistungen-slide-flow-bg-ghost{
  top:15svh !important;
  left:50% !important;
  width:var(--leistungen-bg-frame-w) !important;
  height:var(--leistungen-bg-frame-h) !important;
  max-width:none !important;
  max-height:none !important;
  aspect-ratio:auto !important;
  transform:translate3d(-50%, 0, 0) !important;
  transform-origin:center center !important;
}

body.is-tablet-landscape-flow #leistungen.section.services .leistungen-slide-flow-bg-image{
  object-fit:contain !important;
  object-position:center center !important;
  opacity:var(--tablet-slide-bg-opacity, .36) !important;
  mix-blend-mode:normal !important;
  filter:grayscale(var(--leistungen-bg-grayscale, .10)) saturate(.84) brightness(.89) contrast(1.015) !important;
  background:transparent !important;
  background-color:transparent !important;
  box-shadow:none !important;
  border:0 !important;
  outline:0 !important;
  -webkit-mask-image:none !important;
  mask-image:none !important;
}

body.is-tablet-landscape-flow #leistungen.section.services .leistungen-slide-flow-bg-ghost{
  background:var(--leistungen-bg-ghost-color) !important;
  background-color:var(--leistungen-bg-ghost-color) !important;
  -webkit-mask-image:var(--tablet-slide-ghost-mask) !important;
  mask-image:var(--tablet-slide-ghost-mask) !important;
  -webkit-mask-repeat:no-repeat !important;
  mask-repeat:no-repeat !important;
  -webkit-mask-position:center center !important;
  mask-position:center center !important;
  -webkit-mask-size:100% 100% !important;
  mask-size:100% 100% !important;
  opacity:var(--leistungen-bg-ghost-opacity, .58) !important;
  mix-blend-mode:screen !important;
}

/* v1.496 — Tablet landscape service backgrounds: Desktop visual strength.
   The slide-local tablet background now mirrors the Desktop full-state: the
   JPG is shown at the same target opacity/filter/blend treatment, while the
   contour ghost is not held permanently. On Desktop the ghost is only a
   transition pulse and is 0 at the fully visible state; keeping it static in
   the tablet flow made the motifs visibly too strong. */
body.is-tablet-landscape-flow #leistungen.section.services .leistungen-slide{
  --tablet-slide-bg-opacity:.36;
}

body.is-tablet-landscape-flow #leistungen.section.services .leistungen-slide-flow-bg-image{
  opacity:var(--tablet-slide-bg-opacity, .36) !important;
  mix-blend-mode:normal !important;
  filter:grayscale(var(--leistungen-bg-grayscale, .10)) saturate(.84) brightness(.89) contrast(1.015) !important;
}

body.is-tablet-landscape-flow #leistungen.section.services .leistungen-slide-flow-bg-ghost{
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
}

/* v1.497 — Tablet landscape service backgrounds: true Desktop blend.
   The previous slide-local tablet layer was isolated by the slide stacking
   context and blended over a custom darker tablet background. Desktop blends
   the transparent image group with mix-blend-mode: screen directly against the
   blue Leistungen stage. Match that here: same stage background, no isolated
   slide context, same transparent screen-blend group, same JPG treatment. */
body.is-tablet-landscape-flow #leistungen.section.services.theme-dark > .section-pin,
body.has-scene.is-tablet-landscape-flow #leistungen.section.services.theme-dark > .section-pin{
  background:
    radial-gradient(760px 540px at -2% 0%, rgba(148, 191, 238, .44), rgba(84, 135, 206, .19) 34%, transparent 66%),
    radial-gradient(980px 660px at 16% 16%, rgba(47, 113, 190, .38), rgba(13, 74, 151, .17) 44%, transparent 72%),
    radial-gradient(980px 760px at 12% 78%, rgba(22, 92, 173, .31), rgba(10, 60, 138, .12) 42%, transparent 72%),
    radial-gradient(920px 620px at 56% 42%, rgba(30, 94, 166, .23), rgba(8, 46, 110, .10) 42%, transparent 74%),
    radial-gradient(1120px 760px at 91% 72%, rgba(2, 19, 76, .72), rgba(2, 19, 76, .33) 48%, transparent 80%),
    linear-gradient(124deg, #0f639f 0%, #084e86 30%, #043862 60%, #021a47 100%) !important;
}

body.is-tablet-landscape-flow #leistungen.section.services .leistungen-slide,
body.is-tablet-landscape-flow #leistungen.section.services .leistungen-slide[aria-hidden="true"],
body.is-tablet-landscape-flow #leistungen.section.services .leistungen-slide.is-active{
  isolation:auto !important;
  background:transparent !important;
  --tablet-slide-bg-opacity:.36;
}

body.is-tablet-landscape-flow #leistungen.section.services .leistungen-slide-flow-bg{
  background:transparent !important;
  background-color:transparent !important;
  opacity:1 !important;
  filter:none !important;
  isolation:auto !important;
  mix-blend-mode:screen !important;
  z-index:0 !important;
}

body.is-tablet-landscape-flow #leistungen.section.services .leistungen-slide-flow-bg-image{
  opacity:var(--tablet-slide-bg-opacity, .36) !important;
  mix-blend-mode:normal !important;
  filter:grayscale(var(--leistungen-bg-grayscale, .10)) saturate(.84) brightness(.89) contrast(1.015) !important;
}

body.is-tablet-landscape-flow #leistungen.section.services .leistungen-slide-flow-bg-ghost{
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
}


/* v1.498 — Tablet landscape service backgrounds: preserve Desktop screen blend.
   The slide-local tablet images must not live inside the z-indexed Leistungen
   content stacking context, otherwise screen blending is resolved against that
   transparent group instead of the real blue section surface. In this mode we
   let the scroller/stage/slide participate in the normal section stacking
   order and keep only the text/icon layers above the image. */
body.is-tablet-landscape-flow #leistungen.section.services > .section-pin > .container.leistungen-scroller,
body.is-tablet-landscape-flow #leistungen.section.services .leistungen-scroller,
body.is-tablet-landscape-flow #leistungen.section.services .leistungen-stage,
body.is-tablet-landscape-flow #leistungen.section.services .leistungen-slide,
body.is-tablet-landscape-flow #leistungen.section.services .leistungen-slide[aria-hidden="true"],
body.is-tablet-landscape-flow #leistungen.section.services .leistungen-slide.is-active{
  z-index:auto !important;
  isolation:auto !important;
}

body.is-tablet-landscape-flow #leistungen.section.services .leistungen-slide{
  position:relative !important;
  background:transparent !important;
  --tablet-slide-bg-opacity:.36;
}

body.is-tablet-landscape-flow #leistungen.section.services .leistungen-slide-flow-bg{
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  display:block !important;
  overflow:hidden !important;
  background:transparent !important;
  background-color:transparent !important;
  opacity:1 !important;
  filter:none !important;
  isolation:auto !important;
  mix-blend-mode:screen !important;
  pointer-events:none !important;
}

body.is-tablet-landscape-flow #leistungen.section.services .leistungen-slide-flow-bg-image{
  top:15svh !important;
  left:50% !important;
  width:var(--leistungen-bg-frame-w) !important;
  height:var(--leistungen-bg-frame-h) !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:contain !important;
  object-position:center center !important;
  opacity:var(--tablet-slide-bg-opacity, .36) !important;
  mix-blend-mode:normal !important;
  filter:grayscale(var(--leistungen-bg-grayscale, .10)) saturate(.84) brightness(.89) contrast(1.015) !important;
  transform:translate3d(-50%, 0, 0) !important;
  background:transparent !important;
  background-color:transparent !important;
  box-shadow:none !important;
  border:0 !important;
  outline:0 !important;
  pointer-events:none !important;
  user-select:none !important;
}

body.is-tablet-landscape-flow #leistungen.section.services .leistungen-slide-flow-bg-ghost{
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
}

body.is-tablet-landscape-flow #leistungen.section.services .leistungen-slide-inner{
  position:relative !important;
  z-index:2 !important;
}

body.is-tablet-landscape-flow #leistungen.section.services .leistungen-topline{
  position:relative !important;
  z-index:5 !important;
}

body.is-tablet-landscape-flow #leistungen.section.services .leistungen-symbol-row{
  z-index:8 !important;
}