/* Stylesheet für AK-Industrievertretungen
  responsives Layout mit Flexbox ab Z. 240   */




/* ====================================================   GLOBAL DEFINITION   ==================================================== */

/* alternatives Boxmodell */
html { 
  box-sizing: border-box; 
} 

*, ::before, ::after { 
  box-sizing: inherit; 
}

body {
    /*max-width: 100em;*/
    margin: 0 auto; 
	padding: 0 1em;
    font: normal 1em Arial, sans-serif;  /* Mindestschriftgröße wird dem Browser, bzw. dem Nutzer überlassen! */
    color: DodgerBlue;     /* wird als currentColor für die Akzentfarbe verwendet. */
    /*background: #87CEEB;*/
    background: #ffffff;
    background: url('../img/zahnrad-5.png') repeat
    /* background: url('../img/zahnrad-1.png') repeat */
/*    background-size: 110.5em;*/
}



p, ol, ul, dl {color: #333;
}


p1  {
    
    color: #333;
    margin-left: 1em
/*    padding-left: 1em*/

}
p2  {
    /*flex: 1; */
    color: #333;
    margin-left: 2em;
    background: #ffffff;
    padding: .2em 4.9em .2em .9em;
   
    /*background-color: rgba(255, 255, 255, 0.8)*/
   /* background: url('../img//*Hindergrund-400.png*/') no-repeat top right 0.5em rgba(255, 255, 255, 0.9);*/
   /* background-size: 29.5em; */
   /* margin-left: 3em*/
   /* font-size: 1.0em; */
  /*  line-height: 1em; background: rgba(255, 255, 255, 0.8);*/
   /* Transparenter Hintergund mit rgba*/
   /*  background: rgba(250, 250, 210, 0.8) - background: rgba(255, 255, 255, 0.8); */
   /*  background: #ffffff;*/
/*    padding-left: 1em    */

}
p3  {
    flex: auto; padding: .2em 5.2em .2em .2em;
    color: #333;
    background: #ffffff;
    margin-left: 2.8em;
    
   /*    background-color: rgba(255, 255, 255, 1.0)*/
   /* background-size: 29.5em; */
   /* margin-left: 3em*/
   /* font-size: 1.0em; */
  /*  line-height: 1em; background: rgba(255, 255, 255, 0.8);*/
   /* Transparenter Hintergund mit rgba*/
   /*  background: rgba(250, 250, 210, 0.8) - background: rgba(255, 255, 255, 0.8); */
   /*  background: #ffffff;*/
/*    padding-left: 1em    */

}
/* ====================================================  HEADER   ==================================================== */

header0 {
	flex: 1 100%;
    margin-top: 1em;
    padding: 1em;
    background: #FFD700;
     /*background: #FAFAD2;*/
    /*background: #e7e8ee;*/
}


header {
	flex: 1 100%;
    margin-left: -1em; 
    margin-right: -1em; 
    margin-top: 1em;
    padding: 1em;
    background: #FFD700;
    /*background: #FAFAD2;*/
    /*background: #e7e8ee;*/
}

header #logo	{
  margin-left: 1.6em;
  padding: .5em .5em .5em 11em;
  height: 2em;
  background: url('../img/AK-Logo-280.png') no-repeat left;
  /*text-decoration: none;*/
 /* border: 1px solid transparent;*/
}

header #banner {
  margin-left: 2em;
 font-variant: normal 1em Arial, sans-serif;
 font-size: 1.5em;
}

header span {
  font-weight: bold;
}

.akzentfarbe1 {
  LightGoldenrodYellow;
}

.akzentfarbe2 {
  color: DodgerBlue;
}

/* ====================================================  CONTENT   ==================================================== */

h1 {
    
    color: currentColor;
    
}
h2 {
    margin-left: 1.6em;
    padding: .1em .1em .1em .5em;
    color: currentColor;
    background: #ffffff;
    
}

h3 {
    color: #999; 
}
h4 {
    font-size: 1.2em;
    color: currentColor;
    background: #F0E68C;
    /* background: LightGoldenrodYellow; */
}

h5 {
    font-size: 1.5em;
    padding: .1em .1em .1em .5em;
    color: currentColor;
    background: #F0E68C;
        
}

