/* by maba stainless webdesign == www.markusbaumi.ch */
/* MOBILE FIRST - Darstellung für schmale Bildschirme */

/* top – right – bottom – left */

@-ms-viewport{
 zoom:1.0;    
 width:extend-to-zoom;   
}

@viewport{
 zoom:1.0;
 width:extend-to-zoom;
}

@font-face {
 /*https://fonts.google.com/specimen/Permanent+Marker?selection.family=Permanent+Marker*/	
 font-family:'chlaus';
 font-style:normal;
 font-weight:400;
 src: local('Permanent Marker Regular'), local('PermanentMarker-Regular'), url(ad/font/chlaus.woff2) format('woff2');
 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html {
 font-size:100%;	
}

body {
 background-color:#EDE9E0;
 margin:0;
 padding:0;
 font-family:arial,verdana,helvetica,sans-serif;
 line-height:1.3;
 color:#000000;
}

main, article, aside, footer, header, nav, section {
 display:block;
} 

img {
 border:0px;
}

iframe {
 border:0px;
}

/* -- Header / Kopf -- */
header {
 border-top:2px solid #725F41;
 border-bottom:2px solid #725F41;
 padding:5px 0px 5px 0px; 
 background-color:#C2B096;	
 font-family:chlaus,verdana,helvetica,sans-serif;	
 text-align:center;
}

header a {
 color:#423826;
 text-decoration:none;
}

.titel1 {
 font-size:2.5em;
 /* offset-x | offset-y | blur-radius | color */
 text-shadow:2px 2px 4px rgba(0, 0, 0, 0.2); 
}

.titel2 {
 display:none;
 text-shadow:2px 2px 4px rgba(0, 0, 0, 0.2);
}
/* -- / Header / Kopf -- */


/* -- Spalte links / Navigation -- */
#spaltelinks {
 background-color:#EDE9E0;
 margin:0;
 padding:0;
 text-align:center;
}


nav {
 margin:0;
 border-bottom:2px solid #A88E68;
 padding:0;
 font-size:1.1em;
}

.navbar {   
 overflow:hidden;
}

.navbar .schnellwahl {
 float:right;
 margin-right:15px;
 padding:11px 0px;
}

.dropdown {
 float:left;
}

.dropdown .dropbtn {
 cursor:pointer;
 padding:11px 16px;
 font-weight:bold;
}

.dropdown:hover .dropbtn {
 background-color:#C2B096;
}

.dropdown-content {
 display:none;
 position:absolute;
 border-left:2px solid #A88E68;
 border-right:2px solid #A88E68;
 background-color:#EDE9E0;
 box-shadow:0px 8px 8px 0px rgba(0,0,0,0.2);
 z-index:1;
}

.dropdown-content ul {
 margin:0;
 border-top:2px solid #A88E68; 
 padding:0;
}

.dropdown-content ul li {
 margin:0;
 border-bottom:2px solid #A88E68; 
 padding:0;
 list-style-type:none;
}

.dropdown-content ul li a {
 float:none;
 margin-right:0px;
 padding:8px 16px;
 color:#000000;
 font-weight:bold;
 text-decoration:none;
 display:block;  
}

.dropdown-content ul li a.aktiv {
 background-color:#C2B096;	
}

.dropdown-content ul ul {
 display:none;
}

.show {
 display:block;
}


#sponsoren {
 display:none;
}
/* -- / Spalte links / Navigation -- */



/* -- Spalte rechts / Inhalt -- */
#spalterechts {
 background-color:#ffffff;
 margin:0;
 padding:0;
 text-align:left;
}

article {
 padding:10px;
}

section {
 margin:0px 0px 30px 0px;	
}

h1 {
 margin:20px 0px 20px 0px;
 padding:0;
 font-size:1.8em;
 font-weight:bold;
}

h2 {
 margin:0px 0px 20px 0px;
 padding:0;
 font-size:1.3em;
 font-weight:bold;
 font-style:italic;
 border-bottom:2px solid #CACACA;
}

h3 {
 margin:0px 0px 5px 0px;
 padding:0;
 font-size:1.1em;
 font-weight:bold;
}


.einleit {
 font-size:1.1em;
}

.rand {
 box-sizing:border-box;
 border:2px solid #A88E68;
 padding:10px; 
 /* offset-x | offset-y | blur-radius | spread-radius | color */
 box-shadow:5px 5px 8px 0px rgba(0, 0, 0, 0.2);
}

.hg {
 background-color:#f7f5f0;
}

.hg2 {
 background-image:url(/bild/hgsage.jpg);
}

.center {
 text-align:center;
}

.oben {
 margin:10px 0px 0px 0px;
}

.oben a {
 color:#0000FF;
}

.blau a {
 color:#0000FF;
}

