/* ===========================================================
Stylesheet für die Gestaltung am Bildschirm 

Datei: screen.css
============================================================== */ 


/* ====================================================
    TEIL I - Allgemeine Style
======================================================= */ 

body {
    background-color: #494949;
    font-family: proxima-nova, sans-serif;
    font-style: normal;
    font-weight: 300;
    margin: 0;
}


#wrapper {  
    background-color: #252525;
    max-width: 1300px;
    margin: 0 auto;
    position: relative;
    
    -moz-box-shadow: 0px 0px 63px rgb(50,50,50); 
    -webkit-box-shadow: 0px 0px 63px rgb(50,50,50); 
    box-shadow: 0px 0px 63px rgb(50,50,50);
}

.wf-loading  #navibereich a {

    font-size: 16px;
    letter-spacing: 0.052em;

}

a {
    color: #ccc
}

 /* =============================================================
    TEIL II - Header
================================================================= */
   
#kopfbereich {
     width: 1300px;  
    overflow: hidden;
    background-color: #9C9C9C;
 }
        
 .header_img {
     width: 930px;   
     display: block;
  }

.linktohome {
    width: 254px;
    height: 105px;
    position: absolute;
    top: 0%;
    left: 1%;
    overflow: hidden;
    text-indent: 100%;
    margin: 0;
    white-space: nowrap;
}

h2 {
    font-size: 16px;
}

/* =============================================================
    TEIL III - Navibereich
================================================================= */
 
#navibereich {
        background-color: #2b282a;
        text-align: center;
        padding: 17px 0;
 }      
    
#navibereich ul {
        list-style-type: none !important;
        display: table;
        display: flex;
        flex-wrap: wrap;
        margin: 0;
        padding-inline-start: 0px;
    }

#navibereich li {
    display: table-cell;
    display: flex;
    flex-direction: row;
    /* padding: 0 31px; */
    font-size: 18px;
    box-sizing: border-box;
    /* width: 16%; */
    margin: 0 auto;
    padding-left: 18px;
    padding-right: 18px;
    }
    
#navibereich a {
    text-decoration: none;
    color: #cccccc;
    line-height: 18px;
    }
   
        #navibereich a:link{}
        #navibereich a:visited {}
        #navibereich a:hover {
	        color: #DF0A25 !important;
	        
        } 
        #navibereich a:focus {}
        #navibereich a:active {}


.aktuell {
        font-family: proxima-nova, sans-serif;
        font-style: normal;
        /*font-weight: 900;*/
        color: #DF0A25 !important;
     }

/* ===========Untermenü ============== */

.unternavi {
    display: flex;
    align-content: space-between;
    padding: 0;
    margin-bottom: 50px;
    margin-left: -23px
}
 
.unternavi li {
    list-style: none;
    padding: 0px 23px;
    box-sizing: border-box;
    border-bottom: 2px solid #404040;
}

.unternavi a {
    text-decoration: none;
}

.active {
    background-color: #4c4c4c;
}
 
  /* =============================================================
    TEIL IV - Haputbereich
================================================================= */
 
/* ===========Hauptbereich / Verkäufer ============== */
 
#inhaltsbereich { 
        background: url(img/background_img.png); 
        overflow: hidden;
        background-repeat: repeat-y;
        background-size: 40%;
    }    
        
 #inhaltsbereich.buchtipp_bg {
        
     }       
        
.img_verkaeufer {
        float: left;
        width: 40%;
    }
        
        
 .text {
        float: right;    
        width: 60%;
        padding-top: 38px;
        margin-bottom: 75px;
        color: #ccc;
        font-size: 15px;
        line-height: 1.6;
        box-sizing: border-box;
        padding-left: 120px;
        padding-right: 40px;
     }

 .kleintext {
         font-size: 14px;
         margin-left: 104px;
            border-left: 4px solid #ccc;
        
        }    
   
  .grosstext  {
        padding-bottom: 19px;
        font-size: 15px;
        }
        
        
 p {
        padding: 0 120px 0 0;
        margin: 0 0 10px 0;
     }
 
 
 .ueberschrift {
        font-family: proxima-nova, sans-serif;
        font-style: normal;
        font-weight: 500;
     }

