/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 30.06.2015, 18:22:43
    Author     : wdsgndzt
*/

@import "normalize.min.css";
@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,600italic,400italic,700italic");


html
{
background-color: #444242;
/* background-image: url("../grafik/hg-01a.jpg");
background-attachment:fixed;"
background-repeat:no-repeat;
background-size: cover; */
scroll-behavior: smooth;
}


body {
    font-family: "Open Sans", "Droid Sans", sans-serif;
    max-width: 1200px;
    min-width: 320px;
    margin: 10px auto;
	background-color: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
    font-size: 15px;
}

h1, h2, h3, h4, h5, h6, th, dt, b {
    font-weight: 600; /* halbfett */
color: #2164cb;
}

  a {
  text-decoration: none;
}


 a:link {
  color: #4481ba;
  text-decoration: none;
}


a:hover {
  color: #3e6a93;
  text-decoration: none;
}





ul  {
margin:0px;
}

strong {
    font-weight: 700; /* fett */
}

img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
	border-image-width: 0 0 0 0;
}


#kopfbild
{

}

#header, #sidebar, #footer {
    padding: 10px 30px;
    /* opacity: 0.8;*/
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

#main   {
    padding-top: 60px;
    padding-bottom: 20px;
    padding-right: 40px;
    padding-left: 40px;

    /* opacity: 0.8;*/
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

#header, #footer {
    background: #4481BA;
    color: #fff;
}


 #menu   {
    background: #4481BA;
    color: #fff;
    /* line-height: 1;  */
}

 /*
li  {
    padding-left: 0px;
    display: table-cell;
    height: 100%;
}
   */

#header  {
    /* border-radius: 10px 10px 10px 0; */

}


#menu-control,
            #menu-switch {
                display: none;
            }
            @media screen and (max-width: 680px) {
                #menu-control {
                    display: block;
                    float: right;
                    font-size: 2em;
                    line-height: 1;
                }

                #menu {
                    display: none;
				  /*	background: #112233 !important; */
                }
				
				#menu a {
    margin-bottom: 1px;
    display: block
	}



                
                /*
                Mittels :checked können Selektoren abhängig davon gestaltet werden,
                ob ein input-Element ("radio" oder "checkbox") abgehakt ist oder nicht.
                Damit lassen sich "Schalter" erzeugen, mit denen Elemente angezeigt 
                oder versteckt werden können. Gesteuert werden können diese Schalter
                mit Hilfe von label-Elementen, die beliebig positioniert werden können.
                */
                
                #menu-switch:checked + #menu {
                    display: block;
                    position: absolute;
                    top: 10px;
                    left: 10px;
                    right: 60px;
                    box-shadow: 0 0 10px rgba(0,0,0,0.5);
                    border-radius: 10px;
                }
                #menu ul ul {
                    position: static !important;
                    display: block !important;
                    font-size: 0.9em;
                    padding-left: 20px !important;
                }
            }


#main {
    width: 100%;
    /*  float: right;  */
}

#menu {
    width: 100%;
 float: left;
}

#sidebar {
    width: 25%;
    float: left;
    clear: left;
}


#preise {
    clear: both;
}


#footer {
    clear: both;
}

#menu h2 {
    display: none; /* Element nicht anzeigen */
}

#menu ul {
    list-style: none;
    margin-left: 0;
    padding-left: 26px;
    margin: 16px;

}

#menu li {

display: inline;

}




#menu a {

	margin-bottom: 1px;
    background: #ddd;
    color: #000;
padding: 16px 10px;
    padding-left: 10px;
    padding-right: 10px;
    text-decoration: none;
}

/* Aktuelle Browser */
#menu a.local-link {
    font-weight: 600;
}
/* Kommende Browser (CSS4) */
#menu a:local-link {
    font-weight: 600;
}

/* Standardmenü */

#menu.standard ul ul {
    margin: 0;
    font-size: 0.9em; 
}

#menu.standard ul ul a {
    padding-left: 20px; /* nur padding links ändern */ 
}

/* Ausklappmenü */

#menu.popup li {
    position: relative; /* Nachfahren können jetzt anhand dieses Elementes absolut positioniert werden. */
	/* background: #00ff00 url("/grafik/hg-01n.jpg") no-repeat fixed center;   */
}

#menu.popup li > ul {
    position: absolute;
    margin: 0;
    padding-left: 1px;
    left: 100%;
    top: 0;
    white-space: nowrap;
    display: none;
}

#menu.popup li:hover > ul {
    display: block;
}

#menu a:link {
    
}

#menu a:visited {
    
}

