/* Variablen */
:root {
	interpolate-size: allow-keywords;
	accent-color: #30a4a2;
  --color-cyan: #30a4a2;
  --color-lila: #8277B1;
  --color-lila-dunkel: #685E98;
  --color-lila-transparent: rgba(130,119,177,.85);
  --color-lila-transparent-hell: rgba(189,181,225,.8);
  --color-black: #222;
  --color-grey: #f4f4f4;
  --color-grey-font: #666;
}

/* Reset */
*, *::before, *::after 				      { -webkit-box-sizing: border-box; box-sizing: border-box; }
html 								                { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-tap-highlight-color: transparent; } 
html,body,li,h1,h2,h3,h4,h5,h6,p,ul,ol,figure,blockquote { margin: 0; padding: 0; }
b, strong 							            { font-weight: 500; } 
img 								                { border-style: none; max-width: 100%; height: auto; }
button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; }
button, input 						          { overflow: visible; }
.hide 								              { display: none !important; }
h1,h2,h3,h4,h5,h6,p,li,td           { font-size: 16px; font-weight: 200; line-height: 1; }
img                                 { max-width: 100%; height: auto; }
img.fit                             { width: 100%; height: 100%; object-fit: cover; }
picture                             { line-height: 0; }
.relative                           { position: relative; }
.absolute                           { position: absolute; z-index: 1000; }
.no-overflow                        { overflow: hidden; }

/* Schriftbild */
body						                    { -webkit-font-smoothing: antialiased; font-family: 'Faustina', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-weight: 300; color: var(--color-black); }
a 								                  { color: var(--color-lila); }
.presite a                          { color: var(--color-cyan); }
li::marker                          { content: none; }
::-moz-selection                    { color: white; background: var(--color-lila); }
::selection                         { color: white; background: var(--color-lila); }
.invert ::-moz-selection            { color: var(--color-lila); background: white; }
.invert ::selection                 { color: var(--color-lila); background: white; }
span.no-wrap                        { word-break: keep-all; }
.uppercase                          { text-transform: uppercase; }
.italic                             { font-style: italic; }
.vertical-trim                      { transform: translateY(-.1em); }
.meta                               { font-size: .9em; color: var(--color-grey-font); }

/* Schriftgrößen */
p, .p, li, dt  						          { line-height: 1.5; text-wrap: pretty; font-size: 18px; }
p a:not(.btn)                       { text-underline-offset: .2em; }
.h1,.h2,.h3,.h4,.h5,.h6             { text-wrap: balance; font-weight: 300; line-height: 1.2; font-family: 'FiraGO', 'Faustina', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color: var(--color-lila); text-transform: uppercase; }
.h1                                 { font-size: 28px; letter-spacing: -1px; }
.h2                                 { font-size: 26px; }
.h3                                 { font-size: 24px; }
.h4                                 { font-size: 22px; }
.h5                                 { font-size: 22px; }
.h6                                 { font-size: 22px; }
@media only screen and (min-width: 850px) {
p, .p, li, dt  						          { font-size: 20px; }
.h1                                 { font-size: 40px; }
.h2                                 { font-size: 30px; }
.h3                                 { font-size: 28px; }
.h4                                 { font-size: 26px; }
.h5                                 { font-size: 24px; }
.h6                                 { font-size: 22px; }
}

/* Schrift invertieren */
.invert,
.invert .h1, .invert .h2, .invert .h3, .invert .h4, .invert .h5, .invert .h6,
.invert a                           { color: white; }

/* Headline Combo */
.h-combo                            { display: flex; flex-direction: column; gap: 10px; padding: 1em 0 1em 1em; border-left: 4px solid var(--color-lila); }
.h-combo *                          { margin: 0; }
.h-combo .italic                    { color: var(--color-black); text-transform: none; }
@media only screen and (min-width: 850px) {
.h-combo                            { padding: 1em 0 1em 1.2em; }
}

