@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;
  src:url('../assets/fonts/barlow-condensed-600.woff2') format('woff2');}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;
  src:url('../assets/fonts/barlow-condensed-700.woff2') format('woff2');}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400 500;font-display:swap;
  src:url('../assets/fonts/dm-sans.woff2') format('woff2-variations');}

:root{
  --teal:#0A939C;
  --teal-text:#2FC0CC;
  --teal-dunkel:#0C828E;
  --navy:#04356F;
  --dark:#071827;
  --white:#FFFFFF;
  --gray:#D9E1E8;
  --line:#26456A;
  --dimm:#8FA3B5;
  --font-head:'Barlow Condensed','Oswald','Arial Narrow','Helvetica Neue',system-ui,sans-serif;
  --font-body:'DM Sans',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --pad-x:clamp(1.25rem,5vw,4rem);
  --max:1180px;
  
  --marke-navy:#04356F;
  --marke-teal:#0A939C;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--dark);color:var(--gray);
  font-family:var(--font-body);font-size:1rem;line-height:1.7;
  -webkit-font-smoothing:antialiased}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad-x)}
.sprunglink{position:absolute;left:-9999px}
.sprunglink:focus{left:1rem;top:1rem;z-index:9;background:var(--white);color:var(--navy);
  padding:.6rem 1rem;border-radius:3px}

