/* =========================================================
   ANGRYLAND – KOMPONENTEN
   Buttons, Karten, Metallflächen, Header und Footer
========================================================= */


/* =========================================================
   BUTTON – GRUNDLAGE
========================================================= */

.al-button {
	position: relative;

	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;

	min-height: 48px;
	padding: 12px 24px;

	border: 1px solid var(--al-color-rust-dark);
	border-radius: var(--al-radius-small);

	background:
		linear-gradient(
			180deg,
			var(--al-color-surface-light) 0%,
			var(--al-color-metal-dark) 52%,
			var(--al-color-black-soft) 100%
		);

	color: var(--al-color-text);

	font-family: var(--al-font-display);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.04em;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;

	box-shadow: var(--al-shadow-plate);

	cursor: pointer;

	transition:
		color var(--al-transition-fast),
		border-color var(--al-transition-fast),
		background-color var(--al-transition-fast),
		box-shadow var(--al-transition-fast),
		transform var(--al-transition-fast);
}


/* Feine innere Metallkante */
.al-button::before {
	content: "";

	position: absolute;
	inset: 3px;

	border: 1px solid rgba(198, 106, 59, 0.22);
	border-radius: 1px;

	pointer-events: none;
}


/* Button Hover und Tastaturfokus */
.al-button:hover,
.al-button:focus-visible {
	border-color: var(--al-color-rust-light);
	color: var(--al-color-text);

	background:
		linear-gradient(
			180deg,
			#3a302a 0%,
			var(--al-color-surface-light) 48%,
			var(--al-color-metal-dark) 100%
		);

	box-shadow:
		0 7px 14px rgba(0, 0, 0, 0.82),
		inset 0 1px 0 rgba(255, 238, 220, 0.12),
		inset 0 -2px 4px rgba(0, 0, 0, 0.78);

	transform: translateY(-2px);
}


/* Sichtbarer Tastaturfokus */
.al-button:focus-visible {
	outline: 2px solid var(--al-color-rust-light);
	outline-offset: 3px;
}


/* Gedrückter Zustand */
.al-button:active {
	transform: translateY(0);

	box-shadow:
		inset 0 3px 7px rgba(0, 0, 0, 0.88),
		inset 0 -1px 0 rgba(198, 106, 59, 0.12);
}


/* =========================================================
   BUTTON – ROSTBETONTE VARIANTE
========================================================= */

.al-button-primary {
	border-color: var(--al-color-rust-dark);

	background:
		linear-gradient(
			180deg,
			var(--al-color-rust-light) 0%,
			var(--al-color-rust) 42%,
			var(--al-color-rust-dark) 100%
		);

	color: var(--al-color-black);
}

.al-button-primary::before {
	border-color: rgba(242, 233, 225, 0.2);
}

.al-button-primary:hover,
.al-button-primary:focus-visible {
	border-color: var(--al-color-rust-light);

	background:
		linear-gradient(
			180deg,
			#d27746 0%,
			var(--al-color-rust-light) 42%,
			var(--al-color-rust) 100%
		);

	color: var(--al-color-black);
}


/* =========================================================
   BUTTON – TRANSPARENTE VARIANTE
========================================================= */

.al-button-ghost {
	background: rgba(9, 9, 9, 0.72);
	border-color: var(--al-color-metal-border);
	color: var(--al-color-text);
}

.al-button-ghost:hover,
.al-button-ghost:focus-visible {
	background: var(--al-color-metal-dark);
	border-color: var(--al-color-rust);
	color: var(--al-color-text);
}


/* =========================================================
   KARTEN – GRUNDLAGE
========================================================= */

.al-card {
	position: relative;
	overflow: hidden;

	padding: 32px;

	border: 1px solid var(--al-color-metal-border);
	border-radius: var(--al-radius-medium);

	background:
		linear-gradient(
			145deg,
			var(--al-color-metal-dark) 0%,
			var(--al-color-surface) 48%,
			var(--al-color-black-soft) 100%
		);

	color: var(--al-color-text);

	box-shadow: var(--al-shadow-plate);
}


/* Innere Metallkante */
.al-card::before {
	content: "";

	position: absolute;
	inset: 4px;

	border: 1px solid rgba(198, 106, 59, 0.12);
	border-radius: 2px;

	pointer-events: none;
}


