@font-face {
    font-display: swap; font-family: "et"; font-style: normal; font-weight: 500;
    src: url("fonts/EDEKATextWeb-Regular.woff2") format("woff2"), url("fonts/EDEKATextWeb-Regular.woff") format("woff")
}

@font-face {
    font-display: swap; font-family: "eb"; font-style: normal; font-weight: 700;
    src: url("fonts/EDEKATextWeb-Bold.woff2") format("woff2"), url("fonts/EDEKATextWeb-Bold.woff") format("woff");
}

@font-face {
    font-display: swap; font-family: "eh"; font-style: normal; font-weight: 700;
    src: url("fonts/EDEKAHeadWEB-Black.woff2") format("woff2"), url("fonts/EDEKAHeadWEB-Black.woff") format("woff")
}

:root {
  --lineheight: calc(var(--mainsize) * 1.5);
  --gap: var(--lineheight);
  --br: calc(var(--mainsize) * .75);

  --text--xs: calc(var(--mainsize) * .5);
  --text--sm: calc(var(--mainsize) * .75);
  --text--md: calc(var(--mainsize) * 1.125);
  --text--lg: calc(var(--mainsize) * 1.25);

  --lightgray: var(--gray);
  --lightgray--0: var(--gray--0);
  --lightgray--25: var(--gray--25);
  --lightgray--50: var(--gray--50);
  --lightgray--75: var(--gray--75);

  --gray: var(--gray2);
  --gray--0: var(--gray2--0);
  --gray--25: var(--gray2--25);
  --gray--50: var(--gray2--50);
  --gray--75: var(--gray2--75);

  --darkgray: rgba(27,27,27,1);
  --darkgray--0: rgba(27,27,27,0);
  --darkgray--25: rgba(27,27,27,.25);
  --darkgray--50: rgba(27,27,27,.5);
  --darkgray--75: rgba(27,27,27,.75);

  --edeka--gelb: var(--color1);
  --edeka--gelb--0: var(--color1--0);
  --edeka--gelb--25: var(--color1--25);
  --edeka--gelb--50: var(--color1--50);
  --edeka--gelb--75: var(--color1--75);

  --edeka--blau: var(--color2);
  --edeka--blau--0: var(--color2--0);
  --edeka--blau--25: var(--color2--25);
  --edeka--blau--50: var(--color2--50);
  --edeka--blau--75: var(--color2--75);

}


.row {
--bs-gutter-x: 1.5rem;
--bs-gutter-y: 0;
display: flex;
flex-wrap: wrap;
margin-top: calc(-1 * var(--bs-gutter-y));
margin-right: calc(-.5 * var(--bs-gutter-x));
margin-left: calc(-.5 * var(--bs-gutter-x));
}

html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust:100%;
  height: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  box-sizing: border-box;
}

html, body {
  scroll-behavior: smooth;
  margin: 0;
  padding:0;
}

body {
  font-family: "et", "San Francisco", Roboto, "Liberation Sans", Helvetica, "Arial", sans-serif;
  color: var(--black);
  font-weight: 500;
  font-style: normal;
  font-size: var(--mainsize);
  line-height: var(--lineheight);
  background: var(--white);
  text-rendering: optimizeSpeed;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  min-height: 100%;
}


/* ########## Farben ################################################################################################################################# */

.black {color: var(--black)}
.black--0 {color: var(--black--0)}
.black--25 {color: var(--black--25)}
.black--50 {color: var(--black--50)}
.black--75 {color: var(--black--75)}

.white {color: var(--white)!important}
.white--0 {color: var(--white--0)!important}
.white--25 {color: var(--white--25)!important}
.white--50 {color: var(--white--50)!important}
.white--75 {color: var(--white--75)!important}

.lightgray {color: var(--lightgray)}
.lightgray--0 {color: var(--lightgray--0)}
.lightgray--25 {color: var(--lightgray--25)}
.lightgray--55 {color: var(--lightgray--55)}
.lightgray--75 {color: var(--lightgray--75)}

