/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on May 24, 2019 */ @font-face { font-family: 'fira_sansmedium'; src: url('font/firasans-medium-webfont.woff2') format('woff2'), url('font/firasans-medium-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'fira_sansmedium_italic'; src: url('font/firasans-mediumitalic-webfont.woff2') format('woff2'), url('font/firasans-mediumitalic-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } /* @font-face { font-family: 'fira_sansbook'; src: url('font/firasans-book-webfont.woff2') format('woff2'), url('font/firasans-book-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'fira_sansbook_italic'; src: url('font/firasans-bookitalic-webfont.woff2') format('woff2'), url('font/firasans-bookitalic-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } */ @font-face { font-family: 'fira_sanslight'; src: url('font/firasans-light-webfont.woff2') format('woff2'), url('font/firasans-light-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'fira_sanslight_italic'; src: url('font/firasans-lightitalic-webfont.woff2') format('woff2'), url('font/firasans-lightitalic-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'fira_sansultralight'; src: url('font/firasans-ultralight-webfont.woff2') format('woff2'), url('font/firasans-ultralight-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } /* @font-face { font-family: 'fira_sansthin'; src: url('font/firasans-thin-webfont.woff2') format('woff2'), url('font/firasans-thin-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'fira_sanshair'; src: url('font/firasans-hair-webfont.woff2') format('woff2'), url('font/firasans-hair-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'fira_sanseight'; src: url('font/firasans-eight-webfont.woff2') format('woff2'), url('font/firasans-eight-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } */ @charset "UTF-8"; @-ms-viewport { width: extend-to-zoom; zoom: 1.0; } html, body, td { color: #231f20; width: 100%; height: 100%; margin:0px; padding: 0px; vertical-align: top; font-family: 'fira_sanslight', sans-serif; font-size: 1rem; line-height: 1.5rem; letter-spacing: 0.03rem; text-align: left; background-color:white; -moz-hyphens: auto; -o-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: grayscale; } table, table.rstable { width: 100%; border-collapse:collapse; background-color: transparent; } td { background-color: transparent; } .rsTD { width: auto; margin: 0px; padding: 0.1rem 0.2rem 0.2rem 0px; border-top:3px solid #fff; background-color: transparent; } /***************** Tags ***************/ h1, h2, h3 { display: inline-block; font-weight: normal; margin: 0px; font-family: 'fira_sanslight', sans-serif; letter-spacing:0px; -moz-hyphens: none; -o-hyphens: none; -webkit-hyphens: none; -ms-hyphens: none; hyphens: none; } h1 { font-family: 'fira_sansultralight', sans-serif; display: block; text-align: center; font-size: 3.25vw; line-height: 4.25vw; } h2 { display: block; text-align: center; font-size: 2vw; line-height: 2.5vw; } h3 { font-family: 'fira_sansmedium', sans-serif; font-size: 1rem; line-height: 1.5rem; letter-spacing: 0.03rem; padding-top: 0.5rem; } b { font-family: 'fira_sansmedium', sans-serif; font-weight: normal; } i { font-family: 'fira_sanslight_italic', sans-serif; font-weight: normal; font-style: normal; } b i, i b { font-family: 'fira_sansmedium_italic', sans-serif; font-weight: normal; font-style: normal; } sup { display: inline-block; margin-top: -0.5rem; } .rot { color: red; } ul, ol { padding: 0px; margin: 0px; } li { margin: 0.6rem 0px 0.4rem 1.3rem; padding: 0px 0px 0px 0.2rem; line-height: 1.3rem; } hr { height:0px; border:0px; border-top:1px solid black; margin: 1rem 0px; clear: both; } a:link, a:visited, a:active, a:focus, a:hover { text-decoration: none; color: black; border:0px; outline: none; border-bottom:1px solid black; margin-bottom: -1px; } a:hover { border-bottom: 2px dashed black; margin-bottom: -2px; } img, a img, p a img, a.rsBildlink { display: block; padding: 0px; margin: 0px; border: 0px; text-decoration: none; outline: none; } .film_container3x4, .film_container16x9 { padding-bottom: 75%; /* bei 3x4 */ position: relative; height: 0; overflow: hidden; width: 100%; height: auto; } .film_container16x9 { padding-bottom: 56.25%; /* bei 16x9 */ } .film_container16x9 iframe, .film_container3x4 iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: gray; } /***************** Inhalt ****************/ #linksabdecker, #rechtsabdecker { display: none; width: calc((100% - 1000px) / 2 - 2rem); height: 100%; position: fixed; left: 0px; top: 0px; background-color: white; border-right: 1px solid black; } #rechtsabdecker { left: calc(100% - ((100% - 1000px) / 2 - 2rem)); border-left: 1px solid black; } .contentbereich { width: 80%; max-width: 1000px; margin: 0px auto; padding: 0px 10% 1rem 10%; } .Textblock_1_1, .Textblock_5_6, .Textblock_3_4, .Textblock_2_3, .Textblock_1_2, .Textblock_1_3, .Textblock_1_4, .Textblock_1_6 { display: inline-block; vertical-align: top; text-align:left; margin: 0px; padding: 0.75rem 1rem 0.75rem 0px; background-color:#fff; } .Textblock_1_1 { width: calc(100% - 1rem); } .Textblock_5_6 { width: calc(83.3333333333% - 1rem); } .Textblock_3_4 { width: calc(75% - 1rem); } .Textblock_2_3 { width: calc(66.6666666666% - 1rem); } .Textblock_1_2 { width: calc(50% - 1rem); } .Textblock_1_3 { width: calc(33.3333333333% - 1rem); } .Textblock_1_4 { width: calc(25% - 1rem); } .Textblock_1_6 { width: calc(16.6666666666% - 1rem); } .Textabstand, .Textabstand_lange_Zeilen { width: 100%; margin: 0px; padding: 0px; } .Textabstand { max-width: 42rem; } .Textblock_1_6 .Textabstand { font-family: 'fira_sanslight', sans-serif; font-size: 0.8em; line-height: 1.2em; letter-spacing: 0rem; } .Bild { width: 100%; max-width: calc(1000px + 4rem); padding: 0px; margin: 0px auto 1rem auto; } .Legende, .LegendeGrossbild { font-family: 'fira_sanslight_italic', sans-serif; max-width: 1000px; margin: 0px auto; } .Legende { width: 100%; margin-top: -0.5rem; } .LegendeGrossbild { width: calc(100% - 4rem); padding: 0rem auto 3rem auto; margin-top:-0.5rem; margin-bottom: 2rem; } .klein { font-size: 0.8em; line-height: 1.2em; } .Abstand { width: 100%; height: 2rem; } /************* Kontaktformular ***********/ #kontaktformular { font-family: 'fira_sanslight', sans-serif; font-size: 0.8rem; width: 100%; } .Mitteilungsarea { font-family: 'fira_sanslight', sans-serif; font-size: 1rem; width: calc(100% - 0.5rem); height: 8rem; margin: 0.3rem 0px 1.5rem 0px; padding: 0.5rem; } input { font-family: 'fira_sanslight', sans-serif; font-size: 1rem; display: block; width: calc(100% - 0.5rem); height: 2rem; margin: -0.2rem 0px 1rem 0rem; padding: 0rem 0.5rem; } select { -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 8px; border:1px solid silver; cursor:pointer; background: url("../pic/open.gif") no-repeat center right; background-color: #fff; font-family: 'fira_sanslight', sans-serif; font-size: 0.8rem; height: 2rem; width: calc(100% - 0.5rem); margin: 1rem 0px; padding: 0rem 2rem 0rem 0.5rem; } input.Absendebutton { font-family: 'fira_sanslight', sans-serif; font-size: 0.8rem; letter-spacing: 0.05rem; display: block; width: auto; height: auto; margin: 1rem 0px 1rem 0rem; padding: 0.2rem 0.5rem; } #DankMeldungRot, #DankMeldungGruen { font-family: 'fira_sansmedium', sans-serif; font-size: 1rem; color: white; background-color: #c30; width: calc(100% - 2.5rem); margin: 1rem 0px 0px 0px; padding: 0.5rem 1rem; } #DankMeldungGruen { background-color: #093; } /****************** Kopf ****************/ #kopf { width: 100%; text-align:center; } #kopflink, #kopflink:link, #kopflink:visited, #kopflink:active, #kopflink:hover { display:block; width: 100%; text-align:center; border:none; padding: 0px 0px 4vw 0px; margin: 0px; } #kopflink:hover { background-color: #efefef; } #logo { display:inline-block; width: 60%; max-width:700px; padding: 5vw 0vw 0vw 0vw; } /********* Infomenue **********/ #infomenue { position:fixed; bottom: 0px; right: 0px; width:100%; background-color:#fff; border-top: 1px solid black; text-align:center; } .infomenuecontainer{ display:inline-block; } #infomenue a.nav, #infomenue a.nav:link, #infomenue a.nav:visited, #infomenue a.nav:active, #infomenue a.nav:hover, #infomenue a.navX, #infomenue a.navX:link, #infomenue a.navX:visited, #infomenue a.navX:active, #infomenue a.navX:hover { display:inline-block; font-size: 0.8rem; line-height: 1rem; padding: 0.5rem 1rem 1rem 1rem; font-family: 'fira_sanslight', sans-serif; font-weight: normal; whitespace: nowrap; text-decoration: none; color: #231f20; border: none; outline: none; } #infomenue a.navX, #infomenue a.navX:link, #infomenue a.navX:visited, #infomenue a.navX:active, #infomenue a.navX:hover { font-family: 'fira_sansmedium', sans-serif; } #infomenue a.nav:hover, #infomenue a.navX:hover { background-color: #efefef; } /***************** Menü ****************/ .closePfeilbereich { width: 100%; height: 6vw; margin: 0px; padding:0px; text-align:center; } a.pfeillink, a.pfeillink:link, a.pfeillink:visited, a.pfeillink:active, a.pfeillink:hover { display:block; width: 100%; height: 6vw; text-align:center; border: none; outline: none; text-decoration: none; background-color: red; background-color: green; background-color: transparent; } a.pfeillink:hover { background-color: #efefef; } img.pfeilpic { display:inline-block; width: 6vw; height: 6vw; background-color: green; background-color: transparent; } .menuecontainer { float:left; width: 100%; margin: 0px; padding:0px; } a.nav1, a.nav1:link, a.nav1:visited, a.nav1:active, a.nav1:hover, a.nav1X, a.nav1X:link, a.nav1X:visited, a.nav1X:active, a.nav1X:hover, a.nav1A, a.nav1A:link, a.nav1A:visited, a.nav1A:active, a.nav1A:hover, a.nav2, a.nav2:link, a.nav2:visited, a.nav2:active, a.nav2:hover, a.nav2X, a.nav2X:link, a.nav2X:visited, a.nav2X:active, a.nav2X:hover, a.nav2A, a.nav2A:link, a.nav2A:visited, a.nav2A:active, a.nav2A:hover { display: block; width: 80%; color: #231f20; border: none; border-top: 1px solid black; outline: none; margin: 0px; padding: 2vw 10% 2vw 10%; text-decoration: none; text-align: center; } a.nav1:hover, a.nav2:hover { background-color: #efefef; } #bottomspace { display: block; height: 6rem; } @charset "UTF-8"; @media screen and (min-width:1080px) { h1 { font-size: 39px; line-height: 51px; } h2 { font-size: 24px; line-height: 30px; } /****************** Kopf ****************/ #kopflink, #kopflink:link, #kopflink:visited, #kopflink:active, #kopflink:hover { padding: 0px 0px 48px 0px; } #logo { padding: 60px 0vw 0vw 0vw; } /***************** Inhalt ****************/ #linksabdecker, #rechtsabdecker { display: block; } /***************** Menü ****************/ .closePfeilbereich { max-height:72px; } a.pfeillink, a.pfeillink:link, a.pfeillink:visited, a.pfeillink:active, a.pfeillink:hover { max-height:72px; } a.pfeillink:hover { background-color: #efefef; } img.pfeilpic { width: 6vw; height: 6vw; max-height:72px; max-width:72px; } a.nav1, a.nav1:link, a.nav1:visited, a.nav1:active, a.nav1:hover, a.nav1X, a.nav1X:link, a.nav1X:visited, a.nav1X:active, a.nav1X:hover, a.nav1A, a.nav1A:link, a.nav1A:visited, a.nav1A:active, a.nav1A:hover, a.nav2, a.nav2:link, a.nav2:visited, a.nav2:active, a.nav2:hover, a.nav2X, a.nav2X:link, a.nav2X:visited, a.nav2X:active, a.nav2X:hover, a.nav2A, a.nav2A:link, a.nav2A:visited, a.nav2A:active, a.nav2A:hover { padding: 24px 10% 24px 10%; } } @charset "UTF-8"; /* CSS Document */ @media screen and (max-width:900px) { h1 { font-family: 'fira_sanslight', sans-serif; font-size: 2rem; line-height: 2.5rem; } h2 { font-size: 1.5rem; line-height: 2rem; } h3 { font-size: 1rem; line-height: 1.5rem; letter-spacing: 0.03rem; } /***************** Inhalt ****************/ .Textblock_5_6 { width: calc(100% - 1rem); } .Textblock_1_6 { width: calc(25% - 1rem); } .Textblock_1_4 .Textabstand, .Textblock_1_3 .Textabstand { font-family: 'fira_sanslight', sans-serif; font-size: 0.8em; line-height: 1.2em; letter-spacing: 0rem; } } @charset "UTF-8"; /* CSS Document */ @media screen and (max-width:700px) { html, body, td { font-size: 1.1rem; line-height: 1.7rem; } h1 { font-size: 1.5rem; line-height: 2rem; } h2 { font-size: 1.3rem; line-height: 1.8rem; } #logo { display:inline-block; width: calc(90% - 2rem); width: 90%; padding: 5vw 0.5rem 0vw 0.5rem; } #kopflink, #kopflink:link, #kopflink:visited, #kopflink:active, #kopflink:hover { font-size: 4.7vw; line-height: 7vw; letter-spacing: 0.1vw; } /***************** Inhalt ****************/ .contentbereich { width: 90%; padding: 0px 5% 1rem 5%; } .Textblock_1_6 { width: calc(33.3333333333% - 1rem); } .Textblock_1_4 { width: calc(50% - 1rem); } .Textblock_3_4, .Textblock_1_2 { width: calc(100% - 1rem); } .Textblock_1_4 .Textabstand, .Textblock_1_3 .Textabstand { width: calc(100% - 1rem); font-size: 1.1rem; line-height: 1.7rem; letter-spacing: 0.03rem; } .Textblock_2_3, .Textblock_1_3 { width: calc(100% - 1rem); } .LegendeGrossbild { width: 90%; padding: 0px 5% 1rem 5%; } a.nav1, a.nav1:link, a.nav1:visited, a.nav1:active, a.nav1:hover, a.nav1X, a.nav1X:link, a.nav1X:visited, a.nav1X:active, a.nav1X:hover, a.nav1A, a.nav1A:link, a.nav1A:visited, a.nav1A:active, a.nav1A:hover, a.nav2, a.nav2:link, a.nav2:visited, a.nav2:active, a.nav2:hover, a.nav2X, a.nav2X:link, a.nav2X:visited, a.nav2X:active, a.nav2X:hover, a.nav2A, a.nav2A:link, a.nav2A:visited, a.nav2A:active, a.nav2A:hover, a.nav3, a.nav3:link, a.nav3:visited, a.nav3:active, a.nav3:hover, a.nav3X, a.nav3X:link, a.nav3X:visited, a.nav3X:active, a.nav3X:hover, a.nav3A, a.nav3A:link, a.nav3A:visited, a.nav3A:active, a.nav3A:hover { display: block; width: 90%; color: black; border: none; border-top: 1px solid black; outline: none; margin: 0px; padding: 4vw 5% 4vw 5%; text-decoration: none; } /********* Infomenue **********/ #infomenue { float:left; position:relative; padding:0.5rem 0px 0.75rem 0px; } #infomenue a.nav, #infomenue a.nav:link, #infomenue a.nav:visited, #infomenue a.nav:active, #infomenue a.nav:hover, #infomenue a.navX, #infomenue a.navX:link, #infomenue a.navX:visited, #infomenue a.navX:active, #infomenue a.navX:hover { display:block; font-size: 0.8rem; line-height: 1rem; padding: 0.25rem 0.5rem 0.25rem 0.5rem; } #bottomspace { height: 0px; } .closePfeilbereich, a.pfeillink, a.pfeillink:link, a.pfeillink:visited, a.pfeillink:active, a.pfeillink:hover { height: 3rem } img.pfeilpic { width: 3rem; height: 3rem; } } @charset "UTF-8"; /* CSS Document */ @media screen and (max-width:400px) { .Textblock_1_1, .Textblock_5_6, .Textblock_3_4, .Textblock_2_3, .Textblock_1_2, .Textblock_1_3, .Textblock_1_4 { width: calc(100% - 1rem); } .Textblock_1_6 { width: calc(50% - 1rem); } .Textblock_1_6 .Textabstand, .Textblock_1_4 .Textabstand { font-size: 1.1rem; line-height: 1.7rem; letter-spacing: 0.03rem; } /************* Kontaktformular ***********/ .Mitteilungsarea, input, select { width: 100%; width: calc(100% + 0.25rem); } }