/* Aktuellste Ãnderungen u.a. body Zeile 178: background-color: #7EC130; - Hintergrundfarbe bis 2025-10-11, jetzt ab 2025-10-30 : #6ebb15 (und header) */
/* grüner Balken hg_ueber 2025-10-30 aktuellste Farbe: #c0e05d   -  Zeile 223 */
/* header getauscht: 2025-10-30: Ab Zeile 274: mit unterschiedlichen Viewports / Breakpoints!!! 
Logo Ernaehrungstherapie Linsengericht_Header_721.jpg ab 2025-1030 */ 
/* Zeile 147 TOP und Top hover ggf. noch ändern!!! */ /* Zeile 178: text-align:justify; /* hinzugefügt global - 2025-10-30 */

/* **************** Noch alle BREAKPOINTS Apfelbild tauschen!!! ********** */


@charset "utf-8";
/* CSS Document */

/* Normalisierungen - Anmerkung: Manche Autoren sehen sich dadurch veranlasst, Teile der Elemente zuerst zu normalisieren. 
Jedoch ist hier Vorsicht geboten. Ganz besonders Formular-Elemente sollte man nicht blindw�tig normalisieren. 
Beispielsweise wird die Einrückung von Listen durch die Browser unterschiedlich gehandhabt. Die einen realisieren dies �ber 
Innenabst�nde des ul- bzw. ol-Elementes, die anderen �ber Au�enabst�nde der li. Deshalb ist die Normalisierung vor allem 
f�r folgende Elemente verbreitet: ul, ol, li, dl, dt, dd.
Normalisierung sollte vor allen anderen Regeln betrieben werden. */ 
ul, ol, li, dl, dt, dd {
  display: block;
  padding: 0;
  margin: 0;
}
 
li {
  display: list-item; 
  margin-left: 2em;
}

/* AB HIER DIE NAVI */ 
nav ul { 
		text-align: left;
	/* width: 100%; */ 
	/* padding: 0.8em; */
	/* border: 1px solid black; */
	/* background-color: silver; */
	/* opacity: 1.0; */
}

nav li { 
	display: inline-block;
	list-style: none;
	margin: 0.2em; /* Hier noch minimlaen left- und right margin anlegen */
	padding: 0em 0.2em; /* Hier noch ein wenig padding anlegen */
	/* border: 1x solid gray; === Border ausgeblendet */
	/* background-color: #eee; === BG ausgeblendet */
	/* opacity: 0.9; */ 
	}


@media only screen and (max-width: 780px) {
      	nav li {
		display: inline-block;
        width: 45%;
		margin-bottom: 0.8em; /* ca. 23.10.2016 - margin eingefügt, damit es unter Tablet und Smartphone besser anklickbar ist! */
		
      }
    }
@media only screen and (max-width : 480px) {
      	nav li {
	  	display: inline-block;
		/* max-width: 15em; */
		width: 90%;
		margin-bottom: 0.8em;
    }
  }
@media only screen and (max-width : 340px) {
      	nav li {
	  	display: block;
		/* max-width: 15em; */
		width: 88%;
    }
  }


nav a.menü1, nav span.menü1 { /* ANGEPASST, damit es einzigartig ist */
	display: block;
    min-width: 6em;
	padding: 0.2em;
	text-align: center;
	text-decoration: none;
	font-weight: bold;
	color: #F8DB94;
	background-color: RED;   /* VORAB geändert 2025-10-11 **** */
	/* opacity: 1.0;  */
	border-radius: 0.5em 0.5em 0.5em; 
}

nav a:focus.menü1,
nav a:hover.menü1,
nav a:active.menü1 {
	color: brown;
	background-color: #F8DB94;
}

/* END NAVI */


/* NAVI2 für Unternavigation */ 

nav2 li { display: inline; list-style: none; 
	margin: 0.4em; /* Hier noch minimlaen left- und right margin anlegen */
	padding: 0.2em; /* Hier noch ein wenig padding anlegen */ }

