/* KH-EM.de - Rekonstruierte Styles basierend auf Original-CSS */

/* === FONTS === */
body { font-family: "Open Sans", arial, sans-serif; font-size: 1rem; font-weight: 400; line-height: 1.6; overflow-x: hidden; margin: 0; padding: 0; color: #483112; background: #f9f3e9; }
body, body * { box-sizing: border-box; }
address, em, i { font-style: normal; }
b, strong { font-weight: 700; }
main, picture { display: block; }
img { display: block; height: auto; max-width: 100%; }
figure { margin: 0; }
table { border-spacing: 0; border-collapse: collapse; width: 100%; }
a { color: #f60; text-decoration: none; }
button { font-family: inherit; font-size: inherit; line-height: 1; border: 0; padding: 0; background: transparent; cursor: pointer; }
button:focus { outline: 0; }
nav ul { font-size: 1rem; list-style: none; margin: 0; padding: 0; }
hr { border-color: #d8d8da; }

/* === HEADINGS === */
h1, h2 { hyphens: auto; line-height: 1; text-transform: uppercase; font-size: 2rem; font-weight: 700; color: #f60; margin-top: 1.5rem; margin-bottom: .5rem; }
h3 { font-size: 1.625rem; font-weight: 700; text-transform: uppercase; color: #f60; line-height: 1.25; margin-top: 1.5rem; margin-bottom: .5rem; }
h4, h5 { font-size: 1.625rem; font-weight: 700; color: #f60; line-height: 1.25; margin-top: 1.5rem; margin-bottom: .5rem; }
h5 { font-weight: 300; }
h6 { font-size: 1.25rem; font-weight: 700; }
ol, p, ul { font-size: .875rem; margin: 0; }
ol+ol, ol+p, ol+ul, p+ol, p+p, p+ul, ul+ol, ul+p, ul+ul { margin-top: 1.5rem; }
ol, ul { padding-left: 1.25rem; }

@media screen and (min-width: 62em) {
  ol, p, ul { font-size: 1rem; }
  h2 { font-size: 1.8rem; }
  h3 { font-size: 1.6rem; }
  h4 { font-size: 1.4rem; }
}
@media screen and (max-width: 62em) {
  h1, h2 { font-size: 1.6rem; }
  h3 { font-size: 1.4rem; }
  h4, h5 { font-size: 1.2rem; }
}
@media screen and (max-width: 48em) {
  h1, h2 { font-size: 1.4rem; }
  h2 { font-size: 1.3rem; }
  h3 { font-size: 1.2rem; }
  h4, h5 { font-size: 1.125rem; }
}

/* === HEADER === */
.site-header {
  position: sticky; left: 0; top: 0; z-index: 90;
  width: 100%; background-color: #f60;
  min-height: 3rem; max-width: 100%;
  margin: auto; padding: 0;
  box-shadow: 0 0 8px 2px #f60;
}
.main-navigation-wrapper {
  display: flex; align-items: center;
  margin: auto; max-width: 75rem;
}
.main-navigation-wrapper .main-navigation { margin-left: auto; }
.header__logo--link {
  display: inline-block; position: relative;
  padding: 0 0 0 1rem; z-index: 999; max-width: 400px;
}
.header__logo { max-height: 60px; }

/* === NAV TOGGLE (mobile) === */
.main-navigation__mobile-top-nav { display: grid; grid-template-columns: 1fr; align-items: center; }
.main-navigation__toggle { font-size: 3.5rem; padding: .7rem .7rem 0; background: transparent; border: 0; cursor: pointer; }
.main-navigation__toggle .icon { stroke: none; fill: #fff; width: 1em; height: 1em; }
.main-navigation__toggle .icon--close { display: none; }
.main-navigation__toggle[aria-expanded="true"] .icon--close { display: block; }
.main-navigation__toggle[aria-expanded="true"] .icon--open { display: none; }

/* === DROPDOWN (mobile) === */
.main-navigation__dropdown {
  position: absolute; left: 0; top: 100%;
  visibility: hidden; height: 0; width: 100%;
  background: #f60; transform: scaleY(0);
  transform-origin: top; transition: transform .3s;
  background: linear-gradient(135deg, #ffa366, #f60 45%, #f60);
}
.main-navigation__dropdown[aria-hidden="false"] {
  overflow-y: auto; visibility: visible;
  height: auto; padding: 1rem 0;
  transform: scaleY(1);
}

/* === NAV LIST === */
.main-navigation__list { margin: 0 auto 1rem; max-width: 25rem; padding: 0; list-style: none; }
.main-navigation__list-item:not(:first-child) { border-top: 1px solid rgba(255,255,255,.3); }
.main-navigation__list-item > a {
  font-size: 1.25rem; font-weight: 300; line-height: 1;
  color: #fff; display: block; padding: 1rem; width: 100%;
  text-decoration: none;
}
.main-navigation__list-item > a:hover { color: #fff; text-decoration: none; }

/* === DESKTOP NAV (>= 90em / 1440px) === */
@media screen and (min-width: 75em) {
  .main-navigation__mobile-top-nav { display: none; }
  .main-navigation__dropdown {
    position: static; visibility: visible; height: auto;
    background: transparent; transform: scaleY(1);
  }
  .main-navigation__list {
    display: flex; align-items: flex-end;
    margin: 0 auto; max-width: none;
  }
  .main-navigation__list-item { position: relative; }
  .main-navigation__list-item:not(:first-child) { border-top: 0; }
  .main-navigation__list-item > a {
    display: block; position: relative; width: auto;
    color: #fff; padding: .8rem 1rem;
    font-size: 1rem;
  }
  .main-navigation__list-item > a:hover { text-decoration: underline; }
}

/* === VISUALLY HIDDEN === */
.visually-hidden { position: absolute; height: 1px; width: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

/* === CONTAINER === */
.container { margin-right: auto; margin-left: auto; padding-right: 1rem; padding-left: 1rem; max-width: 23.5rem; }
.container .container { padding-right: 0; padding-left: 0; }
.container--large { max-width: 90rem; }
@media screen and (min-width: 40em) { .container { max-width: 40rem; } }
@media screen and (min-width: 48em) { .container { max-width: 48rem; } }
@media screen and (min-width: 64em) { .container { max-width: 64rem; } }
@media screen and (min-width: 80em) { .container { max-width: 75rem; } }

/* === SPACING === */
.mt0 { margin-top: 0 !important; }
.mb0 { margin-bottom: 0 !important; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 3rem; }
.mt-3 { margin-top: 5rem; }
.mt-5 { margin-top: 5rem; }
.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 3rem; }
.mb-3 { margin-bottom: 5rem; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.img-fluid { max-width: 100%; height: auto; }

/* === GRID === */
.grid { display: grid; grid-gap: 1.875rem; }
.grid-gap-xl { grid-gap: 2.875rem; }
.grid-gap-xs { grid-gap: .5rem; }
@media screen and (min-width: 48em) {
  .grid--two-columns-even { grid-template-columns: 1fr 1fr; }
  .grid--two-to-one { grid-template-columns: 2fr 1fr; }
  .grid--one-to-two { grid-template-columns: 1fr 2fr; }
  .grid--four-columns { grid-template-columns: 1fr 1fr; }
}
@media screen and (min-width: 62em) {
  .grid--three-columns { grid-template-columns: 1fr 1fr 1fr; }
  .grid--four-columns { grid-template-columns: 1fr 1fr 1fr 1fr; }
}

/* === AKTUELLES GRID === */
.grid-aktuelles { grid-gap: 1.4rem; line-height: 1.2; }
@media screen and (max-width: 48em) { .grid-aktuelles { grid-gap: 1rem; line-height: 1; } }

/* === BUTTONS === */
.button { font-size: 1rem; line-height: 1; display: inline-block; border: 1px solid; margin-top: 1rem; padding: 1rem; outline: 0; text-decoration: none; transition: background .3s, border .3s, color .3s; }
.button:hover { text-decoration: none; }
.button--primary { background-color: transparent; border-color: #483112; color: #483112; }
.button--primary:hover { border-color: #f60; background: #f60; color: #fff; }

/* === INNUNGEN === */
.innung__image img { max-width: 200px; }
.innung__content h4 { font-size: 1.4rem; }

/* === SLIDER === */
.slick-img { width: 100%; margin: auto; }
.slider { margin: 0 -1rem; }
.slick-prev, .slick-next { z-index: 10; width: 50px; height: 50px; }
.slick-prev { left: 10px; }
.slick-next { right: 10px; }
.slick-prev .icon, .slick-next .icon { width: 60px; height: 60px; fill: #fff; stroke: none; }
.slick-prev:before, .slick-next:before { content: none; }
.slick-dots li button:before { font-size: 12px; color: #f60; }
.slick-dots li.slick-active button:before { color: #fff; }

/* === PARTNER === */
.partner { margin-top: 2rem; margin-bottom: 2rem; padding-top: 2rem; padding-bottom: 2rem; }

/* === FOOTER === */
.footer { color: #fff; background-color: #f60; padding-top: 4rem; padding-bottom: 3rem; }
.footer h1, .footer h2, .footer h3, .footer h4 { color: #fff; font-size: 2rem; }
.footer a, .footer a:active, .footer a:hover, .footer a:link, .footer a:visited { color: #fff; }
@media screen and (min-width: 48em) {
  .footer .container { display: grid; grid-gap: 1.5rem; grid-template-columns: 1fr 1fr; }
}
@media screen and (min-width: 62em) {
  .footer .container { grid-template-columns: repeat(3, 1fr); }
}
@media screen and (max-width: 90em) {
  .footer .container { padding-left: 3rem; padding-right: 3rem; }
}
@media screen and (max-width: 48em) {
  .footer { padding-bottom: 1rem; }
  .footer .hide_mobile { display: none; }
  .footer__navigation { margin-top: 2rem; }
}
.footer__upper-navigation-list { list-style: none; padding: 0; margin: 0; }
.footer__upper-navigation-list li { margin: .5rem 0; }

/* === LINK STYLES in main === */
main a:not(.button) { text-decoration: none; color: #483112; }
main a:not(.button):hover { color: #f60; }

/* === BTN HELPERS === */
.btn-link { text-decoration: underline; }
.btn-white { color: #fff; }