#menu a:hover {
    background: #fff;
}

#menu a:focus {
    background: #fff;    
}

#menu a:active {
    color: #f00 !important;
}

#main article figure {
    float: right;
    clear: right;
    margin: 0 0 0.5em 1.5em;
    width: 40%;
}

#main article figure img {
    display: block;
    width: 100%;
    height: auto;
}

#main article figcaption {
    font-size: 0.8em;
}

@media screen and (max-width: 720px) {
    #main {
        width: 70%;
    }
    #sidebar {
        width: 30%;
    }
}

@media screen and (max-width: 680px) {
    
    body {
        font-size: 0.9em;
    }
    
    #main, #menu, #sidebar {
        width: auto;
        float: none;
    }
    #header, #main, #menu, #sidebar, #footer {
        padding: 10px;
    }
    
    #main article figure {
        width: auto;
        float: none;
        margin: 1em 0;
    }
}

@media print {
    * {
        color: #000 !important;
    }
    body {
        max-width: none;
    }
    #menu, #sidebar {
        display: none;
    }
    #main {
        width: auto;
        margin: 0;
        float: none;
    }
    #main a[href] {
        font-weight: 600;
        text-decoration: none;
    }
    #main a[href]::after {
        content: " (" attr(href) ")";
    }
    #main abbr[title] {
        /* border: none; */
        border: 0; 
    }
    #main abbr[title]::after {
        content: " (" attr(title) ")";
    }
    #main figcaption {
        position: relative;
    }
    #main figcaption[data-copyright]::after {
        /*
        content: ", " attr(data-copyright);
        */
        content: attr(data-copyright);
        display: block;
        position: absolute;
        right: 0.5em;
        top: -1.5em;
        font-size: 0.8em;
        font-weight: 300;
    }
    #footer::after {
        display: block;
        font-size: 0.8em;
        text-align: right;
        content: "Copyright 2015 M. Muster. Alle Rechte vorbehalten.";
    }
}



  .tabdesign table {
                /* border-spacing: 0; */
                border-collapse: collapse;
                caption-side: bottom;
				font-size: 11px;
            }
            
          .tabdesign  table, .tabdesign th, .tabdesign td {
                border: 1px solid #605F5B;
            }
            
           .tabdesign th, .tabdesign td {
                padding: 0.2em 0.5em;
                vertical-align: top;
				text-align: center;
            }
            
            .tabdesign thead, .tabdesign tfoot {
                background-color: #EBEBEA;
            }
            
            .tabdesign tbody tr:nth-child(odd) {
                background-color: #F5F4F1;
            }
            
            /*
            CSS3-Selektor
            td-Element im Tabellenfu�
            Zweite Spalte im Tabellenrumpf
            Vierte Spalte im Tabellenrumpf
            */
            .tabdesign tfoot td,
            .tabdesign tbody td:nth-child(2),
            .tabdesign tbody td:nth-child(4) {
                text-align: center;
            }
            
            /*
            CSS3-Selektor
            Dritte Spalte im Tabellenrumpf
            */
            .tabdesign tbody td:nth-child(3) {
                text-align: center;
            }
            
            .tabdesign tfoot th {
                text-align: center;
            }
			
			#preise
			{
			padding: 20px;
}



#sidebar
			{
			/* background-color: #112233;
			height: 300px;
			 */
}




.flexframe {
position: relative;
padding-bottom: 55%;
padding-top: 15px;
height: 0;
overflow: hidden;
}

.flexframe iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
}



 #menu-control,
            #menu-switch {
                display: none;
                cursor: pointer;
            }
            @media screen and (max-width: 680px) {
                #menu-control {
                    display: block;
                    float: right;
                    font-size: 3em;
                    line-height: 1;
                }
                
                #menu {
                    display: none;
                }
				
				#menu a.local-link
				
				 {
                    font-size: 18px;
                }
				
				#menu a
				
				 {
                    font-size: 18px;
                }
				
				p {
				font-size: 16px;
				}
                
                /*
                Mittels :checked können Selektoren abhängig davon gestaltet werden,
                ob ein input-Element ("radio" oder "checkbox") abgehakt ist oder nicht.
                Damit lassen sich "Schalter" erzeugen, mit denen Elemente angezeigt 
                oder versteckt werden können. Gesteuert werden können diese Schalter
                mit Hilfe von label-Elementen, die beliebig positioniert werden können.
                */
                
                #menu-switch:checked + #menu {
                    display: block;
                    position: absolute;
                    top: 60px;
                    left: 10px;
                    right: 10px;
                    box-shadow: 0 0 10px rgba(0,0,0,0.5);
                    /* border-radius: 10px; */
                }
                #menu ul ul {
                    position: static !important;
                    display: block !important;
                    font-size: 0.9em;
                    padding-left: 20px !important;
                }
            }
			
			
			
			
					
