@charset "utf-8";
 
/* ab 12.02.19: Überarbeitung für neue Website NHP GW */
/* ab 20.02.19 möglichst alle Spalten, Typo etc. entfernt, die nicht für NHP gebraucht werden */
/*
* CSS-Design
"www.naturheilpraxis-willmroth.de"
* RESPONSIVE WEBSEITE 

Corporate-Farben: 
grün: 	#006633 (0, 102, 51) 	= NHP grün
rot:		#be292a;  (190, 41, 42)	= NHP rot
grau:	#4d4d4d (77, 77, 77) 	= Black 70%

*/
 
 
/* *****      mit grid-template-rows wg. Sticky Footer    ********/  

/* Reset * * * * * * * * */
*{    
	margin: 0;    
	padding: 0;        
	-moz-box-sizing: border-box;    
	-webkit-box-sizing: border-box;
	box-sizing: border-box; 
}
				

/* Layout * * * * * * * */				
				
html {
	height: 100%;	
	font-size: 100%; /* Browserstandard: 16px */
	position: relative;
	background:   #F2F2F2; 					 
}

img{
	max-width: 100%;
	height: auto;  
}
					

main {
	background: white;
}					
body {
	background: white;			   
	height: 100%;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-rows: auto 1fr auto;
	
	font-family:  'Noto Sans', Helvetica, Arial, sans-serif;
	line-height: 1.5;
	color:  #1a1a1a;   /* 90% schwarz */

	max-width: 1200px;
	margin: 0 auto;

/* Fix for Android  - erst ab 4.1 wirksam*/ 
	-webkit-animation: bugfix infinite 1s; } @-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } } 

/* Fix for Android - default checkbox */ 
	input[type=checkbox] { position: absolute; top: -9999px; left: -9999px; } label { cursor: pointer; user-select: none; } 	


header {
	background: white;
	width: 100%;
	float: left;
}					

footer {
	width: 100%;
	float: left;
	background:   #c0c2c5;       /* #4d4d4d;    Black 70%    */         /* #006633;   NHP grün */                       /*#be292a;   NHP rot */
}

 
 .wrapper{
}




/* Spalten  Grundraster  * * * * * * * * **/
.column{
	float: left;
	padding: 25px; 
	margin: 25px 0 0px 2%;
	/*background:  #eee; */
}

/* Logo mit kleinem Abstand zu rotem Farbstreifen*/
.col_1_2_logo{
	width: 49%;
	float: left;
	padding: 25px 0 0 25px;
	margin: 25px 0 0px 2%;
	/*background: #eee;  */   
}


.col_1_2_navi{
	height: 30px;
	width: 49%;
	float:right;
	padding: 25px 0 0 25px;
	margin: 25px 0 0px 2%;
	/*background: #eee;  */ 
}


.col_1_header{
	padding: 0; 
	margin: 0;
	width: 100%;
	height: 5px;
	float: left;
	background: #be292a;  /* NHP rot   --> roter Farbstreifen unter Logo   */
}


.row{
	width: 100%;
	float: left;
}

.column:first-child{
	margin-left: 0;
}

.col_1{        					    /* Einspalter */
	width:100%;												
}

.col_1_2{       					/* Zweispalter */
	width:49%;											
}

.col_1_3{       					/* Dreispalter */
	width:32%;												
}

.col_1_3_termine{       		/* zwei Spalten in 2/3 2x Termine nebeneinander */
	width:49%;
	margin: 25px 0 25px 0;
	padding: 25px 0 25px 0;
}

.col_2_3{       					/* 2/3-Spalte */
    width:66%;												
}


.col_1_4{       					/* 1/4-Spalte  */
    width:23.5%;											
} 
 
.col_3_4{       					/* 3/4-Spalte */   
    width:74.5%;                                          
}

.alignright{ 						/* Fließtext + Bild rechts */
	float: right;    
	margin: 5px 0 15px 15px; 
}

