/* CSS Stylesheet by dialog im netz http://dialog-im-netz.de
                                    */
@font-face {

    font-family: 'Effbold';
    src: url('../webfont/effbold.eot');
    src: url('../webfont/effbold.eot') format('embedded-opentype'),
         url('../webfont/effbold.woff') format('woff'),
         url('../webfont/effbold.ttf') format('truetype'),
         url('../webfont/effbold.effbold') format('svg');
}
@font-face{
font-family: 'ArialNarrow';
    src: url('../webfont/arialn.eot');
    src: url('../webfont/arialn.eot') format('embedded-opentype'),
         url('../webfont/arialn.woff') format('woff'),
         url('../webfont/arialn.ttf') format('truetype'),
         url('../webfont/arialn.svg#ArialNarrowRegular') format('svg');
}

html,blockquote,body,div,dl,dt,dd,fieldset,form,
h1,h2,h3,h4,h5,h6,ol,p,ul,li,center,hr,pre,img,
table,tr,td,th,thead,tbody,tfoot,caption  {
margin:0;
padding:0;
border:0 none;
font-size: 1em;
}
html{
	scroll-behavior: smooth;
}
/* FARBEN */
.red,
.red p,
.red a,
.rot,
#snav,
#snav a,
h2,
#addr,
.address,
.vorzeile,
#right h1,
#right li,
.newsliste h2 a,
.kacheln a,
#unav a.ac,
#unav a:hover,
.angliste a strong:hover {
color:#ff0000;
border-color: red
}
.kacheln a:hover span {
background-color: red;
color: white
}
p,ul,h1,h3,li,a,
.liste a,
.newsliste h2 a:hover,
#unav a, 
#content 
.liste h2,
.bottominfo p,
.leftinfo p   {
color: #333;
}
.motto {
color: #fbd38f
}
.copyright,
.copyright a {
color: #666
}

/* Line Height */
#content p,
#right p,
#content ul{
line-height: 1.2em;
hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto
}

.shadow {
box-shadow: -8px 4px 10px 2px #aaa;
}
.bu {
font-style: italic;
padding-top: .5em;
line-height: normal;
}

body {
font-family:Arial, Helvetica, sans-serif;
font-size: 13px;
background: #ffecbd url(../img/bg/effenberger_hg_1920_40.jpg) center 0 no-repeat fixed;
background-size: cover; 
padding: 0 10px;
}
hr{
	margin: 1em 0;
	background-color: #202020;
	height: 1px;
}
.newsliste h2 a{
text-decoration: none
}
.w2 {
width: 610px
}
.erster {
margin-top: 0;
}
.datum {
font-size: 12px;
font-weight: bold;
margin-bottom: 0
}
.neu {
background-color: #ff0000;
color: #ffffff;
text-transform: uppercase;
font-weight: bold;
text-align: center;
padding: 1px 4px;
display: block;
float:left;
margin-right: 10px;
width: 40px;
margin-top: -2px
}
sub {
position: relative; 
font-size: 9px; 
bottom: -4px;
font-weight: normal;
}
sup {
position: relative; 
font-size: 9px; 
top: -2px;
font-weight: normal;
}
a:hover,
a:focus {
outline: none;
}
td {
vertical-align:top
}

h1,
#content .liste h2{
font-size:12px;
letter-spacing: 0.1em;
text-transform:uppercase;
margin:0 0 .25em 0
}
#left h1,
#right h1 {
margin-bottom: 1.5em
}
p,ul,ol,h2 {
margin: 0 0 1em 0;
}


h3 {
margin: 1.5em 0 .5em 0
}
#content h3 {
font-size: 15px
}
ul {
padding-left: 16px
}
li {
vertical-align:middle
}

.hide, .h0 {
display:none
}
img{
border: none;
 -ms-interpolation-mode: bicubic; 
}
.clear {
clear: both
}
.bildlinks {
float: left;
margin: 3px 10px 5px 0
}
.bildrechts {
float: right;
margin: 0 0 5px 10px
}
.klein{
font-size:11px;
}
#right p.mittel,
#left p.mittel {
font-size:12px;
line-height: 120%;
margin-bottom: 30px
}
.mittel strong {
	color: red
}
.gross {
font-size: 20px;
}
.top {
display: block;
float:right;

width: 100px;
text-align: right;
padding: 0 10px;
text-decoration: none;
font-weight: bold;
text-transform: uppercase;
font-size: 10px
}
.top:hover,
.top:hover img {
border: 0;
outline:0
}
.closebutton {
position: absolute;
top:-10px;
right: -10px;
width: 30px;
height: 30px;
}
.pdf {
background: transparent url(../img/pdf.gif) 0 0 no-repeat;
padding: 3px 0 3px 20px;
margin-left: 20px;
text-decoration: none;
font-size: 12px;
font-weight: normal;
float: right;
width: 50px;

}
.vorzeile {
font-size: 18px;
line-height: normal;
margin: 0 0 .5em 0
}
.kacheln a {
display: block;
float: left;
height: 18px;
width: 147px;
padding: 103px 0 0 0;
margin-right: 5px;
background: transparent url(../img/Angebot/Produktbilder_150x100/1.jpg) 0 0 no-repeat;
font-weight: bold;
text-decoration: none
}
.kacheln a {
margin-bottom: 20px
}
.kacheln a span {
display: block;
padding: 1px 0 2px 3px;
}
.innerright {
float: right;
width: 290px;
margin: -5px 0 0 10px
}
.innerright h2 {
padding-top: 0
}
#content .innerright ul {
line-height: normal
}
.angliste {
position: absolute;
width: 200px;
height: auto;
bottom: 0;

}
.angliste a {
display: block;
text-decoration: none
}
.angliste a strong {
border-bottom: 2px solid #999
}
.angliste a strong:hover {
color: red;
border-color: #ff0000;

}
.red p strong {
display: block;
}
div {
position: relative
}
.innercontent .liste {
margin-bottom: 2em
}
.innercontent img {
max-width: 450px
}