.gray {color: var(--gray)}
.gray--0 {color: var(--gray--0)}
.gray--25 {color: var(--gray--25)}
.gray--55 {color: var(--gray--55)}
.gray--75 {color: var(--gray--75)}

.edeka--gelb {color: var(--edeka--gelb)}
.edeka--gelb--0 {color: var(--edeka--gelb--0)}
.edeka--gelb--25 {color: var(--edeka--gelb--25)}
.edeka--gelb--50 {color: var(--edeka--gelb--50)}
.edeka--gelb--75 {color: var(--edeka--gelb--75)}

.edeka--blau {color: var(--edeka--blau)}
.edeka--blau--0 {color: var(--edeka--blau--0)};
.edeka--blau--25 {color: var(--edeka--blau--25)}
.edeka--blau--50 {color: var(--edeka--blau--50)}
.edeka--blau--75 {color: var(--edeka--blau--75)}

.black--bg {background-color: var(--black)}
.black--bg--0 {background-color: var(--black--0)}
.black--bg--25 {background-color: var(--black--25)}
.black--bg--50 {background-color: var(--black--50)}
.black--bg--75 {background-color: var(--black--75)}

.white--bg {background-color: var(--white)}
.white--bg--0 {background-color: var(--white0)}
.white--bg--25 {background-color: var(--white25)}
.white--bg--50 {background-color: var(--white50)}
.white--bg--75 {background-color: var(--white75)}

.lightgray--bg {background-color: var(--lightgray)}
.lightgray--bg--0 {background-color: var(--lightgray--0)}
.lightgray--bg--25 {background-color: var(--lightgray--25)}
.lightgray--bg--55 {background-color: var(--lightgray--55)}
.lightgray--bg--75 {background-color: var(--lightgray--75)}

.gray--bg {background-color: var(--gray)}
.gray--bg--0 {background-color: var(--gray--0)}
.gray--bg--25 {background-color: var(--gray--25)}
.gray--bg--55 {background-color: var(--gray--55)}
.gray--bg--75 {background-color: var(--gray--75)}

.edeka--gelb--bg {background-color: var(--edeka--gelb)}
.edeka--gelb--bg--0 {background-color: var(--edeka--gelb--0)}
.edeka--gelb--bg--25 {background-color: var(--edeka--gelb--25)}
.edeka--gelb--bg--50 {background-color: var(--edeka--gelb--50)}
.edeka--gelb--bg--75 {background-color: var(--edeka--gelb--75)}

.edeka--blau--bg {background-color: var(--edeka--blau)}
.edeka--blau--bg--0 {background-color: var(--edeka--blau--0)}
.edeka--blau--bg--25 {background-color: var(--edeka--blau--25)}
.edeka--blau--bg--50 {background-color: var(--edeka--blau--50)}
.edeka--blau--bg--75 {background-color: var(--edeka--blau--75)}






