/* Abholmarkt – zwei Standorte mit Ladenfoto, hinter „Warum Futter Fundgrube?“.

   Lag zuerst unten auf der Produktseite, wo bei 80 % Mobil kaum jemand
   hinkommt, dann als dunkelbraunes Band weit oben auf der Startseite. Das
   Dunkelbraun war zu laut für das, was der Block sagt, und oben unterbrach er
   den Weg ins Sortiment. Geblieben ist die volle Breite, weil sie den zweiten
   Vertriebsweg als eigenen Ort markiert – aber in Beige mit 15 % Braun Logo
   statt in Dunkelbraun. Die Fläche selbst kommt aus `.band` in base.css, weil
   die Kategorieseite sie ebenfalls benutzt. Keine Karten: Das Foto trägt, die
   Standorte stehen als Liste daneben. */

.pickup__layout {
	display: grid;
	gap: var(--ffg-space-6);
}

@media (min-width: 62rem) {
	.pickup__layout {
		/* Das Foto bekommt die größere Hälfte: Es zeigt, was zwei Adressen nicht
		   zeigen können – dass man hier mit Hund an der Leine hineinspaziert. */
		grid-template-columns: 1.2fr 1fr;
		gap: var(--ffg-space-10);
		align-items: start;
	}
}

/* ── Foto ───────────────────────────────────────────────────────────────── */

.pickup__media {
	overflow: hidden;
	margin: 0;
	border-radius: var(--ffg-radius-card);
	aspect-ratio: 4 / 3;
}

@media (min-width: 48rem) {
	.pickup__media {
		aspect-ratio: 16 / 9;
	}
}

.pickup__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Mitarbeiter, Kunde und Hund stehen in der Bildmitte, deshalb bleibt der
	   Ausschnitt mittig. Auf dem Handy fällt dabei das linke Ende der
	   Leinenwand weg, die drei bleiben vollständig im Bild. */
	object-position: center;
}

/* ── Text ───────────────────────────────────────────────────────────────── */

.pickup__lead {
	margin: 0;
	max-width: 34rem;
	color: var(--ffg-text);
	font-size: var(--ffg-size-md);
}

/* Liste statt Karten. Die Trennlinie leistet, was ein Rahmen leisten sollte,
   und nimmt keine Fläche weg. */

.pickup__places {
	margin: var(--ffg-space-6) 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--ffg-space-5);
}

@media (min-width: 48rem) and (max-width: 61.999rem) {
	.pickup__places {
		grid-template-columns: 1fr 1fr;
		gap: var(--ffg-space-8);
	}
}

.pickup__place {
	padding-top: var(--ffg-space-5);
	border-top: 0.0625rem solid rgb(167 141 127 / 45%);
}

.pickup__place h3 {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ffg-space-2);
	margin: 0;
	font-size: var(--ffg-size-md);
}

.pickup__place p {
	margin: var(--ffg-space-2) 0 0;
	color: var(--ffg-text);
	font-size: var(--ffg-size-base);
}

/* Der Marker sitzt in der Überschrift, nicht darüber: „Schmallenberg-Winterberg
   ist neu“ ist eine Aussage über den Ort, keine eigene Zeile. Seit dem Call am
   6. Oktober 2026 in Braun statt Rot: Rot steht für Preis und Aktion, Versand,
   Bonus und Abholung laufen in Braun (Farblegende im Handover, Abschnitt 3). */

.pickup__new {
	color: var(--ffg-brown-text);
	font-size: var(--ffg-size-eyebrow);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* ── Link ───────────────────────────────────────────────────────────────── */

.pickup__link {
	display: inline-flex;
	align-items: center;
	gap: var(--ffg-space-2);
	min-height: var(--ffg-tap);
	color: var(--ffg-charcoal);
	font-weight: 600;
	text-decoration: none;
	/* Der Unterstrich wächst beim Überfahren von links nach rechts durch, statt
	   nur die Farbe zu wechseln – dieselbe Bewegung, die der Pfeil macht. Er
	   sitzt auf der Schriftlinie, nicht am unteren Rand des Tap-Ziels. */
	background-image: linear-gradient(currentcolor, currentcolor);
	background-repeat: no-repeat;
	background-position: 0 calc(100% - 0.6875rem);
	background-size: 0 0.0625rem;
	transition: background-size 0.28s ease;
}

.pickup__link:hover,
.pickup__link:focus-visible {
	background-size: 100% 0.0625rem;
}

.pickup__arrow {
	transition: transform 0.28s ease;
}

.pickup__link:hover .pickup__arrow,
.pickup__link:focus-visible .pickup__arrow {
	transform: translateX(0.25rem);
}

/* ── Einstieg ───────────────────────────────────────────────────────────── */

/* Eine Bewegung, mehr braucht der Abschnitt nicht: Foto und Text steigen ein
   Stück nach oben ein, wenn der Abschnitt ins Bild kommt. Den Ausgangszustand
   setzt erst `is-armed`, das pickup.js beim Start anhängt – ohne Skript steht
   alles sofort da, statt unsichtbar zu bleiben. */

.pickup.is-armed .pickup__media,
.pickup.is-armed .pickup__body {
	opacity: 0;
	transform: translateY(0.75rem);
	transition:
		opacity 0.5s ease,
		transform 0.5s ease;
}

.pickup.is-visible .pickup__media,
.pickup.is-visible .pickup__body {
	opacity: 1;
	transform: none;
}

.pickup.is-visible .pickup__body {
	transition-delay: 0.1s;
}

@media (prefers-reduced-motion: reduce) {
	.pickup.is-armed .pickup__media,
	.pickup.is-armed .pickup__body {
		opacity: 1;
		transform: none;
	}
}