/* ===========================
   Stylesheet klavierstimmer-saale-orla-kreis.de
   Datei: sok.css
   Datum: 2024-02-28
   Autor: Matthias Meiners 
   ===========================*/


/* Allgemein */
  
* {margin: 0;
   padding: 0;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
	box-sizing: border-box;}
	
html {width: 100%; height: 101%; background-color: #8BB2D9;} 

body {
   min-width: 300px;
   max-width: 1004px;
   margin: 0 auto 0 auto;
   background-color: #ffffff;
   position: relative;
   font-family: Arial, Helvetica, sans-serif;
   color: #111;
   font-size: 95%;
   background: #FFF url(bilder/tastenbg.gif) repeat-y top left;}

div#container {
   max-width: 1004px;
   position: relative;
   background-color: transparent;
   padding-bottom: 50px;}

h1 {font-size: 1.2em;}
h2, h3 {font-size: 1.1em;}
h4 {font-size: 1.2em;}
h5 {font-size: 0.9em;}

h1, h2, h4 {font-family: Arial, Verdana, Helvetica, sans-serif; color: #666;}

h3, h5 {font-family: Arial, Verdana, Helvetica, sans-serif;}
h3, h5 {color: #555;}

p {
   font-size: 0.8em;
   line-height: 1.5em;}

ul, ol {line-height: 1.4em;}

.stopFloat {display: block;
            float: none;
            clear: both;
            height: 1px;
            line-height: 0;
            font-size: 0;}

.nofloat {float: none;
          clear: both;}

.hidden {position: relative;
   top: -7000px;
   left: -7000px;
   margin: 0;
   padding: 0;
   font-size: 0;
   width: 0;
   height: 0;}

/* Hyperlinks */

a {
   color: #003399;
   font-size: 0.8em;
   font-weight: bold;
   text-decoration: none;}

a:link,
a:visited {color: #003399;
   outline: none;}

a:hover {color: #5588BB;
   text-decoration: none;
   border-bottom: #5588BB solid 1px;}

a:active {color: #003399;
   outline: none;}

a:hover span.preis {opacity: 0.5;}

a.intern {
   font-weight: bold;}
a.intern:link,
a.intern:visited {
   font-size: 0.8em;
   color: #5588BB;
   text-decoration: none;
   outline: none;}
a.intern:hover {
   color: #003399;
   border-bottom: #003399 1px solid;}

a.intern3 {font-weight: bold;}
a.intern3:link,
a.intern3:visited {
   font-size: 1em;
   color: #5588BB;
   text-decoration: none;
   outline: none;}
a.intern3:hover {
   color: #003399;
   border-bottom: #003399 1px solid;}

a.extern {
   color: #003399;
   font-size: 1em;
   font-weight: bold;
   text-decoration: none;
   padding: 1px 1px 0 2px;}

a.extern:hover {
   font-size: 1em;
   color: #FFFFFF;
   background-color: #003399;
   text-decoration: none;}

a.extern2 {
   color: #003399;
   font-size: 1em;
   font-weight: bold;
   text-decoration: none;
   padding: 1px 2px 0 0;}

a.extern2:hover {
   font-size: 1em;
   color: #FFFFFF;
   background-color: #003399;
   text-decoration: none;}

a.exrot2 {
   color: #003399;
   font-size: 1.2em;
   font-weight: bold;
   text-decoration: none;
   padding: 1px 2px 0 2px;}

a.exrot2:hover {
   font-size: 1.2em;
   color: #FFFFFF;
   background-color: red;
   text-decoration: none;}

a.exklusiv {
	color: #FFFFFF;
	background-color: #003399;
	text-decoration: none;
	border: 0;
	border-radius: 4px;
	font-size: 1em;
	padding: 2px 2px 2px 3px;}

a.exklusiv span.messe {color: #FFF;}

a.exklusiv:link,
a.exklusiv:visited {
	font-size: 1em;
	color: #003399;
	text-decoration: none;
	outline: none;}

a.exklusiv:hover {
	background-color: #FFF;
	font-size: 1em;
	font-weight: bold;
	text-decoration: none;
	padding: 2px 2px 2px 3px;}

a.exklusiv:hover span.messe {
	color: #003399;}

/* Textgestaltung */

.text_fett {font-weight: bold;
   color: #222222;}
.text_kursiv {font-weight: bold;
   font-style: italic;}
.text_kursiv2 {
   font-weight: bold;
   font-style: italic;
   color: #222222;}
.text_kursiv3 {
   font-weight: bold;
   font-style: italic;
   color: #003399;}
.text_kursiv4 {
   font-style: italic;}
.text_blau {font-weight: bold;
   color: #0033BB;}
.text_grau {font-weight: bold;
   color: #444444;}
.text_grau2 {font-weight: bold;
   color: #555555;
   padding-right: 2px;}
.text_gros {font-weight: bold;
   font-size: 1.1em;}
.text_gros2 {font-weight: bold;
   font-size: 1em;}
.text_eng {font-size: 0.8em;
   line-height: 1.4em;}
.liste {font-size: 0.8em;}
.p1 {font-size: 0.8em;
   line-height: 1.5em;
   padding-bottom: 10px;}
.p2 {font-size: 0.8em;
   line-height: 1.5em;
   padding-bottom: 10px;
   padding-top: 5px;}
.p3 {font-size: 0.8em;
   line-height: 1.5em;
   padding-bottom: 10px;}
.p4 {padding-bottom: 15px;}
.p5 {padding: 10px 0;}
.register {position: relative;
   top: -3px; padding-left: 1px;}
.minus {position: relative;
   top: 1px;}
.schraeg {padding: 0 1px;}
.lh5 {line-height: 1.5em;}
.fs12 {font-size: 1.2em;}

.rotweis {background-color: red;
	color: white;}
.inabst2 {padding: 1px 2px 0 2px;}

div.trennerbox {max-width: 70%;
	height: auto;}

img#trenner1 {width: 100%;
	margin: 60px 20% 110px 15%;}
	
img#trenner4 {max-width: 90%;
	margin: 60px 20% 110px 1%;}

.intern {font-weight: bold;
   font-size: 1.1em;}
.punkte li {list-style: circle;}
.preis {font-weight: bold;
   color: #BF0000;}

.margto2m {margin-top: 2em;}


div.videomob {
	padding-top: 56.25%;
	position: relative;
	width: 100%; 
	margin: 20px 0 50px 0; 
	border: 0;}

div.videomob iframe {
	position: absolute;
	left: 0;
	top: 0;
	width: 90%;
	height: 100%;
	border-radius: 10px 10px 10px 10px;
	-moz-border-radius: 10px 10px 10px 10px;
	-webkit-border-radius: 10px 10px 10px 10px;
	box-shadow: 4px 4px 10px #333;
	-moz-box-shadow:4px 4px 10px #333;
	-webkit-box-shadow:4px 4px 10px #333;
	border: 1px solid #BBB;}

.markrand01 {
	background-color: #225588;
	padding: 2px;
	border: 2px solid #BBB;
	border-radius: 10px 10px 10px 10px;
	-moz-border-radius: 10px 10px 10px 10px;
	-webkit-border-radius: 10px 10px 10px 10px;}
	
.abstli3proz {margin-left: 3%;}

.veranst, .lehrerblock, #tipp-b {border-radius: 10px;}

.mawi700 {max-width: 700px;}

.abstpic1 {margin-top: 55em;}
.abstpic2 {margin-top: 90em;}

.copy {position: relative;
   top: -3px;
   padding-left: 1px;
   font-size: 0.9em;}

.rand {
   display: block;
   margin: 10px 0 7px 70px;}
.rand001 {
   display: block;
   margin: 0 0 50px 70px;}
.rand1 {
   display: block;
   margin: 10px 0 50px 50px;}
.rand2 {
   display: block;}
.rand2s {
   display: block;
   margin: 10px 0 7px 0;}
.rand20 {
   display: block;
   margin-bottom: 40px;}
.rand21 {
   display: block;
   margin-bottom: 60px;}
.rand2sa {
   display: block;
   margin-bottom: 40px;}
.rand5 {
   display: block;
   margin-bottom: 40px;
   margin-left: 80px;}
.rand7 {
   display: block;
   margin-bottom: 7px;
   margin-left: 80px;}
.rand8 {
   display: block;
   margin-left: 80px;
   margin-bottom: 20px;}
.rand9 {
   display: block;
   margin-bottom: 20px;
   margin-left: 70px;}   


/* NEU: primaTEK mit Copyright */

span.kopierrecht {position: relative; left: 2px; bottom: 3px;}
.abst-marg-re-4 {margin-right: 4px;}

/* Logo Neu */

div#logo {position: relative;}

div#logo h1 {
   padding: 0;	
   margin: 0;}

div#logo h1 a img#bildlogo {max-width: 100%; height: auto; border: 0; padding: 0; margin: 0;}

div#logo h1 a:hover {border-bottom: 0; text-decoration: none;}

div#logo h1 a#start:hover {border-bottom: 0; text-decoration: none; cursor: default;}

div#logo h1 span.varanz {display: none; width: 0; height: 0;}

div#logo h2#ortsname {width: 250px; font-size: 2em; font-family: Arial, Verdana, Helvetica, sans-serif; color: #003366; font-weight: normal; margin: 5px 0 0 38%;}

div#logo p#navilink a#dreistrich {display: none; width: 0; height: 0;}

div#logo p#internenavi a#senkrechtstriche {display: none; width: 0; height: 0;}

div#prokudi p#subnavi a#substriche {display: none; width: 0; height: 0;}

div#praekudi ul#parubello li.medilist {display: none;}

#navigation a.beenden {display: none;}

div#logo h1 a img.praeschrift  {display: none;}
 
#einfuehrung ul.uebersicht li:first-child a,
#kundenfragen ul#fraku li:first-child,
#kundenfragen ul.fraku li:first-child,
#kundenfragen ul.hbspsubmenu li:first-child,
#hoerbeispiele ul.hbspsubmenu li:first-child {display: none;}

/* Navigation */

#navigation {width: 140px;
	height: auto;
   	position: absolute;
   	top: 20px;
   	left: 0;
   	background-image: url(bilder/tastenbg.gif);}

/*#preise #navigation {top: -5px;}*/

#navigation ul {list-style: none; 
	padding: 0; 
	margin: 0;}

#navigation ul li {font-size: 1.2em;}

#navigation ul li.close a.schliessen {display: none;}

#navigation p.medi800 a.schliessen {display: none;}

#nav01, #nav02, #nav03, #nav04, #nav05, #nav06 {
   position: relative;
   left: 10px;
   margin-top: 0px;
   border-bottom: 0px;}

.abstnavi {
	position: relative;
	top: 7px;
	left: 19px;}

a#nav06 {display: block;
   width: 123px;
   height: 31px;
   background-image: url(bilder/navi-seiten-bg-pa.png);
   background-repeat: no-repeat;}

a#nav06:hover {background-image: url(bilder/navi-seiten-bg-ov.png);
   border-bottom: 0px;}

a#nav06 span.abstnavi {
	color: #eee;
	text-shadow: -5px 5px 5px rgba(0,0,0, 0.3);}
a#nav06:hover span.abstnavi {color: #ccc;
	text-shadow: rgba(245, 245, 255, 0.35) 0 0px 0px, rgba(0, 0, 30, 0.08) 0px 2px 2px, rgba(0, 0, 30, 0.20) 0px 2px 1px, rgba(0, 0, 30, 0.40) 0px 2px 1px, rgba(0, 0, 0, 0.08) -5px 5px 2px;}

a#nav01 {display: block;
   width: 123px;
   height: 31px;
   background-image: url(bilder/navi-seiten-bg-pa.png);
   background-repeat: no-repeat;}

a#nav01:hover {background-image: url(bilder/navi-seiten-bg-ov.png);
   border-bottom: 0px;}

a#nav01 span.abstnavi {
	color: #eee;
	text-shadow: -5px 5px 5px rgba(0,0,0, 0.3);}
a#nav01:hover span.abstnavi {color: #ccc;
	text-shadow: rgba(245, 245, 255, 0.35) 0 0px 0px, rgba(0, 0, 30, 0.08) 0px 2px 2px, rgba(0, 0, 30, 0.20) 0px 2px 1px, rgba(0, 0, 30, 0.40) 0px 2px 1px, rgba(0, 0, 0, 0.08) -5px 5px 2px;}

a#nav02 {display: block;
   width: 123px;
   height: 31px;
   color: #00346A;
   background-image: url(bilder/navi-seiten-bg-pa.png);
   background-repeat: no-repeat;}