/* DIVS */ 
#wrapper {
margin:0 auto;
width:823px;
height:auto;
padding: 0 20px 20px 20px;
background-color: rgba(255,250,236, .9); 
}
#head {
margin: 0 0 60px 0
}


#logo {
float:left;
width: 208px;
margin-top: 10px;
}

#snav {
position: absolute;
top: 120px;
line-height: 1.2em
}
#snav a,
#snav p {
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
font-size: 11px;
font-weight: bold;
color:red
}
#snav p {
margin-top: 10px;
line-height: 140%
}

#left {
float:left;
width: 180px;
margin: 76px 28px 0 0;
}
#left img,
#right img,
#left .kasten,
#right .kasten {
margin-bottom: 15px;
margin-top: -5px

}
.leftinfo {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
/* flex-end center space-between space-around space-evenly */
align-items: flex-start; 
align-content: flex-end
}

.leftinfo div:first-of-type {
 min-width: 208px;
}
.leftinfo div:last-of-type {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
/* flex-end center space-between space-around space-evenly */
align-items: flex-end; 
align-content: flex-end;
}
.leftinfo img {
 display: block; 
 margin: 0 20px 1em 0;
 float: left;
} 
.leftinfo p,
.bottominfo p {
font-size: 12px;

}

#content {
float: left;
width:435px;
margin: 0 30px 30px 0
}
#content h1 {
height: 30px;
overflow: hidden;
padding-left: 210px;
}
.liste div {
background: transparent url(img/verkaufsstellen/punkte/rot.png) 0 0 no-repeat ;
margin: 16px 0 3px 0;
padding: 3px 0 2px 24px;
}

#content .liste h2 {
overflow:visible;
}
#content h2 {
font-size: 22px;
margin: 1em 0 .5em
}
#content h2:first-of-type {
	margin-top:0
}
#content h2.preise {
margin-bottom: 0.5em
}
#content img {
height: auto;
}
#content img.first,
#content a img.first {
margin-top: 3px
}
#cheader {
height: 70px;
}
#right {
float: left;
width:150px;
margin: 76px 0 30px 0;
}

/* Abstände li/re */
#left , #right {
margin-top: 86px;
border-top: 0px solid black
}

#right h2 {
margin-top: -4px
}
#right li {
margin-bottom: .5em;
font-weight: bold;
}
#right img {
	display: block;
	max-width: 100%;
}
#footer {
clear:both;
padding: 30px 0 0
}

.bottominfo {
width:180px;
float:left;
}
.bottominfo p{
margin: 0;
white-space: nowrap
}
.address {
float: left;
width:210px;
font-weight: bold;
font-size: 11px;
}
.motto {
font-weight: bold;
font-size: 28px;
}
.motto span {
display: block;
font-size: 20px;
}
.addressp {
display: none;
}

.liste {
width: 200px;
}
.liste a {
display: block;
font-weight: bold;
text-decoration: none;
padding: 1px 5px
}
.liste a:hover,
.liste a.ac{
color: red;
}
#content .liste p {
line-height: normal
}

.textlay,
.xtextlay {
position: absolute; 
top: 40px; 
left: 0; 
border: 1px solid #c0c0c0;
box-shadow: -8px 4px 10px 2px #aaa;
padding: 10px;
width: 180px;
height: auto;
background: transparent url(../img/bg/bg-textlay.png) 0 0 repeat;
}
.textlay div,
.xtextlay div {
background: transparent url(../img/verkaufsstellen/punkte/blau.png) 0 0 no-repeat ;
margin: 16px 0 3px 0;
font-size: 10px;
padding: 0 0 2px 24px;
}

