/* Generated by Font Squirrel (http://www.fontsquirrel.com) on February 27, 2016 */ @font-face { font-family: 'midietsans_light'; src: url('midiet/midiet_sans_light-webfont.eot'); src: url('midiet/midiet_sans_light-webfont.eot?#iefix') format('embedded-opentype'), url('midiet/midiet_sans_light-webfont.woff2') format('woff2'), url('midiet/midiet_sans_light-webfont.woff') format('woff'), url('midiet/midiet_sans_light-webfont.ttf') format('truetype'), url('midiet/midiet_sans_light-webfont.svg#midietsans_light') format('svg'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'midietsans_italic_light'; src: url('midiet/midiet_sans_italic_light-webfont.eot'); src: url('midiet/midiet_sans_italic_light-webfont.eot?#iefix') format('embedded-opentype'), url('midiet/midiet_sans_italic_light-webfont.woff2') format('woff2'), url('midiet/midiet_sans_italic_light-webfont.woff') format('woff'), url('midiet/midiet_sans_italic_light-webfont.ttf') format('truetype'), url('midiet/midiet_sans_italic_light-webfont.svg#midietsans_italic_light') format('svg'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'midietsans_medium'; src: url('midiet/midiet_sans_medium-webfont.eot'); src: url('midiet/midiet_sans_medium-webfont.eot?#iefix') format('embedded-opentype'), url('midiet/midiet_sans_medium-webfont.woff2') format('woff2'), url('midiet/midiet_sans_medium-webfont.woff') format('woff'), url('midiet/midiet_sans_medium-webfont.ttf') format('truetype'), url('midiet/midiet_sans_medium-webfont.svg#midietsans_medium') format('svg'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'midietsans_italic_medium'; src: url('midiet/midiet_sans_italic_medium-webfont.eot'); src: url('midiet/midiet_sans_italic_medium-webfont.eot?#iefix') format('embedded-opentype'), url('midiet/midiet_sans_italic_medium-webfont.woff2') format('woff2'), url('midiet/midiet_sans_italic_medium-webfont.woff') format('woff'), url('midiet/midiet_sans_italic_medium-webfont.ttf') format('truetype'), url('midiet/midiet_sans_italic_medium-webfont.svg#midietsans_italic_medium') format('svg'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'midietsans_bold'; src: url('midiet/midiet_sans_bold-webfont.eot'); src: url('midiet/midiet_sans_bold-webfont.eot?#iefix') format('embedded-opentype'), url('midiet/midiet_sans_bold-webfont.woff2') format('woff2'), url('midiet/midiet_sans_bold-webfont.woff') format('woff'), url('midiet/midiet_sans_bold-webfont.ttf') format('truetype'), url('midiet/midiet_sans_bold-webfont.svg#midietsans_bold') format('svg'); font-weight: normal; font-style: normal; font-display: swap; } /* @font-face { font-family: 'midietsans_italic_bold'; src: url('midiet/midiet_sans_italic_bold-webfont.eot'); src: url('midiet/midiet_sans_italic_bold-webfont.eot?#iefix') format('embedded-opentype'), url('midiet/midiet_sans_italic_bold-webfont.woff2') format('woff2'), url('midiet/midiet_sans_italic_bold-webfont.woff') format('woff'), url('midiet/midiet_sans_italic_bold-webfont.ttf') format('truetype'), url('midiet/midiet_sans_italic_bold-webfont.svg#midietbold') format('svg'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'midietserif_light'; src: url('midiet/midiet_serif_light-webfont.eot'); src: url('midiet/midiet_serif_light-webfont.eot?#iefix') format('embedded-opentype'), url('midiet/midiet_serif_light-webfont.woff2') format('woff2'), url('midiet/midiet_serif_light-webfont.woff') format('woff'), url('midiet/midiet_serif_light-webfont.ttf') format('truetype'), url('midiet/midiet_serif_light-webfont.svg#midietserif_light') format('svg'); font-weight: normal; font-style: normal; font-display: swap; } */ @font-face { font-family: 'midietserif_italic_light'; src: url('midiet/midiet_serif_italic_light-webfont.eot'); src: url('midiet/midiet_serif_italic_light-webfont.eot?#iefix') format('embedded-opentype'), url('midiet/midiet_serif_italic_light-webfont.woff2') format('woff2'), url('midiet/midiet_serif_italic_light-webfont.woff') format('woff'), url('midiet/midiet_serif_italic_light-webfont.ttf') format('truetype'), url('midiet/midiet_serif_italic_light-webfont.svg#midietserif_italic_light') format('svg'); font-weight: normal; font-style: normal; font-display: swap; } /* @font-face { font-family: 'midietserif_medium'; src: url('midiet/midiet_serif_medium-webfont.eot'); src: url('midiet/midiet_serif_medium-webfont.eot?#iefix') format('embedded-opentype'), url('midiet/midiet_serif_medium-webfont.woff2') format('woff2'), url('midiet/midiet_serif_medium-webfont.woff') format('woff'), url('midiet/midiet_serif_medium-webfont.ttf') format('truetype'), url('midiet/midiet_serif_medium-webfont.svg#midietserif_medium') format('svg'); font-weight: normal; font-style: normal; font-display: swap; } */ @font-face { font-family: 'midietserif_italic_medium'; src: url('midiet/midiet_serif_italic_medium-webfont.eot'); src: url('midiet/midiet_serif_italic_medium-webfont.eot?#iefix') format('embedded-opentype'), url('midiet/midiet_serif_italic_medium-webfont.woff2') format('woff2'), url('midiet/midiet_serif_italic_medium-webfont.woff') format('woff'), url('midiet/midiet_serif_italic_medium-webfont.ttf') format('truetype'), url('midiet/midiet_serif_italic_medium-webfont.svg#midietserif_italic_medium') format('svg'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'midietserif_bold'; src: url('midiet/midiet_serif_bold-webfont.eot'); src: url('midiet/midiet_serif_bold-webfont.eot?#iefix') format('embedded-opentype'), url('midiet/midiet_serif_bold-webfont.woff2') format('woff2'), url('midiet/midiet_serif_bold-webfont.woff') format('woff'), url('midiet/midiet_serif_bold-webfont.ttf') format('truetype'), url('midiet/midiet_serif_bold-webfont.svg#midietserif_bold') format('svg'); font-weight: normal; font-style: normal; font-display: swap; } /* @font-face { font-family: 'midietserif_italic_bold'; src: url('midiet/midiet_serif_italic_bold-webfont.eot'); src: url('midiet/midiet_serif_italic_bold-webfont.eot?#iefix') format('embedded-opentype'), url('midiet/midiet_serif_italic_bold-webfont.woff2') format('woff2'), url('midiet/midiet_serif_italic_bold-webfont.woff') format('woff'), url('midiet/midiet_serif_italic_bold-webfont.ttf') format('truetype'), url('midiet/midiet_serif_italic_bold-webfont.svg#midietserif_italic_bold') format('svg'); 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, p, h1, h2, h3, td, div { font-family: 'midietsans_light', sans-serif; font-weight: normal; font-style:normal; font-size: 1.1rem; line-height: 1.75rem; margin: 0px; padding: 0px; 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; } html, body { background-color: #454a52; background-color: #a0a7b3; height: 100%; width: 100%; } table, tr, td { border-collapse: collapse; border: 0px none transparent; } h1, h2, h3 { font-family: 'midietsans_light', sans-serif; font-weight: normal; font-style:normal; padding: 0px; margin: 0px 0px 0.5rem 0px; font-size: 3rem; line-height: 3.5rem; letter-spacing: 1px; color: #193b79; } h2 { font-size: 2.25rem; line-height: 2.75rem; } h3 { font-size: 1.75rem; line-height: 2.25rem; } h1 i, h2 i, h3 i { font-family: 'midietsans_italic_light', sans-serif; font-weight: normal; font-style:normal; } h1 img { height: 7rem; } i { font-family: 'midietserif_italic_light', sans-serif; font-weight: normal; font-style:normal; } b { font-family: 'midietsans_medium', sans-serif; font-weight: normal; font-style:normal; } b.q7 { font-family: 'midietsans_bold', sans-serif; font-weight: normal; font-style:normal; color: #83ab00; color: #99c800; } b i, i b { font-family: 'midietserif_italic_medium', sans-serif; font-weight: normal; font-style:normal; } ul, ol { padding: 0px; margin: 0.3rem 0px 0.3rem 0.5rem; } ul li { padding: 0.3rem 0px 0.3rem 1.5rem; margin: 0px 0px 0px 0px; list-style-type: none; background-image:url('pic/Listenpunkt.svg'); background-repeat:no-repeat; background-position: left 0.6rem; background-size: 0.6rem; line-height: 1.3rem; } sup { font-family: 'midietsans_bold', sans-serif; display:inline-block; position:relative; font-size: 0.65em; line-height: 0.5rem; letter-spacing: 0px; } img { border-width: 0px; border-style: none; border-color: transparent; padding:0px; margin:0px; } a:link, a:active, a:visited { font-family: 'midietsans_medium', sans-serif; font-weight: normal; font-style:normal; color: #83ab00; text-decoration: none; outline: none; padding: 0.2rem 0.4rem 0.2rem 0.4rem; margin: -0.2rem -0.4rem -0.2rem -0.4rem; word-wrap: break-word; } a:hover { background-color: #B4E611; color: #333; } a.button:link { display: inline-block; border: 2px solid #83ab00; padding: 1rem 2rem 1rem 2rem; margin: 1rem 0px; } .homezeile_grau a.button:link, .homezeile_grau a.button:active, .homezeile_grau a.button:visited, .homezeile_grau a.button { border: 1px solid #fff; color: white; } .homezeile_grau a.button:hover { color: black; } a img { text-decoration: none; } a.rsBildlink { padding:0px; margin:0px; } a.rsBildlink img.Bild:hover { background-color: transparent; } .klein { font-family: 'midietsans_light', sans-serif; font-weight: normal; font-style:normal; font-size: 0.8rem; } .rot { color: red; } .blau { font-weight: bold; } .textanker { position: relative; top: 6rem; } /********* Tabelle **********/ .rsTD { padding: 5px 3px 5px 6px; font-size: 0.8rem; font-family: 'midietsans_light', sans-serif; font-weight: normal; font-style:normal; border-width: 1px; border-style: solid; border-color: silver; } /****************** Startseite *****************/ #startBG1, #startBG2 { position: fixed; top: 0px; height: 100vh; width: 100%; padding: 0px; margin: 0px; background-size: cover; background-position: center; } #Nicht_gefunden_Meldungdiv { position: absolute; top:0px; float:left; width: 100%; background-color: transparent; padding-top: 12rem; } .Nicht_gefunden_Meldung { margin: 1rem auto 0px 15vw; width: 75vw; } .Nicht_gefunden_Meldung p { display: inline-block; font-size: 3rem; line-height: 3.25rem; font-family: 'midietsans_bold', sans-serif; font-weight: normal; font-style:normal; color: white; -webkit-text-stroke: 1px black; text-shadow: 2px 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; margin: 0px 0px 1rem 0px; padding: 0rem 1rem 0.25rem 3.5rem; } #startseitencontainer { width: 100%; position: absolute; top: 0px; } #startkastenverdraenger { width: 100%; height: 100vh; min-height: 25rem; z-index:6; } #startKastenDiv { position: absolute; top: 0px; width: 90%; height: 100vh; min-height: 25rem; padding-left: calc(10% + 2rem); display: flex; justify-content: center; align-items: flex-end; overflow: hidden; } #startKasten { float:left; font-family: 'midietsans_light', sans-serif; font-size: 1.5rem; line-height: 2rem; display: block; max-width: 40rem; text-align: left; min-height: 10rem; padding: 1rem 1.75rem 30rem 2rem; margin-bottom: -29rem; color: white; background-color: #586677; border: 1px solid white; border-bottom: none; } #startKasten h2 { color: white; font-size: 2.25rem; line-height: 2.25rem; } #startKasten a.button:link, #startKasten a.button:active, #startKasten a.button:visited, #startKasten a.button { border: 0px solid #454a52; color: white; background-color: #a6d901; border-radius: 0.3rem; } #startKasten a.button:hover { color: black; } #startcontent { float:left; width: 100%; background-color: #697b8c; background-color: white; border-top: 5px solid #454a52; } #homeinhalt { float:left; width: 100%; } .homezeile, .homezeile_grau { float:left; width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; } .homezeile_grau { background-color: #697b8c; color: white; } .homezeile_grau h2 { color: #a6d901; } .homeblock_links, .homeblock_rechts { display: block; width: 50%; background-color: transparent; text-align: left; } .homeblock_links { } .homeblock_links .textabstand, .homeblock_rechts .textabstand, .homeblock_links .Bild, .homeblock_rechts .Bild { display: inline-block; width: 100%; max-width: 600px; padding: 2rem; } .homeblock_links .textabstand, .homeblock_links .Bild { max-width: calc(600px + 10vw + 2rem); padding: 2rem 2rem 2rem calc(10vw + 2rem); } .homeblock_voll { width: 100%; background-color: transparent; } .homeblock_voll .textabstand, .homeblock_voll .Bild { display: block; width: 80%; margin: 0px auto 0px 10%; max-width: 1200px; padding: 2rem 25vw 2rem 2rem; } .homeblock_links .Bild, .homeblock_rechts .Bild, .homeblock_voll .Bild { padding: 1rem 0px; width: calc(100% - 1rem); } .homeblock_links h2, .homeblock_rechts h2, .homeblock_voll h2 { margin: 1rem 0px 2rem 0px; } /******************** Inhalt ******************/ #content { position: absolute; top: 20rem; width: 100%; padding: 0px 0px 0px 0px; margin: 0px 0px -5rem 0px; z-index: 3000; } #content_center { position: relative; max-width: 900px; min-height: 50vw; padding: 0px 2.5rem 4rem 3.5rem; margin: 0px auto 0px auto; background-color: #fff; } #AbstandInhaltOben { width: 100%; height: 4rem; } .Textblock_1_4, .Textblock_2_4, .Textblock_3_4, .Textblock_4_4 { display:inline-block; vertical-align:top; padding: 0px; margin: 0px; background-color:transparent; } .Textblock_1_4 {width: 25%;} .Textblock_2_4 {width: 50%;} .Textblock_3_4 {width: 75%;} .Textblock_4_4 {width: 100%;} .textabstand { display: inline-block; padding: 0px 1rem 0px 0rem; width: 100%; } .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 2.5rem 0rem; } .Bild { display: block; padding: 0px; width: 100%; } .Textblock_1_4 picture.Bild, .Textblock_2_4 picture.Bild, .Textblock_3_4 picture.Bild, #Fuss .Textblock_1_4 picture.Bild, #Fuss .Textblock_2_4 picture.Bild, #Fuss .Textblock_3_4 picture.Bild, #Fuss .Textblock_4_4 picture.Bild { display:block; padding: 0px; width: 100%; } hr { height:0px; border:0px; border-top: 1px solid #697b8c; margin: 1rem 0px; } .Abstand, .content_Linie, .Fuss_Linie { margin: 0rem; width: 100%; } .content_Linie { height: 3rem; width:100%; margin: 2rem 0px; } .content_balken { clear: both; float: left; height: 2.5rem; width:100%; margin: 2rem 0px 2rem 0px; } .content_Linie hr { position: relative; left: -3.5rem; width: calc(100% + 6rem); height: 1rem; } .content_balken hr { position: relative; left: -3.5rem; width: calc(100% + 6rem); border-top: 0.5rem solid #697b8c; } .Fuss_Linie hr { position: relative; left: 0px; width: 100%; height: 1rem; top: 1rem; border-top: 1px solid white; } .Fuss_balken { float: left; height: 0.5rem; height: 5px; width: 100%; margin: 1rem 0px 1rem 0px; width: 100%; background-color: white; background-color: #454a52; } .Fuss_balken hr { display: none; } /******************** Team ******************/ .Teamblock {width: 25%;} @media screen and (max-width:910px) { .Teamblock {width: 33%;} } @media screen and (max-width:730px) { .Teamblock {width: 50%;} } @media screen and (max-width:480px) { .Teamblock {width: 100%;} } .Teamblock { display:inline-block; padding: 0px 1rem 0px 0px; margin: 0px; margin-bottom: 1rem; } .Teamblock img.Bild { padding: 0px 0px 0.25rem 0rem; width: 100%; } .teamdiv { position: relative; } .portraitFix { position: absolute; position: relative; } .portrait { position: relative; position: absolute; top: 0px; } a.portrait:hover { background-color: transparent; filter: brightness(1.1); cursor: pointer; } a.portrait h2, a.portrait h3, a.portrait p, .TeamInfo h2, .TeamInfo h3, .TeamInfo p, .TeamInfo a, .portraitFix h2, .portraitFix h3, .portraitFix a { font-family: 'midietsans_light', sans-serif; font-weight: normal; font-style:normal; font-size: 0.85rem; line-height: 0.9rem; letter-spacing: 0px; margin: 0px; padding: 0px; } a.portrait h2, .portraitFix h2 { font-size: 1rem; line-height: 1.2rem; } a.portrait h3, .TeamInfo, .portraitFix h3, .portraitFix a { display: none; } .TeamInfo { position: absolute; top: 0px; height: 100%; width: 100%; padding: 0.5rem; background-color: #697b8c; } .TeamInfo:hover { background-color: #454a52; cursor: pointer; } .TeamInfo h2, .TeamInfo h3, .TeamInfo p, .TeamInfo a { display: block; font-family: 'midietsans_medium', sans-serif; color: white; padding: 0.3rem 0.5rem 0.3rem 0.5rem; margin: -0.05rem -0rem -0.05rem -0rem; } .TeamInfo h2 { font-size: 1rem; line-height: 1.2rem; margin-top: 0.25rem; } .TeamInfo a { color: #a3d900; } .TeamInfo a:hover { color: black; } /******************** Fuss ******************/ #Fuss { clear:both; background-color: #697b8c; color: #fff; float: left; width: 100%; padding: 1rem 0px 0px 0px; margin-top: 0px; border-top: 5px solid #454a52; } #Fuss .Textblock_1_4 {width: 25%;} #Fuss .Textblock_2_4 {width: 50%;} #Fuss .Textblock_3_4 {width: 75%;} #Fuss .Textblock_4_4 {width: 100%;} #Fuss .Textblock_1_4, #Fuss .Textblock_2_4, #Fuss .Textblock_3_4, #Fuss .Textblock_4_4 { font-family: 'midietsans_medium', sans-serif; float: left; font-weight: normal; font-style:normal; } #Fuss .Textblock_1_4 .textabstand, #Fuss .Textblock_2_4 .textabstand, #Fuss .Textblock_3_4 .textabstand, #Fuss .Textblock_4_4 .textabstand { font-family: 'midietsans_medium', sans-serif; font-weight: normal; font-style:normal; font-size: 0.75rem; line-height: 1rem; margin: 0px; padding: 1rem 0px 0px 1.5rem; } #Fuss .Textblock_1_4 .Bild, #Fuss .Textblock_2_4 .Bild, #Fuss .Textblock_3_4 .Bild, #Fuss .Textblock_4_4 .Bild { padding: 0.5rem 0px 0px 1.5rem; width: calc(100% - 1rem); } #Fuss a:link, #Fuss a:active, #Fuss a:visited { color: #a6d901; font-family: 'midietsans_bold', sans-serif; } #Fuss a:hover { color: #333; } #Fuss b { font-family: 'midietsans_bold', sans-serif; font-weight: normal; font-style:normal; font-size: 0.8rem; } #totopdiv, #tomenuediv { display:none; position: fixed; right: 1rem; width: 3rem; height: 3rem; z-index: 10000; } #totopdiv { bottom: 4rem; } #tomenuediv { top: 1rem; } #totopdiv:hover, #tomenuediv:hover { background-color: #454a52; } /******** Zustimmungsdiv*********/ #zustimmungsabdecker { position: fixed; width:100%; height: 100%; top:0px; z-index:9999; overflow:auto; background-color: rgba(255,255,255,0.8); } #zustimmungsdiv { background-color: rgba(255,255,255,0.95); border: 1vw solid #697b8c; top: 30%; margin: 6rem; padding: 2rem; z-index:10000; } #zustimmungsbuttondiv { width: 100%; text-align:center; margin: 3rem 0px; } a#consentgross, a#consentgross:link, a#consentgross:visited, a#consentgross:active, a#consentgross:hover, a#consentklein, a#consentklein:link, a#consentklein:visited, a#consentklein:active, a#consentklein:hover { text-decoration: none; display: inline-block; margin: 0.5rem; padding:1rem; color:black; font-family: 'midietsans_medium', sans-serif; font-size: 1.8rem; line-height: 2rem; letter-spacing: 1px; background-color:#99c800; color: white; } a#consentklein, a#consentklein:link, a#consentklein:visited, a#consentklein:active, a#consentklein:hover { background-color: #666; } a#consentklein:hover { background-color:#555; } a#consentgross:hover { background-color:#9ad014; } #zustimmungsdivEinzeln { background-color: rgba(255,255,255,0.95); border: 1vw solid #697b8c; margin:3rem auto; width: 90%; padding: 2rem; z-index:100; } /******** YouTube Video*********/ .film_container3x4, .film_container16x9, .film_container9x16 { padding-bottom: 75%; /* bei 3x4 */ position: relative; overflow: hidden; width:calc(100% + 4rem); left:-2.5rem; height: auto; } .film_container9x16 { padding-bottom: 210%; /* bei 9x16 */ } .film_container16x9 iframe, .film_container9x16 iframe, .film_container3x4 iframe { position: absolute; top: 0; left: 0; width: 90%; height: 90%; max-height: 100vh; background-color: white; } .film_container16x9 { padding-bottom: 56.25%; /* bei 16x9 */ width: 100%; width:calc(100% - 1rem); left:0rem; top:2rem; margin-bottom:3rem; } .film_container16x9 iframe { width:calc(100% + 1rem); height: 100%; } .Textblock_4_4 .textabstand pp .film_container16x9 { padding-bottom: 56.25%; /* bei 16x9 */ width: 100%; max-width: 1200px; height: 50vw; max-height: 675px; left:0rem; top:2rem; margin-bottom:3rem; } /************** Impressum ***************/ #Impressumslinkcontainer { float: left; text-align:right; width: 100%; padding: 0px; margin: 2rem 0px 0px 0px; background-color: #697b8c; border-top: 0.5rem solid #454a52; border-top: 1px solid white; } #Impressumslinkcontainer a, #Impressumslinkcontainer a:link, #Impressumslinkcontainer a:visited, #Impressumslinkcontainer a:active, #Impressumslinkcontainer a:hover { display:inline-block; color: #fff; font-size: 0.75rem; line-height: 2rem; margin: 0px; padding: 0px 1rem 0.2rem 0px; letter-spacing: 0.05rem; } #Impressumslinkcontainer a:hover { background-color: #697b8c; color: #000; } /**************** Kontaktformular *************/ .input { display: block; margin: -0.4rem 0px 0.5rem 0px; padding: 0.3rem 0.5rem 0.2rem 0.5rem; font-family: 'midietsans_light', sans-serif; font-weight: normal; font-style:normal; font-size: 1rem; width:100%; border: 1px solid #ccc; } .Mitteilungsarea { width: 100%; height: 10rem; padding: 0.3rem 0.5rem 0.2rem 0.5rem; margin: 0.5rem 0px; font-family: 'midietsans_light', sans-serif; font-weight: normal; font-style:normal; font-size: 1rem; border: 1px solid #ccc; } #Absendebutton { display: block; margin: 1.5rem 0px 0.5rem 0px; padding: 0.4rem 0.5rem; font-family: 'midietsans_bold', sans-serif; font-weight: normal; font-style: normal; letter-spacing: 0.05rem; font-size: 1rem; background-color: #99c800; color: #fff; border: none; } #Absendebutton:hover { background-color: #B4E611; color: #000; } #MeldungRot, #MeldungGruen { display: block; font-family: 'midietsans_bold', sans-serif; font-weight: normal; font-style: normal; font-size: 1rem; margin-top: 1rem; padding: 0.2rem 0.5rem; background-color: red; color: #fff; } #MeldungGruen { background-color: #99c800; margin-top: 2rem; } #k3, #k4, #k5, #k7, #b3, #b4, #b8 { display:none; } #kDatKreuzDiv, #bDatKreuzDiv { display: block; width: 100%; height: 2rem; margin: 0px; padding-top: 0.5rem; } 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), input.skill, input.skill:hover, input.skill:active, input.skill[type='checkbox'], input.skill[type='checkbox']:hover, input.skill[type='checkbox']:checked, input.skill[type='checkbox']:not(:checked) { -webkit-appearance: none; -moz-appearance: none; appearance: none; float:left; border-radius: 0px; padding: 0px; margin:0px; position:relative; top:0px; left:0px; display: block; width: 1.8rem; height: 1.8rem; border: 1px solid #ccc; background-image:url(pic/check.svg); background-repeat: no-repeat; background-size:1.5rem; background-position: 0.2rem; background-color: white; } input.kreuzkast[type='checkbox']:not(:checked) { background-image: none; } input.kreuzkast[type='checkbox']:hover { background-color: #99c800; } label.kreuzkastlabel, label.skilllabel { position:relative; float:left; left: 0rem; width: calc(100% - 1.8rem); padding-left: 0.55rem; margin-bottom: 1rem; } /************** Kopf ***************/ #Kopf { position:absolute; float:left; width: 100%; padding: 0px; margin: 0px; background-color: #697b8c; z-index: 2001; } #branding { float:left; height: 6rem; width: 25rem; background-color: red; background-color: transparent; } a#LogoLink, a#LogoLink:link, a#LogoLink:visited, a#LogoLink:active, a#LogoLink:hover { float:left; position: relative; top: 0.25rem; padding: 0px; margin: 0.5rem 0px 0px 5vw; text-decoration: none; border-width: 0px; border-style: none; background-color: transparent; } #Logo { float:left; padding: 0px; margin: 0px; text-decoration: none; background-color: transparent; border-width: 0px; border-style: none; width: 20rem; height: 5.4027rem; } #pictureTitelbild { float:left; width: 100%; height: 25vw; padding: 0px; margin: 0px; } #Titelbild { float:left; width: 100%; height: 25vw; padding: 0px; margin: 0px; } /******************** Sprachwahl ******************/ #sprachwahldiv { float: left; text-align: right; width: 100%; height: 2.1rem; padding: 0px 1.35rem 0px 1rem; margin: -1.5rem 0rem 0rem 0rem; } #sprachwahldiv .nav, #sprachwahldiv a.nav, #sprachwahldiv a.nav:link, #sprachwahldiv a.nav:visited, #sprachwahldiv a.nav:active, #sprachwahldiv a.nav:hover, #sprachwahldiv .navX, #sprachwahldiv a.navX, #sprachwahldiv a.navX:link, #sprachwahldiv a.navX:visited, #sprachwahldiv a.navX:active, #sprachwahldiv a.navX:hover { font-family: 'midietsans_light', sans-serif; font-size: 1rem; line-height: 1rem; letter-spacing: 0px; color: white; text-decoration: none; border: none; margin: 0px; padding: 0.5rem 0.4rem 0.4rem 0.4rem; color: #a3d900; float: right; display: inline-block; } #sprachwahldiv .navX, #sprachwahldiv a.navX, #sprachwahldiv a.navX:link, #sprachwahldiv a.navX:visited, #sprachwahldiv a.navX:active, #sprachwahldiv a.navX:hover { color: white; } #sprachwahldiv a.nav:hover { background-color: #454a52; background-color: white; color: black; } /******************** RefMenue ******************/ #RefIconMenueDiv { position: relative; left: -3.5rem; width: calc(100% + 6rem); height: 3rem; margin-bottom: 3.5rem; overflow: hidden; } #RefIconMenueTable { background-color: #454a52; height: 3rem; width: 100%; display: table; border:none; table-layout: fixed; } .RefIcon, a.RefIcon, a.RefIcon:link, a.RefIcon:visited, a.RefIcon:active, a.RefIcon:hover, .RefIconX, a.RefIconX, a.RefIconX:link, a.RefIconX:visited, a.RefIconX:active, a.RefIconX:hover { padding: 0px; height: 3rem; display: table-cell; text-align:center; border:none; } .RefIconX { background-color: white; } a.RefIcon:hover { background-color: #697b8c; background-color: black; } a.RefIconX:hover { background-color: #dadddd; } .RefIcon img, .RefIconX img { position: relative; display:inline-block; margin: 0px; padding: 0px; width: 100%; max-width: 3rem; } /******************** Breadcrumb ******************/ #breadcrumpdiv { float: left; width:100%; padding: 0rem 1rem 0rem 6vw; background-color: #454a52; color: white; } .breadcrumb, .breadcrumblink, a.breadcrumblink, a.breadcrumblink:link, a.breadcrumblink:visited, a.breadcrumblink:active, a.breadcrumblink:hover { float: left; display: inline-block; min-height: 1.5rem; font-family: 'midietsans_light', sans-serif; font-size: 0.9rem; line-height: 1rem; color: #a3d900; text-decoration: none; padding: 0.25rem; margin: 0px 0.05rem; } a.breadcrumblink:hover { background-color: white; color: black; } .breadcrumb { margin:0px; color: white; } .breadcrumbtext { display: inline-block; font-family: 'midietsans_light', sans-serif; font-size: 0.9rem; line-height: 1rem; padding: 0px 0.25rem; } /************* Menü im Inhalt **************/ .navcontainer_im_inhalt, #navcontainer_im_inhalt_mit_pfeil { padding-bottom:0.25rem; margin-right: 1rem; } #navcontainer_im_inhalt_mit_pfeil .Pnav { background-image: url(pic/pfeiloben.svg); background-repeat: no-repeat; background-position: right 0.5rem bottom 50%; } /******************** Menü ******************/ #menue_zeigen, #menue_verbergen { display: block; width: 3rem; height: 3rem; position: absolute; right: 1rem; top: 1rem; z-index:3001; } #menue_verbergen { display: none; } #menue_zeigen:hover, #menue_verbergen:hover { background-color: #454a52; } .menueicon { width: 3rem; height: 3rem; display: block; } #MenueBG { position: fixed; width: 100%; height: 100vh; background-color: #697b8c; z-index:901; display: none; } #Menuecontainer { width: 100%; min-height: calc(100vh - 6rem); position: absolute; left: 0rem; top: calc(6.6rem + 5px); padding-bottom: 5rem; color: white; z-index:1000; display: none; } .Submenuecontainer { display: none; } .pfeilrechtsdiv, .pfeiluntendiv { display: inline-block; width: 3rem; height: 3rem; margin: 0px; padding: 0px; position: relative; right: 1rem; } .pfeilrechtsdiv:hover, .pfeiluntendiv:hover { background-color: #454a52; } .pfeiluntendiv { display: none; } .klappicon { width: 3rem; height: 3rem; border-top: 1px solid white; } .Pnav, a.Pnav, a.Pnav:link, a.Pnav:visited, a.Pnav:active, a.Pnav:hover, .PnavX, a.PnavX, a.PnavX:link, a.PnavX:visited, a.PnavX:active, a.PnavX:hover { font-family: 'midietsans_light', sans-serif; line-height: 1.25rem; display: inline-block; text-decoration: none; color: white; width: 100%; min-height: calc(3rem + 1px); padding: 0.75rem 3rem 0.75rem 2rem; margin: 0px -3rem 0px 0px; border-top: 1px solid white; background-color: #697b8c; } .PnavX, a.PnavX, a.PnavX:link, a.PnavX:visited, a.PnavX:active, a.PnavX:hover { color: #99c800; color: #a3d900; font-family: 'midietsans_medium', sans-serif; letter-spacing: 0px; background-color: #a0a7b3; color: #454a52; } a.Pnav:hover, a.PnavX:hover { background-color: #454a52; color: white; } @charset "UTF-8"; /* CSS Document */ @media screen and (max-width:1000px) { #Fuss .Textblock_1_4, #Fuss .Textblock_2_4, #Fuss .Textblock_3_4, #Fuss .Textblock_4_4 { width: 50%; } /************* Startseite ***********/ #Nicht_gefunden_Meldungdiv{ padding-top: 10rem; } .Nicht_gefunden_Meldung p { display: block; } .Nicht_gefunden_Meldung { margin: 0px 5vw 0px 5vw; width: calc(90vw - 15px); } #startkastenverdraenger, #startKastenDiv { min-height: 30rem; } #startKastenDiv { padding-left: 10%; } .homezeile, .homezeile_grau, .homeblock_links, .homeblock_rechts, .homeblock_voll { float:left; width: 100%; display: block; text-align: left; padding:0px; } .homeblock_links .textabstand, .homeblock_rechts .textabstand, .homeblock_voll .textabstand, .homeblock_links .Bild, .homeblock_rechts .Bild, .homeblock_voll .Bild { display: block; width: 90%; padding: 10vw 0vw 10vw 10vw; margin:0px; text-align: left; max-width: 5000px; } .homeblock_links .Bild, .homeblock_rechts .Bild, .homeblock_voll .Bild { padding: 5vw; width: 90vw; } /******** Zustimmungsdiv*********/ #zustimmungsdiv { margin: 2rem; } /**************** end media **************/ } @charset "UTF-8"; /* CSS Document */ @media screen and (max-width:850px) { /************** Kopf ***************/ #Kopf { position: relative; } /******************** Inhalt ******************/ #content { position: relative; float:left; top: 0rem; } .Textblock_3_4 { width: 100%; } .Textblock_3_4 .textabstand { padding: 0px; } .Textblock_1_4, .Textblock_2_4, .Textblock_3_4 { width: 50%; } .Textblock_1_4 img.Bild, .Textblock_2_4 img.Bild , .Textblock_3_4 img.Bild { width: 100%; } /************* Startseite ***********/ #startKasten { float:left; font-family: 'midietsans_light', sans-serif; font-size: 1rem; line-height: 1.4rem; } } @charset "UTF-8"; /* CSS Document */ @media screen and (max-width:650px) { #content_center { padding: 6vw 2rem 4rem 2rem; } #AbstandInhaltOben { height: 5vw; } .textabstand { font-size: 1.15rem; line-height: 1.8rem; } h1 { font-size: calc(7vw + 0.5rem); line-height: calc(9vw + 0.5rem); } h1 img { height: calc(14vw + 0.5rem); } h2 { font-size: calc(5vw + 0.5rem); line-height: calc(6.5vw + 0.5rem); } h3 { font-size: 1.5rem; line-height: 1.8rem; } li { line-height: 1.5rem; } a.rsBildlink { display:block; margin: 1.5rem 0px; } .content_Linie hr { position: relative; left: -2.5rem; width: calc(100% + 4rem); height: 1rem; } .content_balken hr { position: relative; left: -2rem; width: calc(100% + 4rem); border-top: 0.5rem solid #697b8c; } .Textblock_1_4, .Textblock_2_4, .Textblock_3_4, .Textblock_1_4 img.Bild, .Textblock_2_4 img.Bild, .Textblock_3_4 img.Bild { width: 100%; } .textabstand { padding: 0px; } /******************** RefMenue ******************/ #RefIconMenueDiv { position: relative; left: -2rem; top: -2.25rem; width: calc(100% + 4rem); } #RefIconMenueDiv { margin-bottom: 0.5rem; } /****************** Menü **********/ #Menuecontainer { width: 100%; min-height: calc(100vh - 6rem); position: absolute; left: 0rem; padding-bottom: 5rem; color: white; z-index:1000; top: calc(7rem + 5px); } #breadcrumpdiv { display: none; } /************** Kopf ***************/ #branding { width: auto; height: 7rem; } #Logo { width: auto; max-width: 20rem; width: calc(100vw - 5.5rem); } /************ Sprachwahl ***********/ #sprachwahldiv { position: absolute; top: 5rem; margin: 0px; z-index:1000; } /************** Fuss ***************/ #Fuss .Textblock_1_4, #Fuss .Textblock_2_4, #Fuss .Textblock_3_4, #Fuss .Textblock_4_4 { width: 100%; } #Fuss .Textblock_1_4 .textabstand, #Fuss .Textblock_2_4 .textabstand, #Fuss .Textblock_3_4 .textabstand, #Fuss .Textblock_4_4 .textabstand { font-size: 1rem; line-height: 1.3rem; padding: 1.5rem 5vw 0.5rem 6vw; } #Fuss b { font-size: 1.1rem; } /******** Zustimmungsdiv*********/ #zustimmungsdiv { margin: 1rem; padding: 1rem; }/*********** Startseite ****************/ #Nicht_gefunden_Meldungdiv { padding-top: 7rem; } .Nicht_gefunden_Meldung p { font-size: 1.75rem; line-height: 1.85rem; padding: 0rem 1rem 0.25rem 2.5rem; -webkit-text-stroke: 0px transparent; } #startkastenverdraenger, #startKastenDiv { min-height: calc(10rem + 100vw); } } @charset "UTF-8"; /* CSS Document */ @media screen and (max-width:350px) { h1 { font-family: 'midietsans_medium', sans-serif; font-size: 1.5rem; line-height: 1.7rem; margin-bottom: 1rem; } h1 img { height: 3.3rem; } h2 { font-family: 'midietsans_medium', sans-serif; font-size: 1.3rem; line-height: 1.5rem; margin-bottom: 1rem; } /******************** RefMenue ******************/ #RefIconMenueDiv { margin-bottom: 0.25rem; } /*********** Startseite ****************/ .Nicht_gefunden_Meldung p { font-size: 1.25rem; line-height: 1.5rem; } #startKastenDiv { padding: 0px 1vw inherit 6vw; } #startkastenverdraenger, #startKastenDiv { min-height: calc(6rem + 100vw); } /********* Fuss **********/ #Fuss .Textblock_1_4, #Fuss .Textblock_2_4, #Fuss .Textblock_3_4, #Fuss .Textblock_4_4 { width: 100%; } } @charset 'UTF-8'; /* CSS Document */ /********* Feedback Formular *********/ #feedbackformular { width: 95%; float:left; background-image:url(pic/stahl.jpg); background-attachment:fixed; padding:2rem; background-color: white; } .radiozeile { width: 100%; height: 4rem; } .radiocontainer { display: inline-block; position: relative; height: 4rem; width: 20%; padding: 0px; margin: 0.5rem auto auto auto; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .radiocontainer input { position: absolute; opacity: 0; cursor: pointer; } .checkmark1, .checkmark2, .checkmark3, .checkmark4, .checkmark5 { position: absolute; top: 0; left: 18%; height: 3.5rem; max-height: calc(12vw - 0.2rem); width: 3.5rem; max-width: calc(12vw - 0.2rem); background-color: white; border-radius: 50%; background-size:contain; } .radiocontainer:hover input ~ .checkmark1 { background-image:url(pic/emo/000/1.svg); } .radiocontainer input:checked ~ .checkmark1 { background-image:url(pic/emo/fff/1.svg); } .radiocontainer:hover input ~ .checkmark2 { background-image:url(pic/emo/000/2.svg); } .radiocontainer input:checked ~ .checkmark2 { background-image:url(pic/emo/fff/2.svg); } .radiocontainer:hover input ~ .checkmark3 { background-image:url(pic/emo/000/3.svg); } .radiocontainer input:checked ~ .checkmark3 { background-image:url(pic/emo/fff/3.svg); } .radiocontainer:hover input ~ .checkmark4 { background-image:url(pic/emo/000/4.svg); } .radiocontainer input:checked ~ .checkmark4 { background-image:url(pic/emo/fff/4.svg); } .radiocontainer:hover input ~ .checkmark5 { background-image:url(pic/emo/000/5.svg); } .radiocontainer input:checked ~ .checkmark5 { background-image:url(pic/emo/fff/5.svg); } .radiocontainer:hover input ~ .checkmark1, .radiocontainer:hover input ~ .checkmark2, .radiocontainer:hover input ~ .checkmark3, .radiocontainer:hover input ~ .checkmark4, .radiocontainer:hover input ~ .checkmark5 { background-color: #ccc; } .radiocontainer input:checked ~ .checkmark1, .radiocontainer input:checked ~ .checkmark2, .radiocontainer input:checked ~ .checkmark3, .radiocontainer input:checked ~ .checkmark4, .radiocontainer input:checked ~ .checkmark5 { background-color: #99c800; } #mail { display:none; } #uDatKreuzDiv { display: block; width: 100%; height: 2rem; margin: 0px; padding-top: 0.5rem; } #Absendebutton { display: block; margin-top: 1rem; } @charset "UTF-8"; /* CSS Document */ @media screen and (max-width:1000px) { #feedbackformular { padding:1rem; } .radiozeile, { height: 3rem; } .checkmark1, .checkmark2, .checkmark3, .checkmark4, .checkmark5 { height: 2.5rem; width: 2.5rem; } } @charset "UTF-8"; /* CSS Document */ @media screen and (max-width:700px) { #feedbackformular { width: 96%; } .radiozeile, { height: 4rem; } .checkmark1, .checkmark2, .checkmark3, .checkmark4, .checkmark5 { height: 3.5rem; width: 3.5rem; } }