/*
 * GENERATED — do not edit by hand.
 * Source: custom-css-js plugin snippets, migrated in Phase 2.5.
 * Rebuild: bash scripts/migrate-snippets.sh
 * Order is DESCENDING snippet id, matching what the plugin emitted.
 */

/* ═══ #3021 MyBlog ═══ */
/* Add your CSS code here.

For example:
.example {
    color: red;
}

For brushing up on your CSS knowledge, check out http://www.w3schools.com/css/css_syntax.asp

End of comment */ 

@media (min-width: 1141px) {
	.fb-post-stack {
		position: sticky;
		top: 14rem;
	}
}
@media (min-width: 1471px) {
	.fb-post-stack {
		position: sticky;
		top: 10rem;
	}
}

/* ═══ #2814 Post Template ═══ */
/* Add your CSS code here.

For example:
.example {
    color: red;
}

For brushing up on your CSS knowledge, check out http://www.w3schools.com/css/css_syntax.asp

End of comment */ 


.post-template-max-width {
	width: 350px;
}
@media (min-width: 600px) {
	.post-template-max-width,
	.blog-featured-image-width{
		width: 250px;
	}
}
@media (min-width: 685px) {
	.post-template-max-width,
	.blog-featured-image-width{
		width: 270px;
	}
}
@media (min-width: 889px) {
	.post-template-max-width,
	.blog-featured-image-width{
		width: 350px;
	}
}
@media (min-width: 1141px) {
	.post-template-max-width,
	.blog-featured-image-width{
		width: 200px;
	}
}
@media (min-width: 1208px) {
	.post-template-max-width,
	.blog-featured-image-width{
		width: 225px;
	}
}
@media (min-width: 1384px) {
	.post-template-max-width,
	.blog-featured-image-width{
		width: 300px;
	}
}
@media (min-width: 1500px) {
	.post-template-max-width,
	.blog-featured-image-width{
		width: 350px;
	}
}

/* ═══ #2776 MySocialMediaEmbed ═══ */
/* Add your CSS code here.

For example:
.example {
    color: red;
}

For brushing up on your CSS knowledge, check out http://www.w3schools.com/css/css_syntax.asp

End of comment */ 


@media (max-width: 698px) {
	.fb-post {
		width: 23rem;
	}
}
@media (min-width: 1141px) and (max-width: 1626px) {
	.fb-post {
		width: 23rem;
	}
}

/* ═══ #2473 Event Post ═══ */
/* Add your CSS code here.

For example:
.example {
    color: red;
}

For brushing up on your CSS knowledge, check out http://www.w3schools.com/css/css_syntax.asp

End of comment */ 


.even-post-p-max-width-2 {
	max-width: 25rem;
}
.event-post-p-3 {
	max-width: 12rem;
}
@media (min-width: 1103px) {
	.even-post-p-max-width {
		max-width: 30rem;
	}
}
@media (min-width: 1349px) {
	.even-post-p-max-width {
		max-width: 35rem;
	}
}
@media (min-width: 1511px) {
	.even-post-p-max-width {
		max-width: 40rem;
	}
}



@media (max-width: 775px) {
	.eventCarousel {
  		width: 15rem;
	}
}
@media (min-width: 776px) and (max-width: 1006px) {
	.eventCarousel {
		width: 18rem;
	}
}
@media (min-width: 1007px) and (max-width: 1315px) {
	.eventCarousel {
		width: 50rem;
	}
}


@media (max-width: 395px) {
	.featured-image-width {
		width: 316px;
	}
}
@media (min-width: 601px) {
	.featured-image-width {
		width: 140px;
	}
}
@media (max-width: 701px) {
	.event-address-padding {
		padding-top: 2rem;
	}
}

@media (min-width: 769px) {
	.featured-image-width {
		width: 180px;
	}
}
@media (min-width: 919px) {
	.featured-image-width {
		width: 225px;
	}
}
@media (min-width: 1038px) {
	.featured-image-width {
		width: 255px;
	}
}
@media (min-width: 1163px) {
	.featured-image-width {
		width: 300px;
	}
}
@media (min-width: 1370px) {
	.featured-image-width {
		width: 350px;
	}
}


@media (min-width: 471px) {
	.event-post-stack {
		padding-right: 2rem;
	}
}
@media (min-width: 541px) {
	.event-post-stack {
		padding-right: 4rem;
	}
}
@media (min-width: 691px) {
	.even-post-stack-2 {
		padding-bottom: 1.5rem;
	}
}
@media (min-width: 665px) {
	.row2-stack1 {
		padding-right: 1.5rem;
	}
}
@media (max-width: 1102px) {
	.event-stack-visibility {
		display: none
	}
}
@media (min-width: 1103px) {
	.event-post-p-3 {
		display: none;
	}
}
@media (min-width: 600px) {
	.event-stack-visibility-2 {
		display: none
	}
}
@media (max-width: 599px) {
	.event-post-p-3 {
		display: none;
	}
}
@media (max-width: 1335px) {
	.event-post-spacer {
		display: none;
	}
}


