/* Hagelstadt – Aquarell auf Papier. Farben, Schriften und Abstände kommen aus
   theme.json, hier stehen Layout und die Bausteine der Plugin-Blöcke. */

:root {
	--hgl-gruen: var(--wp--preset--color--gruen);
	--hgl-tinte: var(--wp--preset--color--tinte);
	--hgl-grau: var(--wp--preset--color--grau);
	--hgl-linie: var(--wp--preset--color--linie);
	--hgl-papier-farbe: var(--wp--preset--color--papier);
	--hgl-radius: 6px;
	--hgl-kopf-hoehe: 4.5rem;
}

body,
.editor-styles-wrapper {
	background-color: var(--hgl-papier-farbe);
	background-image: var(--hgl-papier);
	background-repeat: repeat;
	background-size: 700px 700px;
	-webkit-font-smoothing: antialiased;
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.hgl-haupt {
	flex: 1;
	margin-block-start: 0;
}

img {
	max-width: 100%;
	height: auto;
}

/* ---------- Kopfzeile ---------- */

.hgl-kopf {
	position: sticky;
	top: 0;
	z-index: 40;
	/* Kein backdrop-filter: der würde das fixe Overlay-Menü in der Kopfzeile einsperren. */
	background: var(--hgl-papier-farbe) var(--hgl-papier) repeat;
	background-size: 700px 700px;
	border-bottom: 1px solid color-mix(in srgb, var(--hgl-linie) 60%, transparent);
}

.admin-bar .hgl-kopf {
	top: var(--wp-admin--admin-bar--height, 0);
}

.hgl-kopf__innen {
	max-width: 1280px;
	margin-inline: auto;
	padding-inline: var(--wp--style--root--padding-left);
	min-height: var(--hgl-kopf-hoehe);
	gap: 1rem;
}

.hgl-logo-bild,
.hgl-logo-bild a {
	display: block;
	margin: 0;
	flex-shrink: 0;
}

.hgl-logo-bild img {
	height: 3rem;
	width: auto;
}

@media (min-width: 640px) {
	:root {
		--hgl-kopf-hoehe: 5rem;
	}

	.hgl-kopf .hgl-logo-bild img {
		height: 4rem;
	}
}

.hgl-logo-bild--klein img {
	height: 2.5rem;
}

.hgl-nav {
	margin-inline-start: auto;
}

.hgl-nav .wp-block-navigation-item__content {
	padding: 0.5rem 0.75rem;
	color: color-mix(in srgb, var(--hgl-tinte) 80%, transparent);
	border-radius: var(--hgl-radius);
}

.hgl-nav .wp-block-navigation-item__content:hover,
.hgl-nav .current-menu-item > .wp-block-navigation-item__content {
	color: var(--hgl-gruen);
	text-decoration: none;
}

.hgl-nav .wp-block-navigation__container {
	gap: 0.25rem;
}

/* Menü-Knopf bis 1200 px, damit sechs Links, Logo und Anruf-Button nicht
   gequetscht werden (Core schaltet schon ab 600 px um). */
@media (max-width: 1199.98px) {
	.hgl-kopf .hgl-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.hgl-kopf .hgl-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	.hgl-kopf .hgl-nav {
		order: 3;
		margin-inline-start: 0;
	}

	.hgl-kopf .hgl-btn {
		margin-inline-start: auto;
	}
}

.hgl-nav .wp-block-navigation__responsive-container-open,
.hgl-nav .wp-block-navigation__responsive-container-close {
	min-width: 44px;
	min-height: 44px;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--hgl-linie);
	border-radius: var(--hgl-radius);
}

.hgl-nav .wp-block-navigation__responsive-container.is-menu-open {
	padding: 1.25rem;
}

.hgl-nav .is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 3.5rem;
	align-items: stretch !important;
}

.hgl-nav .is-menu-open .wp-block-navigation__container {
	align-items: stretch !important;
	width: 100%;
}

.hgl-nav .is-menu-open .wp-block-navigation-item {
	border-bottom: 1px solid var(--hgl-linie);
}

.hgl-nav .is-menu-open .wp-block-navigation-item__content {
	font-size: 1.125rem;
	padding: 0.75rem;
}

/* ---------- Buttons der Plugin-Blöcke ---------- */

