*,
*::before,
*::after {
  box-sizing: border-box
}
* {
  margin: 0
}
body {
  min-height: 100dvh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased
}
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%
}
input,
button,
textarea,
select {
  font: inherit
}
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word
}
h1,
h2,
h3,
h4 {
  text-wrap: balance
}
p {
  text-wrap: pretty
}
@font-face {
  font-display: swap;
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/montserrat-v31-latin-regular.woff2') format('woff2')
}
@font-face {
  font-display: swap;
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/montserrat-v31-latin-500.woff2') format('woff2')
}
@font-face {
  font-display: swap;
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/montserrat-v31-latin-700.woff2') format('woff2')
}
@font-face {
  font-display: swap;
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/montserrat-v31-latin-900.woff2') format('woff2')
}
@media (prefers-reduced-motion:reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important
  }
}
:root {
  --nav-x: 1.5rem;
  --nav-h: 60px;
  --content-max: 1400px;
  --hell: #e7f6fd;
  --main-blau: #003d58;
  --dark-blau: #001929;
  --akzent: #7dcef2;
  --bluemain-blau-2: #00648d;
  --star: #ffb300;
  --schwarz: #000000;
  --card-bg: #0b141d;
  --vorhang: 0s;
  /* Dieselbe Kurve wie im Portal und in der App: schnell los, weich
     aus. Steht hier, damit das Portfolio-Raster sie mitbenutzen kann. */
  --schwung: cubic-bezier(.19, 1, .22, 1)
}
html {
  scroll-padding-top: var(--nav-h)
}
html,
body {
  overflow-x: hidden
}
body {
  font-family: 'Montserrat', sans-serif;
  color: var(--main-blau);
  background: #fff
}
nav,
header,
.angebot,
.section,
.footer {
  padding-inline: max(var(--nav-x), calc((100% - var(--content-max)) / 2))
}
nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  align-content: flex-start;
  min-height: var(--nav-h);
  padding-block: 0;
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  border-bottom: 1px solid rgba(255, 255, 255, .5);
  box-shadow: 0 4px 20px rgba(14, 42, 82, .05)
}
.has-dropdown {
  position: relative;
  display: flex;
  align-items: center;
  align-self: stretch
}
.dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  font-size: inherit;
  color: var(--dark-blau);
  padding: 0
}
.chevron {
  transition: transform .25s ease
}
.has-dropdown.open .chevron {
  transform: rotate(180deg)
}
.dropdown {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px !important;
  margin: 0;
  padding: 8px;
  position: absolute;
  top: 180%;
  left: -14px;
  min-width: 190px;
  background: #fff;
  border: 1px solid rgba(0, 25, 41, .08);
  border-top: none;
  border-radius: 0 0 14px 14px;
  box-shadow: 0 12px 20px -6px rgba(14, 42, 82, .18);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease
}
.dropdown li:not(:last-child) a {
  border-bottom: 1px solid rgba(0, 25, 41, .08);
  border-radius: 0
}
.has-dropdown.open .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0)
}
.dropdown a {
  display: block;
  padding: 10px 14px;
  border: none;
  font-weight: 500;
  font-size: .95rem;
  line-height: 1.2;
  color: var(--dark-blau);
  transition: background .18s ease
}
.nav-logo {
  display: flex;
  align-items: center;
  min-height: var(--nav-h)
}
.nav-logo .logo {
  display: block;
  width: 180px;
  height: 20px;
  background-color: var(--dark-blau);
  -webkit-mask-image: url('../img/Logo.svg');
  mask-image: url('../img/Logo.svg');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain
}
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: var(--nav-h);
  background: none;
  border: none;
  cursor: pointer
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--dark-blau);
  border-radius: 2px;
  transition: transform .5s ease, opacity .25s ease
}
.nav-links ul {
  list-style: none;
  display: flex;
  gap: 1.5rem;
  margin: 0;
  padding: 0
}
.nav-links a {
  text-decoration: none;
  color: var(--dark-blau);
  font-family: 'Montserrat', sans-serif;
  font-weight: 500
}
body.resizing * {
  transition: none !important
}
@media (max-width:900px) {
  .nav-toggle {
    display: flex
  }
  .nav-links {
    flex-basis: 100%;
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .5s cubic-bezier(.4, 0, .2, 1)
  }
  .nav-links>ul {
    margin: 0;
    overflow: hidden;
    min-height: 0;
    flex-direction: column;
    gap: 0;
    padding: 0;
    list-style: none
  }
  nav.open .nav-links {
    grid-template-rows: 1fr
  }
  nav.open .nav-toggle span:nth-child(1) {
    transform: translateY(7px) rotate(45deg)
  }
  nav.open .nav-toggle span:nth-child(2) {
    opacity: 0
  }
  nav.open .nav-toggle span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg)
  }
  .nav-links>ul>li {
    border-bottom: 1px solid #0019291c
  }
  .nav-links>ul>li:last-child {
    border-bottom: none
  }
  .nav-links a {
    display: block;
    padding: .9rem 0;
    font-size: 1.05rem;
    border-bottom: none
  }
  .has-dropdown {
    display: block;
    align-self: auto;
    height: auto
  }
  .dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: .9rem 0;
    font-size: 1.05rem
  }
  .dropdown {
    position: static;
    top: auto;
    left: auto;
    min-width: 0;
    display: block;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    padding: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    overflow: hidden;
    max-height: 0;
    transition: max-height .4s ease
  }
  .has-dropdown.open .dropdown {
    max-height: 500px
  }
  .dropdown a {
    display: block;
    padding: .9rem 0 .9rem 1.8rem;
    font-size: 1.05rem;
    border-radius: 0;
    border-bottom: none
  }
}
@media (min-width:901px) {
  .nav-links>ul>li>a,
  .nav-links>ul>li>.dropdown-toggle {
    display: inline-flex;
    align-items: center;
    transition: color .2s ease, transform .2s ease
  }
}
.btn,
.btn-primary,
.btn-ghost,
.plan-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  border-radius: 100px;
  font-weight: 700;
  font-size: .98rem;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease, color .25s ease
}
.btn-primary {
  background: var(--main-blau);
  color: #fff;
  box-shadow: 0 8px 20px rgba(0, 61, 88, .28)
}
.btn-primary:active {
  transform: translateY(-1px)
}
.btn-ghost {
  background: #fff;
  color: var(--main-blau);
  border: 1px solid rgba(0, 61, 88, .15);
  box-shadow: 0 4px 14px rgba(0, 25, 41, .06)
}
.btn-ghost:active {
  transform: translateY(-1px)
}
header {
  position: relative;
  min-height: 108svh;
  display: flex;
  flex-direction: column;
  padding-block: calc(var(--nav-h) + 2.2rem) 0;
  background: var(--hell)
}
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(50px);
  opacity: .55;
  z-index: 0;
  pointer-events: none
}
.blob-1 {
  width: 280px;
  height: 280px;
  background: var(--akzent);
  top: 6%;
  right: -70px;
  animation: float1 14s ease-in-out infinite
}
.blob-2 {
  width: 230px;
  height: 230px;
  background: #bce6f7;
  bottom: 24%;
  left: -80px;
  animation: float2 18s ease-in-out infinite
}
@keyframes float1 {
  0%,
  100% {
    transform: translate(0, 0) scale(1)
  }
  50% {
    transform: translate(-24px, 30px) scale(1.12)
  }
}
@keyframes float2 {
  0%,
  100% {
    transform: translate(0, 0) scale(1)
  }
  50% {
    transform: translate(30px, -22px) scale(1.08)
  }
}
.header-text {
  position: relative;
  z-index: 2
}
.eyebrow {
  display: inline-block;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bluemain-blau-2);
  background: none;
  padding: 0;
  margin-bottom: 16px
}
.eyebrow::before {
  display: none
}
.eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--star);
  box-shadow: 0 0 0 3px rgba(255, 179, 0, .25)
}
h1 {
  font-weight: 900;
  font-size: clamp(3.3rem, 16vw, 4.6rem);
  line-height: .9;
  letter-spacing: -.03em;
  text-transform: uppercase;
  color: var(--dark-blau)
}
h1 .w {
  display: block;
  opacity: 0;
  transform: translateY(24px);
  animation: rise 1.6s cubic-bezier(.19, 1, .22, 1) forwards
}
h1 .w:nth-child(1) {
  animation-delay: calc(var(--vorhang) + .6s)
}
h1 .w:nth-child(2) {
  animation-delay: calc(var(--vorhang) + .92s)
}
h1 .w:nth-child(3) {
  animation-delay: calc(var(--vorhang) + 1.24s)
}
h1 .w:nth-child(4) {
  animation-delay: calc(var(--vorhang) + 1.56s)
}
.header-text p {
  margin-top: 1.4rem;
  max-width: 30ch;
  font-size: 1.05rem;
  line-height: 1.55;
  font-weight: 600;
  color: var(--dark-blau);
  opacity: 0;
  animation: rise 1.6s calc(var(--vorhang) + 1.9s) cubic-bezier(.19, 1, .22, 1) both
}
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 1.8rem;
  opacity: 0;
  animation: rise 1.6s calc(var(--vorhang) + 2.2s) cubic-bezier(.19, 1, .22, 1) both
}
@keyframes rise {
  to {
    opacity: 1;
    transform: none
  }
}
.bokeh {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none
}
.bokeh span {
  position: absolute;
  bottom: -40px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff, var(--akzent));
  opacity: 0;
  filter: blur(1px);
  animation: floatUp linear infinite
}
.bokeh span:nth-child(1) {
  width: 14px;
  height: 14px;
  left: 12%;
  animation-duration: 16s;
  animation-delay: 0s
}
.bokeh span:nth-child(2) {
  width: 8px;
  height: 8px;
  left: 28%;
  animation-duration: 22s;
  animation-delay: 6s
}
.bokeh span:nth-child(3) {
  width: 20px;
  height: 20px;
  left: 45%;
  animation-duration: 19s;
  animation-delay: 3s
}
.bokeh span:nth-child(4) {
  width: 6px;
  height: 6px;
  left: 60%;
  animation-duration: 25s;
  animation-delay: 9s
}
.bokeh span:nth-child(5) {
  width: 16px;
  height: 16px;
  left: 74%;
  animation-duration: 18s;
  animation-delay: 1s
}
.bokeh span:nth-child(6) {
  width: 10px;
  height: 10px;
  left: 85%;
  animation-duration: 23s;
  animation-delay: 12s
}
.bokeh span:nth-child(7) {
  width: 12px;
  height: 12px;
  left: 38%;
  animation-duration: 21s;
  animation-delay: 14s
}
.bokeh span:nth-child(8) {
  width: 9px;
  height: 9px;
  left: 20%;
  animation-duration: 24s;
  animation-delay: 4s
}
.bokeh span:nth-child(9) {
  width: 13px;
  height: 13px;
  left: 52%;
  animation-duration: 20s;
  animation-delay: 8s
}
.bokeh span:nth-child(10) {
  width: 7px;
  height: 7px;
  left: 67%;
  animation-duration: 26s;
  animation-delay: 2s
}
.bokeh span:nth-child(11) {
  width: 15px;
  height: 15px;
  left: 92%;
  animation-duration: 19s;
  animation-delay: 10s
}
@keyframes floatUp {
  0% {
    transform: translateY(0) translateX(0);
    opacity: 0
  }
  10% {
    opacity: .5
  }
  50% {
    transform: translateY(-45vh) translateX(14px)
  }
  90% {
    opacity: .5
  }
  100% {
    transform: translateY(-90vh) translateX(-10px);
    opacity: 0
  }
}
@media (prefers-reduced-motion:reduce) {
  .bokeh span {
    animation: none;
    opacity: 0
  }
}
@media (prefers-reduced-motion:reduce) {
  .blob {
    animation: none
  }
  .eyebrow,
  .header-text p,
  .cta-row,
  h1 .w {
    animation: none;
    opacity: 1;
    transform: none
  }
}
@media (min-width:769px) {
  :root {
    --nav-x: clamp(3rem, 6vw, 6rem)
  }
  header {
    min-height: 92svh;
    flex-direction: row;
    align-items: center;
    gap: clamp(2rem, 4vw, 4rem);
    padding-block: calc(var(--nav-h) + 2rem) 2rem
  }
  .header-text {
    flex: 1 1 100%;
    max-width: 680px
  }
  h1 {
    font-size: clamp(4rem, 6vw, 7rem)
  }
  .header-text p {
    font-size: 1.2rem
  }
}
.angebot {
  padding-block: clamp(3rem, 8vw, 6rem);
  background: #fff
}
.angebot>.eyebrow {
  display: inline-flex;
  margin-bottom: 0
}
.angebot-heading {
  max-width: 640px;
  margin: 14px 0 clamp(1.5rem, 3vw, 2.5rem)
}
.angebot-heading h2 {
  font-weight: 900;
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--dark-blau)
}
.angebot-heading p {
  margin-top: .75rem;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--main-blau)
}
.angebot-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 24px
}
.angebot-card {
  flex: 1 1 350px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: #fff;
  border: 1px solid rgba(0, 25, 41, .09);
  border-radius: 20px;
  padding: 24px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease
}
.angebot-card-content {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "icon title" "desc desc";
  align-items: center;
  column-gap: 16px;
  row-gap: 14px
}
.angebot-card-content img {
  grid-area: icon;
  width: 52px;
  height: 52px;
  padding: 11px;
  box-sizing: border-box;
  border-radius: 14px;
  background: rgba(125, 206, 242, .20);
  align-self: start
}
.angebot-card-content>div {
  grid-area: title;
  min-width: 0
}
.angebot-card-content>div h3 {
  font-weight: 900;
  font-size: 1.35rem;
  line-height: 1;
  color: var(--dark-blau)
}
.angebot-card-content>div h4 {
  margin-top: 5px;
  font-weight: 600;
  font-size: .9rem;
  color: var(--bluemain-blau-2)
}
.angebot-card-content>p {
  grid-area: desc;
  font-size: .95rem;
  line-height: 1.55;
  color: var(--main-blau)
}
.tags {
  margin-top: auto
}
.tags ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0
}
.tags li {
  font-size: .8rem;
  font-weight: 500;
  color: var(--bluemain-blau-2);
  background: var(--hell);
  padding: 6px 12px;
  border-radius: 100px
}
.section {
  padding-block: clamp(3rem, 8vw, 6rem)
}
.section>.eyebrow,
.section>.pf-kopf>.eyebrow {
  display: inline-flex;
  margin-bottom: 14px
}
.section>h2,
.section>.pf-kopf>h2 {
  font-weight: 900;
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--dark-blau);
  max-width: 640px;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem)
}
.proj-link {
  display: block;
  width: 100%;
  text-decoration: none;
  color: inherit
}
.proj {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  background: #fff;
  border: 1px solid rgba(0, 25, 41, .09);
  border-radius: 24px;
  padding: clamp(1rem, 2vw, 1.5rem);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease
}
.proj .media {
  position: relative;
  flex: 1 1 340px;
  border-radius: 16px;
  overflow: hidden;
  min-height: 240px
}
.proj .media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block
}
.proj .badges {
  position: absolute;
  top: 14px;
  left: 14px;
  display: flex;
  gap: 8px;
  z-index: 2
}
.type-pill,
.live-pill {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 100px;
  backdrop-filter: blur(6px)
}
.type-pill {
  background: rgba(0, 25, 41, .78);
  color: #fff
}
.live-pill {
  background: rgba(255, 255, 255, .85);
  color: var(--main-blau);
  display: inline-flex;
  align-items: center;
  gap: 6px
}
.live-pill::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #16b364;
  box-shadow: 0 0 0 3px rgba(22, 179, 100, .25)
}
.proj-body {
  flex: 1 1 300px;
  display: flex;
  flex-direction: column;
  padding: clamp(.5rem, 1.5vw, 1.25rem)
}
.proj-body h3 {
  font-weight: 900;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1.05;
  color: var(--dark-blau)
}
.proj-loc {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: .9rem;
  font-weight: 600;
  color: var(--bluemain-blau-2)
}
.proj-body p {
  margin-top: 1rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--main-blau)
}
.proj-body .tags {
  margin-top: 1.25rem
}
.visit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 1.25rem;
  font-weight: 700;
  font-size: .98rem;
  color: var(--bluemain-blau-2);
  transition: gap .2s ease, color .2s ease
}
.section--dark {
  background: var(--main-blau)
}
.section--dark>.eyebrow {
  color: var(--akzent)
}
.section--dark>h2 {
  color: #fff;
  max-width: 640px;
  margin-bottom: 0
}
.section--dark .dot {
  color: var(--akzent)
}
.section.section--dark>.lead {
  max-width: 46ch;
  margin-top: .9rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  font-size: 1.05rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, .8)
}
.benefits {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 2.75rem)
}
.benefit {
  display: flex;
  align-items: flex-start;
  gap: 16px
}
.b-icon {
  flex: none;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: rgba(125, 206, 242, .14)
}
.b-icon img {
  width: 26px;
  height: 26px;
  filter: brightness(0) invert(1)
}
.b-text h3 {
  font-weight: 700;
  font-size: 1.1rem;
  color: #fff
}
.b-text p {
  font-size: .95rem;
  color: rgba(255, 255, 255, .72)
}
.section--dark .cta {
  margin-top: clamp(2rem, 4vw, 3rem)
}
.section--dark .btn {
  background: #fff;
  color: var(--main-blau)
}
@media (min-width:600px) {
  .benefits {
    grid-template-columns: 1fr 1fr
  }
}
@media (min-width:1400px) {
  .benefits {
    grid-template-columns: repeat(4, 1fr)
  }
}
.section>.lead,
.section>.pf-kopf>.lead {
  max-width: 46ch;
  margin-top: .5rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--main-blau)
}
.timeline {
  display: flex;
  flex-direction: column
}
.step {
  display: flex;
  gap: 18px
}
.rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: none
}
.num {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--main-blau);
  color: #fff;
  font-weight: 900;
  font-size: 1.15rem;
  display: flex;
  align-items: center;
  justify-content: center
}
.line {
  width: 2px;
  flex: 1;
  background: rgba(0, 25, 41, .12);
  margin: 8px 0
}
.body {
  padding-top: 9px;
  padding-bottom: 32px
}
.step:last-child .body {
  padding-bottom: 0
}
.body h3 {
  font-weight: 900;
  font-size: 1.25rem;
  color: var(--dark-blau);
  margin-bottom: 6px
}
.body p {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--main-blau);
  max-width: 52ch
}
.plans {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px
}
@media (min-width:960px) {
  .plans {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }
}
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(0, 25, 41, .10);
  border-radius: 22px;
  padding: 28px 24px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease
}
.plan-name {
  font-weight: 900;
  font-size: 1.35rem;
  color: var(--dark-blau)
}
.plan-desc {
  margin-top: 4px;
  margin-bottom: 20px;
  font-size: .9rem;
  color: var(--bluemain-blau-2)
}
.plan.feat {
  background: var(--main-blau);
  border-color: var(--main-blau)
}
.plan.feat .plan-name {
  color: #fff
}
.plan.feat .plan-desc {
  color: rgba(255, 255, 255, .7)
}
.price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 20px
}
.price .from {
  font-size: .9rem;
  color: rgba(255, 255, 255, .7)
}
.price .amount {
  font-weight: 900;
  font-size: 2.4rem;
  letter-spacing: -.02em;
  color: #fff
}
.rows {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px
}
.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 12px 0;
  border-top: 1px solid rgba(0, 25, 41, .08)
}
.row:first-child {
  border-top: none
}
.row-l {
  display: flex;
  align-items: center;
  gap: 11px
}
.row-l img {
  width: 34px;
  height: 34px;
  padding: 7px;
  box-sizing: border-box;
  border-radius: 9px;
  background: rgba(125, 206, 242, .20)
}
.row-l span {
  font-size: .95rem;
  font-weight: 600;
  color: var(--dark-blau)
}
.row-l em {
  font-style: normal;
  font-weight: 500;
  font-size: .8rem;
  color: var(--bluemain-blau-2)
}
.row-r {
  font-weight: 900;
  font-size: 1.05rem;
  color: var(--dark-blau);
  white-space: nowrap
}
.row-r em {
  font-style: normal;
  font-weight: 500;
  font-size: .8rem;
  color: var(--main-blau);
  margin-right: 3px
}
.feats {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin: 0 0 20px;
  padding: 0
}
.feats li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .95rem;
  line-height: 1.4;
  color: var(--main-blau)
}
.feats img {
  width: 20px;
  height: 20px;
  flex: none;
  margin-top: 1px
}
.plan.feat .feats li {
  color: rgba(255, 255, 255, .9)
}
.plan.feat .feats img {
  filter: brightness(0) invert(1)
}
.plan-btn {
  width: 100%;
  align-self: stretch;
  flex: none;
  margin-top: auto
}
.plan-btn.ghost {
  background: var(--hell);
  color: var(--main-blau)
}
.plan-btn.solid {
  background: #fff;
  color: var(--main-blau)
}
.plan-btn.line {
  background: var(--main-blau);
  color: #fff
}
.note {
  margin-top: 20px;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--bluemain-blau-2);
  text-align: center
}
.form {
  display: grid;
  gap: 16px;
  max-width: 680px;
  margin-inline: auto;
  background: #fff;
  border: 1px solid rgba(0, 25, 41, .09);
  border-radius: 24px;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  box-shadow: 0 20px 50px rgba(0, 25, 41, .06)
}
.form label {
  display: block;
  margin-bottom: 7px;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--dark-blau)
}
.field {
  width: 100%;
  font-family: inherit;
  font-size: 1rem;
  color: var(--dark-blau);
  background: var(--hell);
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 13px 15px;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease
}
.field::placeholder {
  color: #7d94a8
}
.field:focus {
  outline: none;
  background: #fff;
  border-color: var(--akzent);
  box-shadow: 0 0 0 4px rgba(125, 206, 242, .3)
}
textarea.field {
  min-height: 120px;
  resize: vertical;
  line-height: 1.55
}
select.field {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2300648d' stroke-width='2'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  padding-right: 42px;
  cursor: pointer
}
.send {
  width: 100%;
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 24px;
  border: none;
  border-radius: 100px;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  background: var(--main-blau);
  color: #fff;
  box-shadow: 0 8px 20px rgba(0, 61, 88, .28);
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease
}
.send:active {
  transform: translateY(-1px)
}
.divider {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 680px;
  margin: clamp(1.75rem, 4vw, 2.5rem) auto;
  font-size: .85rem;
  font-weight: 600;
  color: var(--bluemain-blau-2)
}
.divider::before,
.divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(0, 25, 41, .12)
}
.direct {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  max-width: 680px;
  margin-inline: auto
}
.drow {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid rgba(0, 25, 41, .09);
  border-radius: 16px;
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease
}
.drow img {
  width: 44px;
  height: 44px;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 12px;
  background: rgba(125, 206, 242, .20);
  flex: none
}
.drow .dl {
  font-size: .78rem;
  font-weight: 600;
  color: var(--bluemain-blau-2)
}
.drow .dv {
  font-size: .98rem;
  font-weight: 700;
  color: var(--dark-blau)
}
.footer {
  background: var(--dark-blau);
  color: #fff;
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem
}
.footer .brand img {
  height: 20px;
  width: auto;
  filter: brightness(0) invert(1)
}
.footer .tag {
  margin-top: 16px;
  max-width: 44ch;
  font-size: .95rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, .6)
}
.footer .cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin: clamp(2rem, 5vw, 3rem) 0
}
@media (min-width:640px) {
  .footer .cols {
    grid-template-columns: repeat(3, 1fr)
  }
}
.footer .col h3 {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--akzent);
  margin-bottom: 14px
}
.footer .col a,
.footer .col p {
  display: block;
  font-size: .95rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, .7);
  text-decoration: none;
  margin-bottom: 10px;
  transition: color .2s ease
}
.footer .social {
  display: flex;
  gap: 10px;
  margin-top: 6px
}
.footer .social a {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(125, 206, 242, .12);
  transition: background .2s ease, transform .2s ease
}
.footer .social img {
  width: 20px;
  height: 20px;
  filter: brightness(0) invert(1)
}
.footer .bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .12)
}
.footer .legal {
  display: flex;
  gap: 20px
}
.footer .legal a {
  font-size: .9rem;
  color: rgba(255, 255, 255, .7);
  text-decoration: none
}
.footer .copy {
  font-size: .85rem;
  color: rgba(255, 255, 255, .7)
}
@media (prefers-reduced-motion:no-preference) {
  .plan.feat {
    animation: pulse-feat 3.5s ease-in-out infinite
  }
}
@keyframes pulse-feat {
  0%,
  100% {
    transform: scale(1)
  }
  50% {
    transform: scale(1.03)
  }
}
.work-more {
  display: flex;
  justify-content: center;
  margin-top: clamp(1.5rem, 3vw, 2.25rem)
}
.consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .85rem;
  line-height: 1.5;
  color: var(--main-blau)
}
.consent input {
  margin-top: 3px;
  flex: none;
  width: 16px;
  height: 16px;
  accent-color: var(--main-blau);
  cursor: pointer
}
.consent a {
  color: var(--bluemain-blau-2);
  text-decoration: underline
}
.contact-page h1 {
  font-weight: 900;
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.05;
  letter-spacing: -.02em;
  text-transform: none;
  color: var(--dark-blau)
}
.contact-page .dot {
  color: var(--akzent)
}
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1.1s cubic-bezier(.16, 1, .3, 1), transform 1.2s cubic-bezier(.16, 1, .3, 1);
  transition-delay: var(--reveal-delay, 0s)
}
.reveal.is-visible {
  opacity: 1;
  transform: none
}
:is(.angebot-cards, .gallery-grid, .work-grid, .benefits, .plans, .direct)>.reveal:nth-child(2) {
  --reveal-delay: .08s
}
:is(.angebot-cards, .gallery-grid, .work-grid, .benefits, .plans, .direct)>.reveal:nth-child(3) {
  --reveal-delay: .16s
}
:is(.angebot-cards, .gallery-grid, .work-grid, .benefits, .plans, .direct)>.reveal:nth-child(4) {
  --reveal-delay: .24s
}
:is(.angebot-cards, .gallery-grid, .work-grid, .benefits, .plans, .direct)>.reveal:nth-child(5) {
  --reveal-delay: .32s
}
:is(.angebot-cards, .gallery-grid, .work-grid, .benefits, .plans, .direct)>.reveal:nth-child(6) {
  --reveal-delay: .40s
}
@media (prefers-reduced-motion:no-preference) {
  /* Die Wellenkante wird per JS in den Hero gehaengt und ist damit
     ebenfalls ein direktes Kind. Ohne die Ausnahme flogen die 24px auch
     auf sie los - die Welle rutschte beim Laden von unten herein und
     gab kurz den Hintergrund darunter frei. */
  .page-hero>*:not(.sec-edge) {
    opacity: 0;
    transform: translateY(24px);
    animation: heroRise .7s ease forwards
  }
  .page-hero>.eyebrow {
    animation-delay: .05s
  }
  .page-hero>h1 {
    animation-delay: .15s
  }
  .page-hero>.lead {
    animation-delay: .30s
  }
  .page-hero>.cta-row {
    animation-delay: .45s
  }
  .page-hero>.showreel-frame {
    animation-delay: .55s
  }
}
@keyframes heroRise {
  to {
    opacity: 1;
    transform: none
  }
}
@media (prefers-reduced-motion:reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none
  }
}
.form-success {
  max-width: 680px;
  margin: 16px auto 0;
  padding: 18px 20px;
  background: rgba(22, 179, 100, .10);
  border: 1px solid rgba(22, 179, 100, .35);
  border-radius: 16px;
  font-size: .98rem;
  line-height: 1.5;
  color: #0f7a45
}
.form-success strong {
  color: #0b5c34
}
.trust { padding-block: clamp(2rem, 5vw, 3.5rem); }
.carousell {
  display: flex;
  width: 90%;
  margin: 20px auto 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5em;
  padding-right: 5em;
  flex: none;
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
  animation: spin 15s linear infinite;
}
.card {
  flex: 0 0 5em;
  height: 45px;
  width: auto;
  opacity: .65;
  filter: grayscale(1);
  transition: opacity .25s ease, filter .25s ease;
}
@media (hover: hover) {
  .card:hover { opacity: 1; filter: grayscale(0); }
  .carousell:hover .group { animation-play-state: paused; }
}
@keyframes spin {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}
@media (prefers-reduced-motion: reduce) {
  .group { animation: none; }
}
.group .card:first-child {
  height: 70px;
}
.group .card:last-child {
  height: 100px;
}
.testimonials {
  padding-block: clamp(3rem, 6vw, 5rem);
}
.testi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 24px);
  margin-top: 2rem;
}
.testi-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(1.5rem, 2.5vw, 2rem);
  background: #fff;
  border: 1px solid rgba(0, 25, 41, .08);
  border-radius: 18px;
}
.testi-stars {
  color: var(--star);
  font-size: 1.05rem;
  letter-spacing: 2px;
}
.testi-card blockquote {
  margin: 0;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--main-blau);
  flex: 1;
}
.testi-card figcaption {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 8px;
  border-top: 1px solid rgba(0, 25, 41, .08);
}
.testi-name {
  font-weight: 700;
  color: var(--dark-blau);
}
.testi-role {
  font-size: .88rem;
  color: var(--bluemain-blau-2);
}
.testi-quote {
  overflow: hidden;
  max-height: 6.6em;
  transition: max-height .45s ease;
}
.testi-quote.is-clamped {
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent);
  mask-image: linear-gradient(to bottom, #000 70%, transparent);
}
.testi-quote.is-open {
  max-height: 40em;
  -webkit-mask-image: none;
  mask-image: none;
}
.testi-toggle {
  align-self: flex-start;
  background: none;
  border: none;
  padding: 0;
  margin: -4px 0 0;
  font: inherit;
  font-weight: 700;
  font-size: .9rem;
  color: var(--bluemain-blau-2);
  cursor: pointer;
}
.testi-toggle.is-hidden {
  display: none;
}
@media (max-width: 900px) {
  .testi-grid {
    grid-template-columns: 1fr;
  }
}
.testi-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 25, 41, .55);
  backdrop-filter: blur(4px);
}
.testi-lightbox[hidden] {
  display: none;
}
.testi-lightbox-inner {
  position: relative;
  max-width: 640px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  padding: clamp(2rem, 5vw, 3rem);
  background: #fff;
  border-radius: 20px;
  animation: testi-pop .25s ease;
}
@keyframes testi-pop {
  from { opacity: 0; transform: scale(.96); }
  to   { opacity: 1; transform: scale(1); }
}
.testi-lightbox-stars {
  color: var(--star);
  font-size: 1.2rem;
  letter-spacing: 2px;
  margin-bottom: 1rem;
}
.testi-lightbox-inner blockquote {
  margin: 0 0 1.25rem;
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--main-blau);
}
.testi-lightbox-name {
  margin: 0;
  font-weight: 700;
  color: var(--dark-blau);
}
.testi-lightbox-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: var(--hell);
  font-size: 1.6rem;
  line-height: 1;
  color: var(--dark-blau);
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
@media (prefers-reduced-motion: reduce) {
  .testi-lightbox-inner { animation: none; }
}
    .cat-bar {
      position: sticky;
      top: var(--nav-h, 72px);
      z-index: 20;
      padding-block: clamp(1rem, 2.5vw, 1.4rem);
      background: var(--ton-1, var(--hell));
      border-bottom: 1px solid rgba(0, 25, 41, .1);
    }
    .cat-bar-scroll {
      display: flex;
      flex-wrap: nowrap;
      gap: 10px;
      overflow-x: auto;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
      padding-inline: max(var(--nav-x, 20px), calc((100% - var(--content-max, 1200px)) / 2));
    }
    .cat-bar-scroll::-webkit-scrollbar {
      display: none;
    }
    .cat-bar::before,
    .cat-bar::after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 1px;
      width: 34px;
      pointer-events: none;
      opacity: 0;
      transition: opacity .2s ease;
      z-index: 2;
    }
    .cat-bar::before {
      left: 0;
      background: linear-gradient(90deg, var(--hell), rgba(231, 246, 253, 0));
    }
    .cat-bar::after {
      right: 0;
      background: linear-gradient(270deg, var(--hell), rgba(231, 246, 253, 0));
    }
    .cat-bar.can-left::before,
    .cat-bar.can-right::after {
      opacity: 1;
    }
    .cat-chip {
      flex: 0 0 auto;
      padding: 9px 18px;
      border-radius: 100px;
      font-weight: 700;
      font-size: .9rem;
      font-family: inherit;
      cursor: pointer;
      background: #fff;
      color: var(--main-blau);
      border: 1px solid rgba(0, 25, 41, .12);
      transition: background .2s ease, color .2s ease, border-color .2s ease;
    }
    .cat-chip[aria-pressed="true"] {
      background: var(--dark-blau);
      color: #fff;
      border-color: var(--dark-blau);
    }
    .cat-chip:focus-visible {
      outline: 2px solid var(--akzent);
      outline-offset: 2px;
    }
    .pf-filtered {
      display: none !important;
    }

    /* ---------- Ein Raster statt vier Abschnitte ----------
       Ueberschrift, Vorspann und Handlungsaufruf wechseln beim Filtern
       mit; sie blenden kurz weg und kommen mit dem neuen Text zurueck.
       Die Kacheln selbst gleiten an ihre neue Stelle - die Verschiebung
       setzt das Skript, hier steht nur, wie lange und wie weich. */
    .pf-kopf,
    .section-cta {
      transition: opacity .18s ease, transform .18s ease;
    }
    .pf-kopf.is-weg,
    .section-cta.is-weg {
      opacity: 0;
      transform: translateY(6px);
    }
    .pf-tile {
      transition: transform .5s var(--schwung), opacity .35s ease;
    }
    /* is-neu ist der Zustand VOR dem Einblenden, is-weg der waehrend des
       Ausblendens. Beide sehen gleich aus, nur die Dauer unterscheidet
       sich: Verschwinden darf zackiger sein als Erscheinen. */
    .pf-tile.is-neu,
    .pf-tile.is-weg {
      opacity: 0;
      transform: scale(.94);
    }
    .pf-tile.is-weg {
      transition: opacity .18s ease, transform .18s ease;
    }
    .pf-hinweis {
      margin-top: 20px;
      max-width: 46ch;
      font-weight: 600;
      color: var(--main-blau);
      overflow-wrap: break-word;
    }
    .pf-hinweis[hidden] {
      display: none;
    }

    /* ---------- Uebersicht »Alle«: Zeilen statt einer Wand ----------
       Eine Zeile je Kategorie, hoechstens vier Kacheln darin, daneben
       der Weg in die Kategorie. */
    .pf-zeilen {
      display: grid;
      gap: clamp(2.4rem, 5vw, 3.6rem);
    }
    .pf-zeile-kopf {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 14px;
      flex-wrap: wrap;
      margin-bottom: 16px;
    }
    .pf-zeile-kopf h3 {
      margin-top: .25rem;
      font-size: clamp(1.25rem, 2.4vw, 1.75rem);
      line-height: 1.2;
      color: var(--main-blau);
      max-width: 24ch;
    }
    .pf-mehr {
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 6px 0;
      border: 0;
      background: none;
      font: inherit;
      font-weight: 700;
      font-size: .92rem;
      color: var(--bluemain-blau-2);
      cursor: pointer;
      white-space: nowrap;
    }
    .pf-mehr::after {
      content: "→";
      transition: transform .25s var(--schwung);
    }
    .pf-mehr:focus-visible {
      outline: 2px solid var(--akzent);
      outline-offset: 3px;
      border-radius: 4px;
    }

    /* Zaehlmarke der Galeriekachel. Gegenueber der Art-Marke, damit sich
       die beiden nicht in die Quere kommen. */
    .tile-zahl {
      position: absolute;
      top: 12px;
      right: 12px;
      z-index: 2;
      padding: 5px 11px;
      border-radius: 100px;
      background: rgba(0, 25, 41, .7);
      -webkit-backdrop-filter: blur(6px);
      backdrop-filter: blur(6px);
      color: #fff;
      font-size: .68rem;
      font-weight: 700;
      letter-spacing: .06em;
      text-transform: uppercase;
    }

    /* Zwischen Uebersicht und Raster wird ueberblendet - zwei
       verschiedene Behaelter lassen sich nicht ineinanderschieben.
       Die Regeln fuer [hidden] brauchen die hoehere Genauigkeit, sonst
       gewinnt das display der Klasse und beide Ansichten stehen
       gleichzeitig da. */
    .pf-zeilen,
    #pfGrid {
      transition: opacity .18s ease, transform .18s ease;
    }
    .pf-zeilen.is-weg,
    #pfGrid.is-weg {
      opacity: 0;
      transform: translateY(8px);
    }
    .pf-zeilen[hidden],
    .gallery-grid[hidden],
    .section-cta[hidden] {
      display: none;
    }
    /* Wer Bewegung abgeschaltet hat, bekommt den Wechsel ohne Gleiten -
       sonst bliebe eine Kachel im Zustand is-neu haengen, weil es kein
       transitionend gibt, an dem sie sich zurueckmelden koennte. */
    @media (prefers-reduced-motion: reduce) {
      .pf-kopf,
      .section-cta,
      .pf-tile,
      .pf-zeilen,
      #pfGrid {
        transition: none;
      }
      .pf-zeilen.is-weg,
      #pfGrid.is-weg {
        opacity: 1;
        transform: none;
      }
      .pf-tile.is-neu,
      .pf-tile.is-weg {
        opacity: 1;
        transform: none;
      }
    }
    .gallery-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 18px;
    }
    .tile {
      position: relative;
      aspect-ratio: 16 / 9;
      border-radius: 16px;
      overflow: hidden;
      background: linear-gradient(135deg, var(--main-blau), var(--dark-blau));
      text-decoration: none;
    }
    .tile img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform .4s ease;
    }
    .tile-badge {
      position: absolute;
      top: 12px;
      left: 12px;
      z-index: 2;
      padding: 5px 11px;
      border-radius: 100px;
      background: rgba(0, 25, 41, .7);
      -webkit-backdrop-filter: blur(6px);
      backdrop-filter: blur(6px);
      color: #fff;
      font-size: .68rem;
      font-weight: 700;
      letter-spacing: .06em;
      text-transform: uppercase;
    }
    .tile-play {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1;
    }
    .tile-play::before {
      content: "";
      width: 54px;
      height: 54px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .16);
      border: 2px solid rgba(255, 255, 255, .55);
    }
    .tile-play::after {
      content: "";
      position: absolute;
      width: 0;
      height: 0;
      margin-left: 5px;
      border-left: 16px solid #fff;
      border-top: 10px solid transparent;
      border-bottom: 10px solid transparent;
    }
    .tile-empty {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(255, 255, 255, .5);
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      font-size: .78rem;
    }
    .tile iframe,
    .tile video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border: 0;
    }
    .tile {
      border: none;
      padding: 0;
      cursor: pointer;
      font: inherit;
      width: 100%;
    }
    .tile-title {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 2;
      padding: 26px 16px 14px;
      font-size: .95rem;
      font-weight: 700;
      color: #fff;
      text-align: left;
      background: linear-gradient(to top, rgba(0, 25, 41, .85), transparent);
      pointer-events: none;
    }
    .tile img {
      opacity: 0;
      transition: opacity .45s ease, transform .4s ease;
    }
    .tile img.is-loaded {
      opacity: 1;
    }
    .tile:not(.tile-empty-wrap)::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(100deg,
          rgba(255, 255, 255, .04) 30%,
          rgba(255, 255, 255, .12) 50%,
          rgba(255, 255, 255, .04) 70%);
      background-size: 200% 100%;
      animation: tileShimmer 1.4s linear infinite;
    }
    .tile.is-ready::before {
      display: none;
    }
    .section-cta {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 12px;
      margin-top: 22px;
      padding-top: 20px;
      border-top: 1px solid rgba(0, 25, 41, .1);
    }
    .section-cta p {
      margin: 0;
      flex: 1 1 240px;
      font-size: .95rem;
      font-weight: 600;
      color: var(--main-blau);
    }
    .pf-btn,
    .pf-btn-wa {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 14px 24px;
      border-radius: 100px;
      font-weight: 700;
      font-size: .98rem;
      white-space: nowrap;
      text-decoration: none;
      cursor: pointer;
      transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease, color .25s ease
    }
    .pf-btn {
      background: var(--main-blau);
      color: #fff;
      box-shadow: 0 8px 20px rgba(0, 61, 88, .28)
    }
    .pf-btn-wa {
      background: #fff;
      color: var(--main-blau);
      border: 1px solid rgba(0, 25, 41, .14);
    }
    .pf-btn-wa svg {
      width: 17px;
      height: 17px;
      flex: 0 0 auto;
    }
    @media (max-width: 720px) {
      .section-cta {
        flex-direction: column;
        align-items: stretch;
      }
      .section-cta p {
        flex: 0 0 auto;
        margin-bottom: 4px;
      }
      .section-cta .pf-btn,
      .section-cta .pf-btn-wa {
        justify-content: center;
      }
    }
    @media (hover: hover) and (pointer: fine) {
      .cat-chip:hover {
        background: var(--akzent);
        color: var(--dark-blau);
        border-color: var(--akzent);
      }
      .pf-mehr:hover {
        color: var(--main-blau);
      }
      .pf-mehr:hover::after {
        transform: translateX(4px);
      }
      .tile:hover img {
        transform: scale(1.04);
      }
      .lightbox-close:hover {
        background: rgba(255, 255, 255, .28);
      }
      .pf-btn:hover {
        transform: translateY(-3px);
        box-shadow: 0 14px 30px rgba(0, 61, 88, .38);
        background: var(--dark-blau)
      }
      .pf-btn-wa:hover {
        border-color: #25d366;
        color: #128c45;
      }
      .lbx-close:hover,
      .lbx-nav:hover {
        background: rgba(255, 255, 255, .28);
      }
      .lbx-full:hover {
        background: rgba(255, 255, 255, .28);
      }
      .lbx.is-fullscreen .lbx-close:hover,
      .lbx.is-fullscreen .lbx-full:hover,
      .lbx.is-fullscreen .lbx-nav:hover {
        background: rgba(0, 12, 22, .8);
      }
    }
    .contact-page {
      padding-block: calc(var(--nav-h) + 3rem) clamp(3rem, 6vw, 5rem);
    }
    .page-hero {
      padding-block: calc(var(--nav-h) + 3rem) clamp(2rem, 5vw, 3rem);
      background: var(--hell);
    }
    .scope-note {
      max-width: 760px;
      margin-top: clamp(1.5rem, 3vw, 2rem);
      padding: 18px 20px;
      background: var(--hell);
      border-radius: 16px;
      font-size: .95rem;
      line-height: 1.6;
      color: var(--main-blau);
    }
    .scope-note strong { color: var(--dark-blau); }
    .legal-page {
      padding-block: calc(var(--nav-h) + 2.5rem) clamp(3rem, 6vw, 5rem);
    }
    .legal-content {
      max-width: 760px;
      margin-inline: auto;
    }
    .legal-content h1 {
      font-weight: 900;
      font-size: clamp(2.2rem, 6vw, 3.2rem);
      letter-spacing: -.02em;
      line-height: 1.05;
      color: var(--dark-blau);
      margin-bottom: 1.75rem;
    }
    .legal-content h2 {
      font-weight: 800;
      font-size: 1.15rem;
      color: var(--dark-blau);
      margin: 2.25rem 0 .5rem;
    }
    .legal-content h3 {
      font-weight: 700;
      font-size: 1rem;
      color: var(--dark-blau);
      margin: 1.5rem 0 .35rem;
    }
    .legal-content p {
      font-size: 1rem;
      line-height: 1.7;
      color: var(--main-blau);
      margin-bottom: .75rem;
    }
    .legal-content ul {
      margin: 0 0 .75rem 1.2rem;
      padding: 0;
    }
    .legal-content li {
      font-size: 1rem;
      line-height: 1.7;
      color: var(--main-blau);
      margin-bottom: .3rem;
    }
    .legal-content a {
      color: var(--bluemain-blau-2);
      text-decoration: underline;
    }
    .cookie-table {
      width: 100%;
      border-collapse: collapse;
      margin: .75rem 0 1.5rem;
      font-size: .92rem;
    }
    .cookie-table th,
    .cookie-table td {
      text-align: left;
      padding: 10px 12px;
      border: 1px solid rgba(0, 25, 41, .12);
      color: var(--main-blau);
      line-height: 1.5;
      vertical-align: top;
    }
    .cookie-table th {
      font-weight: 700;
      color: var(--dark-blau);
      background: rgba(125, 206, 242, .12);
    }
    .page-hero {
      padding-block: calc(var(--nav-h) + 3rem) clamp(2.5rem, 5vw, 3.5rem);
      background: var(--hell);
    }
    .page-hero h1 {
      font-weight: 900;
      font-size: clamp(2.6rem, 8vw, 4.6rem);
      line-height: 1;
      letter-spacing: -.02em;
      text-transform: uppercase;
      color: var(--dark-blau);
    }
    .page-hero .dot { color: var(--dark-blau); }
    .page-hero .lead {
      max-width: 48ch;
      margin: 1.25rem 0 0;
      font-size: 1.1rem;
      line-height: 1.6;
      color: var(--main-blau);
    }
    .page-hero .cta-row { margin-top: 1.75rem; }
    .showreel-frame {
      position: relative;
      margin-top: clamp(2rem, 5vw, 3rem);
      aspect-ratio: 16 / 9;
      border-radius: 24px;
      overflow: hidden;
      background: linear-gradient(135deg, var(--main-blau), var(--dark-blau));
      box-shadow: 0 30px 60px rgba(0, 25, 41, .25);
    }
    .showreel-frame video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    button.showreel-frame {
      width: 100%;
      padding: 0;
      border: none;
      font: inherit;
      color: inherit;
      text-align: left;
      cursor: default;
    }
    .showreel-tile.is-live {
      cursor: pointer;
    }
    .showreel-tile img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0;
      transition: opacity .5s ease;
    }
    .showreel-tile img.is-loaded {
      opacity: 1;
    }
    .showreel-tile.is-live .showreel-placeholder {
      z-index: 2;
    }
    .showreel-tile.is-live .showreel-placeholder span {
      display: none;
    }
    .showreel-tile.is-live .showreel-play {
      background: rgba(0, 12, 22, .45);
      -webkit-backdrop-filter: blur(6px);
      backdrop-filter: blur(6px);
      transition: transform .25s ease, background .25s ease;
    }
    .showreel-placeholder {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 16px;
      text-align: center;
    }
    .showreel-play {
      width: 74px;
      height: 74px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .14);
      border: 2px solid rgba(255, 255, 255, .55);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .showreel-play::before {
      content: "";
      width: 0;
      height: 0;
      margin-left: 6px;
      border-left: 22px solid #fff;
      border-top: 13px solid transparent;
      border-bottom: 13px solid transparent;
    }
    .showreel-placeholder span {
      font-size: .82rem;
      letter-spacing: .16em;
      text-transform: uppercase;
      font-weight: 700;
      color: rgba(255, 255, 255, .8);
    }
    .work-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 20px;
    }
    @media (min-width: 700px) { .work-grid { grid-template-columns: repeat(2, 1fr); } }
    .work {
      position: relative;
      display: block;
      aspect-ratio: 16 / 10;
      border-radius: 18px;
      overflow: hidden;
      background: var(--main-blau);
      text-decoration: none;
    }
    .work img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform .4s ease;
    }
    .work-label {
      position: absolute;
      z-index: 2;
      left: 0; right: 0; bottom: 0;
      padding: 18px 20px;
      background: linear-gradient(to top, rgba(0, 25, 41, .88), transparent);
      color: #fff;
    }
    .work-label strong { display: block; font-size: 1.05rem; }
    .work-label span { font-size: .85rem; color: rgba(255, 255, 255, .75); }
    .work-more {
      display: flex;
      justify-content: center;
      margin-top: clamp(1.5rem, 3vw, 2.25rem);
    }
    .fv-logos {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 6px 14px;
      margin-top: clamp(1.5rem, 3vw, 2.25rem);
    }
    .fv-logos-label {
      width: 100%;
      margin: 0 0 4px;
      font-size: .78rem;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--main-blau);
      opacity: .7;
    }
    .fv-logo {
      display: inline-flex;
      align-items: center;
      gap: 14px;
      font-size: .95rem;
      font-weight: 700;
      letter-spacing: .01em;
      color: var(--main-blau);
      opacity: .85;
      white-space: nowrap;
    }
    .fv-logo:not(:last-child)::after {
      content: '';
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--main-blau);
      opacity: .35;
    }
    #lightbox {
      display: none !important;
    }
    .fv-why {
      display: grid;
      gap: 18px;
      grid-template-columns: 1fr;
      margin-top: clamp(1.5rem, 3vw, 2.25rem);
    }
    @media (min-width: 760px) {
      .fv-why {
        grid-template-columns: repeat(3, 1fr);
      }
    }
    .fv-why-item {
      padding: 24px;
      border-radius: 18px;
      background: #fff;
      border: 1px solid rgba(0, 25, 41, .09);
    }
    .fv-why-item h3 {
      margin: 0 0 8px;
      font-size: 1.08rem;
      color: var(--dark-blau);
    }
    .fv-why-item p {
      margin: 0;
      font-size: .95rem;
      line-height: 1.6;
      color: var(--main-blau);
    }
    .angebot-card-content {
      grid-template-areas: "icon title" "desc desc" "price price";
    }
    .angebot-card-content > .fv-price {
      grid-area: price;
      margin: 0;
      padding-top: 14px;
      border-top: 1px solid rgba(0, 25, 41, .09);
      font-size: 1.05rem;
      font-weight: 800;
      color: var(--dark-blau);
    }
    .angebot-card-content > .fv-price span {
      font-size: .88rem;
      font-weight: 500;
      color: var(--main-blau);
      opacity: .75;
    }
    .fv-faq {
      margin-top: clamp(1.5rem, 3vw, 2.25rem);
      border-top: 1px solid rgba(0, 25, 41, .1);
    }
    .fv-faq-item {
      border-bottom: 1px solid rgba(0, 25, 41, .1);
    }
    .fv-faq-item summary {
      cursor: pointer;
      list-style: none;
      padding: 18px 40px 18px 0;
      position: relative;
      font-weight: 700;
      color: var(--dark-blau);
    }
    .fv-faq-item summary::-webkit-details-marker {
      display: none;
    }
    .fv-faq-item summary::before,
    .fv-faq-item summary::after {
      content: '';
      position: absolute;
      right: 6px;
      top: 50%;
      width: 16px;
      height: 2px;
      border-radius: 2px;
      background: var(--main-blau);
      transition: transform .35s cubic-bezier(.22, .61, .36, 1);
    }
    .fv-faq-item summary::before {
      transform: translateY(-50%);
    }
    .fv-faq-item summary::after {
      transform: translateY(-50%) rotate(90deg);
    }
    .fv-faq-item[open] summary::before {
      transform: translateY(-50%) rotate(180deg);
    }
    .fv-faq-item[open] summary::after {
      transform: translateY(-50%) rotate(180deg);
    }
    @media (prefers-reduced-motion: reduce) {
      .fv-faq-item summary::before,
      .fv-faq-item summary::after {
        transition: none;
      }
    }
    .fv-faq-item summary:focus-visible {
      outline: 2px solid var(--akzent);
      outline-offset: 2px;
    }
    .fv-faq-item p {
      margin: 0 0 20px;
      max-width: 70ch;
      line-height: 1.65;
      color: var(--main-blau);
    }
    .work img {
      opacity: 0;
      transition: opacity .45s ease, transform .4s ease;
    }
    .work img.is-loaded {
      opacity: 1;
    }
    .work::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(100deg,
          rgba(255, 255, 255, .04) 30%,
          rgba(255, 255, 255, .12) 50%,
          rgba(255, 255, 255, .04) 70%);
      background-size: 200% 100%;
      animation: tileShimmer 1.4s linear infinite;
    }
    .work.is-ready::before {
      display: none;
    }
    @keyframes tileShimmer {
      to {
        background-position: -200% 0;
      }
    }
    .tile-loop {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0;
      transition: opacity .45s ease;
      pointer-events: none;
      z-index: 1;
    }
    .tile-loop.is-playing {
      opacity: 1;
    }
    .lbx {
      position: fixed;
      inset: 0;
      z-index: 2100;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: clamp(1rem, 4vw, 3rem);
      background: rgba(0, 12, 22, .9);
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px);
    }
    .lbx[hidden] {
      display: none;
    }
    .lbx:focus {
      outline: none;
    }
    .lbx-muted-hint {
      position: absolute;
      z-index: 3;
      left: 50%;
      top: 20px;
      transform: translateX(-50%);
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 0;
      padding: 9px 16px;
      border-radius: 100px;
      background: rgba(0, 12, 22, .72);
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px);
      color: #fff;
      font-size: .82rem;
      font-weight: 700;
      white-space: nowrap;
      pointer-events: none;
      animation: lbxHintOut .4s ease 6s forwards;
    }
    .lbx-muted-hint[hidden] {
      display: none;
    }
    .lbx-muted-hint svg {
      width: 16px;
      height: 16px;
      flex: 0 0 auto;
    }
    @keyframes lbxHintOut {
      to {
        opacity: 0;
        visibility: hidden;
      }
    }
    .lbx.is-fullscreen .lbx-muted-hint {
      top: 76px;
    }
    .lbx {
      overflow: hidden;
      overscroll-behavior: contain;
      touch-action: none;
    }
    body.lbx-lock {
      position: fixed;
      top: var(--lbx-top, 0px);
      left: 0;
      right: 0;
      width: 100%;
      overflow: hidden;
      overscroll-behavior: none;
    }
    .lbx-figure {
      position: relative;
      z-index: 1;
      margin: 0;
      max-width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
    }
    .lbx-stage {
      position: relative;
      border-radius: 14px;
      overflow: hidden;
      background: rgba(255, 255, 255, .06);
      box-shadow: 0 40px 80px rgba(0, 0, 0, .5);
      line-height: 0;
    }
    .lbx-stage.is-video {
      width: min(1100px, 92vw, 138vh);
      aspect-ratio: 16 / 9;
    }
    .lbx-stage.is-video iframe {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border: 0;
    }
    .lbx-stage.is-photo {
      width: auto;
    }
    .lbx-stage.is-photo img {
      display: block;
      max-width: min(1100px, 92vw);
      max-height: 78vh;
      width: auto;
      height: auto;
    }
    .lbx-stage.is-video img,
    .lbx-stage.is-photo iframe {
      display: none;
    }
    .lbx-caption {
      margin: 0;
      color: rgba(255, 255, 255, .88);
      font-size: .95rem;
      font-weight: 700;
      text-align: center;
      max-width: 60ch;
    }
    .lbx-count {
      color: rgba(255, 255, 255, .5);
      font-size: .78rem;
      font-weight: 700;
      letter-spacing: .08em;
    }
    .lbx-close,
    .lbx-nav {
      position: absolute;
      z-index: 3;
      border: none;
      border-radius: 50%;
      background: rgba(255, 255, 255, .14);
      color: #fff;
      cursor: pointer;
      line-height: 1;
      transition: background .2s ease, opacity .2s ease;
    }
    .lbx-close {
      top: 20px;
      right: 24px;
      width: 46px;
      height: 46px;
      font-size: 1.8rem;
    }
    .lbx-nav {
      top: 50%;
      transform: translateY(-50%);
      width: 52px;
      height: 52px;
      display: grid;
      place-items: center;
    }
    .lbx-nav svg {
      width: 22px;
      height: 22px;
    }
    .lbx-prev {
      left: clamp(.5rem, 2vw, 2rem);
    }
    .lbx-next {
      right: clamp(.5rem, 2vw, 2rem);
    }
    .lbx-nav:disabled {
      opacity: .22;
      cursor: default;
      pointer-events: none;
    }
    .lbx-close:focus-visible,
    .lbx-nav:focus-visible {
      outline: 2px solid var(--akzent);
      outline-offset: 3px;
    }
    @media (max-width: 600px) {
      .lbx-nav {
        top: auto;
        bottom: 12px;
        transform: none;
        width: 46px;
        height: 46px;
      }
      .lbx-stage.is-photo img {
        max-height: 62vh;
      }
      .lbx-figure {
        padding-bottom: 56px;
      }
    }
    .lbx-full {
      position: absolute;
      z-index: 3;
      top: 20px;
      right: 82px;
      width: 46px;
      height: 46px;
      display: grid;
      place-items: center;
      border: none;
      border-radius: 50%;
      background: rgba(255, 255, 255, .14);
      color: #fff;
      cursor: pointer;
      transition: background .2s ease;
    }
    .lbx-full:focus-visible {
      outline: 2px solid var(--akzent);
      outline-offset: 3px;
    }
    .lbx-full svg {
      width: 20px;
      height: 20px;
      grid-area: 1 / 1;
    }
    .lbx-full .icon-collapse,
    .lbx.is-fullscreen .lbx-full .icon-expand {
      display: none;
    }
    .lbx.is-fullscreen .lbx-full .icon-collapse {
      display: block;
    }
    .lbx.mode-video .lbx-full {
      display: none;
    }
    .lbx-stage.is-photo img {
      transform-origin: center center;
      cursor: default;
      touch-action: none;
      transition: transform .25s ease;
      will-change: transform;
    }
    .lbx.is-fullscreen .lbx-stage.is-photo img {
      cursor: zoom-in;
    }
    .lbx.is-fullscreen .lbx-stage.is-zoomed img {
      cursor: grab;
    }
    .lbx-stage.is-dragging img {
      cursor: grabbing;
      transition: none;
    }
    .lbx.is-fullscreen {
      padding: 0;
      background: #000;
    }
    .lbx.is-fullscreen .lbx-figure {
      width: 100%;
      height: 100%;
      justify-content: center;
      gap: 0;
      padding-bottom: 0;
    }
    .lbx.is-fullscreen .lbx-stage {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 0;
      box-shadow: none;
      background: #000;
    }
    .lbx.is-fullscreen .lbx-stage.is-photo img {
      max-width: 100vw;
      max-height: 100vh;
      max-height: 100dvh;
      width: auto;
      height: auto;
    }
    @media (max-width: 600px) {
      .lbx.is-fullscreen .lbx-stage.is-photo img {
        max-height: 100vh;
        max-height: 100dvh;
      }
      .lbx.is-fullscreen .lbx-figure {
        padding-bottom: 0;
      }
    }
    .lbx.is-fullscreen .lbx-close,
    .lbx.is-fullscreen .lbx-full,
    .lbx.is-fullscreen .lbx-nav {
      background: rgba(0, 12, 22, .55);
      -webkit-backdrop-filter: blur(6px);
      backdrop-filter: blur(6px);
      box-shadow: 0 2px 14px rgba(0, 0, 0, .5);
    }
    .lbx.is-fullscreen .lbx-caption,
    .lbx.is-fullscreen .lbx-count {
      display: none;
    }
    .lbx.is-fullscreen .lbx-nav {
      top: 50%;
      bottom: auto;
      transform: translateY(-50%);
    }
    button.work {
      width: 100%;
      padding: 0;
      border: none;
      font: inherit;
      color: inherit;
      cursor: pointer;
      text-align: left;
    }
    .work:focus-visible {
      outline: 3px solid var(--akzent);
      outline-offset: 3px;
    }
    .fv-faq-body {
      overflow: hidden;
      height: 0;
      transition: height .3s cubic-bezier(.22, .61, .36, 1);
    }
    @media (prefers-reduced-motion: reduce) {
      .fv-faq-body {
        transition: none;
      }
    }
    @media (hover: hover) and (pointer: fine) {
      .work:hover img {
        transform: scale(1.04);
      }
      .showreel-tile.is-live:hover .showreel-play {
        transform: scale(1.08);
        background: rgba(0, 12, 22, .65);
      }
      .fv-faq-item summary:hover::before,
      .fv-faq-item summary:hover::after {
        background: var(--dark-blau);
      }
      .lbx-close:hover,
      .lbx-nav:hover,
      .lbx-full:hover {
        background: rgba(255, 255, 255, .28);
      }
      .lbx.is-fullscreen .lbx-close:hover,
      .lbx.is-fullscreen .lbx-full:hover,
      .lbx.is-fullscreen .lbx-nav:hover {
        background: rgba(0, 12, 22, .8);
      }
    }