/* Dezente untere Rostkante */
.al-card::after {
	content: "";

	position: absolute;
	right: 12%;
	bottom: 0;
	left: 12%;

	height: 1px;

	background:
		linear-gradient(
			90deg,
			transparent,
			var(--al-color-rust-dark),
			var(--al-color-rust),
			var(--al-color-rust-dark),
			transparent
		);

	opacity: 0.65;
	pointer-events: none;
}


/* =========================================================
   KARTENINHALTE
========================================================= */

.al-card > * {
	position: relative;
	z-index: 1;
}

.al-card h2,
.al-card h3,
.al-card h4 {
	color: var(--al-color-text);
}

.al-card p:last-child {
	margin-bottom: 0;
}


/* =========================================================
   KARTEN – INTERAKTIV
========================================================= */

.al-card-interactive {
	transition:
		border-color var(--al-transition-standard),
		box-shadow var(--al-transition-standard),
		transform var(--al-transition-standard);
}

.al-card-interactive:hover {
	border-color: var(--al-color-rust);

	box-shadow:
		0 14px 26px rgba(0, 0, 0, 0.72),
		inset 0 1px 0 rgba(255, 238, 220, 0.07),
		inset 0 -2px 3px rgba(0, 0, 0, 0.78);

	transform: translateY(-4px);
}


/* =========================================================
   METALLPANEL
========================================================= */

.al-metal-panel {
	position: relative;
	overflow: hidden;

	border: 1px solid var(--al-color-metal-border);
	border-radius: var(--al-radius-medium);

	background:
		linear-gradient(
			135deg,
			var(--al-color-surface-light) 0%,
			var(--al-color-metal-dark) 32%,
			var(--al-color-surface) 70%,
			var(--al-color-black-soft) 100%
		);

	color: var(--al-color-text);

	box-shadow: var(--al-shadow-large);
}


/* Mehrstufiger Innenrahmen */
.al-metal-panel::before {
	content: "";

	position: absolute;
	inset: 5px;

	border: 1px solid var(--al-color-rust-dark);
	border-radius: 2px;

	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, 0.7);

	opacity: 0.72;
	pointer-events: none;
}


/* =========================================================
   EINGELASSENE FLÄCHE
========================================================= */

.al-inset-panel {
	border: 1px solid #191411;
	border-radius: var(--al-radius-small);

	background: var(--al-color-black-soft);

	box-shadow: var(--al-shadow-inset);
}


/* =========================================================
   TRENNLINIE
========================================================= */

.al-divider {
	width: 100%;
	height: 1px;
	border: 0;

	background:
		linear-gradient(
			90deg,
			transparent,
			var(--al-color-rust-dark),
			var(--al-color-rust),
			var(--al-color-rust-dark),
			transparent
		);

	opacity: 0.55;
}


/* =========================================================
   EYEBROW
========================================================= */

.al-eyebrow {
	margin-bottom: 0.75rem;

	color: var(--al-color-rust-light);

	font-family: var(--al-font-display);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 1.3;
	text-transform: uppercase;
}


/* =========================================================
   HINWEISBOX
========================================================= */

.al-notice {
	padding: 20px 24px;

	border-left: 3px solid var(--al-color-rust);
	border-radius:
		0
		var(--al-radius-small)
		var(--al-radius-small)
		0;

	background: var(--al-color-surface);
	color: var(--al-color-text);

	box-shadow: var(--al-shadow-inset);
}


/* =========================================================
   ANGRYLAND – HEADER-DESIGN
========================================================= */

.al-site-header {
	color: var(--al-color-text);
}


/* =========================================================
   HEADER – METALLRAHMEN
========================================================= */

.al-header-frame {
	overflow: hidden;

	border: 4px solid var(--al-color-metal-border);
	border-radius: 4px;

	background:
		linear-gradient(
			180deg,
			rgba(255, 255, 255, 0.07) 0%,
			rgba(255, 255, 255, 0.01) 16%,
			rgba(0, 0, 0, 0.32) 52%,
			rgba(0, 0, 0, 0.72) 100%
		),
		linear-gradient(
			135deg,
			#322923 0%,
			#171310 28%,
			#40342d 50%,
			#171310 72%,
			#2b241f 100%
		);

	box-shadow:
		0 14px 32px rgba(0, 0, 0, 0.72),
		inset 0 1px 0 rgba(255, 255, 255, 0.1),
		inset 0 -8px 18px rgba(0, 0, 0, 0.75),
		inset 0 0 28px rgba(0, 0, 0, 0.55);
}

