

.site-head,
.mnav,
.sprunglink{
  font-size: 118.75%;
  --knopf-fokus-versatz: -4px;
  --knopf-fokus-breite: 2px;
  --knopf-druck: translateY(1px) scale(.985);
  --knopf-hub: translateY(-1px);
  --knopf-flaeche-hover: var(--navy-deep);
  --navy-deep: var(--bik-blue-deep);
  --knopf-zeit: .2s;
  --naht-mittel: clamp(var(--bik-space-xl), 4.5vw, var(--bik-space-xxl));
  --inhalt-kurve: calc(794.12px + 30.78vw);
  --fs-body: var(--bik-fs-body-web);
  --bik-fs-body-web: var(--bik-fs-stufe-0);
  --bik-fs-stufe-0: 1em;
  --knopf-schrift: var(--white);
  --white: var(--bik-white);
  --knopf-flaeche: var(--navy);
  --navy: var(--bik-royal);
  --bik-royal: #002366;
  --knopf-radius: var(--bik-radius-pill);
  --muted: var(--bik-text-muted);
  --bik-text-muted: var(--bik-royal);
  --beige: var(--sh-sand);
  --sh-sand: #e6dcc8;
  --fs-small: var(--bik-fs-small-web);
  --bik-fs-small-web: var(--bik-fs-body-s);
  --bik-fs-body-s: 0.8125em;
  --bik-ecke: squircle;
  --beige-line: var(--sh-sand-line);
  --sh-sand-line: #dccdb0;
  --beige-soft: var(--sh-sand-soft);
  --sh-sand-soft: #f4efe6;
  --gutter: clamp(20px, 5vw, var(--bik-space-xl));
  --maxw: clamp(var(--inhalt-unten), var(--inhalt-kurve), var(--inhalt-oben));
  --inhalt-oben: 1582px;
  --inhalt-unten: 1200px;
}

.site-header .wrap{
  display:flex;
  align-items:center;
  gap:var(--bik-space-l);
  padding-block:12px;
}
@media (max-width:960px){
  .site-header .wrap{
    flex-wrap:wrap;
    row-gap:8px;
  }
}

.wrap{
  max-width:var(--maxw);
  margin:0 auto;
  padding-inline:var(--gutter);
}
.site-head{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:1200;
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(1.1) blur(10px);
  border-bottom:1px solid var(--beige-soft);
  transition:transform .35s cubic-bezier(.4,0,.2,1);
}
.site-head.is-hidden{
  transform:translateY(-100%);
}
.site-head .bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  height:66px;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--navy);
}
.brand .mark{
  width:26px;
  height:22px;
  flex:0 0 auto;
}
.brand .mark svg{
  width:100%;
  height:100%;
  display:block;
  fill:var(--navy);
}
.brand .wm{
  font-size:.72em;
  line-height:1.15;
  font-weight:var(--fw-semi);
  letter-spacing:.02em;
  text-transform:none;
}
.nav{
  display:flex;
  align-items:center;
  gap:26px;
}
.nav :is(a,span){
  font-size:.82em;
  font-weight:var(--fw-med);
  color:var(--navy);
}
.nav-toggle{
  display:none;
  background:none;
  border:0;
  cursor:pointer;
  padding:6px;
}
.nav-toggle svg{
  width:26px;
  height:26px;
  stroke:var(--navy);
  stroke-width:1.6;
  fill:none;
  stroke-linecap:round;
}
@media (max-width:900px){
  .nav{
    display:none;
  }
  .nav-toggle{
    display:block;
  }
}
.mnav{
  display:none;
  position:fixed;
  inset:66px 0 auto 0;
  z-index:1190;
  background:var(--white);
  border-bottom:1px solid var(--beige-line);
  padding:8px var(--gutter) 20px;
}
.mnav.open{
  display:block;
}
.mnav :is(a,span){
  display:block;
  padding:13px 0;
  font-size:1em;
  font-weight:var(--fw-med);
  border-bottom:1px solid var(--beige-soft);
  color:var(--navy);
}
.mnav :is(a,span):last-child{
  border-bottom:0;
}
@media (prefers-reduced-motion:reduce){
  .site-head{
    transition:none;
  }
}
.head-cta{
  flex:0 0 auto;
  margin-left:8px;
  padding:9px 18px;
  border-radius:var(--bik-radius-pill);
  border:1px solid var(--navy);
  color:var(--navy);
  font-size:.82em;
  font-weight:var(--fw-semi);
  line-height:1;
  transition:background .2s,color .2s;
}
.head-cta:hover{
  background:var(--navy);
  color:var(--white);
}
.mnav-cta{
  font-weight:var(--fw-semi);
  color:var(--navy);
}
@media (max-width:900px){
  .head-cta{
    display:none;
  }
}

