*, *:before, *:after { box-sizing:border-box; transition:width .75s ease-out;}
.clearfix:before, .clearfix:after { content: " "; display:table; }
.clearfix:after { clear: both; }
.section { clear: both;  margin:0px; background:transparent; }

html { font-family: Verdana, Helvetica, arial, sans-serif; font-weight:400; }
body { font-size:100%; margin:0 auto; background-color:#fee; color:#422; }

.container_haupt {  margin-bottom:0px;  width:100%;  }  

h1, h2, h3, h4, h5 { font-weight:600; margin:0; padding:2px; color:#000; }
h1 {font-size:2rem;}
h2 {color:#000; font-size:1.8rem;}
h3 {color:#800; font-size:1.6rem;}

img {max-width:100%; height:auto; padding:0px; margin:0px;}

ul {margin: 0;text-align: left;}
li img {width:25px; height:25px}

.tabellefarbe1 {background-color:rgb(100, 40, 10, .1);;border-bottom:solid 1px black}
.zellefarbe1   {background-color:rgb(100, 40, 10, .1);}  
.tabellefarbe2 {background-color:rgb(200, 220, 240, .5);border-bottom:solid 1px black}
.zellefarbe2   {background-color:white}
.tabellefarbe3 {background-color:black;border-bottom:solid 1px black}
.zellefarbe3   {background-color:black;}
.tabellefarbe4 { background-color:lightgrey;border-bottom:solid 1px black}
.zellefarbe4   {background-color:lightgrey;}
.tabellefarbe5 { background-color:#bdc;border-bottom:solid 1px black}
.zellefarbe5   {background-color:seagreen;}

.text1  {color:dodgerblue;}
.text2  {color:#aaa;text-shadow: 1px 0px 0px black;}
.text3  {color:#000;text-shadow: 1px 0px 0px white}

.hpname {
font-size: 2.4rem;
line-height: 2.5rem;
color:#AAD5FF;
text-shadow: 1px 1px 1px #000;
letter-spacing :3px;
font-style:italic;
}

.fussname {
line-height: 1.8rem;
letter-spacing :0px;
font-style:italic;
}

.rund {border-radius:360px;}
.box-shad {box-shadow:  0px 0px 2px #600;}

.col { margin: 0 auto; padding:1rem;}
  
.eingerueckt {padding:.1rem;}
.eingerueckt-ob-un {padding:.1rem 0;}
.logoback {
background-image:url(outback.jpg);
background-repeat:no-repeat;
background-position:70% 80%;
background-size:100%;
width:100%;

}

/* ========= ab 480 pixel ======= */
@media (min-width: 480px) {  
h1 { line-height: 2.3rem; }
.col {float: left;}  
.col.flow-opposite { text-align:left;}  
.col.span_1_of_1 { width: 100%;}
.col.span_1_of_2 { width: 100%;}
.col.span_1_of_3 { width: 100%;}
.col.span_1_of_4 { width: 100%;}
.col.span_1_of_6 { width: 50%;}
}

/* ========= ab 640 pixel ======= */
@media (min-width: 640px) {
.col {float: left;}
.col.flow-opposite { text-align:right;}
.col.span_1_of_1 { width: 100%;}
.col.span_1_of_2 { width: 50%;}
.col.span_1_of_3 { width: 100%;}
.col.span_1_of_4 { width: 50%;}
.col.span_1_of_6 { width: 33.33%;}  
}

/* ========= ab 768 pixel ======= */
@media (min-width: 768px) {  
.eingerueckt {padding:2rem;}
.absatz-stil {text-align:justify;}  
.col {float: left;}
.col.flow-opposite { text-align:right;}
.col.span_1_of_1 { width: 100%;}
.col.span_1_of_2 { width: 50%;}
.col.span_1_of_3 { width: 33.33%;}
.col.span_1_of_4 { width: 50%;}
.col.span_1_of_6 { width: 33.33%;}
}

@media (min-width: 1024px) {  
.hpname {font-family:arial, helvetica, sans-serif;
line-height:3rem;
color:#adf;
text-shadow: 1px 1px 1px #000;
letter-spacing :4px;
font-style:italic;
font-variant:small-caps
}

.fussname {
line-height: 1.4rem;
letter-spacing :6px;
font-style:italic;
}

.eingerueckt {padding:2rem;}
.col {float: left;}
.col.flow-opposite { text-align:right;}
.col.span_1_of_1 { width: 100%;}
.col.span_1_of_2 { width: 50%;}
.col.span_1_of_3 { width: 33.33%;}
.col.span_1_of_4 { width: 25%; padding-left: 5px;}
.col.span_1_of_6 { width: 16.66%;}
}

@media (min-width: 1280px) {
.hpname {font-size: 6rem;line-height:5rem;letter-spacing :3px;}
.eingerueckt {padding-left:5rem;}  
}

@media (min-width: 1500px) {
.eingerueckt {padding:6rem;}
}