/* The glass that turns into a search field — homepage (owner, 2026-10-29).
   Markup: inc/mwf-glass-search.php (#mwfg, right after <body>); motion and
   placement: js/mwf-glass.js. Everything of it sits on the screen (fixed):
   the glass while it comes and waits, the field, the bubble — gold like the
   mark's centre circle (the owner, the evening of 2026-10-29). The block
   stays under the header (z 30) and the menu (#mwfm, 9998) in every state,
   and over the page (the catalogue's own sticky bar is 12; its phone bar, 60,
   stays over the block: there the field stands just above that bar and its
   list rises from it).
   Sizes in rem (the >1920px scaling of mwf.css), colours from the festival's
   gold, ink and wine. */

.mwfg {
	--mwfg-gold: #cdad59;
	--mwfg-gold-hi: #f0dfa6;
	--mwfg-gold-lo: #9e7a2c;
	--mwfg-mark: linear-gradient(135deg, #f6e6b0 0%, #d4b25e 42%, #b48d3a 70%, #e2c77e 100%); /* the drawing's gold (mwf_glass_svg()) as it lies on the centre circle */
	--mwfg-ink: #28191b;
	--mwfg-ink-rgb: 40, 25, 27;
	--mwfg-wine: #671e26;
	--mwfg-cream: #f4efe4;
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	z-index: 25;
	font-family: Raleway, "Helvetica Neue", Arial, sans-serif;
	-webkit-tap-highlight-color: transparent;
}

.mwfg[hidden] {
	display: none !important;
}

.mwfg-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------------------ the glass */

/* the page dims softly around the glass while it comes, then clears */
.mwfg-halo {
	position: fixed;
	inset: 0;
	z-index: 0;
	opacity: 0;
	visibility: hidden;
	background: radial-gradient(ellipse 34rem 30rem at var(--mwfg-hx, 50%) var(--mwfg-hy, 55%), rgba(20, 10, 12, .64) 0%, rgba(20, 10, 12, .42) 40%, rgba(20, 10, 12, 0) 74%);
	pointer-events: none;
}

.mwfg-stage {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1;
	pointer-events: none;
}

.mwfg-stage svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
	filter: drop-shadow(0 1.1rem 1.6rem rgba(0, 0, 0, .5));
}

/* ------------------------------------------------------------ the field */

.mwfg-box {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 2;
}

/* the open bar holds only the field and the list: around them the page
   answers (the phones' box runs from side to side, see further down) */
.mwfg.is-bar .mwfg-box {
	pointer-events: none;
}

.mwfg.is-bar .mwfg-form,
.mwfg.is-bar .mwfg-drop {
	pointer-events: auto;
}

.mwfg-form {
	position: relative;
	display: flex;
	align-items: center;
	height: 3.6rem;
	margin: 0;
	padding: 0;
	border-radius: 999px;
	background: linear-gradient(180deg, var(--mwfg-gold-hi) 0%, var(--mwfg-gold) 48%, var(--mwfg-gold-lo) 100%);
	box-shadow: 0 1.3rem 2.4rem -1.1rem rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 244, 205, .35) inset, 0 -.18rem 0 rgba(0, 0, 0, .14) inset;
	cursor: text;
	overflow: hidden;
}

.mwfg .mwfg-input {
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0 3.6rem;
	border: 0;
	border-radius: inherit;
	outline: none;
	background: transparent;
	box-shadow: none;
	color: var(--mwfg-ink);
	caret-color: var(--mwfg-wine);
	font: italic 600 1.38rem/1.2 "Cormorant Garamond", Georgia, serif;
	letter-spacing: .01em;
	text-align: center;
}

.mwfg .mwfg-input::-webkit-search-cancel-button,
.mwfg .mwfg-input::-webkit-search-decoration,
.mwfg .mwfg-input::-webkit-search-results-button {
	display: none; /* Safari's own clear button beside ours */
	-webkit-appearance: none;
	appearance: none;
}

.mwfg .mwfg-input:focus-visible {
	outline: none;
}

.mwfg-form:focus-within {
	box-shadow: 0 1.3rem 2.4rem -1.1rem rgba(0, 0, 0, .75), 0 0 0 2px var(--mwfg-wine) inset, 0 0 0 .32rem rgba(205, 173, 89, .35);
}

