/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on August 6, 2019 */ @charset "UTF-8"; @font-face { font-family: 'd-din-regular'; src: url('din/d-din-webfont.woff2') format('woff2'), url('din/d-din-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'd-din-bold'; src: url('din/d-din-bold-webfont.woff2') format('woff2'), url('din/d-din-bold-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'd-din-italic'; src: url('din/d-din-italic-webfont.woff2') format('woff2'), url('din/d-din-italic-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'd-din-condensed-regular'; src: url('din/d-dincondensed-webfont.woff2') format('woff2'), url('din/d-dincondensed-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'd-din-condensed-bold'; src: url('din/d-dincondensed-bold-webfont.woff2') format('woff2'), url('din/d-dincondensed-bold-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'd-din-din_expanded-regular'; src: url('din/d-dinexp-webfont.woff2') format('woff2'), url('din/d-dinexp-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'd-din-expanded-bold'; src: url('din/d-dinexp-bold-webfont.woff2') format('woff2'), url('din/d-dinexp-bold-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'd-din-expanded-italic'; src: url('din/d-dinexp-italic-webfont.woff2') format('woff2'), url('din/d-dinexp-italic-webfont.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; } html, body { margin:0px; padding: 0px; background-color: #f1ebdc; font-family: 'd-din-regular', sans-serif; font-size: 1rem; line-height: 1.25rem; letter-spacing: 0.01rem; vertical-align: top; text-align: left; hyphens: auto; -moz-hyphens: auto; -o-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; -webkit-font-smoothing: grayscale; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; } table { border-collapse: collapse; } td { margin:0px; padding: 0px; vertical-align:top; text-align:left; } /********************* Tags *********************/ h1,h2,h3 { font-family: 'd-din-bold', sans-serif; color: #000; font-size: 1rem; line-height: 1.25rem; letter-spacing: 0.01rem; font-weight: normal; margin: 0px; } b { font-family: 'd-din-bold', sans-serif; font-weight: normal; } form { margin: 0px; padding: 0px; } hr { height:0px; width: calc(100vw - 9rem); border:0px; border-top: 1px solid #aaa; margin: 10px 0px; clear: both; } i { font-family: 'd-din-italic', sans-serif; } ul, ol { padding: 0px 0px 0px 0rem; margin: 0px; } li { padding: 0; margin: 0.75rem 0px 0.75rem 1.25rem; } a:link, a:visited, a:hover, a:active, a:focus { text-decoration: none; color: black; border:0px; border-bottom:1px solid black; padding: 0px px 1px px; } a:hover, a:active, a:focus { color: #26f; } img, a img, p a img { clear: right; float: right; padding: 0px; border: 0px; text-decoration: none; } /************** Impressum ***************/ #ImpressumslinkBG { float: left; position: fixed; bottom: 0px; width: 100%; padding: 0px; margin: 0px; background-color: #f1ebdc; } #Impressumslinkcontainer { text-align:right; width: calc(100% - 4rem); padding: 0.1rem 0px 0.2rem 0px; margin: 0rem 2rem 0px 2rem; background-color: #f1ebdc; border-top: 1px solid black; } #Impressumslinkcontainer a, #Impressumslinkcontainer a:link, #Impressumslinkcontainer a:visited, #Impressumslinkcontainer a:active, #Impressumslinkcontainer a:hover { display:inline-block; font-family: 'd-din-condensed-regular', sans-serif; font-size: 0.8rem; line-height: 0.8rem; margin: 0px 0px 0px 1rem; padding: 0px 0px 0.5rem 0px; letter-spacing: 0.05rem; border: none; padding: 0px 0.3rem; border-radius: 0.25rem; position: relative; left: 0.3rem; } #Impressumslinkcontainer a:hover { background-color: white; } /**************** Kontaktformular *************/ .Kreuzkasten { display: block; width: 100%; height: 2rem; margin: 0px; padding-top: 0.5rem; } /* 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: 1px solid #ccc; border-radius: 0px; padding: 0px; margin: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.8rem; height: 1.8rem; border: 1px solid none; border-radius: 0px; background-color: white; background-image:url(pic/check.svg); background-repeat:no-repeat; background-size:1.5rem; background-position: 0.2rem; } input.kreuzkast[type='checkbox']:not(:checked) { background-image: none; } input.kreuzkast[type='checkbox']:checked { } input.kreuzkast[type='checkbox']:hover { background-color: #f1ebdc; background-color: #B4E611; background-color: #bbaa77; border-color: black; } label.kreuzkastlabel { position:relative; float:left; top:0.3rem; left: 0rem; width: calc(100% - 1.8rem); padding-left:0.55rem; margin-bottom: 1rem; } .input { display: block; margin: -0.4rem 0px 0.5rem 0px; padding: 0.3rem 0.5rem 0.2rem 0.5rem; font-family: 'd-din-regular', sans-serif; font-size: 1rem; line-height: 1.25rem; letter-spacing: 0.01rem; width:100%; border:none; } .Mitteilungsarea { width: 100%; height: 10rem; padding: 0.3rem 0.5rem 0.2rem 0.5rem; margin: 0.5rem 0px; font-family: 'd-din-regular', sans-serif; font-size: 1rem; line-height: 1.25rem; letter-spacing: 0.01rem; border: 1px solid #ccc; } #d2 .input, #d3 .input, #d4 .input, #d5 .input, #d6 .input, #d7 .input, #d8 .input { border: 1px solid #ccc; margin: 0.05rem 0px; } #d8 { text-align: right; } #kontaktformular h3 { font-family: 'd-din-regular', sans-serif; font-size: 0.8rem; } #Absendebutton { display: block; margin: 2rem 0px 0.5rem 0px; padding: 0.2rem 0.5rem; font-family: 'd-din-bold', sans-serif; font-size: 1rem; line-height: 1.25rem; letter-spacing: 0.01rem; background-color: #807080; color: #fff; border: 1px solid #335; border-radius: 0.35rem; } #Absendebutton:hover { background-color: #bbaa77; border-color: #807080; color: #fff; } #MeldungRot, #MeldungGruen { font-family: 'd-din-bold', sans-serif; font-size: 1rem; line-height: 1.25rem; letter-spacing: 0.01rem; margin-top: 1rem; padding: 0.2rem 0.5rem; background-color: red; color: #fff; } #MeldungGruen { background-color: #99c800; margin-top: 2rem; } #d6 { display:none; } /******************** Kopf ******************/ #kopf { margin: 1.5rem 2rem; font-size: 2rem; line-height: 2rem; letter-spacing: 0.2rem; } a#dor:link, a#dor:visited, a#dor:hover, a#dor:active, a#dor:focus { display: inline-block; font-family: 'd-din-regular', sans-serif; color: #333; background-color: transparent; outline: none; border: none; text-decoration: none; padding: 0px 0.75rem; border-radius: 1rem; position: relative; left: -0.75rem; } a#dor:hover { background-color: white; } #totopdiv{ display:none; position: fixed; bottom: 4rem; right: 0.5rem; width: 3rem; height: 3rem; z-index: 2; background-color: #f1ebdc; } #totopdiv:hover { background-color: white; } #top { position:relative; top: -2rem; } /******************** Inhalt ******************/ .content { min-height: 20rem; margin: 2rem 2rem 2rem 2rem; padding: 0px 2rem 1.75rem 2rem; background-color: white; box-shadow: 0px 0.1rem 0.5rem rgba(0,0,0,0.3); } .Text { max-width: 35rem; padding: 2rem 0px 0px 0px; margin-bottom: -0.5rem; } .Bild_mit_Legende { padding-top: 2rem; } .Bilderrahmen { display: inline-block; max-width: 35rem; margin: 0px 1rem 0px 0px; padding: 0px 0px 0px 0px; border: #ccc solid 1px; } .Bild { max-width: 100%; } .Legende { display: inline-block; vertical-align: bottom; font-size: 0.8rem; line-height: 1rem; padding: 1rem 0px 0px 0px; width: calc(100vw - 41rem); min-width: 10rem; } .bildlink:link { border:none; } /******************** Menü ******************/ #nav { margin: 0px 2rem; } .menuezeile { display:block; margin: -1px 0px 0px 0px; padding: 0.25rem 2.25rem 0.25rem 0px; border: black solid 1px; border-width: 1px 0px; } a.nav, a.nav:link, a.nav:visited, a.nav:active, a.nav:hover, a.navX, a.navX:link, a.navX:visited, a.navX:active, a.navX:hover { display: inline-block; font-family: 'd-din-condensed-regular', sans-serif; text-decoration: none; background-color: transparent; border: 0px; color: black; font-size: 1rem; line-height: 1.25rem; letter-spacing: 0.01rem; padding: 0px 0.5rem; border-radius: 0.5rem; position: relative; left: -0.5rem; } a.navX, a.navX:link, a.navX:visited, a.navX:active { color: #c03; } a.nav:hover, a.navX:hover { background-color: white; } /**************** Tabelleneditor **************/ .mit_Abstand { margin: 0px; padding: 0.75rem 0px 0px 0px; } .mit_Abstand_und_Linie { margin: 0px; padding: 0.75rem 0px; border-top: #ccc solid 1px; } @charset "UTF-8"; /* CSS Document */ @media screen and (max-width:650px) { .Bilderrahmen { } /******************** Inhalt ******************/ .content { min-height: 50vw; padding: 0px 1rem 1.75rem 1rem; } .Text { padding: 1rem 0px 0px 0px; } .Bild_mit_Legende { padding-top: 1.1rem; } .Bilderrahmen { margin: 0px; } /************* Ende @media ***********/ }