/* Vorschau in der Karte.

   Farben, Schriften und Rundungen sind die des Detailfensters im Theme —
   die Vorschau ist dessen kleine Schwester und soll nicht aussehen wie
   von einer anderen Website.

   Sand  #FAF5EC   Grund der Platte
   Lehm  #E9DDC8   leerer Bildrahmen
   Braun #7A5528   die Zeile über dem Namen
   Tinte #1F2A21   der Name
   Moos  #56604F   die Beschreibung
   Grün  #25532D   der Preis                                            */

.tv-preview {
	position: fixed;
	z-index: 80;
	background: #FAF5EC;
	border-radius: 24px;
	overflow: hidden;
	box-shadow: 0 1px 0 rgba(60, 40, 10, 0.06), 0 30px 70px -30px rgba(0, 0, 0, 0.5);
	pointer-events: none;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 160ms cubic-bezier(.2, .7, .2, 1), transform 160ms cubic-bezier(.2, .7, .2, 1);
}

.tv-preview.is-open {
	opacity: 1;
	transform: none;
}

.tv-preview[hidden] {
	display: none !important;
}

.tv-preview__fig {
	position: relative;
	background: #E9DDC8;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

/* Ohne aspect-ratio (ältere Browser) bliebe der Rahmen flach und das Bild
   stünde auf einem Pixel. */
@supports not (aspect-ratio: 4 / 3) {
	.tv-preview__fig { height: 240px; }
}

.tv-preview__fig[hidden] {
	display: none;
}

.tv-preview__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 200ms linear;
}

.tv-preview__img.is-ready {
	opacity: 1;
}

.tv-preview__body {
	display: flex;
	flex-direction: column;
	gap: 7px;
	padding: 18px 20px 20px;
}

.tv-preview__body > [hidden] {
	display: none;
}

.tv-preview__group {
	font-family: Newsreader, Georgia, serif;
	font-style: italic;
	font-size: 16px;
	line-height: 1.3;
	color: #7A5528;
}

.tv-preview__name {
	font-family: Newsreader, Georgia, serif;
	font-weight: 500;
	font-size: 26px;
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: #1F2A21;
	text-wrap: balance;
}

.tv-preview__desc {
	font-size: 14.5px;
	line-height: 1.55;
	color: #56604F;
	text-wrap: pretty;
}

.tv-preview__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding-top: 2px;
}

.tv-preview__pill {
	font-size: 11px;
	font-weight: 600;
	padding: 3px 10px;
	border-radius: 999px;
	background: #F2E8D8;
	color: #1F2A21;
	white-space: nowrap;
}

.tv-preview__pill.is-vegan {
	background: #E6F0E4;
	color: #1B3E21;
}

.tv-preview__sides {
	font-size: 13px;
	color: #6B7266;
}

.tv-preview__price {
	font-family: Newsreader, Georgia, serif;
	font-weight: 600;
	font-size: 24px;
	line-height: 1.2;
	color: #25532D;
	font-variant-numeric: tabular-nums;
	padding-top: 2px;
}

/* Wer Bewegung abbestellt hat, bekommt sie auch hier nicht. */
@media (prefers-reduced-motion: reduce) {
	.tv-preview,
	.tv-preview__img {
		transition: none;
	}

	.tv-preview {
		transform: none;
	}
}

/* Kein echtes Überfahren, oder kein Platz neben der Karte: dann gibt es
   die Platte gar nicht. Das Skript prüft dasselbe — hier steht es noch
   einmal, damit sie auch dann nicht aufblitzt, wenn jemand das Fenster
   schmaler zieht, während sie offen ist.

   Die 999 gehört zur 1000 in public/js/preview.js. Wer eine ändert und die
   andere vergisst, bekommt eine Platte, die erscheint und danebenliegt.

   Und sie gilt nur für „--live": dieselbe Datei wird in der Verwaltung
   mitgeladen, und dort soll die Beispielplatte auch in einem schmalen
   Fenster zu sehen sein — sonst steht unter „So sieht sie aus" ein leerer
   Kasten, und das liest sich wie ein Fehler. */
@media (max-width: 999px), (hover: none), (pointer: coarse) {
	.tv-preview--live {
		display: none !important;
	}
}