/* DFV Fahrten — overview grid, filters and trip detail.
   Ported from the approved mockup; uses the v3 theme tokens (--dfv-*). */

/* ---------- Filters ---------- */
.fahrten-filters {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	align-items: center;
	margin: 1.5rem 0 2.5rem;
}
.fahrten-filters__label {
	font-size: .8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--dfv-text-light);
	margin-right: .3rem;
}
.fahrten-count {
	margin-left: auto;
	text-transform: none;
	letter-spacing: 0;
	font-weight: 500;
}
.fahrten-pill {
	width: auto;
	max-width: 100%;
	font-family: inherit;
	font-size: .9rem;
	padding: .45rem .95rem;
	border: 1px solid var(--dfv-border);
	background: #fff;
	border-radius: 999px;
	color: var(--dfv-text);
	cursor: pointer;
	transition: .15s;
}
.fahrten-pill:hover,
.fahrten-pill:focus,
.fahrten-pill:focus-visible {
	border-color: var(--dfv-orange);
	outline: none;
}
.fahrten-pill option {
	color: var(--dfv-text);
}

/* ---------- Grid + card ---------- */
.fahrten-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.6rem;
	padding-bottom: 1rem;
}
.fahrt-card {
	border-radius: var(--radius-lg, 12px);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	color: inherit;
	text-decoration: none;
	box-shadow: var(--card-shadow);
	transition: .2s;
}
.fahrt-card:hover {
	box-shadow: var(--card-shadow-hover);
	transform: translateY(-2px);
}
.fahrt-card:hover .fahrt-card__place { color: var(--dfv-orange); }
.fahrt-card__img {
	position: relative;
	aspect-ratio: 3 / 2;
	display: flex;
	align-items: flex-end;
	padding: .9rem;
	color: #fff;
	overflow: hidden;
}
.fahrt-card__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.fahrt-card__ph {
	font-size: .78rem;
	opacity: .9;
	background: rgba(0, 0, 0, .25);
	padding: .15rem .5rem;
	border-radius: 4px;
}
.fahrt-card__past,
.fahrt-hero__past {
	position: absolute;
	top: .7rem;
	left: .7rem;
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	background: var(--dfv-slate);
	color: #fff;
	padding: 4px 11px;
	border-radius: 999px;
}
.fahrt-card__body {
	padding: 16px 17px 18px;
	display: flex;
	flex-direction: column;
	flex: 1;
}
.fahrt-card__place {
	font-size: 1.2rem;
	font-weight: 700;
	letter-spacing: -.01em;
	margin-bottom: 3px;
}
.fahrt-card__date {
	color: var(--dfv-text-light);
	font-size: .86rem;
	margin-bottom: 10px;
}
/* Tag pills row (a trip can carry several "Fuer wen?" terms). */
.fahrt-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 10px;
}
.fahrt-card__tag {
	font-size: .74rem;
	font-weight: 600;
	letter-spacing: .03em;
	color: var(--dfv-orange);
	background: var(--dfv-bg-alt);
	padding: .28rem .65rem;
	border-radius: 999px;
}
.fahrt-card__more {
	margin-top: auto;
	padding-top: 0;
	font-weight: 600;
	color: var(--dfv-orange);
	font-size: .92rem;
}

/* Past trips: greyed/de-emphasised but still listed. */
.fahrt-card.is-past {
	opacity: .62;
	filter: grayscale(.35);
}
.fahrt-card.is-past:hover {
	opacity: 1;
	filter: none;
}

.fahrten-empty {
	color: var(--dfv-text-light);
	padding: 1rem 0 2rem;
}