/* Listen */
.text ul li                         { padding-left: .5em; position: relative; }
.text ul li + li                    { margin-top: .5em; }
.text ul li:before                  { content:"\00B7"; position: absolute; left: 0; }

/* Sektion */
.s                                  { padding: 6rem 0; }
.s.no-bg + .s.no-bg                 { padding-top: 0; }
.bg.cyan                            { background-color: var(--color-cyan); }
.bg.lila                            { background-color: var(--color-lila); }
.bg.grey                            { background-color: var(--color-grey); }
.s.s-first                          { padding-top: 0; }
.r.highlight .jobs, .col.highlight .jobs { animation: wobble 1s .5s 2; }
.r.highlight .h-combo, .col.highlight .h-combo { border-left-color: var(--color-cyan); transform-origin: left center; animation: wobble 1s .5s 2; }
.r.highlight .h-combo .h1, .col.highlight .h-combo .h1 { color: var(--color-cyan); }
@media only screen and (min-width: 850px) {
.s.s-first                          { padding-top: 9rem; }
}

/* Row */
.r + .r                             { margin-top: 3rem; }

/* Buttons */
a.btn                               { cursor: pointer; position: relative; overflow: hidden; font-weight: 500; text-decoration: none; line-height: 1; z-index: 0; display: inline-flex; align-items: center; padding: 12px 26px 14px 26px; border: 2px solid var(--color-lila); color: white; background-color: var(--color-lila); border-radius: 30px; }
.presite a.btn                      { border-color: var(--color-cyan); background-color: var(--color-cyan); }
a.btn:hover                         { border-color: var(--color-lila-dunkel); }
.presite a.btn:hover                { color: var(--color-cyan); background-color: white; border-color: var(--color-cyan); }
.btn.primary:before                 { content: ""; background-color: var(--color-lila-dunkel); width: 40px; height: 60px; left: 0; z-index: -1; position: absolute; clip-path: polygon(0 0, 50% 0, 100% 50%, 50% 100%, 0 100%); transition: all .3s; }
.presite .btn.primary:before        { content: none; }
.btn.primary:hover:before           { width: 100%; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
.invert .btn                        { border-color: white; background: transparent; }
.invert .btn:before                 { content: none; }
.invert .btn:hover                  { border-color: white; background-color: white; color: var(--color-cyan); }
@media only screen and (min-width: 42.5em) {
a.btn.big                           { font-size: 1.2em; }
}

/* Tel & Email */
.text a.link[href^="tel:"], .text a.link[href^="mailto:"] { font-weight: 500; color: var(--color-black); word-break: break-all; }
.text a.link[href^="tel:"]:hover, .text a.link[href^="mailto:"]:hover { color: var(--color-lila); }

/* Abstände */

.text ul + .h6,
.media + .media,
.text + .text,
.text + .media,
.media + .text                      { margin-top: 2em; }
.h-combo + .media,
.text * + ul,
* + .hl,
* + p                               { margin-top: 1em; }

/* Media */
.media                              { position: relative; }
.media p                            { margin: 0; }
img.roundy, .media.roundy picture img { border-radius: 10px; }
.media.thumbnail                    { width: 200px; }

/* Play Btn */
.media .play-btn                    { display: flex; cursor: pointer; align-items: center; justify-content: center; position: absolute; z-index: 1000; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 60px; height: 60px; background-color: var(--color-lila-transparent); border-radius: 100%; transition: width .3s, height .3s; padding: 0; }
.media .play-btn:hover              { width: 70px; height: 70px; }
.media .play-btn svg                { width: 18px; height: 24px; transform: translateX(3px); }
@media only screen and (min-width: 42.5em) {
.media .play-btn                    { width: 80px; height: 80px; }
.media .play-btn:hover              { width: 100px; height: 100px; }
.media .play-btn svg                { width: 30px; height: 40px; }
}

/* Mobile br */
@media only screen and (max-width: 42.5em) {
    span.mobile-br                  { display: block; width: 0; height: 0; overflow: hidden; }
}

/* Header */
#header .b                           { padding: 2em 0; max-width: none; transition: all .5s; } 
#col-navi,
#logopic                             { transition: all .3s; }
@media only screen and (min-width: 850px) {
#header                              { position: fixed; width: 100%; background-color: white; z-index: 2000; }
#logopic                             { max-width: 260px; }
.scrolled #header                    { border-bottom: 2px solid var(--color-grey); }
.scrolled #header .b                 { padding: .5em 0; }
.scrolled #logopic                   { max-width: 220px; }
}

/* Burgericon */
#burger                              { position: absolute; z-index: 3000; right: 1.5em; transform: translateY(-50%); display: flex; gap: 6px; flex-direction: column; cursor: pointer; }
.mn-open #burger                     { position: fixed; }
#burger .line                        { position: relative; width: 40px; height: 5px; background-color: var(--color-black); border-radius: 1px; transition: all .3s; transform-origin: center; }
.mn-open #burger .line-1             { transform: translateY(11px) rotate(45deg); }
.mn-open #burger .line-2             { opacity: 0; }
.mn-open #burger .line-3             { transform: translateY(-11px) rotate(-45deg);}
.mn-open #col-navi                   { transition: opacity .5s; pointer-events: auto; display: flex; opacity: 1; position: fixed; z-index: 2000; top: 0px; left: 0; width: 100vw; height: 100dvh; background-color: white; align-items: center; justify-content: center; }

/* Mainnavi */
#mn                                  { display: flex; gap: 30px; }
#mn a                                { font-size: 1.2em; }
.mn-link                             { text-decoration: none; font-weight: 500; color: var(--color-black); font-size: 1em; }
.mn-link:hover                       { color: var(--color-lila); }
@media only screen and (max-width: 850px) {
#mn                                  { flex-direction: column; align-items: center; width: 100%; }
#col-navi                            { opacity: 0; pointer-events: none; height: 0; width: 0; overflow: hidden; }
}
@media only screen and (min-width: 850px) {
#mn                                  { justify-content: end; align-items: center; }
}

/* Swiper */
.swiper                             { overflow: hidden; z-index: 1; display: block; position: relative; }
.swiper-wrapper                     { display: flex; position: relative; width: 100%; height: 100%; box-sizing: content-box; align-items: start; }
.swiper-slide                       { flex-shrink: 0; width: 100%; height: 100%; user-select: none; /*cursor: ew-resize;*/ }
.swiper.swiper-autoheight .swiper-slide { height: auto; }

.swiper-button-next, .swiper-button-prev { cursor: pointer; position: absolute; top: 0; width: 100px; height: 300px; display: flex; align-items: center; justify-content: center; z-index: 1000; }
.swiper-button-next svg, .swiper-button-prev svg { width: 60px; height: 60px; fill: var(--color-lila-dunkel); }
.swiper-button-disabled             { display: none; }
.swiper-button-next                 { right: 0; background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,.9) 70%); }
.swiper-button-prev                 { left: 0; background: linear-gradient(to left, rgba(255,255,255,0), rgba(255,255,255,.9) 70%); } 
.bg.grey .swiper-button-next                 { right: 0; background: linear-gradient(to right, rgba(244,244,244,0), rgba(244,244,244,.9) 70%); }
.bg.grey .swiper-button-prev                 { left: 0; background: linear-gradient(to left, rgba(244,244,244,0), rgba(244,244,244,.9) 70%); } 