@media (min-width: 600px) and (max-width: 690px) {
	.event-stack-margin {
		margin-bottom: 1rem;
	}
}

/* ═══ #2096 Max-Width for Kurse and Preise ═══ */
/* Add your CSS code here.

For example:
.example {
    color: red;
}

For brushing up on your CSS knowledge, check out http://www.w3schools.com/css/css_syntax.asp

End of comment */ 

@media (min-width: 1300px) {
	.my-max-width {
		max-width: 1250px;
	}
}

/* ═══ #1951 MyPrices ═══ */
/* Add your CSS code here.

For example:
.example {
    color: red;
}

For brushing up on your CSS knowledge, check out http://www.w3schools.com/css/css_syntax.asp

End of comment */ 

@media (max-width: 489px) {
	.prices-heading-big {
		display: none;
	}
}
@media (min-width: 490px) {
	.prices-heading-small {
		display: none;
	}
}

/* First paragraph inside stack of columns 2, 3, and 4.
However, the order is as follows:
stack-1 stack-3 stack-2*/
.prices-stack-2 {
		padding-top: 1.3rem;
	}
@media (min-width: 393px) {
	.prices-stack-2 {
		padding-top: 2.7rem;
	}
}
@media (min-width: 404px) {
	.prices-stack-2 {
		padding-top: 0.8rem;
	}
}
@media (min-width: 411px) {
	.prices-stack-2 {
		padding-top: 2.6rem;
	}
}
@media (min-width: 435px) {
	.prices-stack-2 {
		padding-top: 1.3rem;
	}
}
@media (min-width: 442px) {
	.prices-stack-2 {
		padding-top: 0;
	}
}
@media (min-width: 593px) {
	.prices-stack-2 {
		padding-top: 1.4rem;
	}
}

@media (max-width: 411px) {
	.col1-8lessons {
		padding-top: 3rem;
	}
	.monatlich {
		padding-top: 6.5rem;
	}
	.col1-last-p {
		padding-bottom: 1rem;
	}
}
@media (min-width: 412px) {
	.col1-8lessons {
		padding-top: 3rem;
	}
	.monatlich {
		padding-top: 5.3rem;
	}
}
@media (min-width: 439px) {
	.col1-8lessons {
		padding-top: 3rem;
	}
	.monatlich {
		padding-top: 4rem;
	}
}
@media (min-width: 487px) {
	.col1-8lessons {
		padding-top: 3rem;
	}
	.monatlich {
		padding-top: 5.1rem;
	}
}
@media (min-width: 540px) {
	.col1-8lessons {
		padding-top: 3rem;
	}
	.monatlich {
		padding-top: 5.6rem;
	}
}
@media (min-width: 600px) {
	.col1-8lessons {
		padding-top: 3rem;
	}
	.monatlich {
		padding-top: 5.9rem;
	}
}
@media (min-width: 732px) {
	.col1-8lessons {
		padding-top: 3rem;
	}
	.monatlich {
		padding-top: 6.6rem;
	}
}





@media (min-width: 782px) {
	.prices-stack-1 {
		padding-top: 5.4rem
	}
	.prices-stack-2 {
		padding-top: 3.1rem;
	}
	.col1-8lessons {
		padding-top: 5rem;
	}
	.monatlich {
		padding-top: 10.5rem;
	}
}
@media (min-width: 835px) {
	.prices-stack-1 {
		padding-top: 3.9rem;
	}
	.prices-stack-2 {
		padding-top: 1.5rem;
	}
	.col1-8lessons {
		padding-top: 5rem;
	}
	.monatlich {
		padding-top: 9.4rem;
	}
}
@media (min-width: 841px) {
	.prices-stack-1 {
		padding-top: 2.5rem;
	}
	.prices-stack-2 {
		padding-top: 0;
	}
	.prices-stack-3 {
		padding-top: .9rem;
	}
	.col1-8lessons {
		padding-top: 5rem;
	}
	.monatlich {
		padding-top: 8rem;
	}
}
@media (min-width: 846px) {
	.prices-stack-1 {
		padding-top: 4.1rem;
	}
}

