/* Kategorie-Einstieg „Barf-Fleisch“ – die erste Stufe vor der Produktliste.
   Vorlage: Figma „Version 1 – Einstieg Kategorien (Best Practice)“, im
   Termin am 8. September 2026 gewählt. Rabatt und Brotkrumen kommen aus
   category.css, die Produktreihe aus productcard.css. */

/* ── Kopf ───────────────────────────────────────────────────────────────── */

.einstieg__head {
	margin-top: var(--ffg-space-6);
	padding: var(--ffg-space-6) var(--ffg-space-5);
	border-radius: var(--ffg-radius-card);
	background: var(--ffg-white);
	box-shadow: var(--ffg-shadow);
}

.einstieg__intro {
	max-width: 44rem;
	margin-top: var(--ffg-space-3);
	color: var(--ffg-text);
	font-size: var(--ffg-size-md);
	line-height: var(--ffg-lh-base);
}

.einstieg__checks {
	display: grid;
	gap: var(--ffg-space-2);
	margin: var(--ffg-space-5) 0 0;
	padding: 0;
	list-style: none;
	color: var(--ffg-charcoal);
}

.einstieg__checks li {
	display: flex;
	gap: var(--ffg-space-2);
	align-items: baseline;
}

.einstieg__checks li::before {
	content: "✓";
	color: var(--ffg-green);
	font-weight: 700;
}

@media (min-width: 48rem) {
	.einstieg__checks {
		grid-template-columns: repeat(2, max-content);
		column-gap: var(--ffg-space-10);
	}
}

/* Foto rechts im Kopf, nur am Desktop. Es läuft randlos bis an die rechte und
   untere Kante der Karte, damit die Fläche gefüllt wirkt statt gerahmt. */
.einstieg__headmedia {
	display: none;
	margin: 0;
}

@media (min-width: 62rem) {
	.einstieg__head {
		display: grid;
		grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
		overflow: hidden;
		padding: 0;
	}

	.einstieg__text {
		align-self: center;
		padding: var(--ffg-space-10) var(--ffg-space-8);
	}

	/* Neben dem Foto bleibt dem Text gut die halbe Breite. In voller h1-Größe
	   bräche die Überschrift dort auf vier Zeilen. */
	.einstieg__text h1 {
		font-size: clamp(2.25rem, 1rem + 2.2vw, 3rem);
	}

	/* Das Bild liegt absolut in der Zelle, sonst bestimmt seine eigene Höhe
	   von 1 400 Pixeln die Höhe der Karte. */
	.einstieg__headmedia {
		position: relative;
		display: block;
	}

	.einstieg__headmedia img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: 50% 30%;
	}
}

/* ── Hilfe für Einsteiger ───────────────────────────────────────────────── */

/* Kein weißer Kasten, sondern ein Rahmen auf Beige: Der Hinweis ist ein
   Angebot neben dem Weg, nicht der Weg selbst. */
.einstieg__help {
	display: grid;
	gap: var(--ffg-space-4);
	margin-top: var(--ffg-space-5);
	padding: var(--ffg-space-5);
	border: 0.0625rem solid var(--ffg-brown-logo);
	border-radius: var(--ffg-radius-card);
	color: var(--ffg-text);
}

.einstieg__help p {
	margin: 0;
}

.einstieg__help .einstieg__helptitle {
	margin-bottom: var(--ffg-space-1);
	color: var(--ffg-charcoal);
	font-weight: 700;
}

.einstieg__helpactions {
	display: flex;
	gap: var(--ffg-space-3);
	flex-wrap: wrap;
}

.einstieg__helpactions .btn {
	flex: 1 1 auto;
}

@media (min-width: 62rem) {
	.einstieg__help {
		grid-template-columns: 1fr auto;
		align-items: center;
		padding: var(--ffg-space-5) var(--ffg-space-6);
	}
}

/* ── Karten ─────────────────────────────────────────────────────────────── */

/* Am Handy eine Spalte, das Bild als flacher Streifen: Sieben Karten mit
   4:3-Bild ergäben rund 4 000 Pixel Scrollweg bis „Alle Produkte“. Ab Tablet
   zwei, am Desktop vier Spalten wie in Figma. */
