/* ═══════════════════════════════════════════════════════════════
   PAULS AUTOSERVICE — Streetart Effects (streetart.css)
   NFS Unbound: Concrete, Stencils, Spray, Drips
   ═══════════════════════════════════════════════════════════════ */

/* ─── Concrete Texture Background ──────────────────────────────── */
.concrete-bg {
	position: relative;
	background-color: var(--color-concrete-lightest);
}

.concrete-bg::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
	background-repeat: repeat;
	background-size: 256px 256px;
	pointer-events: none;
	z-index: 1;
}

.concrete-bg > * {
	position: relative;
	z-index: 2;
}

/* ─── Spray Paint Splatter ─────────────────────────────────────── */
.spray-dots {
	position: absolute;
	width: 100%;
	height: 100%;
	pointer-events: none;
	overflow: hidden;
}

.spray-dots::before,
.spray-dots::after {
	content: '';
	position: absolute;
	border-radius: 50%;
}

.spray-dots::before {
	width: 300px;
	height: 300px;
	background: radial-gradient(circle, rgba(70, 0, 25, 0.06) 0%, transparent 70%);
	top: -50px;
	right: -80px;
}

.spray-dots::after {
	width: 200px;
	height: 200px;
	background: radial-gradient(circle, rgba(0, 29, 59, 0.04) 0%, transparent 70%);
	bottom: -30px;
	left: -60px;
}

/* ─── Spray Paint Halo ─────────────────────────────────────────── */
.spray-halo {
	position: relative;
}

.spray-halo::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 120%;
	height: 120%;
	transform: translate(-50%, -50%);
	background: radial-gradient(ellipse at center, rgba(0, 29, 59, 0.08) 0%, transparent 70%);
	border-radius: 50%;
	pointer-events: none;
}

/* ─── Speed Lines (NFS Boost Style) ────────────────────────────── */
.speed-lines {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
}

.speed-line {
	position: absolute;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--color-petrol), transparent);
	opacity: 0;
	animation: speed-line-dash 3s infinite linear;
}

.speed-line:nth-child(1) { top: 20%; width: 80px; animation-delay: 0s; }
.speed-line:nth-child(2) { top: 45%; width: 120px; animation-delay: 0.7s; }
.speed-line:nth-child(3) { top: 70%; width: 60px; animation-delay: 1.4s; }
.speed-line:nth-child(4) { top: 35%; width: 100px; animation-delay: 2.1s; }

/* ─── Tag Label ────────────────────────────────────────────────── */
.tag-label {
	display: inline-block;
	padding: var(--space-2xs) var(--space-sm);
	background: var(--color-petrol);
	color: var(--color-cream);
	font-weight: var(--font-weight-black);
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: var(--ls-mega);
	transform: rotate(-2deg);
}

/* ─── Stencil Cut-Out Effect ───────────────────────────────────── */
.stencil-cutout {
	position: relative;
	display: inline-block;
}

.stencil-cutout::before {
	content: attr(data-text);
	position: absolute;
	top: 3px;
	left: 3px;
	color: var(--color-cherry);
	z-index: -1;
	opacity: 0.3;
}

/* ─── Stencil Stamp Badge ──────────────────────────────────────── */
.stencil-stamp {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-sm) var(--space-lg);
	border: 3px solid var(--color-cherry);
	border-radius: var(--radius-sm);
	font-weight: var(--font-weight-black);
	font-size: var(--fs-sm);
	text-transform: uppercase;
	letter-spacing: var(--ls-mega);
	color: var(--color-cherry);
	transform: rotate(-3deg);
	opacity: 0.8;
}

/* ─── Spray Accent Circle ─────────────────────────────────────── */
.spray-accent {
	position: absolute;
	width: 180px;
	height: 180px;
	border-radius: 50%;
	background: radial-gradient(circle at 30% 30%, rgba(70, 0, 25, 0.08) 0%, transparent 70%);
	pointer-events: none;
}

.spray-accent--petrol {
	background: radial-gradient(circle at 30% 30%, rgba(0, 29, 59, 0.06) 0%, transparent 70%);
}

/* ─── Hero Concrete Wall ───────────────────────────────────────── */
.hero-wall {
	background: linear-gradient(135deg, var(--color-cream) 0%, var(--color-concrete-lightest) 50%, var(--color-cream-warm) 100%);
	position: relative;
}

.hero-wall::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='6' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)' opacity='0.06'/%3E%3C/svg%3E");
	background-size: 400px 400px;
	pointer-events: none;
}

/* ─── Paint Drip Hover ─────────────────────────────────────────── */
.paint-drip-hover {
	position: relative;
	overflow: hidden;
}

/* ─── Drip Divider ─────────────────────────────────────────────── */
.drip-divider {
	position: relative;
	width: 100%;
	height: 40px;
	overflow: visible;
}

.drip-divider::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: var(--color-petrol);
}
.footer-logo img.custom-logo {
    /* Schritt 1: Macht das rote Logo komplett schwarz */
    /* Schritt 2: Färbt das Schwarz exakt in ein Vintage Cream (#eeeae3) um */
    filter: brightness(0) saturate(100%) invert(96%) sepia(3%) saturate(1217%) hue-rotate(
1deg) brightness(108%) contrast(85%);
    width: 22vw;
    margin: 1em 0;
};
}