.liste #legende {
margin: 180px 0 0 0;
padding: 0;
font-size: 11px;
line-height: 22px
}
.liste #legende img {
position: relative; 
top: 3px;
width: 15px;
height: auto
}
#content .textlay h2,
#content .xtextlay h2{
font-size: 16px
} 
.textlay h3,
.xtextlay h3 {
color: black;
font-size: 13px;
margin: 5px 0 0px 0;
}
#content .textlay p,
#content .xtextlay p {
font-size: 12px;
color: #333333;
margin:0;
line-height: normal
}
.kasten {
border: 1px solid #c2c2c2;
box-shadow: -2px 4px 12px 0px #5f5f5f;
padding: 10px;
background-color: #ffffff;
height: auto;
margin:0 -1px 2em -1px;
width: 130px
}
#left .kasten {
width: 160px
}
.kasten p {
margin-bottom: .5em
}
.kasten img {
width: 150px;
margin: 0 -10px .5em -10px
height: auto
}

.spalte {
float:left; 
width: 204px;
}
.spalte img {
max-width: 100%;
height: auto;
}
.spalte li {
text-align: left;
margin-bottom: 1.5em
}

#left .kasten img {
width: 160px;
}

.dlimg {
margin: 0 7px 0 0; 
float:left;
width:200px;
height:270px;
overflow:hidden;

}
#content .dlimg p {
font-size: 11px; 
line-height: normal; 
margin:0;
padding:0;
}
.dlimg img {
display:block; 
margin: 0 0 .5em 0
}
.angebattr {
text-align: right; padding-top: 1em; width: 310px
}
.angebattr0 img {
width: 60px
}

/* FORMULAR */
label, input, textarea, select {
margin:0 0 10px 0  ;
}
input, textarea,select {
border-width: 1px; 
padding: 2px 4px;
}
input, textarea {
width: 300px;
}
input[type="checkbox"] {
width: 20px; 
background-color: transparent
}
input [angabe="TRUE"] {

}
label {
float: left;
width: 70px;
display: block;
}
form div {
clear: both;
}

input.short {
width: 80px;
}
input:hover {
background-color: #ffffff;
}
input.button {
width: 310px;
}

.meldung {
font-weight: bold;
font-size: 1.3em;
color: red
}
.meldung.ok {
color: #008000;
}

#nav {
white-space: nowrap;
height: 134px;
}
.sf-menu li {
width:150px;
list-style: none;
display: block;
margin:0 5px 0 0;
padding:0;
float:left;
}

.sf-menu li ul {
z-index: 90;
position: absolute;
height: 0;
width:150px;
overflow: hidden;
background-color: transparent;
padding: 0 0 2px 0;
transition: .3s

}
.sf-menu a, 
.sf-menu li li a{
text-decoration: none;
display: block;
}
.sf-menu li a.main {
display: block;
width:150px;
padding-top:110px;
background: transparent url(../img/nav/angebot.jpg) 0 0 no-repeat;
text-decoration: none; 
}
.sf-menu li a.main span {
display: block;
text-align: left;
padding: 5px 3px 2px 10px;
font-family: "Arial Black", "Effbold", Arial, Helvetica, sans-serif;
background-color: #ffecbd;
background-color: #fff5de;
border-top: 3px solid white;
color:#ff0000
}

.sf-menu li li a {
padding: 2px 5px 2px 10px;
background-color: #fff5de;
width: 135px;
color: #666;
font-size: 12px;
font-weight: bold;
padding: 5px 3px 5px 10px;
}

.sf-menu a:hover,
.sf-menu li a.active span,
.sf-menu li li a.active,
.sf-menu li li a:hover,
.sf-menu a.main:hover span,
.sf-menu a.main .active span {
background-color: #f00;
color: white
}
.sf-menu li:hover ul{
height: 200px;
}

.sf-menu #betr a.main {
background-image: url(../img/nav/betrieb.jpg) ; 
}
.sf-menu #verk a.main {
background-image: url(../img/nav/verkaufsstellen.jpg) ; 
}
.sf-menu #press a.main {
background-image: url(../img/nav/presse.jpg) ; 
}

.sf-sub-indicator {

display: none !important  
}

#unav a {
display: block;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0.1em;
font-size: 12px;
margin-bottom: 1em
}
#unav a.ac {
}
.uunav {
margin: -0.5em 0 1.5em 0;
padding-left: 20px;
}
#unav .uunav a {
letter-spacing: normal;
text-transform: none;
margin-bottom: .5em
}

#cycler{position:relative; clear: both }
#cycler img{position:absolute;z-index:1}
#cycler img.active{z-index:3}



@media print  {
#nav,
#unav,
#snav,
.motto,
.address,
#cycler {
display: none;
}
#head {
margin:0
}
#left {
width: auto;
}
#content {
clear:left;
width: 100%;

}
#right {
float: none;
}
p,ul,h1,h3,li,a,#addr,.addressp {
color: #000000;
}
.addressp {
display: block;
}

}