a#nav02:hover {background-image: url(bilder/navi-seiten-bg-ov.png);
   border-bottom: 0px;}

a#nav02 span.abstnavi {color: #eee;
	text-shadow: -5px 5px 5px rgba(0,0,0, 0.3);}
a#nav02:hover span.abstnavi {color: #ccc;
	text-shadow: rgba(245, 245, 255, 0.35) 0 0px 0px, rgba(0, 0, 30, 0.08) 0px 2px 2px, rgba(0, 0, 30, 0.20) 0px 2px 1px, rgba(0, 0, 30, 0.40) 0px 2px 1px, rgba(0, 0, 0, 0.08) -5px 5px 2px;}

a#nav03 {display: block;
   width: 123px;
   height: 31px;
   color: #00346A;
   background-image: url(bilder/navi-seiten-bg-pa.png);
   background-repeat: no-repeat;}
   
a#nav03:hover {background-image: url(bilder/navi-seiten-bg-ov.png);
   border-bottom: 0px;}

a#nav03 span.abstnavi {color: #eee;
	text-shadow: -5px 5px 5px rgba(0,0,0, 0.3);}
a#nav03:hover span.abstnavi {color: #ccc;
	text-shadow: rgba(245, 245, 255, 0.35) 0 0px 0px, rgba(0, 0, 30, 0.08) 0px 2px 2px, rgba(0, 0, 30, 0.20) 0px 2px 1px, rgba(0, 0, 30, 0.40) 0px 2px 1px, rgba(0, 0, 0, 0.08) -5px 5px 2px;}

a#nav04 {display: block;
   width: 123px;
   height: 31px;
   color: #00346A;
   background-image: url(bilder/navi-seiten-bg-pa.png);
   background-repeat: no-repeat;}

a#nav04:hover {background-image: url(bilder/navi-seiten-bg-ov.png);
   border-bottom: 0px;}

a#nav04 span.abstnavi {color: #eee;
	text-shadow: -5px 5px 5px rgba(0,0,0, 0.3);}
a#nav04:hover span.abstnavi {color: #ccc;
	text-shadow: rgba(245, 245, 255, 0.35) 0 0px 0px, rgba(0, 0, 30, 0.08) 0px 2px 2px, rgba(0, 0, 30, 0.20) 0px 2px 1px, rgba(0, 0, 30, 0.40) 0px 2px 1px, rgba(0, 0, 0, 0.08) -5px 5px 2px;}

a#nav05 {display: block;
   width: 123px;
   height: 31px;
   color: #00346A;
   background-image: url(bilder/navi-seiten-bg-pa.png);
   background-repeat: no-repeat;}
   
a#nav05:hover {background-image: url(bilder/navi-seiten-bg-ov.png);
   border-bottom: 0px;}

a#nav05 span.abstnavi {color: #eee;
	text-shadow: -5px 5px 5px rgba(0,0,0, 0.3);}
a#nav05:hover span.abstnavi {color: #ccc;
	text-shadow: rgba(245, 245, 255, 0.35) 0 0px 0px, rgba(0, 0, 30, 0.08) 0px 2px 2px, rgba(0, 0, 30, 0.20) 0px 2px 1px, rgba(0, 0, 30, 0.40) 0px 2px 1px, rgba(0, 0, 0, 0.08) -5px 5px 2px;}

a#nav01, a#nav02, a#nav03, a#nav04, a#nav05, a#navh06 {outline: none;}

#kompakt a#nav06 {
   background-image: url(bilder/navi-seiten-bg-ac.png);
   background-repeat: no-repeat;}
#kompakt a#nav06:hover {background-image: url(bilder/navi-seiten-bg-ov.png); color: #00346A;}

#seiteleistungen a#nav01 {
   background-image: url(bilder/navi-seiten-bg-ac.png);
   background-repeat: no-repeat;}
#seiteleistungen a#nav01:hover {background-image: url(bilder/navi-seiten-bg-ov.png); color: #00346A;}

#preise a#nav02 {
   background-image: url(bilder/navi-seiten-bg-ac.png);
   background-repeat: no-repeat;}
#preise a#nav02:hover {background-image: url(bilder/navi-seiten-bg-ov.png);}

#fragen a#nav03 {
   background-image: url(bilder/navi-seiten-bg-ac.png);}
#fragen a#nav03:hover {background-image: url(bilder/navi-seiten-bg-ov.png);}

#hoerbeispiele a#nav04 {
   background-image: url(bilder/navi-seiten-bg-ac.png);
   background-repeat: no-repeat;}
#hoerbeispiele a#nav04:hover {background-image: url(bilder/navi-seiten-bg-ov.png);}

#kontakt a#nav05 {
   background-image: url(bilder/navi-seiten-bg-ac.png);
   background-repeat: no-repeat;}
#kontakt a#nav05:hover {background-image: url(bilder/navi-seiten-bg-ov.png);}

#bestellung a#nav05 {
   background-image: url(bilder/navi-seiten-bg-ac.png);
   background-repeat: no-repeat;}
#bestellung a#nav05:hover {background-image: url(bilder/navi-seiten-bg-ov.png);}

#kompakt a#nav06 span.abstnavi,
#seiteleistungen a#nav01 span.abstnavi,
#preise a#nav02 span.abstnavi,
#fragen a#nav03 span.abstnavi,
#kontakt a#nav05 span.abstnavi,
#bestellung a#nav05 span.abstnavi,
#hoerbeispiele a#nav04 span.abstnavi {color: #bbb; text-shadow: 3px 3px 3px rgba(0,0,0, 0.3);}
#kompakt a#nav06:hover span.abstnavi,
#seiteleistungen a#nav01:hover span.abstnavi,
#preise a#nav02:hover span.abstnavi,
#fragen a#nav03:hover span.abstnavi,
#kontakt a#nav05:hover span.abstnavi,
#bestellung a#nav05:hover span.abstnavi,
#hoerbeispiele a#nav04:hover span.abstnavi {color: #fff; text-shadow: rgba(245, 245, 255, 0.35) 0 0px 0px, rgba(0, 0, 30, 0.08) 0px 2px 2px, rgba(0, 0, 30, 0.20) 0px 2px 1px, rgba(0, 0, 30, 0.40) 0px 2px 1px, rgba(0, 0, 0, 0.08) -5px 5px 2px;}


/* seiteninterne Steuerungs-Buttons */
	
	div.sst {position: relative; max-width: 100%; height: auto;}
	
	div.margu30 {margin-bottom: 30px;}
	
	div.sst a.abstoueins,
	div.sst a.abstoudrei,
	div.sst a.abstouvier,
	a.abstouzehn,
	a.abstousechs,
	div.sst a.abstousieben {width: auto;
		color: #003388;}
	
	div.sst a.abstouzwei,
	div.sst a.abstouneun,
	div.sst a.abstoufuenf,
	div.sst a.gau,
	div.sst a.abstouacht {width: auto;
		float: right;
		margin-right: 20px;
		margin-top: 8px;}
		
	a.abstoueins:hover,
	a.abstouzwei:hover,
	a.abstoudrei:hover,
	a.abstouvier:hover,
	a.abstoufuenf:hover,
	a.abstousechs:hover,
	a.abstousieben:hover,
	a.abstouacht:hover,
	a.abstouneun:hover,
	a.abstouzehn:hover,
	a.abstoueins:active,
	a.abstouzwei:active,
	a.abstouvier:active,
	a.abstoufuenf:active,
	a.abstouneun:active,
	a.gau:hover {
		text-decoration: none;
		border-bottom: 0;
		border-color: #5588BB;
		opacity: 0.7}
	
	#preise div#preisinhalt div.stichworte a.abstousechs {margin-left: 0;}
	#preise div#preisinhalt div.stichworte h3 {margin-top: 50px;}
	
	.pfeil,
	.querpfeil {display: inline;}
	
	div.sst a.abstoueins span.pfeil,
	div.sst a.abstoudrei span.pfeil,
	div.sst a.abstouvier span.pfeil,
	a.abstouzehn span.pfeil,
	a.abstousechs span.pfeil,
	a.abstousieben span.pfeil {margin-right: 3px; 
		color: #003388; 
		font-size: 4em; 
		width: auto; 
		position: relative; 
		top: 2px;}
	div.sst a.abstouzwei span.pfeil,
	a.abstouacht span.pfeil {margin-left: 3px; 
		margin-right: 3px; 
		color: #003388; 
		font-size: 4em; 
		width: auto; 
		position: relative; 
		top: -6px;}
	
	div.sst a.abstoufuenf span.pfeil {margin-left: 3px; 
		margin-right: 3px; 
		color: #003388; 
		width: auto; 
		position: relative; 
		top: 0px;}
	
	#fragen div.sst a.abstouneun span.pfeil {margin-left: 3px; 
		margin-right: 3px; 
		color: #003388; 
		width: auto; 
		position: relative; 
		top: 0px;}
		
	#hoerbeispiele div.sst a.abstouneun span.pfeil {margin-left: 3px; 
		margin-right: 3px; 
		color: #003388; 
		width: auto; 
		position: relative; 
		top: -6px;}
	
	div.sst a.gau span.querpfeil {position: relative; 
		top: -6px;
		right: 10px;
		margin-left: 3px; color: #003388;}
	
	div.sst span.verstecken {display: none;}
	
	div.sst span.zeigen {display: inline;}
	
	#preisinhalt .abstouvier,
	#meineantworten .abstouvier {margin: 10px 0 7px 0;}
	#preisinhalt .abstoufuenf {margin: 0 0 70px 0;}
	#preisinhalt .abstousechs {margin: 0 0 40px 10px;}
	#preisinhalt .abstousieben {margin-left: 0px;}/*{margin: 0 0 7px 10px;}*/
	#preisinhalt .abstouacht {margin: 0 0 80px 0;}
	#preisinhalt .abstouzehn {margin: 10px 0 50px 0;}

	#meineantworten .abstouneun {margin: 0 0 90px 0;}

/* preload */

div.preload {display: none; width: 0; height: 0; border: 0;}

/* Bilder */

.picplac {position: absolute; left: 0px;}

a#priming01:hover, a#priming03:hover, a#priming04:hover, a#priming05:hover, 
a#priming06:hover, a#priming07:hover, a.priming36a:hover, a.priming3x01:hover,
a#priming08:hover, a#priming09:hover, a#priming10:hover, a#priming11:hover, 
a#priming16:hover, a#priming17:hover, a#priming18:hover, a#priming19:hover, 
a#priming20:hover, a#priming21:hover, #priming22:hover, a#priming23:hover,
a#priming24:hover, a#priming30:hover, a#priming31:hover, /*a#priming32:hover,*/ 
a#priming50:hover, a#priming51:hover, a#priming52:hover, a#priming53:hover,
a#priming55:hover, a#priming56:hover, a#priming57:hover, a#primingx17:hover,
a#priming60:hover, a#priminglogo:hover {border-bottom: 0;}

#priminglogo {display: block;
   width: 140px;
   height: 288px;
   background-image: url(bilder/klavierstimmerei.jpg);
   margin-top: 20em;}
a#priminglogo:hover {display: block;
   width: 140px;
   height: 288px;
   background-image: url(bilder/praegestimmt.jpg);
   margin-top: 20em;}

#priming01 {
   display: block;
   width: 140px;
   height: 288px;
   background-image: url(bilder/ansprechpartner.jpg);
   margin-top: 0em;}

#priming03 {display: block;
   width: 140px;
   height: 288px;
   background-image: url(bilder/wennesum.jpg);
   margin-top: 0em;}

#priming04 {display: block;
   width: 140px;
   height: 288px;
   background-image: url(bilder/pianolust.jpg);
   margin-top: 9em;}
