#main ol li {margin-bottom: 15px; line-height: 1.7em; padding-left: 2.5rem}
#main ol li::before {color: var(--red)}

.ce_image {transition: all .75s cubic-bezier(.23,1,.32,1);}
.ce_image:hover {transform: scale(1.1)}
.noHoverEffect figure:hover img, .ce_image.noHoverEffect:hover {transform: scale(1)}

/*Betroffenheit*/
.iconFlexDiv > div {display: flex; flex-wrap: wrap}
.iconFlexDiv > div p {margin-bottom: 0}

.arrowList li:before {width: 15px !important;height: 15px !important;background-color: currentColor;-webkit-mask-image: var(--icon-arrow-right);mask-image: var(--icon-arrow-right);mask-repeat: no-repeat;mask-position: center;mask-size: contain;left: -4px !important; top: 11px !important}


/*BIM*/
.ellipseFrame {position: relative;width: clamp(300px, 70vw, 800px);aspect-ratio: 3 / 2;margin: 0 auto;border: 3px solid #BEE2E5;border-radius: 50%;margin-top: 15%;margin-bottom: 10%}
.ellipseFrame .ce_text {position: absolute;width: clamp(90px, 15vw, 140px);text-align: center;opacity: 0;transform: translate(-50%, -50%) scale(0.8);transition: opacity 1.1s cubic-bezier(.23,1,.32,1),transform 1.1s cubic-bezier(.23,1,.32,1)}
.ellipseFrame .ce_text.in {opacity: 1;transform: translate(-50%, -50%) scale(1);}
@media (prefers-reduced-motion: reduce) {
  .ellipseFrame .ce_text,
  .ellipseFrame .ce_text.in {
    transition: none;
  }
}
.ellipseFrame .ce_text:hover {transform: translate(-50%, -50%) scale(1.2);}
.ellipseFrame .ce_text:nth-child(1) { --angle: 210deg;margin-top: -40px;}
.ellipseFrame .ce_text:nth-child(2) { --angle: 270deg;}
.ellipseFrame .ce_text:nth-child(3) { --angle: 330deg;margin-top: -40px;}
.ellipseFrame .ce_text:nth-child(4) { --angle: 30deg;margin-top: 70px}
.ellipseFrame .ce_text:nth-child(5) { --angle: 90deg;margin-top: 25px}
.ellipseFrame .ce_text:nth-child(6) { --angle: 150deg;margin-top: 70px}
.ellipseFrame .ce_text {background-color: #fff; padding: 10px;top: calc(50% + sin(var(--angle)) * 48%);left: calc(50% + cos(var(--angle)) * 40%);}
.ellipseFrame .ce_text p {line-height: 1.2}

@media(max-width: 768px)
{
	.ellipseFrame {border: none; width: 100%;aspect-ratio: initial;}
	.ellipseFrame:before {content: "";position: absolute; top: 0; left: calc(50% - 2px); width: 4px; background-color: #BEE2E5; height: 100%; z-index: -1}
	.ellipseFrame .ce_text {position: initial !important;    box-shadow: 0 0 1rem 0 #d7dce1;width: 60%;transform: initial !important;margin: 0 auto;background-color: #fff; margin-bottom: 12%;margin-top: 0 !important;}
}


/*PLANRECHT*/
.flexPlanfeststellug, .flexPlanfeststellug > .row {overflow: visible}
.flexPlanfeststellug > .row {display: flex; justify-content: center; flex-wrap: wrap} 

.orderedList2Colums ol {  column-count: 2;
  column-gap: 2rem;
  list-style: decimal;
  padding-left: 1.5rem; /* etwas Abstand für die Zahlen */}
.orderedList2Colums ol li {  
  break-inside: avoid;
  margin-bottom: .4rem;}

  
#planrechtBubblesFrame {
	position: relative;
	max-width: 1200px;       /* optional */
	margin: 0 auto;
}

#planrechtBubblesFrame img {
	width: 100%;
	height: auto;
	display: block;
}

/* Container für die Bubbles */
#planrechtBubbles {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none; /* Bubbles nicht anklickbar, falls gewünscht */
}

/* Grundstil für alle Bubbles */
.planrechtBubble {
	position: absolute;
	width: 32%;              /* prozentual, damit responsiv */
	aspect-ratio: 1 / 1;     /* macht sie automatisch rund */
	background: rgba(200, 230, 235, 0.55); /* hellblau wie im Beispiel */
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding: 2rem;
	font-size: 14px;
	font-weight: 700;
	color: #000;
	line-height: 1.3;
	font-family: var(--font-bold);
	/* Für Hover-Animation */
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	pointer-events: auto; /* wichtig, falls du vorher pointer-events:none hattest */
	cursor: pointer;
}

.planrechtBubble:hover {
	transform: scale(1.2);
	/* Optional: kleines Highlight */
	box-shadow: 0 0 20px rgba(0,0,0,0.15);
	z-index: 9;
	background: rgba(200, 230, 235, 0.85); /* hellblau wie im Beispiel */	
}

/* Einzelpositionen – diese kannst du feinjustieren */
#planrechtBubble1 {
	top: 9%;
	left: 34%;
}

#planrechtBubble2 {
	top: 38%;
	left: 47%;
text-align: right;
    padding-left: 50px;
}

#planrechtBubble3 {
	top: 38%;
	left: 20%;
	text-align: left;
	    padding-right: 50px;
}

/* Optional: bei sehr kleinen Screens anpassen */
@media (max-width: 1100px) 
{
	.planrechtBubble {
		width: 34%;
		font-size: 14px;
		padding: 1rem;
		transform: scale(0.8); hyphens: auto; text-align: center !important; padding: 10px; padding-right: 10px !important; padding-left: 10px !important
	}

	#planrechtBubble1 { top: 13%; left: 33%; }
	#planrechtBubble2 { top: 45%; left: 46%; }
	#planrechtBubble3 { top: 45%; left: 21%; }
}