.kleiner {
 font-size:0.8em;	
}

.brechts {
 padding:10px 20px 10px 20px;
 float:right;
}

.blinks {
 padding:10px 20px 10px 20px;
 float:left;
}

.nomobile {
 display:none;
}

.print {
 display:none;
}

.ie {
 display:none;
}


/* Ausklappmenu */
details {
 display:block; 
 margin-bottom:20px;
}

details[open] summary {
 background-color:#C2B096;
 margin-bottom:8px; 
 border:1px solid #725F41;
}

summary {
 padding:10px;
 background-color:#EDE9E0;
 border:1px solid #725F41;
 font-size:1.1em;
 font-weight:bold;	
 cursor:pointer;
}

summary:hover,
summary:focus {
 background-color:#C2B096;
 border:1px solid #725F41;
}
/* / Ausklappmenu */


/* Responsive Fotos */
.foto {
 max-width:100%;
 height:auto;
}

/* Responsive Videos */
.videoquer1 {
 max-width:100%;
 width:600px;
 left:0;
 right:0;
 margin:auto; /* Zentriert */
 box-shadow:5px 5px 8px 0px rgba(0, 0, 0, 0.2);
}

.videoquer2 {
 position:relative;
 padding-bottom:75%; /* Seiteinverhältnis vom Video: Höhe/Breite*100% */
 height:0;
 overflow:hidden;
}

.videoquer3 {
 position:relative;
 padding-bottom:56%; /* Seiteinverhältnis vom Video: Höhe/Breite*100% */
 height:0;
 overflow:hidden;
}

.videohoch1 {
 max-width:100%;
 width:270px;
 left:0;
 box-shadow:5px 5px 8px 0px rgba(0, 0, 0, 0.2);
}

.videohoch2 {
 position:relative;
 padding-bottom:177%; /* Seiteinverhältnis vom Video: Höhe/Breite*100% */
 height:0;
 overflow:hidden;
}

.video {
 position:absolute;
 top:0;
 left:0;
 width:100%;
 height:100%;
}




/* überbreite Tabellen - Scrollen */
.scrolltabelle {
 width:100%;
 overflow-y:auto;
 margin:0 0 1em;
}

.scrolltabelle::-webkit-scrollbar {
 -webkit-appearance:none;
 width:14px;
 height:14px;
}

.scrolltabelle::-webkit-scrollbar-thumb {
 border-radius:8px;
 border:3px solid #fff;
 background-color:rgba(0, 0, 0, .3);
}







/* Tabellen Agenda */
.agenda {
 border-collapse:collapse;
 border:1px solid #725F41;
 empty-cells:show;
}

.agenda caption {
 padding:0px 0px 6px 0px;
 text-align:left;
}

.agenda thead {
 text-align:left;
 background-color:#C2B096;
}

.agenda th {
 padding:4px 8px 4px 4px;
 border-top:1px solid #725F41;
 border-bottom:1px solid #725F41;
}

.agenda td {
 padding:4px 8px 4px 4px;
}

/* Formatierung der Zeilen */
.agenda tbody tr:nth-child(odd) {
 background-color: #FFFFFF;
 border-bottom:1px solid #725F41;
}

.agenda tbody tr:nth-child(even) {
 background-color: #F2F0EC;
 border-bottom:1px solid #725F41;
}

/* Tabelle Links */
.links td {
 width:16em;
 border-bottom:1px solid #EAEAEA;
 font-size:0.8em;
}

/* Formulare */
input, textarea {
 width:95%;
 margin:3px 0px 20px 0px;
 border:2px solid #725F41;
 border-radius:5px;
 padding:3px;
 font-size:1em;
 font-family:"Courier New",Arial,Verdana,Helvetica,sans-serif;
 color:#000000;
} 

textarea {
 height:11em;
}

input:focus, textarea:focus {
 border:2px solid #725F41;
 background-color:#FFFFBF;
}

.button, .button:focus {
 border:2px solid #725F41;
 padding:8px;
 background-color:#C2B096 /*#EDE9E0*/;
 font-size:1.2em;
 font-family:Arial,Verdana,Helvetica,sans-serif;
 font-weight:bold;
 color:#000000;
} 

.button:hover {
 background-color:#EDE9E0 /*#fbfaf8*/;
}

.checkbox {
 width:1em;
 margin:3px 0px 3px 0px;
} 

.fehler {
 color:#FF0000;
}


/* -- / Spalte rechts / Inhalt -- */



/* -- Footer / Fuss -- */
footer {
 border-top:2px solid #725F41;
 border-bottom:2px solid #725F41;
 background-color:#C2B096;	
 padding:8px 3px 8px 3px;
 text-align:center; 
 font-size:0.8em; 
}
/* -- / Footer / Fuss -- */