/* Tinytrips Cockpit & Flight Schedule
   Alles scoped auf .tt-fs / .tt-cockpit. Nutzt die globalen Theme-Variablen
   von Twenty Twenty-Five (mit Fallbacks), damit das restliche Design
   unberuehrt bleibt und sich die Elemente natuerlich einfuegen. */

.tt-fs,
.tt-cockpit {
	--tt-ink:      var(--wp--preset--color--contrast, #1a1a1a);
	--tt-paper:    var(--wp--preset--color--base, #ffffff);
	--tt-ontime:   #2f9e60;
	--tt-boarding: #c19a26;
	--tt-line:     color-mix(in srgb, var(--tt-ink) 12%, transparent);
	--tt-muted:    color-mix(in srgb, var(--tt-ink) 55%, transparent);
	--tt-closed:   color-mix(in srgb, var(--tt-ink) 42%, transparent);
	box-sizing: border-box;
}
.tt-fs *,
.tt-cockpit * { box-sizing: border-box; }

/* ---------------- FLIGHT SCHEDULE ---------------- */
.tt-fs {
	max-width: var(--wp--style--global--content-size, 1100px);
	margin-inline: auto;
	font-family: inherit;
	color: var(--tt-ink);
}
.tt-fs__eyebrow {
	font-size: .72rem;
	letter-spacing: .3em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--tt-muted);
	margin: 0 0 1.1rem;
}
.tt-fs__title {
	font-size: clamp(1.4rem, 3vw, 1.9rem);
	line-height: 1.2;
	font-weight: 700;
	margin: 0 0 1.4rem;
	color: var(--tt-ink);
}
.tt-fs__list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--tt-line);
}
.tt-fs__row {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto;
	align-items: center;
	gap: 1rem;
	padding: 1.05rem .15rem;
	border-bottom: 1px solid var(--tt-line);
}
.tt-fs__day {
	font-weight: 600;
	letter-spacing: .01em;
}
.tt-fs__time {
	font-variant-numeric: tabular-nums;
	color: var(--tt-muted);
	white-space: nowrap;
}
.tt-fs__status {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	justify-self: end;
	font-size: .78rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	font-weight: 600;
	white-space: nowrap;
	color: var(--tt-muted);
}
.tt-fs__dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--tt-closed);
	flex: 0 0 auto;
}
.tt-fs__status--ontime { color: var(--tt-ontime); }
.tt-fs__status--ontime .tt-fs__dot {
	background: var(--tt-ontime);
	animation: tt-pulse-g 2.4s ease-out infinite;
}
.tt-fs__status--boarding { color: var(--tt-boarding); }
.tt-fs__status--boarding .tt-fs__dot {
	background: var(--tt-boarding);
	animation: tt-pulse-y 2.4s ease-out infinite;
}
.tt-fs__status--closed { color: var(--tt-muted); }

@keyframes tt-pulse-g {
	0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--tt-ontime) 55%, transparent); }
	70%  { box-shadow: 0 0 0 7px transparent; }
	100% { box-shadow: 0 0 0 0 transparent; }
}
@keyframes tt-pulse-y {
	0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--tt-boarding) 55%, transparent); }
	70%  { box-shadow: 0 0 0 7px transparent; }
	100% { box-shadow: 0 0 0 0 transparent; }
}

@media (max-width: 600px) {
	.tt-fs__row {
		grid-template-columns: 1fr auto;
		grid-template-areas:
			"day status"
			"time status";
		row-gap: .2rem;
		padding: .95rem .1rem;
	}
	.tt-fs__day    { grid-area: day; }
	.tt-fs__time   { grid-area: time; }
	.tt-fs__status { grid-area: status; align-self: center; }
}

