/* ---------------------------------------------- PIKAS KACHELN 2025 */

.kacheln-wrapper {
	> div {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 1.4em 1.6rem;
	}
}

@media (max-width: 768px) {
	.kacheln-wrapper > div {
		grid-template-columns: repeat(1, 1fr);
	}
}
.kacheln-wrapper.kachel_auf_startseite {
	* {
		text-decoration: none;
		color: inherit;
	}
	> div {
		gap: 3rem 1.6rem;
	}
	h3 {
		font-size: 1.4rem;
		font-weight: 500;
		margin: 1rem 0 0 0;
		color: var(--primary);
	}
	p {
		margin: 0.5rem 0 0 0;
	}
	a.kachel {
		display: block;
	}
	a.kachel:hover {
		cursor: pointer;
	}
	a.kachel:hover h3 {
		color: var(--primary);
		text-decoration: underline;
	}
	.kachel-beschreibung {
	}
	a.kachel:hover .kachel-beschreibung {
		color: var(--color-text);
	}
	a.kachel .kachel-banner {
		overflow: hidden;
	}
	a.kachel .kachel-banner img {
		transition: all 0.2s ease-in-out;
		overflow: hidden;
	}
	a.kachel:hover .kachel-banner img {
		transform: scale(1.05);
	}
}

.kacheln-wrapper.menu_uebersichtsseite {
	a.kachel {
		/* background: rgba(50, 122, 134, 0.2); */
		background: var(--primary-light);
		display: flex;
		padding: 0 1rem;
		text-decoration: none;
		justify-content: space-between;
		height: 140px;
		transition: all 0.2s ease-in-out;
		gap: 2rem;
	}
	a.kachel h3 {
		margin: 1rem 0 0 0;
		font-size: 1.3em;
		font-weight: 400;
		color: var(--color-text);
		flex: 1 1 100%;
	}
	.kachel-banner {
		display: flex;
		align-items: center;
		justify-content: end;
		flex: 0 1 140px;
		min-width: 80px;
	}
	.kachel-banner img {
		width: auto;
		max-height: 100%;
	}
	a.kachel:hover {
		background: var(--primary);
		img {
			filter: brightness(100);
		}
		h3 {
			color: #fff;
		}
	}
}

/* Kachel
----------------------------------------------------------------------------------
*/ 



.kacheln_blau > div {
  	display: flex;
  	flex-wrap: wrap;
	gap: 30px 30px;
	justify-content: space-between;
	margin: 0px auto 0 auto;
	align-items: stretch;
}

/* zusätzliche Drupal-Wrapper neutralisieren */
/*.kacheln_blau > div,
.kacheln_blau .field-item{
  display: contents; 
}*/


.kacheln_blau div.field-item{
	display: block;
	flex-basis: 100%;
	box-sizing: border-box;
	
}

.kacheln_blau div.field-item a{
	text-decoration: none;
}


/* Einzelne Kachel */
.kacheln_blau .kachel {
  	background-color: #e6f0f0;
    padding: 20px;
    height: 100%;
	border-radius: 20px;
    box-sizing: border-box;
	box-shadow: inset 0px 0px 10px 2px #d9e2e3;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

/* Linke Seite mit Bild und Text */
.kacheln_blau .kachel .left {
 	display: flex;
	justify-content: space-around;
	flex-direction: column;
	width: 100%;
}

/* Bild */
.kacheln_blau .kachel-img img {
  	display: flex;
  	justify-content: center;
	align-items: center;
	max-height: 120px;
	width: auto;
	margin: 0 auto 10px auto;
}

/* Text */
.kacheln_blau .kachel-text h3 {
  text-align: left;
	color: #327D87;
	margin: 0 0 0.6rem 0;
	font-weight: 500;
	hyphens: auto;
}

.kacheln_blau .kachel-beschreibung {
  text-align: left;
	margin: 0; 
	color: #000;
	hyphens: auto;
}

.kacheln_blau .kachel-text h3.center,
.kacheln_blau .kachel-beschreibung.center{
  text-align: center;
}

/* Rechte Seite mit Pfeil */
.kacheln_blau .kachel .right {
  align-content: center;
}

.kacheln_blau .kachel .pfeil{
  min-height: 40px;
	min-width: 40px;
	max-height: 40px;
	max-width: 40px;
	margin-left: 20px;
}

.kacheln_blau .kachel .pfeil svg {
	  width: 40px;
 	 height: 40px;
}


.kacheln_blau .kachel:hover {
  transform: scale(1.05);
}

.kacheln_blau .kachel .pfeil svg circle,
.kacheln_blau .kachel .pfeil svg path.outside,
.kacheln_blau .kachel .pfeil svg path.inside,
.kacheln_blau .kachel{
	transition: all 0.3s;
}

.kacheln_blau .kachel:hover .pfeil svg circle,
.kacheln_blau .kachel:hover .pfeil svg path.outside{
	fill: #327D87;
}

.kacheln_blau .kachel:hover .pfeil svg path.inside{
	fill: #fff;
}



/* Mobile */

@media (min-width: 768px) {
  .kacheln_blau div.field-item {
    flex-basis: 47%;
  }
}

/* 
----------------------------------------------------------------------------------
*/