.hgl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 44px;
	padding: 0.6rem 1.15rem;
	border-radius: var(--hgl-radius);
	border: 1px solid var(--hgl-gruen);
	background: var(--hgl-gruen);
	color: var(--hgl-papier-farbe);
	font-weight: 500;
	font-size: 0.95rem;
	line-height: 1.3;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.hgl-btn:hover {
	background: var(--hgl-tinte);
	color: var(--hgl-papier-farbe);
	text-decoration: none;
}

.hgl-btn:focus-visible {
	outline: 2px solid var(--hgl-gruen);
	outline-offset: 2px;
}

.hgl-btn--umriss {
	background: transparent;
	color: var(--hgl-tinte);
	border-color: var(--hgl-linie);
}

.hgl-btn--umriss:hover {
	background: var(--wp--preset--color--salbei);
	color: var(--hgl-tinte);
}

.hgl-btn--gross {
	min-height: 48px;
	font-size: 1rem;
}

.hgl-btn.is-disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.hgl-icon {
	width: 1.125rem;
	height: 1.125rem;
	flex-shrink: 0;
}

@media (max-width: 639.98px) {
	.hgl-btn--kompakt {
		width: 44px;
		padding: 0;
	}

	.hgl-btn--kompakt .hgl-btn__text {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
	}
}

.wp-block-button__link {
	min-height: 44px;
}