/* ---------- Detail page ---------- */
.fahrt-detail {
	max-width: 820px;
	margin: 0 auto;
	padding-bottom: 3rem;
}
.fahrt-hero {
	aspect-ratio: 21 / 8;
	position: relative;
	overflow: hidden; border-radius: var(--radius); box-shadow: var(--img-shadow);
	margin: .5rem 0 1.8rem;
}
.fahrt-hero img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.fahrt-hero--ph {
	display: flex;
	align-items: flex-end;
	padding: 1.2rem;
	color: #fff;
}
.fahrt-hero--ph span {
	font-size: .8rem;
	opacity: .9;
	background: rgba(0, 0, 0, .25);
	padding: .2rem .6rem;
	border-radius: 4px;
}
.fahrt-detail__title {
	font-size: clamp(1.8rem, 3vw + 1rem, 2.6rem);
	font-weight: 700;
	letter-spacing: -.025em;
	margin: 0;
}
.fahrt-detail__date {
	color: var(--dfv-orange);
	font-weight: 600;
	margin: .3rem 0 1.2rem;
	font-size: 1.1rem;
}
.fahrt-detail__pasthint {
	color: var(--dfv-text-light);
	font-style: italic;
	margin: -.6rem 0 1.2rem;
}
.fahrt-detail__intro {
	font-size: 1.1rem;
	color: var(--dfv-text-light);
	margin-bottom: 2rem;
}
.fahrt-detail h2 {
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--dfv-orange);
	margin: var(--spacing-lg) 0 var(--spacing-sm);
}
.fahrt-facts {
	border-radius: var(--radius-lg, 12px);
	overflow: hidden;
	margin-bottom: 2rem;
	box-shadow: var(--card-shadow);
}
.fahrt-facts div {
	display: flex;
	gap: 1rem;
	padding: .85rem 1.1rem;
	border-bottom: 1px solid var(--dfv-border);
}
.fahrt-facts div:last-child {
	border-bottom: 0;
}
.fahrt-facts dt {
	width: 170px;
	flex-shrink: 0;
	color: var(--dfv-text-light);
	font-size: .95rem;
	margin: 0;
}
.fahrt-facts dd {
	font-weight: 600;
	margin: 0;
}

/* Anmeldung box with KooP logo on the right. */
.fahrt-anmeldung {
	display: flex;
	gap: 1.5rem;
	align-items: center;
	justify-content: space-between;
	background: var(--dfv-bg-alt);
	border-radius: var(--radius-lg, 12px);
	padding: 1.2rem 1.3rem;
	margin-bottom: 2rem;
	box-shadow: var(--card-shadow);
}
.fahrt-anmeldung__text strong {
	display: block;
	margin-bottom: .4rem;
}
.fahrt-anmeldung__ico {
	color: var(--dfv-orange);
}
.fahrt-anmeldung__logo {
	flex-shrink: 0;
	max-width: 160px;
}
.fahrt-anmeldung__logo img {
	max-width: 100%;
	height: auto;
	border-radius: var(--radius);
	box-shadow: var(--card-shadow);
}

.fahrt-back {
	margin-top: 1rem;
}

.fahrt-detail.is-past .fahrt-hero {
	filter: grayscale(.4);
	opacity: .85;
}

@media (max-width: 860px) {
	.fahrten-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.fahrten-grid { grid-template-columns: 1fr; }
	.fahrt-facts div { flex-direction: column; gap: .1rem; }
	.fahrt-facts dt { width: auto; }
	.fahrt-anmeldung { flex-direction: column; align-items: flex-start; }
}

/* ---------- Model rework 1.3.0: card auto-text + unterkunft link ---------- */

/* Card teaser snippet (auto-derived from the Beschreibung), matches GR cards. */
.fahrt-card__text {
	margin: 0 0 14px;
	color: var(--dfv-text-light);
	font-size: .92rem;
	line-height: 1.5;
}

/* Unterkunft name-as-link + address sub-line in "Auf einen Blick". */
.fahrt-facts__link {
	color: var(--dfv-orange);
	font-weight: 600;
	text-decoration: none;
}
.fahrt-facts__link:hover { color: var(--dfv-orange-dark); text-decoration: underline; }
.fahrt-facts__sub {
	display: block;
	font-weight: 400;
	color: var(--dfv-text-light);
	font-size: .92rem;
	margin-top: .15rem;
}

/* Status badge (Ausgebucht / Warteliste) — orange, top-left of card + hero. */
.fahrt-card__status,
.fahrt-hero__status {
	position: absolute;
	top: .7rem;
	left: .7rem;
	z-index: 1;
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	background: var(--dfv-orange);
	color: #fff;
	padding: 4px 11px;
	border-radius: 999px;
}

/* Weitere Infos (optional rich text, below the Anmeldung). */
.fahrt-info > *:first-child { margin-top: 0; }
.fahrt-info > *:last-child { margin-bottom: 0; }
.fahrt-info p { margin: 0 0 1rem; }
.fahrt-info ul, .fahrt-info ol { margin: 0 0 1rem 1.3rem; }
.fahrt-info li { margin-bottom: .35rem; }
.fahrt-info a { color: var(--dfv-orange); font-weight: 600; }

