/*
* Theme Name: Kita Hirzenkaefer Theme
* Description: Kita Hirzenkaefer Wordpress Template
* Author: Tina Widmer, wit media&design
* Version: 1.0
*/

/* Google fonts */

@import url('https://fonts.googleapis.com/css2?family=Coming+Soon&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

/* CSS Variablen */

:root {
    --schrift: rgba(0,0,0,1.00);
    --button: rgba(235,242,242,1.00);
	--blau: rgba(73,146,191,1.00);
	--hellblau: rgba(235, 242, 242,1.00);
}

/*CSS reset*/
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

/* Haupt-Container */
#container {
	max-width: 1600px;
	margin:auto;
	text-align:left;
	aspect-ratio:auto;
	padding: 1rem 2rem 1rem 2rem;
}


/*allgemeine HTML-Elemente*/

body {
	font-family: "Roboto", "sans-serif";
	font-weight: 400;
	text-align: center;
	display:flex;
}

html, body {
	scroll-behavior: smooth;
}

img {
	width:100%;
}

main {
	position:relative;
}

a {
	text-decoration:none;
	color: var(--schrift);
}

a:hover {
	text-decoration:underline;
}

p {
    -webkit-hyphens: auto; /* Safari/iOS */
    -ms-hyphens: auto;     /* Alte Internet Explorer */
    hyphens: auto;         /* Standard */
    word-wrap: break-word; /* Sicherheit für sehr lange Wörter */
}


/* ============= Typografie =============== */

/* Schriften */

h1, h2, h3 {
	font-family: "Coming Soon", cursive;
}

h1 {
	font-weight:600;
	font-size:2rem;
	padding-top:2rem;
	padding-bottom:1rem;
}

h2 {
	font-size:1.5rem;
	padding-top:1.5rem;
	padding-bottom:0.75rem;
}

h3 {
	font-size:1.25rem;
	padding-top:1.5rem;
	padding-bottom:0.5rem;
}

p {
	line-height:1.5rem;
}

.zitat_box {
	width: 60%;
	align-self:center;
	justify-self:center;
}

.zitat {
	font-family: "Coming Soon", cursive;
	font-size: 1.5rem;
	line-height: 150%;
	color: var(--blau);
	justify-self:center;
	align-self:center;
	padding: 1rem 1rem 0;
}

.zitat_autor {
	font-family: "Coming Soon", cursive;
	font-size: 0.7rem;
	color: var(--blau);
	justify-self:flex-end;
	align-self:flex-end;
	padding-right: 2rem;
}


/* ============= Header =============== */

header {
	display: flex;
	flex-direction: row;
	justify-content:space-between;
	align-conten: flex-end;
}

nav {
	font-family: "Coming Soon", cursive;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:space-between;
	align-content: flex-end;
}

nav ul {
	list-style-type:none;
	font-size:1rem;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	gap: 2rem;
}

nav a {
	color: black;
	text-decoration:none;
}

nav a:hover {
	text-decoration:underline;
}

.logo {
	width:8rem;
	height:auto;
	justify-self:flex-end;
	align-self:center;
}

nav ul li {
    position: relative;
}

nav ul li ul.sub-menu {
    display: none;
    position: absolute;
    z-index: 999;
	left: -1rem;
}

nav ul li:hover > ul.sub-menu {
    display: block;
	font-size: 0.9rem;
	background-color: white;
	padding: 0.5rem 1rem 1rem 1rem;
}

#hamburger {
	display:none;
	align-self:center;
	justify-self:flex-start;
}

#symbol {
	height:2rem;
	z-index:43;
}

.nav_open {
	left:0rem;
	display:flex !important;
}

nav ul li.current-menu-item > a {
    color: var(--blau);
}

/* Falls es ein Unterpunkt (Sub-Menu) ist, der aktiv ist */
nav ul li ul.sub-menu li.current-menu-item > a {
    color: var(--blau); /* Optional: Farbe ändern, damit es auffällt */
}

/* ============= Footer =============== */

footer p {
	font-family: "Coming Soon", cursive;
}

footer a {
	color: var(--schrift);
}

footer a:hover {
	font-size: 1.05rem;;
}

.footer_container {
	display: flex;
	flex-direction:row;
	justify-content:space-between;
	align-content: flex-start;
}