.alignleft{   						/* Fließtext + Bild rechts */
	float: left;    
	margin: 5px 15px 15px 0;    
}


/*  zusätzlicher Abstand vertikal */
.leer_1{
height: 30px;
}

.leer_2{
height: 60px;
}


/* Zeilenumbruch verhindern */
.nowrap {
	white-space: nowrap;
}



/* * * * * * * * * Typo * * * * * * * * */

/* allgemeine Typo */ 
h1, h2, h3, h4, h5, h6   {
    font-family: 'Noto Sans', Helvetica, Arial, sans-serif;
    font-weight: 700;
	font-style: normal;
	color: #1a1a1a;         /* 90% schwarz */
	margin: 0px;
}


h1 {
	font-family: 'Noto Serif', Georgia, serif;
	font-weight: 400;
	font-style: italic;

	font-size: 32px;
	font-size: 2rem;
	line-height: 1.55;
	letter-spacing:1px;
	text-shadow: 1px 1px #aaa; 
}


h2{
	font-size: 24px;
	font-size: 1.5rem;
	line-height: 2;
	color:  #006633;   /* NHP grün */
	margin-bottom: 12px;
}

h3{
	font-size: 20px;
	font-size: 1.25rem;
	line-height: 1.75;
	color:  #be292a;  /* NHP rot */
	margin-bottom: 12px;
}

h4{
	font-size: 20px;
	font-size: 1.25rem;
	line-height: 1.75;
    margin-bottom: 12px;
}

h5{
	font-size: 18px;
	font-size: 1.125rem;
	line-height: 1.75;
    color:  #006633;   /* NHP grün */
	margin-bottom: 12px;
}

h6{
	font-size: 16px;
	font-size: 1rem;
	line-height: 1.625;
	margin-bottom: 12px;
}

h7{   /* extra für ungeordnete Liste, wenn Punkt rot und Text normal 90% schwarz  */
	 font-family: 'Noto Sans', Helvetica, Arial, sans-serif;
    font-weight: 400;
	font-style: normal;
	color: #1a1a1a;         /* 90% schwarz */
	margin: 0px;
}

p{
	font-size: 18px;		/* ab 13.09.21 - Standard ist 16px */
	font-size: 1.125rem;
	margin-bottom: 12px;
}


a{
    color:   red; /* damit Link besser erkennbar*/
    text-decoration: none;
	line-height: 1.75;
}

a:hover{
    color:  green; /* damit hover besser erkennbar*/
    line-height: 1.75; 
}


 /* Typo Textlink mit Unterstrich*/
 .textlink a
{
    color: #be292a;  /* NHP rot */ 
    font-weight:400;
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 2.5;
    text-decoration: none;
    border-bottom: 1px solid;
    padding-bottom: 3px;
}

.textlink a:hover{
    color: #006633;   /* NHP grün */
}


/* Typo Footer  */
footer h2, footer p, footer a  {
    color: #fff;            	/*weiss*/
}

footer h2  {
    font-weight:700;
    font-size: 20px;
    font-size: 1.25rem;
	line-height: 1.75;
    margin-bottom: 12px;
}

footer p {
    font-size: 18px; 
	font-size: 1.125rem;
	line-height: 1.875;
	margin-bottom: 12px;
}

footer a:hover  {
    text-decoration: underline;
	color:   #be292a;  /* NHP rot */ 
}

footer a.active {  
	border-bottom:2px solid #fff;   /*weiss*/  
	text-decoration: none;
}



/************* Navigation oben rechts   *************/

/*  horizontale Liste mit Abstand */
nav li{
     display: block;    
     float: left;
	font-size: 18px; 
	font-size: 1.125rem;
}


/*  Stil Menüverknüpfungen  */
nav ul li a {
     display:block;   
	height: 45px;
	text-align: left;  
	padding: 10px 25px 0px 0px;
	line-height: 31px;  
	color: #006633;   /* NHP grün */	
}