a#priming04:hover {display: block;
   width: 140px;
   height: 288px;
   background-image: url(bilder/klickpiano.jpg);
   margin-top: 9em;}

#priming05 {display: block;
   width: 140px;
   height: 288px;
   background-image: url(bilder/praegestimmt.jpg);
   margin-top: 0em;}
a#priming05:hover {display: block;
   width: 140px;
   height: 288px;
   background-image: url(bilder/praejetzt.jpg);
   margin-top: 0em;}

#priming06 {display: block;
   width: 140px;
   height: 288px;
   background-image: url(bilder/praegestimmt.jpg);
   margin-top: 0em;}
a#priming06:hover {display: block;
   width: 140px;
   height: 288px;
   background-image: url(bilder/klavierstimmerei.jpg);
   margin-top: 0em;}

#priming07 {display: block;
   width: 140px;
   height: 200px;
   background-image: url(bilder/regional.jpg);
   margin-top: 5em;}

.priming36a {display: block;
   width: 140px;
   height: 288px;
   background-image: url(bilder/klavierstimmerei.jpg);
   margin-top: 0em;}
a.priming36a:hover {display: block;
   width: 140px;
   height: 288px;
   background-image: url(bilder/praegestimmt.jpg);
   margin-top: 0em;}

.priming3x01 {display: block;
   width: 140px;
   height: 432px;
   background-image: url(bilder/artgefreude.jpg);
   margin-top: 34em;}

#priming08 {display: block;
   width: 140px;
   height: 288px;
   background-image: url(bilder/klangfarben.jpg);
   margin-top: 0em;}
a#priming08:hover {display: block;
   width: 140px;
   height: 288px;
   background-image: url(bilder/klickfarben.jpg);
   margin-top: 0em;}

#priming09 {display: block;
   width: 140px;
   height: 288px;
   background-image: url(bilder/praegestimmt.jpg);
   margin-top: 0em;}
a#priming09:hover {display: block;
   width: 140px;
   height: 288px;
   background-image: url(bilder/praejetzt.jpg);
   margin-top: 0em;}

#priming10 {display: block;
   width: 140px;
   height: 288px;
   background-image: url(bilder/tutgut.jpg);
   margin-top: 0em;}
a#priming10:hover {display: block;
   width: 140px;
   height: 288px;
   background-image: url(bilder/klickklavier.jpg);
   margin-top: 0em;}

#priming11 {display: block;
   width: 140px;
   height: 288px;
   background-image: url(bilder/gutgestimmt.jpg);
   margin-top: 0em;}
a#priming11:hover {display: block;
   width: 140px;
   height: 288px;
   background-image: url(bilder/klickgutgestimmt.jpg);
   margin-top: 0em;}

#priming16 {display: block;
   width: 140px;
   height: 288px;
   background-image: url(bilder/selberstimmen.jpg);
   margin-top: 0em;}
a#priming16:hover {display: block;
   width: 140px;
   height: 288px;
   background-image: url(bilder/klickselber.jpg);
   margin-top: 0em;}

#priming17 {display: block;
   width: 140px;
   height: 288px;
   background-image: url(bilder/hybstimmtek.jpg);
   margin-top: 0em;}
a#priming17:hover {display: block;
   width: 140px;
   height: 288px;
   background-image: url(bilder/klick.jpg);
   margin-top: 0em;}

#primingx17 {display: block;
   width: 140px;
   height: 288px;
   background-image: url(bilder/hybstimmtek.jpg);
   margin-top: -33em;}
a#primingx17:hover {display: block;
   width: 140px;
   height: 288px;
   background-image: url(bilder/klick.jpg);
   margin-top: -33em;}

#priming18 {display: block;
   width: 140px;
   height: 288px;
   background-image: url(bilder/wohlklang.jpg);
   margin-top: 0em;}
a#priming18:hover {display: block;
   width: 140px;
   height: 288px;
   background-image: url(bilder/klickwohl.jpg);
   margin-top: 0em;}

#priming19 {display: block;
   width: 140px;
   height: 288px;
   background-image: url(bilder/hybstimmtek.jpg);
   margin-top: 0em;}
a#priming19:hover {display: block;
   width: 140px;
   height: 288px;
   background-image: url(bilder/klick.jpg);
   margin-top: 0em;}

#priming20 {display: block;
   width: 140px;
   height: 288px;
   background-image: url(bilder/harmonisieren.jpg);
   margin-top: 0em;}
a#priming20:hover {display: block;
   width: 140px;
   height: 288px;
   background-image: url(bilder/klickharmonisieren.jpg);
   margin-top: 0em;}

#priming21 {display: block;
   width: 140px;
   height: 288px;
   background-image: url(bilder/tutgut.jpg);
   margin-top: 0em;}
a#priming21:hover {display: block;
   width: 140px;
   height: 288px;
   background-image: url(bilder/klickklavier.jpg);
   margin-top: 0em;}

#priming22 {display: block;
   width: 140px;
   height: 288px;
   background-image: url(bilder/wohlohr.jpg);
   margin-top: -1em;}

#priming52 {display: block;
   width: 140px;
   height: 288px;
   background-image: url(bilder/beispielehoeren.jpg);
   margin-top: 0em;}
a#priming52:hover {display: block;
   width: 140px;
   height: 288px;
   background-image: url(bilder/selbsthoeren.jpg);
   margin-top: 0em;}

#priming23 {display: block;
   width: 140px;
   height: 288px;
   background-image: url(bilder/300jahre.jpg);
   margin-top: 0em;}
a#priming23:hover {display: block;
   width: 140px;
   height: 288px;
   background-image: url(bilder/pcentschluesseln.jpg);
   margin-top: 0em;}

#priming24 {display: block;
   width: 140px;
   height: 288px;
   background-image: url(bilder/spielart.jpg);
   margin-top: 0em;}
 
 #priming30 {display: block;
   width: 140px;
   height: 288px;
   background-image: url(bilder/qualitaet.jpg);
   margin-top: 0em;}

#priming31 {display: block;
   width: 140px;
   height: 288px;
   background-image: url(bilder/klavierstimmerei.jpg);
   margin-top: 1em;}
a#priming31:hover {display: block;
   width: 140px;
   height: 288px;
   background-image: url(bilder/praekennlern.jpg);
   margin-top: 1em;}

/*#priming32 {display: block;
   width: 140px;
   height: 288px;
   background-image: url(bilder/pianomania.jpg);
   margin-top: 1em;}
a#priming32:hover {display: block;
   width: 140px;
   height: 288px;
   background-image: url(bilder/faszination.jpg);
   margin-top: 1em;}*/

a#priming50 {display: block;
   width: 140px;
   height: 288px;
   background-image: url(bilder/gutschein.jpg);
   margin-top: -1em;}
a#priming50:hover {display: block;
   width: 140px;
   height: 288px;
   background-image: url(bilder/klickgutschein.jpg);
   margin-top: -1em;}

#priming51 {display: block;
   width: 140px;
   height: 288px;
   background-image: url(bilder/tutsogut.jpg);
   margin-top: 0em;}

#priming53 {display: block;
   width: 140px;
   height: 288px;
   background-image: url(bilder/klaviertransport.jpg);
   margin-top: -1em;}
a#priming53:hover {display: block;
   width: 140px;
   height: 288px;
   background-image: url(bilder/klicktransport.jpg);
   margin-top: -1em;}

#priming55 {display: block;
   width: 140px;
   height: 288px;
   background-image: url(bilder/glissando.jpg);
   margin-top: 0em;}

#priming56 {display: block;
   width: 140px;
   height: 288px;
   background-image: url(bilder/klavierstimmerei.jpg);
   margin-top: -1em;}
a#priming56:hover {display: block;
   width: 140px;
   height: 288px;
   background-image: url(bilder/praekennlern.jpg);
   margin-top: -1em;}

#priming57 {display: block;
   width: 140px;
   height: 288px;
   background-image: url(bilder/klaviertransport.jpg);
   margin-top: -1em;}
a#priming57:hover {display: block;
   width: 140px;
   height: 288px;
   background-image: url(bilder/klicktransport.jpg);
   margin-top: -1em;}

#priming60 {display: block;
   width: 140px;
   height: 288px;
   background-image: url(bilder/beethovenwerden.jpg);
   margin-top: -35em;}
a#priming60:hover {display: block;
   width: 140px;
   height: 288px;
   background-image: url(bilder/klick.jpg);
   margin-top: -35em;}



#leistungen ul.veranst li ul.inlist2 {margin: 10px 0 0px 5px;}
#leistungen ul.veranst li ul.inlist2 li {font-size: 1em;
   list-style-type: none;}

#leistungen ul.veranst li {
   line-height: 1.5em;
   list-style-type: none;
   margin-left: 5px;}

#leistungen ul.veranst {
	max-width: 90%;
	border: #555555 1px solid;
   	padding: 15px 10px 10px 10px;
   	margin: 15px 0;}

#leistungen div.folgeveranst2 ul.veranst {
   max-width: 90%;
   padding: 15px 10px 10px 15px;}

#leistungen div.folgeveranst2 {padding-top: 20px;}

/* Klavierlehrer */

#leistungen p.p3 {padding-bottom: 20px;}
.lehrerblock {max-width: 90%;
   border: #555555 1px solid;
   padding: 10px 10px 10px;
   margin: 0 0 20px 0;}
#leistungen ul.lehrer {padding: 0 0 0 10px;}
#leistungen ul.lehrer li {list-style: none;}
#leistungen ul.inlist3 {padding: 10px 0 0 20px;}
#leistungen ul.inlist3 li {font-size: 1em;
   list-style-type: circle;}

.roterlehrerblock {width: 90%;
   border: red 3px solid;
   padding: 10px 20px 10px 0;
   margin: 0 0 20px 0;}
   
/* Kollegen */

#leistungen ol.lok {margin-bottom: 20px;}

#leistungen ul#gebraucht {list-style: circle;
   padding: 0 0 10px 15px;}

/* Fachleute aus der Region */

#leistungen ul.tipp {padding: 10px 10px 5px 10px;}
#leistungen ul.tipp li {list-style-type: none;}
#leistungen ul.tipp ul.inlist3 li {font-size: 1em;
   list-style-type: circle;}
#leistungen ul.inlist3 {padding: 10px 0 0 20px;}

#leistungen div#tipp-b {
   max-width: 90%;
   border: #555555 1px solid;
   margin-top: 0px;
   margin-bottom: 20px;}

/* Seite Leistungen */

#leistungen {
  padding: 20px 5% 540px 3%;
   margin-left: 160px;}

img#mm {width: 134px;
	height: 230px;
	margin: 33px 0 0 238px;
	display: inline;}

div#einfuehrung {
   width: auto;
   position: absolute;
   top: 50px;
   left: 45%;}

#einfuehrung ul {list-style: none;}
#einfuehrung ul.uebersicht {
   width: 300px;
   margin: 8px 0 0 30px;}
#einfuehrung ul.uebersicht li {font-size: 1.1em; margin-bottom: 10px;}

#einfuehrung ul.uebersicht li#letztezeile {margin-top: 15px;}

#leistungen div#ersterabsatz {margin-right: 3%;
	margin-bottom: 20px;
	padding-right: 20px;}

#leistungen h2 {font-size: 1.1em; padding: 20px 0 0 0;}
#leistungen h2.uexy {
	font-size: 1.1em;
	padding-top: 20px;
	padding-bottom: 0;
   	color: #666666;}
#leistungen h2.uexx {
	font-size: 1.1em;
   	color: #666666;}

#leistungen h3 {
   font-size: 1.0em;
   padding-bottom: 15px;
   padding-top: 20px;
   float: none;
   clear: both;}
#leistungen h4.subuevier {font-size: 0.9em; margin: 20px 0 15px 0;}

#leistungen p.p1 a {font-size: 1em;}

#leistungen ol {line-height: 1.3em;
   margin: 0 0 5px 0;}
#leistungen ol li {margin: 0 0 0 20px;
   padding: 0;
   font-size: 0.8em;}