.buttons-to-the-edge .swiper-button-next { transform: translateX(2rem); } 
.buttons-to-the-edge .swiper-button-prev { transform: translateX(-2rem); }  
@media only screen and (min-width: 90rem) {
.swiper-button-next, .swiper-button-prev { width: 200px; }
.buttons-to-the-edge .swiper-button-next { transform: translateX(calc(4rem + (100vw - 90rem) / 2 )); } 
.buttons-to-the-edge .swiper-button-prev { transform: translateX(calc( -4rem - (100vw - 90rem) / 2 )); }  
}


/* Heroswiper */
.heroswiper .swiper-slide           { aspect-ratio: 4 / 3; }
.heroswiper .swiper-slide .media,
.heroswiper .swiper-slide img       { width: 100%; height: 100%; object-fit: cover; }
#slogan                             { display: flex; flex-direction: column; gap: 10px; }
#slogan *                           { margin: 0; }
#slogan:after                       { content:""; position: absolute; background-color: var(--color-lila-transparent-hell); left: 0; top: 100%; width: 100%; height: 20px; clip-path: polygon(0 0, 100% 0, 30% 100%); }
@media only screen and (orientation: portrait) {
#slogan                             { padding: 2em; }
.heroswiper .swiper-slide img       { border-radius: 10px 10px 0 0; }
}
@media only screen and (orientation: landscape) {
.heroswiper                         { position: relative; }
#slogan                             { position: absolute; z-index: 1000; padding: 2.5em; bottom: 60px; right: 60px; width: 50vw; max-width: 500px; background-color: var(--color-lila-transparent); }
.heroswiper .swiper-slide           { aspect-ratio: 16 / 7; }
.heroswiper .swiper-slide img       { border-radius: 10px; }
}