a {
    color:currentColor; 
    font-weight: bold;
}
a:hover, a:focus {
    color: #888;
}

a:focus {
  background-color:gold;
}

a.more {
    float: right;
}
a.more:after {
    content: " >"; 
    display: inline-block; 
    height: 1em; 
    padding: 0 .25em 0.5em 0.25em;
    border-radius: 0em;
    background: Gold;
     /*background: LightGoldenrodYellow;*/
    margin-left: 0.5em;
}
footer a {
    color: #999;
}

a.more:hover, footer a:hover {
    color: #333;
    text-decoration: none;
}

h2.img {
    padding-left: 2.5em;
}
.img.article1 {
    flex
    padding: .1em .1em .1em .5em;
    height: 9em;
    background: url('../img/Technische Artikel-400.png') right no-repeat;
	background-size: 10.5em;
    
        
}
.img.article2 {
    padding: .1em .1em .1em .5em;
    height: 5em;
    background: url('../img/Gleitschienen-Sonderprofile-400.png') right no-repeat;
	background-size: 10.5em;	
    
}
.img.article3 {
    padding: .1em .1em .1em .5em;
    height: 5em;
    background: url('../img/Kettenräder-Umlenkrollen-400.png') right no-repeat;
	background-size: 10.5em;	
    
}
.img.article4 {
    padding: .1em .1em .1em .5em;
    height: 5em;
    background: url('../img/Rollen-400.png') right no-repeat;
	background-size: 10.5em;	
    
}
.img.article5 {
    padding: .1em .1em .1em .5em;
    height: 5em;
    background: url('../img/Scharnierbandketten-Kurvenführungen-400.png') right no-repeat;
	background-size: 10.5em;	
    
}
.img.article6 {
        padding: .1em .1em .1em .5em;
        height: 9em;
        background: url('../img/Zahn-Antriebsriemen-400.png') right no-repeat;
        background-size: 10.5em;    
        
}

.img.anlage1 {
        padding: .1em .1em .1em .5em;
        height: 13em;
        background: url('../img/Förderanlage-400.png') right no-repeat;
        background-size: 10.5em;    
        
}

.img.anlage2 {
        padding: .1em .1em .1em .5em;
        height: 9em;
        background: url('../img/Kastenförderer-400.png') right no-repeat;
        background-size: 10.5em;    
        
}
.img.anlage3 {
        padding: .1em .1em .1em .5em;
        height: 9em;
        background: url('../img/Flaschenförderung-400.png') right no-repeat;
        background-size: 10.5em;    
        
}
/*  Seite Ersatzteile Bilder links =============================================================*/

.img.left-article1 {
    
    padding: .0em 1.0em 3.9em 11.5em;
    height: 26em;
    background: url('../img/Technische Artikel-400.png')  no-repeat left top .3px;
    background-size: 10.5em; 
   
    
    
}
.img.left-article2 {
    padding: .1em .1em .1em 12.5em;
    height: 5em;
    background: url('../img/Gleitschienen-Sonderprofile-400.png')  no-repeat left;
	background-size: 10.5em;	
    
}
.img.left-article3 {
    padding: .1em .1em .1em 12.5em;
    height: 5em;
    background: url('../img/Kettenräder-Umlenkrollen-400.png') left no-repeat;
	background-size: 10.5em;	
    
}
.img.left-article4 {
    padding: .1em .1em .1em 12.5em;
    height: 5em;
    background: url('../img/Rollen-400.png') left no-repeat;
	background-size: 10.5em;	
    
}
.img.left-article5 {
    padding: .1em .1em .1em 12.5em;
    height: 5em;
    background: url('../img/Scharnierbandketten-Kurvenführungen-400.png') left no-repeat;
	background-size: 10.5em;	
    
}
.img.left-article6 {
        padding: .1em .1em .1em 12.5em;
        height: 9em;
        background: url('../img/Zahn-Antriebsriemen-400.png') left no-repeat;
        background-size: 10.5em;    
        
}

.img.left-anlage1 {
        padding: .1em .1em .1em 12.5em;
        height: 24em;
        background: url('../img/Förderanlage-400.png') left no-repeat;
        background-size: 10.5em;    
        
}