.inlist {margin-top: 4px;}
#leistungen ul li {list-style-type: circle;
   line-height: 1.4em;
   font-size: 0.8em;
   padding: 0 0 5px 0;}

#leistungen ul#ausbildung {margin: 10px 0 110px 60px;}

#leistungen .spez {padding: 0 3px;}
#leistungen .spez2 {padding-right: 3px;}

#leistungen ul.normal,
#leistungen ul.uli,
#leistungen ul.lehrer {padding: 0 0 10px 15px;}
#leistungen ul.uli li a {font-size: 1em;}

#leistungen ul.uli {margin: 0;}

#leistungen ul#gruppen {padding: 0 0 10px 20px;
	list-style-type: circle;}
#leistungen ul#gruppen li a {font-size: 1em;}

#leistungen p.p1 a:hover img.blauprima,
#seiteleistungen ul#ausbildung li a:hover img.blauprima {opacity: 0.5;}

#leistungen img#einzeins {margin-top: 1em;}

#leistungen ul.fex2 {padding: 0 0 15px 15px;}

/* Navigation Kundendienste */

#praekudi ul#parubello {
	max-width: 90%;
	margin-left: 20px;}

ul#parubello li {font-size: 1em;}


/* Netzwerke */

div#netzwerk {position: absolute;
   width: 140px;
   height: 420px;
   top: 12px;
   right: 15px;}

div#netzwerk div#primateq {position: absolute;
   top: 10px;
   left: 0;
   width: 122px;
   height: 207px;}

div#netzwerk div#primateq a#aufeins {
   display: block;
   width: 122px;
   height: 207px;
   background-image: url(bilder/primatek.jpg);}

div#netzwerk div#primateq a#aufeins:hover {
   display: block;
   width: 122px;
   height: 207px;
   background-image: url(bilder/primajetzt.jpg);}


div#netzwerk a#hoer {
   display: block;
   width: 116px;
   height: 50px;
   position: absolute;
   top: 235px;
   left: 3px;
   background-image: url(bilder/hoerbsplink.jpg);
   background-repeat: no-repeat;
   border-bottom: 0;}

div#netzwerk a#hoer:hover {
   display: block;
   width: 116px;
   height: 50px;
   position: absolute;
   top: 235px;
   left: 3px;
   background-image: url(bilder/hoerbsphover.jpg);
   background-repeat: no-repeat;
   border-bottom: 0;}

div#netzwerk a#aura {position: absolute;
  top: 303px;
  left: 3px;
  width: 116px;
  height: 50px;
  background-image: url(bilder/meinblog.jpg);
  background-repeat: no-repeat;}

div#netzwerk a#aura:hover {position: absolute;
  top: 303px;
  left: 3px;
  width: 116px;
  height: 50px;
  background-image: url(bilder/zumthema.jpg);
  background-repeat: no-repeat;}

div#netzwerk a#rahmen:hover,
div#netzwerk div#primateq a#aufeins:hover,
div#netzwerk a#aura:hover,
div#netzwerk a#hoer:hover,
div#netzwerk a#rss:hover {border-bottom: 0;}

div#netzwerk a#rss {position: absolute;
   top: 450px;
   left: 3px;}

div#netzwerk a#rss:hover {text-decoration: none; border: 0;}

div#netzwerk a#rss span.abstli5 {position: relative; top: -3px; left: 3px;}

div#netzwerk a#rss img#picrss,
div#netzwerk a#rss img#picrss:hover {border: 0;}

/* Kunde sucht auf index.html */

/*div.suchtext {max-width: 80%;
	border: 1px solid #666;
	margin: 10px 0 30px 0;
	padding: 20px 0 20px 20px;}

.uekusu {font-size: 1.1em; 
	color: #666; 
	margin: 0 0 15px 0;}

ul#conme {
	margin: 10px 0 0 0;
	padding: 0;}

ul#conme li {list-style-type: none;
	margin-bottom: 5px;}

ul#conme li:last-child {margin-bottom: 0;}*/

/* Seite Preise */
        
#preisinhalt {
   padding: 5px 3% 540px 3%;
   margin: 0 0 0 170px;}
/*#preisinhalt h2 {margin: 0 0 15px 0;
   padding-top: 20px;}*/
#preisinhalt h2#ortsverzeichnis {font-size: 1.2em;
   color: #777777;}
#preisinhalt h3 {
	margin: 0 0 15px 0;
   	padding-top: 20px;
   	float: none;
   	clear: both;}
#preisinhalt h3#festpreise {margin-top: 40px;}
#preisinhalt h4 {
   font-family: Arial, Verdana, Helvetica, sans-serif;
   font-size: 1em;
   margin: 20px 0 10px 0;}
#preisinhalt ul {
   font-size: 0.8em;
   list-style: circle;
   margin: 15px 70px 10px 15px;}
#preisinhalt li {padding-bottom: 5px;
   padding-right: 20px;}
#preisinhalt p {margin: 0;
   padding-right: 20px;} 
#preisinhalt .uebersicht li a {font-size: 1.1em;}
#preisinhalt ul.uebersicht {list-style-type: none; margin-top: 30px; margin-left: 0;}
#preisinhalt .uebersicht li {line-height: 1.5em; margin-bottom: 5px}

#preise div.abcliste span.abc a.intern,
#preise div.stichworte ul.stichliste li a.intern3,
#preise p.p1 a  {
   color: #003399;
   font-size: 1em;
   font-weight: bold;
   text-decoration: none;}
   
#preise div.abcliste span.abc a.intern:hover,
#preise div.stichworte ul.stichliste li a.intern3:hover,
#preise p.p1 a:hover {color: #5588BB;
   text-decoration: none;
   border-bottom: #5588BB solid 1px;}

#preisinhalt .spez {padding: 0 3px;}
#preisinhalt .spez2 {padding-right: 3px;}
#preisinhalt .spez3 {padding-left: 3px;}

/* Seiteninterne Navigation auf der Seite preise.html */

div#seiteninhalt {margin: 0 0 80px 0;}
div#seiteninhalt ul.preileipu {list-style: none; padding: 0; margin: 0;}
div#seiteninhalt ul.preileipu li {padding: 0; margin-bottom: 17px; font-size: 0.8em;}
div#seiteninhalt ul.preileipu li:first-child a {display: none; margin-bottom: 0; padding: 0;}
div#seiteninhalt ul.preileipu li#text {width: 400px; font-size: 1.5em; font-weight: bold; color: #666; margin-bottom: 35px;}
div#seiteninhalt ul.preileipu li:last-child {margin-bottom: 0;}
div#preisinhalt .preileipu li a {font-size: 1.6em;}

/* Hörbeispiel Vorstimmen Preise */

#preisinhalt ul#vorstim {
   margin: 0px 0 15px 15px;}
#preisinhalt p.pca {margin-bottom: 30px;}

/* Preise Spalte */

#preise #container #spalte {position: absolute;
   top: 47px;
   left: 84%;}

#preise #container #spalte a#hoeherhoeren {
   display: block;
   background-image: url(bilder/praehoeher.jpg);
   background-repeat: no-repeat;
   width: 116px;
   height: 50px;
   border: 0;}
#preise #container #spalte a#hoeherhoeren:hover {
   display: block;
   background-image: url(bilder/praehoeren.jpg);
   background-repeat: no-repeat;
   width: 116px;
   height: 50px;
   border: 0;}

/* Einzugsbereich */

img.einzugsbereich {
   display: block;
   max-width: 100%;
   height: auto;
   border: 0;
   border-radius: 15px;
   margin: 30px 0 30px 0;}

/* Stichwortvereichnis */

.abc {display: inline;
   margin-right: 10px;
   font-size: 1.2em;}
.abc:last-child {
   margin-right: 0;}
.abcliste {
	margin-bottom: 25px;
   	margin-left: 0;}
#preisinhalt .abcliste h2 {margin-top: 0;}
.stichworte {margin-top: 50px;}
.stichworte h3 {font-size: 1.5em;
   color: #444444;}
#preisinhalt ul.stichliste {margin-bottom: 30px;
   margin-left: 10px;}
#preisinhalt ul.stichliste li {
	list-style-type: none;
	margin-bottom: 8px;
	font-size: 1.2em;}
#preisinhalt div.abcliste span.abc a.intern {font-size: 1.2em;}

/* Seite Fragen */

#frageninhalt {
   padding: 20px 3% 540px 3%;
   margin-left: 170px;}
   
#kundenfragen {padding-top: 20px;}

#kundenfragen h2.text {margin: 0 0 20px 0;}

#frageninhalt h3 {margin: 20px 0 15px 0;}
#frageninhalt h4 {margin: 20px 20px 10px 0;}
#frageninhalt h5 {margin: 15px 0 10px 0;}
#frageninhalt ul {
   font-size: 0.8em;
   list-style: circle;
   margin: 10px 20px 10px 15px;}
#frageninhalt li {
   padding-bottom: 5px;
   padding-right: 20px;}
#frageninhalt p {margin: 0 20px 0 0;
   padding-right: 20px;} 
#frageninhalt li a {  font-size: 1.1em;}

#kundenfragen ul {
   list-style: none;
   margin: 0 0 20px 0;}

#kundenfragen ul li {
	line-height: 1.5em; 
	margin-bottom: 15px;} 
	
#kundenfragen ul li a {font-size: 1.3em;} 

#meineantworten p.p3x {margin-bottom: 40px;}

#meineantworten ul.nebenthemen li#ersteue,
#meineantworten ul.nebenthemen li.uen {
	list-style-type: none; 
	font-weight: bold; 
	color: #222;
	font-size: 1.2em;
	}
#meineantworten ul.nebenthemen li.nom {
	list-style-type: none; 
	margin-left: 0;
	margin-bottom: 10px;}

#meineantworten ul.nebenthemen li#ersteue {
	margin-bottom: 15px;}
	
#meineantworten ul.nebenthemen li.uen {
	margin: 40px 0 10px 0;}

#meineantworten ul.nebenthemen {
	margin: 20px 20px 30px 0;
   padding: 0;}

#meineantworten {padding-top: 20px;}
#meineantworten ol {font-size: 0.8em;
   margin: 10px 20px 20px 20px;}
#meineantworten ol li {margin-bottom: 10px;}
#meineantworten h3 {
	margin: 0 0 20px 0;
   	padding-top: 20px;
   	float: none;
   	clear: both;}
#meineantworten p a {font-size: 1em;}

#meineantworten #kollegen {
   font-size: 0.8em;
   list-style: circle;
   margin: 10px 20px 10px 15px;}   
#meineantworten ul.liste li {list-style-type: circle;
	margin-bottom: 5px;}
#meineantworten ul.liste {margin: 10px 20px 20px 15px;}

#meineantworten ol li a.extern {font-size: 1em;}

/* hoerbeispiele */

#hoerinhalt {
	padding: 20px 7% 450px 3%;
	margin: 0 0 0 170px;}

#hoerinhalt h2#text {margin: 0 0 30px 0;}
#hoerinhalt h3 {margin: 0 0 30px 0;}	
#hoerinhalt div.context {margin: 50px 0 0 0;}

#kapitel {margin: 0 0 40px 0;}

#kapitel ul.hbspsubmenu {
	list-style-type: none;
	padding-left: 0px;}

#kapitel ul.hbspsubmenu li {
	line-height: 1.5em;
	font-size: 1.3em;
	margin-bottom: 15px;}

#beispiele h3,
#beispiele p {margin-left: 0;}

#beispiele ul {
   font-size: 0.8em;
   list-style: circle;
   margin: 10px 0 15px 15px;}

.hbspbox {
	position: relative;
	margin: 10px 0 90px 70px;
    padding-top: 20px;}

.hbspbox2 {
	position: relative;
	margin: 70px 0 90px 0;
    padding: 20px 0 0 0;}

.hbspbox3 {
	position: relative;
	margin: 10px 0 60px 0;
    padding-top: 20px;}

.hbspbox4 {
	position: relative;
	margin: 170px 0 90px 0;
    padding: 20px 0 0 0;}

.hbspbox5 {
	position: relative;
	margin: 170px 0 150px 0;
    padding: 20px 0 0 0;}