@media (min-width: 850px) {
	.prices-stack-1 {
		padding-top: 4rem;
	}
	.prices-stack-3 {
		padding-top: 2.5rem;
	}
}
@media (min-width: 862px) {
	.prices-stack-1 {
		padding-top: 1.6rem;
	}
	.prices-stack-2,
	.prices-stack-3 {
		padding-top: 0;
	}
	.col1-8lessons {
		padding-top: 3rem;
	}
	.monatlich {
		padding-top: 7.7rem;
	}
}
@media (min-width: 980px) {
	.monatlich {
		padding-top: 8rem;
	}
}
@media (min-width: 1032px) {
	.monatlich {
		padding-top: 8.4rem;
	}
}
@media (min-width: 1034px) {
	.monatlich {
		padding-top: 9.6rem;
	}
}
@media (min-width: 1154px) {
	.monatlich {
		padding-top: 10.2rem;
	}
}
@media (min-width: 1233px) {
	.prices-stack-2 {
		padding-top: 1.6rem;
	}
	.monatlich {
		padding-top: 10.5rem;
	}
}
@media (min-width: 1288px) {
	.monatlich {
		padding-top: 10.8rem;
	}
}

/* ═══ #1823 MyOurMission ═══ */
/* Add your CSS code here.

For example:
.example {
    color: red;
}

For brushing up on your CSS knowledge, check out http://www.w3schools.com/css/css_syntax.asp

End of comment */ 

@media (min-width: 782px) {
	.ourMission-column-1 {
		padding-left: 4.5rem;
	}
}
@media (min-width: 1400px) {
	.ourMission-column-1 {
		padding-left: 5rem;
	}
}
@media (min-width: 1440px) {
	.ourMission-column-1 {
		padding-left: 6rem;
	}
}
@media (min-width: 1574px) {
	.ourMission-column-1 {
		padding-left: 7.5rem;
	}
}
@media (min-width: 1700px) {
	.ourMission-column-1 {
		padding-left: 9rem;
	}
}
@media (min-width: 1792px) {
	.ourMission-column-1 {
		padding-left: 13rem;
	}
}

@media (min-width: 782px) and (max-width: 1039px) {
	/* Unsere Mission heading */
	.ourMission-column-1-unsere-mission {
		text-align: start;
	}
}

/* ═══ #1723 MyFlipIcons ═══ */
/* Add your CSS code here.

For example:
.example {
    color: red;
}

For brushing up on your CSS knowledge, check out http://www.w3schools.com/css/css_syntax.asp

End of comment */ 

@media (max-width: 781px) {
	.ticss-aeb57856,
	.ticss-bcf942dd{
		padding-top: 1.5rem;
	}
}

/* ═══ #1712 MyFooter ═══ */
/* Add your CSS code here.

For example:
.example {
    color: red;
}

For brushing up on your CSS knowledge, check out http://www.w3schools.com/css/css_syntax.asp

End of comment */ 

@media (max-width: 781px) {
	.footer-stack-icons {
		padding-bottom: 1rem;
	}
}

/* ═══ #1654 MyAbout ═══ */
/* Add your CSS code here.

For example:
.example {
    color: red;
}

For brushing up on your CSS knowledge, check out http://www.w3schools.com/css/css_syntax.asp

End of comment */ 
@media (max-width: 781px) {
	.philosophie-paragraph,
	.philosophie-heading {
		padding: 0 3.8rem;
	}
	
	/*Wir engagieren uns für eine Zukunft voller Bildungschancen*/
	.bildung-column-1,
	.bildung-column-2 {
		padding-top: 2rem;
	}
}
@media (min-width: 782px) and (max-width: 1400px) {
	.philosophie-paragraph,
	.philosophie-heading {
		padding: 0 2rem;
	}
}
@media (max-width: 734px) {
	.aboutHero-heading-1 {
		display: none;
	}
}
@media (min-width: 735px) {
	.aboutHero-heading-2 {
		display: none;
	}
}
@media (max-width: 1799px) {
	.folge-uns-section {
		padding: 0 0 1.5rem 0;
	}
}
@media (min-width: 782px) {
	.folge-uns-stack {
		padding-top: 1.5rem;
	}
}
@media (max-width: 1091px) {
	.folge-uns-folge-uns {
		padding-bottom: .5rem;
	}
}

/* ═══ #1602 MyCarousel ═══ */
/* Add your CSS code here.

For example:
.example {
    color: red;
}

For brushing up on your CSS knowledge, check out http://www.w3schools.com/css/css_syntax.asp

End of comment */ 

@media (max-width: 768px) {
	.myCarousel {
  		width: 15rem;
	}
}
@media (min-width: 769px) and (max-width: 1000px) {
	.myCarousel {
		width: 40rem;
	}
}
@media (min-width: 1001px) and (max-width: 1315px) {
	.myCarousel {
		width: 50rem;
	}
}

/* ═══ #1507 MyHeader ═══ */
/* Add your CSS code here.

For example:
.example {
    color: red;
}

For brushing up on your CSS knowledge, check out http://www.w3schools.com/css/css_syntax.asp

End of comment */ 

.myHeader-padding {
	z-index: 1000;
}


