/* ************************************************/
/* k_all.css - Styles für den Produktcontainer    */
/* "#" -> "id"-Selektor; "." -> "class"-Selektor  */
/* ************************************************/

/* --- Farben für den Bereich Produkt vorbelegen --- */
.produkt {
  --col_border_prd: #999999;
}

/* --- Produkt-Auswahlliste --- */
/* --- Beispiel: <div class="produkt h_139"> */
#bereich_mitte div.produkt {
 position:relative;
 padding-bottom:0px;
 height:150px; /* wird im source überschrieben */
}

/* --- Produkt-Auswahlliste, verschiedene Höhen --- */
#bereich_mitte div.h_139 {height:139px;}
#bereich_mitte div.h_158 {height:158px;}
#bereich_mitte div.h_215 {height:215px;}
#bereich_mitte div.h_232 {height:232px;}

/* --- Produkt-Auswahlliste - h1-Überschrift - große Schrift --- */
/* --- Das h1-tag wird hier zur SEO-Optimierung verwendet  --- */
#bereich_mitte h1.produkt_tit {
 clear:both;
 position:static;
 width:390px;
 height:30px;
 overflow: hidden;
 display:block; 
 font-size:14px;
 font-weight:bold;
 line-height:14px;
 margin:3px;
 margin-bottom:0px;
 padding:5px;
 color:#000000;
 background-color:#D0D0D0;
 border-width:1px;
 border-bottom-width:0px;
 border-style:solid;
 border-color:var(--col_border_prd);
}

/* --- Produkt-Auswahlliste - Unsortierte Liste --- */
/* --- Die Höhe ergibt sich aus dem umgebenden <div class="produkt"> */
#bereich_mitte ul.produkt_lst {
 clear:both;
 position:static;
 width:400px;
 font-family:Arial, Helvetica, sans-serif;
 font-size:12px;
 font-style:normal;
 font-weight:normal;
 letter-spacing:1px;
 margin:3px;
 margin-top:0px;
 padding:0px;
 padding-bottom:2px;
 background-color:#F0F0F0;
 border-width:1px;
 border-style:solid;
 border-color:var(--col_border_prd);
 text-align:left;
 vertical-align:middle;
}

/* --- Produkt-Auswahlliste - Bild --- */
/* --- Die Höhe ergibt sich aus dem umgebenden <div class="produkt"> */
#bereich_mitte img.produkt_img {
 position:absolute;
 left:414px;
 top:0px; 
 width:208px;
 height:100%;
 border-width:1px;
 border-style:solid;
 border-color:var(--col_border_prd);
 background-color:#F0F0F0;
}

/* --- Produkt-Auswahlliste - Navigationselement --- */
#bereich_mitte li.produkt_nav {
 white-space: nowrap;
 overflow: hidden;
 list-style-type:none;
 display:block;
 font-size:11px;
 font-weight:bold;
 letter-spacing:0.8px;
 height:13px;
 background-color:var(--col_program_top);
 padding-top:1px;
 padding-right:5px;
 padding-bottom:1px;
 padding-left:5px;
 margin-top:2px;
 margin-right:3px;
 margin-bottom:1px;
 margin-left:3px;
 border-width:1px;
 border-style:solid;
 border-color:var(--col_border_prd);
}

/* --- Produkt-Auswahlliste - Aktuell navigiertes Element --- */
#bereich_mitte li.produkt_naa {
 white-space: nowrap;
 overflow: hidden;
 list-style-type:none;
 display:block;
 font-size:11px;
 font-weight:bold;
 letter-spacing:0.8px;
 height:13px;
 background-color:var(--col_program_top);
 color:#0000FF;
 padding-top:1px;
 padding-right:5px;
 padding-bottom:1px;
 padding-left:5px;
 margin-top:2px;
 margin-right:3px;
 margin-bottom:1px;
 margin-left:3px;
 border-width:1px;
 border-style:solid;
 border-color:var(--col_border_prd);
}

