/* ── TOOLTIP ── */
[data-tooltip] {
	cursor: help;
}
.tooltip-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	border: 1px solid var(--t3);
	font-size: 9px;
	color: var(--t3);
	font-family: var(--ff);
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	vertical-align: middle;
	margin-inline-start: 4px;
	line-height: 1;
	flex-shrink: 0;
}
/* JS-injected tooltip bubble (appended to body → no overflow clipping).
   Gleiches Prinzip wie die Dropdown-Panels (Nutzerwunsch 19.08.2026):
   --bg-hover statt voller Invertierung — im Dark Theme heller, im Light
   Theme dunkler als der Seitenhintergrund, keine Border, kein Schatten. */
#tooltip-bubble {
	position: fixed;
	left: var(--tooltip-x, 0);
	top: var(--tooltip-y, 0);
	background: var(--bg-hover);
	color: var(--t1);
	font-family: var(--ff);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.45;
	padding-block: 7px;
	padding-inline: 11px;
	border-radius: var(--radius);
	width: 230px;
	text-align: left;
	pointer-events: none;
	z-index: var(--z-scrollbar);
	white-space: normal;
	opacity: 0;
	transition: opacity var(--dur-fast);
}
#tooltip-bubble.visible {
	opacity: 1;
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar {
	width: 4px;
	height: 4px;
}
::-webkit-scrollbar-track {
	background: transparent;
}
::-webkit-scrollbar-thumb {
	background: var(--bg3);
}

/* ── RESPONSIVE ── */
@media (max-width: 1200px) {
	.top10-block {
		grid-template-columns: repeat(3, 1fr);
	}
}
@media (max-width: 900px) {
	.g2-full {
		grid-template-columns: 1fr;
	}
	.top10-block {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 600px) {
	.page-full,
	.page {
		/* padding-inline bewusst NICHT hier fest auf 8px - das würde den
		   responsiven --page-pad-Clamp (tokens.css, skaliert bis 320px auf
		   10px) unterhalb 600px durch einen fixen Wert überschreiben. Nur
		   padding-block/gap bleiben mobil-spezifisch kompakt.
		   --page-pad-safe-left/-right statt --page-pad, padding-bottom mit
		   max(8px, --safe-bottom) statt im padding-block-Shorthand (08.09.2026)
		   - sonst würde dieser Block unterhalb 600px (genau der Breakpoint, in
		   dem ein iPhone liegt) die Safe-Area-Kompensation aus layout.css
		   wieder überschreiben, exakt auf dem Gerät, das sie am meisten
		   braucht. */
		padding-top: 8px;
		padding-bottom: max(8px, var(--safe-bottom));
		padding-inline: var(--page-pad-safe-left) var(--page-pad-safe-right);
		gap: 8px;
	}
	.top10-block {
		grid-template-columns: 1fr;
	}
	/* .kpi's flex:0 0 auto/min-width war hier ein eigener Override - seit
	   08.09.2026 ist das die Basisregel in css/kpi.css, dieser Block wäre
	   redundant geworden und wurde entfernt. */
	/* R320, 08.09.2026 - Nutzerfund: fehlender #device-app-Scope. Der
	   Token --fs-kpi-value-device ist laut eigenem Kommentar (tokens.css)
	   explizit für den Tesla-/Kiosk-Modus gedacht (eigene, viel kleinere Skala
	   wegen anderer Platzverhältnisse dort) - diese Regel traf aber JEDES
	   schmale Browserfenster in der normalen Übersicht, nicht nur den echten
	   Geräte-View. Sichtbarer Effekt: ein harter Sprung der Kurszahl
	   (und aller .kpi-v-Werte gleicher Spezifität, u.a. .kpi-v-lg - gewinnt
	   hier durch spätere Ladereihenfolge von chrome.css) von ~24px auf ~18.6px
	   exakt bei 600px Fensterbreite, statt der fliessenden --fs-kpi-value-
	   Skalierung, die für diesen Fall bereits ausreicht. */
	#device-app .kpi-v {
		font-size: calc(var(--fs-kpi-value-device) * var(--kpi-fs-scale));
	}
	.g2 {
		grid-template-columns: 1fr;
	}
}