a.verlin:link
{
    color: inherit;
	 text-decoration: none
}

a.verlin:visited
{
    color: #645B55;
}

a.verlin:hover
{
    color: #3170D3;
}

a.verlin:focus
{
    color: #645B55;
}

a.verlin:active
{
   color: #645B55;
}

.rechts
{
text-align: right;
}

				
a.unten:link
{
    color: #ffffff; 
	 text-decoration: none
}

a.unten:visited
{
    color: #ffffff; 
}

a.unten:hover
{
    color: #C1D3E4;   
}

a.unten:focus
{
    color: #ffffff;  
}

a.unten:active
{
   color: #ffffff; 
}


.beleg {
border: 0;
align: center 
font-size: 10px; 
font-family:Verdana;
bgcolor: #E1E1E1;
padding: 5px;

}

td    {
padding: 2px;
}


.hsend
{
background-color: #F2F3F5;
border:1px solid #6A6B6D;
}

.hsend td    {
padding: 20px;
}


a.flin:link
{
    color: #F4072E; 
	 text-decoration: none
}

a.flin:visited
{
    color: #F4072E; 
}

a.flin:hover
{
    color: #A90C22;   
}

a.flin:focus
{
    color: #F4072E;  
}

a.flin:active
{
   color: #F4072E; 
}

.kopfbi
{
display:block;
position:relative;
max-width:960px;
margin:0px  auto -5px;
}


.kalay
{
border:1px solid #6A6B6D;
font-size:8.5pt; 
font-family:Verdana;

}

.kalay td {
border:1px solid #6A6B6D;

}


.vermietung {
    font-size: 15px;
}

   .normaleliste   {
   float: left;
    clear: left;
              }


@media screen and (max-width: 680px) {
   #menu ul {
    margin: 0px;
         padding-left: 0px;
              }
              }

.fusscenter {
   text-align: center;
    font-size: 13px;
    color: white;
       background-color: #3E6A93;
       margin-top: -12px;
       padding-top: 4px;
       padding-bottom: 20px;
       height: 26px;
       font-family: "Open Sans", "Droid Sans", sans-serif;
       /* border-style: solid;
    border-width: 1px 1px 1px 1px;  */


}





  a.schule:link
{
   text-decoration: none;
   color: #3e6a93;
}

a.schule:visited
{
    color: #3e6a93;
}

a.schule:hover
{
    color: #950315;
}

a.schule:focus
{
    color: #3e6a93;
}

a.schule.active
{
   color: #3e6a93;
}






     .eigenetable {
  display: table;
  border: 0px solid #DDDDE0;
  border-collapse:collapse;
  width: 100%;
}

.eigenetable-row {
  display: flex;
  border: 0px solid #DDDDE0;
}

.eigenetable-cell {
  flex: 1;
  display: table-cell;
  border: 0px solid #DDDDE0;
  padding: 15px;
}

.eigenethead {
  font-weight: bold;
  background:#eee;
}
 @media only screen and (max-width: 800px) {

  .eigenetable {border:none;}

  .eigenetable-row,
  .eigenetable-cell {
    display: block;
    border: 0px solid #DDDDE0;
  }

  .eigenetable-row { margin-bottom: 20px; }

}

    .bildeigenetable {
  display: table;
  width: 100%;
  table-layout: fixed; /* Optional: Erreicht eine gleichmäßige Verteilung der Spalten */
}


   .bildeigenetable-row {
  display: table-row;
  border: 0px solid #DDDDE0;
}

.bildeigenetable-cell {
  display: table-cell;
  border: 0px solid #DDDDE0;
  padding: 15px;
 justify-content: center;
   text-align: center;
}

.bildeigenethead {
  font-weight: bold;
  background:#eee;
}
 @media only screen and (max-width: 800px) {

  .bildeigenetable {border:none;}

  .bildeigenetable-row,
  .bildeigenetable-cell {
    display: block;
    border: 0px solid #DDDDE0;
  }

  .bildeigenetable-row { margin-bottom: 20px; }

}



  /* Den Button unten rechts fixieren */
  .scroll-top-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 100;
    background-color: #2869a6;
    color:#ffffff;
    padding: 10px 15px;
    text-decoration: none;
    border-radius: 5px;
    font-family: sans-serif;
  }

  .scroll-top-btn:hover {
    background-color: #0056b3;
  }