html {
  overflow-y: scroll;
}

body {
  margin: 0;
  width: 100%;
  height: 100%;
  padding: 32px 0;
  background: #f4f4f4;
  font: 400 16px/normal Verdana, sans-serif;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

@media (max-width: 1200px) {
    body {
        padding: 0;
    }
}

/*### Animations ###*/

@keyframes appear {
  from {opacity: 0}
  to {opacity: 1}
}

/*### Body ###*/

#bg {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 30vh;
  background: #dfdfdf;
}

#container {
  margin: 0 auto;
  max-width: 1200px;
}

#mobileOverlay {
  position: fixed;
  display: none;
  top: 0;
  left: 0;
  z-index: 5;
  height: 100vh;
  width: 100%;
  background-color: rgba(0,0,0,0.54);
}

/*#### Header ####*/

header {
  position: relative;
  z-index: 20;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  background-color: rgba(156,18,18,1);
  box-shadow: 0 2px 10px 0 rgba(0,0,0,0.4);
  -ms-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

header.fixed {
  margin-bottom: 56px;
}

@media (max-width: 1200px) {
  header {
    border-radius: 0;
  }
}

#top {
  padding: 24px;
}

@media (max-width: 1200px) {
  #top {
    display: none;
  }
}

.logo img {
  height: 80px;
  border: none;
}

#top .logo img {
  width: 358px;
}

/*#### App Bar ####*/

#appBar {
  position: relative;
  display: flex;
  align-items: center;
  top: 0;
  left: 0;
  background-color: rgba(156,18,18,1);
  color: white;
  perspective: 1000px;
  perspective-origin: center bottom;
  transform-style: preserve-3d;
}

header.fixed #appBar {
  position: fixed;
  margin: 0;
  box-shadow: 0 2px 10px 0 rgba(0,0,0,0.4);
}

@media (max-width: 1200px) {
  #appBar {
    position: fixed;
    top: 0;
    left: 0;
    margin: 0;
    width: 100%;
  	box-shadow: 0 2px 10px 0 rgba(0,0,0,0.4);
  }
  
  #appBar .material-icons {
    padding: 16px;
    transition: all .2s ease-out;
  }
  
  #appBar .material-icons:hover {
    background-color: rgba(255,255,255,.1);
  }
  
  #appBar .material-icons:active {
    background-color: rgba(255,255,255,.1);
  }

  #appBar .actionIcons {
    padding: 16px !important;
    overflow: hidden;
    border-radius: 50%;
    -webkit-clip-path: circle(50% at center);
    clip-path: circle(50% at center);
  }
}

#menuButton {
  display: none;    
  cursor: pointer;
}

@media (max-width: 1200px) {
  #menuButton {
    display: block;
  }
}

#appBar .title {
  display: none;
  color: inherit;
  font-weight: 400;
  text-decoration: none;
}

#appBar .title img {
  height: 24px;
  margin-right: 5px;
}

#appBar .title span {
  vertical-align: 4px;
}

@media (max-width: 1200px) {
  #appBar .title {
    display: inline-block;
  }
}

@media (max-width: 1200px) {
  nav#main {
    position: absolute;
    top: 0;
    left: -300px;
    z-index: 10;
    width: 300px;
    height: 100vh;
    overflow-y: scroll;
    background: white;
    color: rgba(0,0,0,0.87);
    transition: left .3s ease-out;
  }
  
  nav#main.open {
    left: 0;
 	box-shadow: 0 0 15px 0 rgba(0,0,0,0.6);
  }
}

@media (max-width: 456px) {
  nav#main {
    left: calc(-100% - 56px);
    width: calc(100% - 56px);
  }
}

nav#main #mobileHeader {
  position: relative;
  display: none;
  height: 169px;
  width: 100%;
  padding: 16px;
  box-sizing: border-box;
  background-color: rgb(156, 16, 16);
}

nav#main #mobileHeader .title {
  position: absolute;
  bottom: 24px;
  font-weight: 500;
  color: white;
}

@media (max-width: 1200px) {
  nav#main #mobileHeader {
    display: block;
  }
}

nav#main #mobileHeader img {
  -webkit-filter: invert(1);
  filter: invert(1);
}

nav#main ul {
  margin: 0;
  padding: 0;
}

