/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on March 19, 2019 */ @font-face { font-family: 'old_standard_regular'; src: url('font/old_standard/oldstandard-regular-webfont.woff2') format('woff2'), url('font/old_standard/oldstandard-regular-webfont.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'old_standard_bold'; src: url('font/old_standard/oldstandard-bold-webfont.woff2') format('woff2'), url('font/old_standard/oldstandard-bold-webfont.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'old_standard_italic'; src: url('font/old_standard/oldstandard-italic-webfont.woff2') format('woff2'), url('font/old_standard/oldstandard-italic-webfont.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } /* @font-face { font-family: 'WorkSans_Thin'; src: url('font/work/WorkSans_Thin.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'WorkSans_Hairline'; src: url('font/work/WorkSans_Hairline.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'WorkSans_ExtraLight'; src: url('font/work/WorkSans_ExtraLight.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } */ @font-face { font-family: 'WorkSans_Light'; src: url('font/work/WorkSans_Light.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'WorkSans_Regular'; src: url('font/work/WorkSans_Regular.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'WorkSans_Medium'; src: url('font/work/WorkSans_Medium.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'WorkSans_SemiBold'; src: url('font/work/WorkSans_SemiBold.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'WorkSans_Bold'; src: url('font/work/WorkSans_Bold.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'WorkSans_ExtraBold'; src: url('font/work/WorkSans_ExtraBold.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'WorkSans_Black'; src: url('font/work/WorkSans_Black.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } @charset "UTF-8"; /* CSS Document */ @-ms-viewport{ width: extend-to-zoom; zoom: 1.0;} * { box-sizing: border-box; } html, body { margin: 0px; padding: 0px; width: 100%; height: 100%; background-color:#fff; vertical-align: top; text-align: left; color: #333; font-family: "old_standard_regular", serif; font-weight: normal; font-size: 1rem; line-height: 1.5rem; 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; vertical-align:top; text-align:left; } td .rsTD { margin:0px; padding: 0.25rem 0.5rem 0.25rem 0px; vertical-align:top; text-align:left; font-family: "old_standard_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: "old_standard_regular", serif; font-weight: normal; font-size: 2rem; line-height: 2.1rem; } h2 { margin: 0.5rem 0rem 0.2rem 0rem; font-family: "WorkSans_Bold", sans-serif; font-weight: normal; font-size: 1.05rem; line-height: 1.2rem; text-transform:uppercase; } h3 { margin: 0.3rem 0px 0px 0px; font-family: "WorkSans_Medium", sans-serif; font-weight: normal; font-size: 1rem; line-height: 1.5rem; letter-spacing: 0px; } .klein { font-size: 0.8rem; line-height: 0.85rem; } b { font-family: "old_standard_bold", 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: #900; text-decoration: none; font-family: "old_standard_regular", serif; font-weight: normal; border-bottom:1px solid transparent; padding: 0px 0px 0px 0px; } a:hover, a:active, a:focus { outline: none; border-bottom:1px solid #900; } 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%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; height: 168px; border-bottom: 2px solid black; } #Kopfbildbereich { position:absolute; left:25%; top:0px; overflow: hidden; width: 75%; height: 150px; } #Kopftitel { position:absolute; left:25%; top:83px; height: 70px; width:auto; padding: 7px 0.75rem 10px 0px; background-color: white; z-index: 1; } #Kopftitel img { display: inline-block; height: 3rem; margin: 0rem 0rem 0rem 0.5rem; position:relative; top:0.75rem; left:-0.5rem; } #Ortsname { display: inline-block; margin: 0rem; position:relative; top: 0.5rem; left:0rem; font-size: 2.1rem; line-height: 2.5rem; letter-spacing: 0px; } #Logobereich { width: 25%; height: 170px; background-color: white; overflow: hidden; } #logo { float:right; padding-top:82px; width: 6000px; } picture.Bild_im_Kopf, img.Bild_im_Kopf { width:100%; } a.logolink, a.logolink:link, a.logolink:visited, a.logolink:active, a.logolink:hover { border: 0px; text-decoration: none; outline: none; color:inherit; } /************ Inhalt *************/ #bodywrapper { float:left; width: 100%; margin: auto; padding: 0px; } #contentspalte { float:left; width:75%; 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; background-color:#fff; } .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% - 0.5rem); margin: 0px; padding: 0.75rem 0px; } .Bild { width: 100%; padding: 0px; margin: 0px; } .Abstand { width: 100%; height: 1rem; } /************* Kontaktformular ***********/ #kontaktformular { font-family: 'WorkSans_Regular', sans-serif; font-size: 0.9rem; width: 100%; } #kontaktformular h2{ font-family: "old_standard_regular", serif; font-size: 1.5rem; } h2.adressat{ padding-top:2rem; } .Mitteilungsarea { font-family: 'WorkSans_Light', 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: 'WorkSans_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; 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: 'WorkSans_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: 'WorkSans_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: 'WorkSans_Bold', 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.9); 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; border-top: 2px solid black; background-color: #fff; float: right; width: 100vw; padding: 0px 1rem 0px 0px; margin: 0px; text-align: left; } #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: "old_standard_regular", serif; font-weight: normal; font-size: 0.8rem; line-height: 1rem; padding: 0.25rem 1rem; } #bottomspace { float:left; height: calc(100vh - 5rem); } /******** Wohnungstabelle ********/ /* Variante: Bild neben Tabelle .WhgDiv { max-width: 900px; } #wohnungswechselbilddiv { float:right; margin-left: 1.5rem; } #wohnungswechselbild { max-width: calc(100vw - 3rem); } .whgTab { float:left; } */ #wohnungswechselbilddiv { margin-bottom: 1.5rem; } .WhgDiv, .whgpos, #wohnungswechselbild, .whgTab { width: 100%; max-width: 600px; } .whgpos, #wohnungswechselbild { background-color: #f6f5e5; } .whgTab td { border: 1px solid #ddd; font-size: 0.8rem; line-height: 1rem; padding: 0.25rem 0.25rem 0.25rem 0.25rem; } .whgTab td a { display:block; border:0px; padding:0px; margin:0px; color:black; } .whgTab tr:hover { background-color: #f6f5e5; } .whgTab tr.noLink:hover { background-color: #fff; } .whgTab .tabhead { background-color: #979080; border: 1px solid #979080; color: white; font-family: "WorkSans_SemiBold", sans-serif; text-transform:uppercase; font-size: 1rem; line-height: 1.5rem; } .statusdivAbs { display:inline-block; position: absolute; } .statusdivRel { position: relative; left: 0.75rem; } img.Punkt { display:inline-block; height:1rem; width:1rem; } .whgTab .tabLegende { border:0px; padding: 0.5rem 0rem 0rem 0rem; margin:0px; color:black; background-color: white; font-size: 0.9rem; line-height: 0.9rem; } /************* 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:-3.7rem; width:100%; } /**************** Menü *************/ #Menuespalte { float:left; width: 25%; padding: 0px 0px 0px 0px; margin: 2rem 0px 0px 0px; } #Menue { float:right; width: 220px; 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 { font-family: "WorkSans_SemiBold", sans-serif; text-transform:uppercase; display: block; text-decoration: none; border:none; outline:none; font-size: 1rem; line-height: 1rem; margin: 0.7rem 0px; padding: 0px; letter-spacing: 0.03em; color: #444; } 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 { color: #900; } a.nav:hover, a.navA:hover, a.navX:hover { color: #900; } a.navX:hover { color: #000; } @charset "UTF-8"; /* CSS Document */ @-ms-viewport{ width: extend-to-zoom; zoom: 1.0;} @media screen and (max-width:1000px) { /****************** Kopf *****************/ #Logobereich { width: 33.333333%; } #logo { margin-right: -20px; } #Kopfbildbereich { width: 66.666666%; left: 33.333333%; } #Kopftitel { left: 33.333333%; } picture.Bild_im_Kopf, img.Bild_im_Kopf { height:100%; width:auto; } /**************** Menü *************/ #Menuespalte { width: 33.333333%; } #Menue { width: 200px; } @media screen and (max-width:650px) { #logo { margin-right: -30px; } #Menue { width: 190px; } } /***************** 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; } /******************* Diaschau ******************/ a.Pfeil, a.Pfeil:link, a.Pfeil:visited, a.Pfeil:active, a.Pfeil:hover { background-color: rgba(255,255,255,0.5); } } @charset "UTF-8"; /* CSS Document */ @media screen and (max-width:600px) { #kopf, #Kopfbildbereich, #Kopftitel, #Logobereich, picture.Bild_im_Kopf, img.Bild_im_Kopf, #Menuespalte, #Menue, #contentspalte { position: relative; float:left; width: 100%; height:auto; left:0px; top:0px; margin:0px; padding:0px; border:0px; } /************** Kopf ************/ #logo { margin: 0px -14px 0px 0px; padding:0px; height:43px; width:auto; } #Kopftitel { padding: 1rem; width: 100%; margin-top:1rem; height: auto; } /***************** Fuss **************/ #Fussmenue { position: relative; border-top: 1px solid black; } #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; left:1rem; } /***************** 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%; } /******** Wohnungstabelle ********/ .whgTab td { border: 1px solid #ddd; font-size: 0.7rem; line-height: 1rem; padding: 0.05rem 0.05rem 0.05rem 0.1rem; height: 2rem; } /************* 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 { font-size: 1rem; line-height: 1.8rem; padding-left: 1rem; 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 { color: #d1673d; } a.nav:hover, a.navA:hover, a.navX:hover { color: #f46831; } }