/* allgemeines Angaben */


body { /* DH */
  background-color:#333333; 	/* hintergrund, d. h. Rand li und re */
  color:#000000; 		/* schrift schwarz */
  font-family: arial, verdana, sans-serif;
  font-size: 1.2em;
  line-height:1.7em;
  }

* { margin:0;
    padding:0;
}
html, body {
    height: 100%;
}
/* Seite, d. h. Rahmen fuer alle folgenden divs mit weissem Hintergrund, 1000 pixel breit */

#webseite {
  min-height: 100%;
  background-color:#FFFFFF;
  margin: 0 auto;
  max-width: 1000px;
 }

/* oberste Anordnung, 2 Spalten nebeneinander, mit Hintergrundbild (dies kommt weiter unten) */

#header {
  float: left;
  width: 100%;
  background-color:#FFFFFF;
 }

#headerlinks {
  top: 0;
  float: left;
  width: 16%;
}

#headerrechts {
  float: left;
  border-left: 2px solid #FF0000;     /* die rechte Spalte hat links einen roten Rand - desahlb Prozente kleiner 100% */
  width: 83%;
 }

/* mittlere (falls mal noch fusszeile kommt) Anordnung, 2-3 Spalten nebeneinander, 3 nur fuer Startseite */

#mitte {
  position: relative;
  float: left;
  clear:both;      /* damit die oberen beiden Spalten gleiche Laenge bekommen */
  width: 100%;
  background-color:#FFFFFF;
 }

#mittelinks {
  position: absolute;
  top: 0;
  float: left;
  width: 16%;
 }

#mitterechts {
  float: left;
  border-left: 2px solid #FF0000;
  width: 84%;
  margin-left: 16%;
 }

#mittemitte {			/*nur fuer Startseite benoetigt, dort 3 Spalten */
  float: left;
  border-left: 2px solid #FF0000;
  width: 68%;
  margin-left: 16%;
 }

#mitteganzrechts {		/*nur fuer Startseite benoetigt, dort 3 Spalten */
  float: left;
  border-left: 2px solid #FF0000;
  width: 15%;
 }

#mittemitte2 {			/*nur fuer Startseite benoetigt, dort 3 Spalten */
  float: left;
  border-left: 2px solid #FF0000;
  width: 53%;
  margin-left: 16%;
 }

#mitteganzrechts2 {		/*nur fuer Startseite benoetigt, dort 3 Spalten */
  float: left;
  border-left: 2px solid #FF0000;
  width: 30%;
 }

/* CSS für den Footer mit 3 Spalten */
footer {
  background-color: #f2f2f2;
  padding: 30px 20px;
  max-width: 95%;    		/*damit nicht über rechten rand rausgeht */
}

.sitemap-container {
  display: flex;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
}

.column {
  flex: 1;
  padding: 0 10px;
}

.column ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.column ul li {
  margin-bottom: 8px;
}

.column ul li a {
  text-decoration: none;
  color: #555;
}

.column ul li a:hover {
  text-decoration: underline;
} 
/* ENDE CSS für den Footer mit 3 Spalten */

/* def alle Hintergrundbilder in den Koepfen */

#headerrechts.kopf1{
	background-image: url(images/pinselstrich1.gif);  /* Startseite  Gleichung aus Anzeige */
	background-repeat: no-repeat;
 	background-size: 100% auto;
	background-position: top center;
	margin:auto;
  }
#headerrechts.kopf2{
	background-image: url(images/pinselstrich1-gespiegelt.gif);  /* Coaching - auch lp */
	background-repeat: no-repeat;
 	background-size: 100% auto;
	background-position: top center;
	margin:auto;
  }
#headerrechts.kopf3{
	background-image: url(images/pinselstrich2-gespiegeltV.jpg);  /* Profil*/
	background-repeat: no-repeat;
 	background-size: 100% auto;
	background-position: top center;
	margin:auto;
  }
#headerrechts.kopf4{
	background-image: url(images/pinselstrich-2-gespiegelt-rot-neu.jpg);  /* Fehlerseite */
	background-repeat: no-repeat;
 	background-size: 100% auto;
	background-position: top center;
	margin:auto;
  }