/* Boxswiper */
.boxswiper .swiper-wrapper          { cursor: ew-resize; }
.boxswiper .swiper-slide            { line-height: 0; aspect-ratio: 1 / 1; width: 60vw; background-color: var(--color-lila); }
@media only screen and (orientation: portrait) {
.boxswiper                          { padding: 0; }
.boxswiper .swiper-slide            { margin-left: 1.5rem; }
.boxswiper .swiper-slide:last-child { margin-right: 1.5rem; }
}
@media only screen and (orientation: landscape) {
.boxswiper .swiper                  { overflow: visible; }
.boxswiper .swiper-slide            { aspect-ratio: 1 / 1; width: 300px; margin-right: 20px; }
}

/* Teamswiper */
.teamswiper .swiper-wrapper          { cursor: ew-resize; }
.teamswiper .swiper-slide            { line-height: 0; aspect-ratio: 1 / 1; width: 60vw; }
@media only screen and (orientation: portrait) {
.teamswiper                          { padding: 0; }
.teamswiper .swiper-slide            { margin-left: 1.5rem; }
.teamswiper .swiper-slide:last-child { margin-right: 1.5rem; }
}
@media only screen and (orientation: landscape) {
.teamswiper .swiper                  { overflow: visible; }
.teamswiper .swiper-slide            { aspect-ratio: 1 / 1; width: 300px; margin-right: 20px; }
}

/* Logogrid */
.logogrid                           { width: 100%; display: grid; grid-template-columns: 1fr 1fr; justify-content: space-between; }
@media only screen and (orientation: landscape) {
.logogrid                           { grid-template-columns: 1fr 1fr 1fr 1fr; }
}

/* Jobs */
* + .jobs                           { margin: 30px 0; }
.job                                { border: 1px solid var(--color-cyan); background-color: white; overflow: hidden;  }
.job.active                         { background-color: white; }
.job + .job                         { border-top: none; }
.job:first-child                    { border-radius: 10px 10px 0 0; }
.job:last-child                     { border-radius: 0 0 10px 10px; }

.job .details                       { height: 0; overflow: hidden; }
.invert .job .details .btn          { color: white; }
.job.active .details                { padding: 1em; background-color: white; }
.job.active .details *              { color: var(--color-black); }

.job .title                         { cursor: pointer; position: relative; padding: 1.5em 0 1.5em 1em; }
.job .title .hide-xs                { text-transform: none; color: var(--color-grey-font); }
.job.active .title                  { background-color: var(--color-grey); }
.job:hover                          { background-color: var(--color-grey); }
/* .job.active:hover                   { background-color: white; } */
/* .job:hover .title .h5               { color: white; } */
.job .title .h5                     { color: var(--color-cyan); }
/* .job.active .title .h5              { color: white; } */

