} #box2 { background-color: #E6F2FF; box-shadow: -3px -3px 3px darkgrey, 3px 3px 3px darkgrey; position: absolute; top: 100px; left: 100px; width: 350px; height: 150px; border: 0px solid black; } #box2 { background-color: #E6F2FF; box-shadow: -3px -3px 3px darkgrey, 3px 3px 3px darkgrey; position: absolute; top: 0px; left: 790px; width: 380px; height: 618px; border: 0px solid black; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; } #box2a { padding: 20px; } #box2a { background-color: silver; box-shadow: -3px -3px 3px darkgrey, 3px 3px 3px darkgrey; position: absolute; top: 100px; left: 100px; width: 350px; height: 150px; border: 0px solid black; } #box2a { background-color: #E6F2FF; box-shadow: -3px -3px 3px darkgrey, 3px 3px 3px darkgrey; position: absolute; top: 10px; left: 800px; width: 350px; height: 650px; border: 0px solid black; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; } #box2a { padding: 20px; } box3 { background-color: #E6F2FF; position: absolute; box-shadow: -3px -3px 3px darkgrey, 3px 3px 3px darkgrey; top: 100px; left: 100px; width: 350px; height: 250px; border: 0px solid black; } #box3 { background-color: #E6F2FF; position: absolute; box-shadow: -3px -3px 3px darkgrey, 3px 3px 3px darkgrey; top: 0px; left: 20px; width: 750px; height: 625px; border: 0px solid black; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; } } #box3 { padding: 20px; }