@media (max-width: 1200px) {
  nav#main ul {
    padding: 8px 0;
  }
}

nav#main ul li {
  display: inline-block;
  list-style: none;
}

@media (max-width: 1200px) {
  nav#main ul li {
    display: block;
  }
}

nav#main ul li a, nav#main ul li span {
  display: inline-block;
  vertical-align: middle;
  padding: 16px 20px;
  box-sizing: border-box;
  color: white;
  text-decoration: none;
  font-size: 18px;
  transition: background-color .2s ease-out;
}

nav#main ul li span {
  cursor: default;
}

@media (max-width: 1200px) {
  nav#main ul li a, nav#main ul li span {
    width: 100%;
    padding: 16px;
    color: rgba(0,0,0,0.87);
    font-size: 16px;
  }
}

nav#main ul li a:hover, nav#main ul li a:focus,
nav#main ul li span:hover, nav#main ul li span:focus,
nav#main ul li:hover > span {
  background-color: rgba(255,255,255,.05);
}

@media (max-width: 1200px) {
  nav#main ul li a:hover, nav#main ul li a:focus
  nav#main ul li span:hover, nav#main ul li span:focus {
    background-color: rgba(0,0,0,.05);
  }
}

nav#main > ul > li.active > a,
nav#main > ul > li.active > span {
  box-shadow: inset 0 -2px 0 0 white;
}

@media (max-width: 1200px) {
  nav#main ul li.active > a,
  nav#main ul li.active > span {
    color: rgba(156,16,16,1);
  }
  
  nav#main ul li.active > a i.material-icons,
  nav#main ul li.active > span i.material-icons {
    color: inherit;
  }
  
  nav#main ul li.active > a i.material-icons svg path,
  nav#main ul li.active > span i.material-icons svg path {
    fill: rgba(156,16,16,1);
  }
}

nav#main ul li a i.material-icons,
nav#main ul li span i.material-icons{
  display: inline-block;
  margin-right: 8px;
  font-size: 20px;
  vertical-align: -4px;
}

@media (max-width: 1200px) {
  nav#main ul li a i.material-icons,
  nav#main ul li span i.material-icons {
    width: 24px;
    height: 24px;
    margin-right: 32px;
    padding: 0;
    color: rgba(0,0,0,0.54);
    font-size: 24px;
    vertical-align: -6px;
  }
}

nav#main ul li a i.material-icons svg,
nav#main ul li span i.material-icons svg {
  height: 20px;
  width: 20px;
}

@media (max-width: 1200px) {
  nav#main ul li a i.material-icons svg,
  nav#main ul li span i.material-icons svg {
    height: 24px;
  	width: 24px;
  }
}

nav#main ul li a i.material-icons svg path,
nav#main ul li span i.material-icons svg path{
  fill: white;
}

@media (max-width: 1200px) {
  nav#main ul li a i.material-icons svg path,
  nav#main ul li span i.material-icons svg path {
    fill: rgba(0,0,0,0.54);
  }
}

nav#main > ul > li > ul {
  display: flex;
  flex-wrap: wrap;
  position: absolute;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  box-shadow: inset 0 5px 10px -5px rgba(0,0,0,0.4),
              0 4px 10px -2px rgba(0,0,0,0.4);
  background-color: rgba(166,41,41,1);
  transform-origin: top;
  transform: rotateX(-90deg);
  transition: transform .2s ease-out;
}

@media (max-width: 1200px) {
  nav#main > ul > li > ul {
    display: block;
    position: static;
    box-shadow: none;
    background-color: transparent;
    transform: none;
  }
}

nav#main > ul > li > ul.open {
  transform: rotateX(0deg);
  transition: transform .2s ease-out;
}

@media (max-width: 1200px) {
  nav#main > ul > li:hover > ul {
    transform: none;
    transition: transform .2s ease-out;
  }
}

nav#main ul li ul li {
  width: 25%;
}

nav#main ul li ul li a {
  width: 100%;
}

nav#main ul li ul li span {
  display: none;
}

@media (max-width: 1200px) {
  nav#main ul li ul li a {
    padding: 16px 16px 16px 72px;
  }
}

nav#main ul li ul li.active > a,
nav#main ul li ul li.active > span {
  background-color: rgba(255,255,255,.1);
}

nav#main > ul > li > span + ul {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
}