.img.left-anlage2 {
        padding: .1em .1em .1em 12.5em;
        height: 16em;
        background: url('../img/Kastenförderer-400.png') left no-repeat;
        background-size: 10.5em;    
        
}
.img.left-anlage3 {
        padding: .1em .1em .1em 12.5em;
        height: 9em;
        background: url('../img/Flaschenförderung-400.png') left no-repeat;
        background-size: 10.5em;    
        
}

a.details {
    float: right;
}

/*  Ende -Seite Ersatzteile Bilder links =============================================================*/

.img.cash {
    background: url('../img/cad-1-400.png') left no-repeat;
	background-size: 1.25em;
    
}
.img.group {
    background: url('../img/cad-1-400.png') left no-repeat;
	background-size: 2.5em;	
}


img, a img {
    border: 0 none;
}

ul.bullets  {
    margin: 5px 0 0 13px;
    color: Red;
}
ul.bullets li {
    /*width: 100%; */
    font-size: 1.10em; 
    font-weight: bold; 
    padding-left: 5px;
    line-height: 2.0em;
    color: #FF0000;
}
ul.bullets li span	{
    color: #474747;
}


dl {
    margin-bottom: 50px;
    clear: left;
}
 
dt {	
    float: left;
    font-weight: bold;
    margin-right: 5px;
    padding: 5px; 
    width: 9em;
}
 
dd {
    margin: 2px 0;
    padding: 5px 0;
}

.news-1 { 
     flex:auto;
    
    margin-left: 2.8em;
    background: #F0E68C;
    
    /*background: url('..//*img/zahnrad-1.png*/') no-repeat top right 0.5em #F0E68C; */
     /*background: url('..//*img/zahnrad-1.png*/') no-repeat top right 0.5em #FAFAD2;*/
/*     background-size: 29.5em;*/
          
} 

.news-2	{
    flex: auto;
    background: #F0E68C;
    background-size: auto
    /*background: url('../img//*Hindergrund-400.png*/') no-repeat top right 0.5em #F0E68C;*/
/*background: url('../img//*Hindergrund-400.png*/') no-repeat top right 0.5em #FAFAD2; */
   /* Transparenter Hintergund mit rgba*/
   /* background: rgba(250, 250, 210, 0.8) */
}
.Kontakt{ 
    flex: auto;
    background: #F0E68C;
    /*background: url('..//*img/zahnrad-1.png*/') no-repeat top right 0.1em #F0E68C;
 background-size: 1.5em;*/
          
} 

/* 0.6  Ersatzteile Box links==========================================  NAV   ==================================================== */



.Ersatzteile-1 { 
    flex: 3;
    margin-left: 2.9em;
    background: #F0E68C;
    /*background: url('..//*img/zahnrad-1.png*/') no-repeat top left 2.5em #F0E68C;*/
    
/*     background-size: 29.5em;*/
          
} 

.Ersatzteile-2	{
    flex: 1;
    background: #F0E68C;
    /*background: url('../img//*Hindergrund-400.png*/') no-repeat top left 0.5em #F0E68C;*/
   /* Transparenter Hintergund mit rgba*/
   /* rgba(250, 250, 210, 0.8) */
}

/* ====================================================  NAV   ==================================================== */

nav	ul { 
 margin-left: 2em; 
 box-shadow: 0 10px 5px 0 rgba(0,0,0,0.75);
  text-align: center;
/*  margin:  0cm 0m 0cm 0cm;*/
/*  margin: 5;*/
  padding: 0;
  list-style-type: none;
}

nav ul li a 	{
/*background-image: linear-gradient(to right, #1E90FF 40%, #00BFFF 70%);*/

/*    box-sizing: content-box;*/
   
/*    display:inline-block;*/

/*    padding: 0em 0em 0em 0em; */
    background: DodgerBlue; 
    color: Khaki;
/*  color: white;*/
  text-decoration: none;
     display: inline-block;
  margin: 0 0 0 0;
    padding: 0.5em 0em 0.5em 0em;
    border: 4px solid DodgerBlue;
/*  border-top-color:pink;   */
      
}

nav a[aria-current=page]{
 color:orangered;
 font-weight:bold;
}

nav  a:hover, 
nav  a:focus {
    background: Khaki;
	color: currentColor;
}

nav a:hover::after ,
nav a:focus::after{
    color: transparent;
} 

nav ul ul { width: 16em; position:absolute;  }



