/* Allgemeine Anweisungen */
* {
    margin: 0;
    padding: 0;
    font-family: Quicksand; Verdana, Geneva, sans-serif;
	font-size: 10px;
}
html, body {
    height: 100%;
}
body 	{ max-width: 1024px;
		width: 90%;
		display: table;
		margin: 0 auto;
		padding: 0;
		/*color: #0A1924;*/
		color: grey;
		/*color: #8a8a8a;*/
		background-color: #ebebebff;
		/*background-attachment:scroll;*/
		font-family: Verdana,Geneva,sans-serif;
		font-size: 100.1%;
		line-height: 1.3;
		text-align: center;		/*alte IEs*/
}

#preloadedImages
{
    width: 0px;
    height: 0px;
    display: inline;
    background-image: url(images/raeume/front_hell_1024x596.png);
    background-image: url(images/raeume/raum1.jpg);
    background-image: url(images/raeume/raum2_1024x596.jpg);
    background-image: url(images/raeume/raum3_1024x596.jpg);
    background-image: url(images/raeume/raum4_1024x596.jpg);
	background-image: url(images/raeume/raum5_1024x596.jpg);
	background-image: url(images/raeume/raum6_1024x596.jpg);
	background-image: url(images/raeume/raum7_1024x596.jpg);
	background-image: url(images/raeume/raum8_1024x596.jpg);
}


/*20240821*/
/* kein Outline bei Fokus */
input:focus, select:focus, textarea:focus, button:focus {
	outline: none;
}

.clear {
	clear: both;
}
.clear-mobile-nav {
	display: none;
	clear: both;
}

.v-center {
	display: table-cell;
	vertical-align: middle;
	/* parent element needs to be set to display: table; */
}

#site-wrapper {
	max-width: 1024px;
	width: 90%;
	padding: 0% 5%;
	margin: auto;
	background: #ffffff;
}
/*20240821*/


h1, h2, h3, p {
    /*margin: 0.5em;*/
}	

p {
    font-size: 1em; /*fallback für alte browser*/
    font-size: clamp(1em, calc(1em - 0.25vw), 2em); 
}

.tabellen_zelle {
    max-width: 1024px;
	display: table-row;
    background-color: #ffff;
}

.maximale_hoehe {
	height: 100%;
    background-color: #ffff;
}

header {
    /*background-color: red !important;*/
	background-color:#ffff;
    width: 100%;
	display:block;
    float: left;
    /*border-bottom: 3px solid black;*/
}

#bereichlogotxt {
    color: white;
    background-color: #ffffff;    
    display: block;
    padding: 0.5em;
	text-decoration: none;
    float: left;    
}
#bereichlogo {
	width: auto;
	background-color: #ffffff;
}

#bereichlogo {
    color: white;
    background-color: #ffffff;    
    display: block;
    padding: 0.5em;
	text-decoration: none;
    float: left;    
}
#bereichlogotxt {
	width: auto;
}
#steuerung li {
    list-style: none;
    float: left;
}
#steuerung a {
    display: block;
	width: 97.5%;
	height: 100%;
	margin-right: 1em;
	padding: 0.5em;
	font-size: 1em;
	text-transform: uppercase;
    text-decoration: none;
    color: white;
    background-color: gray;
	/*vertical-align:bottom;*/
}    

#steuerung a:hover {
    color: black;
    background: #f27424ff;	
}

#steuerung {
	float: right;
    margin-top: 2.5rem;
	margin-right: 0.75em;
	/*display: block;*/
	/*position: relative;*/
	/*padding: 0.5em;*/
	cursor: pointer;
}
.menue-button {
    display: none;
}    

section{
	width: 100%;
	/*background-color: yellow !important;*/
	/*height:100%;*/
	margin: 0 auto;    /* Zentrierung*/
    padding: 0.5em;
    /*float: left;*/
}
section p{
	text-align: left;
	font-size: 1em;
}

/*----------------------------*/
.gallery {
	position: relative;
	margin: 0;
	background: none;
	border: none;
}

.gallery figure {
	position: absolute;
	display: inline-block;
	top: 0;
	left: 2em;
	width:100%;
	z-index: 1;
	animation: wechseln 45s infinite;
}

.gallery figure:last-of-type {
	position: relative;
}

.gallery > figure figcaption {
	position: absolute;
	left: 1em;
	font-size: 2em;
	font-weight: bold;
	bottom: 0.5em;
	z-index: 2;
	color: white;
}

@keyframes wechseln {
    0% {opacity: 0;}
    6% {opacity: 1;}
   12% {opacity: 1;}
   18% {opacity: 0;}
  100% {opacity: 0;}
}

.gallery figure:nth-of-type(2) {
	animation-delay: 5s;
	opacity: 0;
}

.gallery figure:nth-of-type(3) {
	animation-delay: 10s;
	opacity: 0;
}
.gallery figure:nth-of-type(4) {
	animation-delay: 15s;
	opacity: 0;
}

.gallery figure:nth-of-type(5) {
	animation-delay: 20s;
	opacity: 0;
}

.gallery figure:nth-of-type(6) {
	animation-delay: 25s;
	opacity: 0;
}
.gallery figure:nth-of-type(7) {
	animation-delay: 30s;
	opacity: 0;
}
.gallery figure:nth-of-type(8) {
	animation-delay: 35s;
	opacity: 0;
}
.gallery figure:nth-of-type(9) {
	animation-delay: 40s;
	opacity: 0;
}

