/* convergent */

/* Layout */

*, ::before, ::after { box-sizing: border-box; }

.flex {
    display: flex;
}

#wrapper { margin: 0 1rem; }

@media (max-width:600px) {
#wrapper { margin: 0; }
}

/* Header */

#header {
    margin: 0 15px;
}

@media (min-width:600px) {
#header {
    margin: 0 30px;
}
}

@media (min-width:1259px) {
#header {
    margin: 0 auto;
    max-width: 1200px;
}
}

#header .inside {
    margin-top: 3rem;
    margin-bottom: 6rem;
}

@media (max-width:760px) {
#header .inside {
    margin-bottom: 3rem;
}
}

.header-container {
    justify-content: space-between;
    margin-bottom: 2rem;
}

@media (min-width:601px) {
.logo {
    margin-left: auto;
    margin-right: auto;
}
}

/* Hauptbereich */

#container { margin-bottom: 6rem; }
.hero { margin-bottom: 6rem; }

@media (max-width:760px) {
#container { margin-bottom: 3rem; }
.hero { margin-bottom: 3rem; }
}

@media (min-width:2032px) {
.hero {
    max-width: 2000px;
    margin-left: auto;
    margin-right: auto;
}
.hero img { width: 100%; }
}

.content-text, .content-headline, .mod_rocksolid_slider, .cards, .nav-boxes, .ce_accordion, .ce_download, .ce_downloads, .ce_gallery, .ce_image, .docu h1, .docu h2, .docu h3, .docu h4, .docu h5, .docu h6, .docu p, .docu ol, .docu ul {
    margin-left: 15px;
    margin-right: 15px;
}
.hero .ce_image {
    margin-left: -15px;
    margin-right: -15px;
    max-width: none;
}

@media (min-width:600px) {
.content-text, .content-headline, .mod_rocksolid_slider, .cards, .nav-boxes, .ce_accordion, .ce_download, .ce_downloads, .ce_gallery, .ce_image, .docu h1, .docu h2, .docu h3, .docu h4, .docu h5, .docu h6, .docu p, .docu ol, .docu ul {
    margin-left: 30px;
    margin-right: 30px;
}
}

@media (min-width:1259px) {
.content-text, .ce_image, .content-headline, .mod_rocksolid_slider, .cards, .nav-boxes, .ce_accordion, .ce_download, .ce_downloads, .ce_gallery, .docu h1, .docu h2, .docu h3, .docu h4, .docu h5, .docu h6, .docu p, .docu ol, .docu ul {
    margin-left: auto;
    margin-right: auto;
    max-width: 1200px;
}

.hero .ce_image {
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
}
}

@media (min-width:960px) {
.content-text p, .content-text h1, .content-text h2, .content-text h3, .content-text h4, .content-text h5, .content-text h6, .content-headline, .content-text ul, .content-text ol, .content-text.book, .ce_divider, .ce_image, .ce_accordion, .ce_download, .ce_downloads, .ce_gallery, .docu h1, .docu h2, .docu h3, .docu h4, .docu h5, .docu h6, .docu p, .docu ol, .docu ul {
    margin-left: auto;
    margin-right: auto;
    max-width: 870px;
}

.content-text.introline p {
    margin-left: auto;
    margin-right: auto;
    max-width: none;
}
}

.mod_rocksolid_slider {
    padding-top: 1rem;
}

.referenz .mod_rocksolid_slider {
    border-radius: 16px;
    padding: 1.5rem;
}

