/* Font für Menü: */

/*
:root, :host {
  --fa-style-family-classic: 'Font Awesome 6 Free';
  --fa-font-regular: normal 900 1em/1 'Font Awesome 6 Free'; }

@font-face {
  font-family: 'Font Awesome 6 Free';
  font-style: normal;
  font-weight: 900;
  font-display: block;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: var(--fa-display, inline-block);
  font-variant: normal;
  text-rendering: auto; 
  src: url("/fonts/fontawesome-webfont.woff2") format("woff2"), url("/fonts/fontawesome-webfont.ttf") format("truetype"); }
*/

@font-face {
  font-family: Ubuntu;
  src: url('/fonts/UbuntuSans-Regular.woff2') format('woff2'),
       url('/fonts/UbuntuSans-Regular.ttf') format('truetype');
}

@font-face {
  font-family: Ubuntu;
  src: url('/fonts/UbuntuSans-Bold.woff2') format('woff2'),
       url('/fonts/UbuntuSans-Bold.ttf') format('truetype');
  font-weight: 700;
}

@font-face {
  font-family: Ubuntu;
  src: url('/fonts/UbuntuSans-Italic.woff2') format('woff2'),
       url('/fonts/UbuntuSans-Italic.ttf') format('truetype');
  font-style: italic;
}

@font-face {
  font-family: Ubuntu;
  src: url('/fonts/UbuntuSans-BoldItalic.woff2') format('woff2'),
       url('/fonts/UbuntuSans-BoldItalic.ttf') format('truetype');
  font-weight: 700;  
  font-style: italic;
}

html {
    font-family:
	Helvetica Light, Helvetica Neue, Helvetica, Lato, Arial, Dotum, Apple SD Gothic Neo, sans-serif;
/*	Ubuntu, sans-serif; */
}

body {
    line-height: 1.5;
}


.fas,
.fa-solid {
/*    font-family: 'Font Awesome 6 Free'; */
    font-family: 'Ubuntu, sans-serif';    
    font-style: normal;
    font-weight: 900; }


.burger-icon::before {
    content: "☰"; }

.fa-bars::before {
  content: "\f0c9"; }

* {box-sizing:border-box}

/* Menü: */

.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #04AA6D;
  color: white;
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 1000px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: left;
    display: block;
  }
}

@media screen and (max-width: 1000px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

/* Der Rest: */


body {
    background-color: rgba(241,254,220,1);
}

@media (orientation: landscape) {
       .body2::before {
  	       background-color: rgba(241,254,220,0.6);
  	       content: '';
  	       position: fixed;
  	       top: 0;
  	       left: 0;
  	       width: 100%;
  	       height: 100%;
  	       background-image: url("/images/zendo8.jpg");
  	       background-repeat: no-repeat;
  	       background-position: center top;
	       background-size: contain;	       
  	       z-index: -2;
	       }
}

@media (orientation: portrait) {
       .body2::before {
  	       background-color: rgba(241,254,220,0.6);
  	       content: '';
  	       position: fixed;
  	       top: 0;
  	       left: 0;
  	       width: 100%;
  	       height: 100%;
  	       background-image: url("/images/zendo8.jpg");
  	       background-repeat: no-repeat;
  	       background-position: center top;
	       background-size: contain;
  	       z-index: -2;
	       }
}


@media (orientation: landscape) {
       .body3::before {
  	       background-color: rgba(241,254,220,0.6);
  	       content: '';
  	       top: 0;
  	       left: 0;
  	       width: 100%;
  	       height: 100%;
  	       background-image: url("/images/zendo8.jpg");
  	       background-repeat: no-repeat;
  	       background-position: center top;
	       background-size: contain;	       
  	       z-index: 10;
	       }
}

@media (orientation: portrait) {
       .body3::before {
  	       background-color: rgba(241,254,220,0.6);
  	       content: '';
  	       top: 0;
  	       left: 0;
  	       width: 100%;
  	       height: 100%;
  	       background-image: url("/images/zendo8.jpg");
  	       background-repeat: no-repeat;
  	       background-position: center top;
	       background-size: contain;
  	       z-index: 10;
	       }
}


@media (orientation: landscape) {
    .platzvormaintext {
	height: 50vh;
  }
}

@media (orientation: portrait) {
    .platzvormaintext {
	height: 80vw;
  }
}

@media (orientation: landscape) {
    .oimage {
	width: 50%;
  }
}

@media (orientation: portrait) {
    .oimage {
	width: 100%;
  }
}

.textueberbild {
    background-color: rgba(256,256,256,0.9);
    z-index: -1;
    text-align: center;
    color: #000000;
}

@media screen and (max-width: 1000px) {
  .breitfuss {
            display: none;
        }
}

@media screen and (min-width: 1001px) {
  .schmalfuss {
      display: none;
        }
}


@media (orientation: portrait) {
   .maineingerueckt {
       margin: 0% 2% 0% 2%;

}    
}

@media (orientation: landscape) {
    .maineingerueckt {
	margin: 0% 0% 0% 0%;
}    
}

@media (orientation: landscape) {
    .maintexteingerueckt {
	margin: 0% 20% 0% 20%;
}    
}

@media (orientation: portrait) {
    .eingerueckt {
       margin: 0% 2% 0% 2%;
}    
}

@media (orientation: landscape) {
   .eingerueckt {
       margin: 0% 15% 0% 15%;
}    
}

@media (orientation: portrait) {
    video {
        width:  400;
	height: 300;
}    
}

@media (orientation: landscape) {
    video {
        width:  200;
	height: 600;	
}    
}


/* Verschiebbare Elemente */

@media (min-width:601px){.w3-third{width:33.33333%}}

.third {width:33%}

.w3-row-padding{padding:0 8px}

@media (min-width:601px){
.inline-block-child3 {
    display: inline-block;
    border: 3px solid rgba(0,0,0,1);
    width: 30%;
    margin: 1% 1% 1% 1%;
    padding: 1% 1% 1% 1%;
}}

@media (max-width:600px){
    .inline-block-child3 {
    border: 3px solid rgba(0,0,0,1);
    margin: 1% 1% 1% 1%;
    padding: 1% 1% 1% 1%;

}}