nav#main > ul > li > span + ul > ul{
  width: 25%;
}

nav#main > ul > li > span + ul li {
  flex: 0 1 auto;
  width: 100%;
}

nav#main ul > li > span.areas + ul > li > span {
  display: block;
  background-color: transparent;
}

nav#main ul > li > span.areas + ul > li {
  box-shadow: inset 0 5px 5px -5px rgba(0,0,0,0.4);
}

nav#main ul > li > span.areas + ul > li:nth-child(1) {
  background-color: #B64040;
}

nav#main ul > li > span.areas + ul > li:nth-child(2) {
  background-color: #9CBE91;
}

nav#main ul > li > span.areas + ul > li:nth-child(3) {
  background-color: #7296B6;
}

nav#main ul > li > span.areas + ul > li:nth-child(4) {
  background-color: #D7BA69;
}

nav#main ul > li > span.areas + ul > li:nth-child(5) {
  background-color: #999999;
}

nav#main ul > li > span.areas + ul > li > span {
  padding: 24px 20px 8px 20px;
  color: rgba(255,255,255,0.7);
  font-size: .9em;
}

nav#main ul > li > span.areas + ul > li > span:hover {
  background-color: transparent;
}

nav#main ul > li > span.areas + ul > li:hover > span {
  background-color: transparent;
}

nav#main ul > li > span.areas + ul > li > ul {
  display: block !important;
}

@media (max-width: 1200px) {
    nav#main ul > li > span + ul {
        display: block;
        padding: 0;
    }

    nav#main ul > li > span + ul li {
        width: 100%;
        box-shadow: none !important;
        background-color: transparent !important;
    }

    nav#main ul > li > span.areas + ul > li > span {
        padding: 16px 72px;
        color: rgba(0,0,0,0.54);
        font-size: 1em;
    }

    nav#main ul > li > span + ul > li > ul {
        height: auto !important;
        padding: 0;
    }
}

/*### Suche ###*/

#appBar #search {
  display: flex;
  align-items: center;
  width: calc(25% - 25px);
  margin: 0 25px 0 auto;
  padding: 2px 8px;
  box-sizing: border-box;
  border-radius: 2px;
  background-color: rgba(255,255,255,0.1);
}

@media (max-width: 1200px) {
  #appBar #search {
    width: auto;
    margin: 0 0 0 auto;
    padding: 0;
    border: none;
    background-color: transparent;
  }
}

#appBar #search input[type=search] {
  z-index: 10;
  display: block;
  flex: 0 1 auto;
  width: 100%;
  border-radius: 0;
  background: none;
  border: none;
  outline: none;
  font: inherit;
  color: white;
}

@media (max-width: 1200px) {
  #appBar #search input[type=search] {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 56px;
    z-index: 15;
    padding: 0 16px;
    background: white;
    opacity: 0;
    color: rgba(0,0,0,0.87);
  }
}

input[type=text]::-ms-clear {  display: none; width : 0; height: 0; }
input[type=text]::-ms-reveal {  display: none; width : 0; height: 0; }
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration { display: none; }

#appBar #search input[type=search]::-webkit-input-placeholder {
  color: white;
}

@media (max-width: 1200px) {
  #appBar #search input[type=search]::-webkit-input-placeholder {
    color: rgba(0,0,0,0.87);
  }
}

#appBar #search input[type=search]:-moz-placeholder {
  color: white;  
  opacity: 1;
}

@media (max-width: 1200px) {
  #appBar #search input[type=search]:-moz-input-placeholder {
    color: rgba(0,0,0,0.87);
  }
}

#appBar #search input[type=search]::-moz-placeholder {
  color: white;  
  opacity: 1;
}

@media (max-width: 1200px) {
  #appBar #search input[type=search]::-moz-input-placeholder {
    color: rgba(0,0,0,0.87);
  }
}

#appBar #search input[type=search]:-ms-input-placeholder {  
  color: white;  
}

@media (max-width: 1200px) {
  #appBar #search input[type=search]:-ms-input-placeholder {
    color: rgba(0,0,0,0.87);
  }
}

#appBar #search #searchButton {
  display: block;
  padding: 4px 0;
  cursor: pointer;
}

/*#### Main ####*/

main {
  display: flex;
  position: relative;
  z-index: 9;
}

