/* =============================================================
   SquashAddict – header.css
   CI: #181818 | #E9530E | #ffffff | #555555
   Font: Inter 400 / 700 (Google Fonts)
   ============================================================= */

/* Global: Focus-Rahmen entfernen */
*:focus,
*:active,
*:focus-visible {
	outline: none !important;
	box-shadow: none !important;
}

a, button, input, select, textarea {
	outline: none !important;
	-webkit-tap-highlight-color: transparent;
}

/* -------------------------------------------------------------
   Block 1 – Logo
   ------------------------------------------------------------- */

/* Basis: alle em-Werte im SA-Header skalieren von hier */
.sa-header {
	font-size: 16px;
}

.sa-logo-block {
	background-color: #181818;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 3em 0 1em;
	border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

/* Wrapper: column-flex, Breite = breitestes Kind (= Logo-SVG) */
.sa-logo-inner {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
}

/* Bild bleibt bei natürlicher Breite, wird nicht gestreckt */
.sa-logo-link {
	display: block;
	line-height: 0;
	align-self: center;
}

.sa-logo-img {
	display: block;
	height: 6em;
	width: auto;
}

/* Wordmark-Wrapper: fixe Höhe reserviert den Platz, verhindert Layout-Shift */
.sa-wordmark-wrap {
	align-self: stretch;
	height: 3em;
	margin-top: 1.5em;
	overflow: visible;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Wordmark – startet unsichtbar, JS setzt font-size + blendet ein */
.sa-logo-wordmark {
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	font-size: 1.375em;
	line-height: 1;
	letter-spacing: 0.01em;
	text-align: center;
	white-space: nowrap;
	opacity: 0;
}

.sa-logo-wordmark.is-visible {
	opacity: 1;
	transition: opacity 0.4s ease;
}

.sa-logo-squash {
	color: #ffffff;
}

.sa-logo-addict {
	color: #E9530E;
}

/* -------------------------------------------------------------
   Block 2 – Standorte Grid
   ------------------------------------------------------------- */
.sa-standorte {
	background-color: #181818;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.sa-standort {
	display: flex;
	flex-direction: column;
	padding: 1.5em 4.32em;
	text-decoration: none;
	cursor: pointer;
	position: relative;
}

.sa-standort:hover {
	background-color: rgba(255, 255, 255, 0.05);
}

.sa-standort:not(:last-child) {
	border-right: 1px solid rgba(255, 255, 255, 0.3);
}

.sa-standort-nr {
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	font-size: 0.875em;
	color: #999999;
	line-height: 1;
	margin-bottom: 0.5em;
}

.sa-standort-name {
	font-family: 'Inter', sans-serif;
	/* font-weight: 700; */
	font-weight: 400;
	font-size: 2.5em;
	color: #ffffff;
	line-height: 1.1;
}

.sa-standort-link {
	display: block;
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	font-size: 0.6875em;
	color: #E9530E;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	text-decoration: none;
	margin-top: 0.75em;
}

/* Aktiver Standort – Name orange, Nummer weiß */
.sa-standort.active .sa-standort-name {
	color: #E9530E;
}

.sa-standort.active .sa-standort-nr {
	color: #ffffff;
}

/* Aktiver Standort – Link verstecken */
.sa-standort.active .sa-standort-link {
	display: none;
}

/* Oranger Kreis-Indikator */
.sa-standort-indicator {
	display: none;
	position: absolute;
	right: 3em;
	top: 50%;
	transform: translateY(-50%);
	width: 1.125em;
	height: 1.125em;
	border-radius: 50%;
	background: #E9530E;
	box-shadow: 0 0 0 0.28em #181818, 0 0 0 0.375em rgba(255, 255, 255, 0.3);
}

.sa-standort.active .sa-standort-indicator {
	display: block;
}

/* -------------------------------------------------------------
   Block 3 – Filter Toggles
   ------------------------------------------------------------- */
.sa-toggles {
	background-color: #181818;
	display: grid;
	grid-template-columns: 1fr 1fr;
	border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.sa-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 2.5em 4.32em;
	cursor: pointer;
	user-select: none;
	transition: background-color 0.2s ease;
}

.sa-toggle:hover {
	background-color: rgba(255, 255, 255, 0.05);
}

#toggle-angebot {
	border-right: 1px solid rgba(255, 255, 255, 0.3);
}

.sa-toggle-label {
	font-family: 'Inter', sans-serif;
	font-weight: 400;
	font-size: 2.5em;
	color: #ffffff;
	transition: color 0.2s ease;
}

.sa-toggle-circle {
	width: 1.375em;
	height: 1.375em;
	border-radius: 50%;
	border: 1.5px solid #ffffff;
	background: transparent;
	flex-shrink: 0;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* Aktiv – Label orange, Kreis-Indikator */
.sa-toggle.active .sa-toggle-label {
	color: #E9530E;
}

.sa-toggle.active .sa-toggle-circle {
	display: none;
}

.sa-toggle-indicator {
	display: none;
	width: 1.125em;
	height: 1.125em;
	border-radius: 50%;
	background: #E9530E;
	box-shadow: 0 0 0 0.28em #181818, 0 0 0 0.375em rgba(255, 255, 255, 0.3);
	flex-shrink: 0;
}

.sa-toggle.active .sa-toggle-indicator {
	display: block;
}

/* Gedimmt – kein Effekt, alles bleibt weiss */
.sa-toggle.dimmed .sa-toggle-label {
	color: #ffffff;
}

.sa-toggle.dimmed .sa-toggle-circle {
	border-color: #ffffff;
	background: transparent;
}

/* -------------------------------------------------------------
   Block 4 – Angebot Pills
   ------------------------------------------------------------- */
.sa-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 2.5em;
	align-items: center;
	background-color: #181818;
	padding-left: 4.32em;
	padding-right: 4.32em;
	padding-top: 0;
	padding-bottom: 0;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.35s ease, padding-top 0.35s ease, padding-bottom 0.35s ease;
}

.sa-pills.is-open {
	max-height: 400px;
	padding-top: 3.5em;
	padding-bottom: 3.5em;
}

.sa-pill {
	display: inline-block;
	font-family: 'Inter', sans-serif;
	font-weight: 400;
	font-size: 2.5em;
	color: #ffffff;
	border: 1.5px solid #ffffff;
	border-radius: 999px;
	padding: 0.75em 1em;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s ease;
}

.sa-pill:hover {
	background-color: rgba(255, 255, 255, 0.1);
	color: #ffffff;
}

.sa-pill.active {
	background-color: #E9530E;
	border-color: #ffffff;
	color: #181818;
	box-shadow: inset 0 0 0 0.28em #181818;
}

/* -------------------------------------------------------------
   Mobile Standorte Swiper – standardmässig versteckt
   ------------------------------------------------------------- */
.sa-standorte-mobile {
	display: none;
}

/* =============================================================
   RESPONSIVE – Tablet  769px – 1180px  (ca. 30% kleiner)
   ============================================================= */
@media (min-width: 601px) and (max-width: 1180px) {
	.sa-header {
		font-size: 12.8px; /* 16px × 0.8 = 20% kleiner */
	}
}

/* =============================================================
   RESPONSIVE – max-width: 600px
   ============================================================= */
@media (max-width: 600px) {

	/* Einheitliche Skalierung: Desktop 16px → Tablet 11.2px → Mobile 8px */
	.sa-header {
		font-size: 6.48px; /* 7.2px × 0.9 = nochmals 10% kleiner */
	}


	.sa-logo-block {
		padding: 4em 0 2em;
	}


	/* Logo-Block: 20% grösser auf Mobile (Navigation unverändert) */
	.sa-logo-block {
		font-size: 1.2em;
	}

	/* Wordmark: engere Abstände auf Mobile */
	.sa-wordmark-wrap {
		margin-top: 0.75em;

	}

	/* --- Standorte: Desktop ausblenden, Mobile einblenden --- */
	.sa-standorte {
		display: none;
	}

	.sa-standorte-mobile {
		display: block;
		background-color: #181818;
		border-bottom: 1px solid rgba(255, 255, 255, 0.3);
		overflow: hidden;
	}

	/* Mobile Standort: horizontales Layout mit Indicator rechts */
	.sa-standorte-mobile .sa-standort {
		border-right: none;
		width: 100%;
		padding: 20px 20px;
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
		gap: 2em;
	}

	/* Swiper: Slide-Breite = Inhalt (Name + Padding + Indicator) */
	.sa-standorte-mobile .swiper-slide {
		width: auto;
		border-right: 1px solid rgba(255, 255, 255, 0.3);
	}

	.sa-standorte-mobile .swiper-slide:last-child {
		border-right: none;
	}

	/* Zum Standort: nur auf Home-Page sichtbar */
	.sa-standorte-mobile .sa-standort-link {
		display: none;
	}

	.sa-header--home .sa-standorte-mobile .sa-standort-link {
		display: block;
		font-size: 1.25em;
	}

	.sa-standorte-mobile .sa-standort-text {
		display: flex;
		flex-direction: column;
	}

	.sa-standorte-mobile .sa-standort-nr {
		font-size: 1.25em;
		margin-bottom: 1em;
	}

	.sa-standorte-mobile .sa-standort-name {
		font-size: 3.5em;
	}

	.sa-standorte-mobile .sa-standort-indicator {
		position: static;
		transform: none;
		margin-top: 0;
		margin-left: 0;
		margin-bottom: 1em;
		flex-shrink: 0;
		width: 1.75em;
		height: 1.75em;
		box-shadow: 0 0 0 0.35em #181818, 0 0 0 0.45em rgba(255, 255, 255, 0.3);
	}

	/* Aktiver Slide: Stadtname orange – nur wenn PHP-Klasse .active gesetzt */
	.sa-standorte-mobile .sa-standort.active .sa-standort-name {
		color: #E9530E;
	}

	/* --- Filter Toggles: nebeneinander wie Desktop --- */
	.sa-toggles {
		display: grid;
	}

	.sa-toggle {
		border-right: none;
		padding: 24px 20px;
	}

	#toggle-angebot {
		border-right: 1px solid rgba(255, 255, 255, 0.3);
	}

	.sa-toggle:last-child {
		border-bottom: none;
	}

	.sa-toggle-label {
		font-size: 3.5em;
	}

	.sa-toggle-indicator {
		width: 1.75em;
		height: 1.75em;
		box-shadow: 0 0 0 0.35em #181818, 0 0 0 0.45em rgba(255, 255, 255, 0.3);
	}

	.sa-toggle-circle {
		width: 2em;
		height: 2em;
	}

	.sa-pill {
		font-size: 3.5em;
	}

	.sa-pills {
		flex-direction: column;
		align-items: flex-start;
	}

	.sa-pills.is-open {
		max-height: 600px;
	}

	.sa-pill.active {

			box-shadow: inset 0 0 0 0.22em #181818;
		}

}

/* Desktop: Mobile Swiper ausblenden */
@media (min-width: 601px) {
	.sa-standorte-mobile {
		display: none;
	}
}