*{ box-sizing: border-box; }

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video{
  margin:0; padding:0; border:0; font-size:100%;
  font:inherit; vertical-align:baseline; color:inherit; text-decoration:inherit;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{ display:block; }
ol, ul{ list-style:none; }
blockquote, q{ quotes:none; }
blockquote:before, blockquote:after, q:before, q:after{ content:''; content:none; }
table{ border-collapse:collapse; border-spacing:0; }

@font-face{
  font-family:"Montserrat";
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url("/assets/fonts/Montserrat/Montserrat-VariableFont_wght.ttf");
}
@font-face{
  font-family:"archivo";
  font-style:normal;
  font-weight:900;
  font-display:swap;
  src:url("/assets/fonts/Archivo/Archivo-VariableFont_wdth\,wght.ttf");
}

:root{
  --clr-black:#323232;
  --clr-accent:#d73194;
  --clr-darkblue:#012b48;
  --clr-lightgrey:#f9f9f9;
  --clr-lightgreen:#25D366;
  font-family:"Montserrat",sans-serif;
}
p{
  font-family:"Montserrat",sans-serif;
  color:var(--clr-black);
  font-size:25px;
  font-weight:300;
  line-height:30px;
}
.fixed-size{ 
    max-width:1250px; margin-inline:auto; 
}
.fixed-size-small{ 
    max-width:950px; margin-inline:auto; 
}

.box{
  border-radius:20px;
  background:#012f4f;
  box-shadow:-9px -9px 11px #012741, 9px 9px 11px #012f4f;
  padding:60px;
}
h2{ 
    font-family: "archivo";
    font-size: 35px!important; 
    letter-spacing: 1.3px; 
    text-transform: uppercase ;
}
.header{
  display:flex;  
  z-index:2; 
  position:relative;
  background-color: var(--clr-lightgrey);
width:100vw; 
  justify-content:space-between; 

}
.navigation{ 
    display:flex; 
    justify-content:center; 
    align-items:center;   
    margin-right: 100px;
}
.navigation ul{ 
    display:flex; 
    flex-direction:row; 
    font-size:25px; 
    align-items: center; 
    justify-content: center;
}
.logo{
  margin: 50px 0px 50px 50px; 
  width: 300px;
  height: 100px;
}
.background-image-header{
  background-image:url("/assets/image/cristian-londono-p_Fjw6Yq4VA-unsplash.jpg");
  background-repeat:no-repeat; background-size:cover;
  width:100%; 
  height:1000px; 
  padding:0px; 
  order:0; 
  margin-top:-120px; 
  position:relative; 

}
/*.logo-fade::after{
  position:absolute; 
  background:radial-gradient(rgba(255,255,255,1) 40%, rgba(0,0,0,0) 70%);
  top:0; 
  left:0; 
  transform:translate(-50%,-50%); 
  height:700px; 
  content:""; 
  width:2400px; 
  object-fit:cover;
} */
.info-text{ 
    margin-top:60px; 
}
.info-text p{ 
    font-size:20px; 
}
.info-text h2{ 
    margin-bottom:20px; 
}


.curve-sep{ background:var(--clr-darkblue); }
.curve-sep svg{ display:block; width:100%; height:clamp(30px,6vw,100px); }


.teamgrid{
  display:grid; 
  gap:40px; 
  align-items:start;
  grid-template-columns:repeat(3,1fr);
      margin-bottom: 120px; 
      margin-top: 250px;

}
.teamgrid-card img{ 
    width: 100%; 
    border-radius:20px;  
}
.teamgrid-card{ 
    display:flex; 
    flex-direction:column; 
    align-items:center; 
    text-align:left; 
    object-fit:cover;  
    
}
.banner-color{ 
    background-color:var(--clr-darkblue); 
    padding:120px 0; 
    margin-top: 200px; 
}
.banner-color li{ 
    color:var(--clr-lightgrey); 
    font-size:25px; 
}
.banner-content{ 
    display:flex; 
    position:relative; 
    margin-bottom: 150px;
      margin-top: 150px;

}
.banner-image img{
  width:800px; 
  height:auto; 
  position:absolute; 
  left:550px; 
  bottom: -40px;
  border-radius:20px; 
  box-shadow:0 0 35px -15px var(--clr-accent); 

}
.banner-text ul{
    list-style:initial; 
    margin-left:25px; 
}
.banner-text li{ 
    margin-bottom:20px; 
}
.banner-color p{ 
    color:var(--clr-lightgrey); 
}
.banner-text h2{ 
    color:var(--clr-lightgrey); 
    text-align:left; 
    margin-bottom:30px; 
}
.banner-text{
      margin-top: 50px;

}
.content{ display:flex; 

    justify-content:space-around; 
}

.qr-wrapper{ 
    height:550px; 
    background:var(--clr-darkblue); 
    margin-top:150px; 
    padding-bottom: 100px;
}
.wp-logo{
  position:absolute; 
  top:-90px; 
  left:-90px; 
  z-index:2; 
  width:200px!important; 
  height:auto;
}
.qr-container{
  text-align:center; 
  display:inline-block; 
  padding:20px; 
  background:var(--clr-lightgrey); 
  border-radius:20px;

}
.qr-container p{ 
    color:var(--clr-black); 
    font-family:"archivo"; 
}
.qr-container img{ 
    width:250px; 
}

.fb-container{
  padding:70px; 
  background:var(--clr-lightgreen); 
  border-radius:20px;
  transition:transform .3s; 
  animation:qr-wiggle 4s ease-in-out infinite; 
} 

.fb-container:hover {
   transform:scale(1.05) rotate(-2deg);  
  animation-play-state: paused;
} 

.wa-btn{
  border:0; 
  border-radius:20px; 
  padding:14px 50px; 
  font-weight:700;
  font-family:"Montserrat",sans-serif; 
  text-align:center; 
  background:var(--clr-darkblue);
  color:var(--clr-lightgrey); 
  box-shadow:0 8px 16px rgba(0,0,0,.20); 
  transition:transform .3s;
}
.wa-btn:hover{ 
    transform:scale(1.05) 
    rotate(-2deg); 
      animation-play-state: paused!important;
}
.fb-container .wa-btn{ 
    display:none; 
}
.fb-container img{ 
    width:350px; 
} 
  .banner-text li{ 
    font-size: 20px;
}
.thin-line{ 
    border:none; 
    border-top:1px solid rgba(255,255,255,.4); 
    margin:0; 
    background:none; 
}

.öffnungszeiten table{
  color:var(--clr-lightgrey); 
  font-size:16px; 
  line-height:1.6; 
  letter-spacing:.5px; 
  gap:60px; 
  font-weight:400!important;
}
.adresse p{ 
    color:var(--clr-lightgrey); 
    line-height:1.6; 
    letter-spacing:.5px; 
    gap:60px; 
    font-weight:400; 
      font-size:16px;  
     min-width: fit-content; 
     margin-inline: auto;

}
.icon{
    margin-left: 22px;
    width: 45%;
}
.öffnungszeiten td{ 
    padding:5px 15px; 
}

.bg-color{ 
    background-color:var(--clr-darkblue); 
}

.foot{ 
    display:flex; 
    justify-content:center; 
    gap:20px; 
}
.foot a{ 
    color:var(--clr-lightgrey); 
    margin-bottom:80px; 
}

.flex{
    display:flex; 
    justify-content:center;
    align-items:center; 
    gap:150px; top:-70px; 
    position:relative;
}
.number{ 
    display:flex; 
    align-items:center; 
	gap:3px; 
	margin-right: 22px;
}
.number svg {
  width: 40px!important;
}
svg {
    width: 60%;
    height: 60%; 
    display: flex;
}
.phone svg{ 

    align-items: top;
} 

.box2{
  border-radius:20px;
  background:#012f4f;
  box-shadow:-9px -9px 11px #012741, 9px 9px 11px #012f4f;
  padding:20px;
} 
.bandf-color {
  background-color: #E9B8C5 ;
} 
.bandf-img {
  padding: 50px; 
  display: flex;
  flex-direction: row;
  justify-content: center; 
  align-items: center;  
  gap: 40px;
} 
.bandf-img a {
  margin-top: -31px;
}
.bandf-img p{
  color: var(--clr-lightgrey);
  text-align: bottom;
  font-size: 16px; 
  
}
.banner-text h2 {
color: var(--clr-black);
}

.wave svg{
  width: 100%;
    transform: scaleY(-1);
    margin-top: -121px;
     display:block; width:100%; height:clamp(30px,6vw,100px);  

    } 
.wave {
  padding-bottom: 150px;
}
@keyframes qr-wiggle{
  0%,78%{ transform:translate3d(0,0,0) rotate(0) scale(1); }
  82%{ transform:translate3d(1px,0,0) rotate(-1.1deg) scale(1.005); }
  86%{ transform:translate3d(-1px,0,0) rotate(1.3deg) scale(1.005); }
  90%{ transform:translate3d(1px,0,0) rotate(-1deg) scale(1.004); }
  94%{ transform:translate3d(-1px,0,0) rotate(.8deg) scale(1.003); }
  100%{ transform:translate3d(0,0,0) rotate(0) scale(1); }
}

@media (max-width:1800px){
  .flex{ 
    gap:40px; 
}

  header{ 
    max-width:100%; 
}
}

@media (max-width:1600px){
  .fixed-size{ 
    max-width:90%; 
}
  .fixed-size-small{ 
    max-width:80%; 
}

}

@media (max-width:1430px){
  .banner-content{ 
    display:grid; 
    grid-template-columns:1fr; 
    row-gap:28px;  
    margin-top: 0;
}
  .banner-image img{ 
    position:static; 
    width:60%; 
    height:auto; 
    border-radius:20px; 
    box-shadow:0 0 35px -15px var(--clr-accent); 
}
  .fb-container{ 
    height:60%; 
}
}
@media (max-width:1380px){
  .header{ 
    display:flex; 
    flex-direction:column; 
}

.fb-container {
    margin-left: 40px;
}
  .logo{ 
    text-align:center; 
}


.box {
  width: 90%; 
  margin-inline: auto;
} 
.logo{
  margin-left: 25%;
} 
.navigation{
  margin-bottom: 30px;
}
}

@media (max-width:1200px){
  .teamgrid{ 
    grid-template-columns:repeat(2,1fr); 
    gap:28px;  
}
  .teamgrid-card img{
     width:100%; 
    }
  .background-image-header{ 
    height:530px!important; 
    width:100vw!important; 
} 

}

@media (max-width:1100px){
  .content{ 
    flex-wrap:wrap; 
}  
.box2{
  margin-top: 50px;
}
.fb-container {
    margin-bottom: 50px;
} 
  .qr-code{ 
    display:none; 
}
  .fb-container .wa-btn{ 
    display:flex; 
    align-items:center; 
    justify-content:center; 
    width:100%; 
    height:150px; 
    text-align:center;  ;

} 
.banner-image img {
  margin-inline: auto; 
  text-align: center;
}
.flex {
    gap: 20px;
}
.fb-container {
    padding: 0px;   
}
.wa-btn {
        background-color: var(--clr-lightgreen);
        height: 90px!important;
    }

  .qr-container{ 
    width:80%; 
}
  .qr-container p{ 
    font-size:25px!important; 
}
  .flex{ 
    flex-wrap:wrap; 
}
  .wp-logo{ 
    top:-50px; 
    left:-50px; 
    width:120px!important; 
} 
.flex {
  top: -30px!important; 
  gap: 50px;
}
.banner-content{
  margin-left: 25%; 
  margin-bottom: -50px;
}
}

@media (max-width:900px){
  .navigation ul{ 
    align-items:center;
    padding: 20px 0px;
 }
  .number{ 
    font-size:0; 
    line-height:0;
  }
  .navigation{
    margin-right: -0px;
  }
  .logo{
    margin-left: 130px;
  }
  .number .phone{ 
    width:50px; 
    height:50px; 
    margin-right:0; 
} 
h2{ 
    font-family: "archivo";
    font-size: 25px!important; 
    letter-spacing: 1.3px; 
    text-transform: uppercase ;
} 
.wave svg {
  margin-top: -121px;
  left: -0px;
  position: absolute;
    }
.flex {
    top: -30px;
}
.qr-wrapper {
    height: auto;
}
  p{ 
    font-size:17px; 
}
  tbody td{ 
    font-size:17px!important; 
}
  .banner-text li{ 
    font-size:17px; 
} 
.wp-logo{
  top: -65px;
} 
.banner-color {
  padding: 100px;
} 
.banner-text {
  margin-inline: auto; 

} 
.banner-image img{
  margin-inline: auto;
}
.bandf-img {
  flex-wrap: wrap;
}
}
@media (max-width:768px){
  .logo {
    margin-left: 100px;
  } 
  .navigation{
    margin-right: -0px;
  }
}
@media (max-width:680px){
  .banner-image img{ 
    width:100%; height:auto; 
} 
.navigation {
  margin-right: 0;
}
  .banner-content{ 
    margin-top:40px; 
} 
.number li a {
    width: 40px;
    height: 40px;
}
}

@media (max-width:580px){
  .navigation ul{ 
    gap:50px; 
} 
.teamgrid {
  margin-top: -70px;
    margin-bottom: -100px;
}
.info-text p {
  font-size: 16px;
}
.banner-image {
    margin-bottom: 40px;
}
  .logo img{ 
    max-width:99%; 
}
.logo {
    margin-inline: auto;
    margin: 50px 0px -20px 90px;
  }
.navigation li {
    width: 50px; 
}
  .banner-color{ 
    padding: 10px 0; 
}
  .background-image-header{ 
    height:430px!important; 
    width:100vw!important; 
}
  .adresse{ 
    width:90%; 
    text-align:center; 
    margin-inline:auto; 
    margin-bottom: 100px;
}
  .öffnungszeiten{ 
    margin-inline:auto; 
    margin-top: 40px;
}
.foot a {
    font-size: 12px; 
    margin-bottom: 20px;
} 
.foot {
 flex-direction: column;  
 text-align: center;
 gap: 0px; 

} 
.logo {
    max-width: 80%;
} 
.icon{
  margin-left: 0px;
}
.wave svg {
    margin-top: -11px;
}
.banner-content{
  margin-bottom: 100px;
  margin-inline: auto;
}
}

@media (max-width:450px){
    .logo {
        max-width: 70%;  
        width: unset;
        height: unset; 
        margin-bottom: -30px; 
        margin-left: 55px;
    } 
    .navigation li {
        margin-inline:auto;
        padding: 30px 0px ;

    } 

    .logo-fade::after{
  height:200px;
} 
  .background-image-header{
    height: 250px!important;
  }
  p{ 
    font-size:16px; 
} 
  tbody td{ 
    font-size:16px!important; 
}
  .banner-text li{ 
    font-size:16px; 
} 
.teamgrid {
    gap: 10px; 
    margin:10px 5px 50px 5px; 
    
} 
.fb-container {
    max-width: 70%;
    text-align: center; 
    margin-bottom: 5px 0px;
} 
.öffnungszeiten td {
    padding: 10px 3px;
} 
.content {
    gap: 40px;
}  
.box{
  padding: 10px;
}
.info-text p {
  font-size: 16px;
} 
.banner-color {
  margin-top: 10px;
} 
.wave {
  padding-bottom: 20px;
} 
.banner-content{
  margin-bottom:40px;
}
}









.banner-pink{ 
    background-color:#E9B8C5;  
    padding: 1px;
    margin-top: 50px;
}
.banner-pink li{ 
    color:var(--clr-black); 
    font-size:25px; 
} 
.banner-pink h2 {
  color: var(--clr-black);
}
.box-pink {
    border-radius:20px;
  background:#E9B8C5;
box-shadow: 0 0 35px -15px var(--clr-accent);
  padding: 20px 90px;
  margin: 20px!important;
}

/* ==============================
   HARMONISCHE SCHRIFTGRÖSSEN
   ============================== */

/* === Basisgröße (Standard / Desktop  ≥1200px) === */
html, body {
  font-size: 16px !important;
}

p, li, a {
  font-size: 16px !important;
  line-height: 1.6 !important;
}

h1 {
  font-size: 33px !important;
}
h2 {
  font-size: 22px !important;
}
h3 {
  font-size: 18px !important;
}
h4, h5, h6 {
  font-size: 16px !important;
}

/* Navigation & Buttons */
.navigation ul {
  font-size: 16px !important;
}
.number {
  font-size: 16px !important;
}
.wa-btn {
  font-size: 16px !important;
}

/* Angebotsliste / Tabellen / Footer */
.banner-text li {
  font-size: 16px !important;
}
.öffnungszeiten table,
.öffnungszeiten td,
.öffnungszeiten th {
  font-size: 15px !important;
}
.adresse p {
  font-size: 16px !important;
}
.foot a {
  font-size: 14px !important;
}
.bandf-img p {
  font-size: 13px !important;
}

/* ==============================
   RESPONSIVE ANPASSUNG
   ============================== */

/* Großbildschirme (≥1600px) */
@media (min-width: 1600px) {
  h1 { font-size: 36px !important; }
  h2 { font-size: 24px !important; }
  h3 { font-size: 20px !important; }
  p, li, a { font-size: 17px !important; }
}

/* Tablet (768–1199px) */
@media (max-width: 1199px) {
  h1 { font-size: 30px !important; }
  h2 { font-size: 20px !important; }
  h3 { font-size: 17px !important; }
  p, li, a { font-size: 15px !important; }
  .foot a { font-size: 13.5px !important; }
  .bandf-img p { font-size: 12.5px !important; }
}

/* Mobile (≤767px) */
@media (max-width: 767px) {
  h1 { font-size: 26px !important; }
  h2 { font-size: 18px !important; }
  h3 { font-size: 15px !important; }
  p, li, a { font-size: 13px !important; }
  .navigation ul { font-size: 14px !important; }
  .wa-btn { font-size: 14px !important; }
  .öffnungszeiten table,
  .öffnungszeiten td,
  .öffnungszeiten th { font-size: 13px !important; }
  .foot a,
  .bandf-img p { font-size: 12px !important; }
}