:root {
	--icon-color: #ee6401;
	--accent-color: #ff9b4a;
	--timing: 0.3s;
}

.top-info-2 .tinfo-2 {
    display: flex;
    align-items: center;
	margin-bottom: 10px;
}

.top-info-2-icon {
	position: relative;
	background:linear-gradient(45deg,var(--icon-color),var(--accent-color));
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.5rem;
	border-radius: 50%;
	width: 40px;
	height: 40px;
}
.top-info-2-icon svg {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20px;
	height: 20px;
	transform: translate(-50%, -50%) scale(1);
}

@media (min-width: 991.98px) {
 .top-info-2 .tinfo-2 {
    width: auto;
	margin-bottom: 0px;
 }
}
.top-info-2-icon svg {
    color: var(--color-topinfo-2-svg);
}
.top-info-2 a {
    color: var(--color-topinfo-2-a);
}
.top-info-2-content p {
    margin: 0px 0px 0px 10px;
    color:var(--color-topinfo-2-text);

    font-size: 1rem;
}

/* =========================================================
   Social-Icons
========================================================= */




/* =========================================================
   Liste
========================================================= */

.social-icons {
	padding: 0;
	margin: 0.5em;
	list-style: none;
}

.social-icons li {
	display: inline-block;
	position: relative;
	margin: 0.15em;
	font-size: 1.2em;
}


/* =========================================================
   Link
========================================================= */

.social-icons a {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 60px;
	height: 60px;

	text-decoration: none;
	border-radius: 50%;
}


/* =========================================================
   Font-Awesome-SVG
========================================================= */

.social-icons a svg {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;

	width: 30px;
	height: 30px;

	color: #ffffff;

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

	transition:
		transform var(--timing) ease-out,
		color var(--timing) ease-out;
}


/* =========================================================
   Farbiger Kreis im Hintergrund
========================================================= */

.social-icons a::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;

	width: 60px;
	height: 60px;

	border-radius: 50%;

	background: linear-gradient(
		45deg,
		var(--icon-color),
		var(--accent-color)
	);

	transform: scale(1);

	transition: transform var(--timing) ease-out;
}


/* =========================================================
   Hintergrundkreis beim Hover ausblenden
========================================================= */

.social-icons a:hover::before,
.social-icons a:focus-visible::before {
	transform: scale(0);
	transition: transform var(--timing) ease-in;
}


/* =========================================================
   SVG beim Hover vergrößern und einfärben
========================================================= */

.social-icons a:hover svg,
.social-icons a:focus-visible svg {
	color: var(--icon-color);

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

	transition:
		transform var(--timing) ease-in,
		color var(--timing) ease-in;
}


/* =========================================================
   Sichtbarer Tastaturfokus
========================================================= */

.social-icons a:focus-visible {
	outline: 2px solid var(--icon-color);
	outline-offset: 4px;
}


/* =========================================================
   Reduzierte Bewegung berücksichtigen
========================================================= */

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

	.social-icons a svg,
	.social-icons a::before {
		transition: none;
	}
}