@charset "UTF-8"; /* Zentrales Stylesheet wird im der Website eingebunden ===========*/ @import url("https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700"); /* Stylesheet mit Reset und Restaurierung für Abstände */ @media all { /*========================= Teil 1 RESET ==========================*/ html { overflow-y: scroll; } body, div, h1, h2, h3, h4, h5, p, blockquote, pre, code, ul, ol, li, table, td, th, form, fielset, legend, input, textarea { margin: 0; padding: 0; } article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; } /*======================== Teil 2 restaurieren ========================*/ h2, h3, h4, h5, p, blockquote, pre, ul, ol { margin-bottom: 1em; } hr { margin-bottom: 2em; } ul, ol { margin-left: 2em; } ul ul, ul ol, ol ol, ol ul { margin-bottom: 0px; } blockquote { margin-right: 1em 2em; } ul li { margin-bottom: 4px; } } /* Klammer ist Ende von Media - Nicht löschen */ /* ENDE */ @media screen { /*========================= 1. Allgemeine Styles =========================*/ html { height: 100%; -webkit-text-size-adjust: 100%; /* Safari vergrössert Text in Landscape! jetzt nicht mehr */ } /* @media (orientation: landscape) { body { font-size: 90%; } }*/ body { background-color: #FFFFCC; /* background-image: url(../bilder/schmetterling2.gif); background-position: right top; background-repeat: repeat-y; background-attachment: fixed; background-size: 9%; */ color: black; font-family: open sans, Arial, sans-serif; height: 100%; /* background-image: url(../bilder/leiste.gif); background-repeat: repeat-y; background-position: right top; background-attachment: fixed; */ } #seite { width: 100%; position: relative; } h1, h2, h3, h4, h5, h6 { font-family: 'georgia', serif; color: #006622; } h4.imp { margin-bottom: 5px; } blockquote.block { margin-left: 15px; } address { text-align: center; font-size: 0.8rem; font-style: normal; letter-spacing: 2px; line-height: 1.5; max-width: 530px; margin: 0 auto; } /* = HYPERLINKS =*/ a { text-decoration: none; } main a { text-decoration: underline; } body a { text-decoration: none; } a:link { color: #006622; } a:visited { color: #006622; } a:hover, a:focus { text-decoration: none; } a:active { /* background-color: #d90000;*/ color: white; } /* ========Sonnenblumenbild======*/ .sonnenblumen { background-image: url("../bilder/feld.jpg"); background-size: 100%; width: 100%; padding-top: 28.530259366%; /* = 297h/1041w */ height: 0; } /* ==================================== Klassen und IDs = ================================*/ img.logo { /* background-color: white;*/ color: black; padding: 0; width: 300px; } p.slogan span { color: green; } p.slogan { padding: 5px 0px; margin-bottom: 0; } .arzt { font-size: 97%; margin-top: 8em; font-style: italic; background-color: rgba(238, 238, 238, 0.5); padding: 3px; } /*=================================== /*=================================== 2. Styles für die Layoutbereiche ===================================*/ div#wrapper { display: flex; display: -webkit-flex; background: #fffbd9; color: black; /* box-shadow: 1px 1px 5px, -1px 1px 5px; */ width: auto; margin: 0 auto; min-height: 100vh; position: relative; } #kopfbereich { position: relative; background-color: #FFFFCC; color: black; padding: 10px 20px; height: 130px; } #inhaltsbereich { line-height: 1.5; padding: 5rem 20px; min-height: 400px; } #fussbereich { padding: 10px 20px 20px; border-top: 1px solid #8c8c8c; margin-top: 0; } .floatlinks { float: left; margin-right: 10px; margin-bottom: 10px; } .floatrechts { float: right; margin-left: 10px; margin-bottom: 10px; } .bilderrahmen { padding: 3px; border: 3px solid #ccc; border-radius: 5px; } /*==================== 3. Sonstige Styles ======================*/ /*die kleine Galerie */ div.galerie { padding: 25px 10px 10px 0; margin: 0 3px 3px 0; } div.galerie img { float: left; border-radius: 4px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); margin: 0 15px 15px 0; } .clear-and-hide { clear: both; line-height: 0; font-size: 0; width: 0; height: 0; } ul.ausbildungen { list-style-type: square; } .christine { float: right; margin-left: 10px; /* border: 2px solid #ffffcc;*/ } /* Boxen im Impressum #boxen { display: flex; display: -webkit-flex; flex-wrap: wrap; -webkit-flex-wrap: wrap; border: 1px; } */ .onlex_counter { /* position: absolute;*/ /* top: 660px; */ left: 10px; font-size: 80%; } .statcounter { position: absolute; padding: 2px 2px 0 0; } /* ============== Boxen für Verlinkungen=========*/ .verlinkt-box { display: flex; display: -webkit-flex; background: #eee; min-height: 170px; padding: 10px; margin-bottom: 20px; } .verlinkt-link { flex: 2; -webkit-flex: 2; padding-right: 5px; margin-right: 10px; } .verlinkt-bild { flex: 1; -webkit-flex: 1; } .verlinkt-bild a { text-align: center; } .verlinkt-box a { display: block; margin-bottom: 1em; } /* ============== Boxen für Termine */ .terminContainer { display: flex; flex-wrap: wrap; box-shadow: 2px 2px 4px 0px #bdbdbd; background-color: rgba(203, 221, 145, 0.7); padding: 0.5rem; margin: 0 auto 1rem; } .terminContainer .titel { flex-basis: 50%; } .terminContainer .datum { flex-basis: 50%; text-align: right; } .terminContainer .terminText { flex: 1 1 100%; padding-bottom: 1em; } .terminContainer .uhrzeit { flex: 1; padding-right: 2rem; } .terminContainer .ort { flex: 2; } .terminContainer .uhrOrt { padding-right: 0.5rem; font-weight: bold; } .terminUebersicht hr { margin: 5rem 0 2rem; } p.level { font-size: 0.7rem; margin-bottom: 5px; } .loglink { position: fixed; bottom: 0; right: 0; padding: 3px; } /* ============== Infobox =========================== */ #infos { display: none; padding: 3rem 1rem; border-radius: 5px; position: absolute; top: 9rem; font-size: 1rem; max-width: 500px; width: 70%; height: auto; margin: 2% auto 0 auto; /* Will not center vertically and won't work in IE6/7. */ left: 0; right: 0; z-index: 1001; background: rgba(255, 255, 255, 0.95); border: 1px solid #888; box-shadow: 0px 0px 3px 4px rgba(33, 33, 33, 0.3); /* text-align:justify; */ } #infobereich { cursor: pointer; color: crimson; position: absolute; top: 4rem; right: 1rem; padding: 0.3rem; text-align: center; text-decoration: underline; } #infobutton { font-size: 2rem; color: crimson; transition: all 0.4s ease-in-out; animation: herzpochen 1s alternate; animation-iteration-count: 8; } @keyframes herzpochen { 0% { transform: scale(1); } 100% { transform: scale(1.3); } } .closewin { cursor: pointer; font-size: 2rem; border-radius: 50%; background: #333; display: flex; justify-content: center; align-items: center; color: white; position: absolute; height: 60px; width: 60px; right: -20px; top: -20px; transition: all ease-in-out 0.3s; } .bachblueten { width: 50%; display: block; margin: 2rem auto; } } /*======== Ende MEDIA, nicht löschen */ /* ==Mobile Navigation---- */ @media screen and (max-width: 698px) { .menu { width: 100%; min-height: 32px; box-sizing: border-box; background: #FFFFCC; padding: 5px 20px; } .menubutton { position: relative; line-height: 32px; color: black; padding-left: 20px; padding-bottom: 15px; width: 90px; cursor: pointer; font-size: 1.1rem; } .menubutton:active { background: transparent; caret-color: #b80000; } .menubutton:before { content: ""; position: absolute; top: 11px; left: 0; width: 16px; height: 2px; border-top: 6px double black; border-bottom: 2px solid black; } /* #navibereich { min-height: 300px; background: #ffffcc; padding-top: 2rem; position: static; } */ .navibox { position: absolute; top: 35px; width: 100%; height: 100%; background-color: #FFFFCC; display: none; } .naviboxinnen { margin: 2rem; } ul.navmain { margin: 0; margin-bottom: 0.2rem; top: 35px; display: none; } .navmain li { list-style-type: none; margin-bottom: 1px; } ul.navmain a { color: #006622; display: block; padding: 1rem 2rem; text-align: center; font-weight: 600; font-size: 1.1rem; } ul.navmain li.sie-hier a { text-decoration-line: underline; } /* #seite{ display: flex; display: -webkit-flex; flex-direction: column; -webkit-flex-direction: column; } */ /* #navibereich { order: 1; -webkit-order: 1; } */ p.slogan { display: none; } .impressum { width: 300px; } .statcounter { display: none; } /* Termine Flex kisten Border==============*/ .terminlinks, .terminmitte { border-right: 2px solid white; } .christine { width: 55%; } .onlex_counter { display: none; } #infobutton { top: 1rem; } .uhrOrt { display: block; margin-bottom: 3px; } } /*Ende Media */ @media screen { .kontaktformular { background-color: #eee; line-height: 1.2; padding: 1em; margin-bottom: 6em; } .kontaktformular > div { margin-bottom: 1em; } .kontaktformular label { cursor: pointer; margin-bottom: 0.25em; } .kontaktformular > div { display: flex; display: -webkit-flex; flex-wrap: wrap; -webkit-flex-wrap: wrap; } .kontaktformular label { flex: 0 0 10em; -webkit-flex: 0 0 10em; margin-right: 5px; } .kontaktformular input[type="text"], .kontaktformular input[type="email"], .kontaktformular input[type="tel"], .kontaktformular textarea { flex: 1 1 20em; -webkit-flex: 1 1 20em; padding: 0.25em; margin-bottom: 1em; } .kontaktformular input[type="submit"] { font-size: 100%; font-family: "Open Sans", sans-serif; background: #ffffcc; padding: 10px; border: 1px solid #f3c600; } } /* Ende Media*/ /*====== Diese CSS ist zum Drucken=======*/ @media print { body { font-family: gerogia, "Times New Roman", Times, serif; font-size: 12pt; /*pt zum Ausdrucken wie in Word=*/ } h2 { font-size: 18pt; padding-top: 6pt; border-top: 1pt solid black; margin-top: 12pt; } nav#navibereich { display: none; } a { color: black; text-decoration: none; } a[href]:after { content: " "; } /* ULR wird im Druck angezeigt==== */ .statcounter { display: none; } } /*===Ende Media Print====*/ /* Die CSS für den Desktop bzw großen Bildschirm===*/ @media screen and (min-width: 699px) { div#wrapper { width: 90%; min-width: 750px; max-width: 68em; margin: 0 auto 30px; } /* div#blume { background: url(../bilder/blume.jpg); background-position: center 132px; background-repeat: no-repeat; background-color: #cbdd92; flex: 0 0 201px; -webkit-flex: 0 0 201px; margin-right: 10px; position: relative} } */ p.slogan { position: absolute; top: 30px; right: 20px; } .impressum { width: 180px; } .terminContainer { max-width: 750px; } } /* Ende media screen */ @media screen and (min-width: 1059px) { div#blume { background: url(../bilder/blume.jpg); background-position: center 132px; background-repeat: no-repeat; background-color: #cbdd92; flex: 0 0 201px; -webkit-flex: 0 0 201px; margin-right: 10px; position: relative; } .terminContainer { max-width: 644px; } } /* ENDE MEDIA*/ /* Desktop größe von mindesten 699px bis open end!!!! =========*/ @media screen and (min-width: 699px) { #navibereich { overflow: hidden; /* background: rgba(171, 217, 171, 0.52); background-image: linear-gradient(#dae7a3, #cbdd92); */ padding-top: 10px; margin: 0; } ul.navmain { padding: 0; margin: 0; display: flex; justify-content: center; } ul.navmain li { width: auto; list-style: none; line-height: 1; padding: 0; margin: 0; } ul.navmain a { display: block; color: #006622; text-decoration: none; padding: 10px 10px 13px 10px; font-weight: 600; font-size: 0.98rem; } /* Schritt 3 Linkzustände gestalten */ ul.navmain .sie-hier a { text-decoration: underline; color: #006622; } ul.navmain a:hover, ul.navmain a:focus { color: black; text-decoration: underline; } ul.navmain a:active { /* background: #b80000;*/ color: white; } .menu { display: none; } } /* Ende @media – nicht löschen! */ /* ====================================== E N D E ====================================== */