.hgl-aktionen {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

@media (max-width: 639.98px) {
	.hgl-aktionen {
		flex-direction: column;
	}
}

/* ---------- Abschnitte ---------- */

.hgl-abschnitt {
	padding-block: var(--wp--preset--spacing--50);
}

.hgl-abschnitt--seite {
	padding-top: var(--wp--preset--spacing--60);
}

.hgl-haupt .wp-block-post-content > * + *,
.hgl-abschnitt > * + * {
	margin-block-start: 1.5rem;
}

.hgl-abschnitt > .hgl-intro,
.hgl-band .hgl-intro,
.hgl-titelzeile + .hgl-intro,
.wp-block-heading + .hgl-intro {
	margin-block-start: 0.5rem;
}

.hgl-dachzeile {
	font-size: var(--wp--preset--font-size--klein);
	color: var(--hgl-grau);
	margin-bottom: 0.5rem;
}

.hgl-dachzeile + * {
	margin-block-start: 0 !important;
}

.hgl-seitentitel {
	font-size: var(--wp--preset--font-size--titel) !important;
	line-height: 1.2;
}

.hgl-titelzeile {
	gap: 0.5rem 1rem;
}

.hgl-titelzeile > .wp-block-heading {
	margin: 0;
}

.hgl-intro {
	max-width: 42rem;
	color: var(--hgl-grau);
	font-size: var(--wp--preset--font-size--gross);
}

.hgl-mehr {
	margin: 0;
	font-size: var(--wp--preset--font-size--klein);
	font-weight: 500;
	white-space: nowrap;
}

.hgl-mehr a::after,
.hgl-link .hgl-icon {
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-inline-start: 0.25rem;
	vertical-align: -0.15em;
}

.hgl-mehr a::after {
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%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' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Salbei-Band mit weichen Kanten; Papier bleibt sichtbar. */
.hgl-band {
	background-color: rgba(170, 187, 155, 0.14);
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 10%, #000 90%, transparent 100%);
	mask-image: linear-gradient(to bottom, transparent 0, #000 10%, #000 90%, transparent 100%);
	padding-block: var(--wp--preset--spacing--60);
}

.hgl-band .wp-block-columns {
	gap: var(--wp--preset--spacing--50);
}

.hgl-reihe {
	gap: 0.75rem 1.25rem;
	margin-block-start: 1.25rem;
}

.hgl-kasten {
	border: 1px solid var(--hgl-linie);
	border-radius: 12px;
	background: color-mix(in srgb, var(--hgl-papier-farbe) 55%, transparent);
	padding: clamp(1.25rem, 3vw, 1.75rem);
	height: 100%;
}

.hgl-kasten > * + * {
	margin-block-start: 0.75rem;
}

.hgl-kasten .wp-block-heading {
	font-size: 1.5rem;
}

.hgl-kasten--mittig {
	text-align: center;
	margin-block-start: var(--wp--preset--spacing--50) !important;
}

.hgl-kasten--mittig .hgl-btn {
	margin-inline: auto;
}

.hgl-text h2 {
	font-size: 1.25rem;
	margin-block-start: 2rem;
}

/* ---------- Hero ---------- */

.hgl-hero {
	padding-block: 1.5rem var(--wp--preset--spacing--50);
}

.hgl-hero > h1 {
	margin: 0;
}

.hgl-hero__unterzeile {
	margin-block-start: 0.5rem;
	font-size: clamp(1.125rem, 2vw, 1.25rem);
	color: color-mix(in srgb, var(--hgl-tinte) 75%, transparent);
}

.hgl-szene {
	position: relative;
	margin-block-start: 1rem;
}

.hgl-szene__bild {
	margin: 0;
}

.hgl-szene__bild img {
	width: 100%;
}

.hgl-wegweiser,
.hgl-wegweiser-mieten {
	display: none;
}

.hgl-wegweiser a {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	border-radius: 999px;
	border: 1px solid var(--hgl-linie);
	background: color-mix(in srgb, var(--hgl-papier-farbe) 85%, transparent);
	padding: 0.35rem 0.85rem;
	font-size: var(--wp--preset--font-size--klein);
	font-weight: 500;
	color: var(--hgl-gruen);
}

.hgl-wegweiser a:hover {
	background: var(--hgl-papier-farbe);
	text-decoration: none;
}

/* Gezeichneter Pfeil vom Schild zum Objekt. */
.hgl-wegweiser::after {
	content: "";
	display: block;
	width: 3.5rem;
	height: 2.75rem;
	background: var(--hgl-gruen);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 46' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8 C 22 6, 38 14, 50 36'/%3E%3Cpath d='M50 36 L 54 26 M50 36 L 40 30'/%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 60 46' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8 C 22 6, 38 14, 50 36'/%3E%3Cpath d='M50 36 L 54 26 M50 36 L 40 30'/%3E%3C/svg%3E") center / contain no-repeat;
}

.hgl-hero .hgl-schnellwahl {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.75rem;
	margin-block-start: 1rem;
}

.hgl-schnellwahl .wp-block-button,
.hgl-schnellwahl .wp-block-button__link {
	width: 100%;
}

.hgl-schnellwahl .wp-block-button__link {
	justify-content: flex-start;
	min-height: 56px;
	display: flex;
	align-items: center;
	text-align: left;
}

@media (min-width: 640px) {
	.hgl-hero .hgl-schnellwahl {
		grid-template-columns: repeat(3, 1fr);
	}
}

.hgl-hero .hgl-hero__aktionen {
	justify-content: center;
	margin-block-start: 1.5rem;
}

@media (min-width: 1024px) {
	.hgl-hero .hgl-schnellwahl {
		display: none;
	}

	.hgl-hero {
		padding-bottom: 7rem;
	}

	.hgl-wegweiser {
		display: flex;
		align-items: center;
		gap: 0.25rem;
		position: absolute;
		margin: 0 !important;
		z-index: 2;
	}

	.hgl-wegweiser--markt {
		left: 2%;
		top: 42%;
	}

	.hgl-wegweiser--lieferung {
		right: 2%;
		top: 44%;
		flex-direction: row-reverse;
	}

	.hgl-wegweiser--lieferung::after {
		transform: scaleX(-1);
	}

	.hgl-wegweiser-mieten {
		display: flex;
		align-items: flex-start;
		position: absolute;
		right: 0;
		bottom: 0;
		transform: translateY(55%);
		margin: 0 !important;
		z-index: 2;
	}

	.hgl-wegweiser-mieten .hgl-wegweiser {
		position: static;
		margin-top: 0.25rem !important;
	}

	.hgl-wegweiser-mieten figure {
		margin: 0;
		width: clamp(200px, 22vw, 320px);
	}
}

/* ---------- Bildspalten (Sortiment, Mieten) ---------- */

.hgl-spalten {
	gap: 1.5rem 1rem;
}

.hgl-bildspalte {
	text-align: center;
	min-width: 0;
}

.hgl-bildspalte > * + * {
	margin-block-start: 0.35rem;
}

.hgl-bildspalte__bild {
	margin: 0;
	height: 130px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hgl-bildspalte__bild img {
	max-height: 130px;
	width: auto;
	object-fit: contain;
}

.hgl-bildspalte h3 {
	font-size: clamp(1.05rem, 1.6vw, 1.25rem);
	margin-block-start: 0.75rem;
	hyphens: auto;
	overflow-wrap: anywhere;
}

.hgl-bildspalte p {
	color: var(--hgl-grau);
	font-size: 0.95rem;
	margin: 0;
}

/* ---------- Angebote ---------- */

.hgl-angebote {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
}

@media (min-width: 640px) {
	.hgl-angebote {
		grid-template-columns: repeat(3, 1fr);
		gap: 2.5rem 0;
	}

	.hgl-angebot {
		padding-inline: 1.5rem;
	}

	.hgl-angebot:nth-child(3n + 1) {
		padding-inline-start: 0;
	}

	.hgl-angebot:nth-child(3n) {
		padding-inline-end: 0;
	}

	.hgl-angebot:not(:nth-child(3n + 1)) {
		border-inline-start: 1px solid var(--hgl-linie);
	}
}

.hgl-angebot {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.hgl-angebot--platzhalter {
	align-items: center;
	text-align: center;
}

.hgl-angebot__bild {
	height: 170px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 0.75rem;
}

.hgl-angebot__bild img {
	max-height: 170px;
	width: auto;
	object-fit: contain;
}

.hgl-angebot__titel {
	font-size: 1.25rem;
	margin: 0;
}

.hgl-angebot__preis {
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--wp--preset--color--ueberschrift);
	margin: 0.5rem 0 0;
}

.hgl-angebot__preis-folgt {
	align-self: flex-start;
	border: 1px solid var(--hgl-linie);
	border-radius: 4px;
	padding: 0.2rem 0.75rem;
	font-size: 0.875rem;
	margin: 0.5rem 0 0;
}

.hgl-angebot__zeitraum {
	margin-top: 0.5rem !important;
}

.hgl-klein,
.hgl-mini {
	color: var(--hgl-grau);
	margin: 0;
}

.hgl-klein {
	font-size: var(--wp--preset--font-size--klein);
}

.hgl-mini {
	font-size: var(--wp--preset--font-size--mini);
}

.hgl-prospekt {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	border: 1px solid var(--hgl-linie);
	border-radius: var(--hgl-radius);
	padding: 1.25rem;
	background: color-mix(in srgb, var(--hgl-papier-farbe) 55%, transparent);
}

.hgl-prospekt h3 {
	margin: 0;
}

/* ---------- Region / Logos ---------- */

.hgl-logos {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.75rem;
}

.hgl-logo {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	min-height: 96px;
}

.hgl-logo img {
	max-height: 5rem;
	width: auto;
	object-fit: contain;
}

/* Logos mit weißem Grund verschmelzen mit dem Papier. */
.hgl-logo img,
.hgl-karte__logo img,
.hgl-getraenk__bild img,
.hgl-angebot__bild img,
.hgl-karte__bild img {
	mix-blend-mode: multiply;
}

.hgl-logo__name {
	font-family: var(--wp--preset--font-family--baskerville);
	color: var(--hgl-gruen);
	font-size: 0.9rem;
}

/* ---------- Karten / Raster ---------- */

.hgl-raster {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: 1fr;
}

@media (min-width: 640px) {
	.hgl-raster--3 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.hgl-raster--3 {
		grid-template-columns: repeat(3, 1fr);
	}
}

.hgl-karte {
	border: 1px solid var(--hgl-linie);
	border-radius: 12px;
	padding: 1.25rem 1.5rem;
	background: color-mix(in srgb, var(--hgl-papier-farbe) 55%, transparent);
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.hgl-karte h3 {
	font-size: 1.125rem;
	margin: 0;
}

.hgl-karte__logo img {
	max-height: 7rem;
	max-width: 8rem;
	width: auto;
	object-fit: contain;
}

.hgl-karte__bild {
	height: 120px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 0.5rem;
}

.hgl-karte__bild img {
	max-height: 120px;
	width: auto;
}

.hgl-karte__kicker {
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-top: 0.5rem;
}

.hgl-karte .hgl-link {
	margin-top: auto;
	padding-top: 0.5rem;
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	font-size: var(--wp--preset--font-size--klein);
	font-weight: 500;
}

.hgl-karte .hgl-link .hgl-icon {
	width: 1rem;
	height: 1rem;
}

/* ---------- Lieferung ---------- */

.hgl-infoboxen {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(9.5rem, 100%), 1fr));
	gap: 0.5rem;
	margin-block-start: 1.25rem;
}

.hgl-infobox {
	display: flex;
	gap: 0.5rem;
	align-items: flex-start;
	border: 1px solid var(--hgl-linie);
	border-radius: var(--hgl-radius);
	padding: 0.5rem 0.65rem;
	min-width: 0;
}

.hgl-infobox .hgl-icon {
	width: 1rem;
	height: 1rem;
	color: var(--hgl-gruen);
	margin-top: 0.15rem;
}

.hgl-infobox p {
	margin: 0;
}

.hgl-infobox__label {
	font-size: 0.7rem;
	line-height: 1.25;
	color: var(--hgl-grau);
	hyphens: auto;
	overflow-wrap: anywhere;
}

.hgl-infobox__wert {
	font-size: 0.875rem;
	hyphens: manual;
	overflow-wrap: normal;
	font-weight: 500;
	line-height: 1.35;
	color: var(--wp--preset--color--ueberschrift);
}

.hgl-lieferung__text {
	color: var(--hgl-grau);
}

.hgl-tabelle {
	margin: 1rem 0 0;
	border-block: 1px solid var(--hgl-linie);
}

.hgl-tabelle > div {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	padding-block: 0.75rem;
}

.hgl-tabelle > div + div {
	border-top: 1px solid var(--hgl-linie);
}

.hgl-tabelle dt {
	color: var(--hgl-grau);
}

.hgl-tabelle dd {
	margin: 0;
	font-weight: 500;
	text-align: right;
}

.hgl-tabelle--klein {
	font-size: var(--wp--preset--font-size--klein);
	margin-top: 0.5rem;
}

.hgl-tabelle--klein > div {
	padding-block: 0.4rem;
}

/* ---------- Kontakt ---------- */

.hgl-kontakt {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.hgl-kontakt__zeile {
	display: flex;
	gap: 0.75rem;
}

.hgl-kontakt__zeile > .hgl-icon {
	width: 1.25rem;
	height: 1.25rem;
	color: var(--hgl-gruen);
	margin-top: 0.15rem;
}

.hgl-kontakt__label {
	font-weight: 500;
	margin: 0;
}

.hgl-kontakt__wert,
.hgl-kontakt__wert p {
	color: var(--hgl-grau);
	margin: 0;
}

.hgl-kontakt + .hgl-aktionen {
	margin-block-start: 1.75rem;
}

.hgl-zeiten {
	margin: 0;
	font-size: var(--wp--preset--font-size--klein);
	display: grid;
	gap: 0.15rem;
}

.hgl-zeiten > div {
	display: grid;
	grid-template-columns: 6.5rem 1fr;
	gap: 0.5rem;
}

.hgl-zeiten dd {
	margin: 0;
}

.hgl-kontakt-spalten figure {
	max-width: 356px;
}

/* ---------- Getränkeliste ---------- */

.hgl-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-block-start: 2rem;
}

.hgl-suche {
	position: relative;
	flex: 1 1 16rem;
}

.hgl-suche .hgl-icon {
	position: absolute;
	left: 0.75rem;
	top: 50%;
	transform: translateY(-50%);
	width: 1rem;
	height: 1rem;
	color: var(--hgl-grau);
}

.hgl-filter input,
.hgl-filter select {
	width: 100%;
	min-height: 44px;
	padding: 0 0.75rem;
	border: 1px solid var(--hgl-linie);
	border-radius: var(--hgl-radius);
	background: color-mix(in srgb, var(--hgl-papier-farbe) 55%, white);
	font: inherit;
	font-size: 0.95rem;
	color: var(--hgl-tinte);
}

.hgl-suche input {
	padding-left: 2.25rem;
}

.hgl-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
}

.hgl-chip {
	min-height: 36px;
	padding: 0.35rem 0.85rem;
	border-radius: 999px;
	border: 1px solid var(--hgl-linie);
	background: color-mix(in srgb, var(--hgl-papier-farbe) 55%, transparent);
	color: var(--hgl-tinte);
	font: inherit;
	font-size: 0.875rem;
	cursor: pointer;
}

.hgl-chip[aria-pressed="true"] {
	background: var(--hgl-gruen);
	border-color: var(--hgl-gruen);
	color: var(--hgl-papier-farbe);
}

.hgl-chip--still {
	cursor: default;
	background: var(--wp--preset--color--salbei);
	display: inline-flex;
	align-items: center;
}

.hgl-getraenke .hgl-raster {
	margin-top: 2rem;
}

.hgl-getraenk {
	display: flex;
	border: 1px solid var(--hgl-linie);
	border-radius: 12px;
	overflow: hidden;
	background: color-mix(in srgb, var(--hgl-papier-farbe) 55%, transparent);
}

.hgl-getraenk[hidden] {
	display: none;
}

.hgl-getraenk__bild {
	width: 6rem;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.5rem;
}

.hgl-getraenk__bild img {
	object-fit: contain;
	max-height: 7rem;
}

.hgl-getraenk > div:last-child {
	padding: 1rem;
}

.hgl-getraenk h3 {
	font-size: 1.125rem;
	margin: 0;
}

.hgl-marke-vorrat {
	margin: 0.5rem 0 0;
	font-size: var(--wp--preset--font-size--mini);
	font-weight: 500;
	color: var(--hgl-gruen);
}

.hgl-vorrat {
	margin-top: 3rem;
}

.hgl-vorrat h2 {
	font-size: 1.5rem;
}

/* ---------- Leerer Zustand ---------- */

.hgl-leer {
	border: 1px dashed var(--hgl-linie);
	border-radius: 12px;
	padding: clamp(1.5rem, 5vw, 2.5rem);
	text-align: center;
	color: var(--hgl-grau);
	background: color-mix(in srgb, var(--hgl-papier-farbe) 55%, transparent);
}

.hgl-leer[hidden] {
	display: none;
}

.hgl-leer p {
	margin: 0.5rem 0 0;
}

.hgl-leer__titel {
	font-family: var(--wp--preset--font-family--baskerville);
	font-size: 1.375rem;
	color: var(--hgl-gruen);
	margin: 0 !important;
}

/* ---------- Fußzeile ---------- */

.hgl-fuss {
	border-top: 1px solid color-mix(in srgb, var(--hgl-linie) 60%, transparent);
	margin-block-start: var(--wp--preset--spacing--50);
}

.hgl-fuss__oben,
.hgl-fuss__unten {
	max-width: 1280px;
	margin-inline: auto;
	padding-inline: var(--wp--style--root--padding-left);
}

.hgl-fuss__oben {
	padding-block: 1.5rem;
	gap: 1.25rem;
}

.hgl-fuss__nav,
.hgl-kontakt-links,
.hgl-fuss__unten {
	font-size: var(--wp--preset--font-size--klein);
	color: var(--hgl-grau);
}

.hgl-fuss__nav .wp-block-navigation__container {
	gap: 0.5rem 1.25rem;
	justify-content: center;
}

.hgl-fuss a,
.hgl-fuss .wp-block-navigation-item__content {
	color: var(--hgl-grau);
}

.hgl-fuss a:hover {
	color: var(--hgl-gruen);
}

.hgl-kontakt-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
}

.hgl-kontakt-links a {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}

.hgl-kontakt-links .hgl-icon {
	width: 1rem;
	height: 1rem;
}

.hgl-fuss__unten {
	border-top: 1px solid var(--hgl-linie);
	padding-block: 0.75rem;
	gap: 0.5rem 1rem;
	font-size: var(--wp--preset--font-size--mini);
}

.hgl-fuss__unten p {
	margin: 0;
}

@media (max-width: 639.98px) {
	.hgl-fuss__oben {
		flex-direction: column;
	}
}

/* ---------- Mobile Anrufleiste ---------- */

.hgl-anrufleiste {
	display: none;
}

@media (max-width: 1023.98px) {
	.hgl-anrufleiste {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.5rem;
		position: fixed;
		inset-inline: 0;
		bottom: 0;
		z-index: 40;
		height: calc(3.5rem + env(safe-area-inset-bottom));
		padding-bottom: env(safe-area-inset-bottom);
		background: var(--hgl-gruen);
		color: var(--hgl-papier-farbe);
		font-weight: 600;
		box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
	}

	.hgl-anrufleiste:hover {
		color: var(--hgl-papier-farbe);
		text-decoration: none;
	}

	body.hat-anrufleiste {
		padding-bottom: calc(3.5rem + env(safe-area-inset-bottom));
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.001ms !important;
		animation-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}