/**************************************************************************************** * RESPONSIVE DEFINITIONEN *****************************************************************************************/ @media screen and (min-width: 768px) { .Sidebar nav .CatLink.Active { position: relative; padding: 0.65rem 0 1rem 2.35rem; } .Sidebar nav .CatLink.Active:before { content: ' '; position: absolute; top: 1.25rem; left: 0; display: block; width: .875em; height: .875em; } .Sidebar nav .Cat01 .CatLink.Active:before { background-color: var(--red); } .Sidebar nav .Cat02 .CatLink.Active:before { background-color: var(--cyan); } .Sidebar nav .Cat03 .CatLink.Active:before { background-color: var(--orange); } .Sidebar nav .Cat04 .CatLink.Active:before { background-color: var(--green); } .Sidebar nav .Cat05 .CatLink.Active:before { background-color: var(--purple); } } /**************************************************************************************** * 768px - 1199px *****************************************************************************************/ @media screen and (min-width: 768px) and (max-width: 1199px) { body {font-size: 17px;} header {height: 11.5em;} header.Minified {height: 6em;} header.Minified #MainMenue .NavBar nav {top: 3.375rem;} header.Minified #MainMenue .NavBar nav li a {font-size: 130%;} header.Minified #MainMenue .NavBar nav .SubCat {top: 2.9em;} header .Logo {margin-left: 0; height: 4em;} header.Minified .Search {right: 28em; width: 19em;} .Wrap {width: 100%; max-width: 1024px;} .Wrap, .NavBar nav {padding: 0 15px 0 15px;} .NavBar nav {} .NavBar nav li a {} .NavBar nav .Cat .mainNavHover {min-height: 3.325rem;} .NavBar nav .Cat a.CatLink.Active {min-height: 3.325rem;} .NavBar nav .Cat a.CatLink span {font-size: 95%;} .NavBar nav .SubCat {top: 4.3em; left: 10px; width: calc(100% - 20px);} .NavBar nav .SubCat li {width: 46% !important;} .Sidebar nav .SubCat .SubCatNav .Active > a {background-position: 0.125em 0.5em; background-size: 7px auto;} .TabNav ul li a {padding: 0 1.25em 0 1.25em;} .Search {right: 20px; width: 22rem;} .Search .SearchField input[type="text"] {padding-left: 0; font-size: 100%;} .Search .SearchButton {top: -3px;} .International {margin-right: .5em;} .RowTop {margin-top: 8.75em;} .RowQuicklinks .ColumnPic .Box {padding-top: 0; padding-left: 2rem;} .RowQuicklinks .ColumnPic .ContainerPic {margin-bottom: 1.5rem;} .ContentRow.RowGrid00, .ContentRow.RowGrid01, .ContentRow.RowGrid02, .ContentRow.RowGrid04 {padding-top: 2.5rem; padding-bottom: 2rem;} .RowGrid01 .BoxNewsRegional {padding-top: 0;} .RowNews {padding-top: 3rem; padding-bottom: 3rem;} .RowNews .Box {display: block;} .RowNews .h1 {margin-bottom: 1.5rem;} .RowUkraine {padding-bottom: 4rem;} .RowUkraine .ContainerExpanded {padding: 3em 4em 1.5em 4em;} .BoxShortNews .h2 {font-size: 140%; margin-bottom: 1rem !important;} .BoxShortNews .Pic {margin-bottom: 1rem !important;} .BoxShortNews .ButtonLink {margin-top: .5em !important; margin-bottom: 1em;} .BoxJobs .ButtonLink {margin-top: 1.25em !important;} .RowGrid00 .BoxCourses, .RowGrid01 .BoxCourses, .RowGrid02 .BoxCourses {padding-top: 0; padding-right: 0 !important;} .RowGrid00 .BoxCourses .h1, .RowGrid01 .BoxCourses .h1, .RowGrid02 .BoxCourses .h1 {margin-bottom: 1.75rem !important;} .RowGrid00 .BoxAboutUs {padding-right: 0 !important;} .RowGrid00 .BoxAboutUs .BoxLinks {margin-top: 0;} .RowGrid00 .LinkTitleBox {margin-top: 2rem; width: calc(50% - .75rem); margin-right: 1.5rem;} .RowGrid00 .LinkTitleBox .TitleBox {line-height: 1.36; font-size: 140%;} .RowGrid00 .LinkTitleBox:last-of-type {margin-right: 0;} .RowGrid00 .BoxSocialMedia {float: left; height: auto; margin-top: .75rem;} .RowGrid02 .BoxSocialMedia {margin-top: 0;} .BoxSocialMedia .TitleBox {font-size: 140%;} .SocialMediaLinks a {width: 2.5em; height: 2.5em;} .RowGrid01 .LinkTitleBox {height: auto; width: calc(50% - 2.5%);} .RowGrid01 .LinkTitleBox .TitleBox {margin-top: 0 !important;} .RowGrid01 .BoxSocialMedia {height: auto; width: calc(50% - 2.5%);} .RowGrid03 .Content {width: 100%; float: none; padding-left: 0;} .RowGrid03 .BoxContact .Pic {width: 10.375em; height: 10.375em;} .RowGrid04 {margin-bottom: -3.5em; margin-top: 0;} .RowGrid04 .BoxSocialMedia {height: 8.75em;} .RowAboutUs .ContainerBrochure {max-width: 20rem;} .RowAboutUs .BoxSocialMedia {width: 100%;} .RowAboutUs .consent-container-gmaps {max-width: 36em; margin-left: auto; margin-right: auto; height: 30em;} .RowAboutUs .LinkTitleBox, .RowAboutUs .BoxSocialMedia {width: 100% !important; margin-right: 0; margin-top: 0 !important;} .RowAboutUs .BoxSocialMedia {height: 8.5em !important;} .RowAboutUs .SpaceS {margin-bottom: 0;} .RowAboutUs .SpaceXL {margin-bottom: 2em;} .BoxContact .Pic {width: 9.5em; height: 9.5em;} .BoxNewsGermany h4 {line-height: 1.333; font-size: 140%;} .RowSponsoring {padding-top: 2.5em; padding-bottom: 1.5em;} .RowSponsoring .BoxSponsoring {margin-right: 3rem; width: calc(33.333% - 2rem) !important; padding: 1.5em 1.25em 0em 1.25em; font-size: 80%;} .ContentMain {padding-bottom: 2.5em;} .PagePic {height: 15.75em;} .TitleBox {font-size: 140%; line-height: 1.333;} .LinkAll, .ButtonLink {font-size: 20px;} .BoxJobs .TitleBox, .BoxNewsRegional .TitleBox, .BoxShortNews .TitleBox, .BoxNewsGermany .TitleBox {font-size: 200%;} .ContentKita .ContainerRight {width: 27%;} .ContentKita .ContainerRight .ButtonLink, .ContentKita .ContainerRow .ButtonLink {font-size: 85%;} .ContainerPano a {height: 21em;} .ColumnRight .BoxContact .TitleBox {font-size: 145%; padding-top: 0.2em;} .SearchResults.ResultsKita .Container .ColumnAddress {width: 57.5%;} .SearchResults.ResultsKita .Container .ColumnLinks {width: 39%;} .ColumnRight .BoxContact {width: 100%;} .ColumnRight .BoxContact .ColumnPic {width: auto; float: left;} .ColumnRight .BoxContact .Pic {width: 10.375em; height: 10.375em;} .ColumnRight .BoxContact .Text {width: calc(100% - 12.5em); float: right;} .ColumnRight .BoxContact .TitleBox {display: block; margin-bottom: 1em !important;} .ContentKita .ContainerRow .ButtonLink {font-size: 1.85vw !important;} .div-eilmeldung, .breaking-news-top {font-size: 90% !important;} .Slider, .Slider .Slide {height: 468px;} .SliderGallery, .SliderGallery .Slide {height: 300px;} .SliderGallery p.TextPic {top: 313px} .SliderStartPage {margin-top: 12rem; margin-bottom: 0;} .SliderStartPage .Slide .Wrap {padding: 1.25rem 1.5rem 1.5rem 1.5rem;} .SliderStartPage p.Title {font-size: 4vw;} .SliderStartPage .player_start > div:nth-child(2) p.Title{font-size: 3.25vw;} .SliderStartPage a.Button {margin-top: 1.25rem; font-size: 130%;} .FieldRadio input[type="radio"], .FieldCheckbox input[type="checkbox"] {/* height: 1.25em !important; width: 1.25em !important; */} .FormVar02 .Label {line-height: 2.15;} .FormVar02 select {padding-left: 0.75rem;} footer .FooterNav {font-size: 85%;} footer .FooterNav .Column {padding-right: 20px;} footer .FooterRow02 .LinkHotline {top: -5rem;} } /**************************************************************************************** * 1020px - 1700px *****************************************************************************************/ @media screen and (min-width: 1020px) and (max-width: 1700px) { body {font-size: 17px;} .Wrap {width: 100%; max-width: 100%; padding-left: 20px; padding-right: 20px;} header .Logo {left: 1.5rem; height: 5.25em;} .NavBar nav {padding-left: 20px; padding-right: 20px;} .NavBar nav .Cat a.CatLink.Active {min-height: 4.25rem;} .NavBar nav .SubCat {width: calc(100% - 40px); left: 20px; top: 4.275em;} .NavBar nav .SubCat li {width: 30% !important;} .SliderStartPage {padding-bottom: 0; height: 41vw;} .SliderStartPage .Slide {height: 37vw;} .SliderStartPage .Slide .Wrap {left: 3vw; bottom: 4vw;} .SliderStartPage p.Title {font-size: 4vw;} .SliderStartPage .player_start > div:nth-child(2) p.Title{font-size: 3.35vw;} .RowQuicklinks {padding-bottom: 0;} .RowQuicklinks .Column {margin-right: 3rem; width: calc(33% - 1.8rem) !important; } .RowQuicklinks .ColumnPic .Pic {height: 14vw;} .ContentRow.RowGrid00, .ContentRow.RowGrid01, .ContentRow.RowGrid02, .ContentRow.RowGrid04 {padding-top: 3rem; padding-bottom: 3em;} .RowAboutUs .consent-container-gmaps {height: 27.5em; display: flex;} .RowNews {padding-top: 4rem; padding-bottom: 3rem;} .RowNews .Box .Width60 {padding-left: 2rem;} .RowUkraine {padding-bottom: 3rem;} .RowUkraine .Box .Width60 {padding-left: 2rem;} .RowCourses, .RowAboutUs {padding-bottom: 0 !important;} .BoxJobs, .BoxNewsRegional {width: calc(50% - 1.5rem) !important; margin-right: 3rem;} .RowGrid00 .BoxCourses, .RowGrid01 .BoxCourses, .RowGrid02 .BoxCourses, .RowGrid04 .BoxCourses, .RowGrid00 .BoxAboutUs {padding-right: 2rem !important;} .RowGrid00 .BoxAboutUs .ButtonLink {margin-right: .75rem; margin-bottom: .75rem;} .BoxNewsGermany .ContainerNews {-webkit-column-gap: 2rem; -moz-column-gap: 2rem; column-gap: 2rem;} .RowSponsoring .BoxSponsoring {margin-right: 3rem; width: calc(33% - 1.8rem) !important;} .RowGrid03 .Content {width: 100%; float: none;} .ColumnRight .BoxContact {width: 100%;} .ContentKita .ContainerRow .ButtonLink {font-size: 125% !important;} } /**************************************************************************************** * 1020px - 1340px *****************************************************************************************/ @media screen and (min-width: 1020px) and (max-width: 1340px) { header.Minified .Search {right: 28em; width: 16em;} h1, .h1, .BoxJobs .TitleBox, .BoxNewsRegional .TitleBox, .BoxShortNews .TitleBox, .BoxNewsGermany .TitleBox {font-size: 240%;} .BoxAboutUs .SpaceS {display: none;} .NavBar .ContactLinks {margin-top: .5rem;} .International {margin-top: .375rem;} .Search {top: 3em; right: 20px; width: 25.75rem;} .SliderStartPage {height: 520px;} .SliderStartPage .Slide {height: 470px;} .SliderStartPage a.Button {} .RowAboutUs .ContainerVideo {padding-right: 2em;} .RowAboutUs .consent-container-gmaps {height: 29.25em;} .RowAboutUs .SpaceXL {margin-bottom: 0;} .RowQuicklinks .Column {width: calc(33% - 1.85rem) !important;} .RowQuicklinks .ColumnPic .TitleLink {font-size: 130%;} .ContentMain {width: 71%; padding-right: 0;} .ContentMain .ColumnRight {width: 100%; margin-top: 1.5em; margin-right: 0;} .ContentMain .ColumnMain {width: 100%;} .ColumnRight .BoxContact {padding: 0.95em 1.375em 0 1.375em; border: 1px dotted var(--black); width: 100%;} .ColumnRight .BoxContact .ColumnPic {width: auto; float: left;} .ColumnRight .BoxContact .Pic {width: 10.375em; height: 10.375em;} .ColumnRight .BoxContact .Text {width: calc(100% - 12.5em); float: right;} .ColumnRight .BoxContact .TitleBox {display: block; margin-bottom: 1em !important;} .Sidebar {width: 25%;} .BoxCertifications .ColumnPic img {width: 6.95em;} } /**************************************************************************************** * 1341px - 1600px *****************************************************************************************/ @media screen and (min-width: 1341px) and (max-width: 1600px) { .NavBar nav .SubCat li {width: 30% !important;} .RowAboutUs .ContainerVideo {padding-right: 2em;} .ContentMain {width: 71%; padding-right: 0;} .ContentMain .ColumnRight {width: 100%; margin-top: 1.5em; margin-right: 0;} .ContentMain .ColumnMain {width: 100%;} .ColumnRight .BoxContact {padding: 0.95em 1.375em 0 1.375em; border: 1px dotted var(--black);} .ColumnRight .BoxContact .ColumnPic {width: auto; float: left;} .ColumnRight .BoxContact .Pic {width: 10.375em; height: 10.375em;} .ColumnRight .BoxContact .Text {width: calc(100% - 12.5em); float: right;} .ColumnRight .BoxContact .TitleBox {display: block; margin-bottom: 1em !important;} .Sidebar {width: 25%;} } /**************************************************************************************** * 1601 - 1700px *****************************************************************************************/ @media screen and (min-width: 1601px) and (max-width: 1700px) { .RowAboutUs .ContainerVideo {padding-right: 1.5em;} } /**************************************************************************************** Tablet (min-width: 768px) and (max-width: 1020px) *****************************************************************************************/ @media (min-width: 768px) and (max-width: 1020px) { body {width: 100%; font-size: 17px; text-align: center;} header {} .Wrap {width: 100%; overflow: hidden; padding: 0 1.75% 0 1.75%;} /* Fixe Positionierungen gemaess Wrap Padding */ header .Logo, #FixNavBar .Logo {left: .75em;} .Search {right: 1em;} header .Logo {top: 0.75em; width: 20em; height: 4em; margin-left: 0.5em;} header .Logo100 {width: 22em; margin-left: 0;} header .Logo100 a img {height: 75%;} header {height: 10.5rem;} #FixNavBar .NavBar {height: 7em;} #FixNavBar .NavBar nav {top: 3.5em;} #FixNavBar .Logo {height: 4em;} .NavBar nav {top: 8em; padding: 0 1.75% 0 1.75%; font-size: 80%;} .NavBar nav li a {margin-right: 0;} .NavBar nav .Cat {width: 18.25%;} .NavBar nav .Cat05 {width: 27%;} .NavBar nav .Cat .mainNavHover {min-height: 3.55rem;} .NavBar nav .Cat a.CatLink.Active {min-height: 3.55rem;} .NavBar nav .SubCat {top: 4.5em; width: 96.5%; left: 1.75%; padding-top: 1.5em;} .NavBar nav .SubCat li {width: 46%;} .NavBar nav .SubCat a {font-size: 115%; padding-top: 0.7rem;} .NavBar nav .SubCat .SubCatLink .Flag, .Sidebar nav .SubCat .SubCatLink .Flag, footer .FooterNav .SubCat .SubCatLink .Flag {font-size: .625em;} .NavBar .ContactLinks {font-size: 85%; margin-top: 0.5em;} .International {font-size: 100%; margin: 0.05em 0 0 -0.225em;} .Search {top: 2.85em; width: 22rem; right: 1em;} .Search .SearchField input[type=text] {font-size: 100%; padding: 0.5em 10% 0.4em 0;} .Search .SearchButton {width: 2.2em;} .Search .SearchButton input[type="image"] {padding-top: 1.075em;} header.Minified {height: 5em;} header.Minified #MainMenue {height: auto;} header.Minified #MainMenue .Logo {height: 2.75em; left: 1.25%; top: 0.25em;} header.Minified #MainMenue .Logo100 {left: 1.15em} header.Minified #MainMenue .NavBar nav li a {font-size: 125%;} header.Minified .Search {top: 0.5rem; right: 46%; width: 25%; display: none;} header.Minified .Search .SearchButton {width: 2.25em;} header.Minified .NavBar .ContactLinks {margin-top: 0.5em;} header.Minified .NavBar .International {margin-top: 0.05em;} .Width90 {width: 100% !important;} .Box, .ColumnBg {} footer .FooterNav a {font-size: 70%;} /* Content Grid + Columns --------------------------------------------------------- */ .Sidebar {width: 33%;} .Column {margin-bottom: 1em;} .ContentMain {width: 67%; padding: 2em 1.75em 5em 0.25em;} .ContentMain .ColumnMain {width: 100%;} .ContentMain .ColumnRight {width: 100%; margin-top: 1.5em; margin-right: 0;} .PageContent {margin-bottom: 1em;} .Content div.Width90 {width: 100% !important;} /* Content: Module ---------------------------------------------------------------- */ .PagePic {height: 11.5em;} /* Content: Link-Module ----------------------------------------------------------- */ .LinkBack {font-size: 95%; /* line-height: 1 !important; */} .LinkAll {margin-top: 0.65em !important;} .LinkDate .Text {width: 90%;} .SocialMediaLinks a {width: 3.5em; height: 3.5em;} .TabNav ul {font-size: 111%;} .TabNav ul li a {padding: 0 1.15em 0 1.15em} .AnchorNav {font-size: 90%;} .AnchorNav a {} .AnchorAim a {top: -5.5em;} .AnchorAim02 a {top: -5em;} .ButtonLink {font-size: 20px;} /* Content: Title, Text, Lists ---------------------------------------------------- */ h1, .h1 {font-size: 200%;} h2, .h2 {font-size: 130%;} h3, .h3 {font-size: 120%;} /* Content: Rows ----------------------------------------------------------------- */ .RowTop {margin-top: 9.175em;} /* Content: Boxes ---------------------------------------------------------------- */ .BoxCourses {width: 100% !important;} .BoxSocialMedia .TitleBox {font-size: 140%;} .BoxCertifications .ColumnPic {max-width: 9.85em;} .RowAboutUs .ContainerVideo {padding-right: 0;} .BoxAboutUs .BoxLinks a {margin-right: 1.75em;} .BoxShortNews .InnerWrap {padding: 0; border: none;} .ColumnRight .BoxContact {padding: 0.95em 1.375em 0 1.375em; border: 1px dotted var(--black);} .ColumnRight .BoxContact .TitleBox {display: block; margin-bottom: 1em !important;} .ColumnRight .BoxContact .Text {padding-top: 1.5em;} .ColumnRight .BoxContact .Pic {float: left; width: 9em; height: 9em; margin-right: 1.25em;} /* Row Grids */ .RowGrid00 .BoxShortNews {width: 100%; min-height: 1em; padding-bottom: 1em;} .RowGrid00 .BoxShortNews .LinkAll {margin-right: 1.575em;} .RowGrid00 .BoxShortNews .ContainerLink {width: calc(33.333% - 1.8%); margin-right: 2.5%; float: left; border-top: 1px dotted #000 !important; padding: 1em 0 1rem 0 !important;} .RowGrid00 .BoxShortNews .ContainerLink:last-of-type{margin-right: 0;} .RowGrid00 .BoxShortNews .Pic {width: 100%; margin-bottom: 0.75em; overflow: hidden; position: relative;} .RowGrid00 .BoxShortNews .Pic img {} .RowGrid00 .Width33 {width: 100% !important;} .RowGrid00 .Width66 {width: 100% !important;} .RowGrid00 .BoxSocialMedia {width: 48.75%; height: 9rem; float: right;} .RowGrid00 .BoxSocialMedia .SocialMediaLinks a {width: 2.5rem; height: 2.5rem;} .RowGrid00 .LinkTitleBox {width: 48.75%; height: 4rem; float: left;} .RowGrid00 .LinkTitleBox .TitleBox {font-size: 140%;} .RowGrid00 .BoxAboutUs, .RowGrid00 .BoxNewsRegional {width: 100% !important; min-height: 1rem;} .RowGrid00 .BoxAboutUs .Pic {width: 48%; float: left; margin-right: 1.25em;} .RowGrid00 .BoxAboutUs .BoxLinks {margin: 0 0 0.5em 0; font-size: 120%;} .RowGrid00 .BoxNewsGermany, .RowGrid00 .BoxJobs {width: 100% !important; min-height: 1rem;} .RowGrid00 .BoxJobs a.ContainerLinkBg {min-height: 4.75em;} .RowGrid01 .Width33 {width: 100% !important;} .RowGrid01 .BoxSocialMedia {width: 31.65%; height: 7rem; float: left;} .RowGrid01 .BoxSocialMedia .SocialMediaLinks a {height: 2.5rem; width: 2.5rem;} .RowGrid01 .LinkTitleBox {width: 31.65%; height: 7rem; float: left; margin: 0 2.5% 0 0;} .RowGrid01 .LinkTitleBox .TitleBox {margin: 1.375rem 0 0 0 !important; font-size: 140%;} .RowGrid01 .BoxAboutUs {width: 100% !important; min-height: 1rem;} .RowGrid01 .BoxNewsRegional {width: 100% !important; min-height: 1rem; padding-bottom: 1em !important;} .RowGrid01 .BoxAboutUs .Pic {width: 48%; float: left; margin-right: 1.25em;} .RowGrid01 .BoxAboutUs .BoxLinks {margin: 0.875em 0 2em 0; font-size: 120%;} .RowGrid01 .BoxNewsGermany {width: 100% !important; min-height: 1rem; padding-bottom: 1em !important;} .RowGrid01 .BoxJobs {width: 100% !important; min-height: 1rem;} .RowGrid01 .BoxJobs a.ContainerLinkBg {min-height: 4.75em;} .RowGrid02 .Width33 {width: 100% !important;} .RowGrid02 .BoxCertifications {width: 48.75%; height: 15em; float: left; margin-right: 2.5%;} .RowGrid02 .BoxSocialMedia {width: 48.75%; height: 15em; float: left;} .RowGrid02 .BoxSocialMedia .TitleBox {font-size: 170%;} /* RowGrid03 */ .RowGrid03 .BoxCertifications, .RowGrid03 .BoxContact {min-height: 25em; height: auto;} .RowGrid03 .BoxCertifications .ColumnPic {width: 100% !important; max-width: 100%; text-align: center;} .RowGrid03 .BoxCertifications .ColumnPic img {width: 10.25em;} .RowGrid03 .BoxContact .ColumnPic {padding: 0; float: none; margin-right: 0;} .RowGrid03 .BoxContact .Pic {text-align: center; float: none; margin: 0px auto; margin-bottom: 1em;} .RowGrid03 .BoxContact .Text {width: 100%; float: none; text-align: center;} /* Row Sponsoring */ .RowSponsoring .BoxSponsoring {width: calc(33.333% - 2rem) !important; padding: 2.5em .5em 0.5em .5em;} .RowSponsoring .BoxSponsoring .TitleBox {margin-top: -1rem !important; margin-bottom: 0; font-size: 140%;} /* Row Quicklinks */ .RowQuicklinks {padding-top: 2.5rem;} .RowQuicklinks .Width33 {width: 100% !important;} .RowQuicklinks .ColumnPic .ContainerPic {width: 42%; float: left;} .RowQuicklinks .ColumnPic .Pic {height: 9rem;} .RowQuicklinks .ColumnPic .TitleLink {height: 3rem; font-size: 120%; line-height: 2.3; text-align: center; } .RowQuicklinks .ColumnPic .Box {width: 58%; min-height: 12rem; float: left;} .RowQuicklinks .ColumnPic .h4 {display: block;} /* Row News */ .RowNews .h1 {margin-bottom: 0.25em;} .RowNews .h2 {font-size: 140%;} /* Row 100 Jahre */ .Row100Jahre .Content .Box .h2 .OptionalResponsive {display: none;} /* Row Ukraine */ .RowUkraine .Width55, .RowUkraine .Width45 {width: 100% !important;} .RowUkraine .PaddingL {padding: 1em 1em 0 1em !important;} .RowUkraine .PaddingXL {padding-top: 0 !important;} .RowUkraine .Width50 {width: auto !important;} /* Project Contents -------------------------------------------------------------- */ .ContentEasyToRead .ColumnPic {margin-right: 0em !important; width: 9em !important; height: 9em; border-radius: 9em; -webkit-border-radius: 9em; -moz-border-radius: 9em;} /* Zweispaltigkeit Doppelspitze */ .ContentBoard .WrapInner .ContainerBg:nth-child(1) .ColumnPic.PicPerson, .ContentBoard .WrapInner .ContainerBg:nth-child(2) .ColumnPic.PicPerson {max-width: 100% !important; min-width: 155px;} /* /Zweispaltigkeit Doppelspitze */ .ContentAssessors .Width50 {width: 100% !important;} .ContentAssessors .ContainerName {padding-right: 10em;} .ContentAssessors .ContainerBg {position: relative;} .ContentAssessors .ContainerBg .Width33 {width: 100% !important; padding-right: 10em;} .ContentAssessors .LinkShow {position: absolute; right: 1em; top: 1em;} .ContentBetreuungsverein .ColumnBg.Width50 {width: 100% !important; min-height: 1em;} .ContentKita .ContainerRight .ButtonLink {font-size: 100%;} .ContentKita .ContainerRow {padding: 1em;} .ContentKita .ContainerRow .Certification {width: 25%;} .ContentKita .ContainerRow .ButtonLink {font-size: 85%;} .ContainerPano {font-size: 75%;} .ContainerPano a {height: 15.5rem;} .ContentSchools .ListContainerBorder ul.Check {width: 100%; margin: 1em 0 0 -0.25em;} /* Sidebar ---------------------------------------------------------------------- */ .Sidebar {padding-top: 1.575em;} .Sidebar nav .CatLink.Active {font-size: 130%;} /* Forms ------------------------------------------------------------------------- */ textarea, select, input[type="text"], input[type="password"], input[type="submit"] {padding: 0.5em;} .Width50 input[type="submit"], .Width50 button[type="submit"], .Width50 a.ButtonSubmit {height: 2.95em;} .FormVar00 .Label, .FormVar00 .Field {float: none; width: 100%;} .FormVar00 .Label {padding: 0.75em 0 0 0;} .FormVar00 .Field {margin: 0.25em 0.5em 0 0;} .FormVar00 .FieldRadio, .FormVar00 .FieldCheckbox {margin: 0.25em 0 0.5em 0;} .FormVar00 .ButtonRow input[type="submit"] {width: 50%;} .FormVar02 select {font-size: 110%} /* Slider ------------------------------------------------------------------------- */ .Slider {margin-top: 10.5rem;} .Slider, .Slider .Slide {height: 350px; font-size: 85%;} .Slider .Slide .Wrap {left: 2rem; bottom: 2rem; max-width: 75%;} .Slider {font-size: 90%;} .bx-wrapper img {width: 110% !important; height: auto;} .SliderStartpage .LinkBack, .SliderStartpage .LinkNext {display: none;} .SliderGallery p.TextPic {top: 340px; font-size: 115%;} .SliderGallery {margin-top: 0;} .SliderGallery, .SliderGallery .Slide {height: 320px;} .SliderGallery img {top: 0; width: auto !important; height: 320px;} .Slider .Link {width: 2.5em; height: 2.5em;} .Slider .LinkBack, .Slider .LinkNext {opacity: .5;} .SliderGallery .LinkBack {left: 0;} .SliderGallery .LinkNext {right: 0;} /* Lightbox ----------------------------------------------------------------------- */ .Lightbox .Wrap {width: 85%; overflow: visible;} .LightboxFeedback .Wrap {width: 70%} .LightboxGallery .Wrap {height: 780px; overflow: visible;} .LightboxGallery .Wrap .Img {margin-top: 8em;} .LightboxGallery .Wrap .Img img {max-height: 580px;} /* Slick Slider ----------------------------------------------------------------------- */ .Row100JahreVideos .SlickSlider {padding: 0 1em;} .SlickSlider .LinkBack, .SlickSlider .LinkBack:hover {left: -1.45em;} .SlickSlider .LinkNext, .SlickSlider .LinkNext:hover {right: -1.45em;} .Row100JahreVideos .SlickSlider .Link {transform: scale(1); top: -65%;} .Row100JahreVideos .SlickSlider .Link {width: 2em; height: 2em;} } /**************************************************************************************** * 768px - 991px *****************************************************************************************/ @media screen and (min-width: 768px) and (max-width: 991px) { .AnchorAim a {top: 0;} .AnchorAim02 a {top: 0;} .RowGrid00 .BoxCourses {padding-top: 2rem;} .RowGrid01 .BoxNewsRegional {padding-top: 2.5rem;} .RowAboutUs .ContainerVideo {padding-right: 0;} /* Special mobile Startpage Animation */ .RowCourses .Column, .RowJobsNews .BoxNewsRegional {overflow: visible;} .RowCourses .SpaceAnimationSpecialResponsive {display: block; background: var(--grey-light); width: calc(100% + 2em); margin-left: -1em; margin-top: 1.5rem;} .RowJobsNews .SpaceAnimationSpecialResponsive {display: block; background: var(--grey-light); width: calc(100% + 2em); margin-left: -1em; margin-bottom: 2.5rem;} .ContentMain {padding-right: 0;} .Sidebar {padding-left: 0;} .ContentKita .ContainerRow .ButtonLink {font-size: 80% !important;} .ContentKita .ContainerRight {width: 27%;} .ContentKita .ContainerRow .ButtonLink {font-size: 1.85vw !important;} } /**************************************************************************************** MOBILE PHONES *****************************************************************************************/ @media screen and (max-width: 767px) { #Dim, #DimMobile {opacity: .4;} body {font-size: 17px} /* Desktop Elemente ausblenden ----------------------------------------------------- */ #TopMenue, #MainMenue, #SectionMenue, .Sidebar, .PagePic span, /* .Space, */ footer .FooterRow01 {display: none;} /* Abstaende nach oben ------------------------------------------------------------ */ .SliderStartPage, .RowTop {margin-top: 58px;} /* Container ---------------------------------------------------------------------- */ header {position: fixed; height: auto; z-index: 199; overflow: visible;} header.Minified {height: auto;} .Wrap {width: 100%; max-width: 767px; overflow: visible; padding: 0 0.75em 0.75em;} .ContentRow {overflow: visible;} /* Mobile Menue ------------------------------------------------------------------- */ #MobileTransBg {display: none; position: fixed; width: 100%; height: 100%; overflow: hidden; z-index: 199; background: url("/img/m_bg_trans.png") repeat left top;} #MobileMenue {height: 58px; display: block; position: fixed; left: 0; top: 0; margin: 0; width: 100%; background: var(--white); -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; left: 0 right: auto; top: 0; width: 100%; max-width: 450px; height: 58px; z-index: 201; text-align: right; background: var(--white); color: var(--white) !important; box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none;} .MobileClose a {display: block; margin-right: 16px; padding: 1em 2.25em 1.8em 1em; color: var(--black) text-decoration: none; background: url(/img/xmark-solid.svg) 15px 15px no-repeat; background-size: 20px auto;} .MobileSearch .MobileClose {max-width: 100%;} header.Minified .MobileSearch {width: 100%; right: 0;} #MobileMenue .MobileLogo {display: block; position: absolute; top: 5px; right: -50%; left: -50%; margin: auto; width: 200px; height: 50px; background: url(/img/m_logo.png) no-repeat left center; background-size: 100% auto; z-index: 199;} #MobileMenue .MobileLogo100 {top: 5px; left: 9px; width: 220px; height: 50px; background-image: url(/img/m_logo100.png);} #MobileMenue .MobileLogo span {display: none;} #MobileMenue .MobileButton {display: none; display: block; position: absolute; top: 4px; width: 40px; height: 50px; z-index: 200;} #MobileMenue .MobileButton a {display: block; width: 100%; height: 100%;} #MobileMenue .MobileButtonHotline {right: 148px} #MobileMenue .MobileButtonHotline a {background: url("/img/m_button_hotline.png") no-repeat center center; background-size: auto 24px;} #MobileMenue .MobileButtonHotline a span {display: none;} #MobileMenue .MobileButtonMail {right: 102px} #MobileMenue .MobileButtonMail a {background: url("/img/m_button_mail.png") no-repeat center center; background-size: auto 24px;} #MobileMenue .MobileButtonMail a span {display: none;} #MobileMenue .MobileButtonSearch {right: 54px;} #MobileMenue .MobileButtonSearch a {background: url("/img/m_button_search.png") no-repeat center center; background-size: auto 24px;} #MobileMenue .MobileButtonSearch a span {display: none;} #MobileMenue .MobileButtonNav {left: 8px; right: auto;} #MobileMenue .MobileButtonNav a {background: url(/img/bars-solid.svg) no-repeat center center; background-size: 20px auto;} #MobileMenue .MobileButtonNav a span {display: none;} #MobileMenue .MobileButtonSearch {right: 8px;} #MobileMenue .MobileButtonSearch a {background: url(/img/magnifying-glass-solid.svg) no-repeat center center; background-size: 20px auto;} #MobileMenue .MobileButtonHotline, #MobileMenue .MobileButtonMail {display: none;} #MobileNav {display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 1000; background: var(--white); max-width: 450px; box-shadow: 0px 0px 30px -7px rgba(0,0,0,0.25);} #MobileNav .Cat {margin-left: 16px; margin-right: 10px; margin-bottom: 6px;} #MobileNav .Cat .CatLink {font-size: 140%; font-weight: 600; font-family: 'RobotoCond'; background: right center no-repeat; background-size: auto 0.825em;} #MobileNav .Cat01 .CatLink {border-left: 15px solid var(--red); background-image: url('/img/m_icon_maximize-red.png');} #MobileNav .Cat02 .CatLink {border-left: 15px solid var(--cyan); background-image: url('/img/m_icon_maximize-cyan.png');} #MobileNav .Cat03 .CatLink {border-left: 15px solid var(--orange); background-image: url('/img/m_icon_maximize-orange.png');} #MobileNav .Cat04 .CatLink {border-left: 15px solid var(--green); background-image: url('/img/m_icon_maximize-green.png');} #MobileNav .Cat05 .CatLink {border-left: 15px solid var(--purple); background-image: url('/img/m_icon_maximize-purple.png');} #MobileNav .Cat01.MobileActive .CatLink {color: var(--red-dark); background-image: url('/img/m_icon_minimize-red.png');} #MobileNav .Cat02.MobileActive .CatLink {color: var(--cyan-dark); background-image: url('/img/m_icon_minimize-cyan.png');} #MobileNav .Cat03.MobileActive .CatLink {color: var(--orange-dark); background-image: url('/img/m_icon_minimize-orange.png');} #MobileNav .Cat04.MobileActive .CatLink {color: var(--green-dark); background-image: url('/img/m_icon_minimize-green.png');} #MobileNav .Cat05.MobileActive .CatLink {color: var(--purple-dark); background-image: url('/img/m_icon_minimize-purple.png');} #MobileNav ul {position: absolute; top: 58px; left: 0; margin: 0; width: 100%; height: 100%; background: var(--white); overflow: auto; text-align: left; -webkit-overflow-scrolling: touch;} #MobileNav ul.SubCatNav {padding-bottom: .25em;} #MobileNav ul li {margin-top: -1px; text-transform: none; font-weight: 400; font-size: 100%;} #MobileNav ul li a {display: block; padding: 1rem 1rem 1rem 0.75rem; color: var(--black); text-decoration: none; font-weight: 600;} #MobileNav ul li ul {position: static;} #MobileNav ul li ul li {text-transform: none; /* border-bottom: 1px dotted var(--black); */ margin-top: 0; margin-left: 10px;} #MobileNav ul li ul li a {padding: .375em 1.15em .375em 1em; background-image: none; line-height: 1.5;} #MobileNav ul li ul li.Active > a {color: var(--red-dark);} #MobileNav ul li ul li ul li {border-bottom: none;} #MobileNav ul li ul li ul li a {padding: 0.25em 0 0.25em 3em; font-weight: 400;} #MobileNav ul li ul li ul li.Active > a {background: url(/img/icon_dot-red-dark.png) 1.825em 0.75em no-repeat; background-size: 0.5em auto; font-weight: 600;} #MobileNav ul li ul li ul li ul li a {margin-left: 2em;} #MobileNav ul li.MobileActive ul.SubCat {display: block !important; border-left: 15px solid; padding-bottom: 15px;} #MobileNav ul li.MobileActive.Cat01 ul.SubCat {border-color: var(--red);} #MobileNav ul li.MobileActive.Cat02 ul.SubCat {border-color: var(--cyan);} #MobileNav ul li.MobileActive.Cat03 ul.SubCat {border-color: var(--orange);} #MobileNav ul li.MobileActive.Cat04 ul.SubCat {border-color: var(--green);} #MobileNav ul li.MobileActive.Cat05 ul.SubCat {border-color: var(--purple);} #MobileNav .MobileButton {text-transform: none; background: var(--white); border-top: 0; overflow: hidden; font-weight: 600; font-family: 'RobotoCond';} #MobileNav .MobileButton a {padding: 0.675em 0 0.675em 3.375em;} #MobileNav .MobileButton a span {color: var(--black);} #MobileNav .MobileButtonMail, #MobileNav .MobileButtonAddress {font-size: 120%;} #MobileNav .MobileButtonHotline, #MobileNav .MobileButtonMail, #MobileNav .MobileButtonAddress {padding-top: .25rem; padding-bottom: .25rem;} #MobileNav .MobileButtonHotline {margin-top: .75rem;} #MobileNav .MobileButtonHotline a {background: url(/img/telephone-fill-red.svg) no-repeat 14px center; background-size: auto 1.15em; margin-top: 1em; padding-top: .25em; padding-bottom: .25em; padding-left: 3rem;} #MobileNav .MobileButtonHotline a span {font-size: 130%;} #MobileNav .MobileButtonMail a {background: url(/img/envelope-fill-red.svg) no-repeat 15px center; background-size: auto 1.075em; padding-top: .25em; padding-bottom: .25em; padding-left: 3rem;} #MobileNav .MobileButtonAddress a {background: url(/img/geo-alt-fill-red.svg) no-repeat 15px center; background-size: auto 1em; margin-bottom: 1em; padding-top: .25em; padding-bottom: .25em; padding-left: 3rem; background-position: 20px center} #MobileNav .MobileList {border-top: 1px dotted var(--black); padding-top: 0.75em;} #MobileNav .MobileList span {display: none;} #MobileNav .MobileList a {color: var(--black); padding: 0.375em 1em 0.375em 0.85em; font-weight: 400; font-family: 'Roboto';} #MobileNav ul li.EndList {border-top: none; background-color: var(--white); height: 150px;} #MobileNav .LinkMail {display: block; position: fixed; top: 15px; left: 10px; width: 40px; height: 32px; z-index: 202; background: url(/img/m_icon_mail.png) center center no-repeat; background-size: auto 60%; display: none;} #MobileNav .Flag {display: inline-block; font-size: .75rem; font-weight: 600; color: var(--white); background: var(--grey-darker); padding: 0 .625em; line-height: 1.95; border-radius: 3em; letter-spacing: .05em; margin-left: .5em; transform: translateY(-.2rem);} #MobileNav .SocialMediaLinks {margin-top: 1rem; padding-top: 1.5rem; padding-left: 8px; border-top: 1px dotted var(--black);} #MobileNav .SocialMediaLinks a {width: 2.75em; height: 2.75em; margin-left: .425rem; margin-right: .425rem; background-size: 95% auto; opacity: .5;} #MobileNav .SocialMediaLinks .Link01 {background-image: url(/img/icon_facebook-sw.png);} #MobileNav .SocialMediaLinks .Link02 {background-image: url(/img/icon_twitter-sw.png);} #MobileNav .SocialMediaLinks .Link03 {background-image: url(/img/icon_youtube-sw.png);} #MobileNav .SocialMediaLinks .Link04 {background-image: url(/img/icon_instagram-sw.png);} .MobileSearch {display: none; position: fixed; top: 50px !important; right: 0; padding: 0; width: 100%; height: 115px; background: var(--white); z-index: 200; overflow: visible; -webkit-box-shadow: 0px 2px 56px -15px rgba(0,0,0,0.95); -moz-box-shadow: 0px 2px 56px -15px rgba(0,0,0,0.95); box-shadow: 0px 2px 56px -15px rgba(0,0,0,0.95);} .MobileSearch .SearchField {margin: 10px 15px 0 15px;} .MobileSearch .SearchField input[type=text] {padding: 0.85em 3em 0.25em 0 !important; background: var(--white); font-size: 110%;} .MobileSearch .SearchButton {top: 15px; right: 1em; width: 3em; z-index: 1;} .MobileSearch .SearchButton input[type="image"] {width: 2.25em; padding-top: .875em;} /* Content Grid + Columns ------------------------------------------------------------ */ .Content {width: 100%; float: none; padding: 0; margin-bottom: 0;} .ContentMain {padding: 1.5em 1em 1em 1em} .Sidebar {width: 100%; float: none; padding: 0.5em 0 2.5em 0;} .FloatRight {display: block; float: none !important;} .FloatLeft {display: block; float: none !important;} .Content .Width66, .ContentMain .ColumnMain, .ContentMain .ColumnRight {float: none !important; width: 100% !important; margin-right: 0;} .Content .Width90 {width: 100% !important;} .PageContent {margin-bottom: 1em;} .Column {margin-bottom: 1em;} /* Content: Title, Text, Lists ---------------------------------------------------- */ h1, .h1, .TitleBox {font-size: 180%;} h2, .h2 {font-size: 145%;} .RowNews .Box h4, .Content .Box h4 {line-height: 1.5;} .BoxJobs .TitleBox, .BoxNewsRegional .TitleBox, .BoxShortNews .TitleBox, .BoxNewsGermany .TitleBox {margin-bottom: 2rem !important; font-size: 180%;} /* Content: Module ---------------------------------------------------------------- */ .Box {height: auto !important;} .Box, .ColumnBg {padding-left: 1em; padding-right: 1em;} .RowQuicklinks .ColumnPic .Box {min-height: 1em;} .PagePic {height: 11.5em;} .PagePic img {height: 100%; width: auto;} .PageLogoRow {height: 3.5em;} .LinkTitleBox {height: 4.5em; margin-bottom: 1em; font-size: 80%;} .ColumnPic .Pic {margin-left: auto; margin-right: auto; float: none !important;} .ColumnPic .Pic.MaxWidthResponsive {max-width: 250px !important;} .ColumnRight .BoxContact {padding: 1em 1em 0 1em; border: 1px dotted var(--black);} .ColumnRight .BoxContact .ColumnPic {margin-right: 1.5em;} .ColumnRight .BoxContact .TitleBox {display: block;} /* Content: Link Module ----------------------------------------------------------- */ .AnchorNav {font-size: 90%;} .AnchorNav a {display: block;} .AnchorAim a {top: -2.75em;} .TabNav ul {font-size: 116.67%;} .ButtonLink {margin-bottom: 2em; width: auto;} .LinkBack {margin-bottom: 1.25em !important;} .LinkDate .Date {font-size: 100%;} .LinkDate .Text {width: 82%; float: left; margin-left: 1em !important;} .SocialMediaLinks a {width: 3em; height: 3em;} a.ContainerLinkBg {min-height: auto;} /* Content Sidebar: Module -------------------------------------------------------- */ .Sidebar .Box {margin-top: 1em; margin-bottom: 0; padding: 1em 1em 0.5em 1em;} /* Content: Rows ------------------------------------------------------------------ */ .RowQuicklinks .Width33 {float: none; width: 100% !important;} .RowNews .h1 {margin: 0.5em 0 0.5em 0;} .RowNews .h2 {font-size: 145%;} .RowPartners .Pic {width: 5.5em; height: 5.5em;} .RowSponsoring .Width33 {float: none; width: 100% !important;} .RowSponsoring .BoxSponsoring {padding: 0.75em 1.25em 0.5em 1.25em;} .RowSponsoring .BoxSponsoring p {text-align: center; margin-bottom: 0.25em;} .RowSponsoring .BoxSponsoring .TitleBox {font-size: 160%;} .RowQuicklinks .ColumnPic .Box {padding: 12px 12px 15px 12px;} .RowQuicklinks .ColumnPic .TitleLink {font-size: 115%;} .ContentRow .ColumnPic {margin-bottom: 1em;} /* RowGoogleMaps */ .RowGoogleMaps {margin-top: -3rem; position: relative; z-index: 1;} .RowGoogleMaps > .Wrap {padding-left: 0; padding-right: 0; height: 28rem;} /* Row 100 Jahre */ .Row100Jahre .Content .Box .h2 .OptionalResponsive {display: none;} .Row100JahreVideos .SlickSlider {padding: 0 .5em;} /* Row Ukraine */ .RowUkraine .Width55, .RowUkraine .Width45 {width: 100% !important;} .RowUkraine .PaddingL {padding: 1em 1em 0 1em !important;} .RowUkraine .PaddingXL {padding: 0 3em !important;} .RowUkraine .Width50 {width: auto !important;} /* Content: Boxes ---------------------------------------------------------------- */ .LinkTitleBox .TitleBox {margin-bottom: 0.14em !important;} /* Row Grids */ .RowGrid00 .Width33 {width: 100% !important;} .RowGrid00 .BoxShortNews {min-height: 1em;} .RowGrid00 .BoxShortNews .ContainerLink {clear: both; margin: 0 0 0.75em 0;} .RowGrid00 .BoxShortNews .Pic {float: left; margin-right: 0.75em; width: 15em; height: auto;} .RowGrid00 .BoxShortNews .Pic img {position: static;} .RowGrid01 .BoxNewsRegional, .RowGrid01 .BoxNewsGermany, .RowGrid01 .BoxJobs, .RowGrid01 .BoxAboutUs {width: 100% !important; min-height: 1em !important;} .RowGrid01 .Width33 {width: 100% !important;} .RowGrid02 .Width33 {width: 100% !important;} .RowGrid02 .Width33 .BoxCertifications {height: 14em !important; float: left; width: 48.75%;} .RowGrid02 .Width33 .BoxSocialMedia {height: 14em !important; float: right; width: 48.75%;} .BoxCertifications .ColumnPic img {width: 6em;} .RowGrid03 .BoxCertifications, .RowGrid03 .BoxContact {min-height: 28em; height: auto;} .RowGrid03 .BoxCertifications .ColumnPic {width: 100% !important; max-width: 100%; text-align: center;} .RowGrid03 .BoxCertifications .ColumnPic img {width: 10.25em;} .RowGrid03 .BoxContact .ColumnPic {padding: 0; float: none;} .RowGrid03 .BoxContact .Pic {text-align: center; float: none; margin: 0px auto; margin-bottom: 1em;} .RowGrid03 .BoxContact .Text {margin-top: 0; width: 100%; float: none; text-align: center;} .RowGrid00 .BoxShortNews .ContainerLink .Pic {max-width: 16em; margin-left: auto; margin-right: auto; margin-bottom: 1.5em;} /* Row Grids NEU 2023 */ .Content .BoxJobs, .Content .BoxNews, .Content .BoxNewsGermany {padding-left: 0; padding-right: 0;} .ContentRow.RowGrid00, .ContentRow.RowGrid01, .ContentRow.RowGrid02, .ContentRow.RowGrid04 {padding-top: 2rem; padding-bottom: 2rem;} .RowGrid00 .BoxCourses, .RowGrid01 .BoxCourses, .RowGrid02 .BoxCourses {padding-top: 2rem;} .RowGrid00 .BoxCourses, .RowGrid01 .BoxCourses, .RowGrid02 .BoxCourses, .RowGrid00 .BoxAboutUs {padding-right: 0 !important;} .RowGrid00 .BoxShortNews .h2 {font-size: 145%;} .RowGrid00 .BoxShortNews .ContainerLink {margin-bottom: 0;} .RowGrid00 .LinkTitleBox {width: calc(50% - .75rem) !important; float: left !important;margin-right: 1.5rem;} .RowGrid00 .LinkTitleBox:last-of-type {margin-right: 0;} .BoxSocialMedia .TitleBox {font-size: 140%;} .RowGrid00 .BoxSocialMedia {float: left; height: auto; margin-top: 1rem;} .RowGrid02 .BoxSocialMedia {margin-top: 0;} .RowGrid00 .BoxAboutUs .BoxLinks {margin-top: 0; text-align: center;} .RowGrid00 .BoxAboutUs .ButtonLink {margin-right: .75rem !important; margin-left: .75rem !important;} .RowGrid00 .BoxAboutUs .h1 {margin-bottom: 2rem;} .RowGrid01 .BoxNewsRegional {padding-top: 2rem;} .RowGrid01 .BoxNewsRegional .TitleBox {margin-bottom: 1.75rem !important;} .RowGrid03 .Content {width: 100%; float: none; padding-left: 0;} .RowGrid04 {margin-bottom: -3.5em; margin-top: 0;} .RowGrid04 .BoxSocialMedia {height: 8.625em;} .SocialMediaLinks a {width: 2.75em; height: 2.75em;} .RowAboutUs .h1 {margin-bottom: 2rem;} .RowAboutUs .ContainerVideo {padding-right: 0;} .RowAboutUs .ContainerBrochure {max-width: 16rem;} .RowAboutUs .consent-container-gmaps {height: 32em;} .RowAboutUs .LinkTitleBox {width: 100% !important; margin-right: 0;} .RowAboutUs .BoxSocialMedia {margin-top: 0; height: 8.125em !important;} .RowAboutUs .SpaceS {margin-bottom: 0;} .RowAboutUs .SpaceXL {margin-bottom: 0;} .RowQuicklinks {padding-top: 2em; padding-bottom: 0;} .RowQuicklinks .ColumnPic .Box {padding: 1em 0 2em 0;} .RowNews {padding-top: 60px; padding-bottom: 0;} .RowNews .Box {display: block;} .RowNews .Box .Width40 {padding-right: 0; width: 100% !important;} .RowNews .Box .Width60 {padding-left: 0; width: 100% !important;} .RowNews .ButtonLink {margin-bottom: 0;} .RowUkraine {padding-bottom: 0;} .RowUkraine .ContainerUkraine {flex-direction: column;} .RowUkraine .ContainerUkraine .Column.Width40 {order: 2; margin-right: 0; width: 100% !important;} .RowUkraine .ContainerUkraine .Column.Width60 {order: 1; margin-right: 0; width: 100% !important;} .RowUkraine .Box {text-align: left;} .RowUkraine .Box .Width40 {text-align: left !important;} .RowUkraine .Box .Width60 {padding-left: 0;} .RowUkraine .Box .h1 {margin-bottom: .5em;} .RowUkraine .Box .TitleBox {font-size: 145%;} .RowUkraine .ButtonLink {margin-left: 0;} .RowUkraine .ContainerExpanded {margin-top: -2em; margin-bottom: 2em; padding: 2em 2em 1em 2em; font-size: 1rem;} .RowUkraine .AnchorAim a {top: -5em;} .RowCourses {padding-bottom: 0 !important;} .BoxCourses .WrapButtonLink {margin-bottom: .75em !important;} .BoxShortNews {float: none; padding-bottom: 0 !important;} .BoxShortNews .InnerWrap {margin-left: auto; margin-right: auto; max-width: 500px; padding-top: 2rem;} .BoxShortNews .WrapButtonLink {margin-bottom: 1em !important;} .RowGrid00 .BoxShortNews .Pic {float: none;} .BoxNewsGermany .TitleBox {text-align: center; margin-bottom: 1rem !important;} .BoxNewsGermany h4 {line-height: 1.5; font-size: 140%;} .BoxNewsGermany .ContainerNews {-webkit-column-count: 1; -moz-column-count: 1; column-count: 1; -webkit-column-gap: 0; -moz-column-gap: 0; column-gap: 0; width: 100%;} .BoxNewsGermany .ContainerNews .ContainerLink {padding-left: 0 !important; padding-right: 0 !important;} .BoxNewsGermany .WrapButtonLink {margin-bottom: 0 !important;} .RowSponsoring {padding-top: 2.5em; padding-bottom: 1.5em;} .RowSponsoring .BoxSponsoring {margin-right: auto !important; margin-left: auto !important; width: 17em !important; max-width: 100%; padding: 1.5em 1.25em .25em 1.25em; font-size: 100%;} .BoxAboutUs .ButtonLink {margin-bottom: .5rem;} .RowTop > .Wrap {padding-left: 0; padding-right: 0;} .ContentMain {padding: 1.5em .75em 1em .75em;} .ContentMain.ContentColumns {padding-left: .75em;} .ContentMain.ContentColumns .ColumnMain {padding-right: .75em;} .ColumnRight .BoxContact {width: calc(100% - .75em);} .ColumnRight .BoxContact .ColumnPic {width: auto; float: left;} .ColumnRight .BoxContact .Pic {width: 10.375em; height: 10.375em;} .ColumnRight .BoxContact .Text {width: calc(100% - 12.5em); float: right;} .ColumnRight .BoxContact .TitleBox {display: block; margin-bottom: 1em !important;} .ContentKita .ContainerRow {text-align: center;} .ContentKita .ContainerRow .ButtonLink {width: auto; font-size: 115%; margin-bottom: 0;} .SearchResults.ResultsKita .Container .ColumnLinks {max-width: 100%;} /* Project Contents --------------------------------------------------------------- */ .ContentEasyToRead .Width66 {float: left !important; width: 65.75% !important;} .ContentBetreuungsverein .ColumnBg.Width50 {min-height: 1em;} .ContentSchools .ListContainerBorder ul.Check {width: 100%; margin: 1em 0 0 -0.25em;} .ContentKita .ContainerRow .ButtonLink {font-size: 85%;} .ContainerDownloads .LinkBox {padding: 4.75rem 1.5rem 1.5rem 1.5rem; background-position: center 1.25rem; background-size: 2em; text-align: center;} .ContainerDownloads .VideoBox {padding: 1.5rem 1.5rem .375rem 1.5rem; text-align: center;} .ContainerDownloads .VideoBox .ContainerVideo, .ContainerDownloads .ThumbnailBox .ColPic {padding-right: 0 !important;} .ContentAssessors .ContainerBg {position: relative;} .ContentAssessors .ContainerName {width: 100% !important; padding-right: 10em;} .ContentAssessors .ContainerBg .Width33 {width: 100% !important;} .ContentAssessors .LinkShow {position: absolute; right: 1em; top: 1em;} /* Forms -------------------------------------------------------------------------- */ textarea, select, input[type="text"], input[type="email"], input[type="password"], input[type="submit"] {} .ContainerForm {margin-top: 1.5em} .ContainerForm .Width50 {margin-top: 0 !important; margin-bottom: 0 !important;} .ContainerForm .ButtonRow {margin-top: 0; text-align: center;} .ContainerForm input[type="submit"] {float: none;} .FormVar00 .Label, .FormVar00 .Field {float: none; width: 100%;} .FormVar00 .Label {padding: 0.25em 0 0 0;} .FormVar00 .FieldCheckbox {margin-top: 0.5em;} .FormVar02 {font-size: 100%;} .FormVar02 .Label {font-size: 1.5rem; line-height: 2.15;} /* Slider ------------------------------------------------------------------------- */ .Slider {margin-bottom: 1em;} .Slider, .Slider .Slide {height: 330px; font-size: 90%;} .Slider > .Wrap {max-width: 100%; padding: 0;} .Slider .Slide .Wrap {left: 0; bottom: 0; max-width: 100%; text-align: center; padding: 1.25em 1.25em .5em 1.25em;} .Slider .Link {display: none;} .Slider p.Title {font-size: 120%; line-height: 1.15;} .Slider a.Button {font-size: 135%; width: 15em; margin: 0.675em auto 1.75em auto; float: none;} .Slider .WrapSliderNav {right: 0; bottom: 0.25rem; width: 100%; font-size: 80%;} .Slider .WrapSliderNav p {float: left; position: relative; left: 50%; margin: 0 auto;} .Slider .WrapSliderNav a.LinkNav {position: relative; right: 50%; width: 2em; height: 1.75em; } .ContainerSlider {padding-bottom: 1.75em;} .SliderGallery p.TextPic {top: 290px; font-size: 100%;} .SliderGallery {margin-bottom: 2.5em;} .SliderGallery, .SliderGallery .Slide {height: 300px;} .SliderGallery img {width: auto !important; height: 280px !important;} .SliderGallery .WrapSliderNav {font-size: 130%; right: -50%; bottom: -3.5em; width: auto;} .SliderGallery .WrapSliderNav a.LinkNav {position: relative; right: 50%; width: 1.375em; height: 1.5em;} .Slider .Link {width: 2em; height: 2em;} .SliderGallery .LinkBack, .SliderGallery .LinkNext {display: block; opacity: .4;} .SliderGallery .LinkBack {left: 0;} .SliderGallery .LinkNext {right: 0;} .SliderStartPage {margin-bottom: 0;} .SliderStartPage, .SliderStartPage .Slide {height: 400px;} .SliderStartPage .Slide .Wrap {text-align: left; bottom: 3.5em; left: 1rem; max-width: calc(100% - 2rem) !important; border-left-width: 15px;} .SliderStartPage p.Title {font-size: 35px;} .SliderStartPage .player_start > div:nth-child(2) p.Title{font-size: 30px;} .SliderStartPage .Slide .Wrap a {display: inline-block; width: auto;} .SliderStartPage a.Button {margin: 1em 0 0.75em 0;} .SliderStartPage .WrapSliderNav {right: -3px; width: auto;transform: scale(.85)} /* Footer ------------------------------------------------------------------------- */ footer .SocialMediaLinks .LinkHotline {padding-left: 1.75em; line-height: 1.5;} footer .FooterRow02 {padding-bottom: 0;} footer .FooterRow02 .LinkHotline {position: static; margin-top: 1rem; font-size: 160%; } footer .FooterRow03 {font-size: 90%;padding: .25rem 1em 2.5em 1em;} /* Lightbox ----------------------------------------------------------------------- */ .Lightbox {position: absolute;} .Lightbox .Wrap .LinkNext {right: 0.25em;} .Lightbox .Wrap .LinkBack {left: 0.25em;} .Lightbox .Wrap .Img {width: 75%;} .LightboxContactForm {margin-bottom: 3em;} .LightboxContactForm .Wrap {width: 94%; padding: 1.25em 1em 0 1em;} .LightboxContactForm .ContainerTitle {margin: -1.25em -1em -0.5em -1em;} .LightboxContactForm .ContainerTitle .h1 {font-size: 150%;} .LightboxGallery .Wrap {height: 42em;} .LightboxFeedback .Wrap .ButtonRow .Button {float: none; width: 80%; margin: 1em auto 1em auto !important;} /* Slick Slider ----------------------------------------------------------------------- */ .SlickSlider .Link {width: 2em; height: 2em; top: -55%;} .SlickSlider .LinkBack, .SlickSlider .LinkBack:hover {left: -1em;} .SlickSlider .LinkNext, .SlickSlider .LinkNext:hover {right: -1em;} .Row100JahreVideos .SlickSlider .Link {transform: scale(1);} /* Special mobile Startpage Animation */ .RowCourses .Column, .RowJobsNews .BoxNewsRegional {overflow: visible;} .RowCourses .SpaceAnimationSpecialResponsive {display: block; background: var(--grey-light); width: calc(100% + 2em); margin-left: -1em; margin-top: 3.5rem;} .RowJobsNews .SpaceAnimationSpecialResponsive {display: block; background: var(--grey-light); width: calc(100% + 2em); margin-left: -1em; margin-bottom: 2.5rem;} } /**************************************************************************************** Phone: max 670px *****************************************************************************************/ @media screen and (max-width: 670px) { body {max-width: 670px;} /* Content Grid + Columns -------------------------------------------------------- */ .Content .Column, .Content div.Width20, .Content div.Width33, .Content div.Width50, .Content div.Width66, .Content div.Width75 {float: none !important; width: 100% !important;} .ColumnRight .BoxContact .ColumnPic {width: 100%; float: none;} .ColumnRight .BoxContact .Pic {width: 10.375em; height: 10.375em;} .ColumnRight .BoxContact .Text {width: 100%; float: none;} .ColumnRight .BoxContact .TitleBox {display: block; margin-bottom: 1em !important;} /* Content: Module --------------------------------------------------------------- */ .PagePic {height: 10em;} .Width50 .PicPerson.Center img {width: 100%;} .ColumnRight .BoxContact {text-align: center;} /* Content: Link Module ---------------------------------------------------------- */ .ContentNavSitemap .SubCat .SubCatNav, .ContentNavSitemap .SubCat .SubCatNav2 {margin-left: 1.25em !important;} .WrapButtonLink {text-align: center;} .ButtonLink {margin-left: auto; margin-right: auto;} .TabNav ul {height: auto; overflow: hidden; margin-top: 1.25em; border-bottom: 1px dotted var(--black);} .TabNav ul li {width: 100%; height: auto;} .TabNav ul li a {border-top: 1px dotted var(--black); border-left: none !important; border-right: none !important; padding-left: 2rem; line-height: 2.777;} .TabNav ul li a.Active {border-top: 1px dotted var(--black); border-left: none !important; border-right: none !important; height: auto; background: url(/img/icon_arrow-bottom00.png) 0.2rem center no-repeat; background-size: 1.375rem auto;} /* Content: Boxes ---------------------------------------------------------------- */ .LinkTitleBox {width: 100% !important; height: 4.65em !important;} .BoxSocialMedia {width: 100% !important; height: auto !important;} .BoxCertifications .ColumnPic img {width: 10.5em; margin-bottom: 0.5em;} /* Content: Rows ----------------------------------------------------------------- */ .LinkDate .Text {width: 77%; float: left; margin-left: 1em !important;} /* Row Grids */ .RowGrid00 .LinkTitleBox {width: 100% !important;} .RowGrid00 .BoxSocialMedia {margin-bottom: 1em;} .RowGrid00 .BoxShortNews .Pic {width: 100%; float: none; height: auto;} .RowGrid00 .BoxAboutUs .ButtonLink {margin-right: 0 !important; margin-left: 0 !important;} .RowGrid01 .BoxAboutUs .BoxLinks a {display: block; margin-bottom: 0.25em;} .RowGrid02 .Width33 .BoxCertifications {height: auto !important; float: left; width: 100%;} .RowGrid02 .Width33 .BoxSocialMedia {height: auto !important; float: right; width: 100%;} .RowGrid02 .BoxSocialMedia {margin-top: 1em;} .RowGrid03 .BoxCertifications, .RowGrid03 .BoxContact {min-height: auto; height: auto;} .RowGrid03 .BoxCertifications {padding-bottom: 1.5em;} /* Content: Project ----------------------------------------------------------------- */ .ContentPolicyStatement .Width60 {padding-left: 0;} .ContentBoard .ContentExpand span img, .ContentBoard .ContentExpand span iframe {width: 300px !important; height: 169px !important;} /* Zweispaltigkeit Doppelspitze */ .ContentBoard .WrapInner .ContainerBg:nth-child(1), .ContentBoard .WrapInner .ContainerBg:nth-child(2) {float: none; width: 100%; min-height: auto; display: block; margin-bottom: 1.25em;} /* /Zweispaltigkeit Doppelspitze */ .ContentEasyToRead div.Width33 {margin: -1.5em auto 2em auto !important; width: 14em !important; float: none;} .ContentKita .ContainerRight {float: none; width: 100%; overflow: hidden; margin: 0 0 2em 0;} .ContentKita .ContainerRight .ColumnPic img {max-width: 15em; margin: 0 auto .5em auto;} .ContentKita .ContainerRow {flex-direction: column;} .ContentKita .ContainerRow .ButtonLink {float: none; width: 100%; max-width: 12em; margin: 0 auto 2rem auto; font-size: 120%;} .ContentKita .ContainerRow .Certification {float: none; width: 100%; margin: 0 auto 2em auto; font-size: 100%;} .ContentKita .ContainerRow .Flag {float: none; width: 100%; max-width: 15em; margin: 0 auto 2.5em auto; font-size: 100%;} .ContainerPano {font-size: 80%;} .ContainerPano a {height: 18rem;} .ContentNews .ColumnPic {height: auto;} .ContentNews img {position: static;} .PageContent .PicPerson {max-width: 15em; float: none; margin-left: auto; margin-right: auto !important; margin-top: 1rem;} .ContentTeam .PicPerson {max-width: 15em; float: none; margin-left: auto; margin-right: auto !important;} .ContentBoard .PicPerson {max-width: 15em; float: none; margin-left: auto; margin-right: auto !important;} .ContentAssessors .PicPerson {margin-top: 1.5em;} .ContentAssessors .ContainerName {padding-right: 0;} .ContentAssessors .LinkShow {position: static;} .SearchResults.ResultsKita .Container .ColumnLinks a {clear: both; float: right;} /* 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;} .FormVar02 {font-size: 80%;} .FormVar02 .Label {line-height: 2.15; font-size: 1.5rem; width: 2.5rem;} .FormVar02 .Field {width: calc(100% - 2.5rem);} .FormVar02 select {font-size: 130%; padding-left: .5rem;} /* Lightbox ----------------------------------------------------------------------- */ .LightboxGallery .Wrap {height: 450px;} .LightboxGallery .Wrap .Img img {max-height: 260px;} .LightboxFeedback .Wrap {width: 90%; padding-left: 1em; padding-right: 1em;} /* Slider ----------------------------------------------------------------------- */ .Slider, .Slider .Slide {font-size: 90%;} .ContainerSlider {padding-bottom: 1.75em;} .SliderGallery {margin-top: 2em;} .SliderGallery, .SliderGallery .Slide {height: 300px;} .SliderGallery img {height: 280px !important;} .SliderGallery p.TextPic {top: 300px; font-size: 100%;} .SliderGallery .WrapSliderNav {font-size: 88.5%; bottom: -5em;} .SliderGallery p.TextPic {height: 1.5em;} .SliderStartPage .player_start > div:nth-child(1) img {object-position: 3% 50%;} .SliderStartPage .player_start > div:nth-child(2) img {object-position: 30% 50%;} .SliderStartPage .player_start > div:nth-child(3) img {object-position: 50% 50%;} .SliderStartPage .player_start > div:nth-child(4) img {object-position: 20% 50%;} .SliderStartPage .player_start > div:nth-child(5) img {object-position: 50% 50%;} } /**************************************************************************************** Phone: max 500px *****************************************************************************************/ @media screen and (max-width: 500px) { #MobileMenue .MobileButtonMail, #MobileMenue .MobileButtonHotline {display: none;} .RowQuicklinks .ColumnPic .Pic {height: 40vw;} .RowQuicklinks .ColumnPic .TitleLink {text-align: center;} .RowGrid00 .LinkTitleBox {width: 100% !important;} .RowAboutUs .BoxSocialMedia {margin-top: 0; height: auto;} .RowUkraine .ContainerExpanded {margin-top: -2em; padding: 2em 2em 1em 2em;} .ContainerPano {font-size: 80%;} .ContainerPano a {height: 16rem;} .ContainerPano img {width: auto; height: 100%;} .ContainerPano p.Title {width: 90%; margin: 0 0 5% 5%; padding: 0.5em 0.5em 0.475em 0.5em; text-align: center;} .ContainerPano p.Title .Icon {float: none; margin: 0.225em auto 0 auto;} .ContentAngebote .PicContainer img {width: 26%;} .ContentAngebote .PicContainer img:nth-child(3) {margin-right:0;} .Slider a.Button {margin: 1em auto 0.75em auto;} .ContainerSlider {padding-bottom: 1.75em;} .SliderGallery p.TextPic {height: 40px;} .SliderGallery .WrapSliderNav {display: none;} .SliderStartPage .Slide .Wrap {} .SliderStartPage p.Title {font-size: 7.25vw;} .SliderStartPage .player_start > div:nth-child(2) p.Title{font-size: 6.15vw;} .FormVar02 select {font-size: 3.8vw;} } /**************************************************************************************** Phone: max 400px *****************************************************************************************/ @media screen and (max-width: 400px) { #MobileMenue .MobileButtonMail, #MobileMenue .MobileButtonHotline {display: none;} .AnchorNav {font-size: 80%;} .LinkAll {position: absolute; bottom: 0.25em; left: -50px; right: -50px; display: block; text-align: center;} .LinkDate .Text {clear: both; width: 100%; margin: 0.5em 0 0.5em 0 !important;} .BoxShortNews {padding-bottom: 2.75em !important;} .BoxCourses, .BoxJobs, .BoxNews, .RowGrid01 .BoxNewsRegional {padding-bottom: 3.5em !important;} .BoxAboutUs .LinkAll {display: none;} .PagePic {height: 6em;} footer {font-size: 85%;} footer .SocialMediaLinks .LinkHotline {padding-left: 2.5em; line-height: 2;} .ContentBoard .ContentExpand span img, .ContentBoard .ContentExpand span iframe {width: 250px !important; height: 141px !important;} .ContentEasyToRead div.Width33 {margin: -1.5em auto 2em auto !important; width: 14em !important;} .FormVar02 .Label {height: 3rem; line-height: 1.85;} .FormVar02 select {height: 3rem; font-size: 1rem;} .Slider, .Slider .Slide {height: 390px; font-size: 90%;} .Slider a.Button {font-size: 140%;} .ContainerSlider {padding-bottom: 2em;} .SliderGallery, .SliderGallery .Slide {height: 300px;} .SliderGallery img {height: 280px !important;} .SliderGallery p.TextPic {top: 300px; font-size: 100%;} .SliderGallery .WrapSliderNav {font-size: 85%;} } /**************************************************************************************** Phone: max 350px *****************************************************************************************/ @media screen and (max-width: 350px) { body {font-size: 16px;} footer .Copyright, footer .FooterLogo {float: none; text-align: left;} .ContentBoard .ContentExpand span img, .ContentBoard .ContentExpand span iframe {width: 200px !important; height: 113px !important;} .ContainerPano img {right: auto; left: 0;} .SliderGallery, .SliderGallery .Slide {height: 120px;} .Slider, .Slider .Slide {height: 300px; font-size: 90%;} .SliderGallery, .SliderGallery .Slide {height: 300px;} .SliderGallery p.TextPic {top: 310px; height: 56px;} } /**************************************************************************************** Phone: max 320px *****************************************************************************************/ @media screen and (max-width: 320px) { body {font-size: 14px;} .Slider, .Slider .Slide {height: 220px; font-size: 90%;} .SliderGallery .WrapSliderNav {display: none;} .SliderGallery, .SliderGallery .Slide {height: 260px;} .SliderGallery p.TextPic {top: 260px; height: 56px;} } /**************************************************************************************** Phone: Landscape Formate ****************************************************************************************/ @media screen and (max-height: 420px) and (orientation: landscape) { section.Slider, section.Slider .Slide {height: 350px;} } @media screen and (max-height: 380px) and (orientation: landscape) { section.Slider, section.Slider .Slide {height: 315px;} } @media screen and (max-height: 360px) and (orientation: landscape) { section.Slider, section.Slider .Slide {height: 290px;} section.Slider .Slide img {height: 120%;} } @media screen and (max-height: 320px) and (orientation: landscape) { section.Slider, section.Slider .Slide {height: 260px;} section.Slider .Slide img {height: 120%;} }