/* --- Produkt-Auswahlliste - Navigationselement im linken Bereich einer Zeile --- */
#bereich_mitte span.produkt_lft {
 width:50%;
 white-space: nowrap;
 overflow: hidden;
 float:left;
}

/* --- Produkt-Auswahlliste - Navigationselement im rechten Bereich einer Zeile --- */
#bereich_mitte span.produkt_rgt {
 width:50%;
 white-space: nowrap;
 overflow: hidden;
}

/* --- Produkt-Auswahlliste - Aktuell navigiertes Element im linken Bereich einer Zeile --- */
#bereich_mitte span.produkt_lfa {
 width:50%;
 white-space: nowrap;
 overflow: hidden;
 color:#0000FF;
 float:left;
}

/* --- Produkt-Auswahlliste - Aktuell navigiertes Element im rechten Bereich einer Zeile --- */
#bereich_mitte span.produkt_rga {
 width:50%;
 white-space: nowrap;
 overflow: hidden;
 color:#0000FF;
}

/* --- Produkt-Auswahlliste - Navigationselement mit doppelter Höhe --- */
#bereich_mitte li.produkt_nag {
 white-space: nowrap;
 overflow: hidden;
 list-style-type:none;
 display:block;
 font-size:12px;
 font-weight:bold;
 letter-spacing:0.8px;
 height:32px;
 background-color:var(--col_program_top);
 padding-top:1px;
 padding-right:5px;
 padding-bottom:1px;
 padding-left:5px;
 margin-top:2px;
 margin-right:3px;
 margin-bottom:1px;
 margin-left:3px;
 border-width:1px;
 border-style:solid;
 border-color:var(--col_border_prd);
}

/* --- Produkt-Auswahlliste - Animiertes Navigationselement im linken Bereich einer Zeile (Download-Link) --- */
#bereich_mitte span.produkt_dwl {
 width:50%;
 white-space: nowrap;
 overflow: hidden;
 float:left;
 animation-duration: 0.6s;
 animation-name: blink;
 animation-iteration-count: infinite;
 animation-direction: alternate;
 animation-iteration-count: 12;
}

/* --- Produkt-Auswahlliste - Animiertes Navigationselement im rechten Bereich einer Zeile (Bestell-Link) --- */
#bereich_mitte span.produkt_ord {
 width:50%;
 white-space: nowrap;
 overflow: hidden;
 float:left;
 animation-duration: 0.6s;
 animation-delay: 0.3s;
 animation-name: blink;
 animation-iteration-count: infinite;
 animation-direction: alternate;
 animation-iteration-count: 12;
}

/* --- Farbgestaltung der Links - Listenelement - Hauptbereich - Navigationselement --- */
#bereich_mitte li.produkt_nav a:link {
 color:#000099;
 text-decoration:none;
}

#bereich_mitte li.produkt_nav a:hover {
 color:var(--col_hover);
 text-decoration: none;
}

/* --- Farbgestaltung der Links - Liatenelement - Hauptbereich - Navigationselement  - Link "Download" --- */
#bereich_mitte li.produkt_nag span.produkt_dwl a:link {
 color:#FF0000;
 text-decoration:none;
}

#bereich_mitte li.produkt_nag span.produkt_dwl a:hover {
 color:var(--col_hover);
 text-decoration: none;
}

/* --- Farbgestaltung der Links - Liatenelement - Hauptbereich - Navigationselement  - Link "Bestellung" --- */
#bereich_mitte li.produkt_nag span.produkt_ord a:link {
 color:#FF0000;
 text-decoration:none;
}

#bereich_mitte li.produkt_nag span.produkt_ord a:hover {
 color:var(--col_hover);
 text-decoration: none;
}

@keyframes blink {
 from {
  opacity: 1.0;
 }
 to {
  opacity: 0.4;
 }
}