.einstieg {
	display: grid;
	gap: var(--ffg-space-4);
}

@media (min-width: 48rem) {
	.einstieg {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--ffg-space-5);
	}
}

@media (min-width: 62rem) {
	.einstieg {
		grid-template-columns: repeat(4, 1fr);
	}
}

.einstieg__card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--ffg-radius-card);
	background: var(--ffg-white);
	box-shadow: var(--ffg-shadow);
}

/* Das Bild liegt absolut in der Fläche – sonst setzt seine eigene Höhe das
   Seitenverhältnis außer Kraft und der Streifen wird am Handy wieder 4:3. */
.einstieg__media {
	position: relative;
	display: grid;
	place-items: center;
	margin: 0;
	aspect-ratio: 16 / 7;
	background: var(--ffg-beige-deep);
}

@media (min-width: 48rem) {
	.einstieg__media {
		aspect-ratio: 4 / 3;
	}
}

.einstieg__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Produktfoto auf Freisteller: ganz zeigen statt anschneiden. */
.einstieg__media--product img {
	padding: var(--ffg-space-4);
	object-fit: contain;
}

.einstieg__media--empty span {
	color: var(--ffg-brown-text);
	font-size: var(--ffg-size-sm);
	font-weight: 600;
}

.einstieg__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--ffg-space-2);
	padding: var(--ffg-space-4) var(--ffg-space-5) var(--ffg-space-5);
}

/* Wie in Figma: Titel leicht und im Logo-Braun, die Unterzeile dunkel. */
.einstieg__title {
	margin: 0;
	font-size: var(--ffg-h3);
	font-weight: 400;
}

/* Der Titel-Link spannt über die ganze Karte, damit sie überall antippbar
   ist. Chips und Button liegen darüber und behalten ihr eigenes Ziel. */
.einstieg__title a {
	color: var(--ffg-brown-logo);
	text-decoration: none;
}

.einstieg__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.einstieg__sub {
	margin: 0;
	color: var(--ffg-charcoal);
}

.einstieg__chips {
	position: relative;
	margin: var(--ffg-space-2) 0 0;
	padding: 0;
	list-style: none;
}

/* Etiketten wie in Figma: eckig, beige gefüllt, dünner brauner Rahmen,
   normale Schrift. Bewusst anders als der Themenschalter im Ratgeber – das
   hier sind Links in eine Unterkategorie, keine Auswahl, die an- und ausgeht.
   Am Handy 44 px hoch und 14 px Schrift, mit Zeiger kompakter wie in Figma. */
.einstieg__chips .chip {
	min-height: var(--ffg-tap);
	padding: var(--ffg-space-1) var(--ffg-space-3);
	border-width: 0.0625rem;
	border-radius: var(--ffg-radius);
	background: var(--ffg-beige);
	color: var(--ffg-charcoal);
	font-size: var(--ffg-size-base);
	font-weight: 400;
}

.einstieg__chips .chip:hover {
	border-color: var(--ffg-brown-dark);
	background: var(--ffg-white);
	color: var(--ffg-brown-dark);
}

@media (hover: hover) and (pointer: fine) {
	.einstieg__chips .chip {
		min-height: 1.75rem;
		padding-inline: var(--ffg-space-2-5);
		font-size: var(--ffg-size-sm);
	}
}

.einstieg__chips.chips {
	gap: var(--ffg-space-1-5);
}

.einstieg__btn {
	position: relative;
	margin-top: auto;
	width: 100%;
}

.einstieg__chips + .einstieg__btn,
.einstieg__sub + .einstieg__btn {
	margin-top: var(--ffg-space-4);
}

/* Am Desktop stehen die Buttons auf einer Linie, auch wenn die Karten
   unterschiedlich viele Chips haben. */
@media (min-width: 48rem) {
	.einstieg__chips + .einstieg__btn,
	.einstieg__sub + .einstieg__btn {
		margin-top: auto;
	}

	.einstieg__chips {
		margin-bottom: var(--ffg-space-4);
	}

	.einstieg__sub {
		margin-bottom: var(--ffg-space-4);
	}
}