/* Stil  Dropdown-Links  */
nav ul li  ul a {	
	/*background: #eb5d78;  */
	border-style: solid;
	border-width: 1px;
	border-color: #fff;  
	font-size: 16px;
	font-size: 1rem;
	height: 30px;
	line-height: 13px !important;	
	text-transform: none;
}

nav ul {   
  margin: 0;
}


nav  a.active {  
	font-weight: 700;
	/* background:    #33b6b4;	*/
	/*border-bottom: 3px solid #be292a;   NHP rot */
	color: #be292a;  /* NHP rot */
}


nav a:hover {
	color: #be292a;  /* NHP rot */
	/*background: #f9b033;  gold*/  
}


nav ul li {
  position: relative;
  float: left;
  list-style: none;
}

 
nav ul ul {
  position: absolute;
  top: -9999px;
  left: -9999px;
  z-index: 10;     /*sonst Untermenü hinter Top-Link wenn Menü 2-zeilig wird wg. vielen Menüpunkten*/
}
 
nav ul ul li {
  float: none;
  width:   auto;   /*Textbreite;  */
}
 

nav ul li:hover > ul {
  top:  50px;  
  left: 0;
} 


nav ul ul li:hover > ul {
  top: 0;
  left: 130px;   /* horizontaler Abstand zur 2. Ebene*/
  margin-left: -10px; /* dto.*/
}



/*******  ab hier responsiv *********/
input#responsive-nav,
label.responsive-nav-label {
  display: none;
}


@media screen and (max-width: 590px) {
 label.responsive-nav-label {
  position: relative;
  display: block;
  padding: 10px;
 background: #be292a;  /* NHP rot */
  cursor: pointer;
  color: #fff;
}
 
 label.responsive-nav-label span {
  margin-right: 10px;  
}
 
 nav {
  position: absolute;
  top: -9999px;
  padding: 2px 0 0 0;
}
 
 
input#responsive-nav[type=checkbox]:checked ~ nav {
  position: relative;
  top: 0;
}
 
 
nav a:after {
  display: none;
} 
 
 
 nav li {
  float: none !important;
  width: 100% !important;
  border-bottom: none !important; 
  margin: 0;
}
   
nav li a {
  margin-bottom: 0px !important;
  padding: 10px 20px !important; 
}
 
nav ul li:hover {
  background: none;
}
   
nav ul li a:hover {
 }


 nav ul ul {
  position: relative !important;
  width: 100%;
  left: 0 !important;
  top: 0 !important;
  background: none !important;
  box-shadow: none;
}
 

nav ul ul li {
  padding-left: 10px;
   width: 100%;
}


h1 {
	font-size: 24px;
	font-size: 1.5rem;
  }

/*  Spalten untereinander */
.col_1, .col_1_2, .col_1_3, .col_2_3, .col_1_4, .col_3_4    /*  , .start_1_2, .start_1_3,  .start_2_3, .start_3_3  */
 {
width: 96%;
margin: 5px 2% !important;
} 

}

@media only screen and (min-width: 591px) and (max-width: 1199px) { /* 2 Zeilen */
 
h1 {
	font-size: 24px;
	font-size: 1.5rem;
  }


nav{  /* 2 Zeilen */
	margin-bottom: 130px;
} 


nav ul {    
  float: right;    /* für Desktop-Ansicht - Text letzter Menüpunkt muss länger als Text US sein!! */
  margin: 0;
}
 
nav li {  
 border-style: solid;
	border-width: 1px;
	border-color: #fff;
}
 
} 



@media only screen and (min-width: 1199px) and (max-width: 3999px) { /* 1 Zeile */
 
 nav{ /* 1 Zeile */
	margin-bottom: 100px;
} 
 

nav ul {    
  float: right;      /* für Desktop-Ansicht - Text letzter Menüpunkt muss länger als Text US sein!! */
  margin: 0;
}

 nav li {  
 border-style: solid;
	border-width: 1px;
	border-color: #fff;
}
 
}  


