/*
* Orange Container
*/ 

/* 
* Icons center vertical 
* nur wenn Klassen  .orange-blog-background und .icons vorhanden sind
*/

.orange-blog-background.icons .row-wrapper {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.orange-blog-background {
  color: var(--kk-orange-background-font-color) !important; 
  background-color: var(--kk-orange);
  padding:10px 30px;
}



.orange-blog-background .column-content-inner {
  color: white !important;
display: flex;
  justify-content: center;  /* Zentriert den Button horizontal */
  align-items: center;      /* Optional: Vertikal zentrieren, falls gewünscht */
  flex-direction: column;   /* Wichtig: stellt sicher, dass der Text oben bleibt und der Button darunter */
  text-align: left;       /* Text innerhalb des Containers zentrieren */
}

.orange-blog-background .button-medium {
  display: inline-block;    /* Sicherstellen, dass der Button als Inline-Block behandelt wird */
  padding: 10px 20px;       /* Optional: fügt dem Button etwas Innenabstand hinzu */
  margin-top: 20px;         /* Optional: Abstand zwischen dem Text und dem Button */
}



.orange-blog-background h1,
.orange-blog-background h2,
.orange-blog-background h3,
.orange-blog-background h4,
.orange-blog-background h5,
.orange-blog-background h6,
.orange-blog-background p,
.orange-blog-background a,
.orange-blog-background span,
.orange-blog-background li,
.orange-blog-background strong {   color: var(--kk-orange-background-font-color); }

/*
* grau Container
*/ 

/* 
* Icons center vertical 
* nur wenn Klassen  .grau-blog-background und .icons vorhanden sind
*/

.grau-blog-background.icons .row-wrapper {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.grau-blog-background {
  color: var(--kk-grau-background-font-color) !important; 
  background-color: var(--kk-background);
  padding:10px 30px;
}



.grau-blog-background .column-content-inner {
  color: white !important;
display: flex;
  justify-content: center;  /* Zentriert den Button horizontal */
  align-items: center;      /* Optional: Vertikal zentrieren, falls gewünscht */
  flex-direction: column;   /* Wichtig: stellt sicher, dass der Text oben bleibt und der Button darunter */
  text-align: left;       /* Text innerhalb des Containers zentrieren */
}

.grau-blog-background .button-medium {
  display: inline-block;    /* Sicherstellen, dass der Button als Inline-Block behandelt wird */
  padding: 10px 20px;       /* Optional: fügt dem Button etwas Innenabstand hinzu */
  margin-top: 20px;         /* Optional: Abstand zwischen dem Text und dem Button */
}



.grau-blog-background h1,
.grau-blog-background h2,
.grau-blog-background h3,
.grau-blog-background h4,
.grau-blog-background h5,
.grau-blog-background h6,
.grau-blog-background p,
.grau-blog-background a,
.grau-blog-background span,
.grau-blog-background li,
.grau-blog-background strong {   color: var(--kk-grau-background-font-color); }




/*
* beige Container
*/ 

/* 
* Icons center vertical 
* nur wenn Klassen  .beige-blog-background und .icons vorhanden sind
*/

.beige-blog-background.icons .row-wrapper {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.beige-blog-background {
  color: var(--kk-beige-background-font-color) !important; 
  background-color: var(--kk-beige);
  padding:10px 30px;
}



.beige-blog-background .column-content-inner {
  color: white !important;
display: flex;
  justify-content: center;  /* Zentriert den Button horizontal */
  align-items: center;      /* Optional: Vertikal zentrieren, falls gewünscht */
  flex-direction: column;   /* Wichtig: stellt sicher, dass der Text oben bleibt und der Button darunter */
  text-align: left;       /* Text innerhalb des Containers zentrieren */
}

.beige-blog-background .button-medium {
  display: inline-block;    /* Sicherstellen, dass der Button als Inline-Block behandelt wird */
  padding: 10px 20px;       /* Optional: fügt dem Button etwas Innenabstand hinzu */
  margin-top: 20px;         /* Optional: Abstand zwischen dem Text und dem Button */
}



.beige-blog-background h1,
.beige-blog-background h2,
.beige-blog-background h3,
.beige-blog-background h4,
.beige-blog-background h5,
.beige-blog-background h6,
.beige-blog-background p,
.beige-blog-background a,
.beige-blog-background span,
.beige-blog-background li,
.beige-blog-background strong {   color: var(--kk-beige-background-font-color); }