/* ==================================================== GLOBAL DEFINITION ==================================================== */ /* alternatives Boxmodell */ html { box-sizing: border-box; } *, ::before, ::after { box-sizing: inherit; } body { max-width: 75em; margin: 0 auto; padding: 0 1em; font: normal 1em Arial, sans-serif; /* MindestschriftgrÃ¶ÃŸe wird dem Browser, bzw. dem Nutzer Ã¼berlassen! */ color: #0054A8; /*Schriftfarbe gesamte Hauptseite */ background: #E6F2FF; /*Hintergrundfarbe seiten */ position:relative; } /* ===== header ===== */ header.banner { background: #E6F2FF; padding: .5em 1em; box-shadow: 0 0 0px rgba(0,0,0,0.0); /*Schatten um Banner box schatten 0 0 15px;rgba 0,0,0,0.4 */ border-radius: 0 0 1em 1em; } #logo { margin: 22px 0 0 3%; } header a#navlink { display: block; float: right; color: #88a600; text-decoration: none; font-size: 2em; font-weight: bold; } /* ===== content / Inhalt ===== */ main { padding: 1.3em; background: #D9ECFF; /*Hintergrundfarbe focus */ box-shadow: 0 0 10px rgba(0,0,0,0.4); /*0 0 10px rgba(0,0,0,0.4) */ border-radius: 1em; } a { color: #2291FF; /*Schriftfarbe link Impressum */ } a:hover, a:focus { background: rgba(195,214,106,0.95); color: darkblue; /*hover Schriftfarbe link Impressum */ } a.button{ background: #97b314; font-weight: bold; box-shadow: 0 0 20px #c3d34e inset, 0 2px 1px rgba(0,0,0,0.4); /*0 0 20px #c3d34e inset, 0 2px 1px rgba(0,0,0,0.4); */ color: #fff; padding: 0.5em; border-radius: .5em; text-decoration: none; } a.button:hover, a.button:focus { background: #708900; } h1 { } h1 span, .akzentfarbe1 { color: #c3d66a; } h1 a:hover span { color: #fff; } .akzentfarbe2 { color: #FFA500; } aside, section { box-shadow: 0 0 10px rgba(40,120,181,0.4) inset, 0 3px 1px rgba(0,0,0,0.15); background-color: #E6F2FF; /* hintergrundfarbe box lieferprogramm;aktuelles;service */ border-radius: 1em; position: relative; padding: 0 0 4em; /* Platz fÃ¼r abslout positionierte Buttons */ } aside h2, section h2 { color: #6E6E6E; padding: .5em; margin: 0; background: #97CBFF; /* Hintergrundfarbe ueberschriften */ border-radius: .5em; box-shadow: 0 3px 0 darkblue; /* farbige Box-Inhalt / schattengroesse */ } section p { padding: 0.5em 1em; } section p:first-of-type { font-weight: bold; color: } section img { width: calc(100% - 1em); margin: 0.5em 0.5em 1.5em; } aside { } section a.button { position: absolute; /* So werden Buttons immer an der gleichen Stelle, unabhÃ¤ngig vom vorhandenen Inhalt, positioniert */ right: 1em; bottom: 1em; } form { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap:.5em; padding: 1em; } form input { background: #555; border-radius: 4px; border: none; color: #fff; padding: 0.75em 0.75em 0.75em 2.5em; font-weight: bold; } form#search{ position:relative; } form#search input { width: 15em; margin: 0 1em; } #search i { position: absolute; top: 1.2em; left: 1.75em; color: #bebebe; } section ul { margin: 1em 0 0 3em; } section li { font-weight: bold; margin: 0.5em 0 1em 2em; } section li i { color:#6E6E6E; /*farbige harken */ } dl.grid { display: grid; grid-template-columns: repeat(2, 1fr); padding: 0.5em; } dd { margin: 0; padding-left: 1em; } dl.grid dd { margin-bottom: 1em; } a[href^="tel"] { #FFFFFF-space: nowrap; } /* ===== Navigation ===== */ #navigation li { display: block; list-style: none; margin-right: .5em; width: 90%; } #navigation a { display: block; text-decoration: none; padding: 0.5em 1em; background-color: ; border-radius: .5em .5em 0 0; } #navigation a[aria-current=page] { font-weight:bold; background: linear-gradient(rgba(195,214,106,0.95), grey); } #navigation a:hover, #navigation a:focus, #navigation a:active { color: #0000F0; /*schrift hover linkfarbe*/ background: linear-gradient(#97CBFF, #97CBFF); } /* ===== Footer ===== */ footer #copyright { float: right; } /* ===== responsives Layout ===== */ /* Mobile first! 1-Spaltenlayout */ /* 2-Spaltenlayout, sobald der Platz es erlaubt */ @media only screen and (min-width: 10em) { main { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap:1em; position: relative; margin: 3em auto 1em; } article { grid-column: span 2; } header a#navlink { display: none; } #navigation { position: absolute; top: -3em; } #navigation li { display: inline-block; width: auto; } #navigation a { display: inline-block; } /* 3-Spaltenlayout, sobald der Platz es erlaubt */ @media only screen and (min-width: 60em) { main { grid-template-columns: repeat(3, 1fr); } main header, main footer { grid-column: span 3; } article{ grid-column: span 2; } } /* Flexbox Fallback wenn der Browser kein display:grid unterstÃ¼tzt. */ @supports not (display: grid) { main { display: flex; flex-flow: row wrap; } main > * { flex: 1 100%; /* Alle Elemente werden Ã¼ber die volle Breite dargestellt */ } article { flex: 1 64%; margin: 1%; } section, aside { flex: 1 31%; /* Diese Elemente erhalten eine Breite von 1/3. */ margin: 1%; } }/* Das Kontaktformular */ form { background-color: #FFFFFF; width: 570px; /* Breite des Formulars */ padding: 40px; border: 1px solid #8c8c8c; } label { /* Beschriftung auf eigener Zeile */ display: block; cursor: pointer; /* Mauszeiger wird zur Hand */ } input#absender, textarea { width: 300px; border: 1px solid #8c8c8c; margin-bottom: 1em; } textarea { height: 7em; } input:focus, textarea:focus { background-color: #d9d9d9; }