*{
  box-sizing: border-box;
}

/* --- FARBEN ---*/
:root {
  --bk-weiss: #FFFFFF;
  --bk-creme: #F3ECE4;
  --bk-creme-mittel: #E9DDD1;
  --bk-creme-dunkel: #B7ACA0;
  --bk-rosa: #F8C6BB;
  --bk-rot: #F47C62;
  --bk-blau: #4B477A;
}

/* --- SCHRIFTEN ---*/

@font-face {
   font-family:"Cabrio";
   font-style: normal;
   font-weight: 1 900;
   src:
   url(../fonts/Cabrio-VariableWEB.woff2) format('woff2'),
   url(../fonts/Cabrio-VariableWEB.woff) format('woff'),
}
@font-face {
  font-family:"cabrio";
  font-style: italic;
  font-weight: 1 900;
  src:
  url(../fonts/Cabrio-VariableItalicWEB.woff2) format('woff2'),
  url(../fonts/Cabrio-VariableItalicWEB.woff) format('woff'),
}
@font-face {
  font-family:"Cabrio";
  font-style: normal;
  font-weight: 950;
  src:
  url(../fonts/CabrioWeb-Poster.woff2) format('woff2'),
  url(../fonts/CabrioWeb-Poster.woff) format('woff'),
}
@font-face {
 font-family:"cabrio";
 font-style: italic;
 font-weight: 950;
 src:
 url(../fonts/CabrioWeb-PosterItalic.woff2) format('woff2'),
 url(../fonts/CabrioWeb-PosterItalic.woff) format('woff'),
}


/* --- Grundeinstellungen ---*/
html{
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens:auto;
}


body{
  font-family: "cabrio", -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  font-feature-settings: "liga";
  font-weight: 400;
  background-color: var(--bk-creme);
  color:var(--bk-blau);
  font-size: 1.125rem;
  line-height:  144%;
  margin: 0;
  text-rendering: geometricPrecision;
  overflow-x: hidden;
  text-align: left;
  background-image: url(../img/pfote-groß.svg);

  background-repeat: no-repeat;
  background-size: 55%;
}

::selection {
  background: rgba(244, 124, 98, 0.40); /* WebKit/Blink Browsers */ 
}
::-moz-selection {
  background: rgba(244, 124, 98, 0.40);  /* Gecko Browsers */ 
}
.flex-helfer{
  display: flex;
  flex-direction: column;
}
.default-padding{
  padding-left: 20vw;
  padding-right: 20vw;
  
}
@media only screen and (max-width: 820px){
  body{
    background-size: 70%;
  }
  .default-padding{
    padding-left: 10vw;
    padding-right: 10vw;
  }
}

  @media only screen and (max-width: 400px){
  body{
    background-size: 92%;
  }
  .default-padding{
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
@media only screen and (min-width: 1440px){
  body{
    background-size: 750px;
  }

  .default-padding{
    padding-left: 20vw;
    padding-right: 20vw;
  }
}

p,img, h1, h2, h3, h4, h5, h6, ul, ol, blockquote{
  width: 100%;
}
img{
  width: calc(100% - 4rem);
  max-width: 1000px;
  align-self: center;
  margin: 0 2rem;
}
@media only screen and (max-width: 450px){
  img{
    width: calc(100% - 1rem);
    margin: 0 0.5rem ;
  }
}


p{
  margin-top: 0;
  margin-bottom: 2rem;

}
h1{
  font-size: 5.5rem;
  line-height:98%;
  text-align: left;
  font-weight: 950;
  hyphens:manual;
  font-style: italic;
  color: var(--bk-blau);
  
}
@media only screen and (max-width: 1200px){
  h1{
    font-size: 4rem;
  }
}
@media only screen and (max-width: 600px){

  h1{
    font-size: 3rem;
  }
}

h2{
  font-size: 2.625rem;
  text-align: center;
  font-weight: 800;
  line-height: normal;
  hyphens:manual;
  color: var(--bk-rot);
  margin-top: 3rem;
  margin-bottom: 1rem;
  
}
h2 div{
  font-weight: 400;
}

h3{
  font-size: 1.5625rem;
  line-height:normal;
  text-align: left;
  font-weight: 800;
  hyphens:manual;
  color: var(--bk-rot);
  margin-top: 3rem;
  margin-bottom: 0;
}
h4{
  font-size: 1.5625rem;
  line-height: normal;
  bk-text-align: left;
  font-weight: 800;
  hyphens:manual;
  color: var(--bk-blau);
  margin-top: 3rem;
  margin-bottom: 0;
}
h5{
  font-size: 1.125rem;
  line-height:normal;
  text-align: left;
  font-weight: 800;
  hyphens:manual;
  color: var(--bk-rot);
  margin-top: 3rem;
  margin-bottom: 0;
}
h6{
  font-size: 1.125rem;
  line-height:normal;
  text-align: left;
  font-weight: 800;
  hyphens:manual;
  color: var(--bk-blau);
  margin-top: 3rem;
  margin-bottom: 0;
}

blockquote{
font-family: Cabrio;
font-size: 2rem;
font-style: italic;
font-weight: 400;
line-height: 2.375rem; /* 118.75% */
}

a, a:visited{
  text-decoration: none;
  font-style: italic;
  font-weight: 700;
  color: var(--bk-blau);
  transition: all 0.2s ease-out 0s;
  
}
a:hover, a:focus{
  text-decoration: underline;
  font-weight: 900;

}
.button-reihe{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
}
a.button{
  font-weight: 500;
  font-style: normal;
  color: var(--bk-blau);
  border: 2px solid var(--bk-blau);
  border-radius: 0.5rem ;
  padding: 0.625rem 1.125rem;
  display: inline-block;
  margin: 0 1rem 1rem 0;
  height: 100%;
}
a.button:hover{
  margin: -0.5rem 1rem 1.5rem 0;m;
  text-decoration: none;
  outline: 40px solid var(--bk-rot);
}
.blauer-bg a.button-auf-dunkel, .blauer-bg a.button-auf-dunkel:hover{
  color: var(--bk-blau);
  background-color: var(--bk-rosa);
  text-decoration: none;
}
a.primaer-button{
  color: var(--bk-creme);
  background-color: var(--bk-blau);
}
a.primaer-button:hover{
  color: var(--bk-creme);
  background-color: var(--bk-blau);
  outline: 40px solid var(--bk-rot);

}
a.spezial-button{
  color: var(--bk-creme);
  background-color: var(--bk-rot);
  border: none;
}
a.spezial-button:hover{
  outline: 40px solid var(--bk-blau);
}

.simple a{
  background-image: linear-gradient( 180deg,var(--bk-creme) 65%,var(--bk-rosa) 0);
  transition: all 0.2s ease-out 0s;
  background-size: 0 100%;
  background-repeat: no-repeat;
}
.simple a:hover, .simplea:focus{
  text-decoration: none;
  background-size: 100% 100%;
}
li{
  margin: 0.7rem 0;
}
.simple h2{
  text-align: left;
}
img{
  object-fit: cover;
  outline: 0.75em solid var(--bk-weiss);
  transform: rotate(-1.8deg);
  margin: 3rem 0 4rem;
  box-shadow: 0px 40px 15px -6px rgba(0, 0, 0, 0.10), 0px 60px 25px 5px rgba(0, 0, 0, 0.10);
}
 img:nth-child(even){
  transform: rotate(2deg);
}


/** Navigation/Header */

.bg-pfote{
  position: absolute;
  z-index: 1;
}

#main-nav{
  z-index: 2;
  width: 100%;
  margin: 0;
  display: grid;
  flex-direction: row;
  padding: 2rem 2rem 1rem;
  align-items: baseline;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;

}



.logo, a.logo{
  color: var(--bk-blau, #4B477A);
    font-family: Cabrio;
    font-size: 1.68231rem;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    text-decoration: none;
}

.logo::before{
  content: url(../img/logo-bk-blau.svg);
  vertical-align: -6px;
  margin: 0 13px 0 0;
}

.navigation{
  justify-self: flex-end;
  display: flex;
  flex-direction: row;
}

.navigation a{
  text-decoration: none;
  color: var(--bk-blau);
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  margin: 0 1rem;
  
}

.navigation a::after{
  content: " ";
  width: 100%;
  height: 2px;
  background-color: var(--bk-rot);
  display: block;
  margin:  0;
  transition: all 0.3s ease-in-out 0s;
  opacity: 0;
}
.navigation a[aria-current]::after{
  opacity: 1;
  margin: 0.3rem 0 0 0;
}


.navigation a:hover::after{
  opacity: 1;
  margin: 0.3rem 0 0 0;
  
}
@media only screen and (max-width: 665px){
  #main-nav{
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr ;
  }
  .navigation{
    width: 100%;
    justify-content: center;
    margin: 2rem 0 0 0;
  }
  .logo, a.logo{
    justify-self: center;
    margin-top: 1.3rem;
  }

  .navigation a{
    margin: 0 1.4rem;
    font-size: 1.25rem;
    
  }
  body{
    background-size: 85%;
  }
  .default-padding{
    padding-left: 2rem;
    padding-right: 2rem;
    
  }
  
}
@media only screen and (max-width: 465px){
 
  .navigation{
    width: 100%;
    justify-content: space-between;
    margin: 2rem 0 0 0;
  }

  .navigation a{
    margin: 0;
    font-size: 1.25rem;
    
  }

}

/* Main*/
.default-padding{
  z-index: 4;
}
/* Footer */
#main-footer{
  margin-top: 10rem;
  z-index: 3;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "wir"
    "andere";
}