/* ---------- Landing carousel (mirrors the Gruppenreisen carousel) ---------- */
.fahrten-section { margin-top: var(--spacing-md); }
.fahrten-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}
.fahrten-head .fe-section-title { margin-bottom: 0; }
.fahrten-head__controls { display: flex; align-items: center; gap: 14px; }
.fahrten-seemore {
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--dfv-orange);
	text-decoration: none;
	white-space: nowrap;
}
.fahrten-seemore:hover { color: var(--dfv-orange-dark); }
.fahrten-cnav { display: flex; gap: 8px; }
.fahrten-cbtn {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1px solid var(--dfv-border);
	background: var(--dfv-bg);
	color: var(--dfv-heading);
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: border-color var(--transition), color var(--transition);
}
.fahrten-cbtn:hover { border-color: var(--dfv-orange); color: var(--dfv-orange); }
.fahrten-carousel { position: relative; margin-top: var(--spacing-md); }
.fahrten-track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 2 * 18px) / 3);
	gap: 18px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: 20px;
	scrollbar-width: none;
}
.fahrten-track::-webkit-scrollbar { display: none; }
.fahrten-track .fahrt-card { scroll-snap-align: start; }
.fahrten-empty-note { color: var(--dfv-text-light); margin-top: var(--spacing-md); }

@media (max-width: 900px) { .fahrten-track { grid-auto-columns: calc((100% - 18px) / 2); } }
@media (max-width: 600px) { .fahrten-track { grid-auto-columns: 86%; } }

/* ==========================================================================
   RESPONSIVE AUDIT FIXES (Aug 2026)
   ========================================================================== */

/* The Anmeldung e-mail is one unbreakable token. As a flex child with no
   min-width:0 it could not shrink, pinning its right edge at ~396px and
   scrolling the whole PAGE sideways on every phone narrower than that.
   `anywhere` (not `break-word`) is required: only `anywhere` participates in
   min-content sizing, which is what lets the flex item shrink at all.
   Scoped to 560px, the width at which this block already goes single-column.
   The overflow was measured only below 396px, so this is comfortably clear. */
@media (max-width: 560px) {
	.fahrt-anmeldung__text {
		min-width: 0;
		max-width: 100%;
	}
	.fahrt-anmeldung__text p,
	.fahrt-anmeldung__text a,
	.fahrt-facts dd,
	.fahrt-facts__sub {
		overflow-wrap: anywhere;
	}
}

/* --------------------------------------------------------------------------
   BATCH 1 (Aug 2026): tap targets
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.fahrten-cbtn {
		width: 44px;
		height: 44px;
		font-size: 1.25rem;
	}
	.fahrten-cnav {
		gap: 10px;
	}
	/* let the controls drop to their own line if they stop fitting */
	.fahrten-head__controls {
		flex-wrap: wrap;
		row-gap: 8px;
	}

	.fahrten-pill {
		min-height: 44px;
		padding-top: .5rem;
		padding-bottom: .5rem;
	}

	.fahrten-seemore,
	.fahrt-back a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	/* The Anmeldung links used min-height too, which made every contact row
	   44px tall and the block look loosely spaced. A pseudo-element hit area
	   keeps the 44px target without setting the row height. */
	.fahrt-anmeldung__text a {
		position: relative;
	}
	.fahrt-anmeldung__text a::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: 50%;
		height: 44px;
		transform: translateY(-50%);
	}
}

/* --------------------------------------------------------------------------
   BATCH 6 (Aug 2026)
   -------------------------------------------------------------------------- */

/* Each Anmeldung contact line is now its own block (the single <p> used to be
   split by <br>, so a long e-mail wrapped back to the left edge underneath its
   own icon). As a flex row the icon holds column one and the value gets its own
   column, so wrapped text lines up with the start of the value and every icon
   stays aligned down the left. */
/* Line spacing only, at every width: the lines used to be <br>-separated inside
   one paragraph, so plain <p> margins would space them out far more than before. */
.fahrt-anmeldung__text p {
	margin: 0 0 0.35rem;
}

.fahrt-anmeldung__text p:last-child {
	margin-bottom: 0;
}

/* The flex row layout is phone-only. On desktop the lines already fitted and
   the old inline rendering is kept, because turning them into flex rows widens
   the text block from 334px to 372px and pushes the KooP logo across. */
@media (max-width: 768px) {
	.fahrt-anmeldung__text p {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		gap: 0 0.5rem;
	}

	/* the name sits on its own row above the contact lines */
	.fahrt-anmeldung__text p > strong {
		flex: 1 1 100%;
	}

	.fahrt-anmeldung__text .contact-icon {
		flex: none;
		width: 17px;
		height: 17px;
		margin-top: 0.25em;
	}

	/* the value takes the rest of the row and may shrink below its longest word */
	.fahrt-anmeldung__text p > a,
	.fahrt-anmeldung__text p > span:not(.screen-reader-text) {
		flex: 1 1 0;
		min-width: 0;
	}
}

