/* =========================================================
   WCFY / ICON BUTTONS
   Gemeinsamer Namensraum für Social-, Mail- und Telefon-Buttons
========================================================= */

:root{
	/* Grundgrößen */
	--wcfy-ib-size: 2.5rem;                /* 40px */
	--wcfy-ib-icon-size: 1.375rem;         /* ca. 22px */
	--wcfy-ib-gap: 0.75rem;
	--wcfy-ib-radius: 999rem;
	--wcfy-ib-speed: 180ms ease;

	/* Marken- / Funktionsfarben */
	--wcfy-ib-instagram: #b8326e;
	--wcfy-ib-tiktok: #111111;
	--wcfy-ib-facebook: #145dcc;
	--wcfy-ib-youtube: #b90000;
	--wcfy-ib-spotify: #158a43;
	--wcfy-ib-mail: #8f4bd6;
	--wcfy-ib-phone: #0f766e;

	/* Dunkle Umgebung */
	--wcfy-ib-dark-bg: #1f5b57;
	--wcfy-ib-dark-glass-bg: rgba(255, 255, 255, 0.16);
	--wcfy-ib-dark-glass-bg-hover: rgba(255, 255, 255, 0.24);
	--wcfy-ib-dark-glass-border: rgba(255, 255, 255, 0.28);
	--wcfy-ib-dark-outline-border: rgba(255, 255, 255, 0.88);
	--wcfy-ib-dark-icon: #ffffff;
	--wcfy-ib-dark-shadow: 0 0.375rem 1rem rgba(0, 0, 0, 0.26);
	--wcfy-ib-dark-shadow-hover: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.34);

	/* Helle Umgebung */
	--wcfy-ib-light-bg: #fafaf7;
	--wcfy-ib-light-glass-bg: rgba(255, 255, 255, 0.96);
	--wcfy-ib-light-glass-bg-hover: #ffffff;
	--wcfy-ib-light-glass-border: #cfd7d2;
	--wcfy-ib-light-outline-border: #c7cfca;
	--wcfy-ib-light-outline-border-hover: #9ea8a2;
	--wcfy-ib-light-shadow: 0 0.25rem 0.875rem rgba(0, 0, 0, 0.12);
	--wcfy-ib-light-shadow-hover: 0 0.5rem 1.125rem rgba(0, 0, 0, 0.18);

	/* Fokus */
	--wcfy-ib-focus-dark: rgba(255, 255, 255, 0.42);
	--wcfy-ib-focus-light: rgba(20, 93, 204, 0.22);
}

/* =========================================================
   BASIS / WRAPPER
========================================================= */

.wcfy-ib-panel{
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding: 0;
	border-radius: 1rem;
}

.wcfy-ib-panel--dark{
	background: var(--wcfy-ib-dark-bg);
}

.wcfy-ib-panel--light{
	background: var(--wcfy-ib-light-bg);
	border: 1px solid #e1e6e2;
}

.wcfy-ib-list{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wcfy-ib-gap);
	list-style: none;
	margin: 0;
	padding: 0;
}

.wcfy-ib-item{
	margin: 0;
	padding: 0;
}

#header ul{
	margin: 0;
	padding: 0;
}

/* =========================================================
   BASIS / LINK
========================================================= */

.wcfy-ib-link{
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: var(--wcfy-ib-size);
	block-size: var(--wcfy-ib-size);
	border-radius: var(--wcfy-ib-radius);
	text-decoration: none;
	transition:
		transform var(--wcfy-ib-speed),
		background-color var(--wcfy-ib-speed),
		border-color var(--wcfy-ib-speed),
		color var(--wcfy-ib-speed),
		box-shadow var(--wcfy-ib-speed);
}

.wcfy-ib-link:hover{
	transform: translateY(-1px);
}

.wcfy-ib-link:focus-visible{
	outline: none;
}

.wcfy-ib-link svg{
	display: block;
	inline-size: var(--wcfy-ib-icon-size);
	block-size: var(--wcfy-ib-icon-size);
	fill: currentColor;
	flex: 0 0 auto;
}

/* =========================================================
   DARK / GLASS
========================================================= */

.wcfy-ib-dark-glass .wcfy-ib-link{
	background: var(--wcfy-ib-dark-glass-bg);
	border: 1px solid var(--wcfy-ib-dark-glass-border);
	color: var(--wcfy-ib-dark-icon);
	box-shadow: var(--wcfy-ib-dark-shadow);
	backdrop-filter: blur(0.5rem);
	-webkit-backdrop-filter: blur(0.5rem);
}

.wcfy-ib-dark-glass .wcfy-ib-link:hover,
.wcfy-ib-dark-glass .wcfy-ib-link:focus-visible{
	background: var(--wcfy-ib-dark-glass-bg-hover);
	box-shadow: var(--wcfy-ib-dark-shadow-hover);
}

.wcfy-ib-dark-glass .wcfy-ib-link:focus-visible{
	box-shadow:
		0 0 0 0.22rem var(--wcfy-ib-focus-dark),
		var(--wcfy-ib-dark-shadow-hover);
}