.logo-slider-container .mod_rocksolid_slider {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.logo-slider-container .mod_rocksolid_slider img {
    height: 80px;
    max-height: 80px;
}

.slide-blue { background: var(--convergent-bluegreen-lightest); }
.slide-green { background: var(--convergent-green-lightest); }
.slide-grey { background: var(--convergent-grey-lightest); }

.mod_rocksolid_slider .quote p::before {
    color: var(--convergent-bluegreen);
    content: "„";
    font-size: 1.5rem;
    line-height: 0.1;
    margin-left: -0.8rem;
    padding-right: 0.25rem;
}

.mod_rocksolid_slider .quote p::after {
    color: var(--convergent-bluegreen);
    content: "“";
    font-size: 1.5rem;
    line-height: 0.1;
    padding-left: 0.25rem;
}

/* Rocksolid Slider Nav über Slides und zentriert */
.rsts-skin-default-content .rsts-nav {
    left: 25%;
    padding: 0;
    position: absolute;
    right: 25%;
    top: -50px;
}

/* Überschrift über Slider wegen Pos Nav mit margin-bottom */
.slider h1, .slider h2, .slider h3, .slider h4, .slider h5, .slider h6 {
    margin-bottom: 60px;
}

.referenz-box h1, .referenz-box h2, .referenz-box h3, .referenz-box h4, .referenz-box h5, .referenz-box h6 {
    margin-bottom: 10px;
}

@media (max-width:760px) {
.rsts-skin-default-content .rsts-nav {
    left: 0;
    right: 0;
    top: -40px;
}
}

.rsts-skin-default-content .rsts-nav-bullets .rsts-nav-item a {
    display: inline-block;
    width: 9px;
    height: 9px;
    overflow: hidden;
    margin: 12px 4px;
    border: 1px solid var(--convergent-grey-light);
    border-radius: 100%;
    outline: none;
    text-align: left;
    text-indent: -999px;
    background-color: #fff;
    background-color: rgba(255,255,255,0.8);
    background-clip: padding-box;
    box-shadow: none;
}

.rsts-skin-default-content .rsts-nav-bullets .rsts-nav-item a:hover, .rsts-skin-default-content .rsts-nav-bullets .rsts-nav-item a.active {
    background-color: #79b928;
    border: none;
    box-shadow: none;
}
.rsts-skin-default-content .rsts-nav-prev a, .rsts-skin-default-content .rsts-nav-next a {
  border: none;
  box-shadow: none;
}

.rsts-skin-default-content .rsts-nav-prev a {
    background-image: url(../systemgrafiken/arrow-left.svg);
    background-size: 20px, 20px;
    background-repeat: no-repeat;
    height: 30px;
    width: 20px;
}

.rsts-skin-default-content .rsts-nav-prev a:hover {
    background-image: url(../systemgrafiken/arrow-left-hover.svg);
    background-color: transparent;
}

.rsts-skin-default-content .rsts-nav-next a {
    background-image: url(../systemgrafiken/arrow-right.svg);
    background-size: 20px, 20px;
    background-repeat: no-repeat;
    height: 30px;
    width: 20px;
}

.rsts-skin-default-content .rsts-nav-next a:hover {
    background-image: url(../systemgrafiken/arrow-right-hover.svg);
    background-color: transparent;
}

@media (max-width:320px) {
.rsts-nav-item { display: none !important; }
.rsts-nav-prev { margin-right: 50px; }
.rsts-nav-next { margin-left: 50px; }
}

p { margin-bottom: 2rem; }

.contact-container {
    background: var(--convergent-grey-lightest);
    padding: 2rem;
}

@media (max-width:599px) {
.contact-container {
    padding: 15px;
}
}

.contact-container .ce_form, .contact-container .flex-item-container {
    width: 47.5%;
} 

.contact-container .ce_form {
    margin-right: 5%;
}

.box {
    padding: 1rem;
}

.box .content-headline, .box .content-text {
    margin-left: 0;
    margin-right: 0;
}

.grey {
    background: var(--convergent-grey-neutral);
    color: var(--convergent-white);
}


@media (max-width:999px) {

.contact-container {
    display: block;
}

.contact-container .ce_form, .contact-container .flex-item-container {
    width: 100%;
}

.contact-container .ce_form {
    border-bottom: 1px dotted var(--convergent-grey);
    margin-bottom: 3rem;
    padding-bottom: 3rem;
}
}

.no-side-margin {
    margin-left: 0;
    margin-right: 0;
}

form .widget { margin-bottom: 1rem; }

form .widget label {
    display: block;
    font-size: 80%;
}
form .widget input, form .widget textarea {
    display: block;
    width: 100%;
}

form .widget input.text, form .widget textarea {
    font-family: "Noto Sans", Lucida Sans, Verdana, Helvetica, Arial, sans-serif;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
 }

form .widget input.text, form .widget textarea {
    font-family: "Noto Sans Display";
    font-size: 1rem;
    font-style: normal;
    font-weight: 300;
}

form .widget input.text, form .widget textarea { padding: 1rem; }

span.mandatory { color: var(--convergent-bluegreen); }

button { cursor: pointer; }

.button a, button, a.button {
    font-family: "Noto Sans", Lucida Sans, Verdana, Helvetica, Arial, sans-serif;
    font-size: 100%;
    font-style: normal;
    font-weight: 400;
    text-transform: uppercase;
}
.button a, button, a.button {
    font-family: "Noto Sans Display", Lucida Sans, Verdana, Helvetica, Arial, sans-serif;
    font-size: 100%;
    font-style: normal;
    font-weight: 300;
    text-transform: uppercase;
}

.button, button, a.button {
    background-color: var(--convergent-green);
    border: none;
    color: var(--convergent-white);
    margin-bottom: 0.5rem;
    padding: 0.7rem 1rem;
    text-decoration: none;
    text-transform: uppercase;
    width: max-content;
}

.button:hover, button:hover {
    background-color: var(--convergent-bluegreen);
    border: none;
    transition-property: background-color;
    transition-duration: 0.5s;
}

.grey .button:hover, .grey button:hover {
    background-color: var(--convergent-bluegreen);
    border: none;
    transition-property: background-color;
    transition-duration: 0.5s;
}

.grey .button a { color: var(--convergent-white); }
.grey .button a:link { color: var(--convergent-white); }
.grey .button a:visited { color: var(--convergent-grey-white); }
.grey .button a:hover { color: var(--convergent-white); }
.grey .button a:focus { color: var(--convergent-white); }
.grey .button a:active { color: var(--convergent-white); }

/* Trennlinie */

.ce_divider {
	display: block;
    margin-top: 3.5rem;
	overflow: hidden;
	padding-bottom: 1.5rem;
	width: 100%;
}

.ce_divider hr {
    display: block;
    border: 0;
    border-top: 1px dotted #1f2023;
    height: 1px;
}

/* Cards */

.flex.cards {
    display: flex;
    flex-wrap: wrap;
    column-gap: 1rem;
}

.flex.cards .card {
    border: 1px solid var(--convergent-grey-light);
    border-radius: 8px;
    flex: auto;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    margin: 0;
    margin-bottom: 1rem;
    min-height: 340px;
    padding: 2rem 1rem;
    text-align: center;
    width: 45%;
}

@media (max-width:800px) {
.flex.cards .card {
    width: 45%;
}
}

@media (max-width:550px) {
.flex.cards .card {
    width: 100%;
}
}

.card .figure {
    width: 100%;
    margin: 0 0 2rem 0;
}

.card.soft-facts figure, .card.hard-facts figure,
.card.greyscale figure {
    display: flex;
    justify-content: center;
    margin: 0 0 2rem 0;
    width: 100%;
}

.cards .greyscale img, .logo-slider.greyscale img {
    max-height: 80px;
    width: auto;
    filter: grayscale(1);
}

.cards .greyscale img:hover, .logo-slider.greyscale img:hover {
    filter: grayscale(0);
    transition: 1s;
}

@keyframes pulse {
0% { opacity: .2; transform: scale(1.0); }
50% { opacity: 1; transform: scale(1.2); }
100% { opacity: .2; transform: scale(1.0); }
}

.cards .pulse img:hover {
animation-name: pulse;
animation-duration: 2s;
animation-iteration-count: infinite;
} 

@keyframes rotating {
  0%  { transform: rotate(0);}
  100%{ transform: rotate(1turn);}
}

.cards .yay img:hover { 
  animation: rotating 1s linear infinite;
}

.cards p {
    align-self: flex-start;
    display: block;
    width: 100%;
}

.soft-facts img, .hard-facts img { margin-bottom: 1rem; }

@media (max-width:760px) {
.flex.cards .card.soft-facts { width: 100%; }
}

.box {
    border: 1px solid var(--convergent-grey-light);
    border-radius: 8px;
    margin-top: 0;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1rem;
    max-width: 870px;
    padding: 2rem 1rem;
}

.with-icon p, .with-icon ul {
    margin-left: 115px;
}

.with-icon figure {
    float: left;
}

.book {
    background: url(../../convergent-inhalt/book-green.svg) no-repeat;
    background-size: 75px;
    background-position: 1rem 2rem;
    border: 1px solid var(--convergent-grey-light);
    border-radius: 8px;
    margin: 0;
    margin-bottom: 1rem;
    padding: 2rem 1rem;
}

.book p { padding-left: 100px; }

@media (max-width:600px) {
.book {
    background: url(../../convergent-inhalt/book-green.svg) no-repeat;
    background-size: 50px;
    background-position: 1rem 2rem;
    border: 1px solid var(--convergent-grey-light);
    border-radius: 8px;
    margin: 0 1rem;
    margin-bottom: 1rem;
    padding: 2rem 1rem;
}

.book p { padding-left: 70px; }

}

@media (max-width:450px) {
.book {
    background: url(../../convergent-inhalt/book-green.svg) no-repeat;
    background-size: 30px;
    background-position: 1rem 2rem;
    border: 1px solid var(--convergent-grey-light);
    border-radius: 8px;
    margin: 0 1rem;
    margin-bottom: 1rem;
    padding: 2rem 1rem;
}

.book p { padding-left: 50px; }

}

.k-icon {
    background: url(../systemgrafiken/K.svg) no-repeat;
    background-size: contain;
}

.e-icon {
    background: url(../systemgrafiken/E.svg) no-repeat;
    background-size: contain;
}

.s-icon {
    background: url(../systemgrafiken/S.svg) no-repeat;
    background-size: contain;
}

.p-icon {
    background: url(../systemgrafiken/P.svg) no-repeat;
    background-size: contain;
}

.k-icon, .e-icon, .s-icon, .p-icon {
    background-color: var(--convergent-grey);
    color: var(--convergent-white);
}

.k-icon:hover, .e-icon:hover, .s-icon:hover, .p-icon:hover {
    background-color: var(--convergent-bluegreen);
}

.flex-item:nth-child(1) {
     flex-grow: 0;
     flex-shrink: 1;
     flex-basis: 25%;
}

.flex-item:nth-child(2) {
     flex-grow: 0;
     flex-shrink: 1;
     flex-basis: 25%;
}

.flex-item:nth-child(3) {
     flex-grow: 0;
     flex-shrink: 1;
     flex-basis: 25%;
}

.flex-item:nth-child(4) {
     flex-grow: 0;
     flex-shrink: 1;
     flex-basis: 25%;
}

.flex-item:nth-child(5) {
     flex-grow: 0;
     flex-shrink: 1;
     flex-basis: 25%;
}

.flex-item:nth-child(6) {
     flex-grow: 0;
     flex-shrink: 1;
     flex-basis: 25%;
}

.flex-item:nth-child(7) {
     flex-grow: 0;
     flex-shrink: 1;
     flex-basis: 25%;
}

.flex-item:nth-child(8) {
     flex-grow: 0;
     flex-shrink: 1;
     flex-basis: 25%;
}

.flex-item:nth-child(9) {
     flex-grow: 0;
     flex-shrink: 1;
     flex-basis: 25%;
}

.flex-item:nth-child(10) {
     flex-grow: 0;
     flex-shrink: 1;
     flex-basis: 25%;
}

/* Slider */
.logo-slide {
  margin: 0px 20px;
}

.logo-slider {
  overflow: inherit;
  border-top: 1px solid #353535;
  border-bottom: 1px solid #353535;
}

.logo-slide img {
  width: 100%;
}

.logo-track::before,
.logo-track::after {
  display: table;
  content: '';
}

.logo-track::after {
  clear: both;
}

.logo-track {
  padding: 1rem 0;
}

.logo-loading .logo-track {
  visibility: hidden;
}

.logo-slide.logo-loading img {
  display: none;
}

.logo-slide.dragging img {
  pointer-events: none;
}

.logo-loading .slick-slide {
  visibility: hidden;
}

.logo-arrow {
  position: absolute;
  top: 50%;
  background: url(https://raw.githubusercontent.com/solodev/infinite-logo-carousel/master/images/arrow.svg?sanitize=true) center no-repeat;
  color: #fff;
  filter: invert(77%) sepia(32%) saturate(1%) hue-rotate(344deg) brightness(105%) contrast(103%);
  border: none;
  width: 2rem;
  height: 1.5rem;
  text-indent: -10000px;
  margin-top: -16px;
  z-index: 99;
}

.logo-arrow.slick-next {
  right: -40px;
  transform: rotate(180deg);
}

.logo-arrow.slick-prev {
  left: -40px;
}

/* Media Queries */

@media (max-width: 768px) {
  .logo-arrow {
    width: 1rem;
    height: 1rem;
  }
}
  
.logo-slider-container {
  overflow: hidden;
}  

/* Footer */

#footer {
    background: var(--convergent-grey-lightest);
    margin-left: -1rem;
    margin-right: -1rem;
    padding-top: 5rem;
    padding-bottom: 5rem;
}

#footer .inside {
    margin: 0 2rem;
    padding: 0 0 2rem 0;
}

