/* Shell – Notification-Bar, Header, Fußzeile.
   Übernommen aus Design 1 (Figma 158:630 Notification Bar V1, 158:649 Nav,
   158:1050 Footer V5) und für Mobile ergänzt, das es in Figma nicht gibt. */

/* ── Notification-Bar ───────────────────────────────────────────────────── */

.notice {
	background: var(--ffg-red);
	color: var(--ffg-white);
	font-size: var(--ffg-size-base);
	font-weight: 500;
}

.notice__list {
	display: flex;
	gap: var(--ffg-space-8);
	align-items: center;
	justify-content: center;
	min-height: 2.5rem;
	padding-block: var(--ffg-space-2);
}

.notice__item {
	display: flex;
	gap: 0.625rem;
	align-items: center;
	white-space: nowrap;
}

.notice__item img {
	width: 1.25rem;
	height: 1.25rem;
	filter: brightness(0) invert(1);
}

/* Auf dem Handy zeigt die Live-Seite nur die Hotline. Design 1 hat vier
   Punkte – die rotieren hier als Marquee, damit alle vier sichtbar bleiben,
   ohne vier Zeilen Höhe zu kosten. */
@media (max-width: 47.9375rem) {
	.notice__list {
		gap: var(--ffg-space-6);
		justify-content: flex-start;
		overflow-x: auto;
		padding-inline: var(--ffg-gutter);
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.notice__list::-webkit-scrollbar {
		display: none;
	}

	.notice__item {
		font-size: var(--ffg-size-sm);
	}
}

/* ── Header ─────────────────────────────────────────────────────────────── */

.header {
	position: sticky;
	top: 0;
	z-index: 40;
	background: var(--ffg-white);
	box-shadow: var(--ffg-shadow);
}

.header__top {
	display: flex;
	gap: var(--ffg-space-3);
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	padding-block: var(--ffg-space-3);
	border-bottom: 0.0625rem solid var(--ffg-rule);
}

.header__burger {
	display: grid;
	place-items: center;
	width: var(--ffg-tap);
	height: var(--ffg-tap);
	margin-left: calc(var(--ffg-space-3) * -1);
}

.header__burger span {
	display: block;
	width: 1.25rem;
	height: 0.125rem;
	background: var(--ffg-charcoal);
	box-shadow: 0 -0.375rem 0 var(--ffg-charcoal), 0 0.375rem 0 var(--ffg-charcoal);
}

.header__logo img {
	width: 9rem;
	height: auto;
}

/* Die Suche stand mobil auf display:none und tauchte erst ab 992 px auf. Bei
   über hundert Fleischsorten und einem Sortiment, das die meisten Kunden auf
   dem Handy durchsuchen, ist sie dort der wichtigste Einstieg. Sie liegt
   jetzt als eigene Zeile unter dem Logo-Balken und rutscht ab Desktop
   zurück in die Zeile, wie in Figma gezeichnet. */
.header__search {
	display: flex;
	order: 3;
	flex-basis: 100%;
	align-items: center;
	gap: var(--ffg-space-2);
	padding-left: var(--ffg-space-4);
	border: 0.0625rem solid var(--ffg-border-strong);
	border-radius: var(--ffg-radius);
	background: var(--ffg-white);
}

.header__search input {
	flex: 1;
	min-width: 0;
	height: var(--ffg-tap);
	border: 0;
	background: none;
	color: var(--ffg-charcoal);
	font: inherit;
	font-size: var(--ffg-size-md);
}

.header__search input::placeholder {
	color: var(--ffg-text);
}

.header__search input::-webkit-search-cancel-button {
	appearance: none;
}

.header__search button {
	display: grid;
	place-items: center;
	width: var(--ffg-tap);
	height: var(--ffg-tap);
	border: 0;
	background: none;
}

.header__search img {
	width: 1rem;
	height: 1rem;
}

.header__actions {
	display: flex;
	gap: var(--ffg-space-2);
	align-items: center;
}

.header__action {
	display: flex;
	gap: 0.625rem;
	align-items: center;
	justify-content: center;
	min-width: var(--ffg-tap);
	min-height: var(--ffg-tap);
	color: var(--ffg-text);
	font-size: var(--ffg-size-base);
	text-decoration: none;
}

.header__action img {
	width: 1.5rem;
	height: 1.5rem;
}

.header__action span {
	display: none;
}

.header__nav {
	display: none;
	padding-block: var(--ffg-space-4);
}

.header__nav ul {
	display: flex;
	gap: 3.125rem;
	align-items: center;
	justify-content: center;
}

.header__nav a {
	display: flex;
	gap: 0.375rem;
	align-items: center;
	color: var(--ffg-text);
	font-size: var(--ffg-size-base);
	font-weight: 500;
	text-decoration: none;
}

.header__nav a:hover {
	color: var(--ffg-brown-dark);
}

.header__nav img {
	width: 0.9375rem;
	height: 0.9375rem;
}

@media (min-width: 62rem) {
	.header {
		position: static;
	}

	.header__burger {
		display: none;
	}

	.header__logo img {
		width: 12.1875rem;
	}

	.header__search {
		order: 0;
		flex: 1;
		flex-basis: auto;
		max-width: 24.5rem;
		border-color: var(--ffg-border);
	}

	.header__search input {
		font-size: var(--ffg-size-base);
	}

	.header__action span {
		display: inline;
	}

	.header__actions {
		gap: var(--ffg-space-5);
	}

	.header__nav {
		display: block;
	}
}

/* ── Fußzeile ───────────────────────────────────────────────────────────── */

.footer {
	margin-top: var(--ffg-space-16);
	background: var(--ffg-brown-dark);
	color: rgb(255 255 255 / 82%);
	font-size: var(--ffg-size-base);
}

.footer a {
	color: inherit;
	text-decoration: none;
}

.footer a:hover {
	color: var(--ffg-white);
	text-decoration: underline;
}

.footer__grid {
	display: grid;
	gap: var(--ffg-space-8);
	padding-block: var(--ffg-space-12);
}

.footer__title {
	margin: 0 0 var(--ffg-space-4);
	color: var(--ffg-white);
	font-size: var(--ffg-size-md);
	font-weight: 700;
}

.footer__col li + li {
	margin-top: var(--ffg-space-3);
}

.footer__payments {
	display: flex;
	gap: var(--ffg-space-2);
	align-items: center;
	margin-top: var(--ffg-space-4);
}

.footer__payments img {
	height: 1.5rem;
	padding: 0.25rem;
	border-radius: var(--ffg-radius);
	background: var(--ffg-white);
}

.footer__newsletter {
	display: grid;
	gap: var(--ffg-space-4);
	padding-block: var(--ffg-space-8);
	border-top: 0.0625rem solid rgb(255 255 255 / 14%);
}

.footer__newsletter .footer__title {
	margin: 0;
}

.footer__newsletter-form {
	display: flex;
	gap: var(--ffg-space-2);
	flex-wrap: wrap;
}

.footer__newsletter-form input {
	flex: 1;
	min-width: 12rem;
	min-height: var(--ffg-tap);
	padding: 0.75rem 1rem;
	border: 0;
	border-radius: var(--ffg-radius);
	font: inherit;
}

.footer__bottom {
	padding-block: var(--ffg-space-6);
	border-top: 0.0625rem solid rgb(255 255 255 / 14%);
	font-size: var(--ffg-size-sm);
	text-align: center;
}

@media (min-width: 48rem) {
	.footer__grid {
		grid-template-columns: 1.4fr repeat(3, 1fr);
	}

	.footer__newsletter {
		grid-template-columns: 1fr 1fr;
		align-items: center;
	}
}