/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on May 24, 2019 */ @font-face { font-family: 'fira_sansultra'; src: url('font/fira/firasans-ultra-webfont.woff2') format('woff2'), url('font/fira/firasans-ultra-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'fira_sansmedium'; src: url('font/fira/firasans-medium-webfont.woff2') format('woff2'), url('font/fira/firasans-medium-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'fira_sansmedium_italic'; src: url('font/fira/firasans-mediumitalic-webfont.woff2') format('woff2'), url('font/fira/firasans-mediumitalic-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'fira_sansbook'; src: url('font/fira/firasans-book-webfont.woff2') format('woff2'), url('font/fira/firasans-book-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'fira_sansbook_italic'; src: url('font/fira/firasans-bookitalic-webfont.woff2') format('woff2'), url('font/fira/firasans-bookitalic-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'fira_sanslight'; src: url('font/fira/firasans-light-webfont.woff2') format('woff2'), url('font/fira/firasans-light-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'fira_sanslightCondensed'; src: url('font/fira/FiraSansCondensed-Light.woff2') format('woff2'), url('font/fira/FiraSansCondensed-Light.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'fira_sanslight_italic'; src: url('font/fira/firasans-lightitalic-webfont.woff2') format('woff2'), url('font/fira/firasans-lightitalic-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'fira_sansultralight'; src: url('font/fira/firasans-ultralight-webfont.woff2') format('woff2'), url('font/fira/firasans-ultralight-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'fira_sansthin'; src: url('font/fira/firasans-thin-webfont.woff2') format('woff2'), url('font/fira/firasans-thin-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'fira_sanshair'; src: url('font/fira/firasans-hair-webfont.woff2') format('woff2'), url('font/fira/firasans-hair-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'fira_sanseight'; src: url('font/fira/firasans-eight-webfont.woff2') format('woff2'), url('font/fira/firasans-eight-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: white; font-family: 'fira_sanslight', sans-serif; font-size: 1rem; line-height: 1.5rem; 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; } td.rsTD { padding: 0px 0.75rem 1rem 0px; } /********************* Tags *********************/ h1,h2,h3 { font-family: 'fira_sansmedium', sans-serif; color: #000; font-size: 1.1rem; line-height: 1.25rem; letter-spacing: 0.01rem; font-weight: normal; margin: 0px 0px 0.25rem 0px; } h2, h3 { font-family: 'fira_sansbook', sans-serif; } h3 { font-size: 1rem; margin: 0px; } b { font-family: 'fira_sansmedium', sans-serif; font-weight: normal; } form { margin: 0px; padding: 0px; } hr { width: 100%; height:0px; border:0px; margin: 0.5rem 0px; border-top: 1px solid black; } i { font-family: 'fira_sanslight_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 0px 1px 0px; } a:hover, a:active, a:focus { border-bottom: 2px solid black; padding: 0px 0px 0px 0px; } img, a img, p a img { clear: right; float: right; padding: 0px; border: 0px; text-decoration: none; } /******************* center *****************/ #center { width: 90vw; max-width: 80rem; margin: 0px auto; } /******************** Kopf ******************/ #kopf { float:left; width: 100%; /* preload */ background-image: url('pic/birkner_hover.svg'); background-position: 200vw; background-repeat: no-repeat; } a#logolink:link, a#logolink:visited, a#logolink:hover, a#logolink:active, a#logolink:focus { float: left; display: block; margin: 1.75rem -1.5rem 0px -1.5rem; width: 12rem; height: 4rem; outline: none; border: none; text-decoration: none; background-image: url('pic/birkner.svg'); background-size: cover; } a#logolink:hover { background-image: url('pic/birkner_hover.svg'); } #totopdiv { display:none; position: fixed; bottom: 4rem; right: 2rem; width: 48px; height: 48px; } #totopdiv:hover { border-bottom: 1px solid black; } #top { position:relative; top: -2rem; } #tomenuediv { float: right; visibility: hidden; width: 48px; height: 48px; } #tomenuediv:hover { border-bottom: 1px solid black; } /************** Fuss ***************/ #Fuss { float: left; position: fixed; bottom: 0px; width: 100%; margin: 0px; padding: 0.25rem 1.5rem 0.25rem 2rem; background-color: white; border-top: 1px solid black; font-family: 'fira_sanslightCondensed', sans-serif; font-size: 0.8rem; line-height: 1rem; letter-spacing: 0px; } #adresse, #Impressumslinkcontainer { float:right; padding-bottom: 0.25rem; } #adresse { float: left; } .linkcontainer { display:inline-block; margin: 0px 0.5rem; padding:0px; } #AdressVis{ display: inline-block; } #KontaktVis { display: none; } /******************** Kacheln ******************/ #Kachelcontent { margin: 1rem 0px 8rem 0rem; width: calc(100% + 2rem); text-align: left; } .Kacheldiv { float:left; } a.Kachellink, a.Kachellink:link, a.Kachellink:visited, a.Kachellink:active, a.Kachellink:hover { display: block; border: 1px solid black; padding: 2vw 1vw 0px 2vw; margin: 0px 1rem 1rem 0px; width: calc(calc(calc(90vw - 4rem) / 4) - calc(1rem - 1px)); height: calc(calc(calc(90vw - 4rem) / 4) - calc(1rem - 1px)); max-width: calc(72.25rem / 4); max-height: calc(72.25rem / 4); background-size: cover; filter: grayscale(100%); background-color: #ddd; font-size: 0.9rem; line-height: 1.1rem; letter-spacing: 0px; overflow: hidden; } a.Kachellink:hover { filter: grayscale(0%); color: maroon; background-color: #ddc; } /******************** Inhalt ******************/ #content { float:right; margin: 1rem 0px 8rem 4.5rem; width: calc(100% - 4.5rem); } .Textblock_1_4, .Textblock_2_4, .Textblock_3_4, .Textblock_4_4 { display:inline-block; vertical-align:top; margin: 0px; padding: 0px 0px 1.5rem 0rem; } .Textblock_1_4 {width: 25%;} .Textblock_2_4 {width: 50%;} .Textblock_3_4 {width: 75%;} .Textblock_4_4 {width: 100%;} .textabstand { padding: 0px 1rem 0px 0rem; max-width: 40rem; } .Textblock_4_4 .textabstand hr { width: calc(90vw - 4.5rem); max-width: 75.5rem; } .Textblock_4_4 .legende { bottom: 1.5rem; } .Textblock_1_4 .Bild, .Textblock_2_4 .Bild, .Textblock_3_4 .Bild { padding: 0px 1rem 1rem 0rem; width: 100%; } .Textblock_4_4 .Bild { margin: 0px 0px 2rem 0px; padding: 0px; width: 100%; } img, picture, .Bild, .Textblock_1_4 picture.Bild, .Textblock_2_4 picture.Bild, .Textblock_3_4 picture.Bild { display: block; margin: 0px; padding: 0px; width: 100%; } .legende { width: 100%; font-family: 'fira_sanslight', sans-serif; font-weight: normal; font-style:normal; font-size: 0.85rem; line-height: 1.15rem; position:relative; bottom: 0.5rem; padding-right: 1rem; } .Abstand { display: block; float: left; height:2rem; width: 100%; padding-right: 1rem; } .Abstand hr { position:relative; top: -0.45rem; } .Textblock_4_4 .Abstand hr { padding-right: 0px; width: calc(100% + 1rem); } /******************** Menü ******************/ #nav { float: right; display: inline-block; text-align:right; max-width: calc(100% - 10.5rem); margin: 1.5rem 0px 0px 0rem; } .erste_menuezeile, .menuezeile { display: inline-block; text-align:right; margin: 0px; padding-top: 0.5rem; margin-top: 0.75rem; border-top: 2px solid black; } .erste_menuezeile { border-color: transparent; } 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: 'fira_sanslightCondensed', sans-serif; text-decoration: none; border-bottom: 1px solid transparent; color: black; font-size: 1rem; line-height: 1.25rem; letter-spacing: 0.01rem; padding: 0px 0px 1px 0px; margin: 0px 0px 1px 1rem; } a.navX, a.navX:link, a.navX:visited, a.navX:active, a.nav:hover, a.navX:hover { border-bottom-color: black; } a.nav:hover, a.navX:hover { border-bottom-width: 2px; padding-bottom: 0px; } /**************** 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) { /******************* center *****************/ #center { width: calc(100% - 2rem); margin: 0px 1rem; } /******************* Kopf *****************/ #totopdiv { right: 1rem; } a#logolink:link, a#logolink:visited, a#logolink:hover, a#logolink:active, a#logolink:focus { margin: 1.75rem -1.5rem 0px -0.3rem; } /******************** Kacheln ******************/ #Kachelcontent { width: calc(100% + 1rem); } a.Kachellink, a.Kachellink:link, a.Kachellink:visited, a.Kachellink:active, a.Kachellink:hover { width: calc(50vw - 2.25rem); height: calc(50vw - 2.25rem); font-size: calc(1.75vw + 0.5rem); line-height: calc(2.5vw + 0.5rem); } /******************** Inhalt ******************/ #content { min-height: calc(100vh - 9rem); margin-left: 0.5rem; width: calc(100% - 0.5rem); } .Textblock_1_4, .Textblock_2_4, .Textblock_3_4, .Textblock_4_4 { width: 100%; } .Textblock_1_4 .Bild, .Textblock_2_4 .Bild, .Textblock_3_4 .Bild, .Textblock_4_4 .Bild { margin: 0px 0px 2rem 0px; width: 100%; padding: 0px; } .textabstand { padding: 0px; } .Textblock_1_4 .textabstand hr, .Textblock_2_4 .textabstand hr, .Textblock_3_4 .textabstand hr, .Textblock_4_4 .textabstand hr { width: calc(100vw - 3.5rem); } .Textblock_4_4 .textabstand hr { width: calc(100% + 1rem); } .legende { bottom: 1.5rem; } .Abstand { padding-right: 0px; } /******************** Menü ******************/ #nav { float: left; text-align: left; max-width: 100vw; width: calc(100vw - 2rem); } .erste_menuezeile, .menuezeile { text-align: left; margin-left: -1rem; padding-left: 0.5rem; width: calc(100% + 1rem); border-top: 1px solid black; } /******************** Fuss ******************/ #Fuss { padding-right: 0.5rem; } #AdressVis{ display: none; } #KontaktVis { display: inline-block; } /************* Ende @media ***********/ }