@media (max-width: 560px) {
	/* the KooP logo sat 1.5rem below the text in a 160px box; on a phone that
	   is a lot of empty space between the contact details and a small logo */
	.fahrt-anmeldung {
		gap: 0.75rem;
		padding: 1rem 1.1rem;
	}

	.fahrt-anmeldung__logo {
		max-width: 120px;
	}

	/* 21/8 makes the hero a 125px letterbox strip at 375px (104px at 320px),
	   too shallow to read as a photo. 16/9 gives 184px. */
	.fahrt-hero {
		aspect-ratio: 16 / 9;
		margin: 0.5rem 0 1.2rem;
	}
}

/* Archive filters stacked into three ragged rows: a 150px select, then a
   full-width select, then a button with the count pushed to the far right. */
@media (max-width: 600px) {
	/* Stacking all five controls into a column was tidier but a row taller
	   (151px -> 205px). Wrapping instead keeps the two selects full width and
	   puts "Zuruecksetzen" and the result count together on the last row. */
	.fahrten-filters {
		flex-wrap: wrap;
		align-items: center;
		gap: 0.5rem;
		margin: 1rem 0 1.5rem;
	}

	.fahrten-filters__label {
		flex: 1 1 100%;
		margin-right: 0;
	}

	.fahrten-filters select.fahrten-pill {
		flex: 1 1 100%;
		width: 100%;
	}

	.fahrten-filters button.fahrten-pill {
		flex: 0 0 auto;
	}

	.fahrten-filters__label.fahrten-count {
		flex: 0 0 auto;
		margin-left: auto;
		text-align: right;
	}
}

/* The back link is the last thing in the article, so its trailing margin lands
   between the map and the Koordination box. */
@media (max-width: 1024px) {
	.fahrt-back {
		margin-bottom: 0;
	}
}

/* --------------------------------------------------------------------------
   BATCH 7 (Aug 2026): trip page tightening
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
	/* 55px between the breadcrumb and the photo */
	.fahrt-hero {
		margin-top: 0;
	}

	/* 1.1rem is now LARGER than the site lead (1.05rem) and well above body
	   text (0.95rem), so trip intros read bigger than anything else on a phone. */
	.fahrt-detail__intro {
		font-size: 1.05rem;
		margin-bottom: var(--spacing-md);
	}

	/* contact rows sit tight now that the tap target is a pseudo-element */
	.fahrt-anmeldung__text p {
		margin-bottom: 0.1rem;
	}
}

@media (max-width: 1024px) {
	/* 3rem of padding under the article is what put 80px between the back link
	   and the Koordination box. Zero here brings it level with the Gruppenreise
	   page, which has no such padding. */
	.fahrt-detail {
		padding-bottom: 0;
	}
}

/* Match the Gruppenreise back link, which is already bold. */
.fahrt-back a {
	font-weight: 700;
}

/* Archive filter selects: iOS focus zoom.
   .fahrten-pill computes to 14.4px, and these selects are the only controls
   on the /fahrten/ archive, so tapping a filter zooms the whole page on an
   iPhone and leaves the visitor stranded mid-list. The 44px tap height added
   earlier is already in; this is only the font size. */
@media (max-width: 1024px) {
	.fahrten-pill {
		font-size: 16px;
	}
}

/* "See all" now sits below the cards, not in the head (Evie, 4 Aug). */
.fahrten-foot {
	margin-top: 0;
}

/* Archive grid, the 561-600 band. The grid drops to one column at <=560 but the
   carousel showing the same card does it at <=600, so 561-600 gave a 243.7px
   two-up next to a full-width card elsewhere: a 268px jump across one CSS pixel.
   Appended last so it wins that band; at <=560 it simply agrees with the rule
   already there. */
@media (max-width: 600px) {
	.fahrten-grid {
		grid-template-columns: 1fr;
	}
}

/* Carousel card text at 320. The track is 86% of a 272px container = 233.9px,
   less 34px of card padding = 199.9px of text, a hair under the readability
   floor. A wider card plus tighter padding buys it back to ~216px.
   fahrten.js step() reads getComputedStyle(track).columnGap, so setting the gap
   here keeps the arrows stepping exactly one card. */
@media (max-width: 360px) {
	.fahrten-track {
		grid-auto-columns: 89%;
		gap: 12px;
	}

	.fahrten-track .fahrt-card__body {
		padding: 14px 13px 16px;
	}
}