/* blockquote  */
blockquote {
	background-color: #f6f6f6;               
	margin: 0 0 20px 0;
	padding: 10px 35px;
	font-style: italic; 
	font-family: 'Noto Serif', Georgia, serif;
	color: #1a1a1a; /*90% schwarz*/
	border-radius: 20px;	
	border-left: 3px solid #be292a;  /* NHP rot */
	padding: 25px;
	position: relative;
}


blockquote:before {
	color: #be292a;  /* NHP rot */
	font-size: 40px;
	font-size: 2.5rem;
	content: "\201D";	
	position: absolute;
	left: 4px;
	top: 18px; 
}

blockquote cite {
	color: #999999;  /*hellgrau  */
	font-size: 14px;
	font-size:  .875rem;
	display: block;
	margin-top: 5px;
} 

 blockquote cite:before {
	content: "\2014 \2009";
}



/* Typo Listen und Aufzählungen */

/* ungeordnete Liste Standard = mit Punkt in rot  - dann Text zusätzlich in <li> mit h7 auszeichnen */
ul{ 
margin: 0 0 12px 20px; 
}


/* ungeordnete Liste mit Grafik statt Punkt */
.grafik ul{ 
margin: 0 0 12px 20px; 
}

.grafik ul{ 
list-style: none; 
list-style-image: url(../images/punkt.gif);
}


/* alphabetische Liste */
.alpha ul{ 
margin: 0 0 12px 20px; 
}

.alpha ul{ 
list-style-type: upper-latin
}


/* geordnete Aufzählung */
ol{ 
margin: 0 0 12px 20px; 
}


/* Typo Kosten-Tabellen */

table, tr, th, td, thead, tbody{
border-collapse: collapse;
}
 
table{
margin: 12px 0 24px;
border-bottom: 2px solid #c7c7c7;
}

th{ 
background: #be292a;  /* NHP rot */
color: #fff; 
padding: 3px 5px;    
border-right: 1px solid #fff; 
}

td{ 
text-align: right;
border-top: 4px solid #fff; 
padding: 3px 6px;    
border-right: 1px solid #fff; 
}

tbody tr:nth-child(even) { 
background-color: #d8dade;
} 
 
tbody tr:nth-child(odd) { 
background-color: #c0c2c5;
}


/* Button */
.button{
    float: left;
    background: #be292a;  /* NHP rot */
    padding: 4px 10px;      
    color: #fff;            						/*weiss*/
    text-decoration: none;
    font-size: 16px;
    font-size: 1rem;
    border-radius: 4px;
    text-shadow: 1px 1px #1a1a1a; /*90% schwarz*/      
}
 
  .button:hover{
    background: #006633;   /* NHP grün */   
    color: #fff;        
    text-shadow: none;
    border-color: red;
    box-shadow: 0 1px  #1a1a1a;
} 
 
.big{
    font-size: 19px;
    font-size: 1.1875rem;
}

.news{  
	float: right;
}

/* nach-oben-Button */
#top-button {
  display: inline-block;
  background-color:  #be292a;  /* NHP rot */
  width: 30px;
  height: 50px;
  text-align: center;
  border-radius: 4px;
  position: fixed;
  bottom: 30px;
  right: 0;
  transition: background-color .3s, 
  opacity .5s, visibility .5s;
  opacity: 0;
  visibility: hidden;
  z-index: 1000;
}
#top-button::after {
  content:    '\f102';      
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  font-size: 2em;
  line-height: 50px;
  color: #fff;
}
#top-button:hover {
  cursor: pointer;
  background-color:  #006633;   /* NHP grün */
}
#top-button:active {
  background-color:  #006633;   /* NHP grün */
}
#top-button.show {
  opacity: 1;
  visibility: visible;
}



/* Seite ausdrucken */
@media print {
 
#header, #footer { 
display: none; 
} 
 
}