.hbspbox7 {
	position: relative;
	margin: 0 0 60px 0;}

.hbspbox8 {
	position: relative;
	margin: 0px 0 90px 0;
    padding: 20px 0 0 0;}

.rera {position: absolute; right: 70px; bottom: -50px;}
.reru {position: absolute; right: 70px; bottom: -75px;}

a.rera:hover,
a.reru:hover {text-decoration: none; border-bottom: 0;}

div#beispiele div.hbspbox7 h3 {margin-bottom: 45px;}

.tweet {margin: 50px 0 30px 0; height: 30em;}
.tweethoehe {margin: 50px 0;}

.abstu5 {margin-bottom: 5px;}
.abstu10 {margin-bottom: 10px;}
.abstu15 {margin-bottom: 15px;}
.abstu20 {margin-bottom: 20px;}
.abstu30 {margin-bottom: 30px;}
.abstu40 {margin-bottom: 40px;}
.abstu50 {margin-bottom: 50px;}
.abstu70 {margin-bottom: 70px;}
.padu10 {padding-bottom: 10px;}
.padu15 {padding-bottom: 15px;}
.padu20 {padding-bottom: 20px;}
.padu30 {padding-bottom: 30px;}
.padu50 {padding-bottom: 50px;}
.padu80 {padding-bottom: 80px;}
.padli5 {padding-left: 5px;}
.pado30 {padding-top: 30px;}
.pado40 {padding-top: 40px;}
.absto05 {margin-top: 5px;}
.absto10 {margin-top: 10px;}
.absto15 {margin-top: 15px;}
.absto20 {margin-top: 20px;}
.absto30 {margin-top: 30px;}
.absto40 {margin-top: 40px;}
.absto50 {margin-top: 50px;}

.margo30 {margin-top: 30px;}
.margu30 {margin-bottom: 30px;}

.abstli20 {margin-left: 20px;}
.abstli30 {margin-left: 30px;}

ul.punkteabu5 li {margin-bottom: 5px;}

.rahmen {border: solid 1px #AAA;
	padding: 15px;
	width: 98%;
	-webkit-border-radius: 15px;
   	 -moz-border-radius: 15px;
     border-radius: 15px;}

#preise div#hbsppreise {margin: 30px 0 40px 0;}

.pado20 {padding-top: 20px;}
.pado30 {padding-top: 30px;}
.abstand-u30 {margin-bottom: 30px;}
.marg-u15 {margin-bottom: 15px;}
.marg-ob-20 {margin-top: 20px;}
.fs09 {font-size: 0.9em;}
.fs08 {font-size: 0.8em;}
#impressuminhalt ul.copylist {
	font-size: 0.82em;
	margin: 5px 0 15px 20px;}
#impressuminhalt ul.copylist li {margin-bottom: 4px;}

/* Player-Hintergrund-Bilder und Beschriftungen für Hoerbeispiele 100514 */

a.player {
	position: relative;
	display: block;
   	max-width: 700px;
   	height: 135px; 
   	margin-bottom: 20px;
   border: #003388 1px solid;
   	-webkit-box-shadow: hsla(580, 100%, 30%, 0.8) 10px 5px 20px;
   	-moz-box-shadow: hsla(580, 100%, 30%, 0.8) 10px 5px 20px;
   	 box-shadow: hsla(580, 100%, 30%, 0.8) 10px 5px 20px;
   	 -webkit-border-radius: 15px;
   	 -moz-border-radius: 15px;
     border-radius: 15px;}

a.player:hover {-webkit-box-shadow: hsla(580, 100%, 30%, 0.8) 10px 5px 50px;
   	-moz-box-shadow: hsla(580, 100%, 30%, 0.8) 10px 5px 50px;
   	 box-shadow: hsla(580, 100%, 30%, 0.8) 10px 5px 50px;
   	border: #6699CC 1px solid;
   	 text-decoration: none;}

a.bgeins {background-image: url(bilder/playerbg-eins.jpg); }
a.bgzwei {background-image: url(bilder/playerbg-zwei.jpg);}
a.bgdrei {background-image: url(bilder/playerbg-drei.jpg);}
a.bgvier {background-image: url(bilder/playerbg-vier.jpg);}
a.bgfuenf {background-image: url(bilder/playerbg-fuenf.jpg);}
a.bgsechs {background-image: url(bilder/playerbg-sechs.jpg);}
a.bgsieben {background-image: url(bilder/playerbg-sieben.jpg);}
a.bgacht {background-image: url(bilder/playerbg-acht.jpg);}

/*a.player span.kurztext {font-size: 2.4em; color: #333; position: absolute; left: 40%; top: 25px; min-width: 300px;}
a.player span.langtext,*/
a.player span.langtext2 {font-size: 2.0em; color: #333; position: absolute; left: 30%; top: 25px; width: auto;}
/*a.player span.mobiltext {font-size: 2.0em; color: #333; position: absolute; left: 40%; top: 35px; width: auto;}*/

/*a.player:hover span.kurztext {opacity: 0.5;}*/
a.player:hover span.langtext2 {opacity: 0.5;}

/* Kontaktseite */

#kontaktinhalt {
   width: auto;
   margin-left: 170px;
   padding: 20px 50px 0 3%;}
#kontaktinhalt h2 {display: inline;
	font-size: 1.2em;}
#kontaktinhalt h3 {margin-bottom: 20px;
   margin-top: 30px;}
#kontaktinhalt p {margin-bottom: 20px;
   margin-top: 20px;}

#kontaktinhalt p.tabst {
margin: 30px 0;}

#kontaktinhalt p.tabst span.text_gros {font-size: 1.2em;}

#kontaktinhalt a#telef {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 1.1em;
   line-height: 2em;
   font-weight: bold;
   border: 1px solid #003388;
   padding: 5px; 
   border-radius: 5px;
   margin-left: 28%;}
#kontaktinhalt a#telef:hover {text-decoration: none; border-bottom: 0;}

#kontaktinhalt a#telef:hover {background-color: #003388;}
#kontaktinhalt a#telef span#telicon {display: inline; 
   	color: #003388; 
   	margin-right: 6px;}
#kontaktinhalt #telef:hover span#telicon {color: #fff;}
   		
#kontaktinhalt a#telef:hover,
#kontaktinhalt a#telef:active {text-decoration: none; border-bottom: 0; color: #fff;}

#kontaktinhalt p.mobil {margin: 30px 0;}

div.briefkasten {position: relative;}
	
div#kontaktinhalt div.briefkasten a#mail {
   	font-size: 1.2em;
   	line-height: 2em;
   	font-weight: bold;
   	border: 1px solid #003388;
   	padding: 5px; 
   	border-radius: 5px;
   	margin-top: 20px;
   	margin-bottom: 20px;
   	margin-left: 30%;}
#kontaktinhalt a#mail:hover {background-color: #003388; color: #fff;}
#kontaktinhalt span#mailicon {display: inline; 
	position: relative; 
	top: 2px; 
	font-size: 1.2em; 
	color: #003388; 
	margin-right: 6px;}
#kontaktinhalt a#mail:hover span#mailicon {color: #fff;}

#kontaktinhalt ul {line-height: 1.4em;
   list-style-type: circle;
   font-size: 0.8em;
   margin-left: 20px;}

#kontaktinhalt ul#konex {margin: 0 0 0 20px;}
#kontaktinhalt .p2 {margin-bottom: 10px;}

#kontaktinhalt p#hinw {margin-top: 50px;}

.randtakt {
	float: right;
   display: block;
   margin: 20px 0 7px 0;}

#kontaktinhalt a.uelinks {font-size: 1.1em;
	margin-left: 23%;}

#kontaktinhalt p.randkontoben,
#impressuminhalt p.randkontoben {
    margin: 20px 0 7px 0;
    font-size: 1em;}

#kontaktinhalt p.randkontweiter,
#impressuminhalt p.randkontweiter {
    margin: 0 0 50px 0;
    font-size: 1em;}

/*Impressum */

#impressuminhalt {
   width: auto;
   margin-left: 170px;
   padding: 20px 50px 400px 3%;
   overflow: hidden;}

h2 {margin-bottom: 20px;}

#block-4 {width: auto;
   float: left;}
#block-5 {width: auto;
   float: left;
   margin-left: 85px;}

#impressuminhalt p.px {padding-bottom: 10px;
margin-top: 15px;}
#impressuminhalt #spez {padding: 0 3px;}
#impressuminhalt p.gud {margin-bottom: 20px;}
#impressuminhalt p.p3 {padding-bottom: 20px;}


@media only screen and (max-width: 1000px) {
   	
   	div#frageninhalt div a.trenner1 {display: none;}
   	
   	div#konzber a#bericht {display: none;}
   	
   	div#seiteninhalt {margin: 0 0 80px 0;} 
   	
   	div#seiteninhalt ul.preileipu li a {font-size: 1.6em;}
   	
   	div#kapitel ul.hbspsubmenu li a {font-size: 1.0em;
   		line-height: 1.6em;} 
   	div#kundenfragen ul.fraku li a {line-height: 1.6em;}
   	
   	div#praekudi ul#parubello li a {font-size: 1em;
   		line-height: 1.6em;}
   	
}

@media only screen and (max-width: 990px) {
	
	div#kontaktinhalt a#telef {margin-left: 28%;}
	div#kontaktinhalt div.briefkasten a#mail {margin-left: 30%;}
	
}

@media only screen and (max-width: 950px) {

	#kontaktinhalt a.uelinks {font-size: 1.1em;
		margin-left: 21%;}

}

@media only screen and (max-width: 930px) {
	
	div#kontaktinhalt a#telef {margin-left: 26%;}
	div#kontaktinhalt div.briefkasten a#mail {margin-left: 28%;}


	
}

@media only screen and (max-width: 900px) {
	
	#block-5 {margin-left: 55px;}
	
	/* Spalte */

	.spalte {display: none;}

	#kontaktinhalt a.uelinks {font-size: 1.1em;
		margin-left: 20%;}
	
}

@media only screen and (max-width: 880px) {
	
	div#kontaktinhalt a#telef {margin-left: 24%;}
	div#kontaktinhalt div.briefkasten a#mail {margin-left: 26%;}

	#kontaktinhalt a.uelinks {font-size: 1.1em;
		margin-left: 18%;}	
	
}

@media only screen and (max-width: 850px) {
	#block-5 {margin-left: 35px;}
	
	.tweet {height: 30em;}
   .grotweet {height: 40em;}
	
	div#kontaktinhalt a#telef {margin-left: 23%;}
	div#kontaktinhalt div.briefkasten a#mail {margin-left: 26%;}
}

