/* --- Seite: KiJuBei---- */

/* -- Hero Image --- */

.kjb-hero{position: relative}

.kjb-hero::after{
  content:'';
  position: absolute;
  inset:0;
  background:linear-gradient(transparent 55%,#fff 90%)
}

.kjb-hero-img{
  aspect-ratio:2.4;
  object-fit:cover;
}

@media (max-width:600px){
  .kjb-hero-img{
    aspect-ratio:1.1;
  }
}

/* --- Intro ---- */

.kjb-intro{
  text-align:center;
  margin-top:-12.5rem;
}

@media (max-width:1250px){.kjb-intro{margin-top:-10rem}}
@media (max-width:991px){.kjb-intro{margin-top:-8rem}}
@media (max-width:800px){.kjb-intro{margin-top:-5.25rem}}

.kjb-intro-heading span{
  display:table;
  margin:0 auto;
  line-height: 1;
  font-size:4.25rem;
  white-space: nowrap;
  padding:.05em .375em .2em;
  color:#fff;
  background-color:var(--color-highlight);
}

@media (max-width:800px){.kjb-intro-heading span{font-size:3.6rem}}
@media (max-width:600px){.kjb-intro-heading span{font-size:3.2rem}}
@media (max-width:450px){.kjb-intro-heading span{font-size:2.7rem}}

.kjb-intro-heading span.kjb-intro-dz{
  font-family: var(--sans);
  font-weight: 700;
  font-size:1.333rem;
  padding:.25em .75em .35em;
  background-color:var(--color-dark);
  rotate:-3deg;
}

@media (max-width:800px){
  .kjb-intro-heading span.kjb-intro-dz{font-size:1.25rem}
}

.kjb-intro-heading span.kjb-intro-head-2{rotate:-3deg}

.kjb-intro-desc{font-size:1.4rem}
@media (max-width:800px){.kjb-intro-desc{font-size:1.25rem}}

.kjb-intro-desc p{max-width:60ch}

.kjb-intro-desc p:first-child{
  font-weight:700;
  margin:1.35em auto .8em;
}

.kjb-intro-desc p + p{
  font-family: var(--serif);
  font-weight:400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin:0 auto 3.333rem;
}

/* --- Infoboxes ---- */

.kjb-info{margin-bottom:4rem}
@media (max-width:800px){.kjb-info{margin-bottom:3.25rem}}

.kjb-info-box{
  width: 100%;
  padding:2.5rem;
  background-color:var(--color-prime-light);
  border-radius:1rem;
}
@media (max-width:600px){
  .kjb-info-box{padding:2rem 1.75rem}
}

.kjb-info-box-right{
  background-color:#FFEFD8;
  --color-prime:var(--color-highlight);
}

@media (max-width:991px){
  .kjb-info-box-left{margin-bottom:2rem}
}

.kjb-info-box h2{
  font-size:2rem;
  border-bottom:1px solid;
  padding-bottom:.4em;
  margin-bottom:.75em;
}

.kjb-info-box p, .kjb-info-box ul{text-wrap:pretty}

.kjb-info-box ul{
  margin:0 0 2rem 2.5rem;
  padding:0;
  list-style: none;
  display:grid;
  gap:1em 0;
}

.kjb-info-box li{
  position: relative;
  font-weight:600;
}

.kjb-info-box li::before{
  content: '';
  position:absolute;
  left:-2.5rem;
  top:.375rem;
  background-color: var(--color-prime);
  -webkit-mask: url('../assets/pfeil-1.svg') no-repeat center;
  mask: url('../assets/pfeil-1.svg') no-repeat center;
  width: 1.9em;
  height:.95em;
}

/* --- Benefits --- */

.kjb-benefits{
  position:relative;
  z-index: 2;
}

.kjb-benefits .container{max-width:1400px}

.kjb-benefits-heading{text-align:center}

.kjb-benefits-heading h2{
  color:var(--color-dark);
  font-size:2.888rem;
}

.kjb-benefits-heading p{
  font-size:1.4rem;
  font-weight:700;
  color:var(--color-prime);
  margin:1em 0 0;
}

@media (max-width:800px){
.kjb-benefits-heading h2{font-size:2.4rem}
.kjb-benefits-heading p{font-size:1.25rem}
}

.kjb-benefits-items{
  margin:3.5rem 0;
  gap:2rem 0;
}

@media (max-width:800px){
  .kjb-benefits-items{ margin:3.5rem 0 2.5rem}
}

.kjb-benefits-item-icon{
  width:10rem;
  height:10rem;
  background-color:var(--color-prime-2);
  background-image:var(--_bg);
  background-repeat:no-repeat;
  background-position: center;
  background-size:contain;
  box-shadow:0 0 0 10px #fff,0 0 0 12px var(--color-prime);
  border-radius:50%;
  margin:0 auto;
}

.kjb-benefits-item-desc{
  text-align:center;
  color:#fff;
  font-weight:700;
  font-size:1.1rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  white-space: nowrap;
  rotate:-3deg;
  translate:0 -40%;
}

.kjb-benefits-item-desc span{
  display: table;
  margin:0 auto .15em;
  padding:.15em .5em .25em;
  background-color:var(--color-dark);
}

.kjb-benefits-cta{text-align:center}

.kjb-benefits-cta-head{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: var(--serif);
  font-size:1.4rem;
}

@media (max-width:800px){
  .kjb-benefits-cta-head{font-size:1.25rem}
}

.kjb-benefits-cta-head b,.kjb-benefits-cta-head strong{
  -webkit-font-smoothing:auto;
  -moz-osx-font-smoothing:auto;
}

.kjb-benefits-cta-desc{
  color:var(--color-gray);
  text-wrap:pretty;
  max-width:90ch;
  margin:0 auto;
  font-size:.9rem;
}

.kjb-benefits-cta-desc a{
  color:var(--color-highlight)
}

.kjb-benefits-cta .bcs-btn{
  margin:2.25rem auto 3.5rem;
  text-transform: uppercase;
  font-size:1.1rem;
  padding: 1.25rem 2rem;
  border-radius:50vw;
}

/* @media (max-width:800px){
  .kjb-benefits-cta .bcs-btn{font-size:1rem}
} */

/* --- Zitate / Quotes --- */

.kjb-quotes{
  padding:8rem 0 0;
  background:linear-gradient(var(--color-dark) 12rem,var(--color-prime));
  position: relative;
  margin-top:-7rem;
}

.kjb-quotes::before{
  content:'';
  position: absolute;
  background:#fff;
  border-radius:100%;
  clip-path:inset(50% -1rem 0 -1rem);
  inset:0 -15vw;
  translate:0 calc(-100% + 8rem);
}

@media (max-width:800px){
  .kjb-quotes::before{inset:0 -40vw}
}

.kjb-quotes-inner{
  position: relative;
  color:var(--color-prime-3);
  border-bottom:2px solid;
  padding:3.7rem 0 2.25rem;
  margin:6rem 0 5rem;
}

/* Borders at Top */
.kjb-quotes-inner::before,
.kjb-quotes-inner::after{
  content:'';
  height:2px;
  width:calc(50% - 4rem);
  background-color:currentColor;
  position: absolute;
  top:-2px;
}

.kjb-quotes-inner::after{
  right:0;
  left:auto;
}

.kjb-quotes-icon{
  position: absolute;
  top:-2.5rem;
  left:0;
  right:0;
  margin:0 auto;
  width: 6.5rem;
  display: block;
  aspect-ratio: 1.5;
  -webkit-mask: url('../assets/quote-1.svg') no-repeat center;
  mask: url('../assets/quote-1.svg') no-repeat center;
  background-color: var(--color-prime-2);
}

@media (max-width:600px){
  .kjb-quotes-icon{
    width: 6rem;
    top:-2.25rem;
  }
}

/* -- Slider --- */

.kjb-slider{margin-bottom:0 !important;}

.kjb-slider .slick-track{
  display: flex !important;
  align-items:center;
}

.kjb-slider-item{
  text-align:center;
  color:#fff;
  font-style: italic;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.kjb-slider-item-head{
  font-family:var(--serif);
  font-size:2.333rem;
  line-height:1.19;
  max-width:34ch;
  margin:0 auto .85em;
  text-wrap:balance;
}
.kjb-slider-item-sub{
  font-size:1.1rem;
  font-weight:600;
}

@media (max-width:600px){
  .kjb-slider-item-head{font-size:2rem;}
}

/* Arrow Btns */

.kjb-slider .slick-prev::before, .kjb-slider .slick-next::before{
  color:var(--color-prime-light);
}

.kjb-slider .slick-arrow{z-index:2;--ab:0px;}
.kjb-slider .slick-next{right:var(--ab)}
.kjb-slider .slick-prev{left:var(--ab)}

@media (min-width:992px) {.kjb-slider .slick-arrow{--ab:-8vw}}
@media (min-width:1300px) {.kjb-slider .slick-arrow{--ab:-8rem}}
@media (max-width:800px) {.kjb-slider .slick-arrow{display:none !important}}

/* Dots */

.kjb-slider .slick-dots{
  display:flex;
  justify-content:center;
  gap:.75rem;
  bottom:-5.5rem;
}

@media (max-width:600px){
  .kjb-slider .slick-dots{gap:1rem}
}

.kjb-slider .slick-dots li{margin:0}

.kjb-slider .slick-dots li button:before{
  font-size:.666rem;
  color:var(--color-prime-light);
  opacity:1;
}

.kjb-slider .slick-dots li button:not(:hover):before{opacity:.85}

.kjb-slider .slick-dots li.slick-active button:before{
  color:var(--color-highlight);
  opacity: 1;
}

/* --- Projekte --- */

.kjb-projects{padding:4rem 0 1.5rem}
@media(max-width:600px){.kjb-projects{padding:3rem 0 1rem}}

.kjb-projects-heading{
  margin-bottom:1.25em
}

.kjb-btn-projects{
  margin:2.25rem auto 0;
  text-transform: uppercase;
  font-size:1.1rem;
  padding: 1.25rem 2rem;
  border-radius:50vw;
  background-color: #fff;
  color:var(--color-highlight);
  border:2px solid var(--color-highlight);
}

.kjb-btn-projects:hover{
  background-color:var(--color-highlight);
  color:#fff;
}

/* @media (max-width:800px){
  .kjb-btn-projects{font-size:1rem}
} */

/* --- FAQ --- */

.kjb-faq-header{
  position: relative;
  padding:4.75rem 0;
}

.kjb-faq-header::after{
  content:'';
  position:absolute;
  isolation: isolate;
  z-index: -1;
  inset:0 0 -2px 0;
  -webkit-mask: url('../assets/kjb-wave-1.svg') no-repeat bottom center/cover;
  mask: url('../assets/kjb-wave-1.svg') no-repeat bottom center/cover;
  background-color:#F1F9FA;
}

.kjb-faq-header h2{
  color:#fff;
  line-height: 1;
  font-size:2.8rem;
}

@media (max-width:800px){
  .kjb-faq-header h2{font-size:2.4rem}
}

.kjb-faq-header h2 span{
  display: table;
  background-color:var(--color-dark);
  padding:.1em .4em .25em;
  white-space: nowrap;
  rotate:-4deg;
  margin:0 auto;
  translate:0 20%;
}

@media (min-width:601px){
  .kjb-faq-header h2 span{
    translate:3.25rem -.25em;
    margin:0;
  }
}

.kjb-faq-main{
  background-color: #F1F9FA;
  padding: 1rem 0 2.5rem;
}

.kjb-faq-main .faq-akk-section{margin-top:0;}

.kjb-faq-main .faq-item{border-color:var(--color-prime);  text-wrap:balance;}
.kjb-faq-main .faq-item:not(.active) .faq-q:not(:hover){color:var(--color-dark)}

.kjb-faq-main .faq-item p:has(+ *){margin-bottom:1rem}

.kjb-faq-main .arr-link{
  font-weight:600;
  position: relative;
  padding-left: 2.25em;
}

.kjb-faq-main .arr-link::before,
.kjb-faq-main li::before{
  content: '';
  position: absolute;
  left: 0.1em;
  top: 0.43em;
  background-color: currentColor;
  -webkit-mask: url('../assets/pfeil-1.svg') no-repeat center;
  mask: url('../assets/pfeil-1.svg') no-repeat center;
  width: 1.6em;
  height: .8em;
}

.kjb-faq-main ul{
  margin:0 0 1rem 2.5rem;
  padding:0;
  list-style: none;
  display:grid;
  gap:1em 0;
}

.kjb-faq-main ul:last-child{margin-bottom:0}

.kjb-faq-main li{position:relative}

.kjb-faq-main li::before{
  left: -2.25rem;
  background-color: var(--color-prime);
}

/* --- CTA --- */

.kjb-cta{
  position:relative;
  padding:3rem 0 3.5rem;
  background:
  url('../assets/bcs-header-bg-2.png') no-repeat right -30%,
  radial-gradient(circle at 5% 95%,rgba(255,255,255,.1) 11.5rem,transparent 0),
  linear-gradient(var(--color-dark) 25%,var(--color-prime));
  background-blend-mode: soft-light;
}
@media (max-width:700px){
  .kjb-cta{
    background:
    url('../assets/bcs-header-bg-2.png') no-repeat right -50%,
    linear-gradient(var(--color-dark) 25%,var(--color-prime));
  }
}

.kjb-cta::before{
  content:'';
  position:absolute;
  height:10rem;
  width:100%;
  top:0;
  background: linear-gradient(-3deg,transparent 50%,#F1F9FA 50.5% 0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  backface-visibility: hidden;
}

.kjb-cta-heading{
  font-size: 2.888rem;
  line-height:1;
  color:#fff;
}
@media (max-width:800px){.kjb-cta-heading{font-size:2.4rem}}
@media (max-width:600px){.kjb-cta-heading{font-size:2.2rem}}

.kjb-cta-heading span{
  display: table;
  margin:0 auto;
  background-color:var(--color-highlight);
  padding:.1em .4em .25em;
  white-space: nowrap;
}

.kjb-cta-heading span.kjb-cta-head-1{rotate:2deg}
.kjb-cta-heading span.kjb-cta-head-2{rotate:-2deg;margin-top:.25em}

.kjb-cta-sub{
  font-size:1.4rem;
  font-weight:700;
  color:#fff;
  margin:1.25em 0 1em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@media (max-width:800px){.kjb-cta-sub{font-size:1.25rem}}

.kjb-cta-desc{
  color:#fff;
  text-wrap:pretty;
  max-width:90ch;
  margin:0 auto;
  font-size:.9rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.kjb-cta-desc a{color:#FFEFD8}

.kjb-btn{
  margin:2.25rem auto 0;
  text-transform: uppercase;
  font-size:1.1rem;
  padding: 1.25rem 2rem;
  border-radius:50vw;
  background-color: #fff;
  color:var(--color-dark);
}
/* @media (max-width:800px){.kjb-btn{font-size:1rem}} */

/* -- Koop. / Spenden --- */

.kjb-ft{
  margin:3.5rem 0 4rem;
  padding:.5rem 0;
}

@media (max-width:991px){
   .kjb-ft-col-right{
     border-top:1px solid var(--color-prime);
     margin-top:3.5rem;
     padding-top:3.5rem;
   }
}

@media (min-width:992px){
 .kjb-ft{background:linear-gradient(90deg,#fff 0 50%,var(--color-prime) 50% calc(50% + 1px),#fff 0)}
 .kjb-ft-col-inner{max-width:480px;padding:0 15px}
 .kjb-ft-col-right .kjb-ft-col-inner{margin:0 0 0 auto}
}

.kjb-ft-head{
  color:var(--color-dark);
  margin-bottom:.75em;
}

.kjb-ft-desc{
  text-wrap:pretty;
}

.kjb-ft-desc i{
  color:var(--color-gray);
  font-size:.9rem;
  line-height:1.25;
}

.kjb-ft-logos{
  display:grid;
  grid-template-columns: 1.25fr 1fr;
  place-items:center;
  gap:30px;
  margin-top:1.75rem;
}

@media(max-width:600px){
  .kjb-ft-logos{grid-template-columns: 2fr 1fr;}
}

.kjb-ft-logos:has(*+*){grid-template-columns: 1fr 1fr}

.kjb-ft-logos a:hover{opacity:.8}

.kjb-ft-logos img{
  max-height:100px;
  object-fit:contain;
}