nav2 a.menü1, nav span.menü1 { /* ANGEPASST, damit es einzigartig ist */
	display: inline-block;
    min-width: 6em;
	padding: 0.2em;
	margin-bottom: 0.5em;
	text-align: center;
	text-decoration: none;
	font-weight: bold;
	color: #F8DB94;
	background-color: brown;
	/* opacity: 1.0;  */
	border-radius: 0.5em 0.5em 0.5em; 
}

nav2 a:focus.menü1,
nav2 a:hover.menü1,
nav2 a:active.menü1 {
	color: brown;
	background-color: #F8DB94;
}

/* END NAVI 2 */



/* INTERNE oder weitere Links die nicht in der Navi sind - auch mit Anker - Anker mit "id" und nicht mehr mit "name"!!! */ 
a.int {
	padding: 0 0.2em 0.1em 0.2em;
	text-decoration: none;
	font-weight: bold;
	color: #F8DB94;
	background-color: red; /* 2025-10-11 ********* geändert */
	/* opacity: 1.0;  */
	border-radius: 0.5em 0.5em 0.5em;
}
a.int:focus,
a.int:hover,
a.int:active {
	color: brown;
	background-color: #F8DB94;
	text-decoration: underline dotted; /* Hinzugefügt am 23.10.2016 */
}


/* Anker nach oben */ 
a.top {
	padding: 0.2em; 
	text-decoration: none;
	font-weight: normal;
	color: brown;
	background-color: #F8DB94;
	/* opacity: 0.5; */
	border-radius: 0.5em 0.5em 0.5em;
}

a.top:hover {
	color: #F8DB94;
	border-radius: 0.5em 0.5em 0.5em;
	background-color: brown;
}

/*  } a[href^="#top"]:before{ content:'↑'; display: inline-block; color:#e04c32; font-size: 1.5em; }*/ 

html {
	 margin: 0; 
	 padding: 0;
	/* max-width: 60em; */ 
	/* font: normal 1em /* Helvetica, Arial, sans-serif;  /* GEÄNDERT 2025-10-30 *** */
	font: Open Sans, Verdana, Arial, Helvetica, sans-serif;
	}
	
body {
	margin: 10px auto;
	max-width: 60em;
	font: normal 1em Open Sans, Verdana, Arial, Helvetica, sans-serif;   /* GEÄNDERT 2025-10-30 *** */
	color: #000000; /* generelle Schriftfarbe */
	text-align:justify; /* hinzugefügt global - 2025-10-30 */
	background-color: #6ebb15;    /* VORHER #CBD977; JETZT: 2025-10-11 : #7EC130, JETZT ab 2025-10-30 s. VORNE!!! */
 	background-size: 120%;
	background-repeat: no-repeat;
    background-position: center top 16em;
}
.60em { width: 60em; } 

h1,h2,h3,h4,p { margin-top: 0em; } /* hinzugefügt, weil vorher die Überschriften zu weit weg waren in den Bereichen */
/* some CLASSES */
/* h3 { font-color: #ff00ff; } /* 2025 */
/* h2 { font-color: #00dd00; } /* 2025 */
/* h1 { color: white; } /* 2025 */