@media (max-width: 1200px) {
  main {
    margin-bottom: 0;
    padding-top: 56px;
  }
}

#content {
  position: relative;
  z-index: 8;
  width: 100%;
  min-width: 0px; /* Firefox Flex Fix */
  padding: 40px 12.5%;
  box-sizing: border-box;
  background-color: white;
  box-shadow: 0 2px 10px 0 rgba(0,0,0,0.2);
}

main[data-layout="1"] #content {
  width: 75%;
  padding: 16px;
}
  
@media (max-width: 1200px) {
  #content {
    border-radius: 0;
    padding: 16px;
  }
  
  main[data-layout="1"] #content {
    width: 100%;
  }
}

@media (max-width: 456px) {
  main #content {
    padding: 20px 16px 20px;
  }
}

#sidebar {
  position: relative;
  z-index: 7;
  width: 25%; 
  min-width: 0px; /* Firefox Flex Fix */
  padding: 20px;
  box-sizing: border-box;
  background: #f4f4f4;
  box-shadow: 0 2px 10px 0 rgba(0,0,0,0.2);
}


main[data-layout="0"] #sidebar {
  display: none;
}

@media (max-width: 1200px) {
  #sidebar {
    display: none;
    border-radius: 0;
  }
}

/*#### Farben ####*/
.grey {
  background-color: #757575;
  color: white;
}

.blue {
  background-color: #2196F3;
  color: white;
}

.yellow {
  background-color: rgba(255,230,164,1);
  color: black;
}

.red {
  background-color: rgba(110,60,30,1);
  color: white;
}

/* MAIN elements */

main h1 {
  margin: 0 0 12px;
  padding: 24px 0 0;
  font: 700 1.8em/normal Verdana, sans-serif; /* Roboto */
  color: black;
}

main h2 {
  margin: 0 0 8px;
  padding: 18px 0 0;
  font: 500 1.4em/normal Verdana, sans-serif; /* Roboto */
  color: black;
}

main h3 {
  margin: 0 0 4px;
  padding: 12px 0 0;
  font: 700 1.2em/normal Verdana, sans-serif; /* Roboto */
  color: black;
}



div[itemprop="articleBody"] p, div[itemprop="articleBody"] span, div[itemprop="articleBody"] em,
main #sidebar p, main #sidebar adress {
  color: rgba(0,0,0,0.87);
  line-height: 150%;
  /*text-align: left !important;*/
  font-size: 16px !important;
  font-family: Arial, sans-serif !important; /* Roboto */
}

main a {
  color: rgba(156,18,18,1);
  text-decoration: none;
  transition: all .2s ease-out;
}

main a:hover {
  border-bottom: 1px dotted rgba(156,18,18,.8);
  color: rgba(156,18,18,.8);
}

/*main a.more {
  line-height: 200%;
}

main a.more::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 16px;
  width: 8px;
  margin-right: 4px;
  background: url(../images/arrowRightRed.svg) no-repeat;
  background-size: contain;
}*/

main .page-header h2 {
  margin: 0 0 8px;
  padding: 24px 0 0;
  font: 400 2em/normal Verdana, sans-serif; /* Roboto */
}

main .article-info {
  display: none;
}

main .article-details {
  margin-bottom: 24px;
  color: rgba(0,0,0,0.7);
}

main hr {
  padding: 8px 0;
  border: none;
  border-bottom: 1px solid rgba(0,0,0,0.12);
}

main #content hr {
  margin-left: -16px;
  margin-right: -16px;
}

@media (max-width: 1200px) {
  main #content hr {
    margin: 0 -16px;
  }
}

main #sidebar hr {
  margin: 0 -16px;
}

main adress {
  line-height: 150%;
}

main q {
    display: block;
    margin: 16px 0;
    text-align: center;
    font-family: Georgia, serif;
    font-size: 1.2em;
    font-style: italic;
}

main ul {
    list-style-type: disc;
}

main ul, main ol {
    margin: 6px 0px;
}

main li {
    line-height: 170%;
}

main iframe {
    border: none;
}

main iframe.nofigure {
    width: 100%;
    min-height: 685px;
    margin: 16px 0;
}

main .item-page {
  opacity: 0;
}

main .page-header,
main .article-details {
  text-align: center;
}

main figure {
  width: 60%;
  margin: 0 auto;
}