.footer_rechts img {
	width: 2rem;
	height: auto;
}

/* ============= Designelemente ===============*/

.pinselstrich {
	border: none;
	border-bottom: 4px solid transparent;
	border-image-source: url('design/brush-line.svg');
	border-image-slice: 20;
	border-image-repeat: round;
	margin: 1rem 0 2rem;
	height: 0;
}



/* ============= Kasten =============== */

.rahmen {
	border: 12px solid transparent;
	border-image-source: url('design/brush-border.png');
	border-image-slice: 20;
	border-image-repeat: round;
	padding: 0 1rem;
	position:relative !important;
}

.kasten-flexibel {
	display: flex;
    align-items: flex-start !important;
}

.kasten-flexibel.rahmen {
    height: auto; 
}


/* ============= Buttons =============== */

.wp-block-button__link {
	background-color: var(--button);
	color: var(--schrift);
	font-family: "Coming Soon", cursive;
	font-size: 1rem;
	text-decoration:none;
	border: 12px solid transparent;
	border-image-source: url('design/brush-border.png');
	border-image-slice: 20;
	border-image-repeat: round;
	padding: 0; 
	margin: 1rem 0;
}

.wp-block-button__link:hover {
	text-decoration:underline;
}

.download_link {
	font-family: "Coming Soon", cursive;
	font-size: 1rem;
}

.download_button {
	margin: 2rem 0;
}

.download_icon {
	width: 2.5rem !important;
	height: 2.5rem !important;
	min-width: 2.5rem !important;
	min-height: 2.5rem !important;
	flex-shrink: 0 !important;
}

.startseite_button {
	width:40%!important;
	margin: 0 auto;
}

/* ============= Grid Mosaik =============== */
.mosaik_container {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 1rem;
    grid-template-areas: 
        "garten garten garten zitat zitat aktivitaeten aktivitaeten"
        "garten garten garten zitat zitat aktivitaeten aktivitaeten"
        "wegbegleitung wegbegleitung wald wald wald aktivitaeten aktivitaeten"
        "wegbegleitung wegbegleitung wald wald wald . ." /* Punkte für Leerraum */
        "wegbegleitung wegbegleitung eingewoehnung eingewoehnung elternarbeit elternarbeit elternarbeit"
        ". . eingewoehnung eingewoehnung elternarbeit elternarbeit elternarbeit"
        ". . eingewoehnung eingewoehnung . . ."; /* Punkte für Leerraum */
    width: 100% !important;
}

.grid_garten {
	grid-area: garten;
	padding: 1rem 1rem;
}

.grid_zitat {
	grid-area: zitat;
	font-family: "Coming Soon", cursive;
	font-size: 1.5rem;
	line-height: 150%;
	color: var(--blau);
	justify-self:center;
	align-self:center;
	padding: 1rem 1rem;
}

.grid_aktivitaeten {
	grid-area: aktivitaeten;
	padding: 1rem 1rem;
}

.grid_wegbegleitung {
	grid-area: wegbegleitung;
	padding: 1rem 1rem;
}

.grid_eingewoehnung {
	grid-area: eingewoehnung;
	padding: 1rem 1rem;
}

.grid_wald {
	grid-area: wald;
	padding: 1rem 1rem;
}

.grid_elternarbeit {
	grid-area: elternarbeit;
	padding: 1rem 1rem;
}


.mosaik_ueber_uns {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 1rem;
    grid-template-areas: 
        "gruppen gruppen team team team"
        "gruppen gruppen team team team"
        "leitbild leitbild leitbild vorstand vorstand"
		"leitbild leitbild leitbild vorstand vorstand";
    width: 100% !important;
}

.grid_gruppen {
	grid-area: gruppen;
	padding: 1rem 1rem;
}

.grid_team {
	grid-area: team;
	padding: 1rem 1rem;
	gap: 2rem;
}

.spalte_bild {
	justify-content:center;
	align-content:center;
}

.grid_leitbild {
	grid-area: leitbild;
	padding: 1rem 1rem;
}

.grid_vorstand {
	grid-area: vorstand;
	padding: 1rem 1rem;
}