#headerrechts.kopf5{
	background-image: url(images/pinselstrich3.gif);  /*  Training*/
	background-repeat: no-repeat;
 	background-size: 100% auto;
	background-position: top center;
	margin:auto;
  }
#headerrechts.kopf6{
	background-image: url(images/pinselstrich4.jpg);  /* Mediation - auch lp */
	background-repeat: no-repeat;
 	background-size: 100% auto;
	background-position: top center;
	margin:auto;
  }
#headerrechts.kopf7{
	background-image: url(images/pinselstrich5-gespiegelt.gif);  /* Projekte */
	background-repeat: no-repeat;
 	background-size: 100% auto;
	background-position: top center;
	margin:auto;
  }
#headerrechts.kopf8{
	background-image: url(images/pinselstrich6.jpg);  /* kontakt */
	background-repeat: no-repeat;
 	background-size: 100% auto;
	background-position: top center;
	margin:auto;
  }
#headerrechts.kopf9{
	background-image: url(images/pinselstrich8-gespiegelt.gif); /* impressum */
	background-repeat: no-repeat;
 	background-size: 100% auto;
	background-position: top center;
	margin:auto;
  }
#headerrechts.kopf10{
	background-image: url(images/pinselstrich7.gif);   /* hirnbrizzeln-Seite */
	background-repeat: no-repeat;
 	background-size: 100% auto;
	background-position: top center;
	margin:auto;
  }
#headerrechts.kopf11{
	background-image: url(images/kopf11.jpg);   /* buchtipps */
	background-repeat: no-repeat;
 	background-size: 100% auto;
	background-position: top center;
	margin:auto;
  }

/* und hier kommen die Farben und Reaktionen der Links */
	
  a:link{color:#000000;
	text-decoration:none;
  }
  a:visited{color:#000000;
	text-decoration:none;
  }
  a:active{color:#666666;
	text-decoration:none;
  }
  a:hover{color:#666666;
	text-decoration:none;
  }
/*ausnahmen rote links*/
a.ex1:link, a.ex1:visited, a.ex1:active, a.ex1:hover {color:#FF0000;
	text-decoration:none;
  }
/*ausnahmen weisse links (quasi button kontaktdaten)*/
a.ex2:link, a.ex2:visited, a.ex2:active, a.ex2:hover {color:#FFFFFF;
	text-decoration:none;
	background-color: #FF0000;
	border: medium solid white;
	border-radius: 0.4em 0.4em 0.4em 0.4em;
	color: white; 		/* schrift weiss */
	font-size: 100%;   
  	line-height: 1.5;
  }
#nachricht {		/* nachricht aus javascript*/
	padding-left:4%;
  }
#nachricht a{color:#FF0000;
	text-decoration:underline;
  }
#nachricht2 {		/* nachricht aus javascript bleibt schwarz*/
	padding-left:4%;
  }
#nachricht2 a{
	text-decoration:underline;
  }
#nachrichtnavdesktop {		/* nachricht aus javascript statt menue links rechtsbuendig*/
	padding-right: 16%; 
	text-align: right;
	text-decoration:underline;
  }

/*alles fürs Hinweis Kontakt Sie haben interesse?*/
  #interessenbox {
  background-color:#FF0000; 	/* hintergrund,rot */
  padding: 30px 20px;
  max-width: 95%;    		/*damit nicht über rechten rand rausgeht */
}
.interesse {
  	color:#FFFFFF; 		/* schrift weiss */
  	font-size: 1.2em;
   	font-weight: bold; 
	text-align: center;
	line-height:1.8em;
  	  }
/*alles fürs Akkordeon auf und zuklappen*/
  details {
    margin-bottom: 10px;
  /*  border: 1px solid #ccc;*/
    padding-left: 4%;
    border-radius: 4px;
  }

  summary {
    cursor: pointer;
   position: relative;  
   }

summary::marker, summary::-webkit-details-marker {
   color: transparent;
}