.site-head .brand{
  flex:0 0 auto;
  min-width:0;
}
.site-head .brand .site-lockup{
  display:block;
  height:34px;
  width:auto;
  aspect-ratio:486 / 139;
  flex:0 0 auto;
}
@media (max-width:760px){
  .site-head .brand .site-lockup{
    height:32px;
  }
}
.sprunglink{
  position:fixed;
  top:0;
  left:var(--space-m,16px);
  z-index:1300;
  transform:translateY(-140%);
  background:var(--navy);
  color:var(--white);
  padding:10px 18px;
  border-radius:0 0 var(--bik-radius-card) var(--bik-radius-card);
  corner-shape:var(--bik-ecke);
  font-size:var(--fs-small);
  font-weight:var(--fw-reg);
  text-decoration:none;
}
.sprunglink:focus,
.sprunglink:focus-visible{
  transform:translateY(0);
}
.site-head{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:1200;
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(1.1) blur(10px);
  border-bottom:1px solid var(--beige-soft);
  transition:transform .35s cubic-bezier(.4,0,.2,1);
}
.site-head.is-hidden{
  transform:translateY(-100%);
}
.site-head .bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  height:66px;
}
.site-head .nav{
  display:flex;
  align-items:center;
  gap:26px;
}
.site-head .nav :is(a,span){
  position:relative;
  font-size:var(--fs-small);
  font-weight:var(--fw-reg);
  color:var(--navy);
}
.site-head .nav :is(a,span)[aria-current="page"]{
  color:var(--navy);
}
.site-head .nav :is(a,span)[aria-current="page"]::before{
  transform:scaleX(1);
  opacity:1;
  background:var(--beige);
}
.site-head .nav :is(a,span){
  --knopf-py:11px;
  --knopf-px:18px;
  line-height:1;
  border-radius:var(--bik-radius-pill);
  transition:opacity .2s,color .2s;
}
.site-head .nav :is(a,span)::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  background:var(--beige);
  border-radius:var(--bik-radius-pill);
  transform:scaleX(.3);
  opacity:0;
  transition:transform .22s cubic-bezier(.22,.61,.36,1),opacity .18s;
}
.site-head .nav :is(a,span):hover::before,
.site-head .nav :is(a,span):focus-visible::before{
  transform:scaleX(1);
  opacity:1;
}
.site-head .nav{
  gap:14px;
}
.nav-ic{
  width:1em;
  height:1em;
  flex:0 0 auto;
}
.site-head .nav [data-nav="flatfinder"]{
  display:inline-flex;
  align-items:center;
  gap:6px;
  --knopf-py:10px;
  --knopf-px:21px;
  border:1px solid var(--beige-line);
}
.mnav [data-nav="flatfinder"]{
  display:flex;
  align-items:center;
  gap:8px;
}
.head-tools{
  display:flex;
  align-items:center;
  gap:16px;
  flex:0 0 auto;
}
.head-merk{
  display:inline-flex;
  align-items:center;
  gap:6px;
  flex:0 0 auto;
  padding:5px 11px 5px 8px;
  border-radius:var(--bik-radius-pill);
  border:1px solid var(--beige-line);
  color:var(--muted);
  font-size:var(--fs-small);
  font-weight:var(--fw-reg);
  line-height:1;
  transition:background .2s,border-color .2s,color .2s;
}
.head-merk .ic{
  width:17px;
  height:17px;
  stroke:currentColor;
}
.head-merk[hidden]{
  display:none;
}
.head-merk:hover,
.head-merk.has-items{
  color:var(--navy);
  border-color:var(--navy);
}
.head-merk.is-full{
  color:var(--navy);
  background:var(--beige);
  border-color:var(--navy);
}
.head-merk .head-merk-wort{
  font-weight:var(--fw-reg);
}
.head-merk .head-merk-cap{
  color:var(--muted);
}
.head-merk.has-items .head-merk-cap{
  color:var(--navy);
}
.head-cta{
  flex:0 0 auto;
  --knopf-py:9px;
  border-radius:var(--knopf-radius);
  border:1px solid var(--knopf-flaeche);
  background:var(--knopf-flaeche);
  color:var(--knopf-schrift);
  font-size:var(--fs-small);
  font-weight:var(--fw-semi);
  line-height:1;
}
.site-head .nav-toggle{
  display:none;
  background:none;
  border:0;
  cursor:pointer;
  padding:6px;
}
.site-head .nav-toggle svg{
  width:26px;
  height:26px;
  stroke:var(--navy);
  stroke-width:1.6;
  fill:none;
  stroke-linecap:round;
}
.mnav{
  display:none;
  position:fixed;
  inset:66px 0 auto 0;
  z-index:1190;
  background:var(--white);
  border-bottom:1px solid var(--beige-line);
  padding:8px var(--gutter) 20px;
}
.mnav.open{
  display:block;
}
.mnav :is(a,span){
  display:block;
  padding:13px 0;
  font-size:var(--fs-body);
  font-weight:var(--fw-med);
  border-bottom:1px solid var(--beige-soft);
  color:var(--navy);
}
.mnav :is(a,span):last-child{
  border-bottom:0;
}
.mnav :is(a,span)[aria-current="page"]{
  font-weight:var(--fw-semi);
}
.mnav-cta{
  font-weight:var(--fw-semi);
  color:var(--navy);
}
.site-head .bar{
  --maxw:max(1520px, var(--inhalt-kurve));
}
@media (max-width:1330px){
  .site-head .nav{
    gap:6px;
  }
  .site-head .nav :is(a,span){
    --knopf-py:10px;
    font-size:.78em;
  }
  .site-head .nav [data-nav="flatfinder"]{
    --knopf-py:9px;
    --knopf-px:19px;
  }
}
@media (max-width:1210px) and (min-width:1076px){
  .site-head .head-merk-wort{
    display:none;
  }
  .site-head .head-merk-cap{
    display:none;
  }
  .site-head .head-cta{
    --knopf-py:8px;
    --knopf-px:14px;
    font-size:.8em;
  }
  .site-head .nav{
    gap:4px;
  }
  .site-head .nav :is(a,span){
    --knopf-py:10px;
    --knopf-px:12px;
  }
  .site-head .nav [data-nav="flatfinder"]{
    --knopf-py:9px;
    --knopf-px:11px;
  }
}
@media (max-width:1075px){
  .site-head .nav{
    display:none;
  }
  .site-head .nav-toggle{
    display:block;
  }
}
@media (max-width:900px){
  .head-tools{
    gap:10px;
  }
  .site-head .head-cta{
    display:inline-block;
    --knopf-py:8px;
    --knopf-px:14px;
    font-size:.78em;
  }
  .head-merk .head-merk-wort{
    display:none;
  }
}
@media (max-width:820px){
  .site-head .bikkp .bikkp-wort{
    display:none;
  }
  .site-head .bikkp{
    padding:7px 9px;
  }
}
@media (max-width:560px){
  .head-merk .head-merk-cap{
    display:none;
  }
  .site-head .bikkp{
    display:none;
  }
}
@media (max-width:420px){
  .site-head .head-cta{
    --knopf-py:7px;
    --knopf-px:11px;
  }
}
@media (max-width:430px){
  .site-head .bar{
    gap:10px;
    padding-inline:14px;
  }
  .head-tools{
    gap:7px;
  }
  .site-head .brand .site-lockup{
    height:26px;
  }
  .site-head .head-cta{
    --knopf-py:7px;
    --knopf-px:9px;
  }
  .head-merk{
    padding:5px 8px 5px 7px;
    gap:5px;
  }
}
@media (prefers-reduced-motion:reduce){
  .site-head{
    transition:none;
  }
  .head-merk{
    transition:none;
  }
}
main > .seitenkopf + .wrap{
  padding-top:var(--naht-mittel);
}
.head-cta,
.mnav-cta{
  background:var(--navy);
  color:var(--white);
  border-color:var(--navy);
}
.head-cta,
.mnav .mnav-cta,
.site-head .nav :is(a,span){
  padding-block:var(--knopf-py);
  padding-inline:var(--knopf-px, calc(var(--knopf-py) * 2));
}
.head-cta,
.mnav .mnav-cta{
  border-radius:var(--knopf-radius);
  transition:background var(--knopf-zeit),
             border-color var(--knopf-zeit),
             color var(--knopf-zeit),
             transform var(--knopf-zeit);
}
.mnav .mnav-cta{
  --knopf-py:13px;
  display:block;
  text-align:center;
  border-bottom:0;
  margin-top:var(--bik-space-s);
}
.head-cta,
.mnav .mnav-cta{
  --knopf-hover:var(--knopf-flaeche-hover);
}
@media (hover:hover){
  .head-cta:hover,
  .mnav .mnav-cta:hover{
    background:var(--knopf-hover);
    border-color:var(--knopf-hover);
    transform:var(--knopf-hub);
  }
}
.head-cta:active,
.mnav .mnav-cta:active{
  transform:var(--knopf-druck);
  background:var(--knopf-hover);
  border-color:var(--knopf-hover);
}
.head-cta:focus-visible,
.mnav .mnav-cta:focus-visible{
  outline:var(--knopf-fokus-breite) solid currentColor;
  outline-offset:var(--knopf-fokus-versatz);
}
@media (prefers-reduced-motion:reduce){
  .head-cta,
  .mnav .mnav-cta{
    transition:background var(--knopf-zeit),border-color var(--knopf-zeit),color var(--knopf-zeit);
  }
  .head-cta:hover,
  .mnav .mnav-cta:hover{
    transform:none;
  }
  .head-cta:active,
  .mnav .mnav-cta:active{
    transform:none;
    filter:brightness(.92);
  }
}
a:not(.sprunglink),
a:not(.sprunglink):hover,
a:not(.sprunglink):focus,
a:not(.sprunglink):active,
a:not(.sprunglink):visited{
  text-decoration:none !important;
}
.seitenkopf + .wrap > section{
  margin-top:var(--naht-mittel);
}
@media (max-width:900px){
  .site-head .head-cta{
    display:none;
  }
}
.mnav :is(a,span).mnav-cta{
  color:var(--white);
}
.mnav.open::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  background:color-mix(in srgb, var(--white) 38%, transparent);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .mnav.open::before{
    background:color-mix(in srgb, var(--white) 72%, transparent);
  }
}
.site-head .wrap{
  max-width: none;
}
