@font-face { font-family: "Roboto"; src: url("fonts/Roboto-VariableFont_wdth,wght.ttf") format("truetype"); font-style: normal; font-weight: 100 900; font-stretch: 75% 100%; font-display: swap; } @font-face { font-family: "Roboto"; src: url("fonts/Roboto-Italic-VariableFont_wdth,wght.ttf") format("truetype"); font-style: italic; font-weight: 100 900; font-stretch: 75% 100%; font-display: swap; } :root{ --ciFarbe1: #333333; --ciFarbe2: #D40009; --hgrau: #f5f5f5; --maxBreite: 1900px; /*calc(340px + 900px + 50px)*/ --maxSliderHoehe: calc(100vw/16*9) !important; --minSliderHoehe: calc(100vw/16*4.5) !important; --blockGap: 30px; } html {font-size:100%; line-height:100%; scroll-behavior:smooth; -webkit-text-size-adjust:100%; text-size-adjust:100%;} body {width:100vw; min-height:100vh; overflow-x:hidden; background:#fff;} *,*::after,*::before {margin:0; padding:0; font-family:'Roboto', sans-serif; font-size:clamp(15px, calc(16px + (100vw - 320px) * 6 / 1920), 22px); line-height:1.5; color:var(--ciFarbe1); font-weight:350; font-stretch:80%; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;} span {font-size:inherit; line-height:inherit; font-weight:inherit; color:inherit; font-style:inherit;} span.nowrap {white-space:nowrap;} a, img {border-style:none; text-decoration:underline; border:0;} a {color:#d4000c; text-decoration:none; text-decoration-color:#bbb; text-underline-offset:3px; text-decoration-thickness:1px; cursor:pointer;} a.weiterlesen {display:inline-block; padding:5px 10px; text-decoration:none; color:var(--ciFarbe2); font-weight:450; letter-spacing:0.05em; border:2px solid #ccc; border-radius:0px; background-color:#fff; transition:all 0.5s ease-in-out;} a.back img {filter:grayscale(1); opacity:.6; transition:filter .2s ease, opacity .25s ease;} a.ref {font-size: calc(clamp(15px, calc(16px + (100vw - 320px) * 3 / 1920), 20px )*.8); text-decoration: none;} h1, .titel {font-size:clamp( 27px, calc(27px + (100vw - 320px) * 6 / 1920), 44px ); line-height:1.25; font-weight:450;} h2, .untertitel {font-size:clamp( 22px, calc(21px + (100vw - 320px) * 6 / 1920), 32px ); line-height:1.25; font-weight:500;} h3, .content {font-size:clamp( 18px, calc(19px + (100vw - 320px) * 6 / 1920), 28px ); line-height:1.25; font-weight:500;} h3 {margin:0; margin-bottom:2px;} h2.login {margin-bottom:12px;} h1.maintitle {margin-top:0; margin-bottom:8px; color:#d4000c;} h2.subtitle {margin-top:0; margin-bottom:20px; letter-spacing:1px;} div {margin:0; padding:0; display:block;} p {margin-top:10px; margin-bottom:10px;} label {vertical-align:middle;} ol, ul, li {margin:0; padding:0;} li {padding:0 0 10px; text-align:left !important;} ul, ol, form {margin-top:0px; margin-bottom:0px;} form {margin-top:8px;} ul {margin-left:30px;} ol {margin-left:30px;} ul ul, ul.sitemap1 {margin-left:15px;} ul ul {margin-top:1px; margin-bottom:1px;} ol ol {margin-top:1px; margin-bottom:1px;} b,strong {font-family:inherit; font-weight:450; font-size:inherit; color:inherit; line-height:inherit;} i,em {font-style:italic;} .kleiner {font-size:calc(clamp( 15px, calc(16px + (100vw - 320px) * 3 / 1920), 20px ) * 0.85);} .rot {color:var(--ciFarbe2) !important;} #head {position:fixed; width:100vw; z-index:5; top:0; left:0; padding:0 15px; background:#fff; /*box-shadow:0 0 0px 6px #fff;*/} #headWrap {position:relative; display:grid; width:fit-content; width:100%; height:70px; margin:0 auto; padding:0; grid-template-columns:auto 1fr; align-items:center; grid-gap:20px; /*border-bottom: 1px solid #ddd;*/} #headWrap #logo a img {width:auto; height:50px;} #icons {width:200px;} #icons img {width:40px; height:40px;} #topspacer {position:relative; width:100%; height:70px;} #nav {display:none;} .iframe {max-width:100%;} .thumbnail_layer #lg_admin_buttons {display:none;} #content0 .galeriethumb {width:100%; height:100%; margin:0; object-fit:cover; border-radius:5px;} #content0 .thumbnail_layer, .extcont.extcont0 .thumbnail_layer {display:grid; grid-template-columns:repeat(1,1fr); grid-gap:5px;} #content1 .galeriethumb {max-width:140px !important; border-radius:5px;} #content2 .galeriethumb {max-width:140px !important; border-radius:5px;} #content0 {position:relative; text-align:justify;} #content1 {position:relative; text-align:justify;} #content2 {position:relative; text-align:justify;} #content0 .block h3 {position:relative; text-align:left;} #content0 a {color:#d4000c;text-decoration:none;} #content1 a, #content1_lyo3 a {color:#d4000c;text-decoration:none;} #content2 a, #content2_lyo3 a {color:#d4000c;text-decoration:none;} #content0 hr, #content1 hr, #content2 hr {margin-bottom:40px;} .kachelWrap {display:flex; width:100%; flex-wrap:wrap; justify-content:center; gap:50px 30px; align-items:start; margin:0 auto;} .extcont.extcont3 .kachelWrap {grid-gap:20px 40px;} hr {border:1px solid #C9C9C9;} div.newslettercheckin * {line-height:14px;} div.newslettercheckin .myinput {margin-top:10px; margin-right:20px; width:80% !important; max-width:400px;} [name=reg_form_2] {display:none;} .extcont {position:relative; z-index:2; width:100vw; top:0; left:0; margin:40px 0;} .extcontWrap {position:relative; display:grid; width:100%; max-width:var(--maxBreite); margin:0 auto; padding:0 0; align-content:start; grid-gap:40px;} .extcont.extcont2 {background:#fff; z-index:2; padding:40px 0;} .extcont.extcont2 .extcontWrap {display:grid; grid-gap:40px; grid-template-columns:repeat(1,1fr); padding:0 10px;} .extcont.extcont3 {position:relative; z-index:2; width:100%; margin:auto; padding:0 15px;} .extcont.extcont4 {background:#fff; position:relative; z-index:2; max-width:100vw; margin:0;} .extcont.extcont4 img {width:100%; height:auto;} #extcontent8 {display:none; padding-left:30px; font-size:16px; line-height:1.5;} #extcontent8 * {font-size:16px; line-height:1.5;} div.overview_item {clear:both; margin-top:40px; border-top:2px dotted #999999;} .overview_item_img {float:left; margin-top:20px; margin-right:30px; margin-bottom:30px; width:300px; height:auto; border-radius:5px;} div.overview_item h1 {padding-top:40px !important;} #herocontainer {width:100%; max-width:var(--maxBreite); max-height:calc(90vh - 100px); left:0; position:relative;} #herocontainer > img {position:relative; z-index:1; width:100%; height:auto;} #herocontainer > p {position:absolute; display:grid; z-index:2; max-width:calc(100% - 120px);width:100%; height:100%; left:60px; top:0; padding: 20px 0; justify-items:center; align-content:end; font-size:clamp(20px, calc(20px + (100vw - 320px) * 50 / 1600), 60px); line-height:1.25; color:#fff; text-transform:uppercase; font-weight:500; text-align:center; text-shadow:0px 0px 20px #000;} #herocontainer2 {position:fixed; width:100%; max-width:var(--maxBreite); top:100px; left:0;} #herocontainer2 > img {width:100%; height:100%;} #herocontainer2 + #content {margin-top:min(calc(100vw / 2.959), 642px);} /* ---------- TL Slider start ---------- */ #slidercontainer {position:relative; z-index:2; width:100%; max-width:var(--maxBreite); margin:0 auto 0 !important;} img.fwxgalleryslider-slide {width:100% !important; height:100% !important; object-fit:cover; left:0 !important;} #slidercontainer,#slider1_container,#slider1 img.fwxgalleryslider-slide {height:70vh !important; top:0 !important; /*max-height:700px;*/ margin:0;} #slidercontainer.halfslide, #slidercontainer.halfslide #slider1_container, #slidercontainer.halfslide #slider1, #slidercontainer.halfslide img.fwxgalleryslider-slide {height:50vh !important; top:0 !important;} #slidercontainer > img {width:100%; height:100%; object-fit:cover;} .nivo-caption {max-width:calc(100% - 120px); height:100%; left:60px; display:grid; grid-gap:0; align-content:end; justify-content:center; text-align:center; background:#fff0; opacity:1 !important; pointer-events:none;} .captionWrap {display:grid; grid-gap:10px; grid-template-columns:1fr; background:#0000;} .fwxgalleryslider-caption h3 {margin:0; padding:0 30px 0 30px; font-size:clamp(20px, calc(20px + (100vw - 320px) * 50 / 1600), 60px); line-height:1.25; color:#fff; text-transform:uppercase; font-weight:500; text-shadow:0px 0px 20px #000;} .fwxgalleryslider-caption p {margin:0; padding:0 30px 20px 30px; font-size:clamp(20px, calc(20px + (100vw - 320px) * 50 / 1600), 60px); line-height:1.25; color:#fff; text-transform:uppercase; font-weight:500; text-shadow:0px 0px 20px #000;} .fwxgalleryslider-caption p:empty {display:none;} #imageDetails #caption div a {margin:0; padding:0 !important; font-size:calc(clamp(15px, calc(13.6px + 0.4375vw), 22px) *.7);} #imageDetails #caption p:nth-child(2) {font-size:calc(clamp(15px, calc(13.6px + 0.4375vw), 22px) *.7);} .nivo-directionNav {height:50px; margin:0; top:calc(50% - 25px);} /*.nivo-directionNav:hover {opacity:1; transition:opacity 0.2s ease;}*/ .nivo-directionNav a {display:block; width:50px; height:50px; background:url(../images/imageslider/arrows.png) no-repeat; text-indent:-9999px; border:0; cursor:pointer; transform:scale(0.8); pointer-events:auto;} .fwxgalleryslider-arrow {top:calc(50% - 25px);} .fwxgalleryslider-arrow.forward {background:url(../images/page/imageslider/arrows2.png) -50px 0 no-repeat; right:0;} .fwxgalleryslider-arrow.back {background:url(../images/page/imageslider/arrows2.png) top left no-repeat; left:0;} .fwxgalleryslider-controls {top:calc(50% - 15px); height: 30px !important; pointer-events: none;} .nivo-directionNav {align-content:end; pointer-events:none !important;} .captionWrap {pointer-events:none;} .fwxgalleryslider-caption h3 {pointer-events:none;} /* ---------- TL Slider ende ---------- */ /* ++++++++++++++++++++++++ Slick Slider LOGI +++++++++++++++++++++++ */ #logi-wrapper {width:100%; margin:0 0 40px; text-align:center; opacity:0.5; transition:opacity ease-out 1s} #logi-wrapper:hover {opacity:1; transition:opacity ease-out 0.5s;} #logi {width:100%; max-width:1600px; display:inline-block;} #logi-wrapper h2 {margin-bottom:0; top:43px; padding:0 10px; font-weight:500; font-size:12px; position:relative; display:inline-block; background:#fff;} hr.logi {margin:30px 0 40px; border:0; height:1px; background:#fff; background-image:linear-gradient(90deg, transparent, #8e9fbc, transparent);} hr.logi2 {max-width:var(--maxBreite); margin:auto; border:0; height:1px; background-color:var(--ciFarbe);} #logi img {width:100%; height:auto; padding:0 30px;} #logi a {display:inline-block;} .slick-slide img {height:100px !important; width:auto ;} img.slick-slide {height:100px !important; width:auto ;} .slickunten .bp_edit_area {display:none;} .block.slide .edbloc {display:none;} .extcont.extcont6 {width:calc(100% - 20px); margin:auto; padding-bottom:40px;} span.logoleisteTitel {display:block; margin:40px auto 0; text-align:center;} /* ++++++++++++++++++++++++ Slick Slider REFRENZPROJEKTE +++++++++++++++++++++++ */ .extcont.extcont6.slick-initialized.slick-slider .block.kachel.referenz .block01 img { height: auto !important; } /* ---------- BP KACHEL start ---------- */ .block.kachel {position:relative; flex:0 0 100%; align-content:start; border-radius:0px; overflow: hidden; opacity:1; transform:scale(1); transition:opacity 0.2s, transform0.2s;} .block.kachel img {width:100%; height:100%; object-fit:cover;} .block.kachel .blockBild iframe {width:100%; height:auto;} .block.kachel div:not(.edbloc,.block01,.blockWrap) {padding:15px;} .kachelWrap .block.kachel.kachel_einspaltig, .kachelWrap .block.kachel.kachel_leerzeile {flex:0 0 100%; margin:0 auto; padding:0 25px; background:#ffffff;} .block.kachel.kachel_leerzeile h3.blockTitel {display:none;} .block.kachel:not(.kachel_leerzeile, .team2, .kachel_einspaltig, .kachel.filter_referenz) {border-bottom:40px solid #ffffff; transition:opacity 0.2s, transform 0.2s;} .block.kachel .block03 a.weiterlesen {position:relative; z-index:2; display:inline-block; width:fit-content; margin-bottom:-20px; justify-self:center; font-size:80%; text-transform:uppercase; box-shadow:0 0 0 10px #fff; transition:all .5s ease;} .block.kachel.kachel_leerzeile p {margin:0;} .block.kachel.filter_referenz {flex:0 0 100%; margin: 0 auto; padding:0;} .block.kachel .block02 {padding:20px 15px 40px !important; line-height:1.5; font-size: calc(clamp( 15px, calc(16px + (100vw - 320px) * 3 / 1920), 20px ) * 0.9); background-color:var(--hgrau);} .block.kachel .block02 * {font-size: calc(clamp( 15px, calc(16px + (100vw - 320px) * 3 / 1920), 20px ) * 0.85); line-height:1.5;} .block.kachel .block03 {position:relative; display:grid; padding-bottom:25px !important; background:#fff;} .block.kachel.kachel_einspaltig .block03, .block.kachel.kachel_leerzeile .block03 {display:none;} .block.kachel.kachel_einspaltig .block01, .block.kachel.kachel_leerzeile .block01 {grid-row-start:2; grid-row-end:3; max-width:900px; margin:0 auto;} .block.kachel.kachel_einspaltig h3.blockTitel, .block.kachel.kachel_leerzeile h3.blockTitel {grid-row-start:1; grid-row-end:2; max-width:900px; margin:0 auto 30px; padding:0; background:none;} .block.kachel.kachel_einspaltig h3.blockTitel {font-size:clamp( 22px, calc(21px + (100vw - 320px) * 6 / 1920), 32px ); line-height:1.25; font-weight:500;} .block.kachel .blockText * {text-decoration:none; color:#fff;} .block.kachel .blockText a {position:relative; display:inline-block; margin:10px 0 0; text-decoration:none; color:#fff;} .block.kachel:not(.kachel_leerzeile, .kachel_einspaltig) h3.blockTitel {margin:0; padding:25px 15px 0; font-weight:500; background-color:var(--hgrau);} .block.kachel .block03::after {content:''; position:absolute; z-index:0; width:100%; height:60%; border-radius:0; background:var(--hgrau);} .extcont.extcont3 .extcontWrap {transition:opacity 0.2s, transform 0.2s;} .block.kachel.is-clickable {cursor:pointer;} .block.kachel.is-clickable .edbloc, .block.kachel.is-clickable .edbloc * {cursor:default;} .block.kachel.kachel_einspaltig .block02, .block.kachel.kachel_leerzeile .block02 {position:absolute; z-index:-1; width:100%; height:100%; top:0; padding:0 !important; } .extcont.extcont3 .extcontWrap .thumbnail_layer {display:grid; grid-template-columns:1fr; grid-gap:5px; padding-top:10px;} #reffilterWrap {text-align:center !important;} /* ---------- Filter für Referenzprojekte start ---------- */ #reffilterWrap {display:block; padding:30px 0; text-align:center; border-top:1px dashed #ddd; border-bottom:1px dashed #ddd;} #reffilterWrap a {padding:0 5px; cursor:pointer;} #reffilterWrap a.aktiv {color:#d40009; text-decoration:none;} #referenzFilter {max-width:calc(100vw - 20px); padding:10px; vertical-align:middle;} /*.block.kachel.referenz .block02 a.ref {visibility:hidden; font-size:0; line-height:0;}*/ .block.kachel.referenz[hidden] {display:none !important;} .block.kachel.referenz.filter-hidden {display:none !important;} /* ---------- Filter für Referenzprojekte ende ----------- */ .timeline.js-scroll-line .block.kachel .block02, .timeline.js-scroll-line .block.kachel .block02 * {font-size:calc(clamp( 15px, calc(16px + (100vw - 320px) * 3 / 1920), 20px ) * 0.98);} .timeline.js-scroll-line .block.kachel .block01, .timeline.js-scroll-line .block.kachel .block01 * {text-align:left; font-size:calc(clamp( 15px, calc(16px + (100vw - 320px) * 3 / 1920), 20px ) * 0.85);} /* ---------- BP KACHEL ende ---------- */ /* ---------- kachelWrap in content0 start ----------- */ #content0 .kachelWrap .kachel_leerzeile, #content0 .kachelWrap .kachel_einspaltig {display:none;} #content0 .kachelWrap {gap:30px;} #content0 .block.kachel:not(.kachel_leerzeile, .kachel_einspaltig) {flex:0 0 100%;} #content0 .block.kachel .block02 { text-align: left; } /* ---------- kachelWrap in content0 ende ------------ */ /* ---------- BP Block MASONRY start ---------- */ .block.kachel.masonry {width:100%; margin-bottom:20px;} .block.kachel.masonry.masonry_yt {width:100%; margin-bottom:20px;} .block.kachel.masonry.masonry_yt .blockBild iframe {width:100%; height:auto; aspect-ratio:16/9;} /* ---------- BP Block MASONRY ende ---------- */ /* ----------- BP Block TEAM start ----------- */ .extcont.extcont3 .kachelWrap.teamWrap {gap:50px 30px;} .extcont.extcont3 .kachelWrap.teamWrap > br {display:none;} .extcont.extcont3 .kachelWrap.teamWrap > .block.kachel.kachel_leerzeile, .extcont.extcont3 .kachelWrap.teamWrap > .block.kachel.kachel_einspaltig {flex:0 0 100%; margin-bottom:0; text-align:center;} .block.kachel.team {border:0; overflow:visible; text-align:left;} .block.team .block01 img {width:100%; height:auto;} .block.team .blockWrap {display:grid; grid-template-columns:1fr; gap:20px; padding:0;} .block.team .block02 {font-size:90%;} .block.team .block01 a {font-size: clamp(16px, calc(16px + 0.4375vw), 25px); line-height:1.25; font-weight:500; text-decoration:none; text-transform:uppercase;} /* ----------- BP Block Team ende ----------- */ /* ----------- BP Block TEAM NEU start ----------- */ .extcont.extcont3 .kachelWrap.teamWrap {display:grid; width:100%; max-width:1200px; grid-template-columns:1fr; gap:0;} /*.extcont.extcont3 .kachelWrap.teamWrap .block.kachel.team2:nth-child(odd) .blockWrap {background:var(--hgrau);}*/ .block.kachel.team2 {width:100%; border-bottom: 1px dashed #ddd;} .block.kachel.team2 .blockWrap {display:grid; grid-template-columns:1fr; grid-gap:0; padding:0; align-items:center; border:10px #fff solid;} .block.kachel.team2 .blockWrap * {padding:0 !important; font-size:clamp(15px, calc(16px + (100vw - 320px) * 6 / 1920), 22px); line-height:1.5; background:#ffffff00;} .block.kachel.team2 .block03::after {display:none;} .block.kachel.team2 .block03 {display:block;} .block.kachel.team2 .edbloc {position:relative; display:none;} .block.kachel.team2 h3.blockTitel {background:#ffffff00;} .block.kachel.team2 .blockWrap * .kleiner {font-size:80%;} .block.kachel.team2 .block01 {font-size:95%;} .block.kachel.team2 .block02 {padding-top:8px !important;} /* ----------- BP Block TEAM NEU ende ----------- */ .teamFilterWrap {display:block; padding:30px 0; text-align:center; border-top:1px dashed #ddd; border-bottom:1px dashed #ddd;} .teamFilterWrap select {display:block; width:100%; margin:10px 0; padding:10px;} .teamFilterWrap select:last-child {margin:0;} .block.team[hidden] {display:none !important;} .block.team .block02, .block.team .block03 {display:none;} /* ---------- BP Block TIMELINE start ---------- */ .timeline {position:relative; display:grid; grid-gap:50px 0; margin:50px auto 0; padding:0; background:#fff;} .timeline-line {position:absolute; width:4px; top:0; bottom:0; left:0; background:#a8a8a8; overflow:hidden; pointer-events:none;} .timeline-line-progress {position:absolute; width:100%; height:0; top:0; left:0; background:var(--ciFarbe2); pointer-events:none;} .timeline.js-scroll-line .block.kachel h3.blockTitel, .timeline.js-scroll-line .block.kachel .block01, .timeline.js-scroll-line .block.kachel .block02, .timeline.js-scroll-line .block.kachel .block03 {background-color:#fff;} .timeline.js-scroll-line .block.kachel:last-child {border:none; padding:0 0 0 15px;} .timeline.js-scroll-line .block.kachel:last-child .block02 {padding-bottom:0 !important;} .timeline.js-scroll-line .block.kachel:first-child h3.blockTitel {padding-top:0 !important;} .timeline.js-scroll-line .block.kachel, .timeline.js-scroll-line .block.kachel .block01, .timeline.js-scroll-line .block.kachel .block02, .timeline.js-scroll-line .block.kachel .block03, .timeline.js-scroll-line .block.kachel h3.blockTitel {background:#ffffff00; border-bottom-color:#ffffff00;} .timeline.js-scroll-line .block.kachel {display:grid; grid-template-columns:1fr; grid-gap:30px 0; align-items:center; border-radius:0; border:none; border-bottom:1px dashed #aaa; padding-left:15px;} .timeline.js-scroll-line .block.kachel .block01 {grid-column-start:1; grid-column-end:2; grid-row-start:1; grid-row-end:2; text-align:rigleftht;} .timeline.js-scroll-line .block.kachel h3.blockTitel {grid-column-start:2; grid-column-end:3; grid-row-start:1; grid-row-end:2; padding:0;} .timeline.js-scroll-line .block.kachel .block02 {grid-column-start:1; grid-column-end:2; grid-row-start:2; grid-row-end:3; padding:0 0 50px !important;} .timeline.js-scroll-line .block.kachel .block01 img {width:auto; height:auto; object-fit:cover; padding:5px 0;} /* ---------- BP Block Timeline ende ---------- */ /* ---------- BP Block FOOTER start ---------- */ .block.footer {display:grid; grid-gap:20px 0; align-content:flex-start; justify-self:left;} .block.footer img {width:100%; max-width:250px; height:100%; object-fit:cover;} .block.footer * p {margin-top:0;} #footWrap .block.footer:nth-child(3) {justify-self:left;} #foot {position:relative; z-index:2; width:100vw; top:0; left:0; margin:0; padding:100px 0; background:var(--ciFarbe2); } #footWrap {position:relative; display:grid; z-index:2; width:100%; max-width:var(--maxBreite); margin:0 auto; padding:10px 15px; grid-template-columns:1fr; grid-gap:50px; align-items:start;} #footWrap * {font-size:calc(clamp( 15px, calc(16px + (100vw - 320px) * 3 / 1920), 20px ) * 0.9); color:#fff; text-decoration:none;} div.foot3 {text-align:left;} #footWrap h1 {font-size:22px;} #footWrap h2 {font-size:20px;} #footWrap h3 {font-size:18px;} #footWrap h4 {font-size:15px; font-weight:bold;} #footBG {display:block; display:none; position:fixed; z-index:1; width:100vw; height:calc(100vh - 100px); bottom:0; background: url("/images/page/bgfoot.jpg") no-repeat bottom;} /* ---------- BP Block FOOTER ende ---------- */ .auflistungitem_inner .auflistungcontent.rowauflistung {display:grid; grid-gap:20px; grid-template-columns:1fr; margin:50px 0; padding:0 0 50px; border-bottom:1px solid #222;} .ai_teaser_datum {grid-column-start:1; grid-column-end:2; grid-row-start:1; grid-row-end:3; align-self:center; font-size:30px; line-height:36px; font-weight:650;} .ai_teaser_cont2 {padding-top:10px;} .ai-teaser-bild img {width:100%; height:100% !important; object-fit:cover; } .ai-itemdetail-bild1 {margin-bottom:40px;} .cf-ausgabe-datum {margin:30px 0; font-size:18px; font-weight:650;} #content {position:relative; z-index:2; width:100%; /*max-width:var(--maxBreite); width:calc(100% - 200px);*/ margin:0 auto; padding:30px 20px; background:#fff;} #content0 {position:relative; max-width:900px; width:100%; margin:0 auto 0 0;} #spaltenwrap {position:relative; display:grid; width:100%; max-width:900px; margin:40px auto; grid-template-columns:1fr; align-items:start; grid-gap:50px;} #content0 img:not(.form_spacer img), #content1 img:not(.form_spacer img), #content2 img:not(.form_spacer img) {max-width:100%; height:auto;} #titelleiste {position:relative; display:grid; width:100%; max-width:900px; margin:0 auto 40px; grid-gap:0 50px; grid-template-columns:1fr;} #titelleiste h1.maintitle, #titelleiste h2.subtitle {max-width:900px; margin:20px 0 0;} /* #slidercontainer.halfslide.ext5 + #content {margin-top:50vh;}*/ /* -------------- Layout 3 - Layer zeigen ------------ */ #titelleiste_lyo3, #spaltenwrap_lyo3, #content1_lyo3, #content1_lyo3 {display:none;} #content-inner {position:relative; display:grid; max-width:900px; margin:0 auto; grid-gap:50px 50px; grid-template-columns:1fr;} #content-inner #spaltenwrap {max-width:900px; margin:0; padding:0;} #content-inner #sub {padding:0;} #content-inner #sub #submenu {margin:0;} #content-inner #sub #submenu ul li:last-child {margin-bottom:0;} .extcont.extcont0 {max-width:900px; width:100%; margin:0; } /* ---------- EDITORBLOECKE Anpassungen ---------- */ #editblock {position:relative !important; z-index:50; width:100%; bottom:0; left:0px; margin:0; padding:15px !important; text-align:center; border-color:silver;} #editblock img {margin:0 5px; vertical-align:center !important;} .bp_edit_area a:nth-child(5) {margin:0 0 0 12px;} .block .edbloc a img {width:15px !important; height:15px !important} .block.termine .edbloc {grid-column-start:1; grid-column-end:4; grid-row-start:2; grid-row-end:3;text-align:center;} .block.logo .edbloc .bp_edit_area {display:flex;} .block.kachel .edbloc {position:absolute; background:#fffa;} .block.kachel.team .edbloc {top:-20px;} #foot .bp_edit_area a:nth-child(2) img, #foot .bp_edit_area a:nth-child(3) img {filter:brightness(0) invert(1);} #editblock *:hover , .edbloc a:hover {background:none !important; color:var(--ciFarbe2);} .timeline.js-scroll-line .block.kachel .edbloc {top:0; left:15px;} #sub {display:none;} .subm3 {margin-top:5px;} #submenu ul #submenu3 {margin-left:3px;} .normalmenu .subm3 {display:none;} #submenu * {font-size:15px; line-height:1.5 !important;} #submenu {position:relative; z-index:2; display:none; top:-7px; margin:0 0 40px;} #submenu ul {width:100%; margin:0 auto; margin-left:15px; padding:0;} #submenu ul li {display:block; padding:0; border:none; list-style-image: url(../images/page/menu-bullet.png) !important; margin-left: 20px; white-space: wrap; } #submenu ul li:first-child {padding-left:0;} #submenu ul li:last-child {padding-right:0; border:none;} #submenu ul li a {text-decoration:none; color:var(--ciFarbe1); line-height:28px;} #submenu ul li ul.menusubpagelist {display:none;} #s2idmenu {position:relative; z-index:2; display:none; height:60px; align-items:center; justify-content:center; background-color:#fff;} #s2idmenu ul {max-width:1080px; width:100%; margin:0 auto; padding:0 10px; list-style-type:none; font-size:0;} #s2idmenu ul li {display:inline-block; padding:0 20px; border-right:1px solid #8e151c; line-height:22px; font-weight:400;} #s2idmenu ul li a {text-decoration:none; color:#8e151c; line-height:22px;} #s2idmenu ul li:first-child {padding-left:0;} #s2idmenu ul li:last-child {padding-right:0; border:none;} li.activemenu, li.normalmenu {display:inline-block; white-space:nowrap; overflow:hidden;} #submenu ul li.activemenu, #submenu ul li.normalmenu {overflow:visible; white-space:wrap; display:list-item; margin:10px 15px;} #submenu ul#submenu3 li.activesubmenu3, #submenu ul#submenu3 li.normalsubmenu3 {overflow:visible; white-space:wrap; display:list-item; margin:0px 15px;} #submenu ul#submenu3 li.activesubmenu3 a {color:var(--ciFarbe2);} div.menupadding {margin:0; padding:0;} ul.menusubpagelist {list-style-type:none; list-style-image:none; margin:0; padding-left:20px; white-space:nowrap; overflow:hidden; background-color:#ffffff;} ul.submenu, ul.mainmenu {list-style-type:none; list-style-image:none; margin:0; padding:0;} ul.mainmenu li {margin-right:20px;} ul.mainmenu li a:not(.activemainmenu) {text-decoration:none;} li.mainitem, h2.mainmenu, li.trenner {display:inline;} #submenu ul li a.activemenu {color:var(--ciFarbe2); font-weight:400;} a.normalmenu {color:black;} a.activemenu:hover, a.normalmenu:hover {color:var(--ciFarbe2);} a.activemainmenu {color:#d4000c; font-weight:500; text-decoration:none; text-transform:uppercase; vertical-align:middle;} a.normalmainmenu {font-size:15px; color:#000; font-weight:400; text-transform:none; vertical-align:middle;} a.activemainmenu:hover, a.normalmainmenu:hover {color:var(--ciFarbe2);} a.activesubmenu3 {font-weight:400; text-transform:uppercase;} .normalsubmenu3 {text-transform:none;} .myinput, input.text, textarea.text, select {border-style:solid; border-width:1px; border-color:silver; margin-top:1px; margin-bottom:1px;} .login_input {border-style:solid; border-width:1px; border-color:silver; margin-top:1px; margin-bottom:1px;} input.loginsubmit {margin-top:10px; margin-bottom:10px;} .login_checkbox {vertical-align:middle;} .login_submit_area {padding-top:5px;} select {background-color:#ffffff;} .field_string {margin-bottom:20px; padding:0 5px;} img.galeriethumb {width:100%; height:auto; margin:0;} .captcha {border:solid silver 1px; width:120px;} img.captcha {margin-top:8px; margin-bottom:1px;} input.captcha {margin-bottom:2px;} iframe {width:100%;} /* Privacy Layer - customized */ .cl_cookie_privacy_layer {width:100vw !important; height:100vh !important; display:grid; align-content:center; background-color:#2c2c2ccc !important;} .cl_cookie_privacy_layer > div {padding:20px !important; box-shadow:0 0 0 5px #fff,20px 20px 50px 0 rgba(0, 0, 0, 0.5);} .cl_cookie_privacy_layer * {max-width:750px !important; background-color:#353c45 !important; border-radius:20px; color:#fff !important;} .cl_cookie_privacy_layer a {margin:20px 0 0; padding:10px 15px !important; color:#fff; background-color:#656565 !important; border-radius:10px;} .cl_cookie_privacy_layer a:last-child {margin-left:0px;} #cl_privacy_link_y {color:#fff; background-color:#04b72c !important;} #cl_privacy_link_n {color:#fff; background-color:#8b0c36 !important; margin-right:40px !important;} .dsgvo_layer {width:100%; max-width:100% !important; margin-top:20px !important;} .dsgvo_paragraph, .dsgvo_paragraph *, .dsgvo_link, .dsgvo_linktext {font-size:calc(clamp(15px, calc(16px + (100vw - 320px) * 3 / 1920), 20px * 0.8));} a.dsgvo_link, input.dsgvo_checkbox {vertical-align:baseline !important; } /* ---------- BOX ---------- */ /* ******************* IO ************************* */ .myBox {margin-left:-40px; margin-right:-40px; padding:40px; border-radius:20px; border:2px dotted #999999;} .myBoxYellow {margin-left:-40px; margin-right:-40px; padding:40px; border-radius:20px; border:2px dotted #999999; background-color:#f5f3e6;} /* ---------- CONTENT_EXT_HINTERGRUENDE ---------- */ /* ******************* IO ************************* */ div.extcont3outer {position:relative; display:block; z-index:2; padding-bottom:100px; background-color:#fff;} div.extcont6outer {position:relative; display:block; z-index:2; max-width:var(--maxBreite); margin:auto; background:#fff;} div.extcont7outer {position:relative; display:block; z-index:2; background-color:#fff; /*background-image:url("/images/page/extcont7outer.png"); background-repeat:repeat-x;*/ } .extcont.extcont7 {display:grid; z-index:2; position:relative; width:100%; height:200px; margin:auto; padding:40px 20px; align-content:center; justify-content:center;} .extcont.extcont7 img {max-width:100%; width:auto; max-height:160px; height:auto;} /* ---------- FORMULAR ELEMENTE ---------- */ .cf-form-wrap {width:clac(100vw - 20px); overflow-x:scroll; margin:20px 0;} #my_cf_form input[type="text"], #my_cf_form textarea {margin:5px 0; padding:2px 5px; width:100% !important;} #my_cf_form table table td img {margin:0 0 0 10px;} #my_cf_form table {width:100%;} #my_cf_form input[type="submit"] {margin:0 0 10px; padding:5px 10px; background-color:var(--ciFarbe2); text-transform:uppercase; font-weight:600; color:#fff; border-radius:5px; border:2px solid var(--ciFarbe2)} .cf-form-wrap > table {margin:80px 0 !important; width:100%;} #my_cf_form table tr:nth-child(7) table {margin:20px 0 5px !important;} #my_cf_form table tr:nth-child(7) table tr td:nth-child(2) {padding-left:0 !important;} #upfile1_highraiser,#upfile1_thumb {margin:30px 0;} #my_cf_form > table tr:nth-child(8) input[type="submit"] {margin-left:-5px;} #content0 textarea, #content1 textarea, #content2 textarea {width:100%;} #content0 .submit, #content1 .submit, #content2 .submit {display:block;padding:20px; width:200px !important;} #content0 select, #content1 select, #content2 select {width:100%; padding:10px;margin-bottom:20px;} p.error {position:fixed; display:block; z-index:100; width:90%; left:5%; top:80px; padding:10px; font-size: calc(clamp( 15px, calc(16px + (100vw - 320px) * 3 / 1920), 20px )*0.85); color:var(--ciFarbe2); border-width:1px; border-style:solid; border-color:var(--ciFarbe2); background-color:#f2f2f2; border-radius:5px; box-shadow:0 0 0 25px #fff;} #tinymce .tinymce-generated-root-block img {width:100%; max-width:100%; height:auto;} #tinymce .tinymce-generated-root-block a img {width:auto;} /* ****************************************** */ /* MEDIAQUERIES */ /* ****************************************** */ @media(hover:hover) and (pointer:fine) { a:not(.activemainmenu,.activemenu, .normalmainmenu,.normalmenu .weiterlesen):hover {background-color:var(--ciFarbe2); text-decoration-color:var(--ciFarbe2); text-decoration:underline;} .activemainmenu:hover, .activemenu:hover, .normalmainmenu:hover, .normalmenu:hover {color:#fff; color:var(--ciFarbe2); text-decoration:none;} a.weiterlesen:hover {color:#fff !important; background-color:var(--ciFarbe2) !important; border-color:var(--ciFarbe2) !important; text-decoration:none !important; transition:all 0.25s ease-in-out;} .kachel:hover a.weiterlesen {color:#fff !important; background-color:var(--ciFarbe2) !important; border-color:var(--ciFarbe2) !important; text-decoration:none !important; transition:all 0.25s ease-in-out;} .extcont.extcont3 .extcontWrap .kachel:not(.kachel_leerzeile, .kachel_einspaltig,.filter_referenz,.team2):hover {transform:scale(1.05); transition:transform 0.2s;} .block.kachel.team2:hover .blockWrap {border-color:var(--hgrau); background:var(--hgrau) } #my_cf_form input[type="submit"]:hover {background-color:#fff; color:var(--ciFarbe2);} #submenu ul li a:hover {color:var(--ciFarbe2); background:#fff0;} .block.team a:hover {color:var(--ciFarbe2); } a.back img:hover {filter:grayscale(0); opacity:1; transition:filter .2s ease, opacity .25s ease;} #tinymce a:hover {color:var(--ciFarbe2) !important;} #tinymce a.weiterlesen:hover {color:#fff !important;} #icons a:hover, a:hover {background-color:#fff0 !important;} a:not([class*="menu"],.weiterlesen):hover {text-decoration:underline !important;} a[class*="menu"]:hover {text-decoration:none !important; color:#fff;} a[class*="mainmenu"]:hover {color:var(--ciFarbe2);} } @media screen and (min-width:450px){ .block.kachel.masonry {width:calc(50% - 10px);} #content0 .thumbnail_layer, .extcont.extcont0 .thumbnail_layer {grid-template-columns:repeat(2,1fr);} } @media screen and (min-width:470px){ .teamFilterWrap select {display:inline-block; width:auto; margin:10px; padding:10px;} } @media screen and (min-width:501px){ #footWrap {grid-template-columns:repeat(2,1fr);} .block.footer {justify-self:center;} .timeline {grid-gap:50px 0; margin:50px auto 0; padding:0; background:#fff;} .timeline-line {left:calc(50% - 2px);} .timeline.js-scroll-line .block.kachel {grid-template-columns:1fr 1fr; grid-template-rows:auto 1fr; grid-gap:0 50px; padding-left:0px; padding-bottom:50px;} .timeline.js-scroll-line .block.kachel .block01 {grid-column-start:1; grid-column-end:2; grid-row-start:1; grid-row-end:3; text-align:right;} .timeline.js-scroll-line .block.kachel h3.blockTitel {grid-column-start:2; grid-column-end:3; grid-row-start:1; grid-row-end:2; padding:0;} .timeline.js-scroll-line .block.kachel .block02 {grid-column-start:2; grid-column-end:3; grid-row-start:2; grid-row-end:3; padding:0 !important;} .timeline.js-scroll-line .block.kachel .block01 img {padding:15px 0;} .block.kachel.team2 .blockWrap {grid-template-columns:1fr 1fr;} .block.kachel.team2 .block01 {grid-row-start:1; grid-row-end:3;} .block.kachel.team2 .block02 {padding-top:0 !important;} } @media screen and (min-width:550px){ .block.kachel.team {flex:0 0 calc(50% - 15px);} } @media screen and (min-width:600px){ .block.kachel.masonry.masonry_yt {width:calc(50% - 10px);} #footWrap .block.footer:nth-child(2), #footWrap .block.footer:nth-child(3) {grid-column-start:2; grid-column-end:3; justify-self:left;} .extcont.extcont3 .extcontWrap .thumbnail_layer {grid-template-columns:repeat(2, 1fr);} #content0 .block.kachel:not(.kachel_leerzeile, .kachel_einspaltig) {flex:0 0 calc(50% - 15px);} .extcont.extcont3 .kachelWrap .block.kachel:not(.kachel_leerzeile, .kachel_einspaltig,.filter_referenz,.team,.team2) {flex:0 0 calc(50% - 20px);} } @media screen and (min-width:700px){ .extcont.extcont2 .extcontWrap {grid-template-columns: repeat(2,1fr);} .nivo-directionNav a {width:50px; height:50px;} .fwxgalleryslider-arrow.forward {background:url(../images/page/imageslider/arrows2.png) -50px 0 no-repeat; right:15px; transform:scale(1);} .fwxgalleryslider-arrow.back {background:url(../images/page/imageslider/arrows2.png) top left no-repeat; left:15px; transform:scale(1);} .extcont.extcont3 .kachelWrap.teamWrap {width:fit-content; min-width:900px; max-width: 1200px;} .block.kachel.team2 .blockWrap {grid-template-columns:1fr 1fr 1fr;} .block.kachel.team2 .block01 {grid-row-start:1; grid-row-end:2;} .block.kachel.team {flex:0 0 calc(50% - 15px); text-align:center;} } @media screen and (min-width:870px){ #footWrap {grid-template-columns:1fr 1fr 1fr; width:calc(100% - 20px); justify-items:center;} .block.termine .blockBild {display:block;} .block.termine {grid-template-columns:180px 200px 1fr;} .block.termine .blockTextWrap {display:grid; align-content:center; grid-column-start:3; grid-column-end:4; grid-row-start:1; grid-row-end:2;} .auflistungitem_inner .auflistungcontent.rowauflistung {grid-template-columns:180px 200px 1fr; padding:10px 0 50px;} .ai-teaser-bild {grid-column-start:2; grid-column-end:3; grid-row-start:1; grid-row-end:2; display:block;} .ai_teaser_datum {grid-column-start:1; grid-column-end:2; grid-row-start:1; grid-row-end:2; align-self:center; font-size:30px; line-height:36px; font-weight:650;} .block.footer {justify-self:center !important;} #footWrap .block.footer:nth-child(2) {grid-column-start:2; grid-column-end:3; justify-self:left;} #footWrap .block.footer:nth-child(3) {grid-column-start:3; grid-column-end:4; justify-self:left;} .block.kachel.team {flex:0 0 calc(33.3333% - 20px);} } @media screen and (min-width:900px){ .blockWrap.kachel {grid-template-columns:1fr 1fr 1fr;} #headWrap {padding:0 0px;} #content {padding-top:40px;} #content0 .thumbnail_layer, .extcont.extcont0 .thumbnail_layer {grid-template-columns:repeat(3,1fr); grid-gap:10px;} p.error {top:100px;} #footWrap {width: calc(100% - 100px);} #slidercontainer,#slider1_container, #slider1 img.fwxgalleryslider-slide {height:calc(90vh - 100px) !important; top:0 !important;} .extcont.extcont4 {height:calc(100vh - 100px) !important; top:0 !important;} /*#slidercontainer.halfslide {top:100px !important;}*/ } @media screen and (min-width:1000px){ .extcont.extcont3 .kachelWrap .block.kachel:not(.kachel_leerzeile, .kachel_einspaltig,.filter_referenz,.team,.team2) {flex:0 0 calc(33.33333% - 80px/3);} } @media screen and (min-width:1070px){ .block.termine {grid-template-columns:170px 200px 1fr;} .block.termine .blockBild {display:block;} .block.kachel.masonry {width:calc(33.3333% - 40px/3);} #headWrap {height:100px;} #headWrap #logo a img {width:auto; height:80px;} #topspacer {height:100px;} #content-inner #sub {grid-row-start:1; /*grid-row-end:4;*/ padding:0;} #content-inner #sub #submenu {margin:0;} #headWrap #logo {max-width:200px;} #headWrap #logo a img {width:100%; height:auto; max-width:200px; max-height:80px;} #headWrap {grid-template-columns:1fr auto; width:fit-content; max-width: var(--maxBreite); grid-template-columns:minmax(150px,200px) auto; width:100%; justify-items:center;} .extcont.extcont0 {max-width:900px; width:100%; margin:0; grid-column-start:1; grid-column-end:2;} #content-inner #spaltenwrap {grid-column-start:1; grid-column-end:2; grid-template-columns:1fr 1fr; max-width:900px; margin:0;} #content0 {grid-column-start:1; grid-column-end:2;} } @media screen and (min-width:1220px){ #headWrap {grid-template-columns: minmax(150px,200px) 1fr minmax(150px,200px); grid-gap:20px;} .block.kachel.team {flex:0 0 calc(33.33333% - 80px/3);} } @media screen and (min-width:1300px){ #nav {display:block;} #sub {display:inline-block; position:sticky; height:fit-content; top:200px; padding:8px 0 2px;} #s2idmenu {display:grid;} #submenu {display:grid;} #extcontent8 {display:block;} #titelleiste {grid-template-columns:340px 1fr; max-width: calc(340px + 900px + 50px);} #content-inner {grid-template-columns:340px 1fr; margin-bottom:50px; max-width: calc(340px + 900px + 50px);} #spaltenwrap {grid-template-columns:1fr 1fr; max-width:calc(340px + 900px + 50px);} .extcont.extcont2 .extcontWrap {grid-template-columns: repeat(3,1fr);} .block.kachel.team {flex:0 0 calc(20% - 40px);} .extcont.extcont0 {max-width:100%; width:100%; margin:0; grid-column-start:2; grid-column-end:3;} #content-inner #spaltenwrap {grid-column-start:2; grid-column-end:3; grid-template-columns:1fr 1fr; max-width:100%;;} #content0 {grid-column-start:2; grid-column-end:3;} .extcont.extcont3 .extcontWrap .thumbnail_layer {grid-template-columns:repeat(3, 1fr);} } @media screen and (min-width:1350px){ .extcont.extcont3 .kachelWrap .block.kachel:not(.kachel_leerzeile,.kachel_einspaltig,.filter_referenz,.team,.team2) {flex:0 0 calc(25% - 120px/4);} } @media screen and (min-width:1800px){ /*.extcont.extcont3 .kachelWrap .block.kachel:not(.kachel_leerzeile,.kachel_einspaltig,.filter_referenz,.team) {flex:0 0 calc(20% - 80px/5);} */ .kachelWrap {max-width:var(--maxBreite); margin:0 auto;} } @media screen and (min-width:1920px){ #herocontainer,#herocontainer2 {left: calc(50vw - var(--maxBreite)/2);} } @media screen and (max-width:700px){ #content1 .galeriethumb {max-width:100px !important;} #content2 .galeriethumb {max-width:100px !important;} #content0 {text-align:left;} #content1 {text-align:left;} #content2 {text-align:left;} .myBox {margin-left:0px; margin-right:0px;} .myBoxYellow {margin-left:0px; margin-right:0px;} } @media screen and (max-width:1000px){ #content1 .blockWrap {grid-template-columns:1fr !important;} #content2 .blockWrap {grid-template-columns:1fr !important;} #content1 .galeriethumb {max-width:100px !important;} #content2 .galeriethumb {max-width:100px !important;} #content0 {text-align:left;} #content1 {text-align:left;} #content2 {text-align:left;} .myBox {margin-left:0px; margin-right:0px;} .myBoxYellow {margin-left:0px; margin-right:0px;} } @media screen and (max-width:1650px){ #spaltenwrap {grid-gap:50px; } #content1 .blockWrap {grid-template-columns:1fr 1fr !important;} #content2 .blockWrap {grid-template-columns:1fr 1fr !important;} #content1 .galeriethumb {max-width:100px !important;} #content2 .galeriethumb {max-width:100px !important;} } .field_string {width:100%;} .form_string_label {margin-top:10px; padding-left:5px;} .label_right * {font-size:11px;} .form_string_label label, .form_textarea_label label {display:block; margin-bottom:5px; padding-left:5px; font-weight:500;} .form_textarea_label {padding-left:5px;} /* #################### LIGHTBOX UPDATE IO 251112 ###################### */ .fwxlightbox-border {border-radius:10px !important;} #lightbox #imageContainer {margin:0px !important; padding:0px !important;width:100% !important;border-radius:10px 10px 0px 0px !important;} #lightbox #imageContainer img {width:100%!important;height:auto;} .fwxlightbox-title {font-weight:normal !important; } .fwxlightbox-close {background: url("../images/page/close.png") 30px 10px no-repeat !important;} .fwxlightbox-arrow.right {background: url("../images/fwxlightbox/arrow-right-white.png") right center no-repeat !important;} .fwxlightbox-arrow.left {background: url("../images/fwxlightbox/arrow-left-white.png") left center no-repeat!important;} #imageData {border-radius:10px !important;} #imageData #imageDetails {margin-left:20px !important; margin-top:10px;} #imageDetails a {padding:10px !important; border-radius:10px !important;} /* #################### LIGHTBOX UPDATE IO 251112 ###################### */ #lightbox #imageData {min-height:50px;} #lightbox #imageData #bottomNavClose {height:100%;} /* REVEAL EFFEKT f. .block.kachel Elemente */ .block.kachel, a.fwxlightbox-item {opacity:0; transform:translateY(50px); transition:opacity .5s ease, transform .5s ease;} .block.kachel.reveal,a.fwxlightbox-item.reveal {opacity:1; transform:translateY(0);} .extcont.extcont6 .block.kachel.referenz {opacity:1; transform:translateY(0);} @media (prefers-reduced-motion: reduce) { .block.kachel,a.fwxlightbox-item {opacity:1; transform:none; transition:none;} } /* Ext5 ausblenden wenn "leer" im Content */ #slidercontainer.halfslide.ist-leer {display:none !important;} .extcont6outer .slick-slide .block01 img { display:block; width:100% !important; height:auto !important; } .extcont.extcont6 .block.kachel.referenz.slick-slide {margin:0 5px;}