/**
 * Theme – Footer (footer.php): Kontakt, Social, Rechtliches, Sprachwahl.
 *
 * Werte aus dem Vorgänger-Theme (footer-wrap), auf spnkt-Markup gemappt.
 * Desktop-first.
 */

.spnkt-footer {
	position: relative;
	z-index: 10;
	width: 100%;
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--primary);
	margin-bottom: 10rem; /* Abstand zur fixierten Bottom-Navigation. */
}

.spnkt-footer__inner {
	position: relative;
	width: var(--innerwrap__width);
	max-width: 100%;
	margin: auto;
	padding: 7rem 4rem;
	display: flex;
	flex-wrap: wrap;
	gap: 2em;
}

.spnkt-footer a,
.spnkt-footer a:hover {
	color: var(--wp--preset--color--primary);
}

/* --- Titel («Hast du Fragen …») im H1-Duktus wie im Alt-Design. */

.spnkt-footer__titel {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 1em;
	margin: 0;
	/* Beide Spalten teilen sich die Zeile hälftig (je 50 %); die
	   min-width ist zugleich die Umbruch-Schwelle auf Tablet/Mobile.
	   Bewusst rem statt em, sonst skaliert sie mit der grossen
	   Titelschrift mit und sprengt das 50/50-Layout. */
	flex: 1 1 0;
	min-width: 20rem;
}

/* --- Kontaktspalte */

.spnkt-footer__kontakt {
	flex: 1 1 0;
	min-width: 20rem;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.5em;
}

.spnkt-footer__mail {
	font-family: var(--wp--preset--font-family--base);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--large);
	font-style: normal;
}

/* --- Social-Icons (Icon-Font «spnkt-icons», erben die Saisonfarbe via color) */

ul.spnkt-social {
	display: flex;
	gap: 1em;
	padding: 0;
	margin: 0;
	list-style: none;
}

.spnkt-social__link {
	display: inline-block;
	transition: transform 0.2s ease-out;
}

.spnkt-social__link:hover,
.spnkt-social__link:focus-visible {
	transform: scale(1.05);
}

.spnkt-social__link .spnkt-icon {
	font-size: var(--isize__large);
	color: var(--wp--preset--color--primary);
	display: block;
}

/* --- Rechtliches (mit deutlichem Abstand nach den Social-Icons) */

ul.spnkt-footer__rechtliches {
	padding: 0;
	margin: 0;
	margin-top: 4em;
	list-style: none;
}

ul.spnkt-footer__rechtliches li {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.66em;
}

/* --- Sprachwahl: absolut oben rechts im Footer (auf Höhe der E-Mail),
   ausgerichtet am Padding des __inner. Auf Tablet/Mobile im Nav-Overlay. */

.spnkt-footer__lang {
	position: absolute;
	top: 7rem;
	right: 4rem;
}

ul.spnkt-lang {
	display: flex;
	gap: 1.25em;
	padding: 0;
	margin: 0;
	list-style: none;
}

.spnkt-lang__aktiv {
	font-weight: 700;
}

@media only screen and (max-width: 55em) {
	.spnkt-footer {
		margin-bottom: 6rem;
	}

	.spnkt-footer__inner {
		padding: 4rem;
	}

	/* Ab Tablet stapeln Titel und Kontaktspalte, statt die 50/50-Spalten
	   zu quetschen (sonst bricht der grosse Titel auf viele Zeilen um). */
	.spnkt-footer__titel,
	.spnkt-footer__kontakt {
		flex-basis: 100%;
	}

	.spnkt-footer__lang {
		display: none;
	}
}

@media only screen and (max-width: 36em) {
	.spnkt-footer__inner {
		padding: 4rem 2.5rem;
	}
}