:root{

  --c-hellblau: #EEF3F7;



  --c-blau-1:   #71B4EC;
  --c-blau-2:   #0058A0;
  --c-blau-3:   #003256;

  --c-black:    #002139;

  --c-grey-1:   #99A6B0;
  --c-grey-2:   #6C757D;

  --c-red:      #E73434;
  --c-red-hover:#AA2828;
    --font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

}


body,html{margin:0;padding:0; } *,*::before,*::after{box-sizing:border-box; position:relative;}
h1,h2,h3,p{margin: 0;padding:0; }
*{font-family: var(--font-family)}

p{max-width: 600px; color: var(--c-black); line-height: 1.5rem;}
.tcenter p{margin: 0 auto;}
h1,h2{color:var(--c-blau-2)}
h1{font-size: 2rem;}
a{color: inherit;}
img{width: 100%; display: block;}


.topsubpage{background-size: cover; background-position: center; padding: 4rem 1rem; margin-bottom: 4rem;}
.topsubpage:before{content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(1, 39, 69, 0.7);}
.topsubpage h1, .topsubpage p{position: relative; color: white;}

.scrollimg{
  height: 30vh;
  background-size: cover;
  background-position:center;
  background-attachment: fixed;
  
}

.p1{padding: 1rem;}
.p2{padding: 2rem;}
.p4{padding: 4rem;}

.pt1{padding-top: 1rem;}
.pt2{padding-top: 2rem;}
.pt4{padding-top: 4rem;}
.pt8{padding-top: 8rem;}

.pb1{padding-bottom: 1rem;}
.pb2{padding-bottom: 2rem;}
.pb4{padding-bottom: 4rem;}
.pb8{padding-bottom: 8rem;}

.m1{margin: 1rem;}
.m2{margin: 2rem;}
.m4{margin: 4rem;}

.mt1{margin-top: 1rem;}
.mt2{margin-top: 2rem;}
.mt4{margin-top: 4rem;}
.mt8{margin-top: 8rem;}

.mb1{margin-bottom: 1rem;}
.mb2{margin-bottom: 2rem;}
.mb4{margin-bottom: 4rem;}
.mb8{margin-bottom: 8rem;}

.plr1{padding-left: 1rem; padding-right: 1rem;}
.plr2{padding-left: 2rem; padding-right: 2rem;}
.plr4{padding-left: 4rem; padding-right: 4rem;}
.lc{color:var(--c-blau-1) !important}
.site{max-width: 1800px; margin: 0 auto;}
.center{margin-left: auto; margin-right: auto;}
.tcenter{text-align: center;}
.mxwidth-500{max-width: 500px;  margin-left: auto !important; margin-right: auto !important;}
.mxwidth-700{max-width: 700px; margin-left: auto; margin-right: auto;}
.mxwidth-1200{max-width: 1200px; margin-left: auto; margin-right: auto;}
hr{border:none; outline: none; border-top:2px solid var(--c-blau-2); margin: 2rem 0; transform: scaleX(.5);}
.bb{background: linear-gradient(160deg,var(--c-blau-2) 60%, var(--c-blau-1));}
.bb *{color: white !important;}
.bigicon{font-size: 7rem; margin-bottom: 2rem;}
.hbig{font-size: 3rem;}
.fcenter{display:flex;align-items:center; justify-content:center;}
.header .menu a{text-decoration: none; color: var(--c-black);}
.desktop-only{display: none;}
.mobile-only{display: block;}
.flexdirection{display: flex; flex-direction: column; gap: 1rem;}

i{color:var(--c-blau-2)}
.header{display: flex; justify-content: space-between;}
.menu {display: flex;gap: 1rem; align-items: center;}
.cellmenu{
    width:100%;height:100%;left:100%;top:0; position: fixed; background-color: var(--c-hellblau);
    display: grid; gap: 1rem; place-items: center; padding: 8rem 0;

}

.intro{font-size: 1.3rem; line-height: 2rem; color:var(--c-blau-2)}

.cellmenu.open{left: 0;}
.cellmenu a{display: block;}
.sandwich,.button{cursor: pointer;}
button,.button{padding: 0.5rem 1rem; border: none; background-color: var(--c-blau-2); color: white !important; border-radius: 8px; cursor: pointer; text-decoration: none; font-family: var(--font-family); user-select: none;}
button.white,.button.white{background-color: white; color: var(--c-blau-2) !important;}
button.white:hover,.button.white:hover{background-color: var(--c-blau-3); color: white !important;}
button:hover,.button:hover{background-color: var(--c-blau-2);}
.hilfe .bericht{min-height: 15rem;}
.fillpic img{width: 100%; height: 100%; object-fit: cover; }
.fillpic,.round{border-radius: 10px; overflow: hidden;}
.beraterimg{width: 200px;aspect-ratio: 1/1; object-fit: cover; object-position: center; border-radius: 100%; margin-bottom: 1rem;}
.bcircles{display: flex; gap: 0.5rem; align-items: center; }
.circle.active{opacity: 1;}
.circle{opacity: .5;}
i{user-select: none;}
.circle{width: 10px;height: 10px;background-color: var(--c-blau-2); border-radius: 50%; border-radius: 100%; cursor: pointer;}

.bericht{opacity: 0; pointer-events: none; display: none; min-height: 200px; padding: 1rem;  border: 2px solid var(--c-blau-2); border-radius: 10px; overflow: hidden;}
.bericht strong{max-width: 400px; display: block;}
.bericht.active{opacity: 1; pointer-events: auto; display: flex;}
.berichte .menu{justify-content: space-between;}

.header{z-index: 10000;}

.logo{width: 100px;}

.footer{background-color: var(--c-grey-1); display: grid; margin-top: 8rem;}
.fbtm{grid-column: 1/-1; display:flex;align-items:center; justify-content:center; gap: 1rem; padding-top: 3rem; flex-direction: column;}
.social,.social *{max-width: 100%; text-align: center;}
.social i{font-size: 2rem; color:var(--c-black);}

.social p{padding-bottom: 1rem;}
.social{margin-top: 2rem;}

input,.bb input{border:none; outline:none; padding: 0.5rem; border-radius: 4px; font-family: var(--font-family); font-size: 1rem; color: var(--c-black) !important;}
.mover{position: absolute;height: 300px; margin-bottom: 300px; overflow: hidden; display: flex; animation: loop 40s linear infinite;}
.mover img{width: auto; height: 100%; padding: 1rem;}
@keyframes loop {
  0% {transform: translateX(0);}
  100% {transform: translateX(-50%);}
  
}
.movercontainer{overflow: hidden; position: relative; height: 300px;}

@media (min-width:1000px) {
.hbig{font-size: 4rem;}

  .social{margin-top: 0rem;}
  .fbtm{flex-direction: row;}
  .social,.social *{text-align: right;}
  h1{font-size: 3rem;}
  .footer{grid-template-columns: 1fr 1fr; }
    .flexdirection{flex-direction: row; }
    .split{display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;}
    .split.reverse > *:nth-child(1){order: 2;}
    .split.reverse > *:nth-child(2){order: 1;}
    .desktop-only{display: block;}
    .mobile-only{display: none;}
}