/*
 * Molecule: Logo im Header (.logo, .logo__image, .logo__content),
 * inkl. Hover-/Fokus-Puls-Animation.
 */

.logo {
	display: flex;
	align-items: center;
	z-index: 9;
	position: relative;
	top: 0;
}

header.header .header__inner a:hover .logo {
	border-bottom: none;
}

header a figure.logo:hover {
	border-bottom: 0px solid;
}


.logo__content h1 {
	margin-top: .2rem;
	font-weight: semi-bold;
	margin-bottom: 0;
	font-size: clamp(0.9rem, 10vw, 0.9rem);
    padding: 0;
    text-transform: uppercase;
    letter-spacing: 2.5px;
}

.logo__content h2 {
	padding: 0;
	font-size: clamp(0.75rem, 2.1vw, 1rem);
	font-weight: normal;
}



/* Das Herz-Container/Bild ..............................*/
.logo__image {
	height: auto;
	width: clamp(2.5rem, 7vw, 4rem);
	margin-right: clamp(0.5rem, 1.5vw, 0.8rem);
	object-fit: contain;
	will-change: transform;
}

.header a figure.logo figcaption.logo__content {
	align-content: center;
}

/* Animation beim Hover (Maus drüber) oder Fokus (Tastatur) */
/* BARRIEREFREIHEIT: Nur füt Nutzer, die Bewegung mögen */
@media not (prefers-reduced-motion: reduce) {

	.logo__image:hover,
	.logo__image:focus {
		animation: pulse 1.2s ease-in-out infinite;
	}
}

/* Die Animation definieren */
@keyframes pulse {
	0% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.05);
		/* Nur 5% größer - dezent ist besser! */
	}

	100% {
		transform: scale(1);
	}
}

body>header>div>a>figure>figcaption>p {
	margin: 0;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 2px;
    font-size: 0.9rem;
    text-transform: uppercase;
	padding: 0;
	padding-top: 5px;
}