@media only screen and (min-width: 780px){
  #main-footer{
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: 
  "wir andere andere";
  }

}


#wir{
  grid-area: wir;
  background-color: var(--bk-rot);
  color: var(--bk-blau);
  padding: 4rem 2rem 2rem;
  font-weight: 500;
  display: grid;
  grid-template-columns: 40px auto;
  grid-template-rows:  auto;
  grid-template-areas: 
    "logo adresse"
    ". legal";
  gap: 3rem 1rem;
}
#logo-footer{
  grid-area: logo;
  margin: -4px auto 0;
}
#adresse-footer{
  grid-area: adresse;
}
#legal-footer{
  grid-area: legal;
  align-content: end;
}
#legal-footer a{
  font-style: normal;
  font-weight: 500;
}
#legal-footer a::after{
  content:" | "
}
#legal-footer a:last-of-type::after{
  content:""
}

#wir h2{
  color: var(--bk-blau);
  font-size: 1.5625rem;
  font-weight: 800;
  margin: 0 0 0.5rem 0;
  text-align: left;
}
#andere{
  grid-area: andere;
  background-color: var(--bk-blau);
  color: var(--bk-weiss);
  padding: 4rem 2rem 2rem;
}
.foerderer{
  display: grid;
  grid-template-columns: 40px 1fr;
  grid-template-rows:  1fr;
  align-items: center;
}
#muc-svg-text, #bayern-svg-text{
  display: none;
}
.logo-text-foerderer{ 
  display: inline;
  color: var(--bk-rosa);
  font-size: 0.875rem;
  line-height: 144%;
  margin-left: 1.37rem;
}
.foerderer-sammlung{
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto;
  grid-template-areas: 
    "intro"
    "1"
    "2";
  gap: 1rem 2rem;
  padding-bottom: 4rem;
}
.foerder-intro{
  grid-area: intro;
  font-weight: 500;
}
.foerder-1{
  grid-area: 1;
}
.foerder-2{
  grid-area: 2;
}
.sponsoren{
  color: var(--bk-rosa);
  display: flex;
  align-items: center;
}
.sponsoren svg{
  margin-right: 1.37rem;
}
a.sponsoren{
  font-weight: 500;
  font-style: normal;
  color: var(--bk-rosa);
}
@media only screen and (min-width: 560px){
  #muc, #bayern{
    grid-template-columns: 1fr;
    grid-template-rows:  auto auto;
  }
  #muc-svg-text{
    display:block;
    margin-left: 1.8rem;
  }
  #bayern-svg-text{
    display:block;
    margin-top: 1.5rem ;
  }
  .logo-text-foerderer{ 
    display: none;
  }
  #bayern-logo{
    display: flex;
    flex-direction: column;
    margin-top: 15px;
  }
  #muc-logo{
    display: flex;
    flex-direction: row;
  }
  #bayern-bild{
    scale: 2;
    width: 100px;
    height: 31px;
  }
  .foerderer-sammlung{
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    grid-template-areas: 
      "intro intro"
      "1 2 ";

  }

}