summary::after {
   content:  "+"; 
   position: absolute;
   font-weight: bold; 
   left: 0.5em;
   top: .0em;
   transition: all 0.5s;
} 

details[open] > summary::after {
 color: red;
 transform: translate(5px,0) rotate(45deg);
}

video {			/* macht alle videos responsiv! */
  max-width: 100%;
  height: auto;
}

.bild {			/* macht alle img mit class="bild responsiv! */
    width: 100%;         
    height: auto;
}
.bild-flyer {			/* macht alle img mit class="bild responsiv! */
	padding-left: 20%;
	width: 55%;         
	height: auto;
}
  .bild_rechts {float: right;  /* verwendet fuer mediationsbild */
	padding-left: 3%;
	width: 55%;         
	border: none;
        height: auto;
  }
  .bild_links {float: left;  /* verwendet fuer doris helzle in profilseite */
	padding-left: 7%;
	padding-right: 3%;
	width: 25%;         
        height: auto;
 	border: none;
 }
  .bild_links_lp {float: left;  /* verwendet fuer doris helzle in profilseite */
	padding-left: 0%;
	padding-right: 3%;
	width: 25%;         
        height: auto;
 	border: none;
 }
  .bild_re_dh {float: right;  /* verwendet fuer doris helzle in startseite */
	padding-left: 3%;
	padding-right: 3%;
	width: 25%;         
        height: auto;
	border: none;
  }
  .bild_li_dh {float: left;  /* verwendet fuer doris helzle in startseite */
	padding-left: 0%;
	padding-right: 3%;
	width: 25%;         
        height: auto;
	border: none;
  }
  .bild_links_postkarte {float: left;  /* verwendet fuer postkarte in kontaktseite */
	padding-right: 5%;
	padding-left: 6%;
	width: 13%;         
        height: auto;
	border: none;
  }
  .bild_fremdlogos {float: left;  /* verwendet fuer logo w3c, gabal, qualitaetssiegel seite impressum */
	padding-right: 5%;
	padding-left: 6%;
	width: 13%;         
	border: none;
        height: auto;
  }

  .bild_visitenkarte {float: left;  /* verwendet fuer visitenkarte impressum */
	padding-right: 5%;
	padding-left: 6%;
	width: 50%;         
	border: none;
        height: auto;
  }
  .buchbild {float: left;		/* nur benoetigt, falls 3-D-Bild mit drin */
	padding: 0% 5% 2% 0%; 
	width: 45%;         
        height: auto;
	border: none;
  }

.pfeil {border: none;
  }

/* Angaben fuer die linke Spalte, alles rechtsbuendig  */
 p.navdesktop {			/* damit menue nicht mehr h3 ist*/
	padding-right: 16%; 
	text-align: right;
  }
  .grauhinterlegt {
	background-color:#F5F5F5; 
	line-height:1.4em;
 	max-width: 93%;
  	padding: 20px 20px 20px 4%;
  }
  .rechtsbuendig {		/* fuer li spalte alles rechtsbuendig */
      text-align:right;
      padding-right: 4%;
  }
  .kleinrebue {font-size:0.7em;		/* kleine schrift rechtsbuendig, Testimonials linke Seite im Kopf */
  	line-height:1.6em;
	text-align:right;
        padding: 20% 4% 0% 10%;
  }
  .imprrebue {font-size:0.7em;	/* impresssum im menue klein und rechtsbuendig */
  	line-height:1.6em;
	text-align:right;
        padding-right: 4%;        
	padding-top: 15%;
  }
  .untermenu {font-size:0.7em;	/* untermenu im menue klein und rechtsbuendig */
  	line-height:2em;
	text-align:right;
        padding-right: 4%;
	font-weight: bold;
  }

/* Angaben fuer die rechte Spalte und fuer Pfeile ganz unten, alles linksbuendig  */

  .linksbuendig {		/* fuer pfeile ganz unten alles linksbuendig - kann evt. raus*/
      text-align:left;
      padding-left: 4%;
  }
  .kleinlibue {
	font-size:0.7em;   /*Schrift linksbuendig an Linie rechte Seite auf Startseite */
  	line-height:1.6em;
        text-align:left;
        padding: 0% 2% 2% 6%;
  }

