* {
box-sizing: border-box;
}
html {
color: #000;
height: 100%;
}
body {
color: #555;
font-family: 'Roboto', sans-serif;
font-size: 1em;
width: 100%;
height: 100%;
}
a, a:visited {
color: #555;
text-decoration: none;
}
a:hover {
color: #999;
}
a img {
border: 0;
border: none;
}
header, section {
margin: auto;
font-weight: 300;
border: 0px solid #0f0;
}
#wrapper {
border: 0px solid #f00;
width: 100%;
overflow: hidden;
ackground-image: linear-gradient(to bottom, rgba(250,219,30,1) 0%, rgba(252,195,116,0.8) 100%);
ackground-repeat: no-repeat;
}
.bar1, .bar2, .bar3 {
width: 30px;
height: 3px;
background-color: #777;
margin: 4px 0;
transition: 0.4s;
}
/* Rotate first bar */
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(0px, 0px) ;
transform: rotate(-45deg) translate(-4px, 5px) ;
}
/* Fade out the second bar */
.change .bar2 {
opacity: 0;
}
/* Rotate last bar */
.change .bar3 {
-webkit-transform: rotate(45deg) translate(0px, 0px) ;
transform: rotate(45deg) translate(-4px, -6px) ;
}
header {
border-bottom: 10px solid #f32;
margin-bottom: 1em;
width: 100%;
argin-left: -10%;
}
header, footer {
background-color: #ddd;
}
#header-wrap {
margin: auto;
border: 0px solid #f00;
}
#header-left {
border: 0px solid #00f;
width: 25%;
height: 8em;
float: left;
padding-top: 1em;
}
#header-left img {
display: block;
height: 100%;
border-radius: 50%;
}
#header-center {
border: 0px solid #fff;
float: left;
height: 8em;
width: 49%;
}
#header-right {
border: 0px solid #ff0;
width: 25%;
height: 8em;
float: left;
}
.br {
display: block;
}
#toggle-nav {
background: rgba(0,0,0,0.2);
display: block;
position: absolute;
right: 0;
top: 2em;
padding: 0.45em 0.2em;
color: white;
cursor: pointer;
}
#toggle-nav:hover {
background: rgba(0,0,0,0.4);
}
#toggle-nav {
display: none;
}
#steuerung {
border: 0px solid #ff0;
clear: left;
font-size: 1.2em;
font-weight: 700;
height: 1px;
margin: auto;
width: 45.5em;
padding: 0em 0 0 0.1em ;
}
#steuerung li {
float: left;
height: 2.5em;
width: 10em;
argin: 0 2.5em;
text-align: center;
}
#steuerung li a {
height: 100%;
width: 100%;
display: inline-block;
color: #555;
adding: 0.8em 0.0em;
}
#steuerung li a:hover {
color: #999;
adding: 0.5em 0;
order: 5px solid #fed230;
order-radius: 50%;
}
#steuerung li:hover {
ackground-color: #c3bab5;
ackground-color: rgba(0,0,0,0);
}
/* Seitenaufbau */
section { /* mindest Content Höhe */
min-height: 300px;
}
#main-cont {
border: 0px solid #f0f;
display: block;
}
h1 { /* h1 Tag */
color: #d33;
font-size: 1.5em;
font-weight: 700;
line-height: 1.2em;
padding: 1em;
}
.fliesstext { /* allgemeiner Text */
line-height: 1.5em;
display: inline;
}
/* ######## FOOTER ########## */
footer {
height: 2em;
ackground-color: #f19969;
color: #fff;
}
footer a,
footer a:visited {
color: #fff;
}
footer a:hover {
color: #ccc;
}
#footerline {
margin: auto;
}
.adresszeile {
line-height: 2em;
margin: 0 0.4em;
}
#impr {
border: 0px solid #f0f;
float: left;
width: 18.5em;
}
#contactinfo {
border: 0px solid #f0f;
float: right;
display: block;
}
@media only screen and ( min-width: 1250px ) {
/* breites Browserfenster
body { ackground-color: yellow;}
*/
#header-wrap, section {
width: 90%;
}
header {
height: 11.5em;
}
#toggle-nav {
display: none;
}
#logo {
idth: 350px;
loat: left;
argin-top: 0.35em;
}
#eader-contactinfo {
line-height: 1.4em;
width: 190px;
font-size: 1em;
argin-top: 2em;
}
#footerline {
width: 1200px;
}
}
@media only screen and ( max-width: 1250px ) {
/* breites Browserfenster
body { ackground-color: #fbf;}
*/
#header-wrap, section {
width: 1000px;
}
header {
height: 9em;
}
#toggle-nav {
display: none;
}
#logo {
}
#eader-right {
line-height: 1.4em;
width: 190px;
font-size: 1em;
argin-top: 1em;
}
#footerline {
width: 1000px;
}
}
@media only screen and ( max-width: 1050px ) {
/* breites Browserfenster
body { ackground-color: #aa0;}
*/
#header-wrap, section {
width: 700px;
}
header {
height: 6.5em;
ine-height: 2.4em;
}
#logo {
width: 240px;
font-size: 1.6em;
loat: left;
margin-top: 0.35em;
}
#toggle-nav {
display: none;
}
/* #steuerung {
font-size: 0.8em;
width: 310px;
}
*/
#header-right {
line-height: 1.4em;
width: 190px;
font-size: 0.9em;
margin-top: 0em;
}
#footerline {
width: 700px;
margin-top: 2em;
}
}
@media only screen and ( max-width: 750px ) {
/* Tablets und mittlere Bildschirme
body { ackground-color: red;}
*/
#header-wrap, section {
width: 100%;
}
header {
height: 6.5em;
margin: 0em auto 1em;
}
#logo {
loat: unset;
width: 8em;
font-size: 1.5em;
height: 2.2em;
margin: 0em auto 0.3em;
}
#toggle-nav {
display: block;
display: none;
}
#eader-right {
width: 100%;
ext-align: center;
}
#addr {
border: 0px solid blue;
width: 100%;
}
#cont {
width: 100%;
display: block;
}
.br{
display: inline;
margin-left: 0.3em;
}
/* #steuerung {
height:0px;
-webkit-transition: height 500ms ease-out;
-moz-transition: height 500ms ease-out;
-ms-transition: height 500ms ease-out;
-o-transition: height 500ms ease-out;
transition: height 500ms ease-out;
display: inline-block;
margin-top: -10px;
float: none;
overflow: hidden;
width: 100%;
font-size: 1em;
}
#steuerung ul {
width: 100%;
margin-top: 0.3em;
}
#steuerung li {
width: 100%;
border-bottom: 1px solid silver;
margin: 0em;
color: #000;
text-align: center;
}
#steuerung li a {
padding: 0.5em 0.5em;
}
#steuerung.showing {
height: 228px;
-webkit-transition: height 500ms ease-out;
-moz-transition: height 500ms ease-out;
-ms-transition: height 500ms ease-out;
-o-transition: height 500ms ease-out;
transition: height 500ms ease-out;
}
*/
#mail a, #impr a {
padding: 0.4em;
margin: auto;
}
#footerline {
width: 100%;
}
#contactinfo {
display: none;
}
#impr {
float: none;
margin: auto;
}
}
@media only screen and ( max-width: 440px ) {
/* mobile Geräte
* { background-color: green;}
*/
header {
height: 7.9em;
}
#header-contact {
width: 100%;
}
#footerline {
width: 100%;
}
#contactinfo {
display: none;
}
.br{
margin-left: 0.8em;
}
#impr {
float: none;
margin: auto;
}
}
.break {
float: left;
}
*/