/*     submenu navigation links      */
nav .submenu { 
/*   flex: 1;*/
  visibility: hidden;  
  height: 0;
  z-index: 1000; 
/*  background: white;*/
}
/*     submenu navigation horizontal      */
nav .submenu li { 
  display:inherit;
 display:inline-block;
    margin-bottom: 0.1em;
     line-height: 110%;
    font-size: .95em;
/*  display: block; */
/*  width: 15em;*/
/*    background: white;*/
}
 
/**     Show the submenu on hover, focus     **/
nav li:hover .submenu,
nav li:active .submenu, 
nav li:focus .submenu,
nav li:focus-within .submenu  { 
  visibility: visible;
  height: auto;
  flex-direction: column;
/*  background: white;*/
}

/* ====Aufzählung schwarze Details ====================================== */


ul.bullets-ohne  {
    margin: .0px 4px .4px .3px;
    color: Red;
}
ul.bullets-ohne  li {
    
   width: 100%;
    font-size: 0.85em; 
    font-weight: bold; 
    padding-left: 0px;
    line-height: 1.3em;
    color: #red;
}
ul.bullets-ohne  li span	{
    color: #474747;
}

/* ====================================================   FOOTER   ==================================================== */

footer {
    display: flex;
    color: #989898;
}

footer ul,
footer p {
	  flex: 1 1 100%;
}

footer ul li	 {
    list-style-type: none;	
    display: inline-block;
    border-left: 1px solid #989898;
}
footer ul li:first-child	 {
    border: 0 none;
}
footer ul li a {
    padding: 0 .5em;
}
footer p {
    margin-right: 1em;
    margin-top: 3;
    padding-top: 0;
    text-align: right;
}


/* ====================================================   LAYOUT   ==================================================== */

/* Mobile first ! alle Blöcke haben 100%, Navigation unten*/
main	{
padding: 0em 0;
margin: 0em 0;
}

/* Navigationselemente werden untereinander angezeigt */
nav ul {        
  display: flex;
  flex-direction: column;
}

nav li {
  margin: .3em 0;
  flex: 1 1 100%;
}

nav a {
  width:95%;
  margin: 0 5%; 
  border-radius: .0em;
}

/* 2-Spaltenlayout mit breiterem aside */
@media screen and (min-width: 25em) {
header {
    height: 10em;
}
}

/* 2-Spaltenlayout mit breiterem aside */
@media screen and (min-width: 45em) {
	
header {
    background: #F0E68C url('../img/Förderanlage-400.png')no-repeat right bottom ;
    background-size: contain; 
}	

/* Navigation wird nebeneinander ausgerichtet. */	
nav ul {
  flex-direction: row;
  background: white;    
}

nav li {
  margin: 5;
  flex: 1 1 0%;
}	

nav a::after {
/*    content:" | ";*/
/*    color:tomato;*/
/*    position: relative;*/
/*    left: 5em;*/
/*  margin-left: 50px;*/
} 

/* Main wird zum Flex-Container */

main {
  display: flex;
  flex-flow: row wrap;
}

 main > * {
  flex: 1 100%;     /* Alle Elemente werden über die volle Breite dargestellt */
    } 

section {
  flex: 1 48%;      /* Diese Elemente erhalten eine halbe Breite */
  margin: 1%;
}
}

/* 2-Spaltenlayout mit breiterem aside */
@media screen and (min-width: 58em) {
	
section, aside {
  flex: 1 31%;      /* Diese Elemente erhalten eine Breite von 1/3.  */
  margin: 1%;
}	

article {
  flex: 1 64%;      
  margin: 1%;
}

article ~ aside {    /* Über den Geschwisterselektor werden alle asides neben einem article-Element selektiert, aber nicht die jenigen, die neben einer section oder etwas anderem stehen. */
  background: #eee; 
  border: 0px solid #eee /*DodgerBlue*/;
  border-radius: 0em;
  padding: 0em;
  height: 1em;
}

aside p {
    margin-bottom: 0px;
}
aside p:last-child {
    margin-bottom: 0px;
}


/* Vier Angaben: 1. Wert für padding-top, 2. Wert für padding-right, 3. Wert für padding-bottom, 4. Wert für padding-left (Merkhilfe: Uhrzeigerbewegung)*/