/* ─── Design Tokens ─────────────────────────────────────────────────────── */

:root {
    --sp-bg:            #F8F6F1;   /* warmes Cremweiß  */
    --sp-surface:       #FFFFFF;
    --sp-ink:           #2C2A26;   /* warmes Dunkelgrau */
    --sp-ink-muted:     #6B6860;
    --sp-border:        #D8D4CC;
    --sp-border-strong: #A09A90;
    --sp-reserved:      #D0CBBF;   /* belegt – neutrales Warmgrau */
    --sp-paid:          #7A7570;   /* bezahlt – dunkleres Warmgrau */
    --sp-cell-size:     26px;
    --sp-cell-gap:      2px;
    --sp-radius:        3px;
    --sp-font-ui:       'Inter', 'Segoe UI', system-ui, sans-serif;
    --sp-font-display:  'Cormorant Garamond', 'Palatino', 'Georgia', serif;
}


.sponsorship-picture-container {
	position: relative;
}

.sp-picture-imgwrap {
	position: relative;
	display: block;
	width: 100%;
	line-height: 0;
}

.sp-picture-imgwrap img {
	display: block;
	width: 100%;
	height: auto;
}

.sp-picture-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.sp-picture-shape {
	fill: transparent;
	stroke: none;
	fill-opacity: 0;
	cursor: default;
	transition: fill-opacity 0.15s ease;
}

.sp-picture-shape.is-clickable {
	cursor: pointer;
}

.sp-picture-shape.is-clickable:hover {
	fill: #c9a227;
	fill-opacity: 0.28;
}

.sp-picture-shape.status-reserved:hover,
.sp-picture-shape.status-paid:hover {
	fill: #808080;
	fill-opacity: 0.25;
}

.sp-picture-tooltip {
	position: absolute;
	transform: translate(-50%, -100%);
	background: rgba(20, 20, 22, 0.92);
	color: #fff;
	padding: 7px 11px;
	border-radius: 6px;
	font-size: 13px;
	line-height: 1.45;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.12s ease;
	z-index: 20;
}

.sp-picture-tooltip.is-visible {
	opacity: 1;
}

/* Unsichtbare Proxy-Zellen, die nur dazu dienen, die bestehende
   Matrix-Dialog-Logik per Klick anzustoßen. Bewusst NICHT display:none,
   damit ein programmatisch ausgelöster Klick zuverlässig funktioniert. */
.sp-proxy-container {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
}