.mosaik_team {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 1rem;
    grid-template-areas: 
        "leitung leitung leitung . . . ."
        "leitung leitung leitung stv stv stv stv"
        "leitung leitung leitung stv stv stv stv"
        "ma1 ma1 ma1 ma1 zitat zitat zitat"
        "ma1 ma1 ma1 ma1 ma3 ma3 ma3"
        "ma2 ma2 ma2 ma2 ma3 ma3 ma3"
        "ma2 ma2 ma2 ma2 ma3 ma3 ma3"
        "ma4 ma4 ma4 . . . ."
        "ma4 ma4 ma4 ma6 ma6 ma6 ma6"
        "ma4 ma4 ma4 ma6 ma6 ma6 ma6"
		" . ma5 ma5 ma5 ma5 ma7 ma7";
		" . ma5 ma5 ma5 ma5 ma7 ma7";
    width: 100% !important;
}

.grid_leitung {
	grid-area: leitung;
	padding: 1rem 1rem;
}

.grid_stv {
	grid-area: stv;
	padding: 1rem 1rem;
}

.grid_ma1 {
	grid-area: ma1;
	padding: 1rem 1rem;
}

.grid_ma2 {
	grid-area: ma2;
	padding: 1rem 1rem;
}

.grid_ma3 {
	grid-area: ma3;
	padding: 1rem 1rem;
}

.grid_ma4 {
	grid-area: ma4;
	padding: 1rem 1rem;
}

.grid_ma5 {
	grid-area: ma5;
	padding: 1rem 1rem;
}

.grid_ma6 {
	grid-area: ma6;
	padding: 1rem 1rem;
}

.grid_ma7 {
	grid-area: ma7;
	padding: 1rem 1rem;
}

.ma_breit {
	width:150%;
}


/* ============= Galerien ===============*/

.bild_panorama img {
	aspect-ratio: 16 / 6 !important;
} 



.hidden_gallery figure.wp-block-image:not(:first-child) {
    display: none;
}

.galerie_box {
	padding: 1rem;
    box-sizing: border-box;
}

/* ============= Kontaktformular ===============*/

.custom-map-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 80%;
}

.custom-map-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    border: 0;
}

#formcontainer {
	text-align: left;
	margin-top:1rem;
}

input, select, textarea {
	border:none;
	background-color:var(--hellblau);
	padding:0.5rem;
	font-size:1rem;
	font-family: "Roboto", "sans-serif";
	font-weight:200;
	margin-top:0.5rem;
	width:100%;
}

textarea {
	height:10rem;
	margin-bottom:0.5rem;
}

input[type=submit]{
	background-color:var(--hellblau);
	text-decoration:none;
	font-family: "Coming Soon", cursive;
	border: 12px solid transparent;
	border-image-source: url('design/brush-border.png');
	border-image-slice: 20;
	border-image-repeat: round;
	width:20rem;
	text-align:center;
	display:block;
	margin: 0 auto;
}

input[type=submit]:hover{
	text-decoration:underline;
	font-weight:400;
}


/* ============= Kinderfiguren ===============*/

.kind_startseite_infoblock {
	position:absolute;
	width: 150px;
	height: auto;
	bottom: -11px;
    left: -5px;
    z-index: 10;
    margin: 0 !important;
}

.kind_startseite_zeitblock {
	position:absolute;
	width: 110px;
	height: auto;
	transform: rotate(10deg);
	display: inline-block;
	top: -213px;
    right: 10px;
    z-index: 10;
    margin: 0 !important;
}

.kind_startseite_footerlinie {
	position:absolute;
	width: 130px;
	height: auto;
	bottom: -48px;
    right: 35%;
    z-index: 10;
    margin: 0 !important;
}

.kind_angebot_trennlinie {
	position:absolute;
	width: 130px;
	height: auto;
	transform: rotate(-5deg);
	bottom: 0px;
    right: 10%;
    z-index: 10;
    margin: 0 !important;
}

.kind_angebot_elternarbeit {
	position:absolute;
	width: 130px;
	height: auto;
	top: -155px;
    right: 5%;
    z-index: 10;
    margin: 0 !important;
}


.kind_angebot_footerlinie {
	position:absolute;
	width: 150px;
	height: auto;
	bottom: -20px;
    left: 10%;
    z-index: 10;
    margin: 0 !important;
}