@media only screen and (min-width: 1000px){

  .foerderer-sammlung{
    grid-template-columns: 20rem 20rem auto;
    grid-template-rows: auto auto;
    grid-template-areas: 
      "intro intro intro"
      "1 2 .";

  }
  #wir{
    grid-template-columns: auto 40px 14rem;
    grid-template-rows:  auto;
    grid-template-areas: 
      ". logo adresse"
      ". . legal";
  }

}


@media only screen and (min-width: 1200px){


  #wir{
    padding-right: 3vw;
  }
  #andere{
    padding-left: 5vw;
  }

}



/* ---- Homepage --- */
.ohne-stoerer{
  justify-content: center;
  padding: 4rem 0 ;
  height: calc(48px + 8rem);
}

@media only screen and (min-width: 1331px){
  .button-reihe-mit-stoerer{
    margin-top: -4rem;
  }
}
@media only screen and (min-width: 600px){
  .button-reihe-mit-stoerer{
    margin-bottom: -5rem;
  }
}
a.stoerer{
  background-color: var(--bk-rot);
  width: 15.625rem;
  height: 15.625rem;
  transform: rotate(-7.175deg);
  border-radius: 3.4rem;
  padding: 2rem;
  display: block;
  transition: none;
  transition: all 0.2s ease-out 0s;
  margin: 1rem 0 0 1rem;
  z-index: 100;
  
}
a.stoerer h2{
  color: var(--bk-grau, #F3ECE4);
  font-family: Cabrio;
  font-size: 2.8125rem;
  font-style: italic;
  font-weight: 950;
  line-height: 86%; 
  margin: 0;
  text-align: left;
}
a.stoerer h3{
  color: var(--bk-blau, #4B477A);
font-family: Cabrio;
font-size: 1.125rem;
font-style: normal;
font-weight: 700;
line-height: 1.21713rem; /* 108.191% */
margin: 1rem 0 0;
}
a.stoerer:hover{

  text-decoration: none;
  transform: rotate(-4.175deg);
  scale: 1.15;
  box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.05), 0px 8px 10px -6px rgba(0, 0, 0, 0.10), 0px 20px 25px -5px rgba(0, 0, 0, 0.10);
}
/*
a.stoerer:hover h3{
  color: var(--bk-rosa);  
}
a.stoerer:hover h2{
  color: var(--bk-rot);  
}
*/
blockquote{
  margin: 0;
  padding: 0 10vw;
  width: 100%;
}
@media only screen and (max-width: 450px){
  blockquote{
    padding: 0 1rem;
  }
}

.eingangzszitat{

  background-color: var(--bk-rot);
  color: var(--bk-creme);
  margin-top: -20rem;
  padding-top: 23rem;
  padding-bottom: 6rem;
}
@media only screen and (max-width: 820px){
  .eingangzszitat{
    margin-top: -30vw;
    padding-top: 30vw;
  }
}

.dreieck-rot{
  margin-top: -1px;
  width: 100%;
  border-top: 100px solid var(--bk-rot);
  border-right: 50vw solid transparent;
  border-bottom: 0 solid transparent;
  border-left: 50vw solid transparent; 
}
@media only screen and (max-width: 450px){
  .dreieck-rot{
    width: 100%;
    border-top: 40px solid var(--bk-rot);
  }
}

/* Vorteile */
.vorteile h2{
  text-align: center;
}
.vorteile h3{
  color: var(--bk-blau);
}
.vorteile ul{
  margin: 4rem 0 0 0;
  padding: 0;
}
.vorteile li{
  list-style: none;
  margin: 0 0 7rem 0;
  display: grid;
  justify-items: center;
  grid-template-rows: auto auto auto;
  grid-template-columns: auto;
  grid-template-areas: 
    "illu"
    "headline"
    "text";
}
.vorteile svg{
  grid-area: illu;
}
.vorteile h3{
  grid-area: headline;
  margin: 1rem 0 0 0;
}
.vorteile p{
  grid-area: text;
}
@media only screen and (min-width: 820px){
  .vorteile h3{
    margin: 0;
  }
  .vorteile li{
    list-style: none;
    margin: 0 0 7rem 0;
    display: grid;
    justify-items: center;
    
    grid-template-rows: auto auto;
    grid-template-columns: 280px auto;
    grid-template-areas: 
      "illu headline"
      "illu text";
  }
  
  .vorteile li:nth-child(even){
    grid-template-rows: auto auto;
    grid-template-columns:  auto 280px;
    grid-template-areas: 
      "headline illu"
      "text illu";
    
  }
  .vorteile li:nth-child(even) h3, .vorteile li:nth-child(even) p{
    text-align: right;
  }
}

@media only screen and (min-width: 1600px){

  .vorteile ul{
    padding: 0 10vw;
  }
}




/* Testimonials */ 


.testimonials{
  background-color: var(--bk-rosa);
  padding-top: 8rem;
  padding-bottom: 6rem;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-template-rows: masonry;
  gap: 2rem;
}
@media only screen and (min-width: 950px){
  .testimonials{
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: masonry;
    gap: 2rem;
  }
}
.testimonials-bp{
  padding-top: 10rem;
}

/*
.testimonials{
  background-color: var(--bk-rosa);
  padding-top: 8rem;
  padding-bottom: 8rem;
  float: left;


}
  */
.ein-testimonial{
  background-color: var(--bk-blau);
  color: var(--bk-weiss);
  border-radius: 0.5rem;
  padding: 2rem 3rem;
}
.ein-testimonial h3{
  color: var(--bk-rosa);
  font-size: 0.875rem;
  font-weight: 700;
  margin: 0;
}
.ein-testimonial h4{
  color: var(--bk-rosa);
  font-size: 0.875rem;
  font-weight: 400;
  margin: 0;
}
.ein-testimonial p{
  color: var(--bk-grau);
  font-size: 1.125rem;
  font-style: italic;
  font-weight: 400;
  line-height: 144.3%;
}
.ein-testimonial img{
  outline: none;
  transform: none;
  width: 2.8125rem;
  height: 2.8125rem;
  box-shadow: none;
  margin: 0 0.8rem 0 0;
  border-radius: 50%;

}
.testimonial-geber{
  display: flex;
  flex-direction: row;
  align-items: center;
}



/* Das Team*/
/*
.die-team-mitglieder{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: masonry;
  gap: 10vw;
  padding: 3rem 0;

}
  */
  .die-team-mitglieder{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 3rem 8vw ;
    padding: 3rem 0;
    justify-content: center;
  
  }
.team h2{
  text-align: center;
}
.team-mitglied{
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 25vw;
  max-width: 400px;
  min-width: 240px;

}
.team-mitglied img{
  outline: none;
  transform: none;
  width: 20vw;
  height: 20vw;
  max-width: 12.5rem;
  max-height: 12.5rem;
  min-width: 6rem;
  min-height: 6rem;
  box-shadow: none;
  margin: 0 0.8rem 0 0;
  border-radius: 50%;
}
.team-mitglied h3{
  color: var(--bk-blau, #4B477A);
  margin: 2rem 0 0 0;
  text-align: center;
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 700;
  line-height: 144%;
}
.team-mitglied p{
  text-align: center;
}

.fotos{
  display: flex;
  flex-direction: column;
  justify-items: center;
  height: 80vw;
}
.fotos img{
  position: relative;
}

.foto-01{
  width: 40vw;
  margin-left: -35vw;
  transform: rotate(3deg);
}
.foto-02{
  width: 27vw;
  margin-top: -10vw;
  transform: rotate(-2deg);
}
.foto-03{
  width: 40vw;
  margin-top: -70vw;
  margin-left: 35vw;
  transform: rotate(-5deg);

}


@media only screen and (max-width: 600px){
  .fotos{
    height: 110vw;
  }
}
@media only screen and (max-width: 400px){
  .fotos{
    height: auto;
    margin-bottom: 5rem;
  }
  
  .foto-01, .foto-03{
    width: calc(100% - 6rem);
    margin: 0;
  }
  .foto-02{
    width: calc(40% + 4rem);
    margin: 0;
    transform: rotate(-5deg);
  }
}
@media only screen and (min-width: 850px){
  .foto-03{
    margin-top: -60vw;
  }
}

@media only screen and (min-width: 1250px){
  .fotos{
    height: 1050px;
  }
  .foto-01{
    width: 620px;
    margin-left: -300px;
    transform: rotate(3deg);
  }
  .foto-02{
    width: 420px;
    margin-top: -100px;
    transform: rotate(-2deg);
  }
  .foto-03{
    width: 620px;
    margin-top: -950px;
    margin-left: 550px;
    transform: rotate(-5deg);
  
  }
}

/* Konzept */
.blauer-bg{
  background-color: var(--bk-blau);
  color: var(--bk-creme);
  padding-bottom: 7rem;
  padding-top: 2rem;
  margin: 0;
}
.blauer-bg a{
  color: var(--bk-rot);
  font-style: normal;
  text-decoration: underline;
  font-weight: 700;
  margin-bottom: 1rem;
}
.blauer-bg  a:hover{
  color: var(--bk-rosa);
}
.blauer-bg h3{
  color: var(--bk-rosa);
}
.blauer-bg h2, .rosa-bg h2, .roter-bg h2{
  margin-top: 0;
}
.roter-bg h2, .roter-bg h2, .roter-bg h5{
  color: var(--bk-creme);
}
.roter-bg{
  background-color: var(--bk-rot);
  color: var(--bk-blau);
  margin: 0;
  padding-top: 2rem;
  padding-bottom: 7rem;
}
.rosa-bg{
  background-color: var(--bk-rosa);
  color: var(--bk-blau);
  padding-bottom: 7rem;
  padding-top: 2rem;
  margin: 0;
}
.rosa-bg a.primaer-button{
  color: var(--bk-rosa);
}
.raeume h2{
  text-align: center;
}


/* Intro Unterseite (FSJ und Betreuungsplätze) */

.intro-unterseite{
  margin-bottom: 5rem;
}

.intro-unterseite h1{
  margin-bottom: 1rem;
}
.intro-unterseite h1 div{
  margin-top: 0;
  color: var(--bk-blau);
  font-style: italic;
  font-weight: 500;
  font-size: 70%;
  line-height: 120%;

}
.intro-unterseite p{
  font-size: 1.6875rem;
  font-style: normal;
  font-weight: 500;
  line-height: 144.3%; /
}

.intro-bilder{
  display: flex;
  flex-direction: column;
  height: auto;
  background-color: var(--bk-rot);
}
.intro-bilder img{
  scale: 0.75 ;
  margin: -7rem 6rem 0 0;
}
.intro-bilder img:nth-of-type(even){
  margin: -4rem 0 0 8rem;
}
.intro-bilder img:first-of-type{
  scale: 1.05;
  margin: -15vw 0 0 0;
}
.intro-bilder img:last-of-type{
  margin-bottom: -18vw;
}

h2.h2-testimonials{
  background-color: var(--bk-rosa);
  text-align: center;
  margin: 0 0 -6rem 0;
  padding: 12vw 0 0 0;

}
@media only screen and (min-width: 1200px){
  .intro-bilder img:first-of-type{
    margin: -15rem 0 0 0;
  }
  .intro-bilder img:last-of-type{
    margin-bottom: -15rem;
  }
  .intro-bilder-anfang{
    margin-top: 12rem;

  }

  h2.h2-testimonials{
    padding: 12rem 0 0 0;
  }
}

.mehrspaltig{
  padding-top: 5rem;
  padding-bottom: 5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.rosa-h2 h2{
  color: var(--bk-rosa);
}
.blaue-h2 h2{
  color: var(--bk-blau);
}
.rosa-h2 h3{
  color: var(--bk-rot);
}
.rote-h2 h3{
  color: var(--bk-rosa);
}

.bk-grid{
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 2rem;
  margin: 5rem 0;

}
.bk-grid h3{
  margin: 0 0 0.5rem 0;
}

@media only screen and (min-width: 950px){
  .bk-grid{
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem 8rem;
  }
}



/* Ablauf */
ol.ablauf-liste {
  padding: 0;
  margin-top: 5rem;
}
ol.ablauf-liste li{
  list-style: none;
}
li.ablauf-item{
  margin: 0 auto ;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 2rem 1fr;
  grid-template-rows: auto auto 1fr 2rem;
  grid-template-areas: 
    "strich uhrzeit"
    "strich thema"
    "strich text"
    "strich . ";
  column-gap: 1rem;

}
h3.ablauf-uhrzeit{
  color: var(--bk-rot, #F47C62);
  font-family: Cabrio;
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  margin: 0;
  grid-area: uhrzeit;
}
h2.ablauf-thema{
  color: var(--bk-blau, #4B477A);
  font-family: Cabrio;
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  text-align: left;
  margin: 0;
  grid-area: thema;
}
li.ablauf-item p{
  grid-area: text;
}
.ablauf-strich{
  grid-area: strich;
  margin-top: 0.35rem;
}
.kreis{
  background-color: var(--bk-rot);
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
}
.strich-container{
  width: 2rem;
  display: flex;
  flex-direction: row;
  height: 100%;
  
}
.strich{
  border-left: 2px dashed var(--bk-rosa);
  width: calc(50% - 1px);
}
.strich-puffer{
  width: calc(50% - 1px);
}

/* Strich bei letztem ausblenden*/
li.ablauf-item:last-child .strich-container{
  display: none;
  
}
@media only screen and (min-width: 840px){
  li.ablauf-item{
    max-width: 1000px;
    grid-template-columns: 1fr 2rem 1fr;
    grid-template-rows: auto  1fr 2rem;
    grid-template-areas: 
      "uhrzeit strich thema"
      ". strich text"
      ". strich .";
    column-gap: 1rem;
  }
  h3.ablauf-uhrzeit{
   text-align: right;
  }
  .ablauf-strich{
    margin-top: -0.3rem;
  }
  .strich-container{

    height: calc(100% - 0.3rem);
    
  }

}

.einleitungstext{
  text-align: center;
  font-family: Cabrio;
  font-size: 1.5625rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.ausfluege{
  background-color: var(--bk-rosa);
  padding-bottom: 6rem;
  margin-bottom: 0;
  padding-top: 2rem;
}




/* Schrägen (Trenner) */

/* 1. Linie von Links oben nach rechts unten (Berg ab) */
.TB-transparent-blau{
  margin-bottom: -1px;
  width: 100%;
  border-top: 3rem solid transparent;
  border-left: 100vw solid var(--bk-blau); 
}

.TB-blau-transparent{
  margin-top: -1px;
  width: 100%;
  border-top: 3rem solid var(--bk-blau);
  border-left: 100vw solid transparent; 
}

.TB-transparent-rosa{
  margin-top: -1px;
  width: 100%;
  border-top: 3rem solid transparent;
  border-left: 100vw solid var(--bk-rosa); 
}
.TB-rosa-transparent{
  margin-top: -1px;
  width: 100%;
  border-top: 3rem solid var(--bk-rosa);
  border-left: 100vw solid transparent; 
}
.TB-transparent-rot{
  margin-bottom: -1px;
  width: 100%;
  border-top: 3rem solid transparent;
  border-left: 100vw solid var(--bk-rot); 
}

@media only screen and (max-width: 800px){
  .TB-transparent-blau{
    border-top: 2rem solid transparent;
  }
  
  .TB-blau-transparent{
    border-top: 2rem solid var(--bk-blau);
  }
  
  .TB-transparent-rosa{
    border-top: 2rem solid transparent;
  }
  .TB-rosa-transparent{
    border-top: 2rem solid var(--bk-rosa);
  }
  .TB-transparent-rot{
    border-top: 2rem solid transparent;
  }
}
@media only screen and (max-width: 400px){
  .TB-transparent-blau{
    border-top: 1rem solid transparent;
  }
  
  .TB-blau-transparent{
    border-top: 1rem solid var(--bk-blau);
  }
  
  .TB-transparent-rosa{
    border-top: 1rem solid transparent;
  }
  .TB-rosa-transparent{
    border-top: 1rem solid var(--bk-rosa);
  }
  .TB-transparent-rot{
    border-top: 1em solid transparent;
  }
}



/*2. Linie von Links unten nach rechts oben (berg auf) */

.BT-rosa-transparent{
  margin-top: -1px;
  width: 100%;
  border-bottom: 3rem solid transparent;
  border-left: 100vw solid var(--bk-rosa); 
}

.BT-rosa-blau{
  margin-top: -1px;
  width: 100%;
  border-bottom: 3rem solid transparent;
  border-left: 100vw solid var(--bk-rosa); 
  background-color: var(--bk-blau);
}
.BT-rot-blau{
  margin-top: -1px;
  width: 100%;
  border-bottom: 3rem solid transparent;
  border-left: 100vw solid var(--bk-rot);
  background-color: var(--bk-blau);
}
.BT-rot-transparent{
  margin-top: -1px;
  width: 100%;
  border-bottom: 3rem solid transparent;
  border-left: 100vw solid var(--bk-rot); 
}
.BT-transparent-blau{
  margin-top: -1px;
  width: 100%;
  border-bottom: 3rem solid var(--bk-blau);
  border-left: 100vw solid transparent; 
}
.BT-blau-transparent{
  margin-top: -1px;
  width: 100%;
  border-bottom: 3rem solid transparent;
  border-left: 100vw solid var(--bk-blau); 
}
.BT-blau-rosa{
  margin-top: -1px;
  width: 100%;
  border-bottom: 3rem solid transparent;
  border-left: 100vw solid var(--bk-blau); 
  background-color: var(--bk-rosa);
}
.BT-transparent-rosa{
  margin-top: -1px;
  width: 100%;
  border-bottom: 3rem solid var(--bk-rosa) ;
  border-left: 100vw solid transparent; 
}

.BT-rot-rosa{
  margin-top: -1px;
  width: 100%;
  border-bottom: 3rem solid transparent;
  border-left: 100vw solid var(--bk-rot);
  background-color: var(--bk-rosa); 
}


@media only screen and (max-width: 800px){
  .BT-rosa-transparent{
    border-bottom: 2rem solid transparent;
  }
  
  .BT-rosa-blau{
    border-bottom: 2rem solid transparent;
  }
  .BT-transparent-blau{
    border-bottom: 2rem solid var(--bk-blau);
  }
  .BT-blau-transparent{
    border-bottom: 2rem solid transparent;
  }
  .BT-transparent-rosa{
    border-bottom: 2em solid var(--bk-rosa);
  }
  
  .BT-rot-rosa{
    border-bottom: 1rem solid transparent;
  }
}
@media only screen and (max-width: 400px){
  .BT-rosa-transparent{
    border-bottom: 1rem solid transparent;
  }
  
  .BT-rosa-blau{
    border-bottom: 1rem solid transparent;
  }
  .BT-transparent-blau{
    border-bottom: 1rem solid var(--bk-blau);
  }
  .BT-blau-transparent{
    border-bottom: 1rem solid transparent;
  }
  .BT-transparent-rosa{
    border-bottom: 1rem solid var(--bk-rosa);
  }
  
  .BT-rot-rosa{
    border-bottom: 1rem solid transparent;
  }
}
/* Elemente hoch ziehen*/

.up-m{
  margin-top: -9rem;
}
.down-m{
  margin-top: 9rem;
}
.down-m-foto-intro{
  margin-top: 4vw;
}

@media only screen and (max-width: 650px){
  .down-m-foto-intro{
    margin-top: 0;
  }
}

@media only screen and (min-width: 1100px){
  .down-m-foto-intro{
    margin-top: 9rem;
  }
}

.eckdaten ul{
  list-style: none;
  padding: 0 10rem 0 10rem;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: auto;
  column-gap: 2rem;
  row-gap: 0;

}
@media only screen and (min-width: 1600px){
  .eckdaten ul{
    width: 1300px;
    margin: auto ;  
  }
}
@media only screen and (max-width: 1100px){
  .eckdaten ul{
    grid-template-columns: 1fr 1fr ;
  }
}
@media only screen and (max-width: 720px){
  .eckdaten ul{
    grid-template-columns: 1fr ;
    padding: 0 30vw ;
  }
}
@media only screen and (max-width: 400px){
  .eckdaten ul{
    padding: 0 2rem 0 2rem;
  }
}
.eckdaten h4{
  color: var(--bk-blau, #4B477A);
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  margin-top: 2rem;
}

.eckdaten h3{
  color: var(--bk-rot, #F47C62);
  font-size: 1.5625rem;
  font-style: normal;
  font-weight: 800;
  line-height: normal;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.eckdaten h3 div{
  font-size: 5.3125rem;
  font-weight: 950;
  line-height: 90%;
}
.eckdaten p{
  color: var(--bk-blau, #4B477A);
  font-family: Cabrio;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
  line-height: 144.3%; /* 1.26263rem */
  margin-bottom: 1rem;
}



/* Bewerbungsablauf*/

.bewerbung h3{
  color: var(--bk-blau);
  margin-top: 1rem;
}
.bewerbung ol{
  list-style: none;
  counter-reset: bewerbung-counter;
  padding: 0;
  margin: 0 auto;
  max-width: 400px;
}

.bewerbung ol li{
  counter-increment: bewerbung-counter;
  margin-bottom: 6rem;
}
.bewerbung ol li p{
  font-weight: 400;
}
.bewerbung li::before{
  content:  counter(bewerbung-counter);
  color: var(--bk-blau, #4B477A);
  text-align: center;
  font-family: Cabrio;
  font-size: 2.625rem;
  font-style: italic;
  font-weight: 950;
  line-height: 100%;
  background-color: var(--bk-rosa);
  width: 4.4375rem;
  height: 4.4375rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  margin: 4rem auto 0;

}
@media only screen and (max-width: 720px){
  .bewerbung ol{
    margin: 0 2rem;
    width: calc(100% - 4rem);

  }
}
@media only screen and (max-width: 420px){
  .bewerbung ol{
    margin: 0 1rem;
    width: calc(100% - 2rem);

  }
}

.freie-plaetze ul{
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}


li.freier-platz{
  list-style: none;
  width: 64vw;
  margin-bottom: 8rem;
  padding: 2rem 18vw 5rem;
  background-repeat: no-repeat;
  background-image: url(../img/pfote-betreuungsplaetze.svg);
  background-position: left top;
  background-clip:padding-box;
  background-size: 50vw;
}
li.freier-platz:nth-of-type(even){
  background-image: url(../img/pfote-betreuungsplaetze-02.svg);
  background-position: right top;
  background-size: 45vw;

}
.freier-platz h3{
  color: var(--bk-blau);
  font-family: Cabrio;
  font-size: 9vw;
  font-style: italic;
  font-weight: 950;
  line-height: 98%; /* 9.31rem */
  margin-bottom: 2rem;

}

@media only screen and (max-width: 820px){
  li.freier-platz{
    width: 100%;
    padding: 2rem 8vw 5rem;
    margin-bottom: 8rem;
    background-size: 120vw;
    background-position: right top;
  }
  li.freier-platz:nth-of-type(even){
    background-position: left top;
    background-size: 104vw;
  }
  .freier-platz h3{
    font-size: 22vw;
  }
}



.freier-platz p{
  color: #F47C62;

  font-size: 1.5625rem;
  font-style: normal;
  font-weight: 600;
  line-height: 144%; /* 2.25rem */
}
.kein-platz h3{
  font-weight: 900;
  font-style: normal;
}

li.kein-platz{
  background: none;

}

ul.bausteine{
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.bausteine li{
  list-style: none;
  background-color: var(--bk-rosa);
  text-align: center;
  border-radius: 1.25rem;
  width: 70vw;
  max-width: 35rem;
  height: 11rem;
  padding: 1rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 5rem;
}
.bausteine li::after{
  content: "+";
  position: relative;
  bottom: -3.6rem;
  height: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  color: var(--bk-blau, #4B477A);
  text-align: center;
  font-family: Cabrio;
  font-size: 2.625rem;
  font-style: normal;
  font-weight: 800;
  line-height: normal;
}


.bausteine li:last-of-type:after{
  display: none;
}
.bausteine li.freiwillig{
  background-color: var(--bk-creme-mittel);
}
.bausteine li h3{
  color: var(--bk-blau, #4B477A);
  text-align: center;
  font-family: Cabrio;
  font-size: 2.625rem;
  font-style: normal;
  font-weight: 900;
  line-height: 108%; /* 2.835rem */
  margin: 0;
}
.bausteine li p{
  color: var(--bk-blau, #4B477A);
  font-family: Cabrio;
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 500;
  line-height: 148%;
  margin: 0;
}
.bausteine li p.kleingedrucktes{
  font-size: 0.875rem;
}
@media only screen and (max-width: 700px){

  .bausteine li h3{
    font-size: 2rem;
  }

}
@media only screen and (max-width: 520px){

  .bausteine li h3{
    font-size: 1.5rem;
  }
  .bausteine li p{
    font-size: 1rem ;
  }
  .bausteine li{

    width: 100%;
  }
  .bausteine li::after{
    content: "+";
    position: relative;
    bottom: -3.6rem;
    height: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    color: var(--bk-blau, #4B477A);
    text-align: center;
    font-family: Cabrio;
    font-size: 2.625rem;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
  }

}

ul.kostenfaktoren{
  margin: 0 0 2rem;
  padding: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  justify-content: center;
  
}

ul.kostenfaktoren li{
  list-style: none;
  background-color: var(--bk-blau);
  color: var(--bk-creme)  ;
  margin-right: 1.5rem;
  width: 15rem;
  padding: 0.875rem 1.25rem;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  border-radius: 0.625rem;

  font-family: Cabrio;
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 700;
  line-height: 144%; 
}

ul.kostenfaktoren li div{
  color: var(--bk-creme, #F3ECE4);
  font-family: Cabrio;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 400;
  line-height: 144%;
}
.zentriertr-text{
  text-align: center;
}
.betreungsentgelt td{
  padding: 1rem;
  font-weight: 700;
}
td.einkommen{
  grid-area: einkommen;
  padding-bottom: 0.5rem;
  padding-left: 0;
}
.einkommen::before{
  content: "Bruttoeinkommen bis einschließlich";
  color: var(--bk-blau);
  display: block;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.betreungsentgelt tr:last-of-type .einkommen::before{
  content: "Bruttoeinkommen über";
}
.einkommen::after{
  content: "Durchschnittliche tägliche Betreuungszeit";
  display: block;
  color: var(--bk-rot, #F47C62);
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin-top: 0.3rem;
}
table.betreungsentgelt tr{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
  "einkommen einkommen"
  "beitrag beitrag"
  "beitrag beitrag";
  
}
 table.krippe tr{
    grid-template-columns: 1fr ;
    grid-template-areas: 
    "einkommen"
    "beitrag";
    align-items: center;
  }
  table.krippe tr td.beitrag {
    border-bottom: 1px var(--bk-blau) solid;
  }
  
  table.krippe tr td.beitrag .beitrag-border{
    border: none;
  }
table.betreungsentgelt tr.stunden{
  display: none;
}
.betreungsentgelt {
  width: 100%;
}
td.beitrag{
  border-top: 1px var(--bk-blau) solid;
  border-bottom: 1px var(--bk-blau) solid;

}
:nth-child(-n + 2 of td.beitrag){
  border-bottom: none;
}
:nth-child(odd of td.beitrag){
  padding-right: 0 ;
}
:nth-child(odd of td.beitrag) .beitrag-border {
  border-right: 1px var(--bk-blau) solid;
}


.beitragsinfo{
  color: var(--bk-rot);
}

.betreungsentgelt tr{
  margin-bottom: 3rem;
}

.info-betreuungszeit{
  display: none;
}
 table.betreungsentgelt{
  margin-bottom: 2rem;
 }
@media only screen and (min-width: 940px){
  .betreungsentgelt tr{
  margin-bottom: 0;
  }
  td.einkommen, .einkommen::before{
    text-align: right;
    width: 10rem;
    padding-right: 0;
    margin-right: 2rem;
  }
  .einkommen::after{
    display: none;
  }
  .beitragsinfo{
    display: none;
  }
  :nth-child(odd of td.beitrag) .beitrag-border {
  border-right: none;
  }

 
  table.betreungsentgelt tr{
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-areas: 
    "einkommen beitrag beitrag beitrag beitrag";
    align-items: center;

  
  }
  table.krippe tr{
    grid-template-columns: auto 1fr ;
    grid-template-areas: 
    "einkommen beitrag";
    align-items: center;
    
  }
  table.krippe tr td.beitrag{
    align-self: center;
  }
  td.beitrag{
    border-top: 1px var(--bk-blau) solid;
    border-bottom: none;
    height: 6rem;
    display: flex;
    justify-items: center;
    align-items: center;
  }
  :nth-child(-n + 2 of table.krippe tr td.beitrag){
  border-bottom: none;
}
  table.betreungsentgelt tr:last-of-type td.beitrag {
    border-bottom: 1px var(--bk-blau) solid;
   }
   table.krippe tr:last-of-type td.beitrag{
    border-bottom: 1px var(--bk-blau) solid;
   }
   table.betreungsentgelt tr:hover{
    background-color: var(--bk-rosa);
   }
   /*
   td.beitrag:hover{
    background-color: rgba(244, 124, 98, 0.40);;
   }
    */
    tr.stunden td {
      padding-top: 0;
    }
   table.betreungsentgelt tr.stunden{
  display: grid;
  color: var(--bk-rot);
  padding-right: 0;
  }
  table.betreungsentgelt tr.stunden:hover{
    background-color: transparent;
  }
  h5.info-betreuungszeit{
    font-weight: 400;
    margin-left: 13rem;
    margin-bottom: 0;
    display: inline;
    text-align: center;
  }
  .stunden td.einkommen::before{
    display: none;
  }
  
}


/* Bewerbungsablauf*/


.engelt-uebersicht ol{
  list-style: none;
  counter-reset: bewerbung-counter;
  display: flex;
  flex-direction: column;
}
.engelt-uebersicht h3{
  color: var(--bk-blau);
  margin-top: 1rem;
  margin-bottom: 1rem;
  text-align: center;
}
.engelt-uebersicht p{
  text-align: center;
}
.engelt-uebersicht ol {
  padding: 0;
}
.engelt-uebersicht ol li{
  counter-increment: bewerbung-counter;
  margin-bottom: 6rem;
}

.engelt-uebersicht li::before{
  content:  counter(bewerbung-counter);
  color: var(--bk-blau, #4B477A);
  text-align: center;
  font-family: Cabrio;
  font-size: 2.625rem;
  font-style: italic;
  font-weight: 950;
  line-height: 100%;
  background-color: var(--bk-rosa);
  width: 4.4375rem;
  height: 4.4375rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  margin: 4rem auto 0;

}
.entgelt-kindergarten{
  font-size: 6.25rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  text-align: center;

}

ul.linkliste{
  padding: 0;
}

ul.linkliste li{
  list-style: none;
}

.schutz{
  unicode-bidi: bidi-override;
  direction: rtl;
}

/* FORMULARE */

.kontakt{
  background-color: var(--bk-weiss);
  border-radius: 1rem;
  padding: 2rem;
}
.kontakt h2{
  margin: 0;
  font-size: 2rem;
  font-weight: 900;
  color: var(--bk-blau);
}
.kontakt h3{
  margin: 0 0 1rem 0;
  font-size: 2rem;
  font-weight: 400;
  color: var(--bk-rot);
}

.honig{
  position: absolute;
  left: -9999px;
}
input, textarea, button{
  background-color: #F9F7F5;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 0.5rem;
  width: 100%;
  min-height: 3rem;
  font-family: "Cabrio", -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  font-weight: 400;
  color: var(--bk-blau);
  font-size: 1.125rem;
  padding: 0.5rem 0.8rem;
}

textarea{
  resize: vertical;
  padding: 1rem;
}
label{
  margin: 0.6rem 0 0.3rem;
  display: block;
  font-weight: 700;
}
.label-regular{
  font-weight: 400;
}


.fehlermeldung{
  display: none;
}


.fehlermeldung{
  color: var(--bk-rot);
}
form{
  display: grid;
  grid-template-columns:1fr;
  grid-template-rows: auto ;
  row-gap: 1.5rem;
  column-gap: 1.5rem;
}
.form-2fr{
  grid-column-end: span 1;
}
@media only screen and (min-width: 940px){
  form{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto ;
  }
  .form-2fr{
    grid-column-end: span 2;
}
}

input[type="file"]{
  background-color: var(--bk-blau);
  border: none;
  color: var(--bk-rosa);
  padding: 2rem 2rem 1.5rem 2rem;
}

input::file-selector-button {
  display: inline-block;
  cursor: pointer;
  font-weight: 500;
  font-family: "Cabrio", -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  font-style: normal;
  color: var(--bk-blau);
  background-color: var(--bk-rosa);
  border-radius: 0.5rem ;
  padding: 0.625rem 1.125rem;
  display: inline-block;
  margin: 0 1rem 1rem 0;
  height: 100%;
  border: none;
}
input::file-selector-button:hover {
  background-color: var(--bk-rot);
}
button, input[type="submit"]{
  display: inline-block;
  cursor: pointer;
  font-weight: 500;
  font-family: "Cabrio", -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  font-style: normal;
  color: var(--bk-creme);
  background-color: var(--bk-blau);
  border-radius: 0.5rem ;
  padding: 0.625rem 1.125rem;
  display: inline-block;
  margin: 0 1rem 1rem 0;
  width: auto;
  border: none;
  transition: all 0.2s ease-out 0s;
}
button:hover, input[type="submit"]:hover{
  margin: -0.5rem 1rem 1.5rem 0;m;
  text-decoration: none;
  outline: 40px solid var(--bk-rot);
}

.invalid label{
  color: var(--bk-rot);
  opacity: 1;
  font-weight: 700;
}
.invalid input,
.invalid textarea{
  border: 3px solid var(--bk-rot);
}

.invalid .fehlermeldung{
  display: block;
}
#richtige-antwort{
  display: none;
}
.alerts{
  background-color: var(--bk-rot);
  color: var(--bk-weiss);
  border-radius: 0.5rem;
  padding: 1rem;
  margin-bottom: 1rem;
}
.alerts h4{
  color: var(--bk-weiss);
  margin: 0.5rem 1rem 0 1rem;
}

.rahmen-weiss{
  background-color: var(--bk-weiss);
  border-radius: 1rem;
  padding: 2rem;
  font-family: Cabrio;
  font-size: 1.5625rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}


.stellenbeschreibung{
  font-family: Cabrio;
  font-size: 1.5625rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  background-color: var(--bk-rosa);
  padding-top: 12rem;
  padding-bottom: 3rem;
}

.stellenbeschreibung h2, .stellenbeschreibung h3{
  text-align: left;
  color: var(--bk-blau);
}