/* =========================================================
   DARK / OUTLINE
========================================================= */

.wcfy-ib-dark-outline .wcfy-ib-link{
	background: transparent;
	border: 1.5px solid var(--wcfy-ib-dark-outline-border);
	color: var(--wcfy-ib-dark-icon);
}

.wcfy-ib-dark-outline .wcfy-ib-link:hover,
.wcfy-ib-dark-outline .wcfy-ib-link:focus-visible{
	background: #ffffff;
	color: var(--wcfy-ib-dark-bg);
	box-shadow: var(--wcfy-ib-dark-shadow);
}

.wcfy-ib-dark-outline .wcfy-ib-link:focus-visible{
	box-shadow:
		0 0 0 0.22rem var(--wcfy-ib-focus-dark),
		var(--wcfy-ib-dark-shadow);
}

/* =========================================================
   LIGHT / GLASS
========================================================= */

.wcfy-ib-light-glass .wcfy-ib-link{
	background: linear-gradient(180deg, #ffffff, var(--wcfy-ib-light-glass-bg));
	border: 1px solid var(--wcfy-ib-light-glass-border);
	box-shadow: var(--wcfy-ib-light-shadow);
}

.wcfy-ib-light-glass .wcfy-ib-link:hover,
.wcfy-ib-light-glass .wcfy-ib-link:focus-visible{
	background: var(--wcfy-ib-light-glass-bg-hover);
	box-shadow: var(--wcfy-ib-light-shadow-hover);
}

.wcfy-ib-light-glass .wcfy-ib-link:focus-visible{
	box-shadow:
		0 0 0 0.22rem var(--wcfy-ib-focus-light),
		var(--wcfy-ib-light-shadow-hover);
}

/* =========================================================
   LIGHT / OUTLINE
========================================================= */

.wcfy-ib-light-outline .wcfy-ib-link{
	background: #ffffff;
	border: 1.5px solid var(--wcfy-ib-light-outline-border);
	box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.04);
}

.wcfy-ib-light-outline .wcfy-ib-link:hover,
.wcfy-ib-light-outline .wcfy-ib-link:focus-visible{
	border-color: var(--wcfy-ib-light-outline-border-hover);
	box-shadow: var(--wcfy-ib-light-shadow);
}

.wcfy-ib-light-outline .wcfy-ib-link:focus-visible{
	box-shadow:
		0 0 0 0.22rem var(--wcfy-ib-focus-light),
		var(--wcfy-ib-light-shadow);
}

/* =========================================================
   FARBKLASSEN
========================================================= */

.wcfy-ib-brand-instagram{ color: var(--wcfy-ib-instagram) !important; }
.wcfy-ib-brand-tiktok{ color: var(--wcfy-ib-tiktok) !important; }
.wcfy-ib-brand-facebook{ color: var(--wcfy-ib-facebook) !important; }
.wcfy-ib-brand-youtube{ color: var(--wcfy-ib-youtube) !important; }
.wcfy-ib-brand-spotify{ color: var(--wcfy-ib-spotify) !important; }
.wcfy-ib-brand-mail{ color: var(--wcfy-ib-mail) !important; }
.wcfy-ib-brand-phone{ color: var(--wcfy-ib-phone) !important; }

/* =========================================================
   SCREENREADER-HILFSKLASSE
========================================================= */

.wcfy-ib-visually-hidden{
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* =========================================================
   PORTO HEADER / GRUNDAUSRICHTUNG
========================================================= */

#header .wcfy-ib-panel{
	display: flex;
	align-items: center;
}

#header .wcfy-ib-list{
	align-items: center;
}

/* =========================================================
   MOBILE / ALLGEMEIN
   Buttons auf Mobile: 30px Durchmesser
========================================================= */

@media (max-width: 767px){

	:root{
		--wcfy-ib-size: 1.875rem;      /* 30px */
		--wcfy-ib-icon-size: 1rem;     /* ca. 16px */
		--wcfy-ib-gap: 0.5rem;
	}

	.wcfy-ib-panel{
		border-radius: 0.875rem;
	}

}

/* =========================================================
   PORTO HEADER / MOBILE FEINABSTIMMUNG
========================================================= */

@media (max-width: 767px){

	#header .wcfy-ib-panel{
		margin-left: 0.5rem;
	}

	#header .wcfy-ib-list{
		align-items: center;
		gap: 0.5rem;
	}

	#header .wcfy-ib-link{
		inline-size: 1.875rem;   /* 30px */
		block-size: 1.875rem;
	}

	#header .wcfy-ib-link svg{
		inline-size: 1rem;       /* ca. 16px */
		block-size: 1rem;
	}

}

/* =========================================================
   REDUZIERTE BEWEGUNG
========================================================= */

@media (prefers-reduced-motion: reduce){

	.wcfy-ib-link{
		transition: none;
	}

	.wcfy-ib-link:hover{
		transform: none;
	}

}