/* ----------------------------------------------------------------------------- *
 *                           Styles der Basisversion                             *
 * ----------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------- *
 * Änderung des default-Box-Modells aller Elemente auf "border-box"
 * http://www.paulirish.com/2012/box-sizing-border-box-ftw/
 * << apply a natural box layout model to all elements >>
 * ----------------------------------------------------------------------------- */
*, *:before, *:after {
    -webkit-box-sizing: border-box; /* Safari/Chrome, andere WebKit-Browser */
    -moz-box-sizing: border-box; /* Firefox, andere Gecko-Browser */
    box-sizing: border-box; /* Opera/IE 8+ */
}

/* ----------------------------------------------------------------------------- */


.page-wrapper {
   margin: 0;
   height:auto !important;
height:100%;
}

header {
/* Banner größe */	
    padding: 0.5em 20px;
    padding-bottom: 0;
}

aside, footer {
    padding: 0.6em 20px;
}

section {
    padding: 0 20px;
}

.mainContent {
    width: 100%;
    border-top: 1px solid transparent;
}

aside {
    width: 100%;
    margin-left: 0;
}

/* ----------------------------------------------------------------------------- *
 *                                   Helper                                      *
 * ----------------------------------------------------------------------------- */

.clearfix:before,  
.clearfix:after {  
    content: " ";  
    display: table;  
}  
.clearfix:after {  
    clear: both;  
}  
/* For IE 6/7 only */  
.clearfix {  
    *zoom: 1;  
}  


/* ----------------------------------------------------------------------------- *
 *                             Textauszeichnungen                                *
 * ----------------------------------------------------------------------------- */
h1 {
    margin: 0;
}

h2 {
    margin: 0.6em 20px;
}

p.teasertext {
    margin: 0.8em 20px;
}

ul, ol {
    padding: 0;
    margin: 0 0 0.625em 20px;
}

/* ----------------------------------------------------------------------------- *
 *                                  Navigation                                   *
 * ----------------------------------------------------------------------------- */

nav,
.menu-button {
    margin: 0 -20px;
	width: 72.5%;
}


nav ul {
    margin: 0;
}

nav ul > li {
    margin-left: 0;
    border-bottom: 1px solid rgba(250, 250, 250, 0.6);
}

nav ul > li > a, nav ul > li > strong {
    //padding: 0.6em 20px;
    display: block;
}

nav ul a:link {
    text-decoration: none;
}

/* ----------------------------------------------------------------------------- *
 *                           Styles der Tabletversion                            *
 *                          750px / 16px/em = 46.875em                           *
 * ----------------------------------------------------------------------------- */
@media only screen and (min-width: 46.875em) {
    
    /* Schriftverkleinerung wird für große Screens wieder aufgehoben */
    @media only screen and (max-width: 78em) {
        body {
            font-size: 0.938em; /* 15px */
        }
    }
    
    .main {
        /* clearing für die floatenden gleichlangen Spalten (.mainContent und .aside) */
   		overflow: hidden;
        float:center; 
		width: 70%;
    }

    .mainContent {
        width: 92%;
		margin-left: 5%;		
        float: left;
        padding: 0.8em 20px;
        border-top: none;
    }

    aside {
        width: 30%;
        /* Trick für gleichlange Spalten  - dazu gehört ein overflow: hidden für den umgeb. Container */
        margin-bottom: -99999px !important;
        padding-bottom: 99999px !important;
    }

    aside, footer {
/* footer am Boden */		
/*	position: absolute;
    bottom: 0;*/
/* Ende */	
/* footer rechtsbündog */
		float:right;
/* Ende */		
		width: 100%;
        padding: 0.8em 20px;
    }

    section {
        padding: 0;
    }
	

    /* ----------------------------------------------------------------------------- *
     *                             Textauszeichnungen                                *
     * ----------------------------------------------------------------------------- */
    h2 {
        font-size: 1.875em; /* 35px */
        line-height: 1.2em;
        margin: 0.3em 0 0;
    }

    p.teasertext {
        margin: 0.8em 0;
    }

    /* ----------------------------------------------------------------------------- *
     *                                  Navigation                                   *
     * ----------------------------------------------------------------------------- */
    nav {
		float:center; 
        font-size: 0.9em; /* 18px */
		
    }

    nav ul {
        margin: 0 20px;
    }

    nav ul li {
        float: left;
        border: none;
        width: auto;
    }

    nav ul > li > a {
        padding: 0.5em 10px 0.5em 10px;
        display: inline-block;
    }
}
    /* ----------------------------------------------------------------------------- *
     *                     Standardstyle von Flexnav anpassen                        *
     * ----------------------------------------------------------------------------- */
    
    .flexnav .touch-button {
        width: 1.50em;
        height: 3.50em;
    }

    .flexnav .touch-button .navicon,
   .menu-button .touch-button .navicon{
        color: #ffffff;
        font-size: 0.8em;
        top: 1em;
    }
    
    .page-wrapper .menu-button,
    .page-wrapper .flexnav li,
    .page-wrapper .flexnav li a,
    .page-wrapper .flexnav li ul li a {
       /* background-color:#ff0; */
	   background-image:url(../pics/linkback.png);
       color: #ffffff; 
       border-color: #ffffff;
	   font-size: 0.9em;
    }
    
    .flexnav li a:hover,
    .flexnav li a:focus,
    .flexnav li a:active {
    background-color: #ffffff;
    }
    
    .flexnav li ul {
        left: -20px;
}