/* =========================================================
   HEADER – GITTERFLÄCHE ZWISCHEN DEN SCHRAUBEN
========================================================= */

.al-header-frame::after {
	content: "";

	position: absolute;
	inset: 18px;
	z-index: 0;

	background-color: #0d0c0b;

	background-image:
		linear-gradient(
			rgba(0, 0, 0, 0.12),
			rgba(0, 0, 0, 0.32)
		),
		url("../images/header/angryland-navigation-mesh.webp");

	background-position:
		center,
		center;

	background-repeat:
		no-repeat,
		no-repeat;

	background-size:
		100% 100%,
		cover;

	border: 1px solid rgba(95, 78, 67, 0.75);

	box-shadow:
		inset 0 0 28px rgba(0, 0, 0, 0.9);

	pointer-events: none;
}


/* Rostige Innenkante */
.al-header-frame::before {
	content: "";

	position: absolute;
	inset: 7px;
	z-index: 1;

	border: 1px solid rgba(184, 92, 46, 0.55);

	box-shadow:
		inset 0 0 9px rgba(0, 0, 0, 0.85),
		0 0 4px rgba(214, 122, 70, 0.16);

	pointer-events: none;
}

.al-header-inner {
	position: relative;
	z-index: 2;
}


/* =========================================================
   HEADER – SCHRAUBEN
========================================================= */
/* =========================================================
   HEADER – ECHTE SCHRAUBENGRAFIK
========================================================= */

.al-header-screw {
	position: absolute;
	z-index: 5;

	display: block;

	width: 24px;
	height: 24px;

	background-image:
		url("../images/header/angryland-screw.webp");

	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;

	filter:
		drop-shadow(0 2px 3px rgba(0, 0, 0, 0.9));

	pointer-events: none;
}

.al-header-screw::before,
.al-header-screw::after {
	content: none;
}

.al-header-screw-top-left {
	top: 7px;
	left: 7px;
}

.al-header-screw-top-right {
	top: 7px;
	right: 7px;
}

.al-header-screw-bottom-left {
	bottom: 7px;
	left: 7px;
}

.al-header-screw-bottom-right {
	right: 7px;
	bottom: 7px;
}


/* =========================================================
   HEADER – LOGO
========================================================= */

.al-header-logo-link {
	position: relative;

	padding: 7px;

	border-radius: 50%;

	background:
		radial-gradient(
			circle at 35% 25%,
			rgba(255, 255, 255, 0.12),
			transparent 34%
		),
		#14110f;

	box-shadow:
		0 10px 20px rgba(0, 0, 0, 0.75),
		0 0 0 2px var(--al-color-metal-border),
		0 0 0 5px rgba(18, 15, 13, 0.9);

	color: var(--al-color-text);
	text-decoration: none;
}

.al-header-logo {
	object-fit: contain;

	filter:
		drop-shadow(0 8px 9px rgba(0, 0, 0, 0.75))
		contrast(1.04);
}

.al-header-description {
	color: var(--al-color-text-muted);

	font-family: var(--al-font-display);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.09em;
	text-transform: uppercase;

	text-shadow:
		1px 2px 2px #000;
}


/* =========================================================
   HEADER – NAVIGATIONSGITTER
========================================================= */
.al-header-navigation-scroll {
	position: relative;

	background: rgba(5, 5, 5, 0.3);

	border: 1px solid rgba(75, 62, 54, 0.65);
	border-radius: 2px;

	box-shadow:
		inset 0 0 18px rgba(0, 0, 0, 0.72),
		0 5px 12px rgba(0, 0, 0, 0.45);
}


/* =========================================================
   HEADER – METALLISCHE MENÜSCHILDER
========================================================= */