/* ***   h1 { text-shadow: 2px 3px #000000, 3px 3px grey; } /* könnte man auch als class anlegen */ /* ALT shadow beige; jetzt 2025 weiss bzw- schwarz */
h1 { text-shadow: 2px 3px #F8DB94, 3px 3px grey; } /* könnte man auch als class anlegen */ /* shadow beige */
/* AUSGEBELNDET h2 { text-shadow: 1px 1px #000000, 1px 1px grey; } /* könnte man auch als class anlegen */ /* shadow beige - Schriftfarbe vorher schwarz: #F8DB94 - jetzt schwarz */


p { line-height: 1.3em; }
.justify
.lineheight { line-height: 1.8em; } 

/* .slideshow { margin-top: 1em; }       /* nur um Abstand zur Slideshow zu bekommen - aktuell ohne SLIDESHOW 2025 *** */

.braun { color: brown; } /* geändert 2025 */


.white { color: white; } /* geändert 2025 */
.hellgruen { color: #7cde16; } /* geändert 2025 */
.cremegelb { color: #fdd367; } /* geändert 2025 */



/* .hg_ueber { background-color: orange; margin: -10px; margin-bottom: 5px; padding: 10px;
border-radius: 0.3em 0.3em 0em 0em; }  *** 2025- Farbe geändert */ 

/* .hg_ueber { background-color: #D1EE23; margin: -10px; margin-bottom: 5px; padding: 10px;
border-radius: 0.3em 0.3em 0em 0em; } /* hellgrün 2025 */ 
/* .hg_ueber { background-color: #CBD977; margin: -10px; margin-bottom: 5px; padding: 10px;
border-radius: 0.3em 0.3em 0em 0em; } /* etwas dunkleres hellgrün 2025 */
/* .hg_ueber { background-color: #86A51B; margin: -10px; margin-bottom: 5px; padding: 10px;
border-radius: 0.3em 0.3em 0em 0em; } /* etwas satteres, dunkleres hellgrün 2025 */

/* ALTERNATIV VORHER: .hg_ueber { background-color: #7EC130; margin: -10px; margin-bottom: 5px; padding: 10px;
border-radius: 0.3em 0.3em 0em 0em; } /* GEÃNDERT *** etwas helleres grün 2025 ---    BIS 2025-10-11 */ 

.hg_ueber { background-color: #C0e05d; margin: -10px; margin-bottom: 5px; padding: 10px;
border-radius: 0.3em 0.3em 0em 0em; } /* GEÃNDERT *** etwas helleres grün AB 2025-10-30 #3 
in "+Vorschau_ mit Header 7.2.1_Webseite grün #3.jpg */





.sp_ueber { background-color: orange; margin: 0px; margin-bottom: 5px; margin-top: -9px; padding: 10px; 
border-radius: 0.3em 0.3em 0.3em 0.3em; }
.sp_orange { color: orange; }
.sp_hg_orange { background-color: orange; padding: 0.5em; border-radius: 0.3em 0.3em 0.3em 0.3em;}
.sp_orange_underline { color: orange; border-bottom: 0.1em solid orange;} /*sp-orange-underline - Bisher nur in GALERIE und Startseite!*/

/* TESTBOX nur mal so mit einer Hintergrundfarbe */
	.box {
  	display: inline-block;
  	width: 100%;
	/* margin: -10px; margin-bottom: 5px; */ margin-top: -29px;
  	/* height: 100px; */
  	/* background: #ebf5d7; /* hellgrün  ___ OHNE BACKGROUND */
  	border-radius: 0.5em 0.5em 0.5em 0.5em;
	/* padding: 0.5em; */
  	margin: 0em;
  }

	.box_hg {
  	display: inline-block;
  	width: 96%;
	/* margin-top: 0px; */
  	/* height: 100px; */
  	background: #ebf5d7; /* hellgrün */
  	border-radius: 0.5em 0.5em 0.5em 0.5em;
	padding: 0.5em;
  	margin: 0em;
  }
.box_hg_blau {
  	display: inline-block;
  	width: 96%;
	/* margin-top: 0px; */
  	/* height: 100px; */
  	background: #e4ebf2; /* hellblau */
  	border-radius: 0.5em 0.5em 0.5em 0.5em;
	padding: 0.5em;
  	margin: 0em;
  }

main {
	display: block;
	}



header,
nav,
article,
section,
aside,
footer { 
	border-radius: 0.5em 0.5em;
	border: 2px solid; /* von 1 auf 2 geändert 2025-10 */
	padding: 10px;
	margin: 10px;
}


header {
	/* background: #6ebb15; /* angepasst auf body nun identisch 2025-10-30  - nur für größten viewport 7.2.3 Logo verwendet 2025-11-03 */
	border-color: #ffffff;
/*	background-image: url(images/header2025/NEW___Header_7.2.3_dklb-schwarz_26220D_EBRIMA.jpg); */
/*	background-image: url(images/header2025/NEW0___Header_7.2.3_dklb-schwarz_26220D_EBRIMA.jpg); */
/*	background-image: url(images/header2025/new02_etwas_heller_als_0.jpg); */
	background-image: url(../images/header2025/Logo_Ernaehrungstherapie_Engelaender_Linsengericht.jpg);

	
	
	
	background-repeat: no-repeat;
     background-color: #CBD977;
	background-position: center center;
	min-height: 30em; /* vorher 21.5 em - testweise auf 23, jetzt auf 32 */
	background-size: 100% auto; 
  	} 



/* ab hier: Ansichtsgrößen */
/* jetzt hinzugefügt */

@media only screen and (max-width: 810px) { /* vorher 800 - jetzt 810 */
      header { 
	  background-image: url(../images/header2025/Logo_Ernaehrungstherapie_Engelaender_Linsengericht.jpg);
	  background-position: center top;
	  background-size: 100%;
	  min-height: 26em;   /* vorher 13 em  - jetzt auf 26 */     
      }
    }
  /* ENDE hinzugefügt ***/




@media only screen and (max-width: 680px) { /* vorher  */
      header { 
	  background-image: url(../images/header2025/NEW_Header_7.2.1_Ernaehrungstherapie_Engelaender_Linsengericht.jpg);
 	  background-position: center top;
	  background-size: 100%;
	  min-height: 22em;   /* vorher 13 em  testweise auf 18 - jetzt auf 15 */     
      }
    }
    
    
/* HINZUGEFÜGT 2025 *** */    
@media only screen and (max-width: 580px) { 
      header { 
	  background-image: url(../images/header2025/Logo_Ernaehrungstherapie_Engelaender_Linsengericht.jpg);
	  background-position: center top;
	  background-size: 100%;
	  min-height: 18em;   /* vorher 13 em  testweise auf 18 - jetzt auf 15 */     
      }
    }
/* ENDE HINZUGEFÃœGT 2025 *** */    
    
    
    
    
    @media only screen and (max-width : 480px) {
      header { 
	  background-image: url(../images/header2025/Logo_Ernaehrungstherapie_Engelaender_Linsengericht.jpg);
	  background-position: center top;
	  background-size: 100%; 
	  min-height: 16em; /* vorher 8 em testweise auf 16 jetzt auf 12 */   
	  }
 	}





nav { 
	margin-top: -3em;
	border: 0px;
	padding: 0px;
	background: ;
	/* border-color: #000000; */
	/* opacity: 0.5; */
	}
@media only screen and (max-width: 500px) {
      nav {
        /* display: inline-block; */
		margin-top: -1.5em;
		width: 100%;
      }
    }
    @media only screen and (max-width : 480px) {
      nav {
	  margin-top: -2em;
	  /* display: inline-block; */
	  width: 100%;
    }
  }
  
    
.fl_right50 {float:right; width: 50%; margin:0em 0em 2em 2em; /* margin (Reihenfolge bei 4-fach Nennung: oben, rechts, unten, links */
	min-width: 240px;
} /*img - Bisher nur in der Startseite und GALERIE!*/

.fl_right25 {float:right; width: 25%; margin:0em 0em 2em 2em; /* margin (Reihenfolge bei 4-fach Nennung: oben, rechts, unten, links */
	min-width: 240px;
} /*img - Bisher nur in der Startseite und GALERIE!*/



.clearfix:after {
  content: "";
  display: table;
  clear: both;
}




/* Transparenz für article oder section usw  DIESE HIER IST AKTUELL IN ANWENDUNG */ 
/* .transparent { 
	background: rgba(255, 202, 37, 0.1) ;
	} */ 

@keyframes pulse {
  0% {
    background-color: rgba(255, 202, 37, 0);
	border: 1px rgba(229, 231, 235, 0) solid;
  }
  100% {
    background-color: rgba(255, 202, 37, 1);
	border: 1px rgba(229, 231, 235, 1) solid;
  } 
}


/* Transparenz für article oder section usw  DIESE HIER IST NICHT IN ANWENDUNG !!!*/ 
/* .transparent { 
	background: rgba(255, 202, 37, 0.1) ;
	}  
.ch_transp {	
		-webkit-animation: pulse 11s ease;
		animation: pulse 11s ease;
		}
@keyframes pulse {
  0% {
    background-color: rgba(255, 202, 37, 0);
	border: 1px rgba(229, 231, 235, 0) solid;
  }
  70% {
    background-color: rgba(255, 202, 37, 0);
	border: 1px rgba(229, 231, 235, 0) solid;
  }
  100% {
    background-color: rgba(255, 202, 37, 1);
	border: 1px rgba(229, 231, 235, 1) solid;
  } 
}
*/ 

/* Ende der Transitions für Startseite */




section {
	background: #F1F3F4;
	border-color: slateblue;
}


article {
	background: #f8f8f8;
	border-color: white;
}

.spalte { margin: 10px;} /* kam / kommt das irgendwo zum Tragen? */

/*  SECTIONS  */
.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}


/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }

/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }




/*  GRID OF TWO  */
.span_2_of_2 {
	width: 100%;
}
.span_1_of_2 {
	width: 49.2%;
}

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
	.col { 
		margin: 1% 0 1% 0%;
	}
}

@media only screen and (max-width: 620px) {
	.span_2_of_2, .span_1_of_2 { width: 100%; }
}




/*  GRID OF THREE  */
.span_3_of_3 { width: 100%; }
.span_2_of_3 { width: 66.13%; }
.span_1_of_3 { width: 32.26%; }

/*  GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 620px) {
	.col {  margin: 1% 0 1% 0%; }
	.span_3_of_3, .span_2_of_3, .span_1_of_3 { width: 100%; }
}





aside {
	background: #ebf5d7;
	border-color: #8db243;
}

footer {
	background: #e4ebf2;
	border-color: #8a9da8;
}

/* !!! Achtung: IFRAME und follow dürfte kaum Anwendung finden !!! */
iframe {
  max-width: 100%; 
}

.embed-container {
  position: relative; 
  padding-bottom: 56.25%; /* ratio 16x9 */
  height: 0; 
  overflow: hidden; 
  width: 100%;
  height: auto;
}

.embed-container iframe {
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
}
/* ratio 4x3 */
.embed-container.ratio4x3 {
  padding-bottom: 75%;
}
/* END EMBED-Container /IFRAME */