.cf-gate {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 18px;
  box-sizing: border-box;
  text-align: center;
  background: #00293d;
  color: rgba(255, 255, 255, .78)
}
.cf-gate p {
  margin: 0;
  max-width: 34ch;
  font-size: .78rem;
  line-height: 1.5
}
.cf-gate strong {
  display: block;
  margin-bottom: 4px;
  font-size: .92rem;
  font-weight: 700;
  color: #fff
}
.cf-gate-btn {
  padding: 9px 18px;
  border: none;
  border-radius: 100px;
  background: var(--akzent);
  color: var(--dark-blau);
  font-family: inherit;
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer
}
.cf-gate-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px
}
.cf-gate.is-large p {
  max-width: 46ch;
  font-size: .95rem
}
.cf-gate.is-large strong {
  font-size: 1.25rem
}
.cf-gate.is-large .cf-gate-btn {
  padding: 13px 26px;
  font-size: .92rem
}
.lbx-stage.is-blocked {
  position: relative;
  width: min(900px, 92vw);
  aspect-ratio: 16/9
}
.lbx-stage.is-blocked img,
.lbx-stage.is-blocked iframe {
  display: none
}
.footer .legal .legal-btn {
  padding: 0;
  border: none;
  background: none;
  font-family: inherit;
  font-size: .9rem;
  color: rgba(255, 255, 255, .7);
  cursor: pointer
}
.footer .legal .legal-btn:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 3px
}
.cf-ask {
  position: fixed;
  inset: 0;
  z-index: 2200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
  background: rgba(0, 12, 22, .72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .2s ease
}
.cf-ask.is-open {
  opacity: 1
}
.cf-ask-box {
  width: 100%;
  max-width: 460px;
  padding: 28px;
  box-sizing: border-box;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 30px 70px rgba(0, 25, 41, .4);
  transform: translateY(12px) scale(.98);
  transition: transform .25s cubic-bezier(.22, .61, .36, 1)
}
.cf-ask.is-open .cf-ask-box {
  transform: none
}
.cf-ask-box h2 {
  margin: 0 0 10px;
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--dark-blau)
}
.cf-ask-box p {
  margin: 0 0 10px;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--main-blau)
}
.cf-ask-note {
  font-size: .84rem !important;
  opacity: .75
}
.cf-ask-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px
}
.cf-ask-btn {
  flex: 1 1 auto;
  padding: 13px 22px;
  border-radius: 100px;
  border: none;
  font-family: inherit;
  font-size: .92rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s ease, color .2s ease
}
.cf-ask-yes {
  background: var(--dark-blau);
  color: #fff
}
.cf-ask-no {
  flex: 0 0 auto;
  background: transparent;
  color: var(--main-blau);
  border: 1px solid rgba(0, 25, 41, .18)
}
.cf-ask-btn:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 3px
}
@media (hover:hover) and (pointer:fine) {
  .cf-ask-yes:hover {
    background: var(--akzent);
    color: var(--dark-blau)
  }
  .cf-ask-no:hover {
    background: rgba(0, 25, 41, .06)
  }
}
@media (max-width:600px) {
  .cf-ask-box {
    padding: 22px
  }
  .cf-ask-actions {
    flex-direction: column
  }
  .cf-ask-btn {
    width: 100%
  }
}
@media (prefers-reduced-motion:reduce) {
  .cf-ask,
  .cf-ask-box {
    transition: none
  }
}
.vc-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  z-index: 2500;
  pointer-events: none;
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%)
}
.vc-progress span {
  display: block;
  height: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--main-blau), var(--bluemain-blau-2) 55%, var(--akzent));
  box-shadow: 0 0 12px rgba(125, 206, 242, .55)
}
.vc-split .vc-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(.34em) scale(.985);
  filter: blur(4px);
  transition: opacity 1.4s cubic-bezier(.16, 1, .3, 1), transform 1.5s cubic-bezier(.16, 1, .3, 1), filter 1.2s cubic-bezier(.16, 1, .3, 1);
  transition-delay: calc(var(--i, 0) * .1s);
  will-change: transform, opacity, filter
}
.vc-split.is-shown .vc-word {
  opacity: 1;
  transform: none;
  filter: blur(0)
}
.vc-split.is-shown {
  will-change: auto
}
.vc-clip {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1s cubic-bezier(.22, .61, .36, 1)
}
.vc-clip.is-shown {
  clip-path: inset(0 0 0 0)
}
.vc-clip img {
  transform: scale(1.12);
  transition: transform 1.4s cubic-bezier(.22, .61, .36, 1)
}
.vc-clip.is-shown img {
  transform: none
}
.vc-draw .line {
  position: relative;
  overflow: hidden
}
.vc-draw .line::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: scaleY(var(--fill, 0));
  transform-origin: 50% 0;
  background: linear-gradient(180deg, var(--main-blau), var(--akzent))
}
.vc-draw .num {
  position: relative;
  z-index: 1
}
.vc-draw .num::before {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2px solid var(--akzent);
  opacity: 0;
  transform: scale(.75);
  transition: opacity .35s ease, transform .45s cubic-bezier(.34, 1.4, .5, 1)
}
.vc-draw.is-active .num::before {
  opacity: 1;
  transform: none
}
.vc-draw .num {
  transform: scale(.6);
  opacity: 0;
  transition: transform .5s cubic-bezier(.34, 1.4, .5, 1), opacity .4s ease
}
.vc-draw.is-drawn .num {
  transform: none;
  opacity: 1
}
.vc-tilt {
  transform-style: preserve-3d;
  transition: transform .18s cubic-bezier(.22, .61, .36, 1), box-shadow .35s ease, border-color .35s ease;
  position: relative
}
.proj-link {
  perspective: 1100px
}
.vc-tilt::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s ease;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(125, 206, 242, .16), transparent 60%)
}
@media (prefers-reduced-motion:reduce) {
  .vc-progress {
    display: none
  }
  .vc-split .vc-word,
  .vc-clip,
  .vc-clip img,
  .vc-draw .line,
  .vc-draw .num,
  .vc-tilt {
    opacity: 1;
    filter: none;
    clip-path: none;
    transform: none;
    transition: none
  }
}
.card-more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(0, 25, 41, .09);
  width: 100%;
  font-size: .88rem;
  font-weight: 700;
  color: var(--dark-blau);
  text-decoration: none
}
.card-more span {
  transition: transform .25s cubic-bezier(.22, .61, .36, 1)
}
@media (hover:hover) and (pointer:fine) {
  .card-more:hover {
    color: var(--bluemain-blau-2)
  }
  .card-more:hover span {
    transform: translateX(4px)
  }
}
.card-more:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 3px;
  border-radius: 4px
}
@media (prefers-reduced-motion:reduce) {
  .card-more span {
    transition: none
  }
}html {
  scrollbar-width: thin;
  scrollbar-color: var(--bluemain-blau-2) rgba(0, 25, 41, .06)
}
::-webkit-scrollbar {
  width: 14px;
  height: 14px
}
::-webkit-scrollbar-track {
  background: linear-gradient(180deg, rgba(0, 25, 41, .03), rgba(0, 25, 41, .07));
  border-left: 1px solid rgba(0, 25, 41, .05)
}
::-webkit-scrollbar-thumb {
  border-radius: 100px;
  border: 4px solid transparent;
  background-clip: content-box;
  background-color: var(--bluemain-blau-2);
  background-image: linear-gradient(180deg, var(--main-blau), var(--bluemain-blau-2) 55%, var(--akzent));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
  min-height: 56px
}
::-webkit-scrollbar-thumb:hover {
  border-width: 3px;
  background-image: linear-gradient(180deg, var(--dark-blau), var(--main-blau) 55%, var(--bluemain-blau-2))
}
::-webkit-scrollbar-thumb:active {
  border-width: 2px;
  background-image: linear-gradient(180deg, var(--dark-blau), var(--dark-blau))
}
::-webkit-scrollbar-button {
  display: none;
  height: 0;
  width: 0
}
::-webkit-scrollbar-corner {
  background: transparent
}
.section--dark ::-webkit-scrollbar-track,
.lbx ::-webkit-scrollbar-track,
.footer ::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, .06);
  border-left-color: rgba(255, 255, 255, .08)
}
.section--dark ::-webkit-scrollbar-thumb,
.lbx ::-webkit-scrollbar-thumb,
.footer ::-webkit-scrollbar-thumb {
  background-color: var(--akzent);
  background-image: linear-gradient(180deg, #fff, var(--akzent) 60%, var(--bluemain-blau-2));
  box-shadow: inset 0 0 0 1px rgba(0, 25, 41, .18)
}
.section--dark,
.lbx,
.footer {
  scrollbar-color: var(--akzent) rgba(255, 255, 255, .06)
}
@media (min-width:860px) {
  
  .angebot-card {
    flex: 1 1 calc(50% - 12px);
    max-width: calc(50% - 12px)
  }
}
.cat-bar-scroll::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0
}
.cat-bar-scroll {
  scrollbar-width: none
}
@media (hover:hover) and (pointer:fine) {
  .dropdown a:hover {
    background: rgb(125, 207, 242)
  }
  .btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(0, 61, 88, .38);
    background: var(--dark-blau)
  }
  .btn-ghost:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(0, 25, 41, .14);
    background: var(--hell);
    color: var(--dark-blau)
  }
  .angebot-card:hover {
    transform: translateY(-3px);
    border-color: var(--akzent);
    box-shadow: 0 14px 30px rgba(0, 25, 41, .10)
  }
  .proj-link:hover .proj {
    transform: translateY(-3px);
    border-color: var(--akzent);
    box-shadow: 0 14px 30px rgba(0, 25, 41, .10)
  }
  .proj-link:hover .visit {
    gap: 12px;
    color: var(--dark-blau)
  }
  .section--dark .btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, .25)
  }
  .plan:hover {
    transform: translateY(-3px);
    border-color: var(--akzent);
    box-shadow: 0 14px 30px rgba(0, 25, 41, .10)
  }
  .plan-btn.ghost:hover {
    transform: translateY(-2px);
    background: #d8eefb
  }
  .plan-btn.solid:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(0, 0, 0, .25)
  }
  .plan-btn.line:hover {
    transform: translateY(-2px);
    background: var(--dark-blau)
  }
  .send:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(0, 61, 88, .38);
    background: var(--dark-blau)
  }
  a.drow:hover {
    transform: translateY(-3px);
    border-color: var(--akzent);
    box-shadow: 0 12px 26px rgba(0, 25, 41, .10)
  }
  .footer .col a:hover {
    color: #fff
  }
  .footer .social a:hover {
    background: rgba(125, 206, 242, .22);
    transform: translateY(-2px)
  }
  .footer .legal a:hover {
    color: #fff
  }
  .plan.feat:hover {
    animation-play-state: paused
  }
  .testi-toggle:hover {
    text-decoration: underline;
  }
  .testi-card:hover {
    border-color: var(--akzent);
    box-shadow: 0 14px 30px rgba(0, 25, 41, .10)
  }
  .testi-lightbox-close:hover {
    background: #d5ebf9;
    transform: scale(1.05);
  }
  .legal-content a:hover { color: var(--dark-blau); }
  .legal-content a:hover {
        color: var(--dark-blau);
      }
  .footer .legal .legal-btn:hover {
    color: #fff
  }
  .vc-tilt:hover::after {
    opacity: 1
  }
}
@media (hover:hover) and (pointer:fine) and (max-width:900px) {
  .dropdown a:hover {
      background: none
    }
}
@media (hover:hover) and (pointer:fine) and (min-width:901px) {
  .nav-links>ul>li>a:hover,
    .nav-links>ul>li>.dropdown-toggle:hover {
      color: var(--bluemain-blau-2);
      transform: translateY(-1px)
    }
}
.hero-fx {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none
}
.hero-flow {
  position: absolute;
  inset: -30% -20%;
  background:
    linear-gradient(115deg,
      rgba(125, 206, 242, 0) 18%,
      rgba(125, 206, 242, .55) 38%,
      rgba(0, 100, 141, .30) 52%,
      rgba(188, 230, 247, .60) 66%,
      rgba(125, 206, 242, 0) 84%);
  filter: blur(34px);
  transform: translate3d(calc(var(--hero-p, 0) * -14%), calc(var(--hero-p, 0) * 40px), 0);
  animation: heroFlow 22s linear infinite
}
.hero-wave {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 200%;
  height: clamp(180px, 38vh, 420px)
}
.hero-wave svg {
  width: 100%;
  height: 100%;
  display: block
}
.hero-wave-1 {
  opacity: .30;
  color: var(--akzent);
  transform: translate3d(0, calc(var(--hero-p, 0) * 90px), 0);
  animation: heroWave 19s linear infinite
}
.hero-wave-2 {
  opacity: .22;
  color: var(--bluemain-blau-2);
  height: clamp(150px, 30vh, 340px);
  transform: translate3d(0, calc(var(--hero-p, 0) * 150px), 0);
  animation: heroWave 27s linear infinite reverse
}
.hero-wave-3 {
  opacity: .14;
  color: var(--main-blau);
  height: clamp(120px, 24vh, 280px);
  transform: translate3d(0, calc(var(--hero-p, 0) * 220px), 0);
  animation: heroWave 36s linear infinite
}
.hero-edge {
  bottom: -1px;
  height: clamp(64px, 9vh, 130px);
  color: var(--ton-1);
  opacity: 1;
  z-index: 2;
  animation: heroWave 31s linear infinite reverse
}
header {
  overflow: hidden
}
@keyframes heroWave {
  from {
    translate: 0 0
  }
  to {
    translate: -50% 0
  }
}
@keyframes heroFlow {
  0% {
    background-position: 0% 50%
  }
  100% {
    background-position: 200% 50%
  }
}
header > .blob,
header > .bokeh {
  z-index: 1
}
header > .blob {
  opacity: .28
}
header > .header-text {
  position: relative;
  z-index: 3
}
@media (prefers-reduced-motion:reduce) {
  .hero-flow,
  .hero-wave-1,
  .hero-wave-2,
  .hero-wave-3 {
    animation: none;
    transform: none
  }
}
.hero-vektor {
  position: absolute;
  right: max(var(--nav-x), calc((100% - var(--content-max)) / 2));
  bottom: 0;
  width: auto;
  height: clamp(360px, 82%, 900px);
  max-width: none;
  opacity: 1;
  transform-origin: 100% 100%;
  transform:
    translate3d(0, calc(var(--hero-p, 0) * 120px), 0)
    scale(calc(1 + var(--hero-p, 0) * .1));
  -webkit-mask-image:
    linear-gradient(180deg, #000 58%, rgba(0, 0, 0, .35) 84%, transparent 97%),
    linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .55) 22%, #000 46%);
  mask-image:
    linear-gradient(180deg, #000 58%, rgba(0, 0, 0, .35) 84%, transparent 97%),
    linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .55) 22%, #000 46%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  pointer-events: none
}
@media (min-width:1100px) {
  .hero-vektor {
    height: clamp(460px, 88%, 1000px)
  }
}
@media (min-width:769px) and (max-width:1099px) {
  .hero-vektor {
    right: max(-160px, -14vw);
    -webkit-mask-image:
      linear-gradient(180deg, #000 58%, rgba(0, 0, 0, .35) 84%, transparent 97%),
      linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .4) 30%, #000 58%);
    mask-image:
      linear-gradient(180deg, #000 58%, rgba(0, 0, 0, .35) 84%, transparent 97%),
      linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .4) 30%, #000 58%)
  }
}
@media (max-width:768px) {
  header {
    justify-content: flex-start;
    padding-block: calc(var(--nav-h) + 1.75rem) clamp(3rem, 12vw, 5rem)
  }
  .header-text {
    margin-top: 0
  }
  .hero-vektor {
    right: auto;
    left: 50%;
    height: min(clamp(380px, 118vw, 760px), 54%);
    transform-origin: 50% 100%;
    transform:
      translate3d(-50%, calc(var(--hero-p, 0) * 120px), 0)
      scale(calc(1 + var(--hero-p, 0) * .1));
    -webkit-mask-image: linear-gradient(180deg, #000 58%, rgba(0, 0, 0, .35) 84%, transparent 97%);
    mask-image: linear-gradient(180deg, #000 58%, rgba(0, 0, 0, .35) 84%, transparent 97%);
    -webkit-mask-composite: source-over;
    mask-composite: add
  }
  
  .hero-wave {
    height: min(clamp(200px, 58vw, 400px), 30%)
  }
  .hero-wave-2 {
    height: min(clamp(165px, 47vw, 330px), 25%)
  }
  .hero-wave-3 {
    height: min(clamp(135px, 38vw, 270px), 20%)
  }
  
  .hero-edge {
    height: clamp(48px, 14vw, 96px)
  }
}
@media (prefers-reduced-motion:reduce) {
  .hero-vektor {
    transform: none
  }
}
@media (prefers-reduced-motion:reduce) and (max-width:768px) {
  .hero-vektor {
    transform: translateX(-50%)
  }
}
.has-edge {
  position: relative;
  overflow: hidden;
  padding-top: calc(clamp(52px, 7vh, 110px) + clamp(1.5rem, 4vw, 3rem))
}
.sec-edge svg {
  width: 100%;
  height: 100%;
  display: block
}
.sec-edge {
  position: absolute;
  left: 0;
  top: -1px;
  bottom: auto;
  width: 200%;
  height: clamp(52px, 7vh, 110px);
  color: var(--kante-farbe, #fff);
  opacity: 1;
  z-index: 1;
  transform: scaleY(-1);
  transform-origin: 50% 50%;
  animation: heroWave 34s linear infinite
}
.has-edge > *:not(.sec-edge):not(.ablauf-media) {
  position: relative;
  z-index: 2
}
@media (max-width:768px) {
  .sec-edge {
    height: clamp(38px, 11vw, 80px)
  }
}
@media (prefers-reduced-motion:reduce) {
  .sec-edge {
    animation: none
  }
}
.bokeh {
  transform: translate3d(0, calc(var(--hero-p, 0) * -140px), 0);
  will-change: transform
}
@media (prefers-reduced-motion:reduce) {
  .bokeh {
    transform: none
  }
}
.hero-in {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translate3d(0, 14%, 0);
  animation: heroAuf 3.2s cubic-bezier(.19, 1, .22, 1) both
}
.hero-in-5 {
  transform: translate3d(0, 7%, 0)
}
@keyframes heroAuf {
  to {
    opacity: 1;
    transform: none
  }
}
.hero-in-1 { animation-delay: calc(var(--vorhang) + .2s) }
.hero-in-2 { animation-delay: calc(var(--vorhang) + .65s) }
.hero-in-3 { animation-delay: calc(var(--vorhang) + 1.1s) }
.hero-in-4 { animation-delay: calc(var(--vorhang) + 1.55s) }
.hero-in-5 { animation-delay: calc(var(--vorhang) + 2s) }
@media (prefers-reduced-motion:reduce) {
  .hero-in {
    animation: none;
    opacity: 1;
    transform: none
  }
}
.hero-in-kante {
  inset: auto 0 0 0;
  height: clamp(64px, 9vh, 130px);
  z-index: 2;
  pointer-events: none;
  animation: none;
  opacity: 1;
  transform: none
}
@media (max-width:768px) {
  .hero-in-kante {
    height: clamp(48px, 14vw, 96px)
  }
}
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth
  }
}
@view-transition {
  navigation: auto
}
nav#siteNav {
  view-transition-name: sitenav
}
::view-transition-old(sitenav),
::view-transition-new(sitenav) {
  animation: none;
  mix-blend-mode: normal
}
.footer {
  view-transition-name: sitefooter
}
::view-transition-old(sitefooter),
::view-transition-new(sitefooter) {
  animation: none;
  mix-blend-mode: normal
}
::view-transition-old(root) {
  animation: seiteRaus .32s cubic-bezier(.4, 0, 1, 1) both
}
::view-transition-new(root) {
  animation: seiteRein .5s cubic-bezier(.19, 1, .22, 1) both
}
@keyframes seiteRaus {
  to {
    opacity: 0;
    transform: translateY(-10px)
  }
}
@keyframes seiteRein {
  from {
    opacity: 0;
    transform: translateY(14px)
  }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none
  }
}
.sr-fly {
  --sr: 0;
  opacity: calc(.25 + var(--sr) * .75);
  transform-origin: 50% 100%;
  transform:
    perspective(1400px)
    translate3d(0, calc((1 - var(--sr)) * 90px), 0)
    rotateX(calc((1 - var(--sr)) * 16deg))
    scale(calc(.94 + var(--sr) * .06))
}
@media (prefers-reduced-motion: reduce) {
  .sr-fly {
    opacity: 1;
    transform: none
  }
}
.sa {
  --p: 0;
  opacity: calc(.3 + var(--p) * .7);
  transform:
    translate3d(0, calc((1 - var(--p)) * 34px), 0)
    scale(calc(.975 + var(--p) * .025))
}
.sa:is(h2, h3, .eyebrow, .lead) {
  transform: translate3d(0, calc((1 - var(--p)) * 18px), 0)
}
.sa:is(.angebot-card, .plan, .proj, .tile, .work, .testi-card) {
  transform-origin: 50% 100%;
  transform:
    perspective(1200px)
    translate3d(0, calc((1 - var(--p)) * 40px), 0)
    rotateX(calc((1 - var(--p)) * 4.5deg))
    scale(calc(.97 + var(--p) * .03))
}
#ablauf .sa.step {
  transform:
    translate3d(calc((1 - var(--p)) * -18px), calc((1 - var(--p)) * 30px), 0)
}
@media (prefers-reduced-motion: reduce) {
  .sa {
    opacity: 1;
    transform: none
  }
}
.vorhang {
  --vorhang: 1.75s
}
.vorhang body::before,
.vorhang body::after {
  content: "";
  position: fixed;
  /* ueber allem, auch ueber dem Cookiebot-Dialog (2147483631).
     pointer-events: none laesst Klicks trotzdem durch. */
  z-index: 2147483647;
  pointer-events: none
}
.vorhang body::before {
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 42%, rgba(125, 206, 242, .22), transparent 62%),
    rgba(0, 25, 41, .82);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  backdrop-filter: blur(22px) saturate(140%);
  transform-origin: 50% 100%;
  animation: vorhangHoch 1.15s 1.45s cubic-bezier(.76, 0, .24, 1) both
}
.vorhang body::after {
  top: 50%;
  left: 50%;
  width: min(230px, 54vw);
  aspect-ratio: 180 / 20;
  transform: translate(-50%, -50%);
  background: url("../img/Logo.svg") center/contain no-repeat;
  animation: markeAuf 2.1s cubic-bezier(.19, 1, .22, 1) both
}
@keyframes vorhangHoch {
  0% {
    clip-path: inset(0 0 0 0)
  }
  100% {
    clip-path: inset(0 0 100% 0);
    visibility: hidden
  }
}
@keyframes markeAuf {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) translateY(14px) scale(.97);
    filter: blur(6px)
  }
  26% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    filter: blur(0)
  }
  62% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    filter: blur(0)
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) translateY(-26px) scale(1.02);
    filter: blur(3px);
    visibility: hidden
  }
}
@media (prefers-reduced-motion: reduce) {
  .vorhang body::before,
  .vorhang body::after {
    display: none
  }
  
  .vorhang {
    --vorhang: 0s
  }
}
nav {
  transition: background .35s ease, border-color .35s ease, box-shadow .35s ease
}
nav.nav-dunkel {
  background: rgba(0, 25, 41, .55);
  border-bottom-color: rgba(255, 255, 255, .12);
  box-shadow: 0 4px 20px rgba(0, 0, 0, .25)
}
nav.nav-dunkel .nav-logo .logo {
  background-color: #fff
}
nav.nav-dunkel .nav-links a,
nav.nav-dunkel .dropdown-toggle {
  color: #fff
}
nav.nav-dunkel .nav-toggle span {
  background: #fff
}
@media (hover: hover) and (pointer: fine) {
  nav.nav-dunkel .nav-links>ul>li>a:hover,
  nav.nav-dunkel .nav-links>ul>li>.dropdown-toggle:hover {
    color: var(--akzent)
  }
}
@media (max-width: 900px) {
  nav.nav-dunkel.open {
    background: rgba(0, 25, 41, .92)
  }
}
.page-hero .sec-edge.sec-edge-unten {
  top: auto;
  bottom: -1px;
  transform: none
}
.honeypot {
  display: none
}
body.kein-scroll {
  overflow: hidden
}
.anim-aus,
.anim-aus * {
  animation: none !important
}
.carousell.is-paused .group,
header.is-paused .blob,
header.is-paused .bokeh span,
header.is-paused .hero-flow,
header.is-paused .hero-wave,
.is-paused > .sec-edge,
.plan.is-paused.feat {
  animation-play-state: paused
}
.lbx-stage {
  transition: none
}
.lbx-stage.is-sliding {
  transition:
    transform .22s cubic-bezier(.22, .61, .36, 1),
    opacity .22s ease
}
.sec-edge-v1 { animation-duration: 34s }
.sec-edge-v2 { animation-duration: 41s; animation-direction: reverse }
.sec-edge-v3 { animation-duration: 28s }
.sec-edge-v4 { animation-duration: 47s; animation-direction: reverse }
.vc-tilt.is-tilted {
  transform:
    perspective(1100px)
    translateY(-3px)
    rotateX(var(--kipp-x, 0deg))
    rotateY(var(--kipp-y, 0deg))
}
.sa.is-anim,
.sr-fly.is-anim {
  will-change: transform, opacity
}
.vc-split.is-shown .vc-word {
  will-change: auto
}
.angebot-card,
.testi-card,
.tile,
.work,
.plan,
.benefit,
.fv-why-item {
  contain: layout paint
}
@media (prefers-reduced-motion: reduce) {
  .hero-fx,
  .hero-in,
  .hero-in-kante,
  .hero-edge,
  .sec-edge {
    opacity: 1;
    visibility: visible;
    animation: none
  }
  .hero-in,
  .hero-wave,
  .hero-edge {
    transform: none
  }
  .hero-flow {
    transform: none;
    animation: none
  }
  .sec-edge {
    transform: scaleY(-1)
  }
  .page-hero .sec-edge.sec-edge-unten {
    transform: none
  }
  .sa,
  .sr-fly,
  .vc-tilt.is-tilted {
    will-change: auto
  }
}
@media (max-width: 768px) {
  .hero-vektor {
    /* Mittelpunkt der Grafik, gemessen an der Viewportbreite.
       Groesserer Wert = weiter nach rechts. Die Schulter laeuft
       dabei bewusst rechts aus dem Bild, damit die Buttons frei
       stehen. Nur diese eine Zahl anfassen zum Nachjustieren. */
    left: var(--hero-vektor-x, 72%);
    height: min(clamp(300px, 96vw, 620px), 45%);
    opacity: .82;
    -webkit-mask-image:
      linear-gradient(180deg,
        transparent 0%,
        rgba(0, 0, 0, .45) 14%,
        #000 34%,
        #000 62%,
        rgba(0, 0, 0, .35) 86%,
        transparent 97%);
    mask-image:
      linear-gradient(180deg,
        transparent 0%,
        rgba(0, 0, 0, .45) 14%,
        #000 34%,
        #000 62%,
        rgba(0, 0, 0, .35) 86%,
        transparent 97%)
  }
}
@media (max-width: 400px) {
  .hero-vektor {
    height: min(clamp(280px, 92vw, 560px), 40%)
  }
}
:root {
  --ton-1: #f2fafe;
  --ton-2: #e3f3fd;
  
  --kante-h: clamp(72px, 9.5vh, 150px)
}
@media (max-width: 768px) {
  :root {
    --kante-h: clamp(52px, 14vw, 105px)
  }
}
.sec-ton-1 {
  background: var(--ton-1)
}
.sec-ton-2 {
  background: var(--ton-2)
}
main > section:not([class*="sec-ton-"]):not(.section--dark):not(.page-hero) {
  background: #fff
}
.sec-edge {
  height: var(--kante-h)
}
.has-edge {
  padding-top: calc(var(--kante-h) + clamp(1.5rem, 4vw, 3rem))
}
.hero-edge,
.hero-in-kante {
  height: clamp(80px, 11vh, 160px)
}
@media (max-width: 768px) {
  .sec-edge {
    height: var(--kante-h)
  }
  .hero-edge,
  .hero-in-kante {
    height: clamp(56px, 16vw, 112px)
  }
}
.has-edge {
  overflow: visible
}
.sec-edge {
  width: 100%;
  overflow: hidden;
  animation: none
}
.sec-edge-band {
  position: absolute;
  left: 0;
  top: 0;
  width: 200%;
  height: 100%;
  animation: heroWave 34s linear infinite
}
.sec-edge-v1 > .sec-edge-band { animation-duration: 34s }
.sec-edge-v2 > .sec-edge-band { animation-duration: 41s; animation-direction: reverse }
.sec-edge-v3 > .sec-edge-band { animation-duration: 28s }
.sec-edge-v4 > .sec-edge-band { animation-duration: 47s; animation-direction: reverse }
.is-paused .sec-edge-band {
  animation-play-state: paused
}
@media (prefers-reduced-motion: reduce) {
  .sec-edge-band {
    animation: none
  }
}
#showreel {
  position: relative;
  z-index: 1
}
@media (min-width: 900px) {
  .kontakt-split .kontakt-cols {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: start;
    max-width: 1080px;
    margin-inline: auto
  }
  
  .kontakt-split .form,
  .kontakt-split .direct,
  .kontakt-split .divider {
    max-width: none;
    margin-inline: 0
  }
  .kontakt-split .divider {
    margin-top: 0
  }
  
  .kontakt-split .kontakt-col-form .form-success {
    max-width: none
  }
}
.page-hero.has-edge {
  padding-top: calc(var(--nav-h) + 3rem);
  padding-bottom: calc(var(--kante-h) + clamp(2rem, 5vw, 3.5rem))
}
@media (max-width: 768px) {
  .page-hero.has-edge {
    padding-bottom: calc(var(--kante-h) + clamp(1.5rem, 5vw, 2.5rem))
  }
}
.has-edge {
  isolation: isolate
}
/* ── Ablauf-Grafik ───────────────────────────────────────────────────
   Gleiches Prinzip wie der Hero-Vektor: Die Grafik liegt als eigene
   Ebene hinter dem Inhalt und ist komplett aus dem Textfluss heraus.
   Der Container bekommt feste Masse, damit das erst per JS nach-
   geladene Lottie-SVG nichts mehr verschiebt (kein Layout-Shift) und
   der Text ganz normal oben in der Sektion beginnt. */
