/*
 * Tarnfleck punktuell (Vorschläge 06.10.2026, nichts live). Gehört zu punktuell.js.
 * Grundregel: Übergänge sind ruhige Pixelkanten in der Farbe der Fläche; der Tarnfleck steht nur an benannten Stellen.
 */
:root { --tp-block: 12px; --tp-muster: 8px; --tp-grund: #2C3529; }

/* dunkle Fläche: Canvas liegt hinter dem Inhalt; ohne Skript bleibt die volle Fläche stehen */
[data-tp-flaeche] { position: relative; isolation: isolate; background: var(--tp-grund); }
[data-tp-flaeche].tp-bereit { background: transparent; }
canvas.tp-flaeche { position: absolute; z-index: -1; left: 0; top: 0; display: block; max-width: none; image-rendering: pixelated; image-rendering: crisp-edges; pointer-events: none; }

/* Futter: Platte hinter dem Element, versetzt (harte Schattenkante der CI, aus Tarnfleck) */
canvas.tp-futter { position: absolute; z-index: 0; display: block; max-width: none; image-rendering: pixelated; image-rendering: crisp-edges; pointer-events: none; }
.tp-ueber { position: relative; z-index: 1; }
[data-tp-futter] { box-shadow: none !important; }   /* das Futter ersetzt die eigene Schattenkante */

/* Standplatz: Gelände unter der Figur */
canvas.tp-boden { position: absolute; z-index: 0; display: block; max-width: none; image-rendering: pixelated; image-rendering: crisp-edges; pointer-events: none; }
img.tp-steht { position: relative; z-index: 1; }

/* Aufnäher: Tarnfleck mit Rand und Naht, wie die Fachpresse-Aufnäher */
[data-tp-aufnaeher] { position: relative; overflow: hidden; border-radius: 6px; background: var(--ps-bronze-700); box-shadow: 0 0 0 3px var(--tp-aufnaeher-rand, var(--ps-bronze-700)), 0 3px 0 3px color-mix(in srgb, var(--ps-navy-950) 45%, transparent); }
[data-tp-aufnaeher]::after { content: ""; position: absolute; inset: 5px; border: 2px dashed color-mix(in srgb, var(--ps-sand-100) 75%, transparent); border-radius: 3px; pointer-events: none; }
canvas.tp-aufnaeher { position: absolute; inset: 0; display: block; max-width: none; image-rendering: pixelated; image-rendering: crisp-edges; pointer-events: none; }

/* Fundstück */
.tp-fund { position: absolute; z-index: 3; margin: 0; padding: 0; border: 0; border-radius: 2px; background: transparent; cursor: pointer; }
.tp-fund:focus-visible { outline: 3px solid var(--ps-messing-licht); outline-offset: 2px; }
.tp-fund__meldung {
	position: absolute; z-index: 4; width: min(320px, calc(100vw - 40px)); margin: 0; padding: 12px 16px;
	border-radius: var(--ps-radius); background: var(--ps-white); box-shadow: 4px 4px 0 var(--ps-bronze-500);
	color: var(--ps-navy); font-size: var(--ps-gr-klein); line-height: var(--ps-zeile-klein);
}
.tp-fund__meldung[hidden] { display: none; }