/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on May 24, 2019 */ @font-face { font-family: 'greatvibes_regular'; src: url('font/greatvibes_regular.woff') format('woff'); font-weight: normal; font-style: normal; }@font-face { font-family: 'rajdhani_bold'; src: url('font/rajdhani_bold.woff') format('woff'); font-weight: normal; font-style: normal; }@font-face { font-family: 'rajdhani_light'; src: url('font/rajdhani_light.woff') format('woff'); font-weight: normal; font-style: normal; }@font-face { font-family: 'rajdhani_medium'; src: url('font/rajdhani_medium.woff') format('woff'); font-weight: normal; font-style: normal; }@font-face { font-family: 'rajdhani_regular'; src: url('font/rajdhani_regular.woff') format('woff'); font-weight: normal; font-style: normal; }@font-face { font-family: 'rajdhani_semibold'; src: url('font/rajdhani_semibold.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: 'rajdhani_medium', 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; background-color: #efefef; } 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: 'rajdhani_light', sans-serif; letter-spacing:0px; -moz-hyphens: none; -o-hyphens: none; -webkit-hyphens: none; -ms-hyphens: none; hyphens: none; } h1 { display: block; font-size: 3.25vw; line-height: 4.25vw; } a.h1, a.h2 { text-align: center; } h2 { display: block; font-size: 2.5vw; line-height: 3.2vw; } h3 { font-family: 'rajdhani_semibold', sans-serif; font-size: 1rem; line-height: 1.5rem; letter-spacing: 0.03rem; padding: 1rem 0rem 0.5rem 0rem; } b { font-family: 'rajdhani_semibold', sans-serif; font-weight: 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; max-wide:100vw; } .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 ****************/ .contentbereich { width: 80%; max-width: 1200px; 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, .Textabstand_zentrieren, .Textabstand_mittelachse, .Textabstand_zentrieren_mittelachse { width: 100%; margin: 0px; padding: 0px; max-width: 42rem; } .Textabstand_lange_Zeilen { max-width: auto; } .Textabstand_zentrieren, .Textabstand_zentrieren_mittelachse { margin: 0px auto; } .Textabstand_mittelachse, .Textabstand_zentrieren_mittelachse { text-align:center; } .Textblock_1_6 .Textabstand, .Textblock_1_6 .Textabstand_lange_Zeilen, .Textblock_1_6 .Textabstand_zentrieren, .Textblock_1_6 .Textabstand_mittelachse, .Textblock_1_6 .Textabstand_zentrieren_mittelachse { font-family: 'rajdhani_light', sans-serif; font-size: 0.8em; line-height: 1.2em; letter-spacing: 0rem; } .Bild { max-hight: 10rem; padding: 0px; margin: 0px auto 1rem auto; } .BildBalken { width: 100%; text-align:center; padding: 0px; margin: 0px auto; background-color: yellow; background-color: #efefef; height: 27rem; max-height:50vw; max-height:40vw; } .BildimBalken { display:inline-block; padding: 0px; margin: 0px auto -0.5rem auto; height:100%; overflow: hidden; max-width:calc(100vw - 1rem); } img.BildimBalken { display:inline-block; position:relative; height:100%; left:50%; transform: translate(-50%,0); } .Legende, .LegendeGrossbild { font-family: 'rajdhani_light', sans-serif; max-width: 1200px; margin: 0px auto; } .Legende { width: 100%; margin-top: -0.5rem; } .LegendeGrossbild { width: 80%; padding: 0rem auto 3rem auto; margin-top: 1rem; margin-bottom: 2rem; } .klein { font-size: 0.8em; line-height: 1.2em; } .Abstand { width: 100%; height: 2rem; } /************* Kontaktformular ***********/ #kontaktformular { font-family: 'rajdhani_light', sans-serif; font-size: 0.8rem; width: 100%; } .Mitteilungsarea { font-family: 'rajdhani_light', 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: 'rajdhani_light', 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: 'rajdhani_light', 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: 'rajdhani_light', 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: 'rajdhani_semibold', 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; height: auto; background-color: white; } a#logo, a#logo:link, a#logo:visited, a#logo:active, a#logo:hover { display:block; font-size: 7vw; padding: 5vw 0vw 0vw 0vw; font-family: 'greatvibes_regular', sans-serif; font-weight: normal; whitespace: nowrap; text-decoration: none; color: #de0052; border: none; outline: none; } #untertitel { font-family: 'rajdhani_medium', sans-serif; font-size: 1rem; line-height: 1.5rem; color:black; padding: 2vw; } a#logo:hover { background-color: #efefef; border-bottom: 1px solid white; } /********* Fuss **********/ #Fusstext { font-family: 'rajdhani_medium', sans-serif; font-size: 1.2rem; line-height: 1.5rem; color:black; whitespace: nowrap; text-align:center; padding: 2vw 0rem 0px 0px; background-color: #efefef; -moz-hyphens: none; -o-hyphens: none; -webkit-hyphens: none; -ms-hyphens: none; hyphens: none; } #Fusstext h3 { display:block; font-family: 'rajdhani_medium', sans-serif; font-size: 1.8rem; line-height: 2.1rem; font-weight: normal; color:black; text-align:center; } #icons { display:block; text-align:center; } a.icon, a.icon:link, a.icon:visited, a.icon:active, a.icon:hover { display:inline-block; padding: 1rem; margin:0px; border: none; outline: none; text-decoration: none; } a.icon:hover { background-color: #fff; } /********* Infomenue **********/ #infomenue { width: calc(100% + 1rem); width: 100%; border-top: 1px solid gray; display:block; text-align:right; } .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 0.5rem 1rem; font-family: 'rajdhani_light', 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: 'rajdhani_regular', sans-serif; } #infomenue a.nav:hover, #infomenue a.navX:hover { background-color: white; } /***************** 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; background-color: white; background-size:cover; } 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; } #bottomspaceweiss { height: 20rem; } #bottomspace { height: calc(100vh - 15rem); background-color: #efefef; } @charset "UTF-8"; @media screen and (min-width:1200px) { h1 { font-size: 39px; line-height: 51px; } h2 { font-size: 29px; line-height: 37px; } /****************** Kopf ****************/ a#logo, a#logo:link, a#logo:visited, a#logo:active, a#logo:hover { font-size: 5rem; height: 5rem; padding: 3.5rem 0vw 0vw 0vw; } #untertitel { padding-top: 1.5rem; } a#logo:hover { border-bottom: 1px solid white; } /***************** 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-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; } /***************** Kopf ****************/ a#logo, a#logo:link, a#logo:visited, a#logo:active, a#logo:hover { font-size: 10vw; padding: 7vw 0vw 0vw 0vw; } #untertitel { padding: 4vw 2vw 2vw 2vw; } /***************** Inhalt ****************/ .Textblock_5_6 { width: calc(100% - 1rem); } .Textblock_1_6 { width: calc(25% - 1rem); } .Textblock_1_4 .Textabstand, .Textblock_1_3 .Textabstand { 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; } h3 { font-size: 1.1rem; line-height: 1.7rem; } /***************** Kopf ****************/ a#logo, a#logo:link, a#logo:visited, a#logo:active, a#logo:hover { font-size: 12vw; padding: 8vw 0vw 0vw 0vw; } /***************** 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); } .BildBalken { width: 100%; overflow:hidden; } .BildimBalken { height:100%; } img.BildimBalken { left:0px; transform: none; } .LegendeGrossbild { width: 80%; padding: 0rem auto 3rem auto; margin-top: 1rem; margin-bottom: 2rem; } .LegendeGrossbild { padding: 0px 5% 1rem 5%; width: auto; } 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 **********/ #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) { /***************** Kopf ****************/ a#logo, a#logo:link, a#logo:visited, a#logo:active, a#logo:hover { font-size: 14vw; padding: 8vw 0vw 0vw 0vw; } #untertitel { padding: 1vw 2vw 2vw 2vw; font-size: 4vw; line-height: 6vw; } /***************** Inhalt ****************/ .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); } } @charset "UTF-8"; /* CSS Document */ #DiaAnkerbereich { position:relative; } #Dia { position:absolute; top:0rem; } .Galeriebereich { position:relative; width: 100%; padding: 0px; margin: 0px auto; background-color: #efefef; } .Diasteuerung { position: absolute; width: 100%; top:0px; left: 0px; color: white; display: block; } a.bildzurueck, a.bildzurueck:link, a.bildzurueck:visited, a.bildzurueck:hover, a.bildzurueck:active, a.bildzurueck:focus, a.bildweiter, a.bildweiter:link, a.bildweiter:visited, a.bildweiter:hover, a.bildweiter:active, a.bildweiter:focus { position: absolute; width: 50%; height:100%; top:0px; left: 0px; color: white; display: block; background-repeat:no-repeat; background-size:3rem; text-decoration: none; outline: none; border: none; cursor: pointer; } a.bildzurueck, a.bildzurueck:link, a.bildzurueck:visited, a.bildzurueck:hover, a.bildzurueck:active, a.bildzurueck:focus { background-image:url("pic/Pfeil_Links.png"); background-position:left 45%; } a.bildweiter, a.bildweiter:link, a.bildweiter:visited, a.bildweiter:hover, a.bildweiter:active, a.bildweiter:focus { left: 50%; text-align: right; background-image:url("pic/Pfeil_Rechts.png"); background-position:right 45%; } a.bildweiter:hover { background-image:url("pic/Pfeil_Rechts_H.png"); } a.bildzurueck:hover { background-image:url("pic/Pfeil_Links_H.png"); } .zurueck, .zurueck:link, .zurueck:visited, .zurueck:hover, .zurueck:active, .zurueck:focus{ position: absolute; width: 100%; height:4rem; top:0px; left:0px; display: block; background-repeat:no-repeat; background-size:3rem; text-decoration: none; outline: none; border: none; background-image:url("pic/Pfeil_oben.png"); background-position:50% 0px; } .zurueck:hover { background-image:url("pic/../Pfeil_oben_H.png"); background-color: rgba(100, 110, 100, 0.3); background-color: transparent; }