/* Bistro Menu – PDF-Karten (relative Einheiten, anpassbar über CSS-Variablen) */

.bistro-karte {
	--bistro-karte-akzent: #5b7560;          /* gedecktes Salbeigrün */
	--bistro-karte-akzent-text: #fff;
	--bistro-karte-akzent-hell: #e8eee8;
	--bistro-karte-rand: #d5dbd5;
	--bistro-karte-text: inherit;
	--bistro-karte-gedimmt: #5c625c;
	--bistro-karte-radius: 0.5em;
	--bistro-karte-max-breite: 60em;
	--bistro-karte-abstand: 1.25em;

	width: 100%;
	max-width: var(--bistro-karte-max-breite);
	margin: 0 auto;
	color: var(--bistro-karte-text);
	overflow-wrap: anywhere;
}

/* Tabs */
.bistro-karte__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	margin-bottom: var(--bistro-karte-abstand);
	border-bottom: 0.125em solid var(--bistro-karte-rand);
}

.bistro-karte__tabs[hidden] {
	display: none;
}

.bistro-karte__tab {
	flex: 1 1 auto;
	min-height: 2.75em; /* Touch-Ziel */
	margin: 0 0 -0.125em;
	padding: 0.6em 1em;
	background: transparent;
	border: 0;
	border-bottom: 0.2em solid transparent;
	border-radius: var(--bistro-karte-radius) var(--bistro-karte-radius) 0 0;
	color: inherit;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.bistro-karte__tab:hover {
	background: var(--bistro-karte-akzent-hell);
}

.bistro-karte__tab[aria-selected="true"] {
	border-bottom-color: var(--bistro-karte-akzent);
	color: var(--bistro-karte-akzent);
}

.bistro-karte__tab:focus-visible,
.bistro-karte__panel:focus-visible,
.bistro-karte__button:focus-visible {
	outline: 0.1875em solid var(--bistro-karte-akzent);
	outline-offset: 0.125em;
}

/* Karte */
.bistro-karte__panel[hidden] {
	display: none;
}

.bistro-karte__panel + .bistro-karte__panel {
	margin-top: calc(var(--bistro-karte-abstand) * 2);
}

.bistro-karte__anker {
	display: block;
	position: relative;
	top: -5em; /* Platz für fixierte Header beim Anspringen per #wein */
	visibility: hidden;
}

.bistro-karte__titel {
	margin: 0 0 0.25em;
}

.bistro-karte__stand {
	margin: 0 0 var(--bistro-karte-abstand);
	color: var(--bistro-karte-gedimmt);
}

.bistro-karte__download {
	margin: 0 0 var(--bistro-karte-abstand);
}

.bistro-karte__button,
.bistro-karte__button:visited {
	display: inline-block;
	padding: 0.7em 1.4em;
	background: var(--bistro-karte-akzent);
	border-radius: var(--bistro-karte-radius);
	color: var(--bistro-karte-akzent-text);
	font-weight: 600;
	text-decoration: none;
}

.bistro-karte__button:hover {
	filter: brightness(0.9);
	color: var(--bistro-karte-akzent-text);
}

/* Blätter-Ansicht: eine Seite pro "Blatt", seitlich wischen oder blättern */
.bistro-karte__viewer {
	--bistro-karte-seite-hoehe: 85vh;   /* maximale Höhe einer Seite */

	position: relative;
	background: var(--bistro-karte-akzent-hell);
	border: 0.0625em solid var(--bistro-karte-rand);
	border-radius: var(--bistro-karte-radius);
	overflow: hidden;
}

@supports (height: 1svh) {
	.bistro-karte__viewer {
		--bistro-karte-seite-hoehe: 85svh;
	}
}

.bistro-karte__seiten {
	display: flex;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}

.bistro-karte__seiten:focus-visible {
	outline: 0.1875em solid var(--bistro-karte-akzent);
	outline-offset: -0.1875em;
}

.bistro-karte__seite {
	position: relative;
	display: flex;
	flex: 0 0 100%;
	align-items: center;
	justify-content: center;
	min-width: 0;
	margin: 0;
	padding: 0.5em;
	box-sizing: border-box;
	scroll-snap-align: center;
	scroll-snap-stop: always;
}

.bistro-karte__seite[hidden] {
	display: none;
}

.bistro-karte__seite img {
	position: relative;
	z-index: 1;
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: var(--bistro-karte-seite-hoehe);
	background: #fff;
	box-shadow: 0 0.125em 0.5em rgba(0, 0, 0, 0.12);
}

.bistro-karte__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5em;
	padding: 0.5em;
	border-top: 0.0625em solid var(--bistro-karte-rand);
	background: #fff;
}

.bistro-karte__nav[hidden] {
	display: none;
}

.bistro-karte__blaettern {
	min-width: 2.75em;
	min-height: 2.75em; /* Touch-Ziel */
	padding: 0.5em 0.9em;
	background: var(--bistro-karte-akzent);
	border: 0;
	border-radius: var(--bistro-karte-radius);
	color: var(--bistro-karte-akzent-text);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.bistro-karte__blaettern:disabled {
	opacity: 0.35;
	cursor: default;
}

.bistro-karte__blaettern:focus-visible {
	outline: 0.1875em solid var(--bistro-karte-akzent);
	outline-offset: 0.125em;
}

.bistro-karte__zaehler {
	color: var(--bistro-karte-gedimmt);
	font-variant-numeric: tabular-nums;
	text-align: center;
}

/* Ladezustand: liegt unter dem Bild, wird vom geladenen Bild verdeckt. */
.bistro-karte__laden {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1em;
	color: var(--bistro-karte-gedimmt);
	text-align: center;
	animation: bistro-karte-puls 1.6s ease-in-out infinite;
}

.bistro-karte__seite.is-geladen .bistro-karte__laden {
	display: none;
}

@keyframes bistro-karte-puls {
	50% { opacity: 0.4; }
}

@media (prefers-reduced-motion: reduce) {
	.bistro-karte__laden {
		animation: none;
	}
}

/* Hinweise */
.bistro-karte__leer,
.bistro-karte__fehler {
	padding: 1.25em;
	background: var(--bistro-karte-akzent-hell);
	border-radius: var(--bistro-karte-radius);
	text-align: center;
}

.bistro-karte__fehler[hidden] {
	display: none;
}

.bistro-karte__hinweis {
	margin-top: var(--bistro-karte-abstand);
	color: var(--bistro-karte-gedimmt);
	font-size: 0.95em;
}

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