@media (min-width:1259px) {
#footer .inside {
    margin: 0 auto;
    max-width: 1200px;
}
}

.footer {
    justify-content: space-between;
}

.footer-nav, .social-media {
    margin-bottom: 3rem;
}

@media (max-width:700px) {
#footer .flex { display: block; }

.footer-nav, .social-media {
    display: block;
    text-align: center;
    width: 100%;
}
}
.footer .logo {
    max-width: 160px;
    height: auto;
    margin-bottom: 3rem;
}

.copyright {
    max-width: max-content;
    margin: 0 auto;
}

/* Bilder etc. */

img {
    max-width: 100%;
    height: auto;
}

.ce_youtube {
    background: var(--convergent-green-light);
    margin-top: 3rem;
    margin-bottom: 3rem;
    padding-top: 3rem;
    padding-bottom: 7rem;
    text-align: center;
}

.video_container {
    position: relative;
	padding-bottom: 56%;
	padding-top: 60px;
	height: 0;
	overflow: hidden;
}

.video_container iframe {
	position: absolute;
	top: 0;
	left: 2%;
    right: 2%;
	width: 96%;
	height: 96%;
}

/* Opt In */

.opt-in-fallback {
    background-color: var(--convergent-grey-lightest);
    border: 2px solid var(--convergent-grey-medium);
    border-radius: 5px;
    margin-bottom: 1rem;
    max-width: 870px;
    padding: 1rem;
    text-align: center;
}
.opt-in-fallback a { font-weight: 400 !important; }
.mod_article .opt-in-fallback {
    margin-left: auto;
    margin-right: auto;
}