.kind_betreuungszeiten_footerlinie {
	position:absolute;
	width: 120px;
	height: auto;
	transform: rotate(7deg);
	bottom: -20px;
    right: 5%;
    z-index: 10;
    margin: 0 !important;
}

.kind_ueberuns_trennlinie {
	position:absolute;
	width: 110px;
	height: auto;
	transform: rotate(5deg);
	bottom: -5px;
    right: 0%;
    z-index: 10;
    margin: 0 !important;
}

.kind_ueberuns_footerlinie {
	position:absolute;
	width: 140px;
	height: auto;
	bottom: -18px;
    right: 10%;
    z-index: 10;
    margin: 0 !important;
	transform: scaleX(-1);
}

.kind_gruppen_fuechsli {
	position:absolute;
	width: 130px;
	height: auto;
	top: -160px;
    left: 0;
    z-index: 10;
    margin: 0 !important;
}

.kind_team_footerlinie {
	position:absolute;
	width: 130px;
	height: auto;
	transform: rotate(5deg);
	bottom: -20px;
    right: 10%;
    z-index: 10;
    margin: 0 !important;
}

.kind_team_stv {
	position:absolute;
	width: 130px;
	height: auto;
	top: -160px;
	transform: rotate(-15deg);
    right: -5%;
    z-index: 10;
    margin: 0 !important;
}

.kind_leitbild_bild {
	position:absolute;
	width: 130px;
	height: auto;
	bottom: -35px;
	transform: rotate(0deg) scaleX(-1);
    right: 5%;
    z-index: 10;
    margin: 0 !important;
}

.kind_leitbild_infoblock {
	position:absolute;
	width: 110px;
	height: auto;
	bottom: -11px;
	transform: rotate(10deg);
    right: 10%;
    z-index: 10;
    margin: 0 !important;
}

.kind_vorstand_ma6 {
	position:absolute;
	width: 130px;
	height: auto;
	top: -165px;
	transform: rotate(-10deg);
    left: -5%;
    z-index: 10;
    margin: 0 !important;
}

.kind_vorstand_stv {
	position:absolute;
	width: 110px;
	height: auto;
	top: -210px;
	transform: rotate(10deg);
    right: 10%;
    z-index: 10;
    margin: 0 !important;
}

.kind_impressionen_galerie {
	position:absolute;
	width: 130px;
	height: auto;
	top: -155px;
	transform: rotate(0deg) scaleX(-1);
    left: 0%;
    z-index: 10;
    margin: 0 !important;
}

.kind_impressionen_trennlinie {
	position:absolute;
	width: 130px;
	height: auto;
	top: -150px;
	transform: rotate(-15deg) scaleX(-1);
    left: 5%;
    z-index: 10;
    margin: 0 !important;
}

.kind_impressionen_panorama {
	position:absolute;
	width: 120px;
	height: auto;
	top: -220px;
	transform: rotate(8deg);
    right: 5%;
    z-index: 10;
    margin: 0 !important;
}

.kind_kontakt_footerlinie {
	position:absolute;
	width: 130px;
	height: auto;
	top: -150px;
	transform: rotate(0deg) scaleX(-1);
    right: 10%;
    z-index: 10;
    margin: 0 !important;
}

.kind_kontakt_karte {
	position:absolute;
	width: 120px;
	height: auto;
	top: -190px;
	transform: rotate(0deg) scaleX(-1);
    right: 10%;
    z-index: 10;
    margin: 0 !important;
}

/* ============= Nützliche Klassen =============== */

.hidden {

}

.umbruch {
	display:none;
}

.liste_einzug {
	padding: 1rem 0 1rem 1rem;
	line-height:150%;
}

.position_relative {
	position:relative;
}

/* ===============================================*/
/* Media Queries (Mobile Ansicht */
/* ===============================================*/

/* ======== Bildschirmbreite unter 980px ======== */

@media screen and (max-width:980px) {
	
	header {
	display: flex;
	flex-direction: column-reverse;
	justify-content:space-between;
	align-conten: center;
}
	
} /* Ende Breakpoint für 980 px */


/* ======== Bildschirmbreite unter 800px ======== */

