:root {
  --AFbuttons: #0888c5;   
  --AFborders: #a9a9a9;
  --AFbackground: #f8f8f8;
  --AFvalid: green;
  --AFinvalid: red;
  --AFbgvalid: #eefff8;
  --AFbginvalid: #ffeeee; 
  --AFdisabled: #dddddd; 
}

.red { color: #cb0960 }
.bgred { color: white; background-color: #ff0066; padding:1px 5px } 
.blue { color: #0888c5 }
.green { color: #0b7449 }
.bgblue { background-color: #bde1f3 }

* { box-sizing:border-box; }

html { margin:0; background-color:#ffffff; font-family: consolas, sans-serif; font-size:18px; color:#3b4043; }

body { margin:0; line-height:1.5rem;   }

/* -------------------------- css generals ------------------------------------- */

.bot { font-family:consolas;color:#999;line-height:1.3rem; text-align:center;font-size:13px;margin:40px auto; }

table,div { line-height:1.5rem; }
img, script { line-height:0; }
h1,h2,h3,h4,h5,h6 { line-height:initial; }
h1 { margin-top:0px; margin-bottom:25px; font-family:impact; font-weight:normal; font-size:72px; }
h2 { margin-top:0px; margin-bottom:15px; }

ul { margin:0 }

.msgdiv { margin:1rem 0; }
.msg { }

.strike { text-decoration: line-through; }
.nowrap { white-space: nowrap }
:root {
    --red: #cb0960;
    --blue: dodgerblue;
    --green #0b7449;
}

video, img { max-width:100%; }

body { /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e3e3e3+0,e3e3e3+100&1+0,0+100 */ }

/* -------------------------- css elements ------------------------------------- */

ul.ok > li { list-style-image:url(imgs/ok18.png) }

p { white-space:pre-wrap; }
a, a:link { color: #0888c5;  }   /*#43bf43*/
.AF a, .AF a:link { color: #43bf43;  }
a:link:hover { text-decoration: none }
.naviON, a.naviON:link { font-weight:bold; font-size:110% }

.Categorytext {  }
.Categorytext, .Text { white-space:pre-wrap; }

/* -------------------------- css layout html.php ------------------------------ */

#waitlayer { position:fixed; width:100%;height:100%; z-index:3; top:0; }

div.wide { width:100%  }
div.wrap { width:100%; max-width:980px; margin:0 auto;background-color:white; padding:0 15px }

#div1 { position:relative; display:block; padding:0 15px; line-height:0 }

img.Categoryfoto { display:block;width:100%;height:auto } /*div1*/
.Categorytext h2, .cons h3 { margin:0; display:inline-block; }

div.logo-block { padding:40px 10px  }
div.navi-block { padding:10px 0;  }
div.navi-top { }       /*#2D3E3E*/
div.right { text-align:right }

.navi-inline > ul { display:inline; width:100%; text-align:left; margin:0; padding:0;   }
.navi-inline > ul > li { display:inline-block; margin-right:20px; list-style-type:none;  }
.navi-inline > ul > li > a.navi { text-decoration:none;  }
.navi-inline > ul > li > a.navi:hover { text-decoration:underline;  }
.navi-inline > ul > li > a.naviON:link { color:#666; text-decoration:none; font-size:110%  } 


#div2 {  }
div#parentlinks { padding: 15px 15px 25px 15px; margin:0; background-color:white; }
div#parentlinks a:link {  color:#666; text-decoration:underline; white-space:nowrap }
div#parentlinks a:link:hover {  text-decoration:none; }

#div3 { margin:0px; padding:0 }
div.Categoryfoto, div.Categoryfoto .img { width:100%; max-width:100%; line-height:0 }
#div31 { padding:0 15px; margin-bottom:30px }
#div32 { padding:0 15px }

.TAB { display:table; width:100%; }
.TR { display:table-row; width:100%; }
.TD, .TH { display:table-cell; vertical-align:top; }

.TAB.t { width:auto; border-collapse:collapse }
.TAB.t > .TR { width:100%;}
.TAB.t > .TR > .TD { text-align:left; border:1px solid #ccc; padding:2px 8px }
/* unbenutzt */
.Preistafel > .TAB.t { width:100%; }
.Preistafel > .TAB.t > .TR > .TD:last-child{ font-weight:bold }

#div4 { margin-top: 80px; padding:0 15px }
#div_bc_bottom { padding:30px 0; font-size:86%; color: #999 }

div.cons { display:table; margin-bottom:30px; width:100%; }
div.cons h2 { font-weight:bold }
img.cons_image_right { max-width:400px; margin:0 0 20px 40px; float:right; }
img.cons_image_left { max-width:400px; margin:20px 60px 20px 0; float:left; }


/* -------------------------- css responsive ----------------------------------- */

/*unbenutzt*/
#berger { display:none; right:8px; top:8px; background:white; padding:0 14px; cursor:pointer; font-weight:bold; font-size:130%; border-radius:3px; box-shadow: 1px 1px #ccc; }
#flatscher { display:none; background:#f2f2f4; width:100%; }
#close { display:none; position:fixed; top:8px; right:8px; background:white; padding:0 14px; cursor:pointer; font-weight:bold; font-size:130%; border-radius:3px; box-shadow: 1px 1px #ccc; } 


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

body { line-height:normal;  }
div.wide { margin-top:0px; }
div.wrap { padding: 0 }
div#parentlinks a:link {  color:#666; text-decoration:none; white-space:normal }
h1 { font-size:2rem }
.Categorytext {  }

img.cons_image_right { display:block; max-width:100%; margin:0 0 15px 0; float:none; }
img.cons_image_left { display:block; max-width:100%; margin:0 0 15px 0; float:none; }
img.cons_image { display:block; max-width:100%; float:none; margin:0 0 15px 0; }

}