/* css für Lightbox  */
.lbxxx { padding-right:10px; margin-bottom:20px; width: 33%; min-width: 200px; }
@media only screen and (max-width: 800px) {
      .lbxxx { 
	  max-width: 200px;        
      }
    }
    @media only screen and (max-width : 480px) {
      .lbxxx { 
	  max-width: 200px;        
      }
 	}
	
		
.example-image-link { vertical-align:bottom; }




/*active eingefügt SK*/
a.active, span.active{
	display: block;
    min-width: 6em;
	padding: 0.2em;
	text-align: center;
	text-decoration: none;
	font-weight: bold;
	color: brown;
	background-color: #ffffff; /* vorher ALT*** beige; jetzt weiß */
	/* opacity: 1.0;  */
	border-radius: 0.5em 0.5em 0.5em; 
}
nav a:focus.active,
nav a:hover.active,
nav a:active.active {
	color: brown;
	background-color: #F8DB94;
}
/*ende active*/



/*verstecken bzw zeigen*/
@media (min-width : 781px) {
.verstecken { display: none !important;
}
}

@media (max-width: 780px) {
.zeigen { display: none !important; }
}
/*ende verstecken bzw. zeigen*/


/*akkordeon (nur für mobil)*/
.akkordeon { 
	display: inline-block;
	align-content:space-between;
	list-style: none;
	margin-top: -5em;
	width: 98.5%;
	margin: 0.2em; /* Hier noch minimlaen left- und right margin anlegen */
	padding: 0em 0.2em; /* Hier noch ein wenig padding anlegen */
	/* border: 1x solid gray; === Border ausgeblendet */
	/* background-color: #eee; === BG ausgeblendet */
	/* opacity: 0.9; */ 
	}


    
