@charset "UTF-8"; .main-col .contact-wrapper { margin: calc(4% + 30px) 0; padding: 30px 0; } .main-col .accordion .contact-wrapper { margin: 0; } .contact-wrapper { position: relative; background-color: $color-primary-light-04; background-color: var(--theme-color-primary-dimmed-04, $color-primary-light-04); border-bottom: 8px solid $color-secondary; border-bottom: 8px solid var(--theme-color-secondary, $color-secondary); padding: 20px; overflow: hidden; @media(min-width: 768px) { padding: 46px 0 40px; } &.intranet { &:before { font-family: "Icons"; position: absolute; top: 20px; right: 20px; font-size: 30px; @media(max-width: 767px) { font-size: 22px; top: 18px; right: 18px; } } @extend .icon-schloss; } &:not([data-tab-style="open"]) { .contact-person { position: absolute; top: 0; @include hide; transform: translate3d(0, 0, 0) scale(0.95); width: 100%; &.active { position: relative; @include show(0.4s); transform: translate3d(0, 0, 0) scale(1); order: 1; z-index: 1; } } } .contacts { position: relative; display: flex; flex-direction: column; transition: height 0.3s $easeOutQuad; } .contact { margin: 20px; } h2 { padding: 0 60px; @media(max-width: 1199px) { padding: 0 40px; } @media(max-width: 767px) { padding: 0 20px; } } .contact-person { position: relative; display: flex; margin: 0 -20px; > div { padding: 20px; &.image-box { flex: 1 1 33.3333%; max-width: 33.3333%; padding-left: 80px; @media(max-width: 1199px) { padding-left: 60px; } @media(max-width: 767px) { padding-left: 40px; flex: 1 1 100%; max-width: 100%; } } &.text-box { flex: 1 1 66.6667%; max-width: 66.6667%; padding-right: 80px; @media(max-width: 1199px) { padding-right: 60px; } @media(max-width: 767px) { padding-right: 40px; flex: 1 1 100%; max-width: 100%; } &:first-child { padding-left: 80px; max-width: 100%; flex: 1 1 100%; @media(max-width: 1199px) { padding-left: 60px; } @media(max-width: 767px) { padding: 20px; } @media(max-width: 567px) { padding: 0; } } &.small { @media(min-width: 1000px) { font-size: 18px; } } } } img { display: block; } p { @media(min-width: 1200px) { font-size: 18px; } } } .tab-buttons { padding: 0 58px; } @media(max-width: 567px) { padding: 20px; margin: 0 -20px; h2 { padding: 0; margin-top: 4px; } .tab-buttons { padding: 0; } .contact-buttons li { display: block; } .contact-person { flex-direction: column; margin: 0; > div { flex: 1 1 100%; max-width: 100%; padding: 10px 0; &.image-box { padding-left: 0; } } } } .text-box, .image-box{ padding-left: 20px; } } .ansprechpartner { display: block !important; .contact{ float: left; max-width: 40%; } } aside .contact-wrapper { @media(max-width: 567px) { margin: 0; } } .contact-buttons, .richtext .contact-buttons { list-style: none; margin: 24px -1px 0; padding: 0; font-size: 22px; width: 150%; li { margin-bottom: 12px; padding: 0; &:after, &:before { display: none; } @media(min-width: 768px) { margin-right: 8px; } } a { transition: 0.3s ease; &:hover { color: $color-secondary-dark; color: var(--theme-color-secondary-intensed, $color-secondary-dark); } } a:hover { box-shadow: 0 0 0 5px rgba($color-white, 0.6), 0 0 4px rgba($color-black, 0.3); } a, span { font-family: "Korb", sans-serif; text-decoration: none; background-color: $color-white; background-color: var(--theme-color-background, $color-white); display: inline-block; line-height: 30px; padding: 8px 18px 8px 14px; border-radius: $radius-md; @include focusvisible; @media(max-width: 999px) { font-size: 18px; } &.mail { @extend .icon-email; } &.phone { @extend .icon-telefon; } &.fax { @extend .icon-fax; } &.vcard { @extend .icon-vcard; &:before { top: -1px; } } &:before { font-family: "Icons"; position: relative; font-size: 30px; line-height: 30px; display: inline-block; vertical-align: top; margin-right: 10px; } } } .tab-buttons { list-style: none; position: relative; margin-bottom: 0; li { display: inline-block; margin-bottom: 12px; } a { font-family: "Korb"; display: inline-block; position: relative; background-color: $color-primary-light-03; color: $color-primary; padding: 5px 18px; border-radius: 15px; margin-right: 10px; text-decoration: none; transition: 0.3s ease; @include focusvisible; } li.active a, a:hover { background-color: $color-primary; color: $color-white; } } .sidebar, .contacts-in-text { .contact-wrapper { padding: 20px 20px 10px; font-size: 18px; @media(max-width: 767px) { font-size: 16px; } + * { margin-top: 48px; } h2 { @extend h3; padding: 0; margin-top: 0; } .tab-buttons { padding: 0; } .contact-buttons li { display: block; } .contact-person { flex-direction: column; margin: 0; display: block; > div { flex: 1 1 100%; max-width: 100%; padding: 10px 0; &.text-box:first-child { padding: 0 0 10px; } } } } } .contacts-in-text { margin-top: calc(40px + 2%); } [data-browser="ie"] { .contact-person.active { height: 100%; } } /* .c-teaser, .one-sidebar .sidebar .c-teaser { @extend %teaser; border: none; padding: 0; a { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-decoration: none; &:hover { text-decoration: underline; } } .head { @include font-family("korbregular"); border-bottom: 2px solid $primary-color-light; color: $cGlobalHover; font-size: 2.25em; // 36px line-height: 1em; // 36px padding: 0 0 22px 0; } .teaser-content { border: none; } .contact-list { -moz-column-count: 1; -webkit-column-count: 1; column-count: 1; font-size: 1.25em; // 20px margin: 22px 0 10px 0; width: 100%; li { border-bottom: 1px solid $primary-color-light; list-style: none; padding: 5px 0; &:first-child { padding: 0 0 5px 0; } } .active a { color: $cGlobalText; } + .contact { padding: 5px 0 0; } } .contact-wrapper { display: none; .content-wrapper { margin: 0; padding: 0; } } .contact { display: none; .image-wrapper { float: left; width: auto; margin-bottom: 10px; img { max-height: 200px; } + .text { clear: both; display: block; font-size: 1.25em; // 20px margin: 15px 0 0 0; text-align: start; .text-email { a { font-family: "source_sans_proregular","Helvetica","Arial",sans-serif; color: $primary-color; } } } } li { list-style: none; } .text-name { @include font-family(source_sans_prosemibold); } .text-contact { .text-email { a { font-family: "source_sans_proregular","Helvetica","Arial",sans-serif; color: $primary-color; } } } .download { @include clearfix(); border-bottom: 1px solid $primary-color-light; margin: 13px 0 0 0; padding: 7px 0 0 0; a { @include clearfix(); color: $primary-color; display: block; float: right; text-decoration: underline; .contact-text { font-family: "source_sans_proregular","Helvetica","Arial",sans-serif; font-size: 1.25em; // 20px position: relative; text-align: start; &:before { @include icons2(); @include backgroundpositionheightweight(icon_vcard); content: ""; display: inline-block; left: -32px; position: absolute; top: 5px; } } &:hover { text-decoration: none; } } } } } .one-sidebar .sidebar .c-teaser { .teaser-content { border: none; margin-top: 10px; margin-bottom: 10px; padding: 0; .head { margin: 0; padding: 0 0 22px 0; + .contact-wrapper { margin: 30px 0 0; } } .contact-list { border: none; padding: 0; } } } .c-teaser { padding: 0 10px; } .c-teaser-list { @extend %teaser; a { text-decoration: none; &:hover { text-decoration: underline; } } .head { @include font-family("korbregular"); border-bottom: 2px solid $primary-color-light; font-size: 1.125em; // 18px line-height: 1em; // 18px padding: 0 0 15px 0; } .contact-list { -moz-column-count: 1; -webkit-column-count: 1; column-count: 1; font-size: 1.25em; // 20px margin: 20px 0 10px 0; width: 100%; li { border-bottom: 1px solid $primary-color-light; list-style: none; padding: 5px 0; &:first-child { padding: 0 0 5px 0; } } } } @media (min-width: $screen-sm-min), print { .no-border-bottom{ border-bottom: none !important; } .cl-no-hover:hover{ color: $cGlobalText !important; } .richtext .a-z-list-wrapper .image-wrapper { padding: 0px 20px 20px 0; } .c-teaser:not(.col-sm-4) { margin: 60px 0 0; .head { border: none; font-size: 2em; // 32px margin: 0; padding: 0; } .contact-list { border-top: 1px solid $primary-color-light; -moz-column-count: 2; -webkit-column-count: 2; column-count: 2; font-size: 1.0625em; // 17px margin-top: 15px; margin-bottom: 10px; padding: 20px 0 0; width: 100%; li { line-height: 1.8em; display: inline-block; width: 100%; &:hover { color: $primary-color-light; } &:first-child { padding: 5px 0; } } } .contact { padding: 0; .content-wrapper { @include clearfix(); } .image-wrapper { float: left; width: auto; + .text { display: inline-block; font-size: 17px !important; margin: 15px 0 0 15px; .text-name, .text-contact { line-height: 1.4 !important; } .text-email { a { top: 0; vertical-align: top; } } } } .download { margin: 0 0 20px 0; padding: 20px 0; border-bottom: 1px solid $primary-color-light; clear: both; position: relative; top: 1px; a { float: right; .contact-text { font-size: 15px; vertical-align: top; } } } } } .c-teaser-list { .head { font-size: 1.75em; // 28px line-height: 1em; // 28px } .contact-list { font-size: 1.0625em; // 17px } } .one-sidebar .sidebar .c-teaser { .teaser-content { padding: 0; > .head { font-size: 1.75em; // 28px line-height: 1em; // 28px margin: 0; padding: 0 0 15px 0; + .contact-wrapper { margin: 20px 0 0; } } .contact-list { border: none; font-size: 1.0625em; // 17px margin-top: 10px; margin-bottom: 10px; padding: 0; } } } .c-teaser, .one-sidebar .sidebar .c-teaser { .head { margin: 0 0 20px 0; padding: 0 0 15px 0; } .contact { .download a { color: $primary-color; text-decoration: underline; .contact-text { color: $primary-color; font-size: .9375em; // 15px position: relative; text-align: start; &:before { @include icons2(); @include backgroundpositionheightweight(icon_vcard); content: ""; display: inline-block; left: -32px; position: absolute; top: 0; } } } } } } ul.contact-list.referee { column-count: 1 !important; -moz-column-count: 2; -webkit-column-count: 2; } ul.contact-list.referee li:first-child { border-top: none; } .c-teaser.referee { margin: 10px 0 0; } li.referee { padding: 5px 20px 5px 0 !important; } .no-border-bottom{ border-bottom: none !important; } li.cl-no-hover.active a{ font-family: source_sans_prosemibold, "Helvetica", "Arial", "sans-serif" } .no-padding-for-contact-download-vst { padding: 0 !important; } */