#ablauf {
  position: relative;
  --ablauf-media: clamp(360px, 46vw, 820px);
  --ablauf-media-unten: clamp(1rem, 3vw, 2.5rem)
}
/* Inhalt liegt ueber der Grafik. Bewusst nur die Inhaltselemente -
   die per JS eingehaengte Wellenkante (.sec-edge) bleibt unberuehrt. */
#ablauf>.eyebrow,
#ablauf>h2,
#ablauf>.lead,
#ablauf>.timeline {
  position: relative;
  z-index: 2
}
#ablauf .ablauf-media {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  top: auto;
  bottom: var(--ablauf-media-unten);
  left: auto;
  /* wie beim Hero: buendig mit der rechten Kante der Inhaltsspalte */
  right: max(var(--nav-x), calc((100% - var(--content-max)) / 2));
  width: var(--ablauf-media);
  height: var(--ablauf-media);
  opacity: 1;
  -webkit-mask-image:
    linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .4) 10%, #000 30%, #000 88%, rgba(0, 0, 0, .4) 96%, transparent 100%),
    linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .45) 22%, #000 46%);
  mask-image:
    linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .4) 10%, #000 30%, #000 88%, rgba(0, 0, 0, .4) 96%, transparent 100%),
    linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .45) 22%, #000 46%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect
}
/* Lottie schreibt ein SVG mit width/height:100% in den Container.
   Ohne diese Regel faellt es auf seine Standardgroesse (300x150)
   zurueck, sobald der Container selbst keine feste Groesse hat. */