.border-left {
    border-left: 3px solid #ccc;
    padding-left: 10px;
}

   /* ===========Buchtipp ============== */         
  .ausruf { 
      margin: 0;
      padding: 0;
      text-align: center;
      font-size: 100% !important;    
     }
        
    .img_buchtipp {
        float: left;
        width: 27%;
        padding-left: 164px;
        padding-top: 49px;
    }
         
 /* ===========liste ============== */       
        
ul {
    list-style-type: square;
}

.liste {
        list-style-type: square;
        margin-left: 70px;
        }   
          
/* ===========weiterlesen ============== */     
  .weiterlesen {
        color: #6d6d6d;
        background: none; 
        border: none;
        cursor: pointer;
        margin: 0;
        margin-bottom: 30px;
        }    

.weiterlesenbutton {
    padding-bottom: 30px;
}
        
   .collapse{
       display: none;
       font-size: 20px;
    }
 /* ===========Der Trainer ============== */
          
/* ===========Verkaufstraining ============== */
 
  .grosstext_ueberschrift  {
        font-weight: 500;
        padding-bottom: 0;
        margin-bottom: 0;
        }  
        
    .grosstext_verkaufstraining  {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
        }  
        
   .weiterlesen_verkaufstraining {
           color: #6d6d6d;
            padding-top: 0;
            margin-top: 0;
        }
 
  /* =============================================================
    TEIL V - Footer
================================================================= */
 
 #fussbereich {
            max-width: 1300px;
            margin: 0 auto;
            font-size: 15px;
            padding-top: 30px;
        }
        
  .copyright {
            color: #ccc;
            float: right;
            padding: 0 40px;
            margin: 0;
            margin-bottom: 15px;
        }
        
  .kontakt li {   
            display: inline;
            padding: 0;
        }
        
   .kontakt a {
            color: #ccc;
            text-decoration: none;
            padding-right: 20px;
        }

    .kontakt {
        padding: 0 40px;
        float: left;
        margin: 0;
        margin-bottom: 15px;
        }
        
        
    .kontakt a:hover {
	    color: #DF0A25 !important;
    }
    
    
        
        
        
        
   /* =============================================================
    TEIL VII - Startseite
================================================================= */


/* =========== Steckbrief ============== */

	.steckbrief {
		background-color: #3e3e3e;
		color: white;
		height: auto;
		overflow:hidden;
		box-shadow: 0 -20px 020px -20px black;
		

		
	}
	
	div.steckbrief::before {
		box-shadow: 0 20px 20px -20px red;
	}

	div.steckbrief::after {
		box-shadow: 0 -20px 020px -20px red;
	}

	.steckbrief img {
		height: auto;
		width: 20%;
	}
	
	
	div.data {
		width: 60%;
		float: right;
		padding: 30px 10% 30px 10%;
		position: relative;
	}
	
	h2.data{
		padding: 25px; font-size: xx-large; color: white; margin: 0;
	}
	
	.date{
		text-align: left;
		width: 20%;
		padding-top: 15px;
	}
	
	.info {
		text-align: left;
		padding-top: 15px;
		font-weight: 100
	}
	
	div.zitat {
	    float: right;
	    
    }
    
    blockquote {
	  color: white;
	  font-size: 25px;
	  line-height: 100%;
	  position: relative;
	 
	  width: 800px;
	  margin: 15% auto 0;
	  
    }
    
    .embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } 
    .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
	
	