.job .title:after                   { box-sizing: content-box; width: 15px; height: 15px; line-height: 0; display: flex; align-items: center; justify-content: center; border: 4px solid var(--color-cyan); background-color: var(--color-cyan); border-radius: 100%; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); content: url(/img/plus-minus/plus-white.png); background-position: center center; }
.job.active .title:after            { background-color: var(--color-cyan); border-color: var(--color-cyan); }
.job.active .title:after            { content: url(/img/plus-minus/minus-white.png); border-color: var(--color-cyan); background-color: var(--color-cyan); }

@media only screen and (max-width: 850px) {
.job .title .h5                     { text-transform: none; padding-right: 2em; font-size: 20px; }
}

@media only screen and (min-width: 850px) {
.job .title                         { padding: 2em 0 2em 3em; }
.job .title:after                   { width: 30px; height: 30px; right: 20px; }
.job.active .details                { padding: 3em; }
}

/* Videomodal */
.modal-open #smooth-content         { filter: blur(5px); }
#videomodal                         { position: fixed; display: flex; align-items: center; justify-content: center; z-index: 12000; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255,255,255,.4); }
#videomodal-container               { position: relative; aspect-ratio: 16 / 9; width: 80vw; max-width: 1200px; background-color: var(--color-grey); line-height: 0; }
#videomodal-container video         { background-color: white; }
#videomodal-close                   { cursor: pointer; position: absolute; top: 20px; right: 20px; fill: white; width: 50px; height: 50px; }
#videomodal-close:hover             { fill: var(--color-cyan); }
@media only screen and (orientation: portrait) {
#videomodal-close                   { top: 10px; right: 10px; }
#videomodal-container               { width: 90vw; }
}

/* Footer */
a.social                            { display: flex; gap: 10px; align-items: center; }
.invert svg.socialicon              { fill: white; }
#footer a                           { word-break: break-word; }

/* Faustina Font */
@font-face { font-display: swap; font-family: 'Faustina'; font-style: normal; font-weight: 300; src: url('../fonts/faustina-v20-latin-300.woff2') format('woff2'), url('../fonts/faustina-v20-latin-300.ttf') format('truetype'); }
@font-face { font-display: swap; font-family: 'Faustina'; font-style: normal; font-weight: 400; src: url('../fonts/faustina-v20-latin-regular.woff2') format('woff2'), url('../fonts/faustina-v20-latin-regular.ttf') format('truetype'); }
@font-face { font-display: swap; font-family: 'Faustina'; font-style: normal; font-weight: 500; src: url('../fonts/faustina-v20-latin-500.woff2') format('woff2'), url('../fonts/faustina-v20-latin-500.ttf') format('truetype'); }
@font-face { font-display: swap; font-family: 'Faustina'; font-style: normal; font-weight: 600; src: url('../fonts/faustina-v20-latin-600.woff2') format('woff2'), url('../fonts/faustina-v20-latin-600.ttf') format('truetype'); }
@font-face { font-display: swap; font-family: 'Faustina'; font-style: normal; font-weight: 700; src: url('../fonts/faustina-v20-latin-700.woff2') format('woff2'), url('../fonts/faustina-v20-latin-700.ttf') format('truetype'); }
@font-face { font-display: swap; font-family: 'Faustina'; font-style: normal; font-weight: 800; src: url('../fonts/faustina-v20-latin-800.woff2') format('woff2'), url('../fonts/faustina-v20-latin-800.ttf') format('truetype'); }

/* FiraGO Font */
@font-face { font-display: swap; font-family: 'FiraGO'; font-style: normal; font-weight: 300; src: url('../fonts/FiraGO-Book.woff2') format('woff2'), url('../fonts/FiraGO-Book.woff') format('woff'); }
@font-face { font-display: swap; font-family: 'FiraGO'; font-style: normal; font-weight: 500; src: url('../fonts/FiraGO-Medium.woff2') format('woff2'), url('../fonts/FiraGO-Medium.woff') format('woff'); }

/* Animation */
@keyframes wobble {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}