.al-header-menu > .menu-item > .menu-link {
	position: relative;
	overflow: hidden;

	color: #e2d2c4;

	font-family: var(--al-font-display);
	font-size: clamp(1.2rem, 1.5vw, 1.55rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.055em;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;

	text-shadow:
		1px 2px 2px rgba(0, 0, 0, 0.95),
		-1px -1px 0 rgba(0, 0, 0, 0.7);

	background-image:
		linear-gradient(
			rgba(0, 0, 0, 0.02),
			rgba(0, 0, 0, 0.18)
		),
		url("../images/header/angryland-button-metal.webp");

	background-position:
		center,
		center;

	background-repeat:
		no-repeat,
		no-repeat;

	background-size:
		100% 100%,
		100% 100%;

	border: 0;
	border-radius: 0;

	box-shadow:
		0 7px 13px rgba(0, 0, 0, 0.78);

	transition:
		color var(--al-transition),
		transform var(--al-transition),
		filter var(--al-transition),
		box-shadow var(--al-transition);
}

.al-header-menu > .menu-item > .menu-link::before,
.al-header-menu > .menu-item > .menu-link::after {
	content: none;
}

.al-header-menu > .menu-item > .menu-link:hover,
.al-header-menu > .menu-item > .menu-link:focus-visible {
	color: var(--al-color-rust-light);

	filter:
		brightness(1.12)
		saturate(1.08);

	transform: translateY(-2px);

	box-shadow:
		0 10px 16px rgba(0, 0, 0, 0.82),
		0 0 12px rgba(184, 92, 46, 0.2);
}

.al-header-menu > .current-menu-item > .menu-link,
.al-header-menu > .current-menu-ancestor > .menu-link {
	color: var(--al-color-rust-light);

	filter:
		brightness(1.12)
		saturate(1.12);

	box-shadow:
		0 8px 15px rgba(0, 0, 0, 0.8),
		0 0 14px rgba(184, 92, 46, 0.26);
}


/* =========================================================
   HEADER – UNTERMENÜS
========================================================= */

.al-header-menu .sub-menu {
	border: 2px solid var(--al-color-metal-border);
	border-radius: var(--al-radius-small);

	background:
		linear-gradient(
			180deg,
			var(--al-color-surface-light),
			var(--al-color-metal-dark)
		);

	box-shadow:
		var(--al-shadow-large);
}

.al-header-menu .sub-menu .menu-link {
	color: var(--al-color-text);

	font-family: var(--al-font-display);
	font-size: 1.05rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-decoration: none;
	text-transform: uppercase;

	background:
		linear-gradient(
			180deg,
			#352e29,
			#171310
		);

	border: 1px solid var(--al-color-metal-border);

	transition:
		color var(--al-transition-fast),
		border-color var(--al-transition-fast),
		background-color var(--al-transition-fast);
}

.al-header-menu .sub-menu .menu-link:hover,
.al-header-menu .sub-menu .menu-link:focus-visible {
	color: var(--al-color-rust-light);
	border-color: var(--al-color-rust);
}


/* =========================================================
   HEADER – HORIZONTALE SCROLLBAR
========================================================= */

.al-header-navigation-scroll::-webkit-scrollbar {
	height: 10px;
}

.al-header-navigation-scroll::-webkit-scrollbar-track {
	background: #0b0a09;
	border: 1px solid #342b26;
}

.al-header-navigation-scroll::-webkit-scrollbar-thumb {
	background:
		linear-gradient(
			90deg,
			#3a302a,
			#7a503a,
			#3a302a
		);

	border: 1px solid #1d1815;
	border-radius: 0;
}

.al-header-navigation-scroll::-webkit-scrollbar-thumb:hover {
	background:
		linear-gradient(
			90deg,
			#4a3a31,
			var(--al-color-rust),
			#4a3a31
		);
}
.al-header-navigation-scroll {
	scrollbar-color:
		#79513c
		#100d0b;

	scrollbar-width: thin;
}

.al-header-navigation-scroll::-webkit-scrollbar {
	height: 8px;
}

.al-header-navigation-scroll::-webkit-scrollbar-track {
	background: #100d0b;
}

.al-header-navigation-scroll::-webkit-scrollbar-thumb {
	background:
		linear-gradient(
			90deg,
			#302823,
			#8a593e,
			#302823
		);

	border: 1px solid #171210;
	border-radius: 0;
}

/* =========================================================
   HEADER – KONTO UND WARENKORB
========================================================= */

/* =========================================================
   HEADER – KONTO UND WARENKORB
   Gleiche Metallgrafik wie Hauptnavigation
========================================================= */

.al-header-action {
	position: relative;
	overflow: hidden;

	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;

	min-width: 112px;
	min-height: 52px;
	padding: 9px 18px;

	color: #e2d2c4;

	font-family: var(--al-font-display);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.045em;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;

	text-shadow:
		1px 2px 2px rgba(0, 0, 0, 0.95),
		-1px -1px 0 rgba(0, 0, 0, 0.7);

	background-image:
		linear-gradient(
			rgba(0, 0, 0, 0.02),
			rgba(0, 0, 0, 0.18)
		),
		url("../images/header/angryland-button-metal.webp");

	background-position:
		center,
		center;

	background-repeat:
		no-repeat,
		no-repeat;

	background-size:
		100% 100%,
		100% 100%;

	border: 0;
	border-radius: 0;

	box-shadow:
		0 7px 13px rgba(0, 0, 0, 0.78);

	transition:
		color var(--al-transition),
		transform var(--al-transition),
		filter var(--al-transition),
		box-shadow var(--al-transition);
}


/*
 * Die Schrauben sind bereits Teil der Buttongrafik.
 */
.al-header-action::before,
.al-header-action::after {
	content: none;
}


.al-header-action:hover,
.al-header-action:focus-visible {
	color: var(--al-color-rust-light);

	filter:
		brightness(1.12)
		saturate(1.08);

	transform: translateY(-2px);

	box-shadow:
		0 10px 16px rgba(0, 0, 0, 0.82),
		0 0 12px rgba(184, 92, 46, 0.2);
}


.al-header-action:focus-visible {
	outline: 2px solid var(--al-color-rust-light);
	outline-offset: 3px;
}


/* Warenkorb etwas breiter als Konto */
.al-header-cart {
	min-width: 148px;
}


/* Warenkorbzähler bleibt als eigenes Element sichtbar */
.al-header-cart-count {
	position: relative;
	z-index: 2;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-width: 22px;
	height: 22px;
	padding-inline: 5px;

	color: #fff;

	font-family: var(--al-font-body);
	font-size: 0.76rem;
	font-weight: 700;
	line-height: 1;

	background: var(--al-color-rust);

	border: 1px solid #301810;
	border-radius: 50%;

	box-shadow:
		0 2px 4px rgba(0, 0, 0, 0.75),
		inset 0 1px 0 rgba(255, 255, 255, 0.18);
}


/* =========================================================
   ANGRYLAND – FOOTER-DESIGN
========================================================= */

.al-site-footer {
	padding-top: 24px;

	background:
		linear-gradient(
			180deg,
			var(--al-color-black) 0%,
			#070707 100%
		);

	color: var(--al-color-text);
}

.al-footer-frame {
	overflow: hidden;

	border: 1px solid var(--al-color-metal-border);
	border-radius: var(--al-radius-medium);

	background:
		linear-gradient(
			145deg,
			var(--al-color-metal-dark) 0%,
			var(--al-color-surface) 45%,
			var(--al-color-black-soft) 100%
		);

	box-shadow: var(--al-shadow-large);
}

.al-footer-frame::before {
	content: "";

	position: absolute;
	inset: 5px;

	border: 1px solid var(--al-color-rust-dark);
	border-radius: 2px;

	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, 0.75);

	opacity: 0.72;
	pointer-events: none;
}