/* Trip titles are editor-supplied venue names and German compounds carry no
   break opportunity, so a long one spilled out of the box at 320.
   <html lang="de"> is set, so hyphens:auto hyphenates properly instead of
   chopping mid-syllable. */
@media (max-width: 600px) {
	.fahrt-detail__title {
		overflow-wrap: break-word;
		hyphens: auto;
	}
}

/* Anmeldung box: the 560px stacking rule was about 65px too low. The KooP
   logo is flex-shrink:0 at max-width 160px, so between 561 and ~620 it is
   still in a row and simply runs out of the grey card. Measured on
   /fahrt/tagungshaus-baitz-2/: at 561 the logo's right edge is 562.8 against
   a card edge of 537, and the PAGE gains horizontal scroll (563 vs 561); at
   580 it still escapes by 6.8px. Stacking to 640 closes the band. */
@media (max-width: 640px) {
	.fahrt-anmeldung {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* --------------------------------------------------------------------------
   BATCH 2 (Aug 2026)
   -------------------------------------------------------------------------- */

/* Carousel peek on touch tablets, ported from gruppenreisen.css: from 640 to
   1024 the track showed exactly N whole cards flush to the edge, so nothing
   signalled that the row scrolls. 2.3 cards leaves a visible sliver. Starts
   at 640 for the same reason as the GR twin: below that a peek pushes the
   card text column under 200px. */
@media (min-width: 640px) and (max-width: 1024px) {
	.fahrten-track { grid-auto-columns: calc((100% - 2 * 18px) / 2.3); }
}

/* Flick-past-the-last-card no longer chains into a page/browser gesture. */
@media (max-width: 1024px) {
	.fahrten-track { overscroll-behavior-x: contain; }
}

/* The see-all link below the cards read as a footnote after the big shadowed
   cards (Evie: it gets lost). Centered ghost button instead, visuals copied
   from the theme's .btn / .btn--ghost so the pair matches the site buttons.
   Twin rule in gruppenreisen.css. */
.fahrten-foot { text-align: center; }
.fahrten-foot .fahrten-seemore {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.7rem 1.4rem;
	border: 1px solid var(--dfv-orange);
	border-radius: var(--radius);
	background: transparent;
	color: var(--dfv-orange);
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	text-decoration: none;
	min-height: 44px;
}
.fahrten-foot .fahrten-seemore:hover {
	background: var(--dfv-orange);
	color: #fff;
}

/* Breadcrumb-to-photo gap (Evie's loose end): the breadcrumb bottom spacing
   is zeroed for trip singles in main.css; the hero carries one clean 1.5rem
   top margin instead (was .5rem on top of ~40px breadcrumb spacing). */
.fahrt-hero { margin-top: 1.5rem; }

/* BATCH 2b (Aug 2026): below 1025 the sidebar accordion already separates
   breadcrumb and photo, so the hero's 1.5rem top margin read as a double
   gap (Evie). Desktop keeps the 24px. */
@media (max-width: 1024px) {
	.fahrt-hero { margin-top: 0; }
}

/* -------------------------------------------------------------------------
   Kooperationspartner grid ([dfv_koop_partner], Kooperationen page)
   ---------------------------------------------------------------------- */
.koop-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 24px;
	margin: 2rem 0 2.5rem;
}
.koop-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: var(--radius, 6px);
	box-shadow: var(--card-shadow);
	padding: 16px 16px 18px;
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
a.koop-card:hover,
a.koop-card:focus-visible {
	transform: translateY(-3px);
	box-shadow: var(--card-shadow-hover, 0 2px 6px rgba(0, 0, 0, 0.06), 0 10px 22px -6px rgba(0, 0, 0, 0.14));
}
.koop-card__logo {
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border-radius: 4px;
	overflow: hidden;
	margin-bottom: 12px;
}
.koop-card__img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
}
.koop-card__mono {
	font-size: 1.9rem;
	font-weight: 700;
	color: var(--dfv-slate, #333C4E);
	opacity: 0.45;
}
.koop-card--nologo .koop-card__logo {
	background: var(--dfv-bg-alt, #F3F2EF);
}
.koop-card__name {
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--dfv-heading, #2A2520);
	text-align: center;
	line-height: 1.35;
	transition: color 0.2s ease;
}
a.koop-card:hover .koop-card__name,
a.koop-card:focus-visible .koop-card__name {
	color: var(--dfv-orange, #CC4400);
}
@media (max-width: 480px) {
	.koop-grid {
		grid-template-columns: repeat(auto-fill, minmax(136px, 1fr));
		gap: 16px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.koop-card,
	.koop-card__name {
		transition: none;
	}
}