@media only screen and (max-width: 800px) {
	
	html {width: 100%;}

	body {background: #FFF;}

	div#container {background: none;}
	
	#frageninhalt h2#text {margin-top: 60px;}
	#leistungen div#ersterabsatz h2.uexy {margin-top: 40px;}
	#hoerinhalt h2#text,
	#hoerinhalt h3#text {margin-top: 60px;}
	#kontaktinhalt h2#text {margin-top: 60px;}
	#hoerinhalt #beispiele .hbspbox7 h3.cnk {margin-top: 60px;}
	
	div#netzwerk,
	#preise .umschlag .container #spalte {display: none;}
	
	#kontaktinhalt div.sst {position: relative; top: 10px;}
	
	#hoerbeispiele #hoerinhalt {margin-left: 0;}
	
	#navigation {position: absolute; 
			top: -160px;
			left: -1000px;
			width: 100%;
			height: 100%;
			background-image: none;
			background-color: #37699B;
			z-index:1101;}
    
     #navigation:target  {
     	left: 0;}
    
    #navigation a.beenden  {
		    display: block;
		    width: auto;
		    position: absolute;
		    top: 100px;
		    left: 88%;
		    /*font-size: 1.5em;
		    font-weight:bold;
		    color: #fff;*/
		    text-decoration:none;
            z-index:1120;}
    
    #navigation a.beenden:hover {text-decoration: none; border-bottom: 0;}
    
	 #navigation ul  {
	 		width: auto;
	 		height:auto;
		    position:relative;
		    top: 180px;
		    left: 0%;
		    padding-left: 30%;
		    margin: 0;
            z-index:1112;}
            
     #navigation ul li  {
            width:100%;
            font-size:2.4em;
            color:#fff;
            margin-bottom: 30px;
            z-index:1113;}
	 
	 #navigation ul li:first-child {
	 	width: 100%;
	 	display: block;
	 	/*margin-top: 50px; */
	 	margin-top: 0px;
	 	/*padding-bottom: 20px;*/
	 	/*position: relative; 
	 	top: -40px;
	 	top: -0px; 
	 	left: 0;*/}
	 	 
	 #navigation ul li:first-child a.normal {display: inline;}
	 
	 /*#navigation ul li:first-child a.beenden  {
		    display: inline;
		    width: 30px;
		    position: relative;
		    top: -80px;
		    left: 41%;
		    font-size: 1.5em;
		    font-weight:bold;
		    color: #fff;
		    text-decoration:none;
            z-index:1120;}*/
	
	a#nav06,
	a#nav06:hover,
	a#nav06:active {background-image: none;}
	
	span.abstnavi {position: relative;
		top: 0;
		left: 0;}

	/* seiteninterne Navigation */

	div#einfuehrung {
			position: absolute;
		    top: -160px;
		    left: 0;
		    width: 100%;
		    height: 100%;
		    margin: auto;
		    display: none;
		    background-color: #88B3DE;
		    z-index: 101;}

	 #einfuehrung:target  {display: block;}
        
	 #einfuehrung ul.uebersicht  {
		    display: inline;
		    position: absolute;
		    top: 100px;
		    left: 0px;
		    width: 80%;
		    height: 100%;
		    padding-left: 60px;
		    list-style: none;
            z-index: 102;}
	    
     #einfuehrung ul.uebersicht li  {
            width:100%;
            font-size: 1.8em;
            color: #000;
            margin-bottom: 25px;
            z-index:103;
            line-height: 1.2em;}	    
	 
	 #einfuehrung ul.uebersicht li:first-child {margin-bottom: 80px;}
	 
	 #einfuehrung ul.uebersicht li:first-child a {
		    display: inline;
		    position: fixed;
		    top: 100px;
		    left: 2%;
		    text-align: left;
		    padding: 5px;
		    font-size: 1.8em;
		    font-weight:bold;
		    color: #003388;
		    text-decoration:none;		    
            z-index: 110;}
     
     #einfuehrung ul.uebersicht li:first-child a:hover {text-decoration: none; border-bottom: 0;}

	#einfuehrung ul.uebersicht li a,
	#einfuehrung ul.uebersicht li.einfschliessen a,
	#praekudi ul#parubello li a,
	#praekudi ul#parubello li.medilist a.zurueck,
	#seiteninhalt ul.preileipu li a,
	#seiteninhalt ul.preileipu li.einfschliessen a,
	#kundenfragen ul.fraku li a,
	#kundenfragen ul.fraku li.einfschliessen a,
	#kundenfragen ul.hbspsubmenu li a,
	#kundenfragen ul.hbspsubmenu li.einfschliessen a,
	#navigation ul li.close a.beenden {text-shadow: 3px 3px 3px rgba(0,0,0, 0.3);}
	
	#einfuehrung ul.uebersicht li a:hover,
	#einfuehrung ul.uebersicht li.einfschliessen a:hover,
	#praekudi ul#parubello li a:hover,
	#praekudi ul#parubello li.medilist a.zurueck:hover,
	#seiteninhalt ul.preileipu li a:hover,
	#seiteninhalt ul.preileipu li.einfschliessen a:hover,
	#kundenfragen ul.fraku li a:hover,
	#kundenfragen ul.fraku li.einfschliessen a:hover,
	#kundenfragen ul.hbspsubmenu li a:hover,
	#kundenfragen ul.hbspsubmenu li.einfschliessen a:hover,
	#navigation ul li.close a.beenden:hover {color: #eee;
		text-decoration: none;
		border-bottom: 0;}


	/* Sub-Menue fragen.html */
	
	#fragen #kundenfragen:target {display: block;}

	#fragen #kundenfragen {position:absolute;
		   top: -160px;
		    left:0;
		    width:100%;
		    height:100%;
		    margin: auto;
		    display: none;
		    background-color: #88B3DE;
		    z-index:301;}
		    
     
     
     #fragen #kundenfragen h2 {font-size: 1.5em; position: relative; top: -7px; color: #444; text-align: center;}
     
	 #fragen #kundenfragen ul.fraku  {
		    display: inline;
		    list-style: none;
		    position: absolute;
		    top: 160px;
		    left: 0;
		    width:100%;
		    height:100%;
            z-index:302;}
	 
     #fragen #kundenfragen ul.fraku li  {
            width:100%;
            font-size:1.4em;
            color:#000;
            margin-bottom: 30px;
            z-index:103;
            padding: 0 50px 0 90px;
            line-height: 1.4em;}	    
	 
	 #fragen #kundenfragen ul.fraku li:first-child {display: inline;
	 		margin-bottom: 80px;}
	 
	 #fragen #kundenfragen ul.fraku li:first-child a {
		    display: inline;
		    position: fixed;
		    top: 100px;
		    left: 2%;
		    text-align: left;
		    padding: 5px;
		    font-size: 2.5em;
		    font-weight:bold;
		    color: #003388;
		    text-decoration:none;		    
            z-index:310;}
     
     #fragen #kundenfragen ul.fraku li:first-child a:hover {text-decoration: none; border-bottom: 0;}

	/* Sub-Menue hoerbeispiele.html */

	#hoerbeispiele #kapitel:target {display: block;}

	#hoerbeispiele #kapitel {position:absolute;
		   top: -160px;
		    left:0;
		    width:100%;
		    height:100%;
		    margin: auto;
		    display: none;
		    background-color: #88B3DE;
		    z-index:301;}
          
	 #hoerbeispiele #kapitel ul.hbspsubmenu  {
		    display: inline;
		    list-style: none;
		    position: absolute;
		    top: 160px;
		    left: 0;
		    width:100%;
		    height:100%;
            z-index:302;
            }
	 
     #hoerbeispiele #kapitel ul.hbspsubmenu li  {
            width:100%;
            font-size:1.4em;
            color:#000;
            margin-bottom: 25px;
            z-index:103;
            padding: 0 50px 0 90px;
            line-height: 1.2em;}	    
	 
	 #hoerbeispiele #kapitel ul.hbspsubmenu li:first-child {display: inline;
	 		margin-bottom: 80px;}
	 
	 #hoerbeispiele #kapitel ul.hbspsubmenu li:first-child a {
		    display: inline;
		    position: fixed;
		    top: 100px;
		    left: 2%;
		    text-align: left;
		    padding: 5px;
		    font-size: 2.0em;
		    font-weight:bold;
		    color: #003388;
		    text-decoration:none;		    
            z-index:310;}
     
     #hoerbeispiele #kapitel ul.hbspsubmenu li:first-child a:hover {text-decoration: none; border-bottom: 0;}

	/* Sub-Menue Kundendienste */

	#praekudi {position:absolute;
		    top: -160px;
		    left: 0;
		    width: 100%;
		    height: 100%;
		    margin: auto;
		    display: none;
		    background-color: #88B3DE;
		    z-index:101;}

	 #praekudi:target  {display: block;}
        
	 #praekudi ul#parubello  {
		    display: inline;
		    position: absolute;
		    top:40px;
		    left: 0;
		    width: 100%;
		    height: 100%;
            z-index:102;
            padding-left: 70px;
            padding-top: 50px;
            margin-left: 0;}
	    
     #praekudi ul#parubello li  {
            list-style-type: none;
            width:100%;
            font-size:1.4em;
            color:#fff;
            margin-bottom: 25px;
            z-index:103;
            line-height: 1.0em;
            padding: 0 20px;}
	 	 
	 div#praekudi ul#parubello li.medilist {display: inline; margin-bottom: 80px;}
	    
	 #praekudi ul#parubello li.medilist a.zurueck  {
		    position: fixed;
		    top: 1px;
		    left: 2%;
		    padding: 5px;
		    font-size: 1.8em;
		    font-weight:bold;
		    color: #003388;
		    text-decoration:none;
            z-index:110;}

	#praekudi ul#parubello li.medilist a.zurueck:hover {text-decoration: none; border-bottom: 0;}
	
	#praekudi ul#parubello li.zeigen {display: block;}

	/* seiteninterne Navigation Seite preise */

	div#seiteninhalt {position:absolute;
		    top: -160px;
		    left: 0;
		    width: 100%;
			height: 100%;
		    margin: 0;
		    display: none;
		    background-color: #88B3DE;
		    z-index:101;}

	 div#seiteninhalt:target {display: block;}
        
	 div#seiteninhalt ul.preileipu {
		    display: inline;
		    position: absolute;
		    top: 100px;
		    left: 90px;
		    width: 300px;
		    height:  100%;
		    list-style: none;
            z-index:102;}
	    
     div#seiteninhalt ul.preileipu li {
            font-size: 1.8em;
            color: #000;
            margin-bottom: 25px;
            z-index: 103;
            line-height: 1em;}	    
	 
	 div#seiteninhalt ul.preileipu li:first-child {margin-bottom: 100px;}
	 
	 div#seiteninhalt ul.preileipu li#text {display: none;}
	 
	 div#seiteninhalt ul.preileipu li.einfschliessen a {
	 		display: inline;
		    position: fixed;
		    top: 100px;
		    left: 3%;
		    padding: 0;
		    font-size: 2.3em;
		    font-weight:bold;
		    color: #003388;
		    text-decoration:none;		    
            z-index:1110;}
     
     div#seiteninhalt ul.preileipu li:first-child a:hover,
     div#seiteninhalt ul.preileipu li a {text-decoration: none; 
     	border-bottom: 0;}

	/* Zeilenhoehe fuer Texte und Listen */

	div#leistungen ul.fex li {line-height: 2.5em;
		font-size: 0.9em;}
	p.p1,
	p.px,
	p.p3,
	.hbspbox7 p,
	#hoerbeispiele p,
	#preise p {line-height: 2em; font-size: 0.9em;}
	div#leistungen ul.lehrer li {line-height: 2.5em; 
		font-size: 0.9em;}
	div#leistungen ul.lehrer li ul.inlist3 li {line-height: 3em;
		font-size: 1.0em;}
	div#leistungen ul.inlist3 li {line-height: 2.5em;
		font-size: 0.9em;}
	#hoerbeispiele div#hoerinhalt ul li,
	#preise div#preisinhalt ul li {line-height: 2.0em; 
		font-size: 1.15em;}
	
	/*#preise div#preisinhalt ul li a {font-size: 1em;}*/
	
	ul.stichlisten li {line-height: 2.5em;
		font-size: 0.9em;}

	#meineantworten ol li,
	#meineantworten ul li,
	#meineantworten ul.liste li {line-height: 2em;
		font-size: 1.2em;}
	
	#meineantworten ul.nebenthemen li {line-height: 2em;
		font-size: 1.2em;}
	
	#meineantworten p {line-height: 2em;
		font-size: 1em;}

	#meineantworten h5 {line-height: 2em;
		font-size: 1.1em;}

	.hbspbox5 p.padu10,
	.hbspbox5 p,
	.hbspbox7 p,
	p.p1,
	#preise p.pca {padding-bottom: 20px;}
	 

	/* Player ohne Schatten = Platz sparen */
	
	a.player {
	position: relative;
	display: block;
   	max-width: 700px;
   	min-height: 135px;
   	border: #003388 1px solid;
   	-webkit-box-shadow: hsla(580, 100%, 30%, 0.8) 0px 0px 0px;
   	-moz-box-shadow: hsla(580, 100%, 30%, 0.8) 0px 0px 0px;
   	 box-shadow: hsla(580, 100%, 30%, 0.8) 0px 0px 0px;
   	 -webkit-border-radius: 15px;
   	 -moz-border-radius: 15px;
     border-radius: 15px;}

	a.player:hover {-webkit-box-shadow: hsla(580, 100%, 30%, 0.8) 0px 0px 0px;
   	-moz-box-shadow: hsla(580, 100%, 30%, 0.8) 0px 0px 0px;
   	 box-shadow: hsla(580, 100%, 30%, 0.8) 0px 0px 0px;
   	border: #6699CC 1px solid;
   	 text-decoration: none;}

	a.player span.langtext2 {font-size: 2.0em; color: #333; position: absolute; left: 30%; top: 25px; min-width: 300px;}

	
	#seiteleistungen a#nav01 span.abstnavi,
	#preise a#nav02 span.abstnavi,
	#fragen a#nav03 span.abstnavi,
	#hoerbeispiele a#nav04 span.abstnavi,
	#kontakt a#nav05 span.abstnavi,
	#bestellung a#nav05 span.abstnavi {color: #999; text-shadow: 3px 3px 3px rgba(0,0,0, 0.3);}
	#seiteleistungen a#nav01:hover span.abstnavi,
	#preise a#nav02:hover span.abstnavi,
	#fragen a#nav03:hover span.abstnavi,
	#hoerbeispiele a#nav04:hover span.abstnavi,
	#kontakt a#nav05:hover span.abstnavi,
	#bestellung a#nav05:hover span.abstnavi {color: #fff; text-shadow: rgba(245, 245, 255, 0.35) 0 0px 0px, rgba(0, 0, 30, 0.08) 0px 2px 2px, rgba(0, 0, 30, 0.20) 0px 2px 1px, rgba(0, 0, 30, 0.40) 0px 2px 1px, rgba(0, 0, 0, 0.08) -5px 5px 2px;}

	
	a#nav01,
	a#nav01:hover,
	a#nav02,
	a#nav02:hover,
	a#nav03,
	a#nav03:hover,
	a#nav04,
	a#nav04:hover,
	a#nav05,
	a#nav05:hover,
	a#nav06,
	a#nav06:hover {background-image: none;}
	
	#seiteleistungen a#nav01,
	#seiteleistungen a#nav01:hover,
	#preise a#nav02,
	#preise a#nav02:hover,
	#fragen a#nav03,
	#fragen a#nav03:hover,
	#hoerbeispiele a#nav04,
	#hoerbeispiele a#nav04:hover,
	#kontakt a#nav05,
	#kontakt a#nav05:hover,
	#bestellung a#nav05,
	#bestellung a#nav05:hover,
	#kompakt a#nav06,
	#kompakt a#nav06:hover {
   		background-image: none;}
	
	div#container a.picplac,
	div#container img.picplac,
	div#container img.hidden,
	img#mm {
		display: none; 
		opacity: 0; 
		width: 0; 
		height: 0;}
	
	div#logo h1 {max-width: 800px; height: 160px; background-color: #9FC9EF;/*#37699B;*/}
	div#logo h1 a img#bildlogo {display: none; width: 0; height: 0;}
	div#logo h1 a span.varanz {display: inline; max-width: 600px; height: auto; font-size: 1.8em; color: #244194; margin-left: 22%;}
	div#logo h1 {padding-top: 10px;}
	div#logo h2#ortsname {display: none; width: 0; height: 0;}
	
	div#logo h1 a img.praeschrift {display: block; max-width: 64%; height: auto; position: absolute; top: 55px; left: 30%;}
	
	div#logo p#navilink a#dreistrich {display: inline; width: 30px; /*font-size: 2.2em; color: #fff;*/ position: absolute; top: 120px; right: 5%;}
	div#logo p#navilink a#dreistrich:hover {text-decoration: none; border-bottom: 0;}
	
	div#logo p#internenavi a#senkrechtstriche {display: inline; width: 30px; /*font-size: 2.2em; color: #96C6F2;*/ position: absolute; top: 120px; left: 5%; /*transform: rotate(90deg);*/}
	div#logo p#internenavi a#senkrechtstriche:hover {text-decoration: none; border-bottom: 0;}
	
	div#prokudi {max-width: 800px; height: 40px; position: relative; background-color: #6699CC; margin-bottom: 20px;}
	div#prokudi h2.uexx {font-size: 1.2em; padding: 10px 0 0 3px; text-align: center; color: #eee;}
	
	div#prokudi p#subnavi a#substriche {display: inline; width: 26px; font-size: 2.2em; color: #003388; position: absolute; top: 11px; left: 2%;}
	div#prokudi p#subnavi a#substriche:hover {text-decoration: none; border-bottom: 0;}
	
	/*div#prokudi {max-width: 800px; height: 40px; position: relative; background-color: #6699CC; margin-bottom: 20px;}
	div#prokudi h2.uexx {font-size: 1.2em; padding: 10px 0 0 3px; margin-right: 50px; color: #eee;}
	
	div#prokudi p#subnavi a#substriche {display: inline; width: 26px; font-size: 2.2em; color: #003388; position: absolute; top: 11px; left: 80%;}
	div#prokudi p#subnavi a#substriche:hover {text-decoration: none; border-bottom: 0;}*/
	
	div#kontaktinhalt {padding: 20px 2% 100px 3%; margin: 0;}
	#impressuminhalt {padding: 20px 2% 40px 3%; margin: 0;}
	
	#leistungen {padding: 20px 2% 370px 3%; margin: 0;}
	
	#preisinhalt {padding: 20px 2% 530px 3%; margin: 0;}
	div#preisinhalt h2,
	div#preisinhalt h3,
	div#preisinhalt div.abcliste,
	div#preisinhalt img#landkarte {margin-left: 0;}
	
	div#preisinhalt ul,
	div#preisinhalt ul.stichliste {margin-left: 20px;}
	
	div#preisinhalt div#hbsppreise {margin-left: 0;}
	
	div#preisinhalt ul#vorstim li:last-child {font-size: 1.15em;}
	
	div#preisinhalt div.stichworte h3 {font-size: 1.7em;}
	
	div#preisinhalt h2#ortsverzeichnis {font-size: 1.8em;}
	
	div.sst a.abstouzwei,
	div.sst a.abstouneun,
	div.sst a.abstoufuenf,
	div.sst a.gau,
	div.sst a.abstouacht {width: auto;
		float: right;
		margin-left: 0px;
		margin-top: 8px;}
		
	#frageninhalt,
	#meineantworten {width: 100%; padding: 20px 1% 40px 3%; margin: 0;}
		
	#hoerinhalt {padding-bottom: 40px;}
	
	#hoerinhalt p {margin: 0; padding-right: 10px;}

	.rahmen {width: 100%;}

	#preisinhalt p {margin: 0;
   		padding-right: 0;}

	#preisinhalt li {padding-right: 0;}
	
	#frageninhalt img#trenner1,
	#frageninhalt img#trenner3 {display: none;}
	
	#meineantworten p.umargu20 {margin-bottom: 20px;}
	#meineantworten ul.nebenthemen li#ersteue {font-size: 1.4em; color: #666;}
	#meineantworten ul.nebenthemen li.nom {line-height: 1.6em; margin-left: 0px; margin-bottom: 28px;}
	#meineantworten ul.nebenthemen li.uen {font-size: 1.4em; margin: 60px 0 20px 0; color: #666;}
	
	#leistungen div#ersterabsatz {width: 100%;
	margin-left: 0%;}
	
	#bild {display: none;}
	ul#ausbildung {display: none;}
	
	ul.uebersicht {display: none;}
	
	img#trenner4,
	img#trenner1 {display: none;}
	
	div#ersterabsatz ul#gruppen li {line-height: 1.8em;
		font-size: 1em;}
	
	#leistungen ol.lok li {line-height: 1.8em;
		font-size: 0.9em;}
	
	/* spalte auf preise und einladung auf impressum */
	
	#preise #container #spalte {display: none;}
	
	/* seite fragen.html */
	
	div#kundenfragen,
	div#kundenfragen .verstecken,
	div#kontaktinhalt .verstecken {display: none;}
	
	/* seite preise.html ortsverzeichnis */
	
	.abc {display: inline;
   		margin-right: 20px;
   		font-size: 2.2em;
   		line-height: 1.6em;}
   	
   	#preisinhalte p a,
   	#preisinhalt ul li a {font-size: 1.0em; line-height: 1.6em;}
   	
   	#preisinhalt h2#ortsverzeichnis {padding-top: 20px;}
   	
   	#preisinhalt ul.stichliste li {margin-bottom: 15px; line-height: 1.6em;}
   	#preisinhalt ul.stichliste li:last-child {margin-bottom: 20px;}
   	#preisinhalt div.stichworte ul.stichliste li a.intern3 {font-size: 1.4em;}
   	
   	img#trenner3 {display: none;}
   	
    /* seite kontakt.html */
   	   	
   	#kontaktinhalt h2#text {
   		margin-left: 39%;
		font-size: 1.8em;
		display: block;}
   		
   	/*#kontaktinhalt h2#inhalt {margin-bottom: 40px;
   		margin-left: 20%;
   		font-size: 1.8em;}*/
	   
	.fs08 {font-size: 1em;}

	#kontaktinhalt a.uelinks {margin-left: 22%;}

	#impressuminhalt ul.copylist {
		font-size: 0.92em;}

   	div#kontaktinhalt a#telef { 
   		border: 1px solid #003388; 
   		padding: 5px; 
   		border-radius: 5px;
   		margin-left: 36%;
   		font-size: 1.1em;}
    div#kontaktinhalt a#telef:hover {background-color: #003388;}
   	div#kontaktinhalt a#telef span#telicon {display: inline; 
   		color: #003388; 
   		margin-right: 6px;}
   	div#kontaktinhalt #telef:hover span#telicon {color: #fff;}
   		
   	a#telef:hover,
   	div#kontaktinhalt a#telef:active {text-decoration: none; border-bottom: 0; color: #fff;}
	
	div#kontaktinhalt p#hinw {margin-top: 100px;}
	
	div.briefkasten {position: relative;}
	
	div#kontaktinhalt div.briefkasten a#mail {display: inline; 
   		border: 1px solid #003388; 
   		padding: 5px; 
   		border-radius: 5px;
   		margin-top: 0;
   		margin-bottom: 0;
   		margin-left: 0;
   		position: absolute; 
   		top: 0; 
   		left: 38%;}
	a#mail:hover {background-color: #003388; color: #fff;}
	span#mailicon {display: inline; 
		position: relative; 
		top: 2px; 
		font-size: 1.2em; 
		color: #003388; 
		margin-right: 6px;}
	a#mail:hover span#mailicon {color: #fff;}
	
	ul#konex li a {font-size: 1.1em;}
	ul#konex li:first-child {margin-bottom: 10px;}
	ul#konex li:nth-child(2) {margin-bottom: 25px;}
	
	/* impressum */
	
	#block-5 {margin-left: 105px;}
	
	#impressuminhalt .text_gros {font-weight: bold;
   font-size: 1.2em;}

}