/* ---------------- COCKPIT / WETTER-WIDGET ---------------- */
.tt-cockpit {
	--tt-ck-bg:     var(--wp--preset--color--contrast, #17181c);
	--tt-ck-fg:     var(--wp--preset--color--base, #ffffff);
	--tt-ck-border: color-mix(in srgb, var(--tt-ck-fg) 16%, transparent);
	display: flex;
	align-items: center;
	gap: clamp(.85rem, 2.2vw, 1.6rem);
	max-width: 460px;
	padding: .7rem .8rem .7rem 1.05rem;
	background: var(--tt-ck-bg);
	color: var(--tt-ck-fg);
	border: 1px solid var(--tt-ck-border);
	border-radius: 16px;
	box-shadow: 0 10px 26px rgba(0, 0, 0, .14);
	font-family: inherit;
	line-height: 1.2;
	opacity: 0;
	transform: translateY(10px);
	animation: tt-ck-in .5s cubic-bezier(.2, .7, .2, 1) forwards;
	transition: opacity .3s ease, transform .3s ease;
}
.tt-cockpit.is-closing {
	opacity: 0;
	transform: translateY(8px);
	pointer-events: none;
}
.tt-cockpit--light {
	--tt-ck-bg:     var(--wp--preset--color--base, #ffffff);
	--tt-ck-fg:     var(--wp--preset--color--contrast, #1a1a1a);
	--tt-ck-border: color-mix(in srgb, var(--tt-ck-fg) 14%, transparent);
	box-shadow: 0 8px 22px rgba(0, 0, 0, .08);
}
.tt-cockpit__loc {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	font-size: .72rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	font-weight: 600;
	white-space: nowrap;
}
.tt-cockpit__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--tt-ontime, #2f9e60);
	animation: tt-pulse-g 2.6s ease-out infinite;
	flex: 0 0 auto;
}
.tt-cockpit__temp {
	font-size: clamp(1.35rem, 4.5vw, 1.85rem);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: -.01em;
	white-space: nowrap;
}
.tt-cockpit__meta {
	display: inline-flex;
	align-items: center;
	font-size: .74rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	font-weight: 600;
	color: color-mix(in srgb, var(--tt-ck-fg) 78%, transparent);
	white-space: nowrap;
}
.tt-cockpit__spacer { flex: 1 1 auto; }
.tt-cockpit__close {
	appearance: none;
	border: 0;
	background: transparent;
	cursor: pointer;
	color: color-mix(in srgb, var(--tt-ck-fg) 65%, transparent);
	font-size: 1.15rem;
	line-height: 1;
	padding: .35rem .45rem;
	border-radius: 8px;
	flex: 0 0 auto;
	transition: color .2s ease, background .2s ease;
}
.tt-cockpit__close:hover {
	color: var(--tt-ck-fg);
	background: color-mix(in srgb, var(--tt-ck-fg) 12%, transparent);
}

/* Schwebende Varianten (optional per float="bl|br|tl|tr") */
.tt-cockpit--float { position: fixed; z-index: 9998; }
.tt-cockpit--bl { left: 22px;  bottom: 22px; }
.tt-cockpit--br { right: 22px; bottom: 22px; }
.tt-cockpit--tl { left: 22px;  top: 22px; }
.tt-cockpit--tr { right: 22px; top: 22px; }

@keyframes tt-ck-in {
	to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 560px) {
	.tt-cockpit {
		flex-wrap: wrap;
		max-width: min(92vw, 460px);
		gap: .5rem .9rem;
		padding: .65rem .7rem .7rem .9rem;
	}
	.tt-cockpit__loc   { order: 1; }
	.tt-cockpit__close { order: 2; margin-left: auto; }
	.tt-cockpit__temp  { order: 3; }
	.tt-cockpit__meta  { order: 4; }
	.tt-cockpit__spacer { display: none; }
	.tt-cockpit--float {
		left: 12px  !important;
		right: 12px !important;
		bottom: 12px;
		max-width: none;
	}
	.tt-cockpit--tl, .tt-cockpit--tr { top: 12px; bottom: auto; }
}

/* Bewegung reduzieren */
@media (prefers-reduced-motion: reduce) {
	.tt-fs__dot,
	.tt-cockpit__dot { animation: none !important; }
	.tt-cockpit {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
		transition: opacity .2s ease !important;
	}
	.tt-cockpit.is-closing { transform: none; }
}