/**
 * Styling für die APO24-Grafiken (AP6).
 * Nutzt die im Theme definierten CSS-Variablen (Clinical-Authority-Designsystem)
 * und fällt auf die gleichen Werte zurück, falls eine Variable auf einer Seite fehlt.
 */

.apo24-grafik {
	--apo24-bg: var( --bg-secondary, #111827 );
	--apo24-bg-alt: var( --bg-tertiary, #1c2333 );
	--apo24-border: var( --border, #1e2a3a );
	--apo24-accent: var( --accent, #00c896 );
	--apo24-warning: var( --warning, #ffb547 );
	--apo24-danger: var( --danger, #ff4d6d );
	--apo24-text: var( --text-primary, #f0f4ff );
	--apo24-text-muted: var( --text-secondary, #8892a4 );
	--apo24-radius: var( --radius, 8px );
	--apo24-font-body: var( --font-body, 'DM Sans', sans-serif );
	--apo24-font-display: var( --font-display, 'DM Serif Display', serif );
	--apo24-font-mono: var( --font-mono, 'JetBrains Mono', monospace );

	background: var( --apo24-bg );
	border: 1px solid var( --apo24-border );
	border-radius: var( --apo24-radius );
	padding: 1.75rem clamp( 1.25rem, 4vw, 2.25rem );
	margin: 2rem 0;
	font-family: var( --apo24-font-body );
	color: var( --apo24-text );
	max-width: 100%;
	overflow-x: auto;
}

.apo24-grafik-svg {
	width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
	max-width: 700px;
}

.apo24-grafik-svg text {
	font-family: var( --apo24-font-body );
	fill: var( --apo24-text );
}

.apo24-grafik-value {
	font-family: var( --apo24-font-mono );
	font-size: 15px;
	font-weight: 600;
	fill: var( --apo24-text );
}

.apo24-grafik-total {
	font-family: var( --apo24-font-mono );
	font-size: 17px;
	font-weight: 700;
	fill: var( --apo24-accent );
}

.apo24-grafik-label {
	font-size: 12px;
	fill: var( --apo24-text-muted );
}

.apo24-grafik-label-zone {
	font-size: 12px;
	letter-spacing: .04em;
	text-transform: uppercase;
	fill: var( --apo24-text-muted );
}

.apo24-grafik-note-inline {
	font-size: 11px;
	fill: var( --apo24-text-muted );
}

.apo24-grafik-formula {
	text-align: center;
	font-family: var( --apo24-font-mono );
	font-size: 14px;
	color: var( --apo24-accent );
	margin: 0 0 1rem;
}

.apo24-grafik-note {
	font-size: .8125rem;
	color: var( --apo24-text-muted );
	line-height: 1.6;
	margin: .875rem 0 0;
}

.apo24-grafik-source {
	font-size: .8125rem;
	color: var( --apo24-text-muted );
	margin: .5rem 0 0;
}

/* Deckungsmatrix */
.apo24-matrix-wrap {
	overflow-x: auto;
}

.apo24-matrix {
	width: 100%;
	border-collapse: collapse;
	font-size: .875rem;
}

.apo24-matrix th {
	text-align: left;
	font-size: .75rem;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var( --apo24-text-muted );
	padding: 0 .75rem .625rem;
	border-bottom: 1px solid var( --apo24-border );
	white-space: nowrap;
}

.apo24-matrix td {
	padding: .75rem;
	border-bottom: 1px solid var( --apo24-border );
	vertical-align: top;
	color: var( --apo24-text );
}

.apo24-matrix-sparte {
	font-weight: 600;
	white-space: nowrap;
}

.apo24-matrix-fund {
	color: var( --apo24-text-muted );
	font-size: .8125rem;
	white-space: nowrap;
}

.apo24-ampel {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-size: .75rem;
	font-weight: 600;
	white-space: nowrap;
	padding: .3rem .6rem;
	border-radius: 999px;
}

.apo24-ampel::before {
	content: '';
	width: 9px;
	height: 9px;
	border-radius: 50%;
	flex-shrink: 0;
}

.apo24-ampel--gruen { background: color-mix( in srgb, var( --apo24-accent ) 15%, transparent ); color: var( --apo24-accent ); }
.apo24-ampel--gruen::before { background: var( --apo24-accent ); }

.apo24-ampel--gelb { background: color-mix( in srgb, var( --apo24-warning ) 18%, transparent ); color: var( --apo24-warning ); }
.apo24-ampel--gelb::before { background: var( --apo24-warning ); }

.apo24-ampel--rot { background: color-mix( in srgb, var( --apo24-danger ) 15%, transparent ); color: var( --apo24-danger ); }
.apo24-ampel--rot::before { background: var( --apo24-danger ); }

.apo24-ampel--offen { background: color-mix( in srgb, var( --apo24-text-muted ) 20%, transparent ); color: var( --apo24-text-muted ); }
.apo24-ampel--offen::before { background: var( --apo24-text-muted ); }

/* Grundriss */
.apo24-grundriss-wrap {
	position: relative;
}

.apo24-hotspot {
	position: absolute;
	transform: translate( -50%, -50% );
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .25rem;
	background: none;
	border: none;
	padding: .25rem;
	cursor: pointer;
	color: var( --apo24-text );
	font-family: var( --apo24-font-body );
}

.apo24-hotspot-dot {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var( --apo24-accent );
	border: 2px solid var( --apo24-bg );
	box-shadow: 0 0 0 2px var( --apo24-accent );
	transition: transform .15s;
}

.apo24-hotspot:hover .apo24-hotspot-dot,
.apo24-hotspot:focus-visible .apo24-hotspot-dot {
	transform: scale( 1.25 );
}

.apo24-hotspot[aria-expanded="true"] .apo24-hotspot-dot {
	background: var( --apo24-text );
	box-shadow: 0 0 0 2px var( --apo24-text );
}

.apo24-hotspot-label {
	font-size: 11px;
	line-height: 1.25;
	text-align: center;
	background: var( --apo24-bg );
	padding: .125rem .375rem;
	border-radius: 4px;
	border: 1px solid var( --apo24-border );
	white-space: nowrap;
}

.apo24-gr-panels {
	margin-top: 1.25rem;
}

.apo24-gr-panel {
	background: var( --apo24-bg-alt );
	border: 1px solid var( --apo24-border );
	border-radius: var( --apo24-radius );
	padding: 1.25rem 1.5rem;
	margin-top: .75rem;
}

.apo24-gr-panel h4 {
	font-family: var( --apo24-font-display );
	font-size: 1.05rem;
	margin: 0 0 .5rem;
	color: var( --apo24-text );
}

.apo24-gr-panel p {
	font-size: .875rem;
	color: var( --apo24-text-muted );
	margin: 0 0 .5rem;
	line-height: 1.6;
}

.apo24-gr-panel-link {
	display: inline-block;
	font-size: .8125rem;
	font-weight: 600;
	color: var( --apo24-accent );
}

.apo24-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

@media ( max-width: 600px ) {
	.apo24-hotspot-label {
		display: none;
	}
}