/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on October 10, 2020 */ @font-face { font-family: 'cormorant_regular'; src: url('font/cormorant/cormorant_regular.woff2') format('woff2'), url('font/cormorant/cormorant_regular.woff') format('woff'); font-weight: normal; font-style: normal;} @font-face { font-family: 'cormorant_bold'; src: url('font/cormorant/cormorant_bold.woff2') format('woff2'), url('font/cormorant/cormorant_bold.woff') format('woff'); font-weight: normal; font-style: normal;} @font-face { font-family: 'cormorant_light_italic'; src: url('font/cormorant/cormorant_lightitalic.woff2') format('woff2'), url('font/cormorant/cormorant_lightitalic.woff') format('woff'); font-weight: normal; font-style: normal;} @font-face { font-family: 'cormorant_italic'; src: url('font/cormorant/cormorant_italic.woff2') format('woff2'), url('font/cormorant/cormorant_italic.woff') format('woff'); font-weight: normal; font-style: normal;} /* @font-face { font-family: 'cormorant_bold_italic'; src: url('font/cormorant/cormorant_bolditalic.woff2') format('woff2'), url('font/cormorant/cormorant_bolditalic.woff') format('woff'); font-weight: normal; font-style: normal;} @font-face { font-family: 'cormorant_light'; src: url('font/cormorant/cormorant_light.woff2') format('woff2'), url('font/cormorant/cormorant_light.woff') format('woff'); font-weight: normal; font-style: normal;} @font-face { font-family: 'cormorant_medium'; src: url('font/cormorant/cormorant_medium.woff2') format('woff2'), url('font/cormorant/cormorant_medium.woff') format('woff'); font-weight: normal; font-style: normal;} @font-face { font-family: 'cormorant_medium_italic'; src: url('font/cormorant/cormorant_mediumitalic.woff2') format('woff2'), url('font/cormorant/cormorant_mediumitalic.woff') format('woff'); font-weight: normal; font-style: normal;} @font-face { font-family: 'cormorant_semibold'; src: url('font/cormorant/cormorant_semibold.woff2') format('woff2'), url('font/cormorant/cormorant_semibold.woff') format('woff'); font-weight: normal; font-style: normal;} @font-face { font-family: 'cormorant_semibold_italic'; src: url('font/cormorant/cormorant_semibolditalic.woff2') format('woff2'), url('font/cormorant/cormorant_semibolditalic.woff') format('woff'); font-weight: normal; font-style: normal;} */ /*! Generated by Font Squirrel (https://www.fontsquirrel.com) on January 11, 2019 */ /* @font-face { font-family: 'josthairline'; src: url('font/jost/jost-100-hairline-webfont.woff2') format('woff2'), url('font/jost/jost-100-hairline-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'josthairlineitalic'; src: url('font/jost/jost-100-hairlineitalic-webfont.woff2') format('woff2'), url('font/jost/jost-100-hairlineitalic-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'jostthin'; src: url('font/jost/jost-200-thin-webfont.woff2') format('woff2'), url('font/jost/jost-200-thin-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'jostthinitalic'; src: url('font/jost/jost-200-thinitalic-webfont.woff2') format('woff2'), url('font/jost/jost-200-thinitalic-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } */ @font-face { font-family: 'jostlight'; src: url('font/jost/jost-300-light-webfont.woff2') format('woff2'), url('font/jost/jost-300-light-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } /* @font-face { font-family: 'jostlightitalic'; src: url('font/jost/jost-300-lightitalic-webfont.woff2') format('woff2'), url('font/jost/jost-300-lightitalic-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } */ @font-face { font-family: 'jostbook'; src: url('font/jost/jost-400-book-webfont.woff2') format('woff2'), url('font/jost/jost-400-book-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } /* @font-face { font-family: 'jostbookitalic'; src: url('font/jost/jost-400-bookitalic-webfont.woff2') format('woff2'), url('font/jost/jost-400-bookitalic-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } */ @font-face { font-family: 'jostmedium'; src: url('font/jost/jost-500-medium-webfont.woff2') format('woff2'), url('font/jost/jost-500-medium-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } /* @font-face { font-family: 'jostmediumitalic'; src: url('font/jost/jost-500-mediumitalic-webfont.woff2') format('woff2'), url('font/jost/jost-500-mediumitalic-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'jostsemi'; src: url('font/jost/jost-600-semi-webfont.woff2') format('woff2'), url('font/jost/jost-600-semi-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'jostsemiitalic'; src: url('font/jost/jost-600-semiitalic-webfont.woff2') format('woff2'), url('font/jost/jost-600-semiitalic-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'jostbold'; src: url('font/jost/jost-700-bold-webfont.woff2') format('woff2'), url('font/jost/jost-700-bold-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'jostbolditalic'; src: url('font/jost/jost-700-bolditalic-webfont.woff2') format('woff2'), url('font/jost/jost-700-bolditalic-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } */ @font-face { font-family: 'jostheavy'; src: url('font/jost/jost-800-heavy-webfont.woff2') format('woff2'), url('font/jost/jost-800-heavy-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } /* @font-face { font-family: 'jostheavyitalic'; src: url('font/jost/jost-800-heavyitalic-webfont.woff2') format('woff2'), url('font/jost/jost-800-heavyitalic-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'jostblack'; src: url('font/jost/jost-900-black-webfont.woff2') format('woff2'), url('font/jost/jost-900-black-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'jostblackitalic'; src: url('font/jost/jost-900-blackitalic-webfont.woff2') format('woff2'), url('font/jost/jost-900-blackitalic-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } */ /*! Generated by Font Squirrel (https://www.fontsquirrel.com) on October 10, 2020 */ @font-face { font-family: 'scriptina'; src: url('font/scriptina/scriptina_pro.woff2') format('woff2'), url('font/scriptina/scriptina_pro.woff') format('woff'); font-weight: normal; font-style: normal; } @charset "UTF-8"; /* CSS Document */ @-ms-viewport{ width: extend-to-zoom; zoom: 1.0;} * { box-sizing: border-box; } body { margin: 0px; padding: 0px; width: 100%; height: 100%; background-image: url(pic/Hintergrund-innerer-Freiheit.jpg); background-attachment: fixed; background-repeat:no-repeat; background-size: cover; vertical-align: top; text-align: left; color: black; font-family: "cormorant_regular", serif; font-weight: normal; font-size: 1.25rem; line-height: 2rem; letter-spacing: 0.03rem; -moz-hyphens: auto; -o-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: grayscale; } table, tr, td { border-collapse:collapse; font-size: 1rem; border:none; } td .rsTD { margin:0px; padding: 0.25rem 0.5rem 0.25rem 0px; vertical-align:top; text-align:left; font-family: "cormorant_regular", serif; font-weight: normal; border-top:1px solid #ddd; border-bottom:1px solid #ddd; } /************** Tags **************/ h1 { margin: 1rem 0rem 0.5rem 0rem; font-family: "jostmedium", serif; font-weight: normal; font-size: 1.8rem; line-height: 2.1rem; letter-spacing: 0.1rem; } h2 { margin: 0.5rem 0rem 0.2rem 0rem; font-family: "jostmedium", sans-serif; font-weight: normal; font-size: 1.25rem; line-height: 2rem; } h3 { margin: 0.3rem 0px 0px 0px; font-family: "cormorant_bold", serif; font-weight: normal; font-size: 1.25rem; line-height: 2rem; letter-spacing: 0px; } .klein { font-size: 1rem; line-height: 1.1rem; } b { font-family: "cormorant_bold", serif; font-weight: normal; } i { font-family: "cormorant_light_italic", serif; font-weight: normal; } b i, i b { font-family: "cormorant_italic", serif; font-weight: normal; } ol, ul { margin-top: 0px; margin-bottom: 0px; } li { padding-top: 7px; left: -10px; position: relative; } sup { font-size: 0.65rem; line-height: 0.7rem; } hr { height:0px; border:0px; border-top:1px solid #5a605f; margin: 1rem 0px; clear: both; } a:link, a:visited, a:hover, a:active, a:focus { color: #006090; text-decoration: none; padding: 0px 0px 1px 0px; border-bottom:1px solid #006090; } a:hover, a:active, a:focus { outline: none; border-bottom:2px dashed #006090; padding: 0px; } img, a img, p a img { display: block; padding: 0px; margin: 0px; border: 0px; text-decoration: none; outline: none; } /****************** Kopf *****************/ #kopf { float:left; width: 100%; height:11rem; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; } #Kopftitel { position:absolute; padding: 2rem 0px 2.5rem 5rem; font-size: 4.5rem; line-height: 5rem; letter-spacing: 0.75rem; } #Kopfuntertitel { position:absolute; right:2rem; top:7.5rem; padding: 0px; font-family: "jostbook", sans-serif; text-transform:uppercase; font-weight: normal; color:white; font-size: 1.9rem; line-height: 2rem; letter-spacing: 0rem; } #mit { display:inline-block; position:relative; left:-0.75rem; top:-0.2rem; font-family: "scriptina", serif; font-weight: normal; text-transform:lowercase; font-size: 1.4rem; line-height: 1rem; letter-spacing: 0.3rem; } a.titellink, a.titellink:link, a.titellink:visited, a.titellink:active, a.titellink:hover { color: #006090; text-decoration: none; font-family: "scriptina", serif; font-weight: normal; border: 0px; text-decoration: none; outline: none; } a.titellink:hover { color: black; } /***************** Inhalt ****************/ #bodywrapper { float:left; width: 100%; margin: 0px; padding: 0px; z-index: 20; background-color: rgba(255, 255, 255, 0.75); } #contentspalte { float:right; width:72%; margin: 2.5rem 0px 3.5rem 0px; padding: 0px; } .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; padding: 0px 0px 1rem 0px; margin: 0rem; } .Textblock_1_1 { width: calc(100% - 1rem); } .Textblock_5_6 { width: calc(83.3333333333% - 0.8333333rem); } .Textblock_3_4 { width: calc(75% - 0.75rem); } .Textblock_2_3 { width: calc(66.6666666666% - 0.6666666rem); } .Textblock_1_2 { width: calc(50% - 0.5rem); } .Textblock_1_3 { width: calc(33.3333333333% - 0.3333333rem); } .Textblock_1_4 { width: calc(25% - 0.25rem); } .Textblock_1_6 { width: calc(16.6666666666% - 0.1666666rem); } .Textabstand { width: calc(100% - 1.5rem); margin: 0px; padding: 0.75rem 0px; } .Bild { width: 100%; padding: 0px; margin: 0px; } .Abstand { width: 100%; height: 1rem; } /************* Kontaktformular ***********/ #kontaktformular { font-family: 'jostbook', sans-serif; font-size: 0.9rem; width: 100%; } #kontaktformular h2{ font-family: "cormorant_regular", serif; font-size: 1.5rem; } h2.adressat{ padding-top:2rem; } .Mitteilungsarea { font-family: 'jostlight', sans-serif; font-size: 1rem; width: calc(100% - 0.5rem); height: 8rem; margin: 0.3rem 0px 1.5rem 0px; padding: 0.5rem; border:1px solid black; } input { font-family: 'jostlight', sans-serif; font-size: 1rem; display: block; width: calc(100% - 0.5rem); height: 2rem; margin: -0.2rem 0px 1rem 0rem; padding: 0rem 0.5rem; border:1px solid black; } #kreuzkastbereich { line-height:2rem; margin: 1.5rem 0px 1.5rem 0px; padding: 0px; } .kreuzkast { position:relative; top:0.5rem; display: inline; width: 2rem; margin: 0px; padding: 0px; } /* remove standard-styles */ input.kreuzkast, input.kreuzkast:hover, input.kreuzkast:active, input.kreuzkast[type='checkbox'], input.kreuzkast[type='checkbox']:hover, input.kreuzkast[type='checkbox']:checked, input.kreuzkast[type='checkbox']:not(:checked){ -webkit-appearance: none; -moz-appearance: none; appearance: none; float:left; width:auto; border:none; border-radius: 0px; padding: 0px; margin: 3px 5px 0px 0px; background-color:transparent; } /* add custom inputs with ::before */ input.kreuzkast[type='checkbox'], input.kreuzkast[type='checkbox']:hover, input.kreuzkast[type='checkbox']:checked, input.kreuzkast[type='checkbox']:not(:checked) { position:relative; top:0px; left:0px; display: block; width: 1.3rem; height: 1.3rem; border: 1px solid black; border-radius: 0px; background-color: white; background-image:url(pic/check.png); background-repeat:no-repeat; background-position:center; background-size:1.3rem; } input.kreuzkast[type='checkbox']:not(:checked) { background-image: none; } input.kreuzkast[type='checkbox']:checked:hover { background-image:url(pic/checkN.png); } input.kreuzkast[type='checkbox']:hover { background-image:url(pic/checkY.png); } select { -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 8px; border:1px solid black; cursor:pointer; background: url("../pic/open.gif") no-repeat center right; background-color: #fff; font-family: 'jostlight', 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: 'jostlight', 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: 'jostheavy', 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; } /******************* Diaschau ******************/ .Diashow_1_1, .Diashow_1_2 { float: left; padding: 0px; margin: 0px; border: 0px; text-decoration: none; width:100%; } .Diashow_1_2 { width:50%; } .Diaschauanker { position:absolute; margin:-10px; } .Diasteuerung { position:absolute; margin: 20px 20px 20px 10px; } a.Pfeil, a.Pfeil:link, a.Pfeil:visited, a.Pfeil:active, a.Pfeil:hover { display:inline-block; height: 35px; width: 35px; background-color: rgba(255,255,255,0.5); border: 0px; padding: 3px 9px; margin: 0px 0px 0px 10px; outline: transparent none 0px; } a.Pfeil:hover { background-color: white; } /****************** Fuss ***************/ #Fussmenue { position: fixed; bottom:0px; left:0px; float: right; width: 100vw; height: 2rem; padding: 0px 1rem 0px 0px; margin: 0px; text-align: right; background-image: url(pic/Hintergrund-innerer-Freiheit.jpg); background-attachment: fixed; background-repeat:no-repeat; background-size: cover; } #Fussmenue a.nav, #Fussmenue a.nav:link, #Fussmenue a.nav:visited, #Fussmenue a.nav:hover, #Fussmenue a.nav:active, #Fussmenue a.navX, #Fussmenue a.navX:link, #Fussmenue a.navX:visited, #Fussmenue a.navX:hover, #Fussmenue a.navX:active { display:inline-block; width: auto; font-family: "jostlight", sans-serif; text-decoration: none; border:none; outline:none; font-weight: normal; font-size: 1rem; line-height: 1rem; color:white; padding: 0.25rem 1rem; } #Fussmenue a.nav:hover, #Fussmenue a.nav:active, #Fussmenue a.navX, #Fussmenue a.navX:link, #Fussmenue a.navX:visited, #Fussmenue a.navX:hover, #Fussmenue a.navX:active { color:black; background-color: transparent; } /************* Hamburger *********/ #a, a#hamburger, a#hamburgerU { position: absolute; visibility: hidden; left:0px;:hidden; } a#hamburger, a#hamburger:link, a#hamburger:visited, a#hamburger:active, a#hamburger:hover, a#hamburgerU, a#hamburgerU:link, a#hamburgerU:visited, a#hamburgerU:active, a#hamburgerU:hover { float:left; margin: 0px; width:30%; padding: 1rem 2.5rem 1rem 1rem; text-decoration: none; outline: none; border: 0px; background-color:red; background-color: transparent; } a#hamburger img, a#hamburgerU img { float:left; margin: 0px; padding: 0px; background-color:green; background-color: transparent; } a#hamburger img { position: relative; top:1rem; padding-bottom:1rem; } a#hamburgerU, a#hamburgerU:link, a#hamburgerU:visited, a#hamburgerU:active, a#hamburgerU:hover { float:right; padding: 1rem 1rem 1rem 2.5rem; } a#hamburgerU img { float:right; } /*********** Scrollposition *********/ #a { top:0rem; width:100%; } /**************** Menü *************/ #Menuespalte { float:left; width: 25%; padding: 0px 0px 0px 0px; margin: 2rem 0px 0px 0px; } #Menue { float:right; width: 100%; padding: 0px; margin: 0px; -moz-hyphens: none; -o-hyphens: none; -webkit-hyphens: none; -ms-hyphens: none; hyphens: none; } a.nav, a.nav:link, a.nav:visited, a.nav:hover, a.nav:active, a.navX, a.navX:link, a.navX:visited, a.navX:hover, a.navX:active, a.navA, a.navA:link, a.navA:visited, a.navA:hover, a.navA:active { display: block; font-family: "jostlight", sans-serif; text-decoration: none; border:none; outline:none; font-size: 1.3rem; line-height: 1.3rem; margin: 0px; padding-top: 0.5rem; padding-right: 1rem; padding-bottom: 0.5rem; letter-spacing: 0.03em; color: #006090; border-bottom: 2px solid #006090; } a.navA, a.navA:link, a.navA:visited, a.navA:hover, a.navA:active, a.navX, a.navX:link, a.navX:visited, a.navX:hover, a.navX:active { font-family: "jostmedium", sans-serif; color: black; border-bottom-color: black; } a.nav:hover, a.navX:hover, a.navA:hover { background-color: #c3e0f7; } @charset "UTF-8"; /* CSS Document */ @-ms-viewport{ width: extend-to-zoom; zoom: 1.0;} @media screen and (max-width:1100px) { /****************** Kopf *****************/ #kopf { height:16vw; } #Kopftitel { padding: 4vw 0px 2.5vw 5vw; font-size: 7vw; line-height: 5vw; letter-spacing: 1vw; } #Kopfuntertitel { right:2vw; top:11vw; font-size: 3vw; } #mit { left:-0.75vw; top:-0.2vw; font-size: 2vw; line-height: 1vw; letter-spacing: 0.3vw; } /**************** Menü *************/ #Menuespalte { width: 33.333333%; } #Menue { float:left; width: calc(100% - 1.5rem); } /***************** Inhalt ****************/ #contentspalte { width: 66.666666%; } .Textblock_1_1, .Textblock_5_6, .Textblock_3_4, .Textblock_2_3, .Textblock_1_2, .Textblock_1_3{ width: calc(100% - 1rem); } .Textblock_1_6 { width: calc(33.333333% - 0.3333333rem); } .Textblock_1_4 { width: calc(50% - 0.5rem); } .Textblock_1_6 .Textabstand { width: calc(100% - 0.5rem); font-size: 0.8em; letter-spacing: 0rem; } .Textblock_1_3 picture .Bild, .Textblock_1_4 picture .Bild, .Textblock_1_6 picture .Bild { width: 50%; margin: 1rem 1rem 0px 0px; float: left; } } @charset "UTF-8"; /* CSS Document */ @media screen and (max-width:600px) { body { background-image: url(pic/Hintergrund-innerer-Freiheit-600.jpg); background-size: 100%; } #Fussmenue { background-image: none; } #Menuespalte, #Menue, #contentspalte { position: relative; float:left; width: 100%; height:auto; left:0px; top:0px; margin:0px; padding:0px; border:0px; } /****************** Kopf *****************/ #kopf { height:21vw; } #Kopftitel { padding: 6vw 0px 0vw 5vw; font-size: 8.3vw; line-height: 5vw; letter-spacing: 0.6vw; } #Kopfuntertitel { right:3vw; top:13vw; font-size: 5vw; } #mit { font-size: 4vw; left:-2vw; } /***************** Fuss **************/ #Fussmenue { position: relative; padding: 0.5rem 0rem; } #Fussmenue a.nav, #Fussmenue a.nav:link, #Fussmenue a.nav:visited, #Fussmenue a.nav:hover, #Fussmenue a.nav:active, #Fussmenue a.navX, #Fussmenue a.navX:link, #Fussmenue a.navX:visited, #Fussmenue a.navX:hover, #Fussmenue a.navX:active { position: relative; font-size: 1.2rem; line-height: 1.2rem; } #bottomspace { float:left; height: calc(100vh - 4rem); } /***************** Inhalt **************/ #contentspalte { width: 100%; padding: 0rem 0rem 0rem 1rem; } .Textblock_1_6, .Textblock_1_4 { width: 50%; } .Textblock_1_1 .Textabstand, .Textblock_5_6 .Textabstand, .Textblock_3_4 .Textabstand, .Textblock_2_3 .Textabstand, .Textblock_1_2 .Textabstand, .Textblock_1_3 .Textabstand, .Textblock_1_6 .Textabstand, .Textblock_1_4 .Textabstand { width: 100%; font-size: 1em; line-height: 1.5em; letter-spacing: 0.03rem; } .Textblock_1_6 .Textabstand, .Textblock_1_4 .Textabstand { width: 100%; } /************* Kontaktformular ***********/ .Mitteilungsarea, input, select { width: 100%; width:100%; } /************** Hamburger **************/ #a, a#hamburger, a#hamburgerU { visibility: visible; position: relative; } /******************** Menü ******************/ #Menuespalte { width: 100%; background-color:white; z-index:2; visibility: hidden; position: absolute; left:-1000px; } a.nav, a.nav:link, a.nav:visited, a.nav:hover, a.nav:active, a.navX, a.navX:link, a.navX:visited, a.navX:hover, a.navX:active, a.navA, a.navA:link, a.navA:visited, a.navA:hover, a.navA:active { width: 100%; } a.navA, a.navA:link, a.navA:visited, a.navA:hover, a.navA:active { } a.navX, a.navX:link, a.navX:visited, a.navX:hover, a.navX:active { } a.nav:hover, a.navA:hover, a.navX:hover { } } @charset "UTF-8"; /* CSS Document */ @-ms-viewport{ width: extend-to-zoom; zoom: 1.0;} @media screen and (max-width:450px) { /***************** Inhalt ****************/ .Textblock_1_3 picture .Bild, .Textblock_1_4 picture .Bild, .Textblock_1_6 picture .Bild { width: 100%; margin: 0px; float: none; } }