@media screen and (max-width: 640px) {
	
	div#logo h1 {max-width: 100%;}
	div#logo h1 a span.varanz {display: inline; max-width: 350px; margin-left: 15%;}
	
	div#logo h1 a img.praeschrift {display: block; max-width: 64%; height: auto; position: absolute; top: 60px; left: 27%;}
		   	
	#seiteleistungen div#tog {padding-left: 25%;}
	
	#kontaktinhalt h2#inhalt {margin-bottom: 40px;
   		margin-left: 17%;
   		font-size: 1.8em;}
   		
    a.player span.langtext2 {font-size: 2.0em; color: #333; position: absolute; left: 30%; top: 45px;}
}


@media screen and (max-width: 620px) {
	
	div.sst p.abstouneun a {width: auto;
	position: absolute;
	top: 60px;
	right: 10px;
	border: solid 1px #003388;
	border-radius: 5px;
	padding: 5px;
	font-size: 1em;}
	
	/*a.player span.langtext {font-size: 2.0em; position: absolute; left: 30%; top: 45px; max-width: 400px; padding-right: 20px;}*/
	
}

@media screen and (max-width: 600px) {
	#block-4,
	#block-5 {float: none;}
	
	#block-4,
	#block-5 {margin-left: 20%;}
	
	#block-4 {margin-top: 30px;
		margin-bottom: 20px;}
	#block-5 {margin-bottom: 30px;}
	
	.med600 {margin-bottom: 10px;}

	#kontaktinhalt a.uelinks {font-size: 1.1em;
		margin-left: 21%;}

}