.al-footer-main {
	position: relative;
	z-index: 1;
}

.al-footer-brand-link {
	color: var(--al-color-text);
	text-decoration: none;
}

.al-footer-wordmark {
	display: block;

	width: min(100%, 320px);
	height: auto;

	object-fit: contain;

	filter:
		drop-shadow(0 5px 9px rgba(0, 0, 0, 0.72));
}

.al-footer-brand-claim {
	color: var(--al-color-text-muted);

	font-family: var(--al-font-display);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	line-height: 1.3;
	text-transform: uppercase;
}

.al-footer-description {
	max-width: 290px;
	margin: 20px 0 0;

	color: var(--al-color-text);
	line-height: 1.55;
}

.al-footer-company {
	max-width: 300px;
	margin: 14px 0 0;

	color: var(--al-color-text-muted);

	font-size: 0.85rem;
	line-height: 1.45;
}

.al-footer-column {
	position: relative;

	padding-left: 22px;

	border-left:
		1px solid rgba(255, 255, 255, 0.1);
}

.al-footer-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;

	margin: 0 0 18px;
	padding: 0;

	border: 0;

	background: transparent;
	color: var(--al-color-rust-light);

	font-family: var(--al-font-display);
	font-size: 1rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	line-height: 1.2;
	text-align: left;
	text-transform: uppercase;

	cursor: default;
}

.al-footer-toggle-icon {
	display: none;

	position: relative;

	width: 16px;
	height: 16px;

	flex: 0 0 16px;
}

.al-footer-toggle-icon::before,
.al-footer-toggle-icon::after {
	content: "";

	position: absolute;
	top: 50%;
	left: 50%;

	width: 14px;
	height: 2px;

	background: var(--al-color-rust-light);

	transform: translate(-50%, -50%);

	transition:
		opacity var(--al-transition-fast),
		transform var(--al-transition-fast);
}