@media (max-width: 599px) {
	.myHeader-padding {
		padding: 0 1.1rem;
	}
}
/*@media (max-width: 891px) {
	body .header-logo-text {
		width: 130px;
	}
	body .header-site-logo {
		width: 75px;
	}
}*/
body .header-logo-text {
		width: 130px;
	}
	body .header-site-logo {
		width: 75px;
	}
@media (min-width: 600px) and (max-width: 1349px) {
	body .header-nav {
		width: 100%;
		padding: 0 1rem;
	}
	.header-logo-row {
		padding-bottom: 1rem;
		padding-left: 3rem;
	}
}
@media (min-width: 1350px) {
	.header-nav {
		padding-right: 7rem;
	}
	.header-logo-row {
		padding-left: 1.7rem;
	}
}
/* Andres added 23.09 */

@media (min-width: 1280px) {
	.myHeader-padding {
		width: 100%;
		margin: 0 auto;
	} 
	.header-nav {
		justify-content: flex-end;
	}
}

/* ═══ #1448 MyForm ═══ */
/* Add your CSS code here.

For example:
.example {
    color: red;
}

For brushing up on your CSS knowledge, check out http://www.w3schools.com/css/css_syntax.asp

End of comment */ 

@media (max-width: 755px) {
	body .myForm-heading,
	body .myForm-paragraph {
		padding: 0 2rem;
	}
}

/* ═══ #1446 Cookies and Datenschutz ═══ */
/* Add your CSS code here.

For example:
.example {
    color: red;
}

For brushing up on your CSS knowledge, check out http://www.w3schools.com/css/css_syntax.asp

End of comment */ 

@media (max-width: 650px) {
	body .cookie-column,
	body .agb-column {
		padding: 0 2rem;
	}
}

/* ═══ #1090 Media Queries ═══ */
/* Base styles for .my-class */
body .my-class {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1rem; 
    padding-bottom: 2rem;
}

/* Flex item base styles */
body .my-class > * { /* Direct children of .my-class */
    flex: 0 1 auto; /* Don't grow, allow shrink, auto basis */
    min-width: 150px; /* Adjust as needed */
    margin: 0.5rem; /* Small margin for all sides */
}

/* Mobile devices */
@media (max-width: 600px) {
   body .my-class {
        margin-left: 1rem;
        margin-right: 1rem;
	   padding-bottom: 2rem;
    }
   body .my-class > * {
        min-width: 100px; /* Smaller min-width for mobile */
    }
}

/* Tablet devices */
@media (min-width: 601px) and (max-width: 1024px) {
   body .my-class {
        margin-left: 2rem;
        margin-right: 2rem;
    }
   body .my-class > * {
        min-width: 120px; /* Slightly larger min-width for tablets */
    }
}

/* Small desktops/large tablets */
@media (min-width: 1025px) and (max-width: 1440px) {
   body .my-class {
        margin-left: 10rem;
        margin-right: 10rem;
    }
}

/* Large screens */
@media (min-width: 1441px) {
   body .my-class {
        margin-left: 15rem;
        margin-right: 15rem;
    }
   body .my-class > * {
        min-width: 150px; /* Standard min-width for large screens */
    }
}

body .my-price {
}

/* Base styles apply to mobile devices by default, no media query needed */
body .my-price {
  font-size: 18px ; /* Smaller font size for mobile */
  padding: 29px !important;/* Suitable padding for mobile */
}


@media only screen and (min-width: 768px) {
 body .my-price { 
    font-size: 16px ;
    padding: 100px;
  }
}

@media only screen and (min-width: 820px) {
 body .my-price { 
    font-size: 8px ;
    padding: 8px ;
  }
}



/* Style applies to medium devices (desktops, 992px and up) */
@media only screen and (min-width: 992px) {
 body .my-price {
    font-size: 18px ; /* Standard font size for desktops */
    padding: 20px ; /* More padding for desktops */
  }
}

/* Style applies to large devices (large desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
 body .my-price {
    font-size: 20px ; /* Larger font size for large desktops */
    padding: 25px ; /* More padding for a spacious layout */
  }
}

/* Extra-large devices (extra-large desktops, 1400px and up) */
@media only screen and (min-width: 1400px) {
 body .my-price {
    font-size: 20px ; /* Larger font size for extra-large desktops */
    padding: 30px ; /* Maximum padding for extra spacious layout */
  }
}

/* ═══ #717 Price Block Transition Animation ═══ */
/* Add your CSS code here.

For example:
.example {
    color: red;
}

For brushing up on your CSS knowledge, check out http://www.w3schools.com/css/css_syntax.asp

End of comment */ 

/*mouse over zoom effect for price list block elements */
.price-box{
  transition: transform 0.3s ease;
}
.price-box:hover{
  transform: scale(1.05);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}

/*mouse over zoom effect for post blog thumbnail images */
.blog-box {
  transition: transform 0.3s ease;
}

.blog-box:hover {
  transform: scale(1.05);
}