/* ueberschrift je Seite, unterhalb pinselstrich, Abstand oben gross statt mehrere Zeilenumbrueche */

 .unterueberschrift { 
	padding: 2% 2% 0% 4%;
	/*font-family: cursive;  Schreibschrift - unterueberschriften in rot - wegen safari mobil rausgenommen */
	font-size: 100%;
	color: #FF0000;
 }
  .ueberschrift { 
	padding: 40% 2% 0% 4%;
	/*font-family: cursive;  Schreibschrift - wie zwischenueberschriften - wegen safari mobil rausgenommen */
	font-size: 110%;
 } 
 
/* ueberschrift und Navigation Buchseite, Sonderdesign */

 .ueberschriftbuchseite { 
	padding: 0% 2% 0% 4%;
	/*font-family: cursive;  Schreibschrift - wie zwischenueberschriften - wegen safari mobil rausgenommen */
	font-size: 110%;
 } 
#navigationsonder { 
	padding: 98% 2% 0% 4%;      /* Menu Abstand Sonderseite Buch */
 } 

#referenzliste {		/* liste referenzen */
	font-size: 90%;
	list-style-type: none;
}
.reftext {			/* liste referenzen, testimonials eingerueckt */
	padding: 0% 2% 0% 4%;
}        

#psychologikliste {		/* liste psychologik */
	font-size: 90%;
	list-style-type: none;
}
.pltext {			/* liste psychologik, Weisheiten eingerueckt */
	padding: 0% 2% 0% 4%;
}        

/* diverse schrift-definitionen, abstaende etc. */

strong { font-weight: normal; }

h3 { padding: 4% 2% 0% 4% } 

p { padding: 2% 2% 0% 4% }

ul { padding: 0% 2% 0% 8% }

  .klein {font-size:90%;		/*eingerueckt, kleine schrift einfuegungen im text, z. B. bei Seite Training */
	line-height:1.7em;
	padding: 0% 2% 0% 10%;
  }
  .klein2 {font-size:90%;		/*kleine schrift einfuegungen im text, z. B. bei Seite Training */
	line-height:1.7em;
	padding: 0% 2% 0% 4%;
  }

/* p.logo fuers logo brain meets emotion verwendet, linke Spalte oben rechts  und mobil auch oben rechts, aber dann linksbuendig */

  p.logo {color: #FF0000;
      font-size: 1.5em;
      font-weight: bold;
      text-align:right;    
      line-height:1.1em;
      padding: 30% 4% 0 0;
  }
  p.logomobil {color: #FF0000;
      font-size: 1.2em;
      font-weight: bold;
      text-align:left;    
      line-height:1.1em;
      padding: 5% 0% 0 5%;
  }

/* coaching.mediation.projektberatung in fusszeile und ganz oben*/
  p.kopffuss {	
	padding: 0% 5% 0% 0%;
	color: #FF0000;
	text-align: right;
	font-weight: bold;
      	font-size: 90%;
  }
  .schreibschrift {
	/*font-family: cursive;  ueberschriften tw. - wegen safari mobil rausgenommen */
	color: #FF0000;
  }
/* folgendes, damit telefonnummer auf desktop nicht als link angezeigt wird */
a[href^="tel"] {
  cursor: default;
}
@media only screen and (max-width: 480px) {
  a[href^="tel"] {
    cursor: pointer;
    color: black;
  }
}
span {display:none} /* damit wird E-Mail-Adresse anders angezeigt als im Quelltext ausgewiesen - Achtung: span dadurch nicht als Mittel fuer andere Dinge verwendbar!!!*/

/* jetzt wird es "sehr" ;-) responsiv - falls andere css fuer IE, die oberen Angaben vermutlich alle noetig, aber in em statt in % */

#seminarmobil {
	float: left;
	width: 66%;
}
#hirnbrizzelnmobil {
	float: left;
	width: 33%;
	border-left: 1px solid red;
}