/* =========== previews ============== */

	.previews {
		
		overflow:hidden;
		margin-top: 50px;
		display: grid;
		grid-template-columns: 10% 35% 10% 35% 10%;
		grid-template-rows: auto;
		grid-gap: 50px 0px;
		color: white;
		
		
		
		
		/* width: 80%; margin: auto; margin-top: 50px; height: 100%;
		color: white; overflow:hidden; */
	}
	
	.previews h2 {
		font-size: 1.17em;
	}
	
	.previews h3 {
		font-size: 1em;
	}
	
	
	
	
	.first p{
		max-width: 40ch;
	}
	
	
	
	.text_rest {
		float: right;
		width: 50%;
		
		 padding-top: 50px;
		
	}
	
	.responsive-video iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		
	}
	
	.responsive-video {
		position: relative;
		padding-bottom: 56.25%; /* Default for 1600x900 videos 16:9 ratio*/
		padding-top: 0px;
		height: 0;
		overflow: hidden;
		
	}
	
	.rest_grid_0 {
	  grid-column-start: 2;
	  grid-column-end: 4;
	  grid-row: 1;
	}
	
	.rest_grid_0t {
	  grid-column: 4;
	  grid-row: 1;
	  padding-left: 40px;
	}
		
	.rest_grid_1 {
	  grid-column: 2;
	  grid-row: 2;
	}
	
	.rest_grid_2 {
	  grid-column: 4;
	  grid-row: 2;
	}
	
	.rest_grid_3 {
	  grid-column: 2;
	  grid-row: 3;
	}
	
	.rest_grid_4 {
	  grid-column: 4;
	  grid-row: 3;
	}
	
	.rest_grid_5 {
	  grid-column: 2;
	  grid-row: 4;
	}
	
	.rest_grid_6 {
	  grid-column: 4;
	  grid-row: 4;
	}
	
/* =========== Seminare ============== */	

.grid {
	display: grid;
	grid-template-columns: 40% 60%;
	grid-template-rows: auto;
	color: white;
		
}



div.message {
	background: #a3a3a3;
	margin: 5%;
	color: white;
	text-align: center;
    padding: 2%;
    


}

div.message:last-child {
    margin-bottom: 0;
}

.grid a {
	
}

div.grid {
	background: #5e5e5e;
	margin: 5%;
	

}

 /* div.grid:nth-child(odd) {
  background: #a3a3a3; 
} */

.bild img {
	width: 100%;
	height: auto;
}

.text_S {
	padding: 30px;
	
}

.text_S p {
	padding: 0px;
}

.text_S h2 {
	margin-top: 0px;
}

.bild {
	
	padding: 30px;
}

/* =========== Formulare ============== */	

.InputfieldForm {
	color: white;
	background-color: #494949;
	
}

.InputfieldForm h2 {
	padding: 10px;
	
}

.InputfieldSubmit {
	padding:10px;
}

.Inputfields div {
	background-color: #494949 !important;
	border: none !important;
	;
}

.Inputfields input {
	    padding: 5px;
	    width: 97% !important;
}

.LoginRegisterPro .Inputfield:not(.InputfieldSubmit) {
	padding: 10px !important;
}

.InputfieldForm {
    padding: 20px;
}

.InputfieldForm .InputfieldContent {
    padding: 10px 0;
}

.InputfieldForm h2 {

    padding-left: 0;
    padding-right: 0;
} 

.LoginRegisterPro .InputfieldForm .Inputfield {
    padding: 0 !important;
    margin: 0 !important;
}



  /* =============================================================
    TEIL VI - Media Queries
================================================================= */


  /* ======1600px=========== */
@media screen and (max-width: 1600px) {
    
    #kopfbereich {
        width: 100% !important;   
        }
    
    .header_img {
        width: 800px !important;
    }
    
    .img_buchtipp {
        width: 28%;
        padding-left: 164px;
        padding-top: 32px;
        }
        
}
/* ======1300px=========== */
@media screen and (max-width: 1300px) {
    
    .grosstext {
        font-size: 15px;
    }
    
    .kleintext {
        font-size: 13px;
    } 
    
    .img_buchtipp {
         width: 28%;
        padding-left: 93px;
        padding-top: 41px;
    }

}

