/**
 * responsive.css – Responsive Design & Touch-Optimierung
 *
 * Breakpoints:
 *   ≤1100px  Tablets & kleine Laptops
 *   ≤768px   Tablets Hochformat & grosse Phones
 *   ≤520px   Phones
 *   ≤380px   Sehr kleine Phones
 *   Touch    Touch-Geräte
 */

/* ================================================================
   TABLETS & KLEINE LAPTOPS (≤1100px)
   ================================================================ */

@media (max-width: 1100px) {
	.main-layout {
		flex-wrap: wrap;
		overflow-x: visible;
	}
	#clock {
		margin: 1em 1em;
	}
	.top-bar {
		margin: 0.5em 1.5em 1em;
	}
}

/* ================================================================
   TABLETS HOCHFORMAT & GROSSE PHONES (≤768px)
   ================================================================ */

@media (max-width: 768px) {
	html {
		font-size: 18px;
	}

	/* Layout: Spalten untereinander */
	.main-layout {
		flex-direction: column;
		align-items: center;
		gap: 1em;
		padding: 0 0.75em 1em;
		overflow-x: visible;
	}
	.clock-column {
		width: 100%;
		display: flex;
		justify-content: center;
	}
	.timetable-column {
		width: 100%;
		max-width: 100%;
	}

	/* Uhr kompakter */
	#clock {
		padding: 1.2em;
		margin: 0.5em 0;
		letter-spacing: 0.3em;
		word-spacing: -0.85em;
	}
	#clock > .word {
		font-size: 1.5em;
	}

	/* Top-Bar */
	.top-bar {
		margin: 0.5em 0.75em;
		gap: 0.5em;
	}
	.buttons-wrap {
		gap: 0.35em;
		justify-content: center;
	}
	.button {
		padding: 0.6em 0.75em;
		font-size: 13px;
	}
	.lang-select,
	.theme-select {
		min-width: 6em;
		font-size: 13px;
		padding: 0.6em 1.8em 0.6em 0.75em;
	}

	/* Datum */
	.dates {
		padding: 0.5em;
		font-size: 0.65em;
		letter-spacing: 0.15em;
	}
	#showdates {
		padding: 0.6em 0.8em;
	}
	.showdates-wrap {
		text-align: center;
		flex: 1 1 100%;
	}

	/* Formulare volle Breite */
	.timetable-form-always,
	.stationboard-form-always {
		display: block;
		width: auto;
		box-sizing: border-box;
	}
	.timetable-panel,
	.stationboard-panel {
		width: auto;
		max-width: 100%;
		padding: 0.75em 1em;
		box-sizing: border-box;
		overflow-x: auto;
	}

	/* Fahrplan-Zeilen kompakter */
	#timetable-list {
		column-gap: 0.6em;
		font-size: 0.82rem;
	}
	#stationboard-list {
		column-gap: 0.6em;
		font-size: 0.82rem;
	}
	.timetable-products {
		font-size: 0.82em;
	}
	.stationboard-product {
		font-size: 0.82em;
	}
	.timetable-transfers {
		font-size: 0.82em;
	}

	/* Wetter kompakter */
	.weather-widget {
		padding: 0.4em 0.8em;
		font-size: 0.78rem;
		flex: 1 1 auto;
	}
	.weather-icon {
		font-size: 1.4em;
	}

	/* Tabs volle Breite */
	.right-panel-tabs {
		width: 100%;
	}
	.tab-btn {
		flex: 1;
		text-align: center;
		padding: 0.5em 0.8em;
		font-size: 0.8rem;
	}
}

/* ================================================================
   PHONES (≤520px)
   ================================================================ */

