@font-face { font-family: 'Onest_Thin'; src: url('font/onest/Onest-Thin.woff2') format('woff2'), url('font/onest/Onest-Thin.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Onest_Extralight'; src: url('font/onest/Onest-ExtraLight.woff2') format('woff2'), url('font/onest/Onest-ExtraLight.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Onest_Light'; src: url('font/onest/Onest-Light.woff2') format('woff2'), url('font/onest/Onest-Light.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Onest_Regular'; src: url('font/onest/Onest-Regular.woff2') format('woff2'), url('font/onest/Onest-Regular.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Onest_Medium'; src: url('font/onest/Onest-Medium.woff2') format('woff2'), url('font/onest/Onest-Medium.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Onest_Semibold'; src: url('font/onest/Onest-SemiBold.woff2') format('woff2'), url('font/onest/Onest-SemiBold.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Onest_Bold'; src: url('font/onest/Onest-Bold.woff2') format('woff2'), url('font/onest/Onest-Bold.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Onest_Extrabold'; src: url('font/onest/Onest-ExtraBold.woff2') format('woff2'), url('font/onest/Onest-ExtraBold.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Onest_Black'; src: url('font/onest/Onest-Black.woff2') format('woff2'), url('font/onest/Onest-Black.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Spectral_ExtraLight'; src: url('font/spectral/Spectral-ExtraLight.woff2') format('woff2'), url('font/spectral/Spectral-ExtraLight.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Spectral_ExtraLightItalic'; src: url('font/spectral/Spectral-ExtraLightItalic.woff2') format('woff2'), url('font/spectral/Spectral-ExtraLightItalic.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Spectral_Light'; src: url('font/spectral/Spectral-Light.woff2') format('woff2'), url('font/spectral/Spectral-Light.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Spectral_LightItalic'; src: url('font/spectral/Spectral-LightItalic.woff2') format('woff2'), url('font/spectral/Spectral-LightItalic.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Spectral_Regular'; src: url('font/spectral/Spectral-Regular.woff2') format('woff2'), url('font/spectral/Spectral-Regular.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Spectral_Italic'; src: url('font/spectral/Spectral-Italic.woff2') format('woff2'), url('font/spectral/Spectral-Italic.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Spectral_Medium'; src: url('font/spectral/Spectral-Medium.woff2') format('woff2'), url('font/spectral/Spectral-Medium.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Spectral_MediumItalic'; src: url('font/spectral/Spectral-MediumItalic.woff2') format('woff2'), url('font/spectral/Spectral-MediumItalic.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Spectral_SemiBold'; src: url('font/spectral/Spectral-SemiBold.woff2') format('woff2'), url('font/spectral/Spectral-SemiBold.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Spectral_SemiBoldItalic'; src: url('font/spectral/Spectral-SemiBoldItalic.woff2') format('woff2'), url('font/spectral/Spectral-SemiBoldItalic.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Spectral_Bold'; src: url('font/spectral/Spectral-Bold.woff2') format('woff2'), url('font/spectral/Spectral-Bold.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Spectral_BoldItalic'; src: url('font/spectral/Spectral-BoldItalic.woff2') format('woff2'), url('font/spectral/Spectral-BoldItalic.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Spectral_ExtraBold'; src: url('font/spectral/Spectral-ExtraBold.woff2') format('woff2'), url('font/spectral/Spectral-ExtraBold.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Spectral_ExtraBoldItalic'; src: url('font/spectral/Spectral-ExtraBoldItalic.woff2') format('woff2'), url('font/spectral/Spectral-ExtraBoldItalic.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } @charset "UTF-8"; /* CSS Document */ .ARCarchivDiv { font-family: 'barlow_semi_condensed_light', sans-serif; font-weight: normal; font-style: normal; color: #000; margin: 2rem 2rem 3rem 2rem; padding-left: 0.75rem; border: solid 1px gray; background-color: white; } .ARCarchivzeile, .ARCerste_archivzeile { display:block; font-size: 1rem; line-height: 1.5rem; whitespace:nowrap; padding: 0.25rem 0px; border-top: 1px solid gray; } .ARCerste_archivzeile { border-top: none; } .ARCarchivformularzeile { clear:both; margin: 0rem 0px 0px 0px; padding: 0px 0px 0px 0px; } .ARCarchivformular { font-family: 'barlow_semi_condensed_light', sans-serif; font-weight: normal; font-style: normal; color: #000; margin: 0px 0px 1rem 1.25rem; padding: 0px; } .einschub_1 {margin-left: 1.25rem;} .einschub_2 {margin-left: 2.5rem;} .einschub_3 {margin-left: 3.75rem;} .einschub_4 {margin-left: 5rem;} .einschub_5 {margin-left: 6.25rem;} .einschub_6 {margin-left: 7.5rem;} .einschub_7 {margin-left: 8.75rem;} .einschub_8 {margin-left: 10rem;} .einschub_9 {margin-left: 11.25rem;} .einschub_10 {margin-left: 12.5rem;} .einschub_11 {margin-left: 13.75rem;} .einschub_12 {margin-left: 15rem;} .einschub_13 {margin-left: 16.25rem;} .einschub_14 {margin-left: 17.5rem;} .einschub_15 {margin-left: 18.75rem;} .einschub_16 {margin-left: 20rem;} .einschub_17 {margin-left: 21.25rem;} .einschub_18 {margin-left: 22.5rem;} .einschub_19 {margin-left: 23.75rem;} .einschub_20 {margin-left: 25rem;} .ARCarchivformularTD_colspan, .ARCarchivformularTD_links, .ARCarchivformularTD { background-color:#eee; margin: 0px; padding: 0rem 1rem 0rem 0rem; border-bottom: 4px solid #fff; font-size: 1rem; line-height: 1.5rem; } .ARCarchivformularTD_links { padding: 0rem 0rem 0rem 1.5rem; } .ARCarchivformularTD_links img { height:1rem; vertical-align: text-bottom; margin: 0px 0px 0px 0px; } .ARCarchivformularTD_colspan { padding: 0.5rem 2rem 0.5rem 1.5rem; } input.ARCtextInput { -webkit-appearance: none; -moz-appearance: none; appearance: none; font-family: 'barlow_semi_condensed_light', sans-serif; font-weight: normal; font-size: 1rem; display: block; height: 1.75rem; margin: 0.5rem 0px; padding: 0rem 0.5rem; border:1px solid black; } input.ARCfileInput { -webkit-appearance: none; -moz-appearance: none; appearance: none; font-family: 'barlow_semi_condensed_light', sans-serif; font-weight: normal; font-size: 1rem; display: block; height: 2.5rem; margin: 0rem 0px; padding: 0rem 0.5rem 0rem 0rem; border:0px solid black; } input.ARCfileInput[type=file]::file-selector-button { -webkit-appearance: none; -moz-appearance: none; appearance: none; font-family: 'barlow_semi_condensed_light', sans-serif; font-weight: normal; white-space: nowrap; font-size: 0.8rem; height: 1.75rem; letter-spacing: 0.05rem; padding: 0.2rem 0.5rem; margin: 0.5rem 0.5rem 0.5rem 0px; background-color: #f6f6f6; border-radius: 0.3rem; border: 1px solid black; } input.ARCfileInput[type=file]::file-selector-button:hover { background-color: white; } button.ARCarchivbutton { -webkit-appearance: none; -moz-appearance: none; appearance: none; font-family: 'barlow_semi_condensed_medium', sans-serif; font-weight: normal; font-size: 0.8rem; letter-spacing: 0.05rem; border-radius: 0.3rem; border:1px solid #666; display: block; width: calc(100% - 0.5rem); height: 1.75rem; padding: 0.2rem 0.5rem; margin: 0.5rem 0.5rem 0.5rem 0px; letter-spacing: 0.05rem; white-space: nowrap; color: #666; background-color: #efefef; } .ARCarchivbutton:hover { background-color: white; } .ARCiconVersatz { display:inline-block; position:relative; top: 0.35rem; } .ARCfilenameVersatz { display:inline-block; position:relative; top: 0.6rem; margin: 0rem 0.4rem 0rem 0.4rem; } img.ARCdocIcon, a.ARCdocIconLink:link, a.ARCdocIconLink:visited, a.ARCdocIconLink:hover, a.ARCdocIconLink:active, a.ARCdocIconLink:focus { display:inline-block; position:relative; top: 0.1rem; border: 0px; padding: 0px; margin: 0px 0px 0px 0.25rem; height:1rem; width:1rem; text-decoration: none; vertical-align: center; } a.ARCdocIconLink img.ARCdocIcon { display:inline-block; position:relative; top: 0rem; margin: 0rem; height:1rem; width:1rem; } a.ARCdocIconLink:hover, a.ARCdocIconLink:hover img { background-color:#d9e8b1; } .ARCarchivOrdnerLink, a.ARCarchivOrdnerLink:link, a.ARCarchivOrdnerLink:visited, a.ARCarchivOrdnerLink:hover, a.ARCarchivOrdnerLink:active, a.ARCarchivOrdnerLink:focus { display:inline-block; border: 0px; margin: 0rem 0rem 0rem 0.4rem; padding: 0rem; } a.ARCarchivOrdnerLink:hover { background-color:#d9e8b1; } .ARCarchivdateilink, a.ARCarchivdateilink:link, a.ARCarchivdateilink:visited, a.ARCarchivdateilink:hover, a.ARCarchivdateilink:active, a.ARCarchivdateilink:focus { display:inline-block; border: 0px; margin: 0rem 0rem 0rem 0.2rem; padding: 0rem; text-decoration: none; color: #000; font-family: 'barlow_semi_condensed_light', sans-serif; font-weight: normal; font-style: normal; } a.ARCarchivdateilink:hover { background-color:#d9e8b1; } @charset "UTF-8"; /* CSS Document */ /******************* fonts ******************/ @font-face { font-family: 'barlow_semi_condensed_light'; src: url('rsFiles/res/font/barlowsemicondensed-light-webfont.woff2') format('woff2'), url('rsFiles/res/font/barlowsemicondensed-light-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'barlow_semi_condensed_regular'; src: url('rsFiles/res/font/barlowsemicondensed-regular-webfont.woff2') format('woff2'), url('rsFiles/res/font/barlowsemicondensed-regular-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'barlow_semi_condensed_medium'; src: url('rsFiles/res/font/barlowsemicondensed-medium-webfont.woff2') format('woff2'), url('rsFiles/res/font/barlowsemicondensed-medium-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'barlow_semi_condensed_bold'; src: url('rsFiles/res/font/barlowsemicondensed-bold-webfont.woff2') format('woff2'), url('rsFiles/res/font/barlowsemicondensed-bold-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } /******************* LogIn ******************/ #LOGlogDiv { padding: 1rem 0rem 1rem 2rem; font-family: 'barlow_semi_condensed_medium', sans-serif; font-weight: normal; font-size: 1rem; line-height: 1.8rem; text-transform:none; color:black; width: 100%; border-bottom: 3px solid #C7D0DD; background-color: white; } .LOGrot { color:red; } #LOGlogDiv b { font-family: 'barlow_semi_condensed_medium', sans-serif; font-weight: normal; } #LOGgeschuetztMeldung { padding: 2.5rem 1rem 5rem 2rem; min-height: 15rem; font-family: 'barlow_semi_condensed_light', sans-serif; font-weight: normal; font-size: 2rem; line-height: 2.5rem; text-transform:uppercase; letter-spacing: 0.25rem; } #LOGlogDiv a:link, #LOGlogDiv a:visited, #LOGlogDiv a:hover, #LOGlogDiv a:active, #LOGlogDiv a:focus { color: #000; font-family: 'barlow_semi_condensed_medium', sans-serif; font-weight: normal; font-size: 1rem; line-height: 1.2rem; text-transform:none; border-bottom:3px solid transparent; padding: 0px 0px 0px 0px; } #LOGlogDiv a:hover, #LOGlogDiv a:active, #LOGlogDiv a:focus { outline: none; border-bottom:3px solid #666; } /******* Benutzerverwaltung ********/ #LOGUserVerwaltungDiv, #LOGUserVerwFormular { padding: 1rem 0rem 0.5rem 0rem; font-family: 'barlow_semi_condensed_regular', sans-serif; font-weight: normal; font-size: 0.8rem; line-height: 1rem; text-transform:none; color:black; width: 100%; } #LOGUserVerwFormular { } #UserVerwaltungDiv h1, #ogDiv h1 { font-size: 20px; line-height: 28px; letter-spacing:2px; } td.LOG_td_Benutzertabelle { padding: 0.25rem; font-size: 0.8rem; line-height: 1rem; white-space: nowrap; } input.LoguserInput { -webkit-appearance: none; -moz-appearance: none; appearance: none; font-family: 'barlow_semi_condensed_light', sans-serif; font-size: 1rem; display: block; width: calc(100% - 0.5rem); height: 2rem; margin: 0rem 0px 0.25rem 0rem; padding: 0rem 0.5rem; border:1px solid black; } select.LOGuserSelect { -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0.3rem; border:1px solid black; cursor:pointer; background: url("rsFiles/res/logicons/open.svg") no-repeat center right; background-color: #fff; font-family: 'barlow_semi_condensed_light', sans-serif; font-size: 1rem; height: 2rem; margin: 0px; padding: 0rem 2rem 0rem 0.5rem; width: 100%; } button.LOGuserSichern { -webkit-appearance: none; -moz-appearance: none; appearance: none; font-family: 'barlow_semi_condensed_medium', sans-serif; font-size: 0.8rem; letter-spacing: 0.05rem; border-radius: 0.3rem; border:1px solid black; display: block; width: auto; height: 2rem; margin: 0rem 0px 0rem 0.5rem; padding: 0.2rem 0.5rem; white-space: nowrap; } @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:#C7D0DD; vertical-align: top; text-align: left; color: #333; font-family: "Spectral_Light", serif; font-weight: normal; font-size: 1.05rem; line-height: 1.5rem; letter-spacing: 0.01rem; -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 { font-family: "Onest_Medium", sans-serif; font-size: 1rem; line-height: 1.5rem; font-size: 0.8rem; line-height: 1rem; padding: 0.25rem 0.25rem 0.25rem 0.75rem; border: 1px solid #ddd; } /************** Tags **************/ h1 { display: inline-block; margin: 0px 0px 0.5rem 0px; font-family: "Onest_Extrabold", sans-serif; font-weight: normal; font-size: 1.2rem; line-height: 1.5rem; text-transform:uppercase; letter-spacing: 0.075rem; } h2 { display: inline-block; margin: 0px 0px 0.25rem 0px; font-family: "Onest_Bold", sans-serif; font-weight: normal; font-size: 1.05rem; line-height: 1.2rem; text-transform:uppercase; letter-spacing: 0.05rem; } h3 { display: inline-block; margin:0px; font-family: "Onest_Semibold", sans-serif; font-weight: normal; font-size: 1rem; line-height: 1.4rem; letter-spacing: 0px; letter-spacing: 0.025rem; } .klein { display: inline-block; font-size: 0.7rem; line-height: 0.9rem; } .kleingrotesk { display: inline-block; font-family: "Onest_Light", sans-serif; font-size: 0.7rem; line-height: 0.9rem; letter-spacing: 0.025rem; } b { font-family: "Spectral_Bold", serif; font-weight: normal; } ol, ul { margin-top: 0px; margin-bottom: 0px; } li { padding-top: 0.3rem; left: -10px; position: relative; line-height: 1.2rem; } sup { font-size: 0.65rem; line-height: 0.7rem; } hr { height:0px; border:0px; border-top:2px solid black; margin: 1rem 0px; clear: both; } a:link, a:visited, a:hover, a:active, a:focus { color: #4966D1; text-decoration: none; font-family: "Spectral_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 #4966D1; } 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; } #Projektlogodiv, #unter_Projektlogodiv { position:relative; left:30%; top:0px; width:35%; height: auto; background-color: white; z-index: 1; } #unter_Projektlogodiv { height: 1rem; background-color:#C7D0DD; } #Projektlogodiv img { width:100%; } #Projektlogodiv:hover { filter: invert(100%) grayscale(100%); } a.logolink, a.logolink:link, a.logolink:visited, a.logolink:active, a.logolink:hover { display: block; border: 0px; text-decoration: none; outline: none; color:inherit; } /************ Inhalt *************/ #bodywrapper { position: absolute; width: 100%; height: 100%; margin: 0px; padding: 0px; } #contentspaltenHG { position: fixed; left: 30%; width: 35%; height: 100%; background-color: #fff; } #contentspalte { left: 30%; float:right; width: 70%; margin: 0px 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; margin: 0rem; } .HGweiss { width: 100%; height: 100%; padding: 0px; margin: 0px; } .Textblock_1_1 { width: 100%; } .Textblock_5_6 { width: 83.3333333333%; } .Textblock_3_4 { width: 75%; } .Textblock_2_3 { width: 66.6666666666%; } .Textblock_1_2 { width: 50%; } .Textblock_1_3 { width: 33.3333333333%; } .Textblock_1_4 { width: 25%; } .Textblock_1_6 { width: 16.6666666666%; } .Textabstand { width: 100%; margin: 0px; padding: 1.5rem 1.5rem 0.5rem 2.5rem; } .maxZeilenlaenge { max-width: 42rem; } .Bild { width: 100%; padding: 0px; margin: 0px; } .Abstand { width: 100%; height: 1rem; background-color:#fff; display: inline-block; } .Div_fuer_neue_Zeile { width: 100%; } #bottomspace { float:left; width: 100%; height: 3rem; } /************** Galerie *************/ .Galeriebereich { position:relative; display: inline-block; vertical-align:top; overflow:hidden; width: 100%; } .steuerung { position:relative; } .Legende { position:relative; font-family: 'Onest_Thin', sans-serif; font-weight: normal; font-style:normal; font-size: 0.825rem; line-height: 1.15rem; background-color: #eee; bottom: 0rem; margin: 0px; padding: 0.5rem 1.5rem 0.5rem 2.5rem; } .bildzurueck, .bildweiter { position: absolute; top: 0; width: 50%; height: 100%; border: none; background-size: 4rem; background-repeat: no-repeat; background-position: left; cursor: pointer; opacity: 1; /* Starten mit Transparenz */ transition: opacity 0.3s ease-in-out; } .bildzurueck { left: 0; background-image: url('pic/Pfeil_Links.png'); } .bildweiter { right: 0; background-image: url('pic/Pfeil_Rechts.png'); background-position: right; } .bildzurueck:hover { background-image: url('pic/Pfeil_Links_H.png'); } .bildweiter:hover { background-image: url('pic/Pfeil_Rechts_H.png'); } .largeImageContainer { position: fixed; top: 0; right: calc(-70% - 20px); width: calc(70% + 20px); height: 100vh; background-color: #C7D0DD; transition: right 0.5s ease-in-out; overflow: auto; z-index: 1000; } .largeImageContainer.show { right: -20px; } .largeImageContainer img { width: 100%; } /******** Wohnungstabelle ********/ .WhgDiv, #wohnungswechselbild { width: 100%; } #wohnungswechselbilddiv, .whgpos { background-color: #EAE9D5; } #wohnungswechselbilddiv { margin: -1.5rem -2.5rem -0.5rem -2.5rem; width: calc(100% + 4rem); } .whgpos { margin: -1.5rem -2.5rem 1rem -2.5rem; width: calc(100% + 4rem); } .whgTab { width: 100%; margin: 0.5rem 2.5rem 0rem 0rem; } #mindesthoehe{ min-height: 1.25rem; display: block; } .whgTab td, .whgTab td a { font-family: "Onest_Medium", sans-serif; font-size: 1rem; line-height: 1.5rem; font-size: 0.8rem; line-height: 1rem; padding: 0.5rem 0.25rem 0.25rem 0.75rem; border: 1px solid #fff; } .whgTab td.rechtsbuendig { text-align: right; } .whgTab tr{ background-color:#EAE9D5; } .whgTab tr.Zeile_hinterlegt, .whgTab tr.Zeile_hinterlegt:hover { background-color:#ffd; background-color:#F7F8FA; } .whgTab td a { display:block; border:0px; padding:0px; margin:0px; color:black; } .whgTab .tabhead { background-color: #6A92C0; border: 1px solid #6A92C0; color: white; font-family: "Onest_Semibold", sans-serif; font-size: 1rem; line-height: 1.5rem; } .trtrennung td { border:none; padding:0.5rem; background-color: #fff; } img.Punkt { display:inline-block; height:1rem; width:1rem; } .whgTab .tabLegende { font-family: "Onest_Extralight", sans-serif; border: 0px; padding: 0.5rem 0rem 0rem 0rem; margin:0px; color:black; background-color: white; font-size: 0.9rem; line-height: 0.9rem; } /************* Kontaktformular ***********/ #kontaktformular { font-family: 'Onest_Light', sans-serif; font-size: 0.85rem; width: 100%; } #kontaktformular h2{ font-family: "Onest_Thin", serif; font-size: 1.5rem; } h2.adressat{ padding-top:2rem; } .Mitteilungsarea { font-family: 'Onest_Light', sans-serif; font-size: 1rem; letter-spacing: 0.05rem; width: calc(100% - 0.5rem); height: 8rem; margin: 1rem 0px 1.5rem 0px; padding: 0.5rem; border:1px solid black; } input { font-family: 'Onest_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: 'Onest_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: "Onest_Medium", 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; } input.Absendebutton:hover { filter: invert(100%); } #DankMeldungRot, #DankMeldungGruen { font-family: 'Onest_Extrabold', 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; } /************** Verifizierung ***************/ #VerDiv { margin-bottom: 2rem; } .VerBuchstaben { width: 1.25rem; height: 1.8rem; } #VerPfeil { width: 3.5rem; height: 1.5rem; padding:0px 0.8rem; } .VerInput { height:26px; width:104px; margin: 0px; letter-spacing:0.5rem; padding-left:1rem; } .VerSpacing { letter-spacing:0.3rem; } /************* Hamburger *********/ #a, a#hamburger, a#hamburgerU { display: none; } /**************** Menü *************/ :root { --menue-padding-left: 55%; } #Menuespalte { float:left; width: calc(30% - 0.9rem); padding: 0px 0px 0px 0px; margin: 0px 0.9rem 0px 0px; } #Menue { float:right; width: 100%; -moz-hyphens: none; -o-hyphens: none; -webkit-hyphens: none; -ms-hyphens: none; hyphens: none; background-color: green; background-color: red; background-color: transparent; background-color: #C7D0DD; } 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: "Onest_Semibold", sans-serif; text-transform:uppercase; display: block; text-decoration: none; border:none; outline:none; font-size: 1rem; line-height: 1rem; margin: 0px; padding: 0.3rem 0px 0.3rem var(--menue-padding-left); letter-spacing: 0px; color: #000; } 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: white; background-color: black; } a.nav:hover, a.navA:hover, a.navX:hover { color: black; background-color: white; } .Meinzug1 { padding-left: 1rem; } .Meinzug2 { padding-left: 2rem; } .Meinzug3 { padding-left: 3rem; } .Meinzug4 { padding-left: 4rem; } .Meinzug5 { padding-left: 5rem; } /****************** Pflichtmenue ***************/ #Pflichtmenue { display:block; position: fixed; top:-0.25rem; left:65%; width: 35%; padding: 0px 0.5rem 0px 0px; margin: 0px; text-align: right; } #Pflichtmenue a.nav, #Pflichtmenue a.nav:link, #Pflichtmenue a.nav:visited, #Fussmenue a.nav:hover, #Pflichtmenue a.nav:active, #Pflichtmenue a.navX, #Pflichtmenue a.navX:link, #Pflichtmenue a.navX:visited, #Pflichtmenue a.navX:hover, #Pflichtmenue a.navX:active { display:inline-block; width: auto; font-family: "Onest_Thin", serif; font-weight: normal; text-transform:none; font-size: 0.7rem; letter-spacing: 0.03rem; padding: 0.25rem 0.25rem 0.1rem 0.25rem; } #Pflichtmenue a.navX, #Pflichtmenue a.navX:link, #Pflichtmenue a.navX:visited, #Pflichtmenue a.navX:hover, #Pflichtmenue a.navX:active { color: black; background-color: transparent; } #Pflichtmenue a.navX:hover { color: black; background-color: white; } .navcontainer { display:inline-block; } /****************** JKBranding ***************/ a#JKBranding, a#JKBranding:link, a#JKBranding:visited, a#JKBranding:active, a#JKBranding:hover { display:block; position:fixed; bottom: 0px; left: 0px; width: calc(30% - 0.9rem); padding: 0px 0px 0px 0px; margin: 0px 0.9rem 0px 0px; background-color: black; border: 0px; text-decoration: none; outline: none; color:inherit; box-shadow: -5px -5px 5px #C7D0DD; border-top: 5px solid #C7D0DD; } a#JKBranding:hover { filter: invert(100%); box-shadow: none; border-top: none; } #JKBlogo { position: relative; left: 55%; height: 1.5rem; margin: 0.75rem 0rem 0.75rem 0rem; } @charset "UTF-8"; /* CSS Document */ @-ms-viewport{ width: extend-to-zoom; zoom: 1.0;} @media screen and (max-width:1300px) { /**************** Kopf ***************/ #Projektlogodiv, #unter_Projektlogodiv { position:relative; left:30%; width:50%; } #Projektlogodiv img { width:100%; } /**************** Menü ***************/ :root { --menue-padding-left: 25%; } /*************** Inhalt **************/ #bodywrapper { float:left; } #contentspaltenHG { width: 50%; } #contentspalte { float:left; } .Textblock_1_1 { width: 100%; } .Textblock_5_6 { width: 100%; } .Textblock_3_4 { width: 52.5%; } .Textblock_2_3 { width: 46.6666666666%; } .Textblock_1_3 { width: 23.3333333333%; } .Textblock_1_4 { width: 35%; } .Textblock_1_6 { width: 11.6666666666%; } .Textblock_1_2 { width: 70%; } /******** Wohnungstabelle ********/ #wohnungswechselbilddiv { margin: -1.5rem -2.5rem -0.5rem -2.5rem; width: calc(102.25% + 4rem); } .whgpos { margin: -1.5rem 0rem 1rem -2.5rem; width: calc(102.25% + 4rem); } /************* Pflichtmenue **********/ #Pflichtmenue { position: relative; float:left; left: auto; width: 100%; height: auto; margin: auto; padding-bottom: 1rem; } .navcontainer { display: block; } } @charset "UTF-8"; /* CSS Document */ @media screen and (max-width:800px) { hr { height:0px; border:0px; border-top: 1px solid black; margin: 1rem -1.5rem 1rem -1.25rem; clear: both; } /************** Kopf ************/ #Projektlogodiv, #unter_Projektlogodiv, #contentspaltenHG { width: calc(100% - 2rem); left:1rem; z-index: auto; } /***************** Inhalt **************/ #contentspalte { width: 100%; padding: 0rem 0rem 0rem 1rem; } .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, .Textblock_1_4 { width: 50%; } .Textabstand { width: 100%; font-size: 1em; line-height: 1.5em; letter-spacing: 0.03rem; padding: 1.5rem 1.5rem 0.5rem 1.25rem; } /******** Wohnungstabelle ********/ #wohnungswechselbilddiv, .whgpos { margin: -1.5rem 0rem 0rem 0rem; width: 100%; } .whgTab .tabhead { padding: 0.25rem 1rem; } /*********** Kontaktformular ***********/ .Mitteilungsarea, input, select { width: 100%; width:100%; } /*********** Scrollposition *********/ #a { position: relative; top:-3.9rem; width:100%; } /************** Hamburger **************/ #a, a#hamburger, a#hamburgerU { display: block; } 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 { position: relative; float:left; margin: -1.1rem 0px 0px 0px; width:20%; padding: 0.5rem 2.5rem 1.85rem 2.25rem; text-decoration: none; outline: none; border: 0px; background-color:red; background-color: transparent; } a#hamburger img, a#hamburgerU img { height: 1.75rem; width: 1.75rem; float:left; margin: 0px; padding: 0px; background-color:green; background-color: transparent; } a#hamburger img { position: relative; top:1.25rem; left: 0.1rem; } a#hamburgerU, a#hamburgerU:link, a#hamburgerU:visited, a#hamburgerU:active, a#hamburgerU:hover { top: 4rem; float:right; padding: 1rem 1.5rem 1rem 2.5rem; } a#hamburgerU img { float:right; } /************ Inhalt *************/ #contentspaltenHG { height: calc(100% - 3rem); } /**************** Menü ******************/ :root { --menue-padding-left: 1rem; } #Menuespalte { position: relative; display: none; width: calc(100% - 2rem); left:1rem; z-index: auto; padding-bottom: 1rem; background-color: transparent; background-color:#C7D0DD; } 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%; } /************* Pflichtmenue **********/ #Pflichtmenue { position: relative; float:left; left: 1rem; width: calc(100% - 2rem); height: auto; margin: auto; padding-right: 0.25rem; padding-bottom: 50vh; border-top: 1px solid black; } .navcontainer { display: inline-block; } /****************** JKBranding ***************/ a#JKBranding, a#JKBranding:link, a#JKBranding:visited, a#JKBranding:active, a#JKBranding:hover { margin: 0rem 1rem; width: calc(100% - 2rem); box-shadow: none; border: none; } #JKBlogo { position: relative; left: 3rem; height: 1.5rem; margin: 0.75rem 0rem 0.75rem 0rem; } }