/* the words that type themselves, centred over the empty field */
.mwfg-type {
	position: absolute;
	inset: 0 3.4rem;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(var(--mwfg-ink-rgb), .82);
	font: italic 500 1.32rem/1.2 "Cormorant Garamond", Georgia, serif;
	font-size: min(1.32rem, 2.7vw); /* the German question, the longest, whole in the narrowest field */
	white-space: nowrap;
	overflow: hidden;
	pointer-events: none;
	transition: opacity .2s ease;
}

.mwfg-type-t {
	overflow: hidden;
	text-overflow: ellipsis;
}

.mwfg-caret {
	flex: none;
	width: 2px;
	height: 1.25em;
	margin-left: .12em;
	background: var(--mwfg-wine);
	animation: mwfg-blink 1.05s steps(1, end) infinite;
}

.mwfg-type.is-done .mwfg-caret {
	animation-duration: 1.3s;
}

.mwfg-form:focus-within .mwfg-type {
	opacity: .55;
}

.mwfg-form:focus-within .mwfg-caret {
	display: none;
}

.mwfg.has-text .mwfg-type {
	opacity: 0;
}

@keyframes mwfg-blink {
	50% { opacity: 0; }
}

@keyframes mwfg-in {
	from { opacity: 0; }
}

/* the bar's × — the only way back to the bubble */
.mwfg-x {
	position: absolute;
	top: 50%;
	right: .55rem;
	display: none;
	width: 2.5rem;
	height: 2.5rem;
	margin: -1.25rem 0 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(var(--mwfg-ink-rgb), .1);
	color: var(--mwfg-ink);
	cursor: pointer;
}

.mwfg-x svg {
	display: block;
	width: 1.05rem;
	height: 1.05rem;
	margin: auto;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
}

.mwfg-x:focus-visible {
	outline: 2px solid var(--mwfg-wine);
	outline-offset: 2px;
}

.mwfg.is-bar .mwfg-x {
	display: block;
}

/* the profile circle's twin at the bar's left end — on a phone only, where
   the header has none (further down); js/mwf-glass.js opens the header's
   own menu (or, signed out, its card) beside it. Signed in: the profile's
   colours (css/mwf-menu.css), gold on the festival's wine; signed out: as
   faint as the × */
.mwfg-prof {
	position: absolute;
	top: 50%;
	left: .4rem;
	z-index: 1;
	display: none;
	place-items: center;
	box-sizing: border-box;
	width: 2.45rem;
	height: 2.45rem;
	margin: -1.225rem 0 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(var(--mwfg-ink-rgb), .1);
	color: var(--mwfg-ink);
	cursor: pointer;
}

.mwfg-prof svg {
	display: block;
	width: 1.5rem;
	height: 1.5rem;
}