@media screen and (max-width:800px) {
	
	/* mobile Navigation mit Hamburger */
	
	header {
		display:flex;
		flex-direction:row;
		flex-wrap:wrap;
		min-height: 4.5rem;
		align-items:center;
		justify-content:space-between;
	}


	#hauptmenu {
        display: none;
        flex-direction: column;
        position: fixed;
		font-size:1.2rem;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: var(--hellblau);
		opacity:0.95;
        z-index: 9998;
        padding: 6rem 2rem 2rem 2rem;
        overflow-y: auto;
	}
	
	#hauptmenu.nav_open {
		display: flex !important;
	}

  	#hamburger {
        display: block !important;
		position:fixed;
        z-index: 9999;
    }
	
	#symbol {
		height: 2.5rem;
		z-index: 1001;
		display: block;
	}

	
	nav ul li ul.sub-menu {
        display: block !important;
        position: static !important;
        padding: 0.5rem 0;
        text-align: center;
    }
	
	nav ul {
        flex-direction: column !important;
        align-items: center;
        width: 100%;
        gap: 1.5rem;
    }
	
	nav ul li:hover > ul.sub-menu {
        display: block !important;
        background-color: transparent !important;
		font-size:1rem;
		padding: 0.5rem 0;
    }
	
	.footer_container {
		display: flex;
		flex-direction:column;
	}

	.footer_links {
		margin: 0 auto;
		align-content: center;
		text-align:center;
		padding-bottom: 1rem;
	}
	
	.footer_rechts {
		margin: 0 auto;
	}
	
	.hidden {
		display:none;
	}

	.umbruch {
		display:inherit;
	}

	
	.mobil-umkehren {
			display: flex;
			flex-direction: column-reverse !important;
	}

	.mosaik_container {
			grid-template-columns: 1fr !important;
			grid-template-areas: none !important;
			gap: 1.5rem; 
	}

	.mosaik_container > * {
			grid-area: auto !important;
			width: 100% !important;
	}

	.mosaik_ueber_uns {
			grid-template-columns: 1fr !important;
			grid-template-areas: none !important;
			gap: 1.5rem; 
	}
	
	.mosaik_ueber_uns > * {
			grid-area: auto !important;
			width: 100% !important;
	}
	
	.mosaik_team {
    		grid-template-columns: 1fr !important;
			grid-template-areas: none !important;
			gap: 1.5rem; 
	}
	
	.mosaik_team > * {
			grid-area: auto !important;
			width: 100% !important;
	}
	
	.grid_team img {
		aspect-ratio: 3/2 !important;
	}
	
	.grid_leitbild {
		display: flex !important;
		flex-direction: column !important;
	}

	.kind_startseite_infoblock {
		opacity: 0.5;
		bottom: -11px;
		left: -5%;
		z-index: 10;
		margin: 0 !important;
	}

	.kind_startseite_zeitblock {
		opacity: 0.5;
		transform: rotate(10deg);
		display: inline-block;
		top: -210px;
		right: -5%;
		z-index: 10;
		margin: 0 !important;
	}

	.kind_startseite_footerlinie {
		display:none;
	}

	.kind_angebot_trennlinie {
		opacity: 0.5;
		transform: rotate(-5deg);
		bottom: 0px;
		right: -10%;
		z-index: 10;
		margin: 0 !important;
	}

	.kind_angebot_elternarbeit {
		display:none;
	}


	.kind_angebot_footerlinie {
		opacity: 0.5;
		bottom: -20px;
		left: -5%;
		z-index: 10;
		margin: 0 !important;
	}

	.kind_betreuungszeiten_footerlinie {
		opacity: 0.5;
		transform: rotate(7deg);
		bottom: -20px;
		right: 5%;
		z-index: -10;
		margin: 0 !important;
	}

	.kind_ueberuns_trennlinie {
		opacity: 0.5;
		transform: rotate(5deg);
		bottom: -5px;
		right: 0%;
		z-index: -10;
		margin: 0 !important;
	}

	.kind_ueberuns_footerlinie {
		opacity: 0.5;
		bottom: -18px;
		right: 10%;
		z-index: -10;
		margin: 0 !important;
		transform: scaleX(-1);
	}

	.kind_gruppen_fuechsli {
		opacity: 0.5;
		top: -150px;
		left: -5%;
		z-index: 10;
		margin: 0 !important;
	}

	.kind_team_footerlinie {
		opacity: 0.5;
		transform: rotate(5deg);
		bottom: -20px;
		right: -5%;
		z-index: 10;
		margin: 0 !important;
	}

	.kind_team_stv {
		opacity: 0.5;
		top: -218px;
		transform: rotate(-15deg);
		right: -5%;
		z-index: 10;
		margin: 0 !important;
	}

	.kind_leitbild_bild {
		opacity: 0.5;
		bottom: -35px;
		transform: rotate(0deg) scaleX(-1);
		right: 5%;
		z-index: 10;
		margin: 0 !important;
	}

	.kind_leitbild_infoblock {
		opacity: 0.5;
		bottom: -11px;
		transform: rotate(10deg);
		right: -5%;
		z-index: 10;
		margin: 0 !important;
	}

	.kind_vorstand_ma6 {
		opacity: 0.5;
		top: -165px;
		transform: rotate(-10deg);
		left: -5%;
		z-index: 10;
		margin: 0 !important;
	}

	.kind_vorstand_stv {
		opacity: 0.5;
		top: -210px;
		transform: rotate(10deg);
		right: -5%;
		z-index: 10;
		margin: 0 !important;
	}

	.kind_impressionen_galerie {
		opacity: 0.5;
		top: -195px;
		transform: rotate(0deg) scaleX(1);
		left: -10%;
		z-index: 10;
		margin: 0 !important;
	}

	.kind_impressionen_trennlinie {
		display:none;
	}

	.kind_impressionen_panorama {
		opacity: 0.5;
		top: -220px;
		transform: rotate(8deg);
		right: 5%;
		z-index: 10;
		margin: 0 !important;
	}

	.kind_kontakt_footerlinie {
		opacity: 0.5;
		top: -150px;
		transform: rotate(0deg) scaleX(-1);
		right: 10%;
		z-index: 10;
		margin: 0 !important;
	}

	.kind_kontakt_karte {
		opacity: 0.5;
		top: -190px;
		transform: rotate(0deg) scaleX(-1);
		right: 10%;
		z-index: 10;
		margin: 0 !important;
	}
	
	
} /* Hier endet der Breakpoint für 800px*/