/* ======1200px=========== */
@media screen and (max-width: 1200px) {
    
    .border-left {
        margin-left: 20px;
    }
    
    .grosstext {
        font-size: 16px;
        }
    
    .kleintext {
        font-size: 15px;
        }
    
    .img_verkaeufer {
        width: 50%;
        background: #1B1B1B;
        padding-right: 50%;
        }
    
    .text {
        float: none !important;
        width: 100%;
        box-sizing: border-box;
        padding-left: 89px;
        }
    
    #navibereich li {
        width: 15%;
        font-size: 16px;
        }   
    
    #inhaltsbereich {
        background-image: none;
    }
    
    #inhaltsbereich.buchtipp_bg {
        background-image: none;
    }
    
    .img_buchtipp {
        width: 65%;
        padding-left: 454px;
        padding-top: 37px;
        padding-bottom: 50px;
    }
    
     p {
        padding: 0;
    }
    
    .first img {
	    height: 220px;
	    width: auto;
    }
    
    
    
    #big {
	    margin-top: 0px;
    }
    
    blockquote {
	    width: 700px;
	    font-size: 20px;
    }
    
    .images {
      width: 100% !important;
    }
    
    

}


/* ======975px=========== */
@media screen and (max-width: 975px) { 
	
	.steckbrief img {
		display: none;
	}
	
	div.data {
		float: none ;
	}
    
    .img_verkaeufer {
        width: 60% !important;
        }
    
    
    
    #navibereich li {
            width: 33.3%;
            box-sizing: border-box;
            padding: 10px 0 10px 27px;
            border-top: 1px solid #404040;
            border-left: 1px solid #404040;
            margin: 0;
        }   
    
      .img_buchtipp {
        width: 64%;
        padding-left: 381px;
    }
    
     .text {
        padding-left: 45px;
    }
    
    #navibereich {
        padding: 0;
    }
    
    #navibereich ul {
        padding: 0;
    }
    
    #big {
	    clear: both;
    }
    
    .rest {
	    clear: both;
	    margin: 0 auto;
	    width: 100%
    }
    
    .text_rest {
		clear: both;
		width: 100%;
		
		 padding-top: 20px;
		
	}
	
	.first {
		 margin: 0 auto;
	}
	
	 blockquote {
	    width: 100%;
	    font-size: 20px;
	    margin: 50px 0 10px;
	    
    }
    
    div.zitat {
	    float: none;
	    
    }
    
    .zitat p{
		margin-left: 10%;
	}

	.rest_grid_0 {
	  grid-column-start: 2;
	  grid-column-end: 5;
	  grid-row: 1;
	}
	
	.rest_grid_0t {
	  grid-column-start: 2;
	  grid-column-end: 5;
	  grid-row: 2;
	  padding-left: 0;
	}
		
	.rest_grid_1 {
	  grid-column-start: 2;
	  grid-column-end: 5;
	  grid-row: 3;
	}
	
	.rest_grid_2 {
	  grid-column-start: 2;
	  grid-column-end: 5;
	  grid-row: 4;
	}
	
	.rest_grid_3 {
	  grid-column-start: 2;
	  grid-column-end: 5;
	  grid-row: 5;
	}
	
	.rest_grid_4 {
	  grid-column-start: 2;
	  grid-column-end: 5;
	  grid-row: 6;
	}
	
	.rest_grid_5 {
	  grid-column-start: 2;
	  grid-column-end: 5;
	  grid-row: 7;
	}
    
    
}



/* ======860px=========== */
@media screen and (max-width: 860px) { 
       
    
     .grosstext {
         margin-left: 12px;
        }
    
    .kleintext {
        margin-left: 50px;
        }
    
    #navibereich {
        text-align: left;
        }      
    
    
    #navibereich li {
        width: 33.3%;
        padding-left: 26px;
        box-sizing: border-box;
        }
    
    
    .img_buchtipp {
        padding-left: 300px;
    }
    
    .unternavi {
        margin-left: -10px 
    }

}


/* ======700px=========== */