.cms-cookie-bar > .cms-container, .cms-accept-tags > .cms-container {
    border-radius: 5px;
}


/* Dokumentation: Layout & Typografie */

.docu :is(h1, h2, h3, h4, h5, h6, p, ol, ul, .table, .flex) {
  margin-inline: 15px;
}

@media (min-width: 600px) {
  .docu :is(h1, h2, h3, h4, h5, h6, p, ol, ul, .table, .flex) {
    margin-inline: 30px;
  }
}
@media (min-width: 960px) {
  .docu :is(h1, h2, h3, h4, h5, h6, p, ol, ul, .table, .flex) {
    margin-inline: auto;
    max-width: 870px;
  }
}

/* Schriftgrößen und Zeilenabstände */
.docu h1 { font-size: 1.75rem; }
.docu h2 { font-size: 1.5rem; }
.docu h3 { font-size: 1.25rem; }
.docu :is(h4, h5, h6) { font-size: 1rem; }

.docu :is(p, ol, ul, .table) {
  font-size: 1rem;
  line-height: 1.75;
}

.docu ol li,
.docu ul li {
  line-height: 1.75;
  margin-bottom: 1rem;
}

/* Abstände und Rahmen */
.docu section {
  border-bottom: 1px dotted var(--convergent-grey);
  margin-bottom: 4rem;
  padding-bottom: 4rem;
}

