/*
 * Basis-Styles für den Becos Kreis.
 *
 * Wichtig zur Spezifität: hier bewusst zweistufige Selektoren
 * (.becos-kreis-wrapper .bc-label) statt nackter SVG-Attribute im Markup.
 * Grund: SVG-Presentation-Attribute (font-size="58") verlieren gegen JEDE
 * Theme-Regel, auch ohne !important. Diese Selektoren schlagen typische
 * Theme-Resets wie "svg text {...}", lassen aber die Elementor-Controls
 * (die mit .elementor-element-XXX davor noch spezifischer sind) gewinnen.
 * Deshalb hier KEIN !important verwenden.
 */

.becos-kreis-wrapper {
	display: block;
	width: 100%;
	max-width: 700px;
	margin: 0 auto;
}

.becos-kreis-wrapper .becos-kreis-svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

/* ---- Segment-Labels ---- */
.becos-kreis-wrapper .bc-label {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 58px;
	font-weight: 700;
	fill: #ffffff;
	pointer-events: none;
	-webkit-user-select: none;
	user-select: none;
}

/* ---- Ring-Beschriftung ---- */
.becos-kreis-wrapper .bc-ring-label {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 42px;
	font-weight: 700;
	letter-spacing: 2px;
	fill: #7f7f7e;
	/* Die vertikale Zentrierung auf dem Bogen macht das dy="0.35em" am <textPath>
	   im Markup, NICHT dominant-baseline: Safari ignoriert dominant-baseline bei
	   textPath, der Text säße dort wieder an der Ring-Kante. Beides zusammen würde
	   sich in Chrome/Firefox addieren - also hier bewusst nicht setzen. */
	pointer-events: none;
	-webkit-user-select: none;
	user-select: none;
}

/* ---- Mitte ---- */
.becos-kreis-wrapper .bc-center-title {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 62px;
	font-weight: 500;
	fill: #111820;
	pointer-events: none;
}

.becos-kreis-wrapper .bc-center-sub {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 85px;
	font-weight: 800;
	fill: #111820;
	pointer-events: none;
}

/* ---- Klickflächen ---- */
.becos-kreis-wrapper .bc-seg {
	fill: transparent;
	stroke: none;
	cursor: pointer;
	transition: fill 0.2s ease;
}

.becos-kreis-wrapper .bc-seg:hover {
	fill: rgba(0, 0, 0, 0.22);
}

.becos-kreis-wrapper .bc-icon {
	pointer-events: none;
}

.becos-kreis-wrapper a {
	outline: none;
}

/* ---- Mobile ----
   Die SVG skaliert über die viewBox von sich aus mit. Auf kleinen Displays
   wird der Text dadurch aber absolut sehr klein - hier gegensteuern.
   Über die (responsiven) Typografie-Regler im Stil-Tab überschreibbar. */
@media (max-width: 767px) {
	.becos-kreis-wrapper .bc-label {
		font-size: 66px;
	}

	.becos-kreis-wrapper .bc-ring-label {
		font-size: 46px;
		letter-spacing: 1px;
	}

	.becos-kreis-wrapper .bc-center-title {
		font-size: 68px;
	}

	.becos-kreis-wrapper .bc-center-sub {
		font-size: 92px;
	}
}