.al-footer-toggle-icon::after {
	transform:
		translate(-50%, -50%)
		rotate(90deg);
}

.al-footer-toggle[aria-expanded="true"]
.al-footer-toggle-icon::after {
	opacity: 0;

	transform:
		translate(-50%, -50%)
		rotate(0);
}

.al-footer-menu a {
	position: relative;

	display: inline-flex;
	align-items: center;

	padding-left: 15px;

	color: var(--al-color-text);
	text-decoration: none;

	transition:
		color var(--al-transition-fast),
		transform var(--al-transition-fast);
}

.al-footer-menu a::before {
	content: "›";

	position: absolute;
	left: 0;

	color: var(--al-color-rust);
}

.al-footer-menu a:hover,
.al-footer-menu a:focus-visible {
	color: var(--al-color-rust-light);

	transform: translateX(3px);
}

.al-footer-menu a:focus-visible,
.al-footer-toggle:focus-visible {
	outline: 2px solid var(--al-color-rust-light);
	outline-offset: 4px;
}

.al-footer-art img {
	display: block;

	width: min(100%, 220px);
	height: auto;
	max-height: 190px;

	object-fit: contain;

	opacity: 0.58;

	filter:
		sepia(0.25)
		saturate(0.9)
		contrast(1.1)
		brightness(0.82)
		drop-shadow(0 8px 14px rgba(0, 0, 0, 0.75));
}

.al-footer-bottom-bar {
	position: relative;
	z-index: 2;

	border-top: 1px solid var(--al-color-metal-border);

	background:
		linear-gradient(
			180deg,
			var(--al-color-surface-light) 0%,
			var(--al-color-metal-dark) 55%,
			var(--al-color-surface) 100%
		);

	box-shadow:
		inset 0 1px 0 rgba(255, 238, 220, 0.07),
		inset 0 4px 10px rgba(0, 0, 0, 0.6);
}

.al-footer-bottom-bar::before {
	content: "";

	position: absolute;
	inset: 4px 8px;

	border: 1px solid rgba(166, 79, 42, 0.35);

	pointer-events: none;
}

.al-footer-copyright {
	color: var(--al-color-text-muted);
	font-size: 0.85rem;
}

/* =========================================================
   FOOTER – F@CK & STREETWEAR BADGE
========================================================= */

.al-footer-signoff {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
}

.al-footer-signoff-badge {
	display: block;

	width: min(100%, 520px);
	height: auto;
	max-height: 110px;

	object-fit: contain;

	filter:
		drop-shadow(0 6px 10px rgba(0, 0, 0, 0.8));
}

.al-footer-socials a {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 38px;
	height: 38px;

	border: 1px solid var(--al-color-metal-border);
	border-radius: var(--al-radius-small);

	background:
		linear-gradient(
			180deg,
			var(--al-color-surface-light) 0%,
			var(--al-color-metal-dark) 100%
		);

	color: var(--al-color-text);

	box-shadow: var(--al-shadow-plate);

	font-size: 0.7rem;
	font-weight: 800;
	text-decoration: none;
}

.al-footer-socials a:hover,
.al-footer-socials a:focus-visible {
	border-color: var(--al-color-rust-light);
	color: var(--al-color-rust-light);
}


/* =========================================================
   FOOTER – SCHRAUBEN
========================================================= */

.al-footer-screw {
	position: absolute;
	z-index: 4;

	width: 10px;
	height: 10px;

	border: 1px solid #191411;
	border-radius: 50%;

	background:
		radial-gradient(
			circle at 35% 30%,
			#75695f,
			var(--al-color-metal-dark) 46%,
			var(--al-color-black) 100%
		);

	box-shadow: var(--al-shadow-hardware);
}

.al-footer-screw::after {
	content: "";

	position: absolute;
	top: 50%;
	left: 50%;

	width: 6px;
	height: 1px;

	background: var(--al-color-black);

	transform:
		translate(-50%, -50%)
		rotate(-25deg);
}

.al-footer-screw-top-left {
	top: 8px;
	left: 8px;
}

.al-footer-screw-top-right {
	top: 8px;
	right: 8px;
}

.al-footer-screw-bottom-left {
	bottom: 8px;
	left: 8px;
}

.al-footer-screw-bottom-right {
	right: 8px;
	bottom: 8px;
}