@media only screen and ( min-width: 950px ) {
    /* breites Browserfenster */
    #indexmobil {display: none;}
    #bmemobil {display: none;}
}
@media only screen and ( max-width: 600px ) {
    /* mobile Geraete */
    body {  font-size: 90%;}				
    #headerlinks {display: none;}           /* linke spalte entfaellt bei smart phones */
    #headerrechts{float: right;width: 99%;}   /* dafuer ist die rechte  Spalte komplett vorhanden */
    #mittelinks {display: none;}           /* linke spalte entfaellt bei smart phones */
    #mitterechts{float: right;width: 99%;}   /* dafuer ist die rechte  Spalte komplett vorhanden */
    #mitteganzrechts {display: none;}           /* rechte spalte entfaellt bei smart phones */
    #mittemitte{float: right;width: 99%;}   /* dafuer ist die mittlere  Spalte komplett vorhanden */
    #mitteganzrechts2 {display: none;}           /* rechte spalte entfaellt bei smart phones */
    #mittemitte2{float: right;width: 99%;}   /* dafuer ist die mittlere  Spalte komplett vorhanden */
   #indexmobil{ /* seminare und hirnbrizzeln in Mitte Index anzeigen */
	float: right;
	width: 99%;}   
}

@media only screen and ( min-width:600px ) and ( max-width: 950px ) {
    /* Tablets und mittlere Bildschirme */  /* evt. weglassen, nur gross und klein???, z. B. Grenze 600 dann auch toggle menu aendern!!! */
    body {  font-size: 90%;}
    #indexmobil {display: none;}
    #bmemobil {display: none;}
}


/* toggle menu fuer mobile Geraete*/

#steuerung li {
	list-style: none;
	float: left;
}
#steuerung a {
	display: none;
	height: 100%;
	width: 100%;
	padding: 0.5em;
	text-decoration: none;
	color: #FF0000;
	background-color: white;
}
#steuerung ul { padding: 0% 0% 0% 0% }	 /* liste fuer mobil-menue ganze Breite */
.menue-button {
	display: none;
}		

#steuerung {
	float: right;
}
#steuerung a:hover {
	color: #FF0000;
}	
/* CSS erweitern um MENue-Button und entsprechende Steuerung */
/*	Menue-Button oben links einblenden bei kleiner als 600px */
@media only screen and (max-width:600px) {
	#bmemobil {                   /*damit erscheint bme als logo auf mobilen Geraeten auch evt. wieder raus*/
		position: absolute;
		top: 0;
		left: 5px;	
	}        
	#nav-menue {			/*damit ist das Menue ganz oben und die Titelzeile wird ueberschrieben, wenn das Menue aufgeht*/
		position: absolute;
		top:0;
	}

	.menue-button {
		display: block;
		position: fixed;
		left: 5px;
		top: 120px;		/*geändert von 50px auf 180px zur besseren sichtbarkeit*/
		padding: 0.5em;
		color: white;
		cursor: pointer;
		text-decoration: none;
	}	

	#steuerung {
		float: left;
		width: 100%;
		display: none;
	}

	#steuerung a {
		display: block;
		height: 100%;
		width: 100%;
		padding: 0.8em;
		text-decoration: none;
		font-weight: bold;
		color: black;
		background-color: white;
		text-align: left;
		padding-left: 35%;
	}
	#mobiluntermenu  a {
		padding-left: 45%;
	}
	#mobiluntermenu2  a {
		padding-left: 45%;
	}	
	#mobiluntermenu3  a {
		padding-left: 45%;
	}	
	#mobiluntermenu4  a {
		padding-left: 45%;
	}	
	#mobiluntermenu5  a {
		padding-left: 45%;
	}	
	
	#steuerung li {
		width: 100%;
		border-bottom: 1px solid #FF0000;
	}	

}
/* die Magie, um die Steuerung einzublenden (auch auf mobile Devices) */
#nav-menue:target #steuerung {
	display: block;
}
/* ausblenden des Menue-Buttons zum oeffnen - somit wird der zum Schliessen sichtbar */
#nav-menue:target .menue-button-beschr-open {
	display: none ; 
}