:root {
  --primary:    #3A3480;
  --secondary:  #4761D6;
  --accent:     #BDB2F1;
}

* {box-sizing: border-box; outline: none}

@font-face{
  font-family: "Inter";
  src: 
    url('../fonts/Inter-Regular.woff2') format('woff2'),
    url('../fonts/Inter-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face{
  font-family: "Inter";
  src: 
    url('../fonts/Inter-Medium.woff2') format('woff2'),
    url('../fonts/Inter-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
}

@font-face{
  font-family: "Inter";
  src: 
    url('../fonts/Inter-Bold.woff2') format('woff2'),
    url('../fonts/Inter-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
}

@font-face{
  font-family: "Anzeigen";
  src: 
    url('../fonts/Anzeigen.woff2') format('woff2'),
    url('../fonts/Anzeigen.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

.muted {opacity: 0.5}

p, ul, li, ol, h1, h2, h3, h4, h5 {margin-top: 0}
p, ul, li, ol {margin-bottom: 20px}
.button {text-decoration: none; background-color: var(--primary); color: #fff; padding: 20px; border-radius: 30px; font-weight: bold; font-size: 16px; line-height: 1; display: inline-block;}
.button-secondary {background-color: var(--accent); color: var(--primary)}

h1, h2, h3 {color: var(--primary); text-transform: uppercase; font-weight: normal}
h1 .alt,
h2 .alt,
h3 .alt {color: var(--secondary)}

h1, h2, h3 {font-family: "Anzeigen"}

h1 {font-size: 110px; line-height: 1; text-wrap: balance;}
.is-not-home h1 {background: transparent url(../images/dw-logo.png) 0 50% / 60px 60px no-repeat; margin-top: 50px; padding-left: 100px; font-size: 60px; }

h2 {font-size: 60px; margin-bottom: 28px; line-height: 1}
a {text-decoration: none; cursor: pointer; color: #000}
article {margin: 100px 0}

.extra {border-radius: 10px; border: 2px solid var(--secondary); padding: 20px; padding-left: 79px; margin-bottom: 24px}
.extra:last-child {margin-bottom: 0}
  .extra h3 {text-transform: uppercase; line-height: 1; font-size: 24px; margin-bottom: 10px}
  .extra p {text-wrap: balance; margin: 0}

html {font-size: 14px; margin: 0; padding: 0}
body {line-height: 1.4; margin: 0; padding: 0; font-family: 'Inter'; color: #000}

main {margin: 0}
  main .main-inner {max-width: 1240px; margin: 0 auto; padding: 0 20px}

.grid {overflow: hidden; padding: 4px}
  .grid > .grid-block {float: left; width: 45%; margin-right: 10%; padding: 8px}
  .grid > .grid-block:nth-child(2n) {margin-right: 0}


.image {overflow: hidden; border-radius: 10px}
  .image img {display: block; width: 100%; height: auto}

.accordion {margin: 0; padding: 0}
  .accordion > li {list-style: none; margin: 0; padding: 0; border-bottom: 1px solid rgba(0, 0, 0, 0.3)}
  .accordion > li:first-child {border-top: 1px solid rgba(0, 0, 0, 0.3)}
    .accordion > li > h4 {cursor: pointer; padding: 20px 50px 20px 0; color: var(--primary); line-height: 1; font-size: 18px; background: transparent url(../images/icon-accordion-collapsed.png) calc(100% - 5px) 50% / 32px 32px no-repeat; margin: 0;}
    .accordion > li.active > h4 {background-image: url(../images/icon-accordion-expanded.png);}

    .accordion > li > .answer {height: 0px; transition: all 200ms; overflow: hidden; padding: 0}
    .accordion > li.active > .answer {height: auto; padding-top: 20px;}

.banner {background-color: rgba(189, 178, 241, 0.25); padding: 100px; text-align: center;}
  .banner-inner {max-width: 800px; padding: 0 20px; margin: 0 auto}
    .banner h1 {padding-top: 250px; background: transparent url(../images/dw-logo.png) 50% 0 / 225px 225px no-repeat; margin-bottom: 32px}
    .banner p {font-size: 18px; text-wrap: balance; margin-bottom: 32px}
    .banner a {}

article.about .grid-block:nth-child(2) {padding-left: 50px}
article.about p.subtitle {font-size: 20px}
article.faqs .subtitle {font-size: 20px; line-height: 1.4; text-wrap: balance; opacity: 0.75}
article.contact p.icon-clock {height: 48px; line-height: 48px; font-size: 18px; font-weight: 500; padding-left: 55px; background: transparent url(../images/icon-clock.png) 0 50% / 48px 48px no-repeat;}
article.contact .hours-section {overflow: hidden; font-size: 16px}
article.contact .hours-section .day {float: left; font-weight: 500}
article.contact .hours-section .hour {float: right}
article.contact > .grid > .grid-block:nth-child(2) {box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5); border-radius: 10px; border: 2px solid rgba(0, 0, 0, 0.5)}


.extra {box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5)}
.extra-important {background: rgba(71, 97, 214, 0.10) url(../images/icon-shield.png) 20px 20px / 35px 35px no-repeat; margin-top: 24px}
.extra-email {background: rgba(189, 178, 241, 0.15) url(../images/icon-mail.png) 20px 50% / 48px 48px no-repeat;}
.extra-phone {background: rgba(189, 178, 241, 0.15) url(../images/icon-phone.png) 20px 50% / 48px 48px no-repeat;}


footer {}
  footer .footer-inner {max-width: 1240px; margin: 0 auto; padding: 32px 20px; border-top: 1px solid rgba(0, 0, 0, 0.5); overflow: hidden}
    footer p.copyright {float: left}
    footer nav {float: right}
      footer nav ul {margin: 0; padding: 0}
        footer nav ul li {list-style: none; margin: 0 10px 0 0; padding: 0; display: inline-block;}
          footer nav ul li a {text-decoration: underline; color: rgba(0, 0, 0, 0.5)}

.show-mobile-block,
.show-mobile-inline-block,
.show-mobile-inline {display: none;}

.show-dekstop-block {display: block;}
.show-dekstop-inline-block {display: inline-block;}
.show-dekstop-inline {display: inline;}

@media (max-width: 1023px){   /* TABLET */

}

@media (max-width: 750px){    /* MOBILE */
  article {margin: 50px 0}

  .show-mobile-block {display: block;}
  .show-mobile-inline-block {display: inline-block;}
  .show-mobile-inline {display: inline;}
  .show-desktop-block,
  .show-desktop-inline-block,
  .show-desktop-inline {display: none;}

  .button {padding: 10px 20px; border-radius: 30px;}

  .banner {padding: 20px}
  h1 {font-size: 52px;}
  .is-home h1 {background-size: 125px 125px; padding-top: 150px}
  h2 {font-size: 36px}

  .grid {overflow: visible;}
    .grid > .grid-block {float: none; margin: 0 0 25px 0; width: 100%}

  article.about .grid-block:nth-child(2) {padding-left: 8px}
}

@media (max-width: 600px){    /* TINY MOBILE */
  footer nav,
  footer .copyright {float: none; margin: 0 0 15px 0}
}