#ablauf .ablauf-media>svg,
#ablauf .ablauf-media>canvas {
  display: block;
  width: 100%;
  height: 100%
}
/* Ab Tablet bleibt die Textspalte links vom Motiv. Die Grafik darf
   mit ihrer ausgeblendeten linken Haelfte darunter laufen, deshalb
   wird nur der wirklich sichtbare Teil (~70%) freigehalten. */
@media (min-width:769px) {
  #ablauf>.eyebrow,
  #ablauf>h2,
  #ablauf>.lead,
  #ablauf>.timeline {
    max-width: min(680px, calc(100% - var(--ablauf-media) * .7 - clamp(1rem, 2.5vw, 2rem)))
  }
}
/* Schmale Viewports: kein Platz daneben, deshalb dezent als grosses
   Hintergrundmotiv unten - der Text bleibt oben und lesbar. */
@media (max-width:768px) {
  #ablauf {
    --ablauf-media: min(92vw, 460px);
    --ablauf-media-unten: clamp(.5rem, 3vw, 1.5rem)
  }
  #ablauf .ablauf-media {
    right: calc(var(--nav-x) * -.5);
    opacity: 0;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .4) 12%, #000 34%, #000 84%, rgba(0, 0, 0, .4) 94%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .4) 12%, #000 34%, #000 84%, rgba(0, 0, 0, .4) 94%, transparent 100%);
    -webkit-mask-composite: source-over;
    mask-composite: add
  }
}
.form.is-sending{cursor:progress}
.form.is-sending .field,.form.is-sending .consent{pointer-events:none;opacity:.6}
.send.is-sending{opacity:.85;cursor:progress;display:inline-flex;align-items:center;justify-content:center;gap:.6em}
.send.is-sending::before{content:"";width:1em;height:1em;flex:none;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:sendspin .7s linear infinite}
@keyframes sendspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.send.is-sending::before{animation:none;opacity:.5}}