/* ----------------------------------------------------------------------------- *
 *                          Styles für große Desktops                            *
 *                           1248px / 16px/em = 78em                             *
 * ----------------------------------------------------------------------------- */
@media only screen and (min-width: 78em) {
    .page-wrapper {
        margin: 0 auto;
        max-width: 78em;
		
/* Position der Seite (lings-mitte.rechts) */		
		/*margin-right:0;  */
		/*margin-left:0;*/ 
		
    }
}


/*++++++++++++++++++Footer Tabele++++++++++++++++++++*/

#tabelle {
  display: table;   
  border-collapse: separate;
  border-spacing: 8px;
  
}
.zelle {
  border: 0px solid grey;
  display: table-cell;
  width: 290px;  
}  
.zelle2 {
  border: 0px solid grey;
  display: table-cell;
  width: 100px;  
}  
@media screen and (max-width: 600px) {
    #tabelle {
     display: block;
    }
    .zelle {
      display: block;
      width: 100%;	
    }
 
}
/*/+++++++++++++++++++Footer Tabelle Ende++++++++++++*/
/*++++++++++++++++++Text Tabele++++++++++++++++++++*/

#tabelle1 {
  display: table1;   
  border-collapse: separate;
  border-spacing: 8px;
  
}
.zelle1_1 {
  border: 0px solid grey;
  display: table-cell;
  width: 400px;  
}  
.zelle1_2 {
  border: 0px solid grey;
  display: table-cell;
  width: 200px;  
}  

@media screen and (max-width: 600px) {
    #tabelle1 {
     display: block;
    }
    .zelle1_1 {
      display: block;
      width: 100%;	
    }
 
}
/*/+++++++++++++++++++Text Tabelle Ende++++++++++++*/

/* Ende Hintergrund */

#wrap {
    position: relative;
    z-index: 1;
}

.site-background {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background: #65724a;
}

.site-background__poster,
.site-background__video,
.site-background__overlay {
    position: absolute;
    inset: 0;
}

.site-background__poster,
.site-background__video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: 56% 55%;
}

.site-background__poster {
    z-index: 0;
}

.site-background__video {
    z-index: 1;
}

.site-background__overlay {
    z-index: 2;
    background:
        linear-gradient(94deg, rgba(29, 39, 22, 0.30) 0%, rgba(29, 39, 22, 0.18) 42%, rgba(255, 244, 209, 0.04) 100%),
        linear-gradient(180deg, rgba(12, 16, 11, 0.10) 0%, rgba(12, 16, 11, 0.20) 100%);
}

@media only screen and (max-width: 46.874em) {
    .site-background__poster,
    .site-background__video {
        object-position: 58% 58%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-background__video {
        display: none;
    }
}

body {
    background: #65724a;
}
/* Ende Hintergrund */	

/* Bilder flexibel machen: */	
img {
    max-width: 100%;
    height: auto;
}



/* ----------------------------------------------------------------------------- *
 *                                     Hero                                      *
 * ----------------------------------------------------------------------------- */
.hero {
    position: relative;
    margin: 0 0 1.75rem;
    padding: 1.15rem 0 0.5rem;
}

.hero__content {
    width: min(100%, 38rem);
    padding: 0;
}

.hero__brand {
    margin: 0;
}

.hero__text {
    margin: 0.9rem 0 0;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.hero__button {
    flex: 1 1 12rem;
    min-width: 12rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: 0.75rem 1.1rem;
    text-align: center;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.70);
    border-radius: 0.25rem;
    background: rgba(245, 239, 221, 0.18);
    color: #ffffff;
    box-shadow: inset 0 0 0 1px rgba(64, 56, 34, 0.14);
}

.hero__button:hover,
.hero__button:focus {
    background: rgba(245, 239, 221, 0.28);
    color: #ffffff;
}

.hero__button--primary {
    background: rgba(98, 85, 50, 0.30);
}

.hero__button--secondary {
    background: rgba(245, 239, 221, 0.18);
}

@media only screen and (min-width: 46.875em) {
    .hero {
        margin-bottom: 2rem;
        padding-top: 1.35rem;
    }

    .hero__content {
        width: min(100%, 42rem);
    }

    .hero__content h1 {
        font-size: 3.05rem;
    }

    .hero__text {
        font-size: 1.08rem;
    }

    .hero__actions {
        gap: 0.85rem;
    }
}

@media only screen and (min-width: 78em) {
    .hero {
        padding-top: 1.5rem;
    }
}

@media only screen and (max-width: 46.874em) and (orientation: portrait) {
    .hero {
        padding-top: 1rem;
    }

    .hero__content {
        width: min(100%, 29rem);
    }

    .hero__content h1 {
        font-size: 2rem;
    }

    .hero__text {
        font-size: 1rem;
    }

    .hero__button {
        flex-basis: 100%;
    }
}

@media only screen and (orientation: landscape) and (max-height: 520px) {
    .hero {
        padding-top: 0.65rem;
    }

    .hero__content {
        width: min(100%, 34rem);
    }

    .hero__content h1 {
        font-size: 1.85rem;
    }

    .hero__brand {
        font-size: 0.9rem;
    }

    .hero__text {
        margin-top: 0.65rem;
        font-size: 0.98rem;
    }

    .hero__actions {
        margin-top: 0.9rem;
        gap: 0.6rem;
    }

    .hero__button {
        min-height: 2.5rem;
        padding: 0.65rem 0.9rem;
    }
}