/* ########## transitions ################################################################################################################################# */
.transition--all {
  -webkit-transition: all 1.5s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: all 1.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.transition--height {
  -webkit-transition: height .75s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: height .75s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.transition--opacity {
  -webkit-transition: opacity 1.5s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: opacity 1.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.transition--color, .text a {
  -webkit-transition: color 1.5s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: color 1.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.transition--border {
  -webkit-transition: border 1.5s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: border 1.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.transition--top {
  -webkit-transition: top .5s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: top .5s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.transition--padding {
  -webkit-transition: padding .5s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: padding .5s cubic-bezier(0.25, 0.1, 0.25, 1);
}





/* ########## default ################################################################################################################################# */

main.main {padding: calc(var(--gap) * 3) 0 ;}
main.main.no--cover {padding-top:0; margin-top: calc(112px + calc(var(--gap) * 2));}

.er {font-family: "et"; font-style: normal; font-weight: 500;}
.eb, .no_btn {font-family: "eb"; font-style: normal; font-weight: 700;}
.eh {font-family: "eh"; font-style: normal; font-weight: 700;}

i.tiny {font-size: 75%;}

.godzilla {
  font-size: calc(var(--mainsize) * 3);
}

.page--heading {
  margin-bottom: calc(var(--gap) * .25);
  line-height: 1;
}

.page--title {
  margin-bottom: calc(var(--gap) * 1.5);
}

.page--title span:after, .get--span--effect span::after {
background-color: #fce531;
content: "";
display: block;
height: 3px;
margin-top: calc(var(--gap) * 1.25);
width: calc(var(--gap) * 2);
}

h1, h2, h3, h4, h5, h6 {
  font-family: "eh", "San Francisco", "Roboto Condensed", "Liberation Sans Narrow", "Helvetica Neue", "Arial Narrow", sans-serif-condensed, sans-serif;
  font-weight: bold;
  line-height: 1;
}

.text h1, .text h2, .text h3, .text h4, .text h5, .text h6 {
  font-size: calc(var(--mainsize) * 1.75);
  font-family: "eb";
  font-style: normal;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: var(--gap);
}

.text p {
  margin-bottom: var(--gap);
}

.text p:last-of-type {
  margin-bottom: 0;
}

.text.intro {
  margin-bottom: var(--gap);
}

.text p + h1, .text p + h2, .text p + h3, .text p + h4, .text p + h5, .text p + h6 {
  margin-bottom: var(--gap);
  padding-top: var(--gap);
}

.text p em {
  font-style: normal;
}

.text a {
  font-family: "eb";
  font-style: normal;
  font-weight: 700;
  text-decoration: underline;
  color: var(--black--75);
}

.text a:hover, .text a:focus, .text a:active, .text a:active:hover, .text a:active:focus {
  color: var(--black);
}

.text .iregdnwas a::after {
  content: '\F27B';
  font-family: "bootstrap-icons";
  font-size: 75%;
}

.text--xs {
  font-size: var(--text--xs);
  letter-spacing: calc(var(--mainsize) * .0675);
  line-height: calc(var(--text--xs) * var(--lineheight));
}

.text--sm, .text p em {
  font-size: var(--text--sm);
  line-height: calc(var(--text--sm) * var(--lineheight));
}

.text--md {
  font-size: var(--text--md);
  line-height: calc(var(--text--md) * var(--lineheight));
}

.text--lg, .cover--page--header p {
  font-size: var(--text--lg);
  line-height: calc(var(--text--lg) * var(--lineheight));
}

.shadow {
  -webkit-box-shadow: 0px 15px 10px -10px rgba(0, 0, 0, 0.5)!important;
  box-shadow: 0px 15px 10px -10px rgba(0, 0, 0, 0.5)!important;
}

.shadow2 {
  -webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
  box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
}

.no_shadow {
  -webkit-box-shadow: none!important;
  box-shadow: none!important;
}

.no_btn {
  background: unset;
  border: unset;
  border-radius: unset;
  padding: unset;
  margin: unset;
  color: inherit;
}

.btn,
.btn:link,
.btn:visited,
.btn:active,
.btn:active:focus,
.btn:active:hover,
.btn:hover,
.btn:focus {
  outline: none!important;
  box-shadow: none!important;
  border-radius: var(--br);
  text-transform: uppercase;
  padding: calc(var(--gap) * .75) calc(var(--gap) * 1);
  font-size: var(--mainsize);
  font-weight: 700;
  font-style: normal;
  font-family: "eb";
  line-height: 1;
  border-radius: var(--br);
  text-align: center;
  transition:
    color 1s cubic-bezier(0.25, 0.1, 0.25, 1),
    background-color 1s cubic-bezier(0.25, 0.1, 0.25, 1),
    border-color 1s cubic-bezier(0.25, 0.1, 0.25, 1);
  color: var(--white)!important;
  border: 1px solid var(--white)!important;
  background-color: var(--black)!important;
}

.btn-primary,
.btn-primary:link,
.btn-primary:visited {
  color: var(--black)!important;
  border: 1px solid var(--edeka--gelb)!important;
  background-color: var(--edeka--gelb)!important;
}

.btn-primary:hover,
.btn-primary:active:focus,
.btn-primary:active:hover,
.btn-primary:active {
  color: var(--edeka--blau)!important;
  border: 1px solid var(--edeka--gelb)!important;
  background-color: var(--edeka--gelb)!important;
}

a {
  color: inherit;
  text-decoration: none;
}

.uc {
  text-transform: uppercase;
}

.nouc {
  text-transform: none;
}

.lh--1 {
  line-height: 1!important;
}

/* ########## MAINMENU ################################################################################################################################# */
/* ########## TOPBAR ########## */
.topbar {
  height: 33px;
  max-height: 33px;
  line-height: 1;
}

.topbar p::after {
  content: ' | ';
  font-family: "et";
  font-weight: 500;
  font-style: normal;
  color: var(--black--50);
  padding-left: calc(var(--gap) * .25);
  padding-right: calc(var(--gap) * .35);
}

.topbar ul li a {
  padding-left: calc(var(--gap) * .15);
  padding-right: calc(var(--gap) * .15);
}
.topbar ul li:last-child a {
  padding-right: 0
}
.topbar ul li:first-child a {
  padding-left: 0
}
/* ########## MAINMENU ########## */

a.navbar-brand img {
  width: auto;
  display: block;
}

a.navbar-brand img.tiny {
  height: 25px;
}

a.navbar-brand img.logo.huge {
  height: 45px;
}

a.navbar-brand:hover {
  color: inherit;
}

.mainmenu {
  width: 100%;
  height: auto;
  margin: 0 auto;
  background: linear-gradient(0deg, rgba(0, 0, 0,.5) 0%, rgba(0, 0, 0, 0) 100%), url("../images/e.jpg");
  background-position: auto, top left;
  background-repeat: unset, repeat;
  -webkit-background-size: unset, 400px 400px;
  background-size: unset, 400px 400px;
  color: var(--white);
}

.mainmenu.nav--show {top: 0;}
.mainmenu.nav--hide {top: -33px;}

.mainmenu nav.ew--mainnav ul li a {
  color: inherit;
  line-height: 1;
}

.mainmenu nav.ew--mainnav .navbar-toggler i {
  font-size: calc(var(--mainsize) * 2);
  color: var(--white);
}

.mainmenu nav.ew--mainnav .navbar-toggler:hover i {
  color: var(--edeka--gelb);
}
.mainmenu nav.ew--mainnav ul li:hover a {
  color: var(--edeka--gelb);
}

.mainmenu nav.ew--mainnav ul li a.active {
  color: var(--edeka--gelb);
}

.mainmenu nav.ew--mainnav ul li:last-child a {
  padding-right: 0;
}


/* ########## FOOTER ################################################################################################################################# */
/* ########## BOTTOMBAR ########## */
footer {
  width: 100%;
  height: auto;
  margin: 0 auto;
  background: var(--darkgray);
  color: var(--white);
}

footer .footer--bottom {
  line-height: 1.35;
}

footer ul.credits li:not(:last-child)::after {
  content: ' / ';
  color: var(--white--25);
}
/* ####################################################### figure picture image ####################################################### */

.cover--wrapper {
  max-width: 2500px;
  margin: auto;
  margin-top: 112px
}

.carousel. .carousel-inner, .carousel-item, .cover--wrapper  {
  border-radius: 0;
}

.cover--overlay {
  position: absolute;
  top:0;
  right: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  background: -webkit-linear-gradient(0deg, rgba(0, 0, 0, .75) 10%, rgba(0, 0, 0, 0) 75%);
  background: -moz-linear-gradient(0deg, rgba(0, 0, 0, .75) 10%, rgba(0, 0, 0, 0) 75%);
  background: linear-gradient(0deg, rgba(0, 0, 0, .75) 10%, rgba(0, 0, 0, 0) 75%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000", endColorstr="#000000", GradientType=0);
  border-radius: 0;
}

.cover--caption {
position: absolute;
right: 0;
left: 0;
bottom: calc(var(--gap) * 4);
color: var(--bs-carousel-caption-color);
text-align: center;
}

.cover--page--header p {
  margin-top: calc(var(--gap) * .25);
  margin-bottom: 0;
}
figure.image {
  background: url("../images/e.jpg"), var(--gray);
  background-size: contain;
  background-position: bottom center;
  margin-bottom: 0;
  position: relative;
}

figure.image picture {
  position: relative;
  display: block;
  --w: 4;
  --h: 5;
  margin: 0;
  padding: 0;
  padding-bottom: calc(100% / var(--w) * var(--h));
  background-size: 100px auto!important;
  background-repeat: no-repeat!important;
  background-position: center!important;
  margin-bottom: 0;
  overflow: hidden;
  background: url("../images/loading.gif");
}

figure.image picture img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  border: 0;
  -webkit-transition: transform 3s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 3s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: transform 3s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

figure.image picture[data-contain] img {object-fit: contain;}
figure.image picture img.fade {opacity: 0;}
figure.image picture img.scale {transform: scale(1.075);}
figure.image picture img.fade.img--loaded {opacity: 1;}
figure.image picture img.scale.img--loaded {transform: scale(1);opacity: 1;}

figure.image small {
  position: absolute;
  bottom: var(--gap);
  right: var(--gap);
  margin: 0;
  padding: 0;
  display: flex;
  align-items:flex-start;
  justify-content: flex-end;
  writing-mode: sideways-lr;
  text-transform: uppercase;
  font-family: "eb";
  font-style: normal;
  font-weight: 700;
  font-size: var(--text--xs);
  line-height: 1;
  letter-spacing: calc(var(--mainsize) * .0675);
  color: var(--white--50);
}

/* ########## responsive ################################################################################################################################# */
/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {
  figure.image picture {--w: 1;--h: 1;}
  footer p.copyright::after {content: ',';}
  .godzilla {font-size: calc(var(--mainsize) * 3.25);}
}

/* Medium devices (tablets, 768px and up)*/
/* ##########  menu collapse ########## */
@media (min-width: 768px) {
  figure.image picture {--w: 5;--h: 4;}

  figure.image,
  figure.image picture,
  figure.image picture img,
  .cover--wrapper,
  .cover--overlay,
  .carousel,
  .carousel-inner,
  .carousel-item  {
    border-radius: var(--br);}

  .topbar p.topbar--text span.topbar--address::before {
    content: ' | ';
    font-family: "et";
    font-weight: 500;
    font-style: normal;
    color: var(--black--50);
    padding-left: calc(var(--gap) * .35);
    padding-right: calc(var(--gap) * .35);
  }

.topbar p::after {
    padding-left: calc(var(--gap) * .35);
    padding-right: calc(var(--gap) * .45);
  }

.topbar ul li a {padding-left: calc(var(--gap) * .25);padding-right: calc(var(--gap) * .25);}
.godzilla {font-size: calc(var(--mainsize) * 3.5);}


/* LOGO  */
a.navbar-brand img.tiny {height: 45px;}
a.navbar-brand img.logo.huge {height: 85px;}
/* MAIN  */
main.main.no--cover {margin-top: calc(152px + calc(var(--gap) * 2));}
/* COVER  */
.cover--wrapper {margin-top: calc(1.5rem + 152px);}


}

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
  figure.image picture {--w: 5;--h: 3;}
  .godzilla {font-size: calc(var(--mainsize) * 3.75);}

  /* COVER  */
  .cover--wrapper {margin-top: calc(3rem + 152px);}
}

/* X-Large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
  figure.image picture {--w: 7;--h: 4;}
  .godzilla {font-size: calc(var(--mainsize) * 4);}
}

/* XX-Large devices (larger desktops, 1400px and up)*/
@media (min-width: 1400px) {
  figure.image picture {--w: 9;--h: 4;}
  .godzilla {font-size: calc(var(--mainsize) * 4.25);}
}