@media only screen and (max-width : 480px) {
      	.akkordeon {
	  	display: inline-block;
		/* max-width: 15em; */
		margin-bottom: 0.8em;
		margin-top: 0em;
    }
  }
@media only screen and (max-width : 350px) {
      	.akkordeon {
	  	display: inline-block;
		/* max-width: 15em; */
		margin-bottom: 0.8em;
		margin-top: -1.5em;
    }
  }

 
.akkordeon label,
.akkordeon a {
	display: block;
    min-width: 6em;
	padding: 1em;				/* angepasst 4.1.17 */
	margin-bottom: 0.6em;
	margin-top: 0em;
	text-align: center;
	text-decoration: none;
	font-weight: bold;
	color: #F8DB94;
	background-color: brown;
	/* opacity: 1.0;  */
	border-radius: 0.5em 0.5em 0.5em;
	margin-left: 0.6%;
  	margin-right: 0.6%;	 
}

.akkordeon input:checked + label,
.akkordeon input:checked + a,
.akkordeon input:checked + label:hover,
.akkordeon label:hover,
.akkordeon input:checked + a:hover,
.akkordeon a:hover {
  color: brown;
  background-color: #F8DB94;
}
	
 
.akkordeon input{
	display: none;
}
 
.akkordeon p {
  overflow: hidden;
  height: 0;
  margin: 0;
  max-height: 4em;
  transition: all 0.5s ease-in-out;
}
 
.akkordeon input:checked ~ p{
  transition: all 0.5s ease-in-out;
  height: 7em;
}

/*ende akkordeon*/

/*int 2 (für mobile untermenü)*/
a.int2 {
	padding: 0 0.2em 0.1em 0.2em;
	padding: 0.9em;
	text-decoration: none;
	font-weight: bold;
	color: #F8DB94;
	background-color: brown;
	/* opacity: 1.0;  */
	border-radius: 0.5em 0.5em 0.5em;
	align-items: flex-start;
	display: inline-block;
	width: 80%;
	margin-bottom: 0.8em;
}
a.int2:focus,
a.int2:hover,
a.int2:active {
	color: brown;
	background-color: #F8DB94;
	text-decoration: underline dotted; /* Hinzugefügt am 23.10.2016 */
}
/*ende int2*/

a.mail {
	text-decoration: underline dotted;
	font-weight: bold;
	color: #E02F0C; /* ***** GEÄNDERT 2025-10-11 APFELROT *** */
	padding: 0 0.2em 0.1em 0.2em;
	border-radius: 0.5em 0.5em 0.5em;
	align-items: flex-start;
	display: inline-block;
}
a.mail:focus,
a.mail:hover,
a.mail:active {
	color: #F8DB94;
	background-color: #E02F0C;   /* ***** GEÄNDERT 2025-10-11 APFELROT *** */
	padding: 0 0.2em 0.1em 0.2em;
	border-radius: 0.5em 0.5em 0.5em;
	align-items: flex-start;
	display: inline-block;
	text-decoration: underline dotted; /* Hinzugefügt am 23.10.2016 */
}

/*automatische Silbentrennung von SK am 26.06.2018 eingefügt*/
/* hyphens */
p, h1, h2, h3, h4, h5, h6, ul, li {
   -moz-hyphens: auto;
   -o-hyphens: auto;
   -webkit-hyphens: auto;
   -ms-hyphens: auto;
   hyphens: auto; 
}