/**
 * Footer – Werte aus v1 css/layout/_footer.css.
 * Abweichungen: Raster mit CSS Grid statt Bootstrap, Icons als SVG,
 * «Folge uns auf:» in Noto Sans statt Typekit-Schrift (nur noch eine Schriftfamilie),
 * Copyright-Zeilen etwas grösser (Lesbarkeit), Adresse und Kontakt ergänzt.
 */

.re-footer {
	position: relative;
	z-index: 5;
	padding: 6rem 0 1rem;
	font-size: 16px;
	line-height: 1.4;
	color: var(--color-white);
	background: var(--color-black);
	border-top: 1px solid var(--color-red);
}
@media (max-width: 992px) { .re-footer { font-size: 15px; } }
@media (max-width: 576px) { .re-footer { padding: 5rem 0 1rem; font-size: 14px; } }

.re-footer ul { margin: 0; padding: 0; list-style: none; }
.re-footer a { color: var(--color-white); text-decoration: none; transition: var(--transition-slow); }
.re-footer a:hover,
.re-footer a:focus-visible { color: var(--color-red); }

/* Raster wie Bootstrap: lg 5 | +1 3 | 3, xl 5 | +2 3 | 2, darunter 12 | 7(6) | 5(6) */
.re-footer-grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: 30px;
}
.re-footer-col--social { grid-column: 1 / -1; margin-bottom: 1.5rem; }
.re-footer-col--main   { grid-column: span 7; margin-bottom: 1rem; }
.re-footer-col--legal  { grid-column: span 5; margin-bottom: 1.5rem; }
.re-footer-rights      { grid-column: 1 / -1; }
@media (min-width: 576px) {
	.re-footer-col--main,
	.re-footer-col--legal { grid-column: span 6; }
}
@media (min-width: 992px) {
	.re-footer-col--social { grid-column: 1 / span 5; }
	.re-footer-col--main   { grid-column: 7 / span 3; }
	.re-footer-col--legal  { grid-column: 10 / span 3; }
}
@media (min-width: 1200px) {
	.re-footer-col--social,
	.re-footer-col--main,
	.re-footer-col--legal { margin-bottom: 0; }
	.re-footer-col--main  { grid-column: 8 / span 3; }
	.re-footer-col--legal { grid-column: 11 / span 2; }
}

/* Social-Pille mit Überschrift auf der Kontur */
.re-footer-follow { position: relative; }
.re-footer-followhead {
	position: absolute;
	left: 50%;
	top: 0;
	transform: translate(-50%, -50%);
	z-index: 1;
	margin: 0;
	padding: 0 .4em;
	background: var(--color-black);
	font-size: 170%;
	font-style: italic;
	font-weight: 800;
	line-height: 1;
	white-space: nowrap;
}
.re-footer .re-footer-icons {
	display: flex;
	justify-content: center;
	gap: 1.25rem;
	min-width: 300px;
	padding: 15px;
	border: 2px solid var(--color-white);
	border-radius: var(--border-radius-pill);
}
@media (max-width: 576px) { .re-footer .re-footer-icons { min-width: 100%; } }
.re-footer-icons a { display: flex; width: 40px; height: 40px; align-items: center; justify-content: center; }
.re-footer-icons svg { width: 30px; height: 30px; fill: currentColor; }

.re-footer-address {
	margin-top: 1.5rem;
	font-style: normal;
	text-align: center;
}
@media (min-width: 992px) { .re-footer-address { text-align: left; } }

/* Spaltentitel (Original: h5) */
.re-footer-head { margin: 0 0 .5rem; font-size: 16px; font-weight: 700; }
@media (max-width: 576px) { .re-footer-head { font-size: 14px; } }

/* Links mit Stern: Kontur, beim Hover gefüllt */
.re-footer-nav a { position: relative; display: inline-block; padding-left: 20px; }
.re-footer-star { position: absolute; left: 0; top: 50%; width: 12px; height: 12px; transform: translateY(-50%); }
.re-footer-star svg { position: absolute; inset: 0; width: 100%; height: 100%; transition: var(--transition-slow); }
.re-footer-star svg:last-child { opacity: 0; }
.re-footer-nav a:hover .re-footer-star svg:last-child,
.re-footer-nav a:focus-visible .re-footer-star svg:last-child { opacity: 1; }

.re-footer-rights {
	margin-top: 3rem;
	text-align: center;
	font-size: 12px;
}
.re-footer-by { font-size: 12px; }
/* Mindestgrösse für Touch-Ziele (WCAG 2.5.8): Links mindestens 24 px hoch */
.re-footer-nav a, .re-footer-address a { display: inline-block; min-height: 24px; line-height: 24px; }