@media screen and (max-width: 700px) {
    
    #fussbereich {
        padding-bottom: 15px;
        }
    
       .grosstext {
        font-size: 16px !important;
        margin-left: 9px;
        }
    
    .kleintext {
        font-size: 14px !important;
        margin-left: 55px;
        }
    
       .img_verkaeufer {
           width: 50% !important;
        }
    
    .copyright {
            float: none;
            margin: 0;
            padding-top: 0;
        }
        
  .kontakt li {   
            display: inline;
            padding: 0;
        }
    
    
    .kontakt {
        float: none;
        padding-bottom: 0;
        padding-top: 4px;
        }
    
      .img_buchtipp {
        width: 73%;
        padding-left: 223px;
    }
    
    .unternavi {
        flex-wrap: wrap;
    }

    .unternavi li {
        width: 100% !important;
    }
    
    .grid {
	    grid-template-columns: auto;
		grid-template-rows: auto auto;
	    
    }
    
    .bild_b {
	    padding: 5%;
    }
    
}


/* ======600px=========== */
@media screen and (max-width: 600px) {
    
          
  .copyright {
            float: none;
            margin: 0;
            padding-top: 0;
        }
        
  .kontakt li {   
            display: inline;
            padding: 0;
        }
        

    .kontakt {
        float: none;
        padding-bottom: 0;
        padding-top: 4px;
        }
    
    .grosstext {
        font-size: 16px !important;
        }
    
    .kleintext {
        font-size: 14px !important;
        }
    
    #navibereich li {
        box-sizing: border-box;
        width: 50%;
        } 
        
    div.first {
	    margin: 0;
    }
    

}

    

/* ======550px=========== */

@media screen and (max-width: 550px) {
    
    .grosstext {
        font-size: 16px;
        }
    
    .kleintext {
        font-size: 14px;
        }
    
     .header_img {
        width: 715px !important;
    }
    
    .img_buchtipp {
        padding-left: 155px;
    }
    
         .img_verkaeufer {
            width: 100% !important;
           padding-bottom: 0px;
        }
}

/* ======430px=========== */

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

    
    #navibereich li {
        box-sizing: border-box;
        width: 50%;
        } 
        
  
    
    
}
    

    /* ======370px=========== */

@media screen and (max-width: 370px) {
        
    #navibereich li {
        box-sizing: border-box;
        width: 50%;
        font-size: 14px;
        } 
    
     .img_buchtipp {
        padding-left: 100px;
    }
    
    }



    .seminar-selection {
        
        padding: 40px 0;
        color: #FFF;
        max-width: 640px;
        margin: 0 auto;
    }

    .seminar-selection__list {
        margin: 20px 0 10px;
        padding: 0;
        list-style: none;
        display: table;
        table-layout: fixed;
        width: 100%;
    
    }

    .seminar-selection__seminar {
        position: relative;
        
        display: table-row;
        cursor: pointer;

    }

    .seminar-selection__seminar > * {
        border-bottom: rgba(255,255,255, .25) solid 1px;
        padding-bottom: 10px;
        padding-top: 10px;
        display: table-cell;
        vertical-align: top;
        
    }


    .seminar-selection__title {
        color: #FFF;
    }

    .seminar-selection__select {
        width: 40px;
        
    }

    .seminar-selection__select--disabled {

        pointer-events: none;
        opacity: .5;
    }

    .seminar-selection__button {
        background: #CC2E30;
        color: #FFF;
        appearance: none;
        border: none;
        font-size: 16px;
        font-weight: bold;
        padding: .5rem 1rem;
        border-radius: .5rem;
        cursor: pointer;
    }

    .seminar-selection span {
        
        text-align: right;
    }

    .seminar-selection small {
        display: block;
        text-align: right;
        margin-bottom: 20px;
    }    

    .seminar-selection p {
        padding: 0;
    }       

    .seminar-selection__actions {

        text-align: right;
    }
 /* ===================================================
        E N D E screen.css
======================================================= */