/**************************************************************************************** * RESPONSIVE DEFINITIONEN *****************************************************************************************/ /**************************************************************************************** * ab 768px *****************************************************************************************/ @media screen and (min-width: 768px) { /* Mobile Elemente ausblenden */ #MobileMenue, #MobileNav, .NavBarTop .MetaNav .LinkImprint, .NavBarTop .MetaNav .LinkData, .FooterLogo {display: none;} /* Deaktivierung Mobile Links */ .LinkMobile {pointer-events: none; cursor: default;} /* Transition */ .Transition:hover, a:hover, a:hover .TextLink, button:hover, .SocialLink:hover, .SocialLink:hover, .ButtonLink:hover, .ButtonSubmit:hover, .LinkPic:hover, .LinkBox:hover img .SubNav a:hover, .slick-prev, .slick-next, .slick-lightbox-close, .DonationForm .ContainerBorder:hover, .NewsletterForm div.form .form_button_submit:hover {-webkit-transition: all 200ms ease; -moz-transition: all 200ms ease; -o-transition: all 500ms ease; transition: all 200ms ease;} .RowDates .LinkBox:hover .Date {-webkit-transition: all 100ms ease; -moz-transition: all 100ms ease; -o-transition: all 100ms ease; transition: all 100ms ease;} .WrapCta .ButtonLink, .ContainerSliderPage .Link, .ContainerSliderElection .Link, .SectionElection .TitleSection, .ContainerSliderPage .SliderPic img {-webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease;} .ButtonRow .ButtonLink, .ContainerLink, .SectionSearchForm .search-form input[type="submit"], .SectionSearchForm .search-form .action input[type="submit"]:hover {-webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease;} .MinifiedTransition, .NavBar nav .Cat, .ContainerPersons .Card.CursorPointer, .ContainerPics .Pic, .ContainerSliderElection .SliderItem {-webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease;} .slick-prev:hover, .slick-next:hover, .ContainerSliderPage .Link:hover, .ContainerSliderElection .Link:hover {transform: scale(1.2); backface-visibility: hidden; /* mozilla stop flickering */ -moz-transform: scale(1.2) rotate(0.02deg);} .Search .SearchIcon:hover, .ListThumbnail .LinkBox:hover .ContainerPic img, .SocialLink:hover, .ContainerLink:hover, .slick-lightbox-close:hover, ul.pager li.pager-first a:hover, ul.pager li.pager-previous a:hover, ul.pager li.pager-next a:hover, ul.pager li.pager-last a:hover {transform: scale(1.1); backface-visibility: hidden;} .ListThumbnail .LinkBox:hover .ContainerPic img {/* mozilla stop flickering */ -moz-transform: scale(1.1) rotate(0.02deg);} .WrapCta .ButtonLink:hover, .ButtonRow .ButtonLink:hover, .ListThemes li a:hover, .SectionCta .ButtonContainer div:hover, .ContainerPersons .Card.CursorPointer:hover, .ContainerPics .Pic:hover, .ContainerSliderElection .SliderItem:hover, .SectionElection .TitleSection:hover, .SectionSearchForm .search-form input[type="submit"]:hover, .SectionSearchForm .search-form .action input[type="submit"]:hover {transform: scale(1.05); backface-visibility: hidden;} .SectionStd02 article .ListThemes li a:hover, .ContainerClaims .ContainerLink.CursorPointer:hover, .ContainerSliderPage .SliderPic img:hover {transform: scale(1.035); /* mozilla stop flickering */ -moz-transform: scale(1.035) rotate(0.02deg);} .DonationForm .ContainerBorder:hover {transform: scale(1.02); backface-visibility: hidden;} .DonationForm .ContainerBorder.Maximized:hover {transform: none; backface-visibility: hidden;} .NewsletterForm div.form .form_button_submit:hover {transform: scale(1.02); backface-visibility: hidden;} .SectionOverview.ListThumbnail .LinkBox:hover .ContainerPic img {transform: scale(1.07); /* mozilla stop flickering */ -moz-transform: scale(1.04) rotate(0.02deg);} .SectionOverview.ListThumbnail li:nth-child(-n+3) .LinkBox:hover .ContainerPic img {transform: scale(1.05); /* mozilla stop flickering */ -moz-transform: scale(1.05) rotate(0.02deg);} .LinkPic:hover {cursor: zoom-in; text-decoration: none;} .ContainerPersons .Card {transform: scale(1);} .ContainerClaims .ContainerLink {transform: scale(1);} } /**************************************************************************************** * ab 1920px *****************************************************************************************/ @media screen and (min-width: 1921px) { body {background-color: #ebebeb;} } /**************************************************************************************** * Standard: 992px - 1380px *****************************************************************************************/ @media screen and (min-width: 992px) and (max-width: 1380px) { html {font-size: 19px;} body {} header .Logo {} header {min-width: 992px;} .Wrap {width: 100%; max-width: 1024px;} .NavBar nav {margin-left: auto;} .NavBar nav .Cat {padding: 0 1em 0 1em;} .NavBar nav .SubCat {padding: 1em 1em 1.15em 1em;} .BgFixed {background-size: 1400px auto;} .BgFixed.Scale100 {background-size: 1380px auto;} .IntroHome {height: 540px;} .NewsletterForm {min-height: 540px;} .SectionCta {min-height: 27em;} .SectionCta .ButtonContainer {font-size: 90%;} .SectionVideos .Wrap {width: 100%;} .SectionVideos .Content {padding-left: 0; padding-right: 0;} .PoliticsOverview.FirstPage .IntroPic, .CalendarOverview.FirstPage .IntroPic, .SocialMediaOverview .IntroPic {background-size: 1380px auto; background-position: center -17rem;} .SectionOverview.FirstPage .ListThumbnail li:nth-child(-n+3) .ContainerPic {height: 17.5em;} .AimsArticle .LinkTop {font-size: 135%; bottom: 1em; left: 55%; transform: translate(-50%, 0);} .AimsArticle .LinkTop a {-webkit-box-shadow: 0px 0px 9px 0 rgba(0,0,0,0.25); -moz-box-shadow: 0px 0px 9px 0 rgba(0,0,0,0.25); box-shadow: 0px 0px 9px 0 rgba(0,0,0,0.25);} /* .cookie-compliance__inner {font-size: 85%;} */ #sliding-popup .popup-content {max-width: calc(100% - 3em) !important;} } /**************************************************************************************** * Standard: 992px - 1200px *****************************************************************************************/ @media screen and (min-width: 992px) and (max-width: 1150px) { html {font-size: 16px;} .WrapMax .Wrap, .Wrap {padding: 0 2em 0 2em; max-width: 1000px;} .SectionForm .Wrap {padding: 0;} footer .FooterNav ul .CtaNav {left: 2em;} footer .FooterNav ul .SocialNav {right: 2em;} .SectionStd .ContainerPic.SizeXXL {height: 21em;} .IntroHome {height: 470px;} .NewsletterForm {min-height: 470px;} .LightboxGallery .Wrap {width: 57%; max-width: 38rem;} .LightboxFeedback .Wrap {max-width: 500px;} .RowTopHome h1, .RowTopHome h2 {font-size: 280%;} .PoliticsOverview.FirstPage .IntroPic, .CalendarOverview.FirstPage .IntroPic, .SocialMediaOverview .IntroPic {background-size: 1100px auto; background-position: center -15rem;} .ContainerShare .shariff li .fab, .ContainerShare .shariff li .far, .ContainerShare .shariff li .fas {padding-left: 0.15em !important;} footer .FooterNav ul .SubCat {font-size: 77% !important;} } /**************************************************************************************** * Zwischengrößen *****************************************************************************************/ @media screen and (min-width: 992px) and (max-width: 1024px) { html {font-size: 16px;} .WrapMax .Wrap, .Wrap {padding: 0 2em 0 2em; max-width: 950px;} .SectionForm .Wrap {padding: 0;} .WrapMax .BgFixed {background-color: #a5bcc2;} .WrapCta {max-width: 100% !important; background-color: #38a6db; background-image: url(../img/bg_fixed.jpg); background-repeat: no-repeat; background-size: 1024px auto; background-position: center 33%;} .WrapCta .ContainerButtons {height: 15em;} .SectionVideos .Wrap {width: 100%;} .SectionVideos .Content {padding-left: 0; padding-right: 0;} .IntroHome {height: 400px;} .NewsletterForm {min-height: 400px;} .ContainerShare .shariff li .fab, .ContainerShare .shariff li .far, .ContainerShare .shariff li .fas {padding-left: 0 !important;} .ContainerPersons .Card .ContainerText {width: 63%;} .PoliticsOverview.FirstPage .IntroPic, .CalendarOverview.FirstPage .IntroPic, .SocialMediaOverview .IntroPic {background-size: 1024px auto; background-position: center -14rem;} footer .FooterNav ul .SubCat {font-size: 73% !important;} } @media screen and (max-height: 1080px) and (max-width: 1440px) { .IntroHome {height: 510px;} .NewsletterForm {min-height: 510px;} } @media screen and (max-height: 800px) and (min-width: 1025px) and (max-width: 1280px) { .IntroHome {height: 470px;} .NewsletterForm {min-height: 470px;} } /**************************************************************************************** Tablet Portrait (min-width: 768px) and (max-width: 991px) *****************************************************************************************/ @media screen and (min-width : 768px) and (max-width : 991px) { html {font-size: 17px;} body {width: 100%; text-align: center; padding-top: 70px;} header {min-width: 768px; height: 70px;} .WrapMax .Wrap, .Wrap {padding: 0 1.5em 0 1.5em; max-width: 800px; width: 100%;} .NavBar .Wrap {width: 100%;} .SectionForm .Wrap {padding: 0;} .BgFixed {min-height: 400px; background-size: 100% auto; background-position: center bottom;} .BgFixed.Scale100 {background-size: 100% auto;} .NavBar nav {margin-left: 2rem;} .NavBar nav li a {margin-right: 0;} .NavBar nav .Cat {padding: 0 .65em 0 .65em;} .NavBar nav .Cat .CatLink {padding-top: 1.35rem;} .NavBar nav .BgSubCat {top: 55px; height: 20em;} .NavBar nav .SubCat {top: 45px; padding-left: .75em;} .NavBar nav .SocialNav {top: 20em;} .Search .SearchIcon {background-position: center 65%;} .SearchExpanded {top: .575em; width: 31.75rem; height: 3.5rem;} .SearchExpanded .SearchContainer {margin-top: 2px; margin-left: 2rem;} .Search .SearchField input[type="text"] {padding: .275em .5em .275em .5em;} .Search .LinkIcon {margin-top: 5px;} header .Logo {width: 7.5em; height: 70px; right: 1em;} header .LogoDom {right: .75em; width: 55px; height: 55px;} header.Minified {height: 50px;} header.Minified #MainMenue {height: 3rem;} header.Minified #MainMenue .Logo {top: 3px; height: 48px; width: 100px;} header.Minified #MainMenue .LogoDom {top: 0; height: 40px; width: 40px; right: .625em;} header.Minified #MainMenue .NavBar nav {left: 6.75em;} header.Minified #MainMenue .NavBar nav .Cat > a {padding-top: 15px;} header.Minified #MainMenue .NavBar nav .BgSubCat {top: 3em; height: 19.75em;} header.Minified #MainMenue .NavBar nav .SocialNav {top: 19.5em;} header.Minified .SearchExpanded {top: 5px; width: 31.75rem; height: auto;} header.Minified .SearchExpanded .LinkIcon {margin-top: -2em;} .MT-M {margin-top: 1em !important;} /* Tablet BgFixed Images Variants -------------------------------------------------- */ .WrapCta {max-width: 100% !important; font-size: 100%; background-color: #38a6db; background-image: url(../img/bg_fixed.jpg); background-repeat: no-repeat; background-size: 1000px auto; background-position: center 27.5%;} .WrapCta .ContainerButtons {height: 16.5em;} .SectionCta, .SectionForm {background-color: #a4bdc2; background-image: url(../img/bg_fixed.jpg); background-repeat: no-repeat; background-size: 1115px auto; background-position: center 17%;} .SectionForm.DonationForm {background-position: center 0;} /* Content: Link-Module ----------------------------------------------------------- */ .AnchorNav a {} .AnchorAim a {top: -6.5em;} .AnchorAim02 a {top: -4em;} .LinkFilter {margin-top: 0; line-height: 1;} .LinkFilter a::before {margin-top: -.1em;} .AimsArticle .LinkTop {font-size: 130%; bottom: 1em; left: 55%; transform: translate(-50%, 0);} .AimsArticle .LinkTop a {-webkit-box-shadow: 0px 0px 9px 0 rgba(0,0,0,0.25); -moz-box-shadow: 0px 0px 9px 0 rgba(0,0,0,0.25); box-shadow: 0px 0px 9px 0 rgba(0,0,0,0.25);} /* Content: Title, Text, Lists ---------------------------------------------------- */ h1, .h1, .TitleContainer {font-size: 280%;} /* Content Rows ------------------------------------------------------------------ */ .IntroHome {height: 380px; max-width: 100%;} .IntroHome .Wrap {padding: 0;} .IntroHome .InnerWrap {width: 100%;} .IntroHome img {height: 100%} .NewsletterForm {min-height: 400px;} /* Content: Module ---------------------------------------------------------------- */ article {width: 100%; padding-left: 18.75%; padding-right: 1em; padding-bottom: 1em;} figure {width: 14em;} /* Grid + Container --------------------------------------------------------------- */ .Content div.Width90 {width: 100% !important;} .ContainerShare .shariff li .far, .ContainerShare .shariff li .fas, .ContainerShare .shariff .twitter .fa-twitter, .ContainerShare .shariff .facebook .fa-facebook-f {padding-left: 0 !important;} .ContainerPersons .TitleSection {margin-bottom: .5rem !important;} .ContainerPersons .Card {min-height: 9.5em;} .ContainerPersons .Card .h1 {font-size: 135%;} .ContainerPersons .Card .ContainerPic {width: 5.5em; height: 5.5em;} .ContainerPersons .Card .ContainerText {width: 60%;} .ContainerPersonsElection .Card {min-height: 17em;} .ContainerFilter {width: 104%; margin-left: -2%;} .ContainerFilter .Width33 {width: 33.2% !important;} .ContainerArticles {padding-left: .2em;} /* Lists ------------------------------------------------------------------------- */ ul.ListThumbnail, ul.ListIcon, ul.ListCalendar, ul.ListThemes, ul.ListLinks {overflow: hidden;} .LinkBox .ContainerDate {font-size: 135%;} .Col.Width33 ul .LinkBox .ContainerText {float: none; width: 100% !important; margin-top: .5em; margin-left: 0;} /* Sections ----------------------------------------------------------------------- */ section, .Section {padding: 3.5em 0 3em 0;} .TitleSection {margin-bottom: 1.5em !important;} .SectionStd .ContainerPic.SizeXXL {height: 15.75rem;} .SectionHighlights {padding: 3em 0 0 0;} .SectionHighlights > .Wrap {padding-left: .95em; padding-right: .95em;} .SectionHighlights .Flex > .Col {width: 100% !important; padding-bottom: 1em; margin-bottom: 3.25em;} .SectionHighlights .Flex .Col .LinkIcon {left: -50%; right: -50%; margin: auto; text-align: center; overflow: hidden;} .SectionHighlights .ListThumbnail li {float: left; width: 31%; margin: 0 1.25% 0 1.25%;} .SectionHighlights .ListThumbnail li:last-child {margin: 0 0 0 1.25%;} .SectionHighlights .ListThumbnail .LinkBox .ContainerPic {float: none; width: 100%; height: 10em;} .SectionHighlights .ListIcon li {float: left; width: 31%; margin: 0 1.25% 0 1.25%;} .SectionHighlights .ListIcon li:last-child {margin: 0 0 0 1.25%;} .SectionHighlights .ListIcon .LinkBox {padding-left: 0;} .SectionHighlights .ListIcon .LinkBox .Topic::before {display: none;} .SectionHighlights .ListCalendar li {float: left; width: 31%; margin: 0 1.25% 0 1.25%; padding-top: 4px;} .SectionHighlights .ListCalendar li:last-child {margin: 0 0 0 1.25%;} .SectionHighlights .ListCalendar .LinkBox .ContainerDate {float: none;} .SectionAims {padding: 2.5em 0 5em 0;} .SectionAims .Content {padding-left: 1.5em; padding-right: 1.5em;} .SectionCurrent {padding: 2.5em 0 1em 0;} .SectionCurrent .LinkBox {min-height: 6em !important;} .SectionCurrent .ListThumbnail .LinkBox .ContainerPic {width: 5.75em; height: 5.75em;} .SectionCurrent .Col.Width50 .ListThumbnail .LinkBox .ContainerText {width: 65%;} .SectionCurrent .Col.Width50 .ListCalendar .LinkBox .ContainerText {width: 80%;} .SectionFeed {padding: 2.5em 0 2em 0;} .SectionVideos {padding: 2.5em 0 1em 0;} .SectionVideos .Wrap {width: 100%;} .SectionVideos .Content {padding-left: 0; padding-right: 0;} .SectionVideos .Content .Width25 {width: 50% !important;} /* .SectionVideos .Content .Width25:nth-child(odd) {clear: both;} */ .SectionVideos .Flex > .Col {padding-bottom: 2.5em;} .SectionVideos .Flex .Col .LinkIcon {position: absolute; left: 0.8em; bottom: 0.5em;} .SectionThemes {padding: 2.5em 0 3em 0;} .SectionThemes .TitleSection {margin-bottom: 1em !important;} .SectionThemes ul.ListThemes {font-size: 190%; overflow: visible;} .SectionOverview.FirstPage .ListThumbnail li:nth-child(-n+3) .ContainerPic {height: 13.5em;} .SectionOverview .ListThumbnail .LinkBox p.Title {font-size: 135%;} .SectionOverview .ListCalendar .LinkBox .ContainerText {width: 80%;} .SectionCta {min-height: 22.375em;} .SectionCta .ButtonContainer {font-size: 65%; max-width: 100%;} .SectionVideosCta h1 {font-size: 230%; margin-bottom: 2.25rem;} .SectionForm .Wrap {max-width: 450px; padding: 0;} .SectionSearchForm .search-advanced #edit-type.form-checkboxes .form-item {width: 50%;} .SectionArticle .ListThemes {margin-top: 1em; margin-bottom: 1em;} .PersonsOverview .ContainerDropDown .Pic img {margin-top: -1em;} .PersonsOverview .ContainerDropDown .h1 {font-size: 190%;} .PersonArticle article {padding-right: 0;} .PersonArticle aside {width: 14em;} .Card .ElectionInfo .Liste01, .Card .ElectionInfo .Liste02 {font-size: 92%;} .PoliticsOverview.FirstPage .IntroPic, .CalendarOverview.FirstPage .IntroPic, .SocialMediaOverview .IntroPic {height: 8em; background-size: 991px auto; background-position: center -14rem;} /* Lists ------------------------------------------------------------------------- */ .ListThumbnail .LinkBox .ContainerPic {} /* Forms -------------------------------------------------------------------------- */ .SectionSearchForm .search-advanced .action {margin-top: 1.5em; width: 50%; padding-right: 2em;} .SectionSearchForm .search-advanced #edit-type.form-checkboxes .form-item {width: 50%; margin-bottom: 0;} /* Footer ------------------------------------------------------------------------- */ footer .FooterNav ul .CtaNav {left: 1em;} footer .FooterNav ul .SocialNav {right: 1em;} footer .FooterNav ul .CatLink, footer .FooterNav ul .SubCat {display: block !important; float: none; width: 100%; font-size: 90% !important;} footer .FooterNav ul .Cat {padding-bottom: .5em;} footer .FooterNav ul .MetaNav {margin-top: 1.5em; margin-bottom: 0;} footer .FooterNav ul .MetaNav .CatLink {display: inline-block !important;} footer .FooterRow01 {padding: 2em 0 1.75em 0;} /* Cookie Compliance ALT -------------------------------------------------------------- */ /* .cookie-compliance__inner {font-size: 75%} */ /* EU Cookie Compliance NEU -------------------------------------------------------------- */ #sliding-popup .popup-content {max-width: calc(100% - 3em) !important;} #sliding-popup .eu-cookie-compliance-default-button, #sliding-popup .eu-cookie-compliance-hide-button, #sliding-popup .eu-cookie-compliance-more-button-thank-you, #sliding-popup .eu-cookie-withdraw-button, #sliding-popup .eu-cookie-withdraw-button, #sliding-popup .eu-cookie-compliance-save-preferences-button {font-size: 17px !important;} /* Lightbox ----------------------------------------------------------------------- */ .Lightbox .Wrap {width: 90%; overflow: visible;} .LightboxGallery .Wrap {width: 70%;} .LightboxGallery .Link {top: 48%;} .LightboxForm .Wrap {width: 33rem;} .LightboxFeedback .Wrap {width: 70%} } /**************************************************************************************** Mobile: max 767px *****************************************************************************************/ @media screen and (max-width: 767px) { html {font-size: 19px} body {padding-top: 55px;} header {position: fixed; height: auto; z-index: 199; overflow: visible;} header.Minified {height: auto;} .Wrap {width: 100%; max-width: 540px; overflow: visible; padding: 0 1rem 0 1rem;} .WrapMax .Wrap {padding: 0 1rem 0 1rem;} .Row {overflow: visible;} .BgFixed {background-size: auto 600px; background-position: center bottom;} .SpaceM {height: .5em;} /* Desktop Elemente ausblenden ----------------------------------------------------- */ #TopMenue, #MainMenue, #SectionMenue, .FooterNav {display: none;} /* Abstaende -------------------------------------------------------------------- */ /* Mobile Menue ------------------------------------------------------------------- */ #MobileTransBg {display: none; position: fixed; width: 100%; height: 100%; overflow: hidden; z-index: 199; background: rgba(1,172,238,0.75);} #MobileMenue {height: 55px; display: block; position: fixed; left: 0; top: 0; margin: 0; width: 100%; background: #fff; -webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.20); -moz-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.20); box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.20);} .MobileClose {display: block; position: fixed; top: 0; left: 0; width: 46px; height: 46px; z-index: 201; text-align: left; background: #009ee3; color: #fff !important;} .MobileClose a {display: block; color: #fff; text-decoration: none; height: 100%; background: url(../img/icon_close.png) 12px center no-repeat; background-size: 20px auto;} .MobileClose a span {display: none;} #MobileMenue .MobileLogo {display: block; position: absolute; right: 7px; top: 0; width: 97px; height: 55px; background: url(../img/logo.png) no-repeat left top; background-size: auto 105%; z-index: 199;} #MobileMenue .MobileLogo span {display: none;} #MobileMenue .MobileButton {display: block; position: absolute; top: 0; width: 55px; height: 55px; z-index: 200;} #MobileMenue .MobileButton a {display: block; width: 100%; height: 100%;} #MobileMenue .MobileButtonNav {left: 4px;} #MobileMenue .MobileButtonNav a {background: url(../img/icon_button_nav.png) center center no-repeat; background-size: 34px 23px;} #MobileMenue .MobileButtonNav a span {display: none;} #MobileMenue .MobileButtonSearch {left: 59px; width: 50px;} #MobileMenue .MobileButtonSearch a {background: url(../img/icon_search-x.png) no-repeat center center; background-size: auto 51%;} #MobileMenue .MobileButtonSearch a span {display: none;} #MobileNav {display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 1000; background: #fff;} #MobileNav .ContactNav {right: 0; top: 0; width: auto; height: 50px; z-index: 210; border: none;} #MobileNav .ContactNav li {float: left; margin-left: 5px; width: 50px; height: 50px; border: none;} #MobileNav .WrapNav {position: absolute; top: 0; left: 0; padding-top: 50px; margin: 0; width: 100%; height: 100%; background: #fff; overflow: auto; text-align: left; -webkit-overflow-scrolling: touch;} #MobileNav .Cat {} #MobileNav .Cat:first-child {margin-top: 45px;} #MobileNav .Cat07 {display: none;} #MobileNav .Cat .CatLink {display: block; padding: 0 0 0 43px; margin-left: 15px; font-family: 'Barlow Condensed', sans-serif; font-size: 200%; font-weight: 700; color: #333; text-decoration: none; line-height: 1.275; letter-spacing: 0.02em; background: url(../img/icon_arrow-r.png) 15px .45em no-repeat; background-size: .5em auto;} #MobileNav .Cat.Active .CatLink, #MobileNav .Cat.MobileActive .CatLink {color: #e5007d; background: url(../img/icon_arrow-b.png) 15px .4em no-repeat; background-size: .5em auto;} #MobileNav .Cat.Active .SubCat, #MobileNav .Cat.MobileActive .SubCat {display: block !important;} #MobileNav .SubCat .SubCatLink.Active {color: #e5007d; font-weight: 600;} #MobileNav .SubCat {position: static; margin-top: .175em; margin-bottom: .75em;} #MobileNav .SubCatLink:before {line-height: 1.6;} #MobileNav .SubCat .SubCatLink {display: inline-block; font-size: 115%; font-weight: 700; color: #333; text-decoration: none; margin-left: 43px; padding: 3px 0 3px 15px; font-weight: 400; line-height: 1.3; background-image: none; text-decoration: none;} #MobileNav .SubCat li.Active .SubCatLink {color: #e5007d; font-weight: 700;} #MobileNav .MetaNav {padding-top: .75em; padding-bottom: 1em; background-color: #009ee3;} #MobileNav .MetaNav .CatLink {font-family: 'Calibri', 'Source Sans Pro', sans-serif; color: #fff; font-size: 115%; font-weight: 400; padding: 0; line-height: 1.6; background-image: none; text-transform: none;} #MobileNav .CtaNav {margin-top: 45px; padding: 1em 0 0 15px; background-color: #009ee3; overflow: hidden; border-bottom: none;} #MobileNav .CtaNav .ButtonLink {color: #e5007d; width: 46%; margin: 0 3.5% 3.5% 0; padding: 0 .25em 0 .25em; float: left; line-height: 2.2; vertical-align: middle; font-family: 'Barlow Condensed', sans-serif; font-size: 125%; white-space: nowrap; background: #ffed00;} #MobileNav .SocialNav {padding: 0 0 0 10px; font-size: 150%; background-color: #009ee3; overflow: hidden; } #MobileNav .SocialNav .SocialLink {display: block; width: 1.85em; height: 1.85em;} #MobileNav .EndList {height: 80px; background-color: #009ee3; position: relative;} #MobileNav .MobileNavLogo {display: block; position: absolute; top: 0; right: 13px; width: 76px; height: 76px; background: url(../img/logo_dom.png) center center no-repeat; background-size: 100% auto; z-index: 1000;} .MobileSearch {display: none; position: fixed; right: 0; padding: 0; width: 100%; height: 100%; padding-top: 120px; background: #ffed00; z-index: 200; overflow: visible;} .MobileSearch .SearchContainer {position: relative; margin: 0 auto 0 auto; width: 90%; font-size: 130%;} .MobileSearch .SearchField {float: none; width: 100%;} .MobileSearch .SearchField input[type="text"] {width: 100%; padding: .5em 2em .5em .5em; border: 2px solid transparent;} .MobileSearch .SearchField input[type="text"]:focus {border-color: #333;} .MobileSearch .SearchButton {position: absolute; top: 0; right: 0; overflow: hidden;} .MobileSearch .SearchButton input[type="submit"] {width: 3rem; height: 3rem; overflow: hidden; background: url(../img/icon_search-x.png) center 65% no-repeat; background-size: auto 58%; cursor: pointer;} .MobileSearch .LinkIcon {margin-top: 1.25em; font-size: 100%; color: #eb008a;} .MobileSearch .LinkIcon a {margin-top: 1.25em; font-size: 100%; color: #eb008a; font-weight: 700;} /* Mobile BgFixed Images Variants -------------------------------------------------- */ .WrapCta {max-width: 100% !important; font-size: 90%; background-color: #38a6db; background-image: url(../img/bg_fixed.jpg); background-repeat: no-repeat; background-size: 1000px auto; background-position: center 25.5%;} .WrapCta .ContainerButtons {height: 18em;} .SectionCta, .SectionForm {background-color: #a4bdc2; background-image: url(../img/bg_fixed.jpg); background-repeat: no-repeat; background-size: 800px auto; background-position: center top;} /* Content Grid + Columns ---------------------------------------------------------- */ .Content {width: 100%; float: none;} .FloatRight {float: none;} .FloatLeft {float: none;} div.Width66, div.Width70, div.Width75 {float: none !important; width: 100%;} .Width90 {width: 100%} .ButtonRow .Col.Width50 {width: 50% !important; float: left !important;} .MT-M {margin-top: 1em !important;} /* Content: Title, Text, Lists ---------------------------------------------------- */ h1, .h1, .TitleContainer {font-size: 200%;} h2, .h2 {font-size: 145%;} h3, .h3 {font-size: 130%;} h1.FloatLeft {float: none !important;} /* Content: Link Module ----------------------------------------------------------- */ .AnchorNav a {display: block;} .AnchorAim a {top: -6.5em;} .AnchorAim02 a {top: -4em;} .ButtonLink {} .Breadcrumb {margin-top: 0; margin-bottom: 1.25em;} .SocialLink {font-size: 110%;} .ButtonCta {font-size: 190%; width: 10em; margin-right: 0; margin-left: 0;} .LinkFilter {display: inline-block; float: none !important; margin-bottom: 2rem; font-size: 100%;} .LinkFilter a::before {margin-top: -.1em;} .LinkBack {margin-top: -.5em; margin-bottom: 1rem;} .AimsArticle .LinkTop {font-size: 120%; bottom: 1em; left: 50%; transform: translate(-50%, 0);} .AimsArticle .LinkTop a {-webkit-box-shadow: 0px 0px 9px 0 rgba(0,0,0,0.25); -moz-box-shadow: 0px 0px 9px 0 rgba(0,0,0,0.25); box-shadow: 0px 0px 9px 0 rgba(0,0,0,0.25);} /* Container ---------------------------------------------------------------------- */ article {width: 100%; padding-left: 0; padding-bottom: 5em; position: relative;} figure {float: none !important; margin-left: auto; margin-right: auto; overflow: hidden; width: 66%;} .ContainerText .Flex .Width50 {width: 100%;} .ContainerPersons {padding-top: 1em;} .ContainerPersons .ContainerText {width: 100%;} .ContainerPersons .TitleSection {margin-bottom: .5rem !important;} .ContainerPersons .Card {width: 100%; min-height: 1px;} .ContainerPersons .Card .ContainerText {text-align: center; width: 100%; padding-bottom: .75em;} .ContainerPersons .Card .ContainerText h3 {margin-bottom: .375em;} .ContainerPersons .Card .ContainerPic {width: 7.5em; height: 7.5em; margin-bottom: 1em; margin-left: auto; margin-right: auto; float: none !important;} .ContainerPersons .Maximized {margin-top: 0;} .ContainerShare {top: auto; bottom: 1em; left: 0; width: 100%;} .ContainerShare .shariff li .fab, .ContainerShare .shariff li .far, .ContainerShare .shariff li .fas {padding-left: .25em !important;} /* spaeter loeschen */ .ContainerFilter {width: 100%; margin: 0 0 3em 0; padding: 0 .5em 1em .5em;} .ContainerFilter .Col {width: 100% !important;} .ContainerFilter .ButtonRow {width: 100% !important;} .ContainerFilter .LinkIcon {bottom: 1.5rem; font-size: 100%;} /* /spaeter loeschen */ .ContainerFilter .views-exposed-widgets .views-exposed-widget {width: 100%;} .ContainerFilter .views-exposed-widgets .views-exposed-widget.views-submit-button {width: 100%} /* Lists -------------------------------------------------------------------------- */ .ListThumbnail .LinkBox .ContainerPic, .ListCalendar .LinkBox .ContainerDate {float: left !important;} .ListCalendar .LinkBox .ContainerDate {font-size: 140%; margin-left: .25rem;} .Col.Width33 .ListIcon .LinkBox, .Col.Width33 .ListThumbnail .LinkBox, .Col.Width33 .ListCalendar .LinkBox {min-height: 1px;} .Col.Width50 .ListThumbnail .LinkBox .ContainerText, .Col.Width50 .ListCalendar .LinkBox .ContainerText {float: left !important; width: 73%;} .Col.Width33 .ListThumbnail .LinkBox .ContainerText, .Col.Width33 .ListCalendar .LinkBox .ContainerText {float: left !important; width: 73%;} /* Sections ------------------------------------------------------------------ */ section, .Section {padding: 1em 0 1em 0;} .SectionCurrent, .SectionVideos {padding: 2.5em 0 1em 0;} .SectionFeed, .SectionAims, .SectionThemes {padding: 2.5em 0 2.5em 0;} .SectionFeed .Width50, .SectionVideos .Width25 {width: 100% !important;} .SectionFeed .Width50:first-of-type {margin-bottom: 2.5em;} .SectionThemes ul.ListThemes {margin-top: 0em;} .TitleSection {margin-bottom: 1em !important; text-align: center;} .SectionStd .ContainerPic.SizeXXL {height: 9.5rem; margin-top: 0; margin-bottom: 1rem;} .SectionStd02 {padding-bottom: 1em;} .SectionStd02 article .ListThemes {font-size: 160%; margin-bottom: 1em;} .SectionHighlights {padding: 2.5em 0 0 0;} .SectionHighlights .Col.Width33 {width: 100% !important;} .SectionHighlights ul {margin-bottom: .75em;} .SectionHighlights .Flex > .Col {padding-bottom: 1em; margin-bottom: 2em;} .SectionHighlights .Flex .Col .LinkIcon {position: static; left: 0; margin-top: 0; margin-bottom: 0;} .SectionCurrent ul {margin-bottom: .75em;} .SectionCurrent .Col.Width50 {width: 100% !important;} .SectionCurrent .Col.Width50:first-child {margin-bottom: 1em;} .SectionCurrent .Flex > .Col {padding-bottom: 1.5em;} .SectionCurrent .Flex .Col .LinkIcon {position: static; left: 0; margin-top: 0; margin-bottom: 0;} .SectionAims .Content {max-width: 540px; padding: 0 1em 0 1em;} .SectionAims .ContainerPics {padding: 0;} .ContainerPics.PicsAims .Width33 {width: 50%;} .AimsArticle .ContainerClaims .ContainerLink .Minimized {padding: .75rem 3.5rem .675rem .75rem;} .AimsArticle .ContainerClaims .ContainerLink .Maximized {padding: .75rem .75rem 1.5rem .75rem;} .AimsArticle article {padding-bottom: 0;} .AimsArticle article h2.h1 {font-size: 150%;} .AimsArticle .ContainerAnchorNav {margin-top: 1em; margin-bottom: 0;} .AimsArticle .AnchorNavAims ul {font-size: 85%;} .SectionThemes ul.ListThemes {font-size: 150%;} .SectionArticle .ListThemes {margin-top: 1em; margin-bottom: 1em;} .SectionArticle .ListThemes li {width: 100%; text-align: left;} .SectionOverview .ListThumbnail, .ContainerArticles .ListThumbnail {margin-top: 0;} .SectionOverview .ListThumbnail .LinkBox .ContainerPic, .ContainerArticles .ListThumbnail .LinkBox .ContainerPic {display: none;} .SectionOverview .ListThumbnail .LinkBox .ContainerText, .ContainerArticles .ListThumbnail .LinkBox .ContainerText {width: 100%; margin-left: 0;} .SectionOverview .ListThumbnail .LinkBox .ContainerText .Title, .ContainerArticles .ListThumbnail .LinkBox .ContainerText .Title {font-size: 135%; margin-bottom: .375rem;} .SectionOverview .ListThumbnail li, .ContainerArticles .ListThumbnail li {margin-bottom: 1em;} .SectionOverview.FirstPage .ListThumbnail li:nth-child(-n+3) {width: 100%; padding-bottom: 0.75em; margin-bottom: 1em;} .SectionOverview.FirstPage .ListThumbnail li:nth-child(-n+3) .ContainerPic {display: block; width: 6em; height: 6em;} .SectionOverview.FirstPage .ListThumbnail li:nth-child(-n+3) .ContainerText {width: 60%; margin-top: 0; margin-left: 1em;} .SectionOverview.FirstPage .ListThumbnail li:nth-child(-n+3) .Title {margin-bottom: .375rem;} .SectionOverview .ListIcon, .ContainerArticles .ListIcon {margin-top: 0;} .SectionOverview .ListIcon .LinkBox .Title, .ContainerArticles .ListIcon .LinkBox .Title {font-size: 135%; margin-bottom: .375rem;} .SectionOverview.FirstPage .ListIcon li:nth-child(-n+3) {width: 100%; padding-bottom: 0.5em; border-top-width: .375em; margin-bottom: 0;} .SectionOverview.FirstPage .ListIcon li:nth-child(-n+2) {border-bottom: none;} .SectionOverview.FirstPage .ListIcon li:nth-child(3) {margin-bottom: 1em;} .SectionOverview .ListCalendar {margin-top: 2em;} .SectionOverview .ListCalendar .LinkBox .ContainerText {width: 72%;} .SectionOverview .ListCalendar .LinkBox .ContainerText .Title {font-size: 135%; margin-bottom: .375rem;} .SectionOverview .ListCalendar .LinkBox .ContainerDate {font-size: 140%;} .SectionVideos .Content .Width25 p {text-align: center;} .SectionVideos .Flex .Col .LinkIcon {position: static; margin-top: 0; margin-bottom: 0; text-align: center;} .CalendarArticle h1 {margin-bottom: 1em;} .CalendarArticle .Topic {line-height: 1.2;} .PersonArticle article {padding-bottom: 0em;} .PersonArticle article .ContainerMain {order: 1; width: 100%;} .PersonArticle aside {order: 2; width: 100%; margin-right: 0; margin-bottom: 1.5em;} .PoliticsOverview.FirstPage .IntroPic, .CalendarOverview.FirstPage .IntroPic, .SocialMediaOverview .IntroPic {display: none;} .PoliticsOverview.FirstPage {border-top: .6em solid #ebebeb;} .CalendarOverview.FirstPage {border-top: .6em solid #ebebeb;} .PoliticsOverview .Breadcrumb {margin-top: 1rem;} .CalendarOverview .Breadcrumb {margin-top: 1rem;} .SocialMediaOverview {padding-bottom: 0;} .SocialMediaOverview ul.ListSocialLinks li .SocialLink {font-size: 80%;} .PersonsOverview .ContainerDropDown .Pic img {margin-top: -.25em;} .PersonsOverview .ContainerDropDown .h1 {font-size: 185%;} .SectionCta {min-height: 22em; padding-top: 2em; padding-bottom: 2em;} .SectionCta .ButtonContainer {width: 90%; max-width: 21em; font-size: 85%;} .SectionCta .ButtonContainer > div {width: 100%; margin: .5em 0 .5em 0;} .SectionCta .ButtonContainer .ButtonCtaMO {padding-top: .15em;} .SectionForm .Wrap {width: 90%; max-width: 400px; padding: 0;} .SectionForm .ContentMain {padding: 0 1em 0 1em;} .SectionForm h1 {font-size: 200%; margin-bottom: 1rem;} .SectionSearchForm .search-advanced .criterion {padding-right: 0; width: 100%; float: none;} .SectionSearchForm .search-advanced .action {margin-top: 1.5em; width: 100%; float: none;} .SectionSearchForm .search-advanced #edit-type.form-checkboxes .form-item {width: 33%; margin-bottom: 0;} .WrapCta {font-size: 87%;} /* Slick Slider */ .ContainerSliderPage .LinkRew {left: -1em; background-position: 50% 52%;} .ContainerSliderPage .LinkFwd {right: -1em; background-position: 50% 52%;} .slick-lightbox .slick-prev, .slick-lightbox .slick-next {width: 3.25rem; height: 3.25rem; } .slick-lightbox .slick-prev {top: 47%; left: -.75rem;} .slick-lightbox .slick-next {top: 47%; right: -.5rem;} /* IntroHome ------------------------------------------------------------------ */ .IntroHome {height: 44vw; max-height: 280px; width: 100%;} .IntroHome .Wrap {max-width: 100%; padding: 0;} .IntroHome .InnerWrap {width: 100%;} .IntroHome img {width: auto; height: 105%; top: -50%; bottom: -50%;} .NewsletterForm {min-height: 280px;} .RowTopHome {margin-top: 0; padding-top: 1em;} .RowTopHome .Content {padding-top: 1.25em;} .RowTopHome h2 {font-size: 280%;} /* Footer ------------------------------------------------------------------------- */ footer .FooterRow .Wrap {} footer .FooterRow01 {padding: 0; height: 7em;} footer .FooterLogo {display: block; width: 3.75em; height: 3.75em; position: absolute; left: -50%; right: -50%; top: .75em; margin: auto; background: url(../img/logo_dom.png) center center no-repeat; background-size: 100% auto;} footer .Copyright {display: block; position: absolute; right: -100%; left: -100%; bottom: .75em; margin: auto; width: 10em; font-size: 90%; text-align: center;} /* Cookie Compliance ALT --------------------------------------------------------------- */ /* .cookie-compliance .cookie-compliance__button {width: 4em !important;} */ /* EU Cookie Compliance NEU --------------------------------------------------------------- */ #sliding-popup .popup-content {max-width: calc(100% - 2em) !important; padding-bottom: 30px !important;} #sliding-popup .popup-content #popup-text p {font-size: 20px !important;} #sliding-popup .eu-cookie-compliance-more-button {font-size: 20px !important;} #sliding-popup .popup-content #popup-buttons {max-width: calc(100% - 180px) !important;} #sliding-popup .eu-cookie-compliance-default-button, #sliding-popup .eu-cookie-compliance-hide-button, #sliding-popup .eu-cookie-compliance-more-button-thank-you, #sliding-popup .eu-cookie-withdraw-button, #sliding-popup .eu-cookie-withdraw-button, #sliding-popup .eu-cookie-compliance-save-preferences-button {font-size: 17px !important;} /* User Login -----------------------------------------------------------------------*/ form#user-login {width: 100%;} } /**************************************************************************************** Phone: max 625px *****************************************************************************************/ @media screen and (max-width: 625px) { /* Cookie Compliance NEU ----------------------------------------------------------------------- */ #sliding-popup .popup-content {text-align: center !important; padding-bottom: 50px !important;} #sliding-popup .eu-cookie-compliance-categories, #sliding-popup .popup-content #popup-text {text-align: left !important;} #sliding-popup .eu-cookie-compliance-categories-buttons, #sliding-popup .popup-content #popup-buttons {margin: auto !important; max-width: 220px !important; float: none !important;} #sliding-popup .eu-cookie-compliance-default-button, #sliding-popup .eu-cookie-withdraw-button, #sliding-popup .eu-cookie-compliance-save-preferences-button {margin-left: auto !important; margin-right: auto !important; width: 100% !important; float: none !important;} #sliding-popup .eu-cookie-compliance-save-preferences-button {margin-bottom: 30px !important;} } /**************************************************************************************** Phone: max 540px *****************************************************************************************/ @media screen and (max-width: 540px) { body {max-width: 540px;} /* Content Grid + Columns -------------------------------------------------------- */ .ContainerColsOuter {width: 100%;} .ContainerColsOuter, .Outer {margin: 0;} /* Lists ------------------------------------------------------------------------- */ .Col.Width50 .ListThumbnail .LinkBox .ContainerText, .Col.Width50 .ListCalendar .LinkBox .ContainerText {float: left !important; width: 68%;} .Col.Width33 .ListThumbnail .LinkBox .ContainerText, .Col.Width33 .ListCalendar .LinkBox .ContainerText {float: left !important; width: 68%;} /* Content: Link Module ---------------------------------------------------------- */ .ButtonLink {width: 100%} .ButtonCta {font-size: 190%; width: 10em;} /* Sections --------------------------------------------------------------------- */ .SectionStd .ContainerPic.SizeXXL {height: 8rem; margin-top: 0; margin-bottom: 1rem;} .SocialMediaOverview ul.ListSocialLinks li .SocialLink {width: 100%; margin-right: 0;} .SectionAims .Content {padding: 0 1.175em 0 1.175em;} .ContainerPics.PicsAims .Width33 {width: 100%;} /* Forms ------------------------------------------------------------------------- */ input[type="submit"], button[type="submit"], a.ButtonSubmit, a.ButtonBack {width: 100%;} .ButtonRow .FloatLeft, .ButtonRow .FloatRight {float: none !important;} .ButtonRow input {width: 100% !important;} .NewsletterForm {min-height: 300px;} /* Cookie Compliance --------------------------------------------------------------- */ .cookie-compliance .cookie-compliance__button {width: 4em !important;} /* IntroHome ----------------------------------------------------------------------- */ .IntroHome {height: 61vw;} .IntroHome img {width: auto; height: 100%; left: -100%; right: -100%;} /* Slider ----------------------------------------------------------------------- */ .ContainerSliderElection {margin: -1em 3em 2em 3em; position: relative;} .ContainerSliderElection .LinkFwd {right: -3em;} .ContainerSliderElection .LinkRew {left: -3em;} } /**************************************************************************************** Phone: max 420px *****************************************************************************************/ @media screen and (max-width: 420px) { html {font-size: 18px;} figure {width: 100%;} .IntroHome img {left: -200%; right: -200%;} .NewsletterForm {min-height: 225px;} ul.pager {padding-top: 4em;} ul.pager li.pager-first, ul.pager li.pager-previous, ul.pager li.pager-next, ul.pager li.pager-last {top: 1em;} /* Sections ----------------------------------------------------------------------- */ .SectionStd .ContainerPic.SizeXXL {height: 7rem; margin-top: 0; margin-bottom: 1rem;} .SectionOverview .ListThumbnail li:nth-child(-n+3) .ContainerText {margin-left: 0em !important; width: 100% !important;} .SectionOverview.FirstPage .ListThumbnail li:nth-child(-n+3) .ContainerPic {position: absolute; top: 0; left: 0; display: block;} .SectionOverview.FirstPage .ListThumbnail li:nth-child(-n+3) .LinkBox .Topic {padding-left: 6.75em; min-height: 6.5em;} .SectionOverview .ListCalendar .LinkBox .ContainerText {margin-left: 0em !important; width: 100%;} .SectionOverview .ListCalendar .LinkBox .ContainerDate {position: absolute; top: 0; left: 0; display: block;} .SectionOverview .ListCalendar .LinkBox .Topic {padding-left: 4em; min-height: 4em;} .SectionOverview .ListCalendar .LinkBox .ContainerText .Time01::before {display: block; content: " "; margin-left: 0;} .CalendarArticle .Topic {font-size: 135%;} .CalendarArticle .Topic .Date {display: block;} .CalendarArticle .Topic .Time01::before {content: ""; margin-left: 0; margin-right: 0;} .SectionForm h1 {font-size: 180%;} } /**************************************************************************************** Phone: max 375px *****************************************************************************************/ @media screen and (max-width: 375px) { .NewsletterForm {min-height: 235px;} .ButtonCta {font-size: 180%; width: 100%;} .SectionCta .ButtonContainer {font-size: 75%;} .SectionForm h1 {font-size: 160%;} .SectionSearchForm .search-advanced #edit-type.form-checkboxes .form-item {width: 50%;} } /**************************************************************************************** Phone: max 320px *****************************************************************************************/ @media screen and (max-width: 320px) { body {font-size: 15px;} .NewsletterForm {min-height: 220px;} .ContainerShare .shariff li, .ContainerShare .shariff li a {width: 35px; height: 35px;} .ContainerShare .shariff li .fab, .ContainerShare .shariff li .far, .ContainerShare .shariff li .fas {padding-left: 0em !important;} } /**************************************************************************************** Phone: Landscape Formate ****************************************************************************************/ @media screen and (max-height: 420px) and (orientation: landscape) { .IntroHome {height: 320px;} } @media screen and (max-height: 380px) and (orientation: landscape) { .IntroHome {height: 285px;} } @media screen and (max-height: 360px) and (orientation: landscape) { .IntroHome {height: 290px;} } @media screen and (max-height: 320px) and (orientation: landscape) { .IntroHome {height: 230px; font-size: 85%;} }