/* ---------- sorry, noch nich uffgerŠumt ---------- */

/* ---------- allgemeines ---------- */

html, body, div, p, h1, h2, h3, ul, ol, span, a, table, td, form, img, li 
{
   margin: 0;
   padding: 0;
}

@media (min-width: 768px)  {

	body		{
				background-color: #ede9e4;
				background-image:url(/pic/hgall.jpg);
				background-repeat:repeat-y;
				}
	
	.start		{
				background-color: #009680;
				}
	
	
	h1			{
				font: 16px/150% Verdana, Arial, Helvetica, sans-serif;
				color:#707173;
				padding: 0px 0px 12px 0px;
				}
	
	h1.startheadline			{
				font: 14px/150% Verdana, Arial, Helvetica, sans-serif;
				color:#fff;
				padding: 0px 0px 12px 0px;
				}
	
	/* ---------- color:#707173; ---------- */
	p			{
				font: 12px/125% Verdana, Arial, Helvetica, sans-serif;
				color:#81725e;
				padding: 0px 0px 12px 0px;
				}
	
	p.klein			{
				font: 10px/125% Verdana, Arial, Helvetica, sans-serif;
				color:#81725e;
				padding: 0px 0px 12px 0px;
				}
	
	
	p.starttxt			{
				font: 12px/125% Verdana, Arial, Helvetica, sans-serif;
				color:#fff;
				padding: 0px 0px 12px 0px;
				}
	
	ul, ol
	
				{
				font: 12px/125% Verdana, Arial, Helvetica, sans-serif;
				color:#707173;
				padding: 0px 0px 12px 0px;
				margin: 0px 0px 0px 18px;
				color:#81725e;
				}
	
	strong		{
				font-weight: bold;
				}
	
	
	a:link		{color: #009680; text-decoration: none;}
	a:visited	{color: #009680; text-decoration: none;}
	a:active	{color: #009680; text-decoration: none;}
	a:hover 	{color: #646567; text-decoration: underline;}
	a:focus 	{color: #646567; text-decoration: underline;}
	
	a:link.bremer		{color: #004532; text-decoration: none;}
	a:visited.bremer	{color: #004532; text-decoration: none;}
	a:active.bremer		{color: #004532; text-decoration: none;}
	a:hover.bremer 		{color: #004532; text-decoration: underline;}
	a:focus.bremer	 	{color: #004532; text-decoration: underline;}
	
	a:link.tieves		{color: #9e012e; text-decoration: none;}
	a:visited.tieves	{color: #9e012e; text-decoration: none;}
	a:active.tieves		{color: #9e012e; text-decoration: none;}
	a:hover.tieves 		{color: #9e012e; text-decoration: underline;}
	a:focus.tieves	 	{color: #9e012e; text-decoration: underline;}
	
	/* ---------- id ---------- */
	
	#all		{
	/*			position: absolute; top: 0px; left: 0px; */
				position: relative; top: 0px; left: 0px;
				width: 950px;
				margin-left: 0px;
				z-index: 1;
				}
	
	#allweiss		{
				position: relative; top: 0px; left: 0px;
				width: 950px;
				z-index: 2;
				float:left;
				}
	
	#namen		{
				position: absolute; top: 144px; left: 650px; 
				width: 299px; height: 512px;
				z-index: 999;
				}
	
	#content	{
				position: relative; top: 0px; left: 198px;
				width: 552px;
				z-index: 3;
				}
	
	#contentnorm	{
				position: relative; top: 0px; left: 30px;
				width: 435px;
				padding-top: 35px;
				z-index: 5;
				}
	
	#contentpic	{
				position: relative; top: 20px; left: -228px;
				width: 623px; height: 196px;
				z-index: 9;
				}
	
	#contenttext	{
				position: relative; top: 55px; left: 0px;
				width: 400px;
				padding-top: 0px;
				z-index: 6;
				}
	
	#footer		{
				position: relative; top: 15px; left: 0px;
				width: 435px; hihgt
				padding-bottom: 10px;
				}
	
	#footer	p	{
				font: 9px/125% Verdana, Arial, Helvetica, sans-serif;
				color:#707173;
				padding: 0px 0px 12px 0px;
				}
	
	#footer a:link		{color: #707173; text-decoration: underline;}
	#footer a:visited	{color: #707173; text-decoration: underline;}
	#footer a:active	{color: #707173; text-decoration: underline;}
	#footer a:hover 	{color: #FFF; text-decoration: none; background-color: #707173; }
	#footer a:focus 	{color: #FFF; text-decoration: none; background-color: #707173; }
	
	
	#navigation
				{
				position: absolute; top: 327px; left: 0px;
				width: 180px;
				text-align:right;
				}
	
	#navigationstart
				{
				position: absolute; top: 162px; left: 10px;
				width: 180px;
				text-align:right;
				}
	
	#navigation	p	{
				font: 12px/100% Verdana, Arial, Helvetica, sans-serif;
				color:#707173;
				padding: 0px 0px 12px 0px;
				}
	
	#navigationstart	p	{
				font: 12px/100% Verdana, Arial, Helvetica, sans-serif;
				color:#707173;
				padding: 0px 0px 12px 0px;
				}
	
	#navigation	.subtxt	{
				font: 11px/100% Verdana, Arial, Helvetica, sans-serif;
				color:#707173;
				padding: 0px 10px 12px 0px;
				}
	
	#navigation a:link		{color: #81725e; text-decoration: none;}
	#navigation a:visited	{color: #81725e; text-decoration: none;}
	#navigation a:active	{color: #81725e; text-decoration: none;}
	#navigation a:hover 	{color: #034534; text-decoration: none;}
	#navigation a:focus 	{color: #034534; text-decoration: none;}
	
	#navigation a:link.on		{color: #9b3b48; text-decoration: none;}
	#navigation a:visited.on	{color: #9b3b48; text-decoration: none;}
	#navigation a:active.on	{color: #9b3b48; text-decoration: none;}
	#navigation a:hover.on 	{color: #9b3b48; text-decoration: none;}
	#navigation a:focus.on 	{color: #9b3b48; text-decoration: none;}
	
	#navigation a:link.sub		{color: #999999; text-decoration: none;}
	#navigation a:visited.sub	{color: #999999; text-decoration: none;}
	#navigation a:active.sub	{color: #999999; text-decoration: none;}
	#navigation a:hover.sub 	{color: #646567; text-decoration: none;}
	#navigation a:focus.sub 	{color: #646567; text-decoration: none;}
	
	#navigation a:link.subon		{color: #646567; text-decoration: none;}
	#navigation a:visited.subon	{color: #646567; text-decoration: none;}
	#navigation a:active.subon	{color: #646567; text-decoration: none;}
	#navigation a:hover.subon 	{color: #646567; text-decoration: none;}
	#navigation a:focus.subon 	{color: #646567; text-decoration: none;}
	
	#navigation a:link.tievessub		{color: #9e012e; text-decoration: none;}
	#navigation a:visited.tievessub		{color: #9e012e; text-decoration: none;}
	#navigation a:active.tievessub		{color: #9e012e; text-decoration: none;}
	#navigation a:hover.tievessub 		{color: #646567; text-decoration: none;}
	#navigation a:focus.tievessub 		{color: #646567; text-decoration: none;}
	
	#navigation a:link.tievessubon		{color: #9e012e; text-decoration: none;}
	#navigation a:visited.tievessubon	{color: #9e012e; text-decoration: none;}
	#navigation a:active.tievessubon	{color: #9e012e; text-decoration: none;}
	#navigation a:hover.tievessubon 	{color: #646567; text-decoration: none;}
	#navigation a:focus.tievessubon 	{color: #646567; text-decoration: none;}
	
	#navigation a:link.bremersub		{color: #004532; text-decoration: none;}
	#navigation a:visited.bremersub		{color: #004532; text-decoration: none;}
	#navigation a:active.bremersub		{color: #004532; text-decoration: none;}
	#navigation a:hover.bremersub 		{color: #646567; text-decoration: none;}
	#navigation a:focus.bremersub 		{color: #646567; text-decoration: none;}
	
	#navigation a:link.bremersubon		{color: #004532; text-decoration: none;}
	#navigation a:visited.bremersubon	{color: #004532; text-decoration: none;}
	#navigation a:active.bremersubon	{color: #004532; text-decoration: none;}
	#navigation a:hover.bremersubon 	{color: #646567; text-decoration: none;}
	#navigation a:focus.bremersubon 	{color: #646567; text-decoration: none;}
	
	
	#navigation	.klein			{
				font: 4px Verdana, Arial, Helvetica, sans-serif;
				padding: 0px 0px 3px 0px;
				}
	
	#navigationstart	.klein			{
				font: 4px Verdana, Arial, Helvetica, sans-serif;
				padding: 0px 0px 3px 0px;
				}
	
	#navigationstart a:link		{color: #f2af32; text-decoration: none;}
	#navigationstart a:visited	{color: #f2af32; text-decoration: none;}
	#navigationstart a:active	{color: #f2af32; text-decoration: none;}
	#navigationstart a:hover 	{color: #fff; text-decoration: none;}
	#navigationstart a:focus 	{color: #fff; text-decoration: none;}
	
	#navigationstart a:link.on		{color: #f2af32; text-decoration: none;}
	#navigationstart a:visited.on	{color: #f2af32; text-decoration: none;}
	#navigationstart a:active.on	{color: #f2af32; text-decoration: none;}
	#navigationstart a:hover.on 	{color: #fff; text-decoration: none;}
	#navigationstart a:focus.on 	{color: #fff; text-decoration: none;}
	
	#link		{
				position: absolute; top: 120px; left: 600px;
				width: 47px; height: 108px;
				z-index: 99;
				}
	
	.bremer		{color: #004532;}
	.tieves		{color: #9e012e;}
	
}

/* Standard: Desktop-Navigation sichtbar, Mobile-Navigation ausgeblendet */
#navimobil,
#navimobil-toggle,
#namen_mobil,
#footer_mobil {
	display: none;
}

/* Mobile Ansicht */
@media ( max-width: 767px ) {
	body {
		all: initial;
		background-color: #ffffff;
	} 
    #navigation {
		display: none; /* Desktop-Navi ausblenden */
	}
	#namen {
		display: none; /* rechte Spalte ausblenden */
	}
	#all, #allweiss, #content, #contentpic, #contenttext, #contentnorm	{
		all: initial;
		position: relative !important; 
		display: block;