.docu hr {
  border: none;
  border-bottom: 1px dotted var(--convergent-grey);
  margin-bottom: 4rem;
  padding-bottom: 2rem;
}

.docu blockquote p {
  background-color: var(--convergent-green-lightest);
  padding: 1rem;
}

h3#web-app,
h3#print,
h3#praesentation-office,
h3#social-media,
.flex + h3 {
  margin-top: 2rem;
}

.margin-tb {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

/* Tabellen */
.docu .table th,
.docu .table td {
  border: 1px dotted var(--convergent-green);
  padding: 0.5rem;
  text-align: left;
}

/* Flexbox-Komponenten */
.docu .flex {
  display: flex;
  flex-wrap: nowrap;
  gap: 1rem;
}
.docu .flex-item {
  flex: 1 1 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--convergent-grey-medium);
  padding: 1rem;
}
.docu .flex-item img {
  width: 100%;
  height: auto;
  object-fit: contain;
}
.item-half { max-width: 435px; }
.item-full { max-width: 870px; }

/* Buttons */
.docu p.btn {
  margin-left: 0;
}
.docu a.button {
  font-family: "Noto Sans Display", Lucida Sans, Verdana, Helvetica, Arial, sans-serif;
  font-size: 100%;
  font-style: normal;
  font-weight: 300;
  text-transform: uppercase;
  background-color: var(--convergent-green);
  border: none;
  color: var(--convergent-white);
  margin-bottom: 0.5rem;
  padding: 0.7rem 1rem;
  text-decoration: none;
  width: max-content;
  transition: background-color 0.5s ease;
}
.docu a.button:hover {
  background-color: var(--convergent-bluegreen);
  color: var(--convergent-white);
}