/* ======== Bildschirmbreite unter 500px ======== */




@media screen and (max-width:500px) {

	.button_angebot_kontakt {
		width: 100% !important;
	}
	
	.kind_vorstand_stv {
		opacity: 0;
	}
	
	.kind_vorstand_ma6 {
		opacity: 0;
	}
	
	.kind_team_stv {
		opacity: 0
	}

	
	.grid_garten {
		display: flex !important;
		flex-direction: column !important;
	}

	.grid_garten img {
		aspect-ratio: 3/2 !important;
	}

	.grid_wald {
		display: flex !important;
		flex-direction: column !important;
	}

	.grid_wald img {
		aspect-ratio: 3/2 !important;
	}

	.grid_elternarbeit {
		display: flex !important;
		flex-direction: column !important;
	}

	.grid_elternarbeit img {
		aspect-ratio: 3/2 !important;
	}
	
	.grid_ma1 {
		display: flex !important;
		flex-direction: column !important;
	}
	
	.grid_ma1 img {
		aspect-ratio: 3/2 !important;
	}
	
	.grid_stv {
		display: flex !important;
		flex-direction: column !important;
	}
	
	.grid_stv img {
		aspect-ratio: 3/2 !important;
	}
	
	.grid_ma2 {
		display: flex !important;
		flex-direction: column !important;
	}
	
	.grid_ma2 img {
		aspect-ratio: 3/2 !important;
	}
	
	.grid_ma5 {
		display: flex !important;
		flex-direction: column !important;
	}
	
	.grid_ma5 img {
		aspect-ratio: 3/2 !important;
	}
	
	.grid_ma6 {
		display: flex !important;
		flex-direction: column !important;
	}
	
	.grid_ma6 img {
		aspect-ratio: 3/2 !important;
	}
	
	.grid_ma7 img {
		aspect-ratio: 3/2 !important;
	}
	
	.ma_breit {
	width:100%;
}



}/* Hier endet der Breakpoint für 500px*/