@media screen and (max-width: 580px) {
	
	div#kontaktinhalt p#telef {margin-left: 32%;}
	
}

@media screen and (max-width: 560px) {
	
	div.sst p.abstouzwei a,
	div.sst p.gau a {width: auto;
	position: absolute;
	top: 60px;
	right: 10px;
	border: solid 1px #003388;
	border-radius: 5px;
	padding: 5px;
	font-size: 1em;}
	
	#seiteleistungen div#tog {
		display: none;}

	#kontaktinhalt a.uelinks {margin-left: 20%;}
}

@media screen and (max-width: 540px) {
	
	div#logo h1 a span.varanz {margin-left: 11%;}
	
	div#logo h1 a img.praeschrift {display: block; max-width: 64%; height: auto; position: absolute; left: 24%;}
	
	div#leistungen,
	div#meineantworten,
	div#preisinhalt,
	div#impressuminhalt {padding: 20px 1em inherit 1em;}
	
	div#kontaktinhalt {padding: 20px 1em 100px 1em;}
	
	#kontaktinhalt h2#inhalt {margin-bottom: 40px;
   		margin-left: 14%;
   		font-size: 1.8em;}
	
	div#kontaktinhalt p#telef {margin-left: 35%;}
   
   .tweet {height: 28em;}
   .grotweet {height: 36em;}
	
}


@media screen and (max-width: 520px) {
	
	#kundenfragen {position:absolute;
		    top:-100px;}
	#kundenfragen h2 {position: relative; top: 33px;}
	/*#kundenfragen ul.fraku  {
		    display: inline;
		    list-style: none;
		    position: relative;
		    top: 70px;}*/
		    
	#leistungen,
	#preisinhalt,
	#hoerinhalt {overflow: hidden;}
	
}


@media screen and (max-width: 500px) {
	div#logo h1 a span.varanz {margin-left: 8%;}
	
	div#logo h1 a img.praeschrift {display: block; max-width: 64%; height: auto; position: absolute; left: 21%;}
	
	#kontaktinhalt h2#inhalt {margin-bottom: 40px;
   		margin-left: 13%;
   		font-size: 1.6em;}
	
	div.sst p.abstouzwei,
	div.sst p.abstouneun {margin-bottom: 120px;}
	div.sst p.gau {margin-bottom: 60px;}	

}


@media screen and (max-width: 480px) {
	
	div#logo h1 a span.varanz {margin-left: 4%;}
	div#logo p#navilink a#dreistrich {position: absolute; top: 120px; right: 5%;}
	div#logo p#internenavi a#senkrechtstriche {position: absolute; top: 120px; left: 5%;}
	
	/*div#logo h1 a img.praeschrift {display: block; max-width: 64%; height: auto; position: absolute; left: 21%;}*/
	
	#navigation ul  {
		    position:relative;
		    top: 180px;}
	
	#navigation a.beenden  {
		    left: 84%;
		    /*font-size: 1.5em;
		    font-weight:bold;
		    color: #fff;*/
		    text-decoration:none;
            z-index:1120;}
	
	#kontaktinhalt h2#inhalt {margin-bottom: 40px;
   		margin-left: 11%;
   		font-size: 1.6em;}
	
	/*#kundenfragen {position:absolute;
		    top:-120px;}
	#kundenfragen ul.fraku  {
		    display: inline;
		    list-style: none;
		    position: relative;
		    top: 90px;}
	
	#kundenfragen ul.fraku li:first-child a {
		    display: inline;
		    position: fixed;
		    top: 52px;
		    left: 10%;}*/
	
	div#seiteninhalt ul.preileipu li.einfschliessen a {
	 		display: inline;
		    position: fixed;
		    top: 100px;
		    left: 0;}
		
	.tweet {height: 26em;}
    .grotweet {height: 34em;}
		
	.abc {display: inline;
   		margin-right: 25px;
   		font-size: 2.2em;
   		line-height: 1.8em;}
   	.abc:last-child {margin-right: 0;}
   
   	#kontaktinhalt h2 {margin-left: 38%;}
   	
   	div#kontaktinhalt a#telef {margin-left: 33%;}
	div#kontaktinhalt div.briefkasten a#mail {
   		position: absolute; 
   		left: 36%;}
	
	/*a.player span.langtext2 {font-size: 2.0em; color: #333; position: absolute; left: 25%; top: 35px; width: auto;}*/
	a.player span.langtext2 {font-size: 2.0em; color: #333; position: absolute; left: 25%; top: 45px; min-width: 250px; padding-right: 20px;}
	
}

@media screen and (max-width: 440px) {
	
	div#logo h1 a span.varanz {font-size: 1.6em; margin-left: 6%;}
	div#logo p#navilink a#dreistrich {position: absolute; top: 120px; right: 5%;}
	div#logo p#internenavi a#senkrechtstriche {position: absolute; top: 120px; left: 5%;}
	
	div#logo h1 a img.praeschrift {display: block; max-width: 64%; height: auto; position: absolute; left: 18%;}
	
	#einfuehrung ul.uebersicht  {
		    padding-left: 30px;}
	
	#kontaktinhalt h2#inhalt {margin-bottom: 40px;
   		margin-left: 3%;
   		font-size: 1.6em;}
	
	/*#kundenfragen ul.fraku li:first-child a {
		    display: inline;
		    position: fixed;
		    top: 52px;
		    left: 6%;}*/
		   
	/*div#seiteninhalt ul.preileipu li.einfschliessen a {
	 		display: inline;
		    position: fixed;
		    top: 0px;
		    left: 5%;}*/
	
	div.sst p.abstoufuenf a {width: auto;
	position: absolute;
	top: 60px;
	right: 10px;
	border: solid 1px #003388;
	border-radius: 5px;
	padding: 5px;
	font-size: 1em;}

	#preisinhalt .abstoufuenf {margin: 0 0 120px 0;}

}

@media only screen and (max-width: 420px) {
	
	div#logo h1 {padding-top: 10px;}
	div#logo h1 a span.varanz {margin-left: 3%;}
	div#logo p#navilink a#dreistrich {position: absolute; top: 120px; right: 5%;}
	div#logo p#internenavi a#senkrechtstriche {position: absolute; top: 120px; left: 5%;}
	
	/*div#logo h1 a img.praeschrift {display: block; max-width: 64%; height: auto; position: absolute; left: 18%;}*/
	
	/*#kundenfragen {position:absolute;
		    top:-120px;}
		    
	#kundenfragen ul.fraku  {
		    display: inline;
		    list-style: none;
		    position: relative;
		    top: 90px;}
		    
	#kundenfragen ul.fraku li:first-child a {
		    display: inline;
		    position: fixed;
		    top: 72px;
		    left: 0%;}*/
	
	div#seiteninhalt ul.preileipu li.einfschliessen a {
	 		display: inline;
		    position: fixed;
		    top: 100px;
		    left: 0;}
	
	#kontaktinhalt h2#text {margin-left: 33%;}
   	
   	div#kontaktinhalt a#telef {margin-left: 28%;}
	div#kontaktinhalt div.briefkasten a#mail {
   		position: absolute; 
   		left: 32%;}
   		
	/*#einfuehrung ul.uebersicht  {
		   padding-left: 30px;}*/
		    	
	#einfuehrung ul.uebersicht li:first-child a {
		    display: inline;
		    position: fixed;
		    top: 100px;
		    left: 0;}
		
	div#seiteninhalt ul.preileipu {
		    display: inline;
		    position: absolute;
		    top: 100px;
		    left: 70px;
		    width: 70%;
		    height:  100%;
		    list-style: none;
            z-index:102;}
	
	#fragen #kundenfragen ul.fraku li  {
            padding: 0 50px 0 70px;}
    
    #fragen #kundenfragen ul.fraku li:first-child a {
		    left: 0;}
    
    #hoerbeispiele #kapitel ul.hbspsubmenu li  {
            padding: 0 50px 0 70px;}
	
	#hoerbeispiele #kapitel ul.hbspsubmenu li:first-child a {
		    left: 0;}
	
	#leistungen ul li {line-height: 1.6em; font-size: 0.9em;}
	
	#meineantworten ol li,
	#meineantworten ul.punkte li,
	#meineantworten ul.liste li {font-size: 1.3em; margin-bottom: 7px;}
	
	#meineantworten ol,
	#meineantworten ul.punkte {margin-bottom: 20px;}
	
	#kontaktinhalt a.uelinks {margin-left: 15%;}

}

@media screen and (max-width: 400px) {
	
	/*div#logo h1 a img.praeschrift {display: block; max-width: 64%; height: auto; position: absolute; top: 50px; left: 18%;}*/

	/*a.player span.langtext {font-size: 2.0em; position: absolute; left: 30%; top: 45px; max-width: 300px; padding-right: 20px;}*/
	
	div#logo h1 a span.varanz {font-size: 1.4em; margin-left: 6%;}
	
	#navigation ul  {
		    padding-left: 20%;}
	
	#navigation a.beenden  {
		    left: 80%;}
	
	div#kontaktinhalt div.briefkasten a#mail {
   		position: absolute; 
   		left: 29%;}
   		
   	#kontaktinhalt h2#inhalt {margin-bottom: 40px;
		margin-left: 0;
   		font-size: 1.5em;}

}

@media screen and (max-width: 380px) {
	
	div#logo h1 a span.varanz {margin-left: 5%; padding: 5px 0;}
	div#logo p#navilink a#dreistrich {position: absolute; top: 120px; right: 5%;}
	div#logo p#internenavi a#senkrechtstriche {position: absolute; top: 120px; left: 5%;}
	
	div#logo h1 a img.praeschrift {display: block; max-width: 64%; height: auto; position: absolute; top: 70px; left: 18%;}
	
	/*div#logo h1 a img.praeschrift {display: block; max-width: 64%; height: auto; position: absolute; top: 50px; left: 18%;}*/
	
	#navigation ul  {
		    position:relative;
		    top: 180px;
		    left: 0;}
	
	/*#navigation ul li.close a.beenden  {
		   	position: absolute;
		   	top: -30px;
		   	left: -30%;}
	
	#einfuehrung ul.uebersicht li:first-child a {
		    display: inline;
		    position: fixed;
		    top: 100px;
		    left: 0;}*/
	
	div#seiteninhalt ul.preileipu li.einfschliessen a {
	 		display: inline;
		    position: fixed;
		    top: 100px;
		    left: 0;}
	
	#kontaktinhalt h2#inhalt {margin-bottom: 40px;
		margin-left: 0;
   		font-size: 1.5em;}
	
	div#kontaktinhalt a#telef {margin-left: 24%;}
	
	/*a.player span.langtext {font-size: 2.0em; color: #333; position: absolute; left: 25%; top: 50px; width: 180px; padding-right: 20px;}*/
	
	a.player span.langtext2 {font-size: 1.9em; color: #333; position: absolute; left: 37%; top: 42px; min-width: 180px; padding-right: 20px;}		
}

@media screen and (max-width: 365px) {
	
	div#logo h1 a span.varanz {margin-left: 2%;}
	div#logo p#navilink a#dreistrich {position: absolute; top: 120px; right: 4%;}
	div#logo p#internenavi a#senkrechtstriche {position: absolute; top: 120px; left: 4%;}
	
	div#logo h1 a img.praeschrift {display: block; max-width: 64%; height: auto; position: absolute; top: 75px; left: 17%;}
	
	#kontaktinhalt h2#inhalt {margin-bottom: 40px;
		   font-size: 1.2em;}
		   
	#kontaktinhalt a.uelinks {margin-left: 10%;}
	
}

@media screen and (max-width: 340px) {
	
	div#logo h1 a img.praeschrift {display: block; max-width: 64%; height: auto; position: absolute; top: 85px; left: 17%;}
	
	div#logo h1 a span.varanz {font-size: 1.3em; margin-left: 2%; text-align: center; padding: 5px 0;}
	/*div#logo h1 a span.mixi {display: block; text-align: center;}*/

}