@font-face { font-family:'Open Sans Variable'; src:url('fonts/OpenSans-VariableFont_wdth,wght.ttf') format('truetype-variations'); font-weight:100 900; font-stretch:20% 400%; font-display:swap; } :root{ --ciFarbe1:#fff; --ciFarbe2:#870a24; --ciFarbe3: #284e9f; } html {font-size:16px; line-height:22px; scroll-behavior:smooth; overscroll-behavior:none;} body {width:100%; min-height:100%; overflow-x:hidden; background:#f7f7f7;} *,*::after,*::before {margin:0px; padding:0; font-family:'Open Sans Variable',sans-serif; font-size:1rem; line-height:1.5rem; color:#000; font-weight:300; -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 {text-underline-offset:3px; text-decoration-thickness:1px;} h1, .titel {font-family:serif; width:100%; margin:0; font-size:1rem; line-height:1.4rem; font-weight:550;} h2, .untertitel {margin:10px 0 30px; padding:0; font-size:1.5rem; line-height:1.75rem; font-weight:550;} h3, .untertitel {margin:0 0 10px; font-size:1.25rem; line-height:1.65rem; font-weight:550;} h4 {font-size:1.25rem; line-height:1.75rem; font-weight:500; margin:1rem 0;} .kleiner {font-size:.8rem; line-height:1.5rem;} .clr {clear:both; width:0; height:0; position:relative; display:block; line-height:0;} hr {height:1px; margin:1rem 0; background:var(--ciFarbe1); border:none;} form, ol, ul, li {margin:0; padding:0;} ul, ol {margin:.5rem 0 .5rem 20px; text-align:left; list-style-position:outside;} li {padding-bottom:.5em;} li:last-child {border-bottom:none;} b,strong {font-family:inherit; font-weight:550; font-variation-settings:'wght' 550; font-size:inherit; color:inherit; line-height:inherit;} i,em {font-style:italic;} p {margin:10px 0;} .collectionsButton{ display:inline-flex; align-items:center; justify-content:center; padding:14px 28px; margin-top:20px; background:#fff; border:2px solid var(--ciFarbe3); border-radius:12px; color:var(--ciFarbe3) !important; font-size:1.05rem; font-weight:600; letter-spacing:.02em; text-decoration:none !important; box-shadow: 0 4px 14px rgba(40,78,159,.14); transition: transform .18s ease, box-shadow .18s ease; } .collectionsButton:hover{ transform: translateY(-2px) scale(1.04); box-shadow: 0 10px 24px rgba(40,78,159,.22); } .collectionsButton:active{ transform:translateY(0px); box-shadow: 0 4px 10px rgba(40,78,159,.18); } #overlayWrap {position:fixed; display:none; z-index:10; width:100vw; height:100vh; top:0; left:0; overflow-x:scroll; background:#00000080;} #overlayClose {position:absolute; z-index:2; display:grid; width:40px; height:40px; right:calc(5% - 5px);; top:calc(5vh - 5px); padding:5px; background:#fff; justify-content:center; align-content:center; font-weight:700; box-shadow:-5px 4px 20px -13px #000; border-radius:0 5px 0 5px;} #overlayWrap .olI, #overlayWrap .olD, #overlayWrap .olC {position:relative; display:none; width:min(90%,650px); margin:0 auto; background:#fff; z-index:1; top:5vh; height:90vh; padding:5vh; border-radius:5px; overflow-x:scroll; box-shadow:0 0 40px -10px #000;} #overlayWrap.olI, #overlayWrap.olD, #overlayWrap.olC {display:grid;} #overlayWrap.olI .olI {display:block;} #overlayWrap.olD .olD {display:block;} #overlayWrap.olC .olC {display:block;} #sprachenButt {position: absolute; top:0; left:0; width:40px; height:40px; z-index:10; border-radius:0 0 50% 0; background:#ddd; overflow:hidden;} #sprachenButt a {display:block; padding:0;} #sprachenButt a img {width:45px; height:45px; margin:-5px 0 0 -5px; filter:invert(1);} #sprachenWrap {position:absolute; display:block; z-index:11; top:0; left:-55px; padding:15px; border-radius:0 0 15px 0; background:#fff; transition:left .5s;} #sprachenWrap.sprachmenu {left:0; transition:left .5s;} #sprachenWrap a {position:-webkit-sticky; position:sticky; top:0; left:0; display:block; padding:0 0 5px; color:var(--customStartLangLink);} #sprachenWrap a:last-child {padding:0;} #sprachenWrap img.flag {width:25px; height:25px; border-radius:50%; overflow:hidden; opacity:.5;} #sprachenWrap a.spracheAktiv img.flag {opacity:1;} #somWrap {position:absolute; display:block; z-index:10; width:min(35px,6vw); height:15vh; top:0; right:0;} #somWrap a {position:-webkit-sticky; position:sticky; width:min(35px,6vw); height:min(35px,6vw); top:0; display:block; padding:0; border-radius:0 0 0 25%; overflow:hidden; background:#2c4f9e;} #somWrap a img {width:100%; height:100%;} #logo {position:relative; display:grid; width:100vw; max-width:1500px; height:30vh; margin:0 auto; justify-content:center; align-content:end;} #logo img {width:min(280px,50vw); height:auto;} #tickerWrap {position:relative; display:block; width:100vw; max-width:min(1000px,1000vw); margin:10vh auto; text-align:center; overflow-y:hidden;} #ticker {width:100%; height:30px;overflow:hidden; position:relative; display:grid; border-left:1px solid #eee; border-right:1px solid #eee; align-items:center;} #ticker-text, #ticker-text-clone {white-space:nowrap; position:absolute; top:0; left:0; font-size:18px; line-height:30px;} #introWrap {position:relative; display:grid; width:100vw; max-width:min(850px,1000vw); min-height:20vh; margin:10vh auto 5vh;} #intro {position:relative; display:block; padding:0 10px; font-size:clamp(.9em,1.6vw,1.2rem); line-height: clamp(1.6em,2.5vw,1.9rem); font-weight:450; max-width:90%; justify-self:center;} #heroWrap {position:relative; display:grid; width:100vw; margin:0; background:#fff; justify-content:center;} #hero {position:relative; display:block; width:100vw; max-width:min(1500px,1000vw);} #hero img {width:100%; height:100%; object-fit:cover;} .heroHoch {display:block;} .heroQuer {display:none;} .block {position:relative; display:grid; width:100%; max-width:min(100vw,450px); padding:10vh 0; margin:0 auto; grid-template-columns:1fr; grid-gap:20px; align-items:start; border-bottom:5px solid #ddd;} .blockHl {position:relative; display:block; width:100%; margin:0; text-align:left;} .blockBild {width:100%; height:auto; object-fit:cover;} .blockText ul {margin:15px 0 0 15px;} .blockText ul li {margin:3px 0;} .block:last-child {padding-bottom:0; border:none;} .wrap {position:relative; display:block; width:100vw; margin:10vh 0; padding:0 10px;} #wir {position:relative; display:block; width:100%; max-width:min(850px,100vw); margin:10vh 0 20px;} .wir600 {position:relative; display:block; width:600px; max-width:90%; left:0;} #team {position:relative; display:block; width:100%; max-width:min(100vw,850px); margin:5vh auto;} #teamGrid {position:relative; display:flex; gap:40px 30px; flex-wrap:wrap; align-items:flex-start;} .teamBild {width:100%; height:100%; object-fit:cover;} .team {flex:0 0 100%; display:grid; width:100%; grid-gap:0;} /*.team:last-child {flex:0 1 calc(50% - 15px); margin:0 auto;}*/ .teamText {padding:20px 10px 0; border-left:1px solid #ccc;} .teamHl {margin:0; padding:10px 10px 10px 10px; border-left:1px solid #ccc;} iframe {position:relative; display:block; width:100%; height:100%;} #kontaktWrap {position:relative; display:grid; width:100%; max-width:1000px; margin:0 auto; grid-template-columns:1fr; grid-gap:40px;} .kontakt > a {padding:0;} .kontakt > a img {display:block; width:25px; height:25px; background:#2c4f9e;} h2.wowann {position:relative; display:block; max-width:1000px; margin:0 auto 20px;} .wrpstyle_team {padding:10vh 10px; background:#fff;} .wrpstyle_foot {margin-bottom:0; padding:10px; background:#fff;} #foot {width:100%; max-width:1000px; margin:0 auto; text-align:center; color:var(--ciFarbe2);} #foot * {font-size:.8rem; font-weight:400; color:var(--ciFarbe2);} #foot a {color:#222;} .wrap.spitz {margin:0; background:#fff;} .wrap.spitz img {position:relative; display:block; width:100%; max-width:1500px; margin:0 auto;} /* ******************************************* */ /* MEDIAQUERIES */ /* ******************************************* */ a {padding:0 5px; text-underline-offset:3px; text-decoration-thickness:1px; text-decoration-color:#ccc; color:var(--ciFarbe2);} @media(hover:hover) and (pointer:fine) { a:hover {text-decoration:none; box-shadow:0 0 15px 0 #ccc; border-radius:5px; background:#fff;} #overlayClose:hover {cursor:pointer; color:#fff; background:var(--ciFarbe2);} .kontakt > a:hover {padding:0; text-decoration:none; background:#2c4f9e;} #sprachenWrap a:hover,#sprachenButt a:hover {background:#ffffff00; box-shadow:none;} #sprachenWrap a:hover img.flag {opacity:1;} } @media screen and (min-width:500px){ .team {flex:1 1 calc(100%/3 - 60px/3);} } @media screen and (min-width:725px){ #overlayClose {left:calc(50vw + 290px);} .heroHoch {display:none;} .heroQuer {display:block;} } @media screen and (min-width:850px){ .block {grid-template-columns:1fr 1fr; grid-template-rows:auto 1fr; grid-gap:20px; align-items:start;} .blockHl {grid-column-start:1; grid-column-end:2; grid-row-start:1; grid-row-end:2; text-align:right;} .blockBild {grid-column-start:1; grid-column-end:2; grid-row-start:2; grid-row-end:3; position:-webkit-sticky; position:sticky; top:0;} .blockText {grid-column-start:2; grid-column-end:3; grid-row-start:1; grid-row-end:3;} .team:last-child {flex:1 1 calc(100%/3 - 60px/3); margin:0;} .wrpstyle_team {padding:5vh 10px;} .wir600 {left:calc(50vw - 850px/2 );} #kontaktWrap {grid-template-columns:300px 1fr;} } @media screen and (min-width:860px){ .wir600 {left:calc(50vw - 850px/2 - 10px);} .block {max-width:min(100vw,850px)} } .cookie-banner { bottom: 0px; color: white; z-index: 200; padding: 10px; position: sticky; } .cookie-banner-show { display: block !important; opacity: 1; animation: fadein 0.4s linear; } .cookie-banner-hide { display: none !important; opacity: 0; animation: fadeout 0.4s linear; }