@media (max-width: 520px) {
	html {
		font-size: 16px;
	}
	.main-layout {
		padding: 0 0.4em 0.5em;
		gap: 0.75em;
	}

	/* Uhr nochmals kleiner */
	#clock {
		padding: 0.8em 0.6em;
		margin: 0.25em 0;
		letter-spacing: 0.2em;
		word-spacing: -0.7em;
		border-radius: 0.3em;
	}
	#clock > .word {
		font-size: 1.15em;
	}

	/* Top-Bar: Buttons übereinander */
	.top-bar {
		margin: 0.3em 0.4em;
		flex-direction: column;
		align-items: stretch;
		gap: 0.4em;
	}
	.buttons-wrap {
		justify-content: center;
		flex-wrap: wrap;
		gap: 0.25em;
	}
	.button {
		padding: 0.5em 0.55em;
		font-size: 11px;
	}
	.lang-select,
	.theme-select {
		min-width: auto;
		font-size: 11px;
		padding: 0.5em 1.5em 0.5em 0.55em;
	}

	/* Datum kleiner */
	#showdates {
		padding: 0.4em 0.6em;
	}
	.dates {
		padding: 0.2em;
		font-size: 0.55em;
		letter-spacing: 0.1em;
	}

	/* Wetter volle Breite */
	.weather-widget {
		width: 100%;
		justify-content: center;
		font-size: 0.72rem;
		box-sizing: border-box;
	}

	/* Inputs kompakter */
	.timetable-input {
		min-width: 4em;
		font-size: 0.8rem;
		padding: 0.35em 0.5em;
	}
	.timetable-form-row label,
	.stationboard-form-row label {
		min-width: 2.5em;
		font-size: 0.8rem;
	}

	/* Dauer + Gleis verstecken */
	.timetable-duration { display: none; }
	.timetable-platform { display: none; }

	/* Grid auf 5 Spalten reduzieren (ohne Dauer + Gleis) */
	#timetable-list {
		grid-template-columns: auto auto auto auto auto;
		column-gap: 0.4em;
		font-size: 0.78rem;
	}
	.timetable-products {
		font-size: 0.78em;
	}
	#stationboard-list {
		column-gap: 0.4em;
		font-size: 0.78rem;
	}
	.timetable-panel,
	.stationboard-panel {
		padding: 0.5em 0.6em;
		min-width: auto;
	}
	.timetable-title {
		font-size: 0.85rem;
	}
	.timetable-row-details {
		padding: 0.3em 0 0.4em 0.3em;
	}
	.timetable-transfer-detail {
		font-size: 0.7em;
	}
	.sbb-status {
		font-size: 0.7rem;
		padding: 0.4em 0.6em;
	}
	.status-conn {
		font-size: 0.65rem;
		gap: 0.3em;
	}
	.status-conn-product {
		min-width: 3.5em;
	}
	.favorites-list {
		font-size: 0.78rem;
	}
	.news-ticker {
		font-size: 0.7rem;
		margin-top: 0.75em;
	}
	.sport-ticker {
		bottom: 1.9em;
	}
	.news-ticker-label {
		padding: 0 0.6em;
		font-size: 0.7rem;
	}
	.tab-btn {
		font-size: 0.75rem;
		padding: 0.45em 0.5em;
	}
}

/* ================================================================
   SEHR KLEINE PHONES (≤380px)
   ================================================================ */

@media (max-width: 380px) {
	html {
		font-size: 14px;
	}
	#clock {
		padding: 0.6em 0.4em;
		letter-spacing: 0.12em;
		word-spacing: -0.55em;
	}
	#clock > .word {
		font-size: 1em;
	}
	.button {
		padding: 0.45em 0.4em;
		font-size: 10px;
	}
	.lang-select,
	.theme-select {
		font-size: 10px;
	}
	#timetable-list {
		font-size: 0.72rem;
		column-gap: 0.3em;
	}
	#stationboard-list {
		font-size: 0.72rem;
		column-gap: 0.3em;
	}
}

/* ================================================================
   SETTINGS-PANEL RESPONSIVE
   ================================================================ */

@media (max-width: 520px) {
	.settings-panel {
		padding: 1em 1.2em;
		width: 95%;
		max-height: 85vh;
	}
	.settings-module-item {
		padding: 0.55em 0.5em;
	}
	.settings-module-label {
		font-size: 0.82rem;
	}
	.settings-title {
		font-size: 0.95rem;
	}
	.settings-action-btn {
		font-size: 0.75rem;
		padding: 0.45em 0.8em;
	}
}

/* ================================================================
   TOUCH-OPTIMIERUNG
   ================================================================ */

@media (hover: none) and (pointer: coarse) {
	/* Mindestgrösse für Touch-Targets (44×44px) */
	.button,
	.tab-btn,
	.timetable-locate-btn,
	.timetable-swap-btn,
	.timetable-search-btn,
	.favorite-add-btn,
	.favorite-remove-btn {
		min-height: 44px;
		min-width: 44px;
	}

	.timetable-transfers-clickable {
		padding: 0.3em 0.2em;
	}

	.favorite-route {
		padding: 0.4em 0.2em;
	}

	/* Verhindert Zoom auf iOS bei Fokus */
	.timetable-input {
		min-height: 44px;
		font-size: 16px;
	}

	.lang-select,
	.theme-select {
		min-height: 44px;
		font-size: 16px;
	}

	/* Settings-Toggle Touch-freundlich */
	.settings-module-item {
		min-height: 44px;
	}
	.settings-switch {
		width: 50px;
		height: 28px;
	}
	.settings-switch::after {
		width: 22px;
		height: 22px;
	}
	.settings-module-item input:checked + .settings-switch::after {
		transform: translateX(22px);
	}
	.settings-action-btn {
		min-height: 44px;
	}
}