.hero{position:relative;overflow:hidden;display:flex;flex-direction:column;
  
  min-height:min(100svh,860px);
  background:
    radial-gradient(120% 90% at 88% 8%, rgba(18,168,180,.18) 0%, rgba(18,168,180,0) 58%),
    linear-gradient(168deg,#04356F 0%,#071827 64%);}
.hero--klein{min-height:0}
.fiber{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.5}
.fiber path{fill:none;stroke:var(--teal-text);stroke-width:2;stroke-linecap:round}

.hero__top{position:relative;z-index:1;padding-top:clamp(1.75rem,4vw,2.75rem)}
.hero__top .wrap{display:flex;flex-wrap:wrap;gap:1rem 1.5rem;
  align-items:center;justify-content:space-between}
.marke{display:flex;align-items:center;gap:.7rem;text-decoration:none}
.marke__bild{width:auto;height:clamp(42px,4.2vw,52px);flex:0 0 auto;
  
  --marke-navy:rgba(255,255,255,.93);
  --marke-teal:#12A8B4}
.wordmark{font-family:var(--font-head);font-weight:700;
  font-size:clamp(1.2rem,1.9vw,1.4rem);line-height:1;
  letter-spacing:.11em;text-transform:uppercase;color:var(--white);white-space:nowrap}

.hero__body>.wrap{width:100%}
.hero__body{position:relative;z-index:1;flex:1;display:flex;align-items:flex-start;
  
  padding:clamp(3rem,15vh,8.5rem) 0 clamp(2rem,5vw,3.5rem)}
.kicker{font-family:var(--font-body);font-size:clamp(.9375rem,1.35vw,1.1875rem);font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--teal-text);
  margin:0 0 clamp(.9rem,2vw,1.25rem)}
h1{font-family:var(--font-head);font-weight:700;
  font-size:clamp(3rem,9.5vw,6.75rem);line-height:.92;
  letter-spacing:.005em;text-transform:uppercase;color:var(--white);margin:0}
.hero--klein h1{font-size:clamp(2.25rem,6vw,3.75rem)}
h1 .dot{color:var(--teal-text)}
.hero h2{font-family:var(--font-head);font-weight:600;
  font-size:clamp(1.4rem,3.4vw,2.35rem);line-height:1.15;
  text-transform:uppercase;letter-spacing:.01em;color:var(--gray);
  margin:clamp(1.1rem,2.5vw,1.6rem) 0 0}
.rule{width:64px;height:3px;background:var(--teal-text);border:0;margin:clamp(1.4rem,3vw,2rem) 0 0}
.lead{max-width:46ch;margin:clamp(1.2rem,2.5vw,1.6rem) 0 0;
  font-size:clamp(1.0625rem,1.3vw,1.1875rem);color:#D9E1E8}
.claim{font-family:var(--font-head);text-transform:uppercase;
  letter-spacing:.14em;font-size:clamp(.9375rem,1.1vw,1.0625rem);font-weight:600;
  color:var(--teal-text);margin:clamp(1.6rem,3vw,2.25rem) 0 0}

.contact{border-top:1px solid var(--line);background:rgba(7,24,39,.55)}
.contact__inner{display:grid;gap:clamp(1.25rem,3vw,2rem);
  grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  padding:clamp(1.6rem,3.5vw,2.25rem) 0}
.c-item{display:flex;gap:14px;align-items:flex-start}
.c-icon{flex:0 0 auto;width:22px;height:22px;color:var(--teal-text);margin-top:3px;
  fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.c-label{display:block;font-size:.8125rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:#7C93A8;margin-bottom:2px}
.c-value{color:var(--white);font-weight:500;font-size:1.125rem;line-height:1.5}
.c-value a{color:var(--white);text-decoration:none;border-bottom:1px solid rgba(47,192,204,.6)}
.c-value a:hover,.c-value a:focus-visible{color:var(--teal-text);border-bottom-color:var(--teal-text)}
.c-sub{display:block;font-size:.875rem;color:var(--dimm);font-weight:400}

.blatt{background:var(--white);color:#243244;padding:clamp(2.5rem,6vw,4.5rem) 0}
.blatt p,.blatt dl,.blatt ul,.blatt ol,.hinweis{max-width:74ch}
.blatt h1,.blatt h2,.blatt h3{font-family:var(--font-head);text-transform:uppercase;
  letter-spacing:.04em;color:var(--navy)}
.blatt h1{font-size:clamp(1.9rem,4.5vw,2.6rem);margin:0 0 1.5rem;line-height:1.1}
.blatt h2{font-size:1.25rem;margin:2.5rem 0 .7rem;padding-bottom:.5rem;
  border-bottom:1px solid #DDE4EC}
.blatt h2:first-child{margin-top:0}
.blatt h3{font-size:1rem;margin:1.6rem 0 .4rem;letter-spacing:.06em}
.blatt p,.blatt li{font-size:1rem;line-height:1.75;color:#3A4A5E}
.blatt a{color:var(--teal-dunkel)}
.blatt dl{margin:0;font-size:1rem;line-height:1.8}
.blatt dt{float:left;clear:left;min-width:12em;color:#6B7C91}
.blatt dd{margin:0 0 .2rem;color:#243244}
.blatt strong{color:var(--navy)}
.hinweis{border-left:3px solid var(--teal);background:#F2F8F9;
  padding:1rem 1.25rem;margin:2rem 0;font-size:1rem}

#rechtstext{margin-top:1rem}

.footer{background:#061525;border-top:1px solid var(--line);
  padding:clamp(1.8rem,4vw,2.5rem) 0}

:focus-visible{outline:2px solid var(--teal-text);outline-offset:3px}

@media (max-width:560px){
  .blatt dt{float:none;min-width:0;margin-top:.6rem}
}
@media (prefers-reduced-motion:no-preference){
  .fiber path{stroke-dasharray:1;stroke-dashoffset:1;
    animation:draw 2.9s cubic-bezier(.22,.68,.28,1) forwards}
  .fiber path:nth-child(2){animation-delay:.22s}
  .fiber path:nth-child(3){animation-delay:.44s}
  @keyframes draw{to{stroke-dashoffset:0}}
}

.hero{

  --schleier:.68;
  --ecke-x:calc(50% - 420px);
  --ecke-y:92%;
  --ecke-r:46% 42%;
  
  min-height:min(100svh,940px);
  background:#071827;
}

.hero::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:url('../assets/hero-landing.webp') 50% 44% / cover no-repeat;
  
  transform:none;
}

.hero::after{
  content:"";position:absolute;inset:0;z-index:0;
  
  background:
    linear-gradient(92deg,
      rgba(4,17,30,var(--schleier)) 0%,
      rgba(4,17,30,calc(var(--schleier) * 1.0000)) calc(50% - 80px),
      rgba(4,17,30,calc(var(--schleier) * 0.9978)) calc(50% - 36px),
      rgba(4,17,30,calc(var(--schleier) * 0.9839)) calc(50% + 8px),
      rgba(4,17,30,calc(var(--schleier) * 0.9512)) calc(50% + 51px),
      rgba(4,17,30,calc(var(--schleier) * 0.8965)) calc(50% + 95px),
      rgba(4,17,30,calc(var(--schleier) * 0.8200)) calc(50% + 139px),
      rgba(4,17,30,calc(var(--schleier) * 0.7248)) calc(50% + 182px),
      rgba(4,17,30,calc(var(--schleier) * 0.6160)) calc(50% + 226px),
      rgba(4,17,30,calc(var(--schleier) * 0.5000)) calc(50% + 270px),
      rgba(4,17,30,calc(var(--schleier) * 0.3840)) calc(50% + 314px),
      rgba(4,17,30,calc(var(--schleier) * 0.2752)) calc(50% + 358px),
      rgba(4,17,30,calc(var(--schleier) * 0.1800)) calc(50% + 401px),
      rgba(4,17,30,calc(var(--schleier) * 0.1035)) calc(50% + 445px),
      rgba(4,17,30,calc(var(--schleier) * 0.0488)) calc(50% + 489px),
      rgba(4,17,30,calc(var(--schleier) * 0.0161)) calc(50% + 532px),
      rgba(4,17,30,calc(var(--schleier) * 0.0022)) calc(50% + 576px),
      rgba(4,17,30,0) calc(50% + 620px),
      rgba(4,17,30,0) 100%),
    
    radial-gradient(var(--ecke-r) at var(--ecke-x) var(--ecke-y),
      rgba(4,17,30,.42) 0%,
      rgba(4,17,30,.36) 26%,
      rgba(4,17,30,.24) 48%,
      rgba(4,17,30,.12) 66%,
      rgba(4,17,30,.04) 82%,
      rgba(4,17,30,0) 100%),
    linear-gradient(180deg,
      rgba(4,17,30,0) 0%,
      rgba(4,17,30,0) 74%,
      rgba(4,17,30,.02) 84%,
      rgba(4,17,30,.06) 92%,
      rgba(4,17,30,.11) 100%);
}

.hero--verlauf::before{display:none}
.hero--verlauf::after{display:none}
.hero--verlauf{
  background:
    radial-gradient(120% 90% at 88% 8%, rgba(47,192,204,.18) 0%, rgba(47,192,204,0) 58%),
    linear-gradient(168deg,#04356F 0%,#071827 64%);
}
.hero--klein{min-height:0}

.hero__weiter{
  position:relative;z-index:1;align-self:center;
  padding:0 0 clamp(1.6rem,4vh,2.6rem);
  display:flex;flex-direction:column;align-items:center;gap:.5rem;
  color:var(--gray);text-decoration:none;
  font-family:var(--font-body);font-size:.8125rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;
}
.hero__weiter:hover,.hero__weiter:focus-visible{color:var(--teal-text)}
.hero__weiter svg{width:21px;height:21px;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (prefers-reduced-motion:no-preference){
  .hero__weiter svg{animation:tippen 2.4s ease-in-out infinite}
  @keyframes tippen{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
}

.usp{background:#1B2E4F}
.usp__raster{display:grid;gap:clamp(1.25rem,2.5vw,2rem);
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  padding:clamp(1.5rem,3.5vw,2.25rem) 0}
.usp__item{display:flex;gap:14px;align-items:flex-start}
.usp__icon{flex:0 0 auto;width:26px;height:26px;color:var(--teal-text);margin-top:2px;
  fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.usp__label{display:block;font-size:.8125rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:#94AAC2;margin-bottom:3px}
.usp__wert{color:var(--white);font-weight:500;font-size:1.125rem;line-height:1.45}
.usp__wert a{color:var(--white);text-decoration:none;
  border-bottom:1px solid rgba(47,192,204,.6)}
.usp__wert a:hover,.usp__wert a:focus-visible{color:var(--teal-text);border-bottom-color:var(--teal-text)}
.usp__sub{display:block;font-size:.875rem;color:#A9BDD2;font-weight:400}

.footer{background:#061525;border-top:0;padding:clamp(2.5rem,6vw,4rem) 0 clamp(1.25rem,2.5vw,1.75rem)}
.footer__raster{display:grid;gap:clamp(2rem,4vw,3.5rem);
  grid-template-columns:1.4fr 1fr 1fr}
.footer__marke .marke{margin-bottom:1.1rem}
.footer__spalte p{margin:0;font-size:1rem;line-height:1.7;color:#A9BAC8;max-width:34ch}
.f-titel{font-family:var(--font-body);font-size:.8125rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--teal-text);margin:0 0 .7rem}
.f-rule{width:44px;height:2px;background:var(--teal-text);border:0;margin:0 0 1.25rem}
.footer__marke .f-rule{margin-bottom:1.1rem}
.f-liste{list-style:none;margin:0;padding:0;display:grid;gap:.9rem}
.f-liste li{display:flex;gap:12px;align-items:flex-start;
  font-size:1rem;line-height:1.5;color:var(--gray)}
.f-icon{flex:0 0 auto;width:20px;height:20px;color:var(--teal-text);margin-top:3px;
  fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.f-liste a{color:var(--gray);text-decoration:none;border-bottom:1px solid rgba(47,192,204,.45)}
.f-liste a:hover,.f-liste a:focus-visible{color:var(--teal-text);border-bottom-color:var(--teal-text)}
.f-sub{display:block;font-size:.875rem;color:#94A8BC}
.f-cta-text{margin:1.4rem 0 1.1rem !important;font-size:1rem;color:#A9BAC8}

.f-knopf{display:inline-flex;align-items:center;gap:.6rem;
  background:var(--teal-dunkel);color:var(--white);text-decoration:none;
  padding:.8rem 1.4rem;border-radius:999px;
  font-family:var(--font-body);font-size:1rem;font-weight:600}
.f-knopf:hover,.f-knopf:focus-visible{background:#0A939C}
.f-icon--knopf{width:18px;height:18px;color:currentColor;margin-top:0}
.footer__leiste{margin-top:clamp(2rem,4vw,3rem);padding-top:1.4rem;
  border-top:1px solid rgba(255,255,255,.10);
  display:flex;flex-wrap:wrap;gap:.6rem 2rem;justify-content:space-between;
  align-items:center;font-size:.875rem;color:#94A8BC}
.f-rechts{display:flex;flex-wrap:wrap;gap:.6rem .9rem;align-items:center}
.footer__leiste a{color:#C3D0DC;text-decoration:none;border-bottom:1px solid rgba(47,192,204,.4)}
.footer__leiste a:hover,.footer__leiste a:focus-visible{color:var(--teal-text);border-bottom-color:var(--teal-text)}
.f-trenn{color:#3C566F}
.f-webdesign strong{color:var(--teal-text);font-weight:600}

@media (max-width:900px){
  .footer__raster{grid-template-columns:1fr 1fr}
  .footer__marke{grid-column:1 / -1}
}
@media (max-width:600px){
  .footer__raster{grid-template-columns:1fr}
  .footer__leiste{justify-content:flex-start}
}

.usp__titel{display:block;font-family:var(--font-head);font-weight:700;
  font-size:1.0625rem;line-height:1.25;letter-spacing:.02em;
  text-transform:uppercase;color:var(--white);margin-bottom:.3rem}
.usp__text{display:block;font-size:1rem;line-height:1.55;color:#A9BDD2}

.usp__raster{grid-template-columns:repeat(4,1fr);gap:clamp(1.5rem,2.2vw,2rem);
  padding:clamp(1.9rem,4vw,2.75rem) 0}
@media (max-width:1080px){.usp__raster{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.usp__raster{grid-template-columns:1fr}}
.usp__icon{width:30px;height:30px;margin-top:1px}

.footer{position:relative}
.footer__leiste{display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;gap:.7rem 2rem}
.f-copy{justify-self:start}
.f-rechts{justify-self:center}
.f-gf{justify-self:end;text-align:right}

.f-top{position:absolute;right:var(--pad-x);bottom:clamp(1.1rem,2.5vw,1.6rem);
  width:46px;height:46px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  background:var(--teal-dunkel);color:var(--white);text-decoration:none}
.f-top:hover,.f-top:focus-visible{background:#0A939C}
.f-top svg{width:22px;height:22px;fill:none;stroke:currentColor;
  stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

@media (max-width:1100px){
  .footer__leiste{grid-template-columns:1fr;justify-items:start;text-align:left}
  .f-rechts,.f-gf{justify-self:start;text-align:left}
  .f-top{position:static;margin-top:1.25rem}
}

@media (max-width:640px){

  .hero{--ecke-x:30%;--ecke-y:66%;--ecke-r:78% 46%;--schleier:.75}
  .unterzeile{color:#3FCBD6}   
  
  .hero__body{align-items:center;
    padding:clamp(1rem,3vh,2rem) 0 clamp(3.5rem,10vh,6rem)}
  .unterzeile{margin-top:.45rem}
  .rule{margin-top:1.15rem;width:56px}
  .lead{margin-top:1.15rem;text-wrap:pretty}
  .claim{margin-top:1.35rem}
  .marke__bild{height:46px}
  .wordmark{font-size:1.25rem}
  .hero__body{padding-top:clamp(2rem,6vw,3rem)}
  .usp__raster{gap:1.5rem}
}

.usp{background:#1B2E4F}
.usp__raster{grid-template-columns:repeat(4,1fr);
  column-gap:clamp(1.4rem,2.4vw,2.1rem);
  padding:clamp(2rem,4vw,2.75rem) 0;align-items:stretch}
.usp__item{display:flex;align-items:flex-start;gap:clamp(.7rem,1.1vw,.95rem);padding:0}
.usp__item + .usp__item{border-left:1px solid rgba(255,255,255,.14);
  padding-left:clamp(1.4rem,2.4vw,2.1rem)}
.usp__bild{flex:0 0 auto;width:clamp(36px,2.9vw,42px);height:auto;margin-top:1px}
.usp__titel{display:block;font-family:var(--font-head);font-weight:700;
  font-size:1.1875rem;line-height:1.15;letter-spacing:.08em;
  text-transform:uppercase;color:var(--white);margin:0 0 .4rem}
.usp__text{display:block;font-size:1.0625rem;line-height:1.5;color:#B4C6DA;
  min-height:3em}

@media (max-width:1080px){
  .usp__raster{grid-template-columns:repeat(2,1fr);
    row-gap:clamp(1.6rem,3vw,2.2rem)}
  .usp__item + .usp__item{border-left:0;padding-left:0}
  .usp__item:nth-child(even){border-left:1px solid rgba(255,255,255,.14);
    padding-left:clamp(1.4rem,2.4vw,2.1rem)}
}
@media (max-width:620px){
  
  .usp__raster{grid-template-columns:1fr;row-gap:0;padding:clamp(1.5rem,5vw,2rem) 0}
  .usp__item,.usp__item:nth-child(even){border-left:0;padding-left:0}
  .usp__item + .usp__item{border-top:1px solid rgba(255,255,255,.14);
    padding-top:1.15rem;margin-top:1.15rem}
  .usp__text{min-height:0}
  .usp__bild{width:38px}
}

body{font-size:1.0625rem}
.c-label,.usp__label,.f-titel,.hero__weiter{font-size:.875rem}
.c-sub,.usp__sub,.f-sub,.footer__leiste{font-size:.9375rem}
.blatt p,.blatt li,.blatt dl,.hinweis,.footer__spalte p,
.f-liste li,.f-cta-text,.f-knopf{font-size:1.0625rem}
.blatt h3{font-size:1.0625rem}
.blatt h2{font-size:1.3125rem}
.c-value,.usp__wert{font-size:1.1875rem}
.claim{font-size:clamp(1.0625rem,1.25vw,1.25rem)}
.kicker{font-size:clamp(1rem,1.45vw,1.25rem)}
.lead{font-size:clamp(1.125rem,1.45vw,1.3125rem)}

.unterzeile{font-family:var(--font-head);font-weight:600;
  font-size:clamp(1.5rem,3.6vw,2.875rem);line-height:1.1;
  letter-spacing:.02em;text-transform:uppercase;
  color:var(--teal-text);margin:clamp(.7rem,1.6vw,1rem) 0 0}
.lead strong{color:var(--white);font-weight:600}

.f-webdesign a{text-decoration:none;border-bottom:1px solid rgba(47,192,204,.45)}
.f-webdesign a strong{color:var(--teal-text)}
.f-webdesign a:hover strong,.f-webdesign a:focus-visible strong{color:var(--white)}

.footer__marke .marke{gap:0}
.footer__marke .wordmark{font-size:clamp(1.25rem,1.9vw,1.5rem)}

@media (min-width:1700px){
  :root{--max:1300px}
  .unterzeile{font-size:3.125rem}
  .lead{font-size:1.375rem}
}

.claim{color:#3FCBD6}
.unterzeile{color:#3FCBD6}