@font-face { font-family: 'd_din_regular'; src: url('font/d_din/d-din-webfont.woff2') format('woff2'), url('font/d_din/d-din-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'd_din_bold'; src: url('font/d_din/d-din-bold-webfont.woff2') format('woff2'), url('font/d_din/d-din-bold-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } /* @font-face { font-family: 'd_din_italic'; src: url('font/d_din/d-din-italic-webfont.woff2') format('woff2'), url('font/d_din/d-din-italic-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'd_din_condensed_regular'; src: url('font/d_din/d-dincondensed-webfont.woff2') format('woff2'), url('font/d_din/d-dincondensed-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'd_din_condensed_bold'; src: url('font/d_din/d-dincondensed-bold-webfont.woff2') format('woff2'), url('font/d_din/d-dincondensed-bold-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'd_din_expert_bold'; src: url('font/d_din/d-dinexp-bold-webfont.woff2') format('woff2'), url('font/d_din/d-dinexp-bold-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'd-din_expert_italic'; src: url('font/d_din/d-dinexp-italic-webfont.woff2') format('woff2'), url('font/d_din/d-dinexp-italic-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'd-din_expert_regular'; src: url('font/d_din/d-dinexp-webfont.woff2') format('woff2'), url('font/d_din/d-dinexp-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; font-family: 'd_din_regular', sans-serif; font-weight: normal; font-size: 0.95rem; line-height: 1.3rem; letter-spacing: 0.02rem; font-weight: normal; -moz-hyphens: auto; -o-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: grayscale; -webkit-overflow-scrolling: touch; } html, body { margin: 0px; padding:0px; height:100%; width:100%; } table { border-collapse: collapse; border-width: 0px; border-style: none; border-color: transparent; } td, p { margin: 0px 0px 0px 0px; padding:0px; vertical-align: top; } td.rsTD { margin: 0px 0px 0px 0px; padding: 0px 1rem 2rem 0rem; vertical-align: top; -moz-hyphens: none; -o-hyphens: none; -webkit-hyphens: none; -ms-hyphens: none; hyphens: none; } img { display: block; border-width: 0px; border-style: none; border-color: transparent; padding:0px; } h1 { font-family: 'd_din_bold', sans-serif; font-weight: normal; font-size: 1.05rem; line-height: 1.3rem; text-decoration: none; text-transform: uppercase; margin: 0rem 0px 0.025rem 0px; } h2 { font-family: 'd_din_bold', sans-serif; font-weight: normal; font-size: 1rem; line-height: 1.3rem; margin: 0rem 0px 0.025rem 0px; } b { font-family: 'd_din_bold', sans-serif; font-weight: normal; } ul,ol { margin: 0px 0px 0px -25px; } li { padding: 0px 0px 0px 0px; } a:link, a:visited, a:hover, a:active { color: #c60; text-decoration: none; } a:hover, a:active { text-decoration: underline; } h1.lead { display: inline; font-size: 16px; line-height: 24px; font-weight: normal; } /******** Zustimmungsdiv*********/ #zustimmungsdiv { font-size: 0.8rem; line-height: 1.1rem; letter-spacing: 0rem; position: absolute; background-color: rgba(255,255,255,0.95); border: 5vw solid #ff7e00; top:70px; margin:120px; padding: 2rem; z-index:10000; } #zustimmungsbuttondiv { width: 100%; text-align:center; margin: 0rem 0px 3rem 0px; } a#stimmbuttongross, a#stimmbuttongross:link, a#stimmbuttongross:visited, a#stimmbuttongross:active, a3stimmbuttongross:hover { font-size: 1rem; line-height: 1.3rem; letter-spacing: 0.1rem; text-decoration: none; display:inline-block; margin: 1rem; padding:1rem; background-color: #ff7e00; font-family: 'd_din_bold', sans-serif; color:white; } a#stimmbuttongross:hover { background-color:#999; } a#stimmbuttonklein { display:inline-block; padding:1rem; font-size: 0.8rem; line-height: 1.1rem; letter-spacing: 0rem; } /*********** Video*************/ #player { min-height: calc(100vh - 300px); } .Textabstand #player { margin: -1rem 0px 0px -1rem; width: calc(100% + 100px); } #video_ueberspringen { display:block; position: absolute; top:4rem; left:1rem; padding:0.5rem; background-color:#999; font-family: 'd_din_bold', sans-serif; color:white; } /*********** Inhalt*************/ #AnkerInhalt, #Kopf_L, #Kopf_R { visibility: hidden; position: absolute; top:-5000px; } #HG_Rechts { position: fixed; top: 0px; right: 0px; height:100vh; width: 70%; max-width: 1610px; background-color: #ccc; } #Container { float:right; width:100%; height:100%; max-width: 2300px; position: absolute; right:0px; } #Branding { float:right; width: 70%; background-color: #ff7e00; height: 120px; } #HoltenLogo { float:right; } #Menue_1_oben_Div { float:right; width: 70%; padding: 0px 0px 4px 1rem; background-color: #ff7e00; } #C_links { position: relative; top:-120px; margin-bottom: -90px; float:left; width: 30%; height:100vh; text-align:right; background-color: #fff; } #MenueLinksDiv { display: inline-block; text-align:left; padding: 20px 15px 20px 20px; } #inhalt_und_Icon_Div { float:left; width:70%; padding-bottom: 200px; background-color:#ccc; } #iconMenue { float:left; display: inline-block; width:70px; position:relative; top:10px; background-color:#fff; } #inhalt { position: relative; float:left; width:calc(100% - 70px); padding-bottom: 200px; } .Bild { float:left; width: 100%; clear:left; } .Textabstand { float:left; width: 100%; padding: 1rem; } /********** Fuss **********/ #Fuss { position:fixed; z-index:10; bottom:0px; right: 0px; margin-top:10px; width:70%; max-width: 1610px; padding: 1rem 1rem 0rem 1rem; background-color:#ccc; border-top: 10px solid #fff; } .Fussblock { display: inline-block; width: 13rem; padding: 0rem 1rem 1rem 0rem; background-color:#ccc; vertical-align:top; } .Fussblock a:link, .Fussblock a:visited, .Fussblock a:hover, .Fussblock a:active { color: #000; text-decoration: none; } .Fussblock a:hover, .Fussblock a:active { text-decoration: underline; } .SMiconDiv { display:inline; width:1.3rem; height:1.3rem; padding: 0px 0.7rem 0px 0px; } .SMiconDiv a.rsBildlink, .SMiconDiv a.rsBildlink:link, .SMiconDiv a.rsBildlink:visited, .SMiconDiv a.rsBildlink:hover, .SMiconDiv a.rsBildlink:active { display:inline-block; text-decoration: none; border: none; outline: none; background-color:#444; padding:0px; width:1.3rem; height:1.3rem; } .SMiconDiv a.rsBildlink:hover, .SMiconDiv a.rsBildlink:active { background-color: #ff7e00; } .SMicon { display:inline-block; width:1.3rem; height:1.3rem; } /************ Formate*********/ .rot { color: red; font-style: italic; font-size: 17px; font-family: "Times New Roman", Georgia, Times, serif ; } a.suchergebniss, a.suchergebniss:link, a.suchergebniss:active, a.suchergebniss:visited, a.suchergebniss:hover { float:left; color: black; text-decoration: none; width: calc(100% + 70px); } a.suchergebniss:hover { text-decoration: underline; background-color:#fff; } .Textabstandsuchergebniss { display:block; float:left; width: 100%; padding: 1rem; } .sucheH1 { float:left; width: 100%; padding: 0px 0px 0px 0px; font-weight: bold; font-size: 12px; line-height: 14px; letter-spacing: 0.1em; text-decoration: none; text-transform: uppercase; } .sucheH2 { float:left; width: 100%; padding: 0px 0px 0px 30px; font-weight: bold; font-size: 12px; line-height: 14px; letter-spacing: 0.1em; text-decoration: none; text-transform: uppercase; } .sucheH3 { float:left; width: 100%; padding: 0px 0px 0px 60px; } .sucheText { float:left; width: 100%; padding: 0px 0px 0px 90px; } .SuchAbstandslinie { clear: both; height: 0.5em; background-color: white; width:calc(100% + 70px); } /********** Menü 1 oben **********/ a.nav1, a.nav1X, a.nav1:link, a.nav1:visited, a.nav1:active, a.nav1:hover, a.nav1X:link, a.nav1X:visited, a.nav1X:active, a.nav1X:hover { display: inline-block; font-family: 'd_din_bold', sans-serif; font-weight: normal; font-size: 1rem; line-height: 1.3rem; color: white; padding: 0px 8px 8px 8px; text-decoration: none; text-transform: uppercase; } a.nav1:active, a.nav1X:link, a.nav1X:visited, a.nav1X:active { color: black; } a.nav1:hover, a.nav1X:hover { color: lime; } /********* Menü 2 links **********/ a.nav2, a.nav2X, a.nav2:link, a.nav2:visited, a.nav2:active, a.nav2:hover, a.nav2X:link, a.nav2X:visited, a.nav2X:active, a.nav2X:hover { font-family: 'd_din_bold', sans-serif; font-weight: normal; font-size: 0.95rem; line-height: 1.2rem; text-decoration: none; text-transform: uppercase; color: #999; display: block; padding: 7px 0px 7px 0px; } a.nav2:active, a.nav2X:link, a.nav2X:visited, a.nav2X:active{ color: black; } a.nav2:hover, a.nav2X:hover { color: #ff7e00; } /********* Menü 3 Icons *********/ .icon { width: 60px; height: 60px; } a.nav3, a.nav3X, a.nav3:link, a.nav3:visited, a.nav3:active, a.nav3:hover, a.nav3X:link, a.nav3X:visited, a.nav3X:active, a.nav3X:hover { width: 80px; height: 80px; position: relative; display: block; background-color: White; border: 10px solid transparent; margin:-10px; z-index: 1; } a.nav3:active, a.nav3X:link, a.nav3X:visited, a.nav3X:active { border-color: #ff7e00; z-index: 2; } a.nav3:hover, a.nav3X:hover { border-color: lime; z-index: 3; } @media screen and (max-width:800px) { @charset "UTF-8"; /* CSS Document */ @-ms-viewport{ width: extend-to-zoom; zoom: 1.0;} #zustimmungsdiv { top:40vw; margin: 1rem; padding: 1rem; } /*********** Inhalt*************/ #Branding { float:left; width: 100%; } #HoltenLogo { float:right; } #Menue_1_oben_Div { float:left; width: 100%; padding-left: calc(1rem - 8px); } #C_links { top:0px; text-align:left; } #MenueLinksDiv { display: block; width: calc(100% - 10px); text-align:left; padding: 1rem 0.25rem 200px 1rem; } #Fuss { width:100%; } } @media screen and (max-width:600px) { @charset "UTF-8"; /* CSS Document */ @-ms-viewport{ width: extend-to-zoom; zoom: 1.0;} h1,h2 { -moz-hyphens: none; -o-hyphens: none; -webkit-hyphens: none; -ms-hyphens: none; hyphens: none; } /*********** Kopf *************/ #Branding { position: fixed; width: 120%; height: 16vw; z-index: 5; overflow: hidden; } #Kopf_L, #Kopf_R { position: relative; top:0px; visibility: visible; float:left; width: 18vw; height: 16vw; text-align:left; } #Kopf_R { text-align:right; } .KopfIcons { display: inline-block; height: 4rem; width: 4rem; padding: 1rem; //border: 1px solid black; } a#Logolink, a#Logolink:link, a#Logolink:visited, a#Logolink:active, a#Logolink:hover { float:left; position: relative; width: 60vw; height: 13vw; overflow: hidden; } #HoltenLogo { float:left; display: inline-block; width: 90vw; position: relative; left: -10vw; top: 0vw; } /*********** Inhalt*************/ #top { position:absolute; } #AnkerInhalt { position:absolute; top: -15.5vw; } #HG_Rechts { width: 100%; } #Menue_1_oben_Div { float:left; width: 100%; padding: 1rem; margin-top: 14vw; } #C_links { width: 100%; height: auto; margin:0px; } #MenueLinksDiv { float:left; width: 100%; padding: 1rem 1rem 1rem 1rem; } #inhalt_und_Icon_Div { width:100%; padding: 0px; background-color: #fff; background-color: #ccc; } #iconMenue { width:100%; padding: 0rem 1rem 1rem 1rem; top:0px; } #inhalt { position:relative; float:left; width:100%; padding-bottom: 30px; background-color: #ccc; } .Textabstand { font-size: 1.1rem; line-height: 1.3rem; } #Fuss { position:relative; float:left; height:calc(100vh - 16vw); } .Fussblock { display: block; padding: 0rem 0.5rem 1rem 0rem; } a.suchergebniss, a.suchergebniss:link, a.suchergebniss:active, a.suchergebniss:visited, a.suchergebniss:hover { width: 100%; } .sucheText { padding: 0px; } .SuchAbstandslinie { width:100%; } /********** Menü 1 oben **********/ a.nav1, a.nav1X, a.nav1:link, a.nav1:visited, a.nav1:active, a.nav1:hover, a.nav1X:link, a.nav1X:visited, a.nav1X:active, a.nav1X:hover { border: 1px solid #fff; border: 1px solid transparent; padding: 0.5rem; margin: 0.2rem 0.1rem; } a.nav1:active, a.nav1X:link, a.nav1X:visited, a.nav1X:active, a.nav1:hover, a.nav1X:hover { background-color: #ff7e00; background-color: #fff; color: #ff7e00; } /********* Menü 2 links **********/ a.nav2, a.nav2X, a.nav2:link, a.nav2:visited, a.nav2:active, a.nav2:hover, a.nav2X:link, a.nav2X:visited, a.nav2X:active, a.nav2X:hover { display: inline-block; border: 1px solid #ccc; padding: 0.5rem; margin: 0.2rem 0.1rem; } a.nav2:active, a.nav2X:link, a.nav2X:visited, a.nav2X:active, a.nav2:hover, a.nav2X:hover { background-color: #ff7e00; border-color: #ff7e00; color: #fff; } /********* Menü 3 Icons *********/ a.nav3, a.nav3X, a.nav3:link, a.nav3:visited, a.nav3:active, a.nav3:hover, a.nav3X:link, a.nav3X:visited, a.nav3X:active, a.nav3X:hover { float:left; margin:-5px; } }