.mwfg-prof.is-in {
	background: radial-gradient(circle at 50% 32%, #4a161d 0%, var(--mwfg-ink) 78%);
	box-shadow: 0 0 0 1px rgba(255, 244, 205, .45) inset, 0 .2rem .5rem -.1rem rgba(0, 0, 0, .45);
	color: var(--mwfg-gold);
}

.mwfg-prof[aria-expanded="true"] {
	background: var(--mwfg-wine);
	color: var(--mwfg-gold-hi);
}

.mwfg-prof:focus-visible {
	outline: 2px solid var(--mwfg-wine);
	outline-offset: 2px;
}

@media (max-width: 770px) {
	.mwfg.is-bar.has-prof .mwfg-prof {
		display: grid;
	}

	.mwfg.is-bar.has-prof .mwfg-input {
		padding-left: 3.35rem;
	}

	/* the question starts after the twin and stays whole before the ×: its
	   width per px of font (measured 2026-10-30: it 16.4, de 17.6, en 15.4)
	   in the room of 100vw − 8.05rem, less the caret's */
	.mwfg.is-bar.has-prof .mwfg-type {
		left: 3.35rem;
		font-size: min(1.12rem, 4vw, calc((100vw - 8.45rem) / 16.6));
	}

	.mwfg.is-bar.has-prof .mwfg-type:lang(de) {
		font-size: min(1.12rem, 4vw, calc((100vw - 8.45rem) / 17.9));
	}

	.mwfg.is-bar.has-prof .mwfg-type:lang(en) {
		font-size: min(1.12rem, 4vw, calc((100vw - 8.45rem) / 15.6));
	}

	/* the digital catalogue: the header kept the profile circle in its middle
	   on a phone (css/mwf-menu.css) — no more where the search bar holds the
	   twin (the user, 2026-10-30: «redundant now»); this stylesheet comes
	   only with the search, so without it the circle is back. The notebook
	   page, without the search, keeps its own. */
	html.mwf-prof body.mwf-prof-keep.mwfc-has-bar .mwf-hdr-corner .mwfp:not([hidden]) {
		display: none;
	}
}

/* its menu (or card), opened from the twin standing low — the catalogue's
   phones: over the twin, its point down (the script sets .mwfg-up) */
.mwfp-menu.mwfg-up:not(.is-open),
.mwfp-guest.mwfg-up:not(.is-open) {
	transform: translateY(.45rem);
}

.mwfp-menu.mwfg-up::before,
.mwfp-guest.mwfg-up::before {
	top: auto;
	bottom: -.4rem;
	border-radius: 0 0 .15rem 0;
	background: #28191b;
	box-shadow: inset -1px -1px 0 rgba(205, 173, 89, .5);
}

/* ------------------------------------------------------------- the list */

/* only while the field has words; the script fits its height between the
   field and the screen's end (the keyboard, the catalogue's phone bar) */
.mwfg-drop {
	position: relative; /* the frame of the phones' scroll thread */
	display: none;
	margin-top: .7rem;
	overflow: hidden;
	border: 1px solid rgba(205, 173, 89, .38);
	border-radius: 1.15rem;
	background: rgba(var(--mwfg-ink-rgb), .96);
	box-shadow: 0 1.6rem 3rem -1.4rem rgba(0, 0, 0, .85);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
}

.mwfg.is-bar.is-open .mwfg-drop {
	display: flex;
	flex-direction: column;
	animation: mwfg-in .18s ease-out;
}

.mwfg-status {
	flex: none;
	margin: 0;
	padding: .75rem 1.15rem .55rem;
	color: var(--mwfg-gold);
	font: 600 .7rem/1.3 Raleway, sans-serif;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.mwfg-status:empty {
	display: none;
}

.mwfg .mwfg-list {
	flex: 1 1 auto;
	min-height: 0;
	margin: 0;
	padding: 0 0 .4rem;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	list-style: none;
	touch-action: pan-y;
}

/* its scrollbar: a slim gold thread, no arrows, no grey track (the owner:
   not the browser's own). Chrome, Edge and Safari draw it from these; Firefox
   from the standard pair below. */
.mwfg .mwfg-list::-webkit-scrollbar {
	width: 12px;
	height: 12px;
}

.mwfg .mwfg-list::-webkit-scrollbar-track {
	margin: .45rem 0;
	background: transparent;
}

.mwfg .mwfg-list::-webkit-scrollbar-thumb {
	min-height: 2.5rem;
	border: 4px solid transparent;
	border-radius: 12px;
	background: rgba(205, 173, 89, .5) padding-box;
}

.mwfg .mwfg-list::-webkit-scrollbar-thumb:hover,
.mwfg .mwfg-list::-webkit-scrollbar-thumb:active {
	background-color: rgba(240, 223, 166, .85);
}

.mwfg .mwfg-list::-webkit-scrollbar-button,
.mwfg .mwfg-list::-webkit-scrollbar-corner {
	display: none;
	background: transparent;
}

@supports not selector(::-webkit-scrollbar) {
	.mwfg .mwfg-list {
		scrollbar-width: thin;
		scrollbar-color: rgba(205, 173, 89, .6) transparent;
	}
}

/* a touch screen's own scroll bar can't be dressed: there it goes, and the
   script draws the gold thread instead (.mwfg-rail), while the list moves */
@media (pointer: coarse) {
	.mwfg .mwfg-list {
		scrollbar-width: none;
	}

	.mwfg .mwfg-list::-webkit-scrollbar {
		display: none;
	}
}

.mwfg-rail {
	position: absolute;
	right: .3rem;
	display: none;
	width: 3px;
	border-radius: 3px;
	background: rgba(205, 173, 89, .16);
	opacity: 0;
	pointer-events: none;
	transition: opacity .4s ease;
}

.mwfg-rail i {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	border-radius: inherit;
	background: linear-gradient(180deg, var(--mwfg-gold-hi), var(--mwfg-gold));
	box-shadow: 0 0 6px rgba(205, 173, 89, .45);
}

.mwfg-rail.is-on {
	opacity: 1;
	transition-duration: .12s;
}

.mwfg-row {
	display: grid;
	grid-template-columns: 4.5rem minmax(0, 1fr);
	align-items: center;
	column-gap: .95rem;
	margin: 0;
	padding: .68rem 1.15rem;
	border-top: 1px solid rgba(205, 173, 89, .12);
	color: var(--mwfg-cream);
	cursor: pointer;
	transition: background-color .15s ease;
}

.mwfg-row:first-child {
	border-top: 0;
}

.mwfg-row.is-active {
	background: rgba(205, 173, 89, .15);
	box-shadow: .22rem 0 0 var(--mwfg-gold) inset;
}

.mwfg-thumb {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4.5rem;
	height: 3rem;
	overflow: hidden;
	border-radius: .45rem;
	background: #1d1113;
	box-shadow: 0 0 0 1px rgba(205, 173, 89, .28) inset;
}

.mwfg-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* logos on a white plate, in their own colours */
.mwfg-row--exh .mwfg-thumb,
.mwfg-row--hotel .mwfg-thumb,
.mwfg-row--xw .mwfg-thumb,
.mwfg-row--fs .mwfg-thumb {
	background: #fff;
}

.mwfg-row--exh .mwfg-thumb img,
.mwfg-row--hotel .mwfg-thumb img {
	box-sizing: border-box;
	padding: .3rem .45rem;
	object-fit: contain;
}

.mwfg-thumb.is-sign {
	background: linear-gradient(150deg, #4a161d, #28191b);
	color: var(--mwfg-gold-hi);
	font: 600 1.2rem/1 "Cormorant Garamond", Georgia, serif;
	letter-spacing: .02em;
}

.mwfg-txt {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.mwfg-t {
	overflow: hidden;
	color: #fffaf0;
	font: 600 1.14rem/1.2 "Cormorant Garamond", Georgia, serif;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mwfg-w {
	order: -1;
	margin-bottom: .14rem;
	overflow: hidden;
	color: var(--mwfg-gold);
	font: 600 .64rem/1.3 Raleway, sans-serif;
	letter-spacing: .1em;
	text-overflow: ellipsis;
	text-transform: uppercase;
	white-space: nowrap;
}

/* another site's page (it opens in a tab of its own): an arrow after the address */
.mwfg-row--ext .mwfg-w::after {
	content: "";
	display: inline-block;
	width: .8em;
	height: .8em;
	margin-left: .45em;
	vertical-align: -.06em;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 17 17 7M9 7h8v8' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 17 17 7M9 7h8v8' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.mwfg-d {
	display: -webkit-box;
	margin-top: .16rem;
	overflow: hidden;
	color: rgba(244, 239, 228, .74);
	font: 400 .82rem/1.38 Raleway, sans-serif;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

@media (hover: hover) and (pointer: fine) {
	.mwfg-row:hover {
		background: rgba(205, 173, 89, .1);
	}

	.mwfg-x:hover {
		background: rgba(var(--mwfg-ink-rgb), .2);
	}

	.mwfg-bubble:hover {
		box-shadow: 0 .9rem 1.8rem -.5rem rgba(0, 0, 0, .7), 0 0 0 .3rem rgba(205, 173, 89, .45), 0 1px 0 rgba(255, 255, 255, .35) inset;
	}
}

.mwfg.is-leaving .mwfg-box {
	opacity: .7;
	transition: opacity .3s ease;
}

/* ----------------------------------------------------------- the bubble */

.mwfg-bubble {
	position: fixed;
	right: 1.6rem;
	bottom: calc(1.6rem + env(safe-area-inset-bottom, 0px));
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4rem;
	height: 4rem;
	margin: 0;
	padding: 0 0 .1rem;
	border: 1px solid rgba(255, 244, 205, .55);
	border-radius: 50%;
	background: var(--mwfg-mark);
	box-shadow: 0 .9rem 1.8rem -.5rem rgba(0, 0, 0, .7), 0 1px 0 rgba(255, 255, 255, .35) inset;
	color: var(--mwfg-ink);
	font: italic 600 2.3rem/1 "Cormorant Garamond", Georgia, serif;
	text-shadow: 0 1px 0 rgba(255, 248, 225, .45);
	cursor: pointer;
	touch-action: none; /* a finger drags it (the script), the page does not scroll under it */
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
	transition: box-shadow .5s ease;
}

.mwfg-bubble:focus-visible {
	outline: 2px solid var(--mwfg-cream);
	outline-offset: 3px;
}

.mwfg-bubble.is-drag {
	box-shadow: 0 1.3rem 2.4rem -.6rem rgba(0, 0, 0, .75), 0 0 0 .3rem rgba(205, 173, 89, .4), 0 1px 0 rgba(255, 255, 255, .35) inset;
	transform: scale(1.08);
}

/* the shape flying between the field (its gold from top to foot) and the
   bubble (the circle's gold, corner to corner, with the «?») */
.mwfg-morph {
	position: fixed;
	z-index: 3;
	display: none;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: linear-gradient(180deg, var(--mwfg-gold-hi) 0%, var(--mwfg-gold) 48%, var(--mwfg-gold-lo) 100%);
	color: var(--mwfg-ink);
	font: italic 600 2.3rem/1 "Cormorant Garamond", Georgia, serif;
	text-shadow: 0 1px 0 rgba(255, 248, 225, .45);
	box-shadow: 0 1rem 2rem -.8rem rgba(0, 0, 0, .7);
	pointer-events: none;
}

.mwfg-morph i {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: var(--mwfg-mark);
}

.mwfg-morph span {
	position: relative;
	display: block;
	margin: auto;
	padding-bottom: .1rem;
	text-align: center;
	line-height: inherit;
}

/* --------------------------------------------------------------- phones */

@media (max-width: 768px) {
	.mwfg-form {
		height: 3.25rem;
	}

	.mwfg .mwfg-input {
		padding: 0 3.1rem 0 1.2rem;
		font-size: 1.22rem;
	}

	.mwfg-type {
		inset: 0 1.1rem;
		font-size: min(1.12rem, 4vw); /* «Kann ich dir helfen…» whole beside the × on a 320 px screen */
	}

	.mwfg.is-bar .mwfg-type {
		inset: 0 3rem 0 1.2rem;
	}

	.mwfg-bubble {
		right: 1rem;
		bottom: calc(1.1rem + env(safe-area-inset-bottom, 0px));
		width: 3.6rem;
		height: 3.6rem;
		font-size: 2.1rem;
	}

	/* opened: the field from side to side under the header, on nothing but
	   the page (the owner: no ground, no blur); the list a panel under it */
	.mwfg.is-bar .mwfg-box {
		right: 0;
		left: 0 !important;
		width: auto !important;
		box-sizing: border-box;
		padding: .55rem .85rem .6rem;
	}

	.mwfg.is-bar .mwfg-drop {
		margin-top: .5rem;
		border-radius: 1rem;
	}

	.mwfg-row {
		grid-template-columns: 4rem minmax(0, 1fr);
		column-gap: .8rem;
		padding: .62rem .9rem;
	}

	.mwfg-thumb {
		width: 4rem;
		height: 2.7rem;
	}

	.mwfg-d {
		-webkit-line-clamp: 1;
		line-clamp: 1;
	}
}

/* ------------------------------------------ the catalogue's bar (2026-10-29) */

/* the «?» at the head of its phone bar (inc/mwf-catalogo-bar.php): the
   homepage's gold bubble as the button's icon, its word under it */
.whp-bar-btn.mwfg-barbtn .mwfg-barq {
	position: relative; /* its shine (below) */
	overflow: visible; /* the bar's spans clip (its labels): the shine's ring leaves this one */
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding-bottom: 1px;
	border-radius: 50%;
	background: linear-gradient(135deg, #f6e6b0 0%, #d4b25e 42%, #b48d3a 70%, #e2c77e 100%);
	box-shadow: 0 0 0 1px rgba(255, 244, 205, .5) inset, 0 2px 6px rgba(0, 0, 0, .45);
	color: #28191b;
	font: italic 700 1.15rem/1 "Cormorant Garamond", Georgia, serif;
}

/* There the open field stands on that bar (the owner, the evening of
   2026-10-29: «attached to the bottom … above whp-bar»), lined up with its
   buttons, and the list rises from it, the first row the nearest — the
   script places it (.is-low) whenever the bar is on the screen. */
.mwfg.is-low .mwfg-box {
	right: 0;
	left: 0 !important;
	display: flex;
	flex-direction: column-reverse;
	width: auto !important;
	box-sizing: border-box;
	padding: 0 12px; /* the phone bar's own sides */
}

.mwfg.is-low.is-open .mwfg-drop {
	flex-direction: column-reverse;
	margin: 0 0 .5rem;
	box-shadow: 0 -1rem 2.6rem -1.2rem rgba(0, 0, 0, .8);
}

.mwfg.is-low .mwfg-status {
	padding: .55rem 1.15rem .75rem;
}

.mwfg.is-low .mwfg-list {
	display: flex;
	flex-direction: column-reverse;
	padding: .4rem 0 0;
}

.mwfg.is-low .mwfg-row {
	flex: none;
	border-top: 0;
	border-bottom: 1px solid rgba(205, 173, 89, .12);
}

.mwfg.is-low .mwfg-row:first-child {
	border-bottom: 0;
}

/* while it stands there, the catalogue's own things at the foot (its room
   or event card, the end of the page) keep clear of it too: the script
   writes the field's height on <html> (css/mwf-catalogo-bar.css has the rest) */
@media (max-width: 899px) {
	html.mwfg-lift body.mwfc-has-bar {
		padding-bottom: calc(78px + var(--mwfg-lift, 0px) + env(safe-area-inset-bottom, 0px));
	}

	html.mwfg-lift body.mwfc-has-bar .mwfc-cards {
		bottom: calc(78px + .7rem + var(--mwfg-lift, 0px) + env(safe-area-inset-bottom, 0px));
	}
}

/* ------------------------------------------ the bubble's shine (phones) */

/* while this page still hides an MWF 35 achievement not found yet — a
   visitor signed in, on a phone, where the profile circle sits in the bar
   and its shine comes here (the user, 2026-10-30): lit from behind; every
   8 s a ring of light leaves it and a sheen crosses its gold (the script:
   transform and opacity only). Never while the bar is open. */
.mwfg-bubble.is-hunt {
	box-shadow: 0 0 0 .2rem rgba(246, 230, 176, .3), 0 0 1.7rem .45rem rgba(236, 200, 112, .62), 0 .9rem 1.8rem -.5rem rgba(0, 0, 0, .7), 0 1px 0 rgba(255, 255, 255, .35) inset;
}

.whp-bar-btn.mwfg-barbtn .mwfg-barq.is-hunt {
	box-shadow: 0 0 0 1px rgba(255, 244, 205, .5) inset, 0 0 0 2px rgba(246, 230, 176, .3), 0 0 12px 4px rgba(236, 200, 112, .65);
}

.mwfg-glow,
.mwfg-sheen {
	position: absolute;
	inset: -1px;
	border-radius: 50%;
	pointer-events: none;
}

.mwfg-glow {
	box-shadow: 0 0 0 .14rem rgba(255, 240, 190, .9), 0 0 1.2rem .35rem rgba(236, 200, 112, .75);
	opacity: 0;
}

.mwfg-barq .mwfg-glow {
	box-shadow: 0 0 0 2px rgba(255, 240, 190, .95), 0 0 10px 4px rgba(236, 200, 112, .85);
}

.mwfg-sheen {
	overflow: hidden;
}

.mwfg-sheen i {
	position: absolute;
	top: -15%;
	bottom: -15%;
	left: 22%;
	width: 56%;
	background: linear-gradient(90deg, rgba(255, 236, 170, 0) 0%, rgba(255, 236, 170, .22) 30%, rgba(255, 249, 226, .92) 50%, rgba(255, 236, 170, .22) 70%, rgba(255, 236, 170, 0) 100%);
	opacity: 0;
	transform: translateX(-160%) skewX(-18deg);
}

/* --------------------------------------------------- the phones' card */

/* On a phone the intro plays in a card of its own at the head of the hero's
   deck, before TasteTerroir (the user, 2026-10-30): golden-white, the deck's
   leaf cut (TasteTerroir's mirrored) and brass frame, held under the header
   where TasteTerroir is held, which then rises over it (css/mwf-home.css «the
   hero deck»). The glass and the field are placed in it by the script. Gone,
   it fades, then leaves the deck. Colours literal: it lies outside .mwfg. */
@media (max-width: 768px) {
	#hero .tab-nav .mwfg-card {
		position: sticky;
		top: calc(14vh + 1.1rem);
		z-index: 0;
		order: 0;
		flex: none;
		display: block;
		box-sizing: border-box;
		width: min(100%, 24rem);
		aspect-ratio: 4 / 5;
		margin: 0;
		overflow: hidden;
		border: 1px solid rgba(205, 173, 89, .45);
		border-radius: .8rem 5rem .8rem 5rem;
		background: radial-gradient(120% 90% at 50% 36%, #fffdf7 0%, #fbf3de 48%, #f1dfb0 100%);
		box-shadow: 0 -14px 34px -20px rgba(0, 0, 0, .75), 0 30px 60px -30px rgba(0, 0, 0, .85);
		transition: opacity .45s ease;
	}

	#hero .tab-nav .mwfg-card::after {
		content: "";
		position: absolute;
		inset: .6rem;
		z-index: 3;
		border: 1px solid rgba(180, 141, 58, .5);
		border-radius: .3rem 4.4rem .3rem 4.4rem;
		pointer-events: none;
	}

	#hero .tab-nav .mwfg-card.is-gone {
		opacity: 0;
		pointer-events: none;
	}

	/* TasteTerroir one card further down while it is there */
	#hero .tab-nav.has-mwfg-card .tab.left.top {
		margin-top: 15vh;
	}
}

.mwfg-card .mwfg-stage {
	position: absolute;
}

.mwfg-card .mwfg-stage svg {
	filter: drop-shadow(0 .45rem .7rem rgba(90, 62, 14, .35)); /* a warm shade on the light card */
}

/* the field it shoots out: the bar's gold, the question typing itself; a tap opens the bar */
.mwfg-card-field {
	position: absolute;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	margin: 0;
	padding: 0 .9rem;
	border: 0;
	border-radius: 999px;
	background: linear-gradient(180deg, #f0dfa6 0%, #cdad59 48%, #9e7a2c 100%);
	box-shadow: 0 .9rem 1.6rem -.8rem rgba(70, 45, 10, .55), 0 0 0 1px rgba(255, 244, 205, .35) inset, 0 -.18rem 0 rgba(0, 0, 0, .14) inset;
	color: rgba(40, 25, 27, .85);
	font: italic 500 .98rem/1.2 "Cormorant Garamond", Georgia, serif;
	white-space: nowrap;
	overflow: hidden;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.mwfg-card-field:focus-visible {
	outline: 2px solid #671e26;
	outline-offset: 3px;
}

/* the question whole in the field: its width per px of font (it 16.4, de
   17.6, en 15.4, measured 2026-10-30) in the field's room, the card's width
   (100vw − 2.5rem, at most 24rem) less 4.45rem */
.mwfg-card-t {
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: min(.98rem, calc((min(100vw - 2.5rem, 24rem) - 4.45rem) / 16.6));
}

.mwfg-card-t:lang(de) {
	font-size: min(.98rem, calc((min(100vw - 2.5rem, 24rem) - 4.45rem) / 17.9));
}

.mwfg-card-t:lang(en) {
	font-size: min(.98rem, calc((min(100vw - 2.5rem, 24rem) - 4.45rem) / 15.6));
}

.mwfg-card-field .mwfg-caret {
	background: #671e26; /* the wine of the bar's caret (its variable lives on .mwfg) */
}

.mwfg-card-field.is-done .mwfg-caret {
	animation-duration: 1.3s;
}

@media (prefers-reduced-motion: reduce) {
	.mwfg-caret,
	.mwfg.is-bar.is-open .mwfg-drop,
	.mwfg-rail,
	.mwfg-bubble,
	#hero .tab-nav .mwfg-card {
		animation: none;
		transition: none;
	}
}