/*		top: 0px !important; 
		left: 0px !important;
*/		width: 100% !important;
	}
	
	#contentpic > img,
	#namen_mobil > img {
		max-width: 100%;
	}

	#namen_mobil {
		display: block;
		background-color: #ede9e4;
	}

	#footer_mobil {
		display: block;
		background-color: #ede9e4;
	}

  #navimobil-toggle {
    display: block;
/*    background-color: #fff;  
*/    background-color: #ede9e4;  
/*	border: 1px solid gray !important;
*/    color: #000;            
    border: none;
    padding: 10px;
    font-size: 24px;
    cursor: pointer;
    position: absolute;     /* rechts oben */
    top: 8px;
    right: 10px;
    z-index: 1001;
  }

  #navimobil {
    position: fixed;       /* Overlay */
    top: 0px;
    left: 0;
    width: 100%;
    height: 100%;          /* volle Hšhe */
    background: rgba(255,255,255,0.95); /* leicht transparentes Wei§ */
    transform: translateY(0%);       /* Start: au§erhalb des Bildschirms */
    transition: transform 0.4s ease;
    z-index: 1000;
    padding: 20px;
    overflow-y: auto;      /* Scrollbar falls nštig */
  }

  #navimobil.open {
    display: block;
/*    transform: translateY(0); /* eingeblendet */
  }

	#navimobil ul {
		font: 1em/1.2em Verdana, Arial, Helvetica, sans-serif;
		list-style: none;
		margin: 0;
		padding: 0;
	}

  #navimobil li {
    margin: 10px 0;
  }

  #navimobil a {
    text-decoration: none;
    color: #81725e;
    font-size: 18px;
  }

  #navimobil a.on,
  #navimobil a.subon {
    font-weight: bold;
    color: #9b3b48;
  }

  #navimobil .subnav {
    margin-left: 15px;
    display: block; /* immer sichtbar */
  }

	p {
		font: 1em/1.2em Verdana, Arial, Helvetica, sans-serif;
		color:#81725e;
		padding: 0px 10px 12px 10px;
	}

	ul, ol {
		font: 1em/1.2em Verdana, Arial, Helvetica, sans-serif;
		color:#707173;
		padding: 0px 0px 12px 0px;
		margin: 0px 10px 0px 28px;
		color:#81725e;
	}

	#footer_mobil > p {
		font: 0.85em/1.1em Verdana, Arial, Helvetica, sans-serif !important;
		color:#81725e;
		padding: 12px 10px 12px 10px;
	}

	a:link		{color: #009680; text-decoration: none;}
	a:visited	{color: #009680; text-decoration: none;}
	a:active	{color: #009680; text-decoration: none;}
	a:hover 	{color: #646567; text-decoration: underline;}
	a:focus 	{color: #646567; text-decoration: underline;}
	
	a:link.bremer		{color: #004532; text-decoration: none;}
	a:visited.bremer	{color: #004532; text-decoration: none;}
	a:active.bremer		{color: #004532; text-decoration: none;}
	a:hover.bremer 		{color: #004532; text-decoration: underline;}
	a:focus.bremer	 	{color: #004532; text-decoration: underline;}
	
	a:link.tieves		{color: #9e012e; text-decoration: none;}
	a:visited.tieves	{color: #9e012e; text-decoration: none;}
	a:active.tieves		{color: #9e012e; text-decoration: none;}
	a:hover.tieves 		{color: #9e012e; text-decoration: underline;}
	a:focus.tieves	 	{color: #9e012e; text-decoration: underline;}

	.bremer		{color: #004532;}
	.tieves		{color: #9e012e;}

}