/* Festlegung der Schriftarten und Schriftstiele * https://www.w3schools.com/css/css_font_fallbacks.asp * https://www.w3schools.com/cssref/css3_pr_font-face_rule.asp */ @font-face { font-family: "AdlerUbuntu"; src: url("../font/UbuntuTitling-Bold.otf") format("opentype");} /* @font-face { font-family: "AdlerUbuntu"; src: url("../font/UbuntuTitling-Bold.otf") format("opentype"); font-weight: bold; } * @font-face { font-family: Ubuntu; src: url(font/UbuntuTitling-Bold.otf); font-weight: bold; } * * * @font-face { font-family: "Arial",Arial,sans-serif;} @font-face { font-family: "Ubuntu-light"; src: url("../font/Ubuntu-L.ttf") format("TrueType"); } @font-face { font-family: "Ubuntu-medum"; src: url("../font/Ubuntu-M.ttf") format("TrueType"); } @font-face { font-family: "Ubuntu-regular"; src: url("../font/Ubuntu-R.ttf") format("TrueType");} @font-face { font-family: "Ubuntu-condensed"; src: url("../font/Ubuntu-C.ttf") format("TrueType");} @font-face { font-family:"Courier New",Courier,monospace;} */ * { font-family: Arial; margin: 0 0 0 0px; text-align: left; color:black;} body { background-color: #fff; margin: 0; } h1 { font-size:18px; } h2 { font-size:12px; } /* p = Text normal * * https://www.w3schools.com/cssref/tryit.asp?filename=trycss_display */ p { font-size:12px;} .shadow { font-family: AdlerUbuntu, Arial; text-align: center; text-shadow: 2px 2px 4px #666; } .gross { font-size: 18px; } .big { font-size: 18px; font-weight: bold; } .riesig { font-size: 30px; } .rot { color: red; } .gruen { color: green; } .nobr { white-space:nowrap; } .font_inline { display: inline; } /* .ascii { font-family: Lucida Console,Lucida Sans Typewriter,monaco,Bitstream Vera Sans Mono,monospace; font-size: 8px; font-style: bold; font-variant: bold; font-weight: bold; line-height: 10px; } */ /* b = Text fett */ b { font-size:12px; color: #F80; } .a_bis_z { font-size: 18px; font-weight: bold; color: #000;} /* Links */ a {color: blue;} a:hover {color: #F80;} .navi { font-family: AdlerUbuntu, Arial; padding: 0 7px 0 7px; color: #000; } .navi:hover { font-family: AdlerUbuntu, Arial; padding: 0 7px 0 7px; color: #fff; text-shadow: 0px 0px 8px #000; } .navi_aktiv { font-family: AdlerUbuntu, Arial; padding: 0 7px 0 7px; color: #fff; text-shadow: 0px 0px 8px #000; } .navi_aktiv:hover { font-family: AdlerUbuntu, Arial; padding: 0 7px 0 7px; color: #F80; text-shadow: 0px 0px 8px #000; } /* Hinweise zu Links - Fehlerhaft: * Dieses Element hat überlaufenden Inhalt, der mit der Bildlauf angezeit werden kann ("scrollable overflow") * https://www.w3schools.com/css/css_tooltip.asp a.tooltips { position: relative; display: inline; } a.tooltips span { position: absolute; visibility: hidden; width:160px; height: 30px; color: #FFFFFF; background: #000000; line-height: 30px; text-align: center; border-radius: 6px; } a.tooltips span:hover { visibility: visible; opacity: 0.8; bottom: 30px; left: 50%; margin-left: -76px; z-index: 999; } a.tooltips span:after { position: absolute; content: ""; top: 100%; left: 50%; margin-left: -8px; width: 0; height: 0; border-top: 8px solid #000000; border-right: 8px solid transparent; border-left: 8px solid transparent; } */ /* Listen * https://www.w3schools.com/HTML/html_lists.asp Leitlinien/Altuelles (dl -> dt -> dd) Standardbehandlungen (ul -> li) */ dl {text-align: center;} dt,dd,li { font-size:12px;} /* muss hier noch mal extra definiert werden */ dt { font-weight: bold; } dd { margin: 0 0 0 20px; padding: 0 0 10px 0; } /* Tebellen - ist unabhängig von dem content_text - wird aber nur dort angewendet table { display:table; border-collapse:collapse; margin: auto;} .thead .tfoot .tbody {text-align: center;} .tr { display:table-row;} .td { display:table-cell; vertical-align: middle; padding:5px;} */ .tr { display:table-row;} /* Wichtig für Team class="td_Chefs_m", sonst vermutlich nirgens benötigt */ .table_termin { border-collapse:collapse; margin: auto; vertical-align: middle;} .capitation_termin { height: 40px; text-align: center;} .td_termin { padding:5px; text-align: center;} .table_anfahrt { border-collapse:collapse; margin: auto; vertical-align: middle;} .capitation_anfahrt { height: 40px; text-align: center;} .td_anfahrt { padding:5px; text-align: center;} /* zoom für die verlinkten Bilder */ .zoom {transition: transform .2s;} .zoom:hover {transform: scale(1.5); } /* box-shadow: HorizontalLength - VerticalLength - BlurRadius - SpreadRadius http://www.cssmatic.com/box-shadow * https://www.w3schools.com/css/css3_gradients.asp */ .RahmenNavi{ margin-left: 80px; margin-right: 80px; padding: 40px 0; box-shadow: -40px 0px 40px -40px #C0C0C0, 40px 0px 40px -40px #C0C0C0; border-radius: 0px; } .RahmenFooter{ margin-left: 80px; margin-right: 80px; padding: 40px 0; box-shadow: -40px 0px 40px -40px #C0C0C0, 40px 0px 40px -40px #C0C0C0, 0px 40px 40px -40px #C0C0C0; border-radius: 0px; } .RahmenInhalt{ padding: 40px; box-shadow: inset 0 0 40px 0px #C0C0C0; border-radius: 40px; } .gradient { padding: 10px; border: 1px solid #DDD; border-radius: 5px; box-shadow: 1px 2px 4px rgba(0,0,0,.2); } .gruen {background-image: linear-gradient(to bottom right,rgba(38,183,77,1), rgba(38,183,77,0))} .hellblau {background-image: linear-gradient(to bottom right,rgba(61,213,205,1), rgba(61,213,205,0))} .blau {background-image: linear-gradient(to bottom right,rgba(46,92,165,1), rgba(46,92,165,0))} /* Allgemin Klassen für Elemente */ .links {float: left; } .rechts {float: right; } .ta_l {text-align: left; } .ta_r {text-align: right; } .ta_c {text-align: center; } .ta_j {text-align: justify; } .Worttrennung { hyphens: auto; } .linie_border-punkte{ border-top: 1px dashed; border-color: #F80; margin: 0; padding: 0; } /* OpenStreetMap - ist unabhängig von dem content_text - wird aber nur dort angewendet */ #mapFrame { width: 100%; height: 800px; } #mapVollbild { width: 100%; height: 100vh; } /* gelber Zettel - ist unabhängig von dem content_text - wird aber nur dort angewendet */ #gelberZettel{ padding: 30px; color: white; box-shadow: 10px 10px 10px 0px #DDD ; border-radius: 10px; background-image: linear-gradient(to bottom right,rgba(255,255,170,1), rgba(255,255,170,0)); } div#header { } img.header { position: relative; width: 60%;} img.header.index { width: 80%;} div#content_icon { padding: 0 0 20px 0; } /* Content Bereich * div#content_text */ .content_text { text-align: left; display: inline-block;} .c_t_Willkommen { max-width: 400px; width: 100%; margin: 20px 0 20px 0;} img.blatt { position: relative; width: 75%;} .c_t_Team { max-width: 600px; margin: 30px 0 30px 0;} /* Besser: keine neue Klasse, sondern die Klasse überschreiben */ /* Breite 800 - entspricht dem Standard */ .td_Team { display:table-cell; padding: 0px;} img.Team { position: relative; width: 100%;} .td_Chefs_l { padding: 5px; float: left; width: 30%; } .td_Chefs_m { padding: 5px; display: inline; vertical-align: middle; } /* vertical-align hat bei diesem Element keine Wirkung, weil es weder ein inline- noch ein table-cell-Element ist. Versuchen Sie, display:inline oder display:table-cell hinzuzufügen. */ .td_Chefs_r { padding: 5px; float: right; width: 30%; } .Chefs_l_text {text-align: left;} .Chefs_m_text {text-align: center;} .Chefs_r_text {text-align: right;} .td_ZF { display:table-cell; vertical-align: top; width: 33%; padding: 30px;} .c_t_Team_einzeln { max-width: 400px; margin: 30px 0 30px 0;} img.Team_einzeln { float: right; width: 200px; margin: 0px 0px 20px 20px; } .c_t_Galerie { max-width: 600px; margin: 30px 0 30px 0;} .td_Galerie { display:table-cell; padding: 0px;} .td_Galerie_33 { display:table-cell; width: 33%; padding: 0px;} .td_Galerie_66 { display:table-cell; width: 66%; padding: 0px;} .c_t_Termin { max-width: 400px;} /* (c_t_Termin_l + c_t_Termin_r) width darf zusammen nur maximal 89% ergeben, weil Spezialkasten mehr Platz braucht */ .c_t_Termin_l { float: left; margin: 20px 10px;} .c_t_Termin_r { float: right; margin: 20px 10px;} .c_t_Leistungen { max-width: 600px; margin: 40px 0 40px 0;} .c_t_Leitlinien_l { width: 40%;} .c_t_Leitlinien_r { width: 60%;} img.Leitlinien { position: relative; width: 50%; margin: 40px 0 40px 0;} .c_t_Aktuelles { max-width: 400px; } .c_t_Anfahrt { max-width: 720px; margin: 30px 0 30px 0;} .c_t_Anfahrt_l { float: left; margin: 20px 10px;} .c_t_Anfahrt_r { float: right; margin: 20px 10px;} .tcaption_Anfahrt { display:table-caption; padding: 5px;} .tr_Anfahrt { display:table-row;} .td_Anfahrt_Nr { display:table-cell; width: 5%; padding: 5px;} .td_Anfahrt_l { display:table-cell; width: 20%; padding: 5px;} .td_Anfahrt_c { display:table-cell; width: 600px; padding: 5px;} .td_Anfahrt_r { display:table-cell; width: 20%; padding: 5px;} .c_t_Impressum { max-width: 500px;} /* Fehler: funktioniert nicht wenn der wrapper bei 1000 ist */ .c_t_Job { max-width: 400px; width: 100%; margin: 30px 0 30px 0;} .c_t_footer { padding: 15px;} div#footer { margin: 0 0 80px 0; } /* Sehr speziell - weil die Reihenfolge: im großen Modus ( links - mitte - rechts ), im kleinen Modus (untereinander) links rechts mitte */ .footer_l { float: left; width: 30%; } .footer_m { margin-right: 30%; margin-left: 30%;} .footer_r { float: right; width: 30%; } .footer_ta_l {text-align: left;} .footer_ta_r {text-align: right;} .footer_ta_m {text-align: center;} /* Breite 800 - entspricht dem Standard */ .wrapper { max-width: 800px; text-align: center; margin: 0 auto; padding:15px;} /* Breite 600 */ @media screen and (max-width: 600px) { .RahmenNavi{ margin-left: 0px; margin-right: 0px; padding: 40px 0; box-shadow: -40px 0px 40px -40px #C0C0C0, 40px 0px 40px -40px #C0C0C0; border-radius: 0px; } .RahmenFooter{ margin-left: 0px; margin-right: 0px; padding: 40px 0; box-shadow: -40px 0px 40px -40px #C0C0C0, 40px 0px 40px -40px #C0C0C0, 0px 40px 40px -40px #C0C0C0; border-radius: 0px; } .footer_ta_l {text-align: center;} .footer_ta_r {text-align: center;} .footer_ta_c {text-align: center;} .footer_l {float: none; width: 100%; margin: 20px 0 20px 0; } .footer_r {float: none; width: 100%; margin: 20px 0 20px 0; } .footer_c {float: none; width: 100%; margin: 20px 0 20px 0; } .c_t_Leitlinien_l{ float: none; width: 100%;} .c_t_Leitlinien_r{ float: none; width: 100%;} .td_Chefs_l { float: none; width: 70%; margin: 0 15% 0 15% ;} .td_Chefs_m { float: none; margin: 0 20px 40px 20px; ; display: block; } .td_Chefs_r { float: none; width: 70%; margin: 0 15% 0 15% ;} .Chefs_l_text {text-align: center;} .Chefs_m_text {text-align: center;} .Chefs_r_text {text-align: center;} div.td_ZF { display:table; width: 70%; margin: 15%; padding: 0;} .c_t_Team_einzeln { text-align: center; max-width: 400px; margin: 30px 0 30px 0;} .Team_einzeln_Name {text-align: center;} img.Team_einzeln { text-align: center; float: none; display: block; margin-left: auto; margin-right: auto;} } /* Breite 700 - betrifft nur die Tabellen im Anfahrt-Bereich*/ @media screen and (max-width: 700px) { #map { width: 100%; height: 200px; } .c_t_Anfahrt { width: 100%;} .c_t_Anfahrt_l { float: none; width: 100%; margin: 20px 0 20px 0;} .c_t_Anfahrt_r { float: none; width: 100%; margin: 20px 0 20px 0;} } /* Breite 500 - betrifft nur die Tabellen im Termin-Bereich*/ @media screen and (max-width: 500px) { .c_t_Termin { width: 100%;} .c_t_Termin_l { float: none; width: 100%; margin: 20px 0 20px 0;} .c_t_Termin_r { float: none; width: 100%; margin: 20px 0 20px 0;} } /* Breite 400 */ @media screen and (max-width: 400px) { .RahmenInhalt{ padding: 40px 0; border-radius: 0px; box-shadow: inset 0px 40px 40px -40px #C0C0C0, inset 0px -40px 40px -40px #C0C0C0; } img.header { position: relative; width: 100%;} img.header.team { width: 100%;} img.blatt { width: 100%;} }