/*----------------------------*/
#p-holder {
		display:box;
		width: 90%;
    	margin: 0;
    	padding:0% 0%;
		/*background-attachment:scroll;-->*/
		background-color: yellow !important;
		/*background-color: #ffffff;*/
}

.p-left {width: 48%;
		float: left;
		vertical-align:center;
		background-color: #ffffff;
		z-index: 1000;
		position: relative;
}

.p-right {
		display:box;
		vertical-align:center;
		width: 48%;
		float: left;
		background-color: #ffffff;
		position: relative;
}

#content   {max-width:1024px;
		width: 90%;
   	    margin: auto;
  	    padding: 5% 5%;
	    /*border-right: 0px solid #877D6C;*/
        display:block;
	    overflow:auto;
	    font-size: 0.75rem;
	    text-align:justify;
            scrollbar-base-color:#3399cc;
            scrollbar-3dlight-color:#3399cc;
            scrollbar-highlight-color:#990000;
            scrollbar-face-color:#990000;
            scrollbar-arrow-color:#3399cc;
            scrollbar-shadow-color:#3399cc;
            scrollbar-darkshadow-color:#990000;
            scrollbar-track-color:#3399cc; 
		/*background-color: darkblue;*/
}

#content p {font-size: 0.75rem; line-height: 1rem; text-align: left;
}

#content table {width: 90%; 
                font-size: 0.75rem;
				font-weight: bold;
                /*line-height: 130%; */
}

#content td {
			font-size: 0.75rem;
			padding: 0.5rem 0.5rem; 
            /*border:1px solid #000;*/
            overflow:hidden; 
}


#content td li {line-height: 1em; text-decoration: none; font-weight: bold;
}


#content h1 {
			font-size: 1em; /*fallback für alte browser*/
			font-size: clamp(1em, calc(1em - 0.25vw), 2em); 
			font-weight: bold;
            color:#990000;
            margin: 0;
}

#content-body {	
		width: 100%;
		min-height: 10%;
		padding: 0;
		margin: 2em 0 0 0;
		position: absolute;
		background-color: yellow;
}


.callout {
		font: bold 1.5em;
        color:#f27424ff;
        margin: 1.5em 0 1em 0;
		
}

h1.callout {
		font-weight: bold;
		font-size: 1.5em !important;
        color:#f27424ff !important;
        margin: 1.5em 0 1em 0;
}

h2.callout {
		font-weight: bold;
		font-size: 1.25em !important;
        color:#f27424ff !important;
        margin: 1.5rem 0 1rem 0;
		
}


.leistungen_u{
		font-weight: bold;
		font-size: 1em !important;        
		background-color: #3e672138 !important;
		border-radius: 1em 1em 1em 1em;
		padding: 1em 1em 1em 1em;
        
}

.leistungen_g{
		font-weight: bold;
		font-size: 1em !important;        
		background-color: #ec792069 !important;
		border-radius: 1em 1em 1em 1em;
		padding: 1em 1em 1em 1em;
        
}


#footer {
	    /*clear: both;*/
        /*max-width: 1024px;*/
		/*width:100%;*/
		/*top:90%;*/
		margin: auto;
	    background-color: #64a344ff;
		text-align: center !important;
}

#footer span {color:white;
	          font-size: 1em;
}

#footer a {text-decoration: none;
	   color:white; 
}

#footer a:link {color:white;}

#footer a:hover, #footer a:focus {color:silver; font-weight:normal}


* html #footer a, * html #footer span {
    width: 1em;    /* nur fuer IE 5.0x erforderlich */
    width: auto;  /* sicherheitshalber fuer IE 6 zurueckgesetzt */
}

#footer ul {
		/*width:436px;*/
	    /*margin:0;*/
        /*padding:0;*/
	    display:inline;
        text-align:right;
        /*font-size:100%;*/
	    background-color:transparent;
        list-style-type:none;
}


#footer ul li  {width:200px;
                margin:0px;
                padding:0 4px;
				display:inline;
				text-align:right;
}

a:link	{ height: 1%; /* Holly-Hack für IE */
		  text-decoration: none;
		  color: maroon;
}

a:visited	{ color: maroon;text-decoration:none}


a:focus 	{font-weight: none;}

a:hover 	{color: grey; font-weight: none;}

a:active	{font-weight: none;}

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


/*	Menü-Button oben rechts einblenden bei kleiner als ___px */


@media only screen and (max-width:768px) {
	
	.menue-button {
		display: block;
		position: absolute;
		right: 5%;
		top: 2rem;
		padding: 0.5em;
		color: white;
		cursor: pointer;
		text-decoration: none;
	}	
	
	.menue-button:hover {
		color: gray;
	}
	
		
	header {
		/*background-color: orange !important;*/
		width: 100%;
		float: left;
		/*border-bottom: 1px solid black;*/	
	}
	
	bereichlogo{
		width: 100%;
	}
	
	
	#steuerung {
		float: left;
		width: 97.5%;
		display: none;
	}		
	
	#steuerung li {
		width: 100%;
		border-bottom: 2px solid silver;
	}
	
	#footer span {color:white;
              margin:0;
              padding:0.25em;
}


@media only screen and (max-width:600px) {
	.p-left {
		width: 100%;
		margin: auto;
		position: relative;

	}
	.p-right {
		width: 100%;
		position: relative;
	}
}

/* Steuerung einblenden */
#nav-menue:target #steuerung {
    display: block;
}

/* Menü-Buttons ausblenden, damit der Schließen-Button sichtbar wird */
#nav-menue:target .menue-button-beschr-open {
    display: none ; 
}