main figure.small {
  width: 30%;
}

@media (max-width: 456px) {
  main figure {
    margin: 0 -16px;
    width: calc(100% + 32px);
  }
  main figure.small {
    width: 50%;
  }
}

main figure img,
main figure iframe {
  display: block;
  width: 100%;
  height: auto;
  float: none !important;
}

main figure iframe[src^="http://www.youtube"] {
  display: block;
  width: 100%;
  min-height: 338px;
}

main figure figcaption {
  padding: 16px;
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px;
  background-color: #424242;
  color: white;
  font-size: .9em;
}

main figure figcaption:empty {
  padding: 0;
}

@media (max-width: 456px) {
    main figure figcaption {
        border-radius: 0;
    }
}

main .collage2,
main .collage3,
main .collage4 {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
}

main .collage2 figure,
main .collage3 figure,
main .collage4 figure {
    margin: 0;
}

main .collage2 figure {
    width: calc(50% - 8px);
}

main .collage2 figure:not(:nth-child(1)):not(:nth-child(2)),
main .collage3 figure:not(:nth-child(1)):not(:nth-child(2)):not(:nth-child(3)),
main .collage4 figure:not(:nth-child(1)):not(:nth-child(2)):not(:nth-child(3)):not(:nth-child(4)) {
    margin-top: 16px;
}

main .collage3 figure {
    width: calc(33.3334% - (32px / 3));
}

main .collage4 figure {
    width: calc(25% - 12px);
}

/* Footer */

footer {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  padding: 24px 0;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  box-shadow: 0 2px 10px 0 rgba(0,0,0,0.2);
  background-color: #424242;
  color: rgba(255,255,255,0.7);
}

footer .logo {
  min-width: 12.5%;
  box-sizing: border-box;
  opacity: 0.7;
  transition: all .2s ease-out;
}

footer .logo:hover {
  opacity: 1;
}

footer .logo img {
  display: block;
  margin: calc(50% - 55px) 24px 0;
}

footer adress {
  min-width: 37.5%;
  box-sizing: border-box;
  color: inherit;
  line-height: 200%;
}

footer adress > div {
  line-height: 200%;
}

footer adress a {
  color: inherit;
  text-decoration: none;
  transition: all .2s ease-out;
}

footer adress a:hover {
  color: rgba(255,255,255,1);
}

footer adress .mdi, footer adress .material-icons {
  display: inline-block;
  vertical-align: middle;
  margin-right: 16px;
  font-size: 24px;
}

footer nav {
  width: 25%;
  padding-left: 20px;
  box-sizing: border-box;
}

footer nav ul {
  margin: 0;
  padding: 0;
}

footer nav ul li {
  list-style: none;
}

footer nav ul li a {
  display: inline-block;
  line-height: 200%;
  color: inherit;
  text-decoration: none;
  transition: all .2s ease-out;
}

footer nav ul li a:hover {
  color: rgba(255,255,255,1);
}

@media (max-width: 1200px) {
  footer {
    border-radius: 0;
  }
}
@media (max-width: 1100px) {
  footer {
    flex-direction: column;
    padding: 24px;
  }
  
  footer .logo {
    display: inline-block;
  }
  
  footer .logo img {
    margin: 0;
  }
  
  footer adress, footer nav {
    margin-top: 24px;
    width: 100%;
  }
  
  footer nav {
    padding-left: 0;
  }
}

/* Komponenten */

.btn {
  display: inline-block;
  position: relative;
  margin: 8px 0;
  padding: 10px 16px;
  outline: none;
  border: none;
  border-radius: 2px;
  background-color: rgba(156,18,18,1);
  color: white;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: all .1s ease-out;
  -ms-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

.btn .material-icons {
  vertical-align: -7px;
  margin-right: 4px;
}

.btn + .btn {
  margin-left: 16px;
}

.btn:hover {
  box-shadow: 0 2px 4px 0px rgba(0,0,0,0.2), inset 0 0 0 1000px rgba(255,255,255,0.05);
  border: none;
}

.btn:focus {
  box-shadow: 0 2px 4px 0px rgba(0,0,0,0.2);
}

.btn:active {
  box-shadow: 0 4px 6px 0px rgba(0,0,0,0.4), inset 0 0 0 1000px rgba(0,0,0,0.1);
}

.btn.flat {
  background-color: transparent;
  color: black;
}

.btn.flat.red {
  color: rgba(156,18,18,1);
}

.btn.flat.red .material-icons {
  color: rgba(156,18,18,1);
}

.btn.flat:hover, .btn.flat:focus {
  box-shadow: none;
  background-color: rgba(0,0,0,0.1);
}

.cardContainer {
    display: flex;
    flex-wrap: wrap;
    margin: 16px 0;
}

.card {
  position: relative;
  bottom: -5px;
  display: flex;
  flex-direction: column; 
  overflow: hidden;
  margin: 5px;
  width: 250px;
  border-radius: 2px;
  box-shadow: 0 2px 8px 0 rgba(0,0,0,0.3);
  background-color: white;
  opacity: 0;
}

.card:last-child {
  margin-right: 0;
}

.card .upper {
  width: 100%;
  height: 169px;
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.card .lower {
  flex-grow: 1;
  padding: 16px;
}

.card .lower .title {
  display: block;
  overflow: hidden;
  margin: 8px 0 4px 0;
  font-size: 1.2em;
  color: rgba(0,0,0,1);
  text-decoration: none;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: all .2s ease-out;
}

.card .lower .title:hover {
  color: rgba(0,0,0,.7);
  border: none;
}

.card .lower .date {
  margin: 0 0 8px 0;
  color: rgba(0,0,0,0.7);
  font-size: .9em;
}

.card .lower .text {
  color: rgba(0,0,0,0.87);
}

.card .actionBar {
  padding: 8px;
  text-align: right;
}

.card .actionBar .btn {
  margin: 0;
}

/* Special elements */

*:-webkit-full-screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
}

*:-moz-full-screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
}

*:-ms-fullscreen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
}

*:fullscreen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
}

::-moz-selection {
  background-color: rgba(156,18,18,1);
  color: white;
}

::selection {
  background-color: rgba(156,18,18,1);
  color: white;
}

/* Ripple */

.ripple{
  position: relative;
  display: inline-block;
  overflow: hidden;
  vertical-align:top
}

.ripple-effect{
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  animation: ripple-animation 3s forwards;
}

@keyframes ripple-animation {
    from {
      transform: scale(1);
    }
    to {
      transform: scale(100);
    }
}

/* Content */

.banner.card {
  width: 100%;
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 16px;
  margin-left: 0px;
  padding: 16px;
  box-sizing: border-box;
  opacity: 1;
  text-align: center;
  background-color: rgb(85, 101, 130);
  color: rgb(255, 255, 255);
  transition:.3s;
}
.banner.card:hover {
  background-color:#7296B6;
  
}

.welcome.card {
  width: 100%;
  margin: 0 0 16px 0;
  padding: 24px 24px 0px 24px;
  box-sizing: border-box;
  opacity: 1;
}

.welcome .upper {
  height: auto;
  width: auto;
  margin: -24px -24px 0 -24px;
  padding: 320px 16px 16px 16px;
  box-shadow: inset 0 -68px 128px 0 rgba(0,0,0,0.8);
  /* Summer photo: */
  background: url(/images/startseite/aska-mai-2025-1.jpeg) no-repeat;
  /* Winter photo: */
  /* background: url(../images/aska-welcome-winter.jpeg) no-repeat; */
  background-size: cover;
  background-position: center 25%;
  
}

.welcome .upper h1 {
  margin: 0;
  padding: 0;
  color: white;
  text-align: center;
  font-size:1.8em;
}

.welcome .lower {
  display: none;
  flex-wrap: wrap;
  justify-content: center;
  padding: 24px 0 0 0;
}

.welcome .lower > div {
  width: 33.3333%;
  min-width: 235px;
  box-sizing: border-box;
  text-align: center;
}

.welcome .lower > div:nth-of-type(1),
.welcome .lower > div:nth-of-type(2) {
  padding-right: 8px;
}

.welcome .lower > div:nth-of-type(2),
.welcome .lower > div:nth-of-type(3) {
  padding-left: 8px;
}

@media (max-width: 456px) {
  .welcome .lower > div {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

.welcome .lower i.mainIcon {
  height: 64px;
  color: rgba(0,0,0,0.7);
  font-size: 64px;
}

/* Joomla */

span.highlight {
    padding: 0;
    background-color: transparent;
}