/* ==========================================================================
   PRINTEREI – SERVICE PAGES (/werbetechnik/…)
   Uses tokens + components + sections.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Page banner – colour, pattern and artwork are different on every page
   -------------------------------------------------------------------------- */
.page-hero {
	position: relative;
	overflow: hidden;
	padding-block: var(--space-6) var(--space-16);
	background: linear-gradient(115deg, var(--color-surface) 0%, var(--accent-soft) 100%);
}

.page-hero > .container {
	position: relative;
}

.page-hero__bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
	-webkit-mask-image: linear-gradient(90deg, transparent 30%, var(--color-text) 100%);
	mask-image: linear-gradient(90deg, transparent 30%, var(--color-text) 100%);
}

.page-hero--dots .page-hero__bg {
	background-image: radial-gradient(var(--accent) 1.5px, transparent 1.6px);
	background-size: 20px 20px;
	opacity: 0.3;
}

.page-hero--stripes .page-hero__bg {
	background-image: repeating-linear-gradient(135deg, var(--accent) 0 2px, transparent 2px 20px);
	opacity: 0.18;
}

.page-hero--rings .page-hero__bg {
	background-image: repeating-radial-gradient(circle at 82% 50%, transparent 0 38px, var(--accent) 38px 40px);
	opacity: 0.22;
}

.page-hero--grid .page-hero__bg {
	background-image:
		linear-gradient(var(--accent) 1px, transparent 1px),
		linear-gradient(90deg, var(--accent) 1px, transparent 1px);
	background-size: 40px 40px;
	opacity: 0.2;
}

/* Brand wave: runs along the bottom over the full width and fades in from the
   left, so it never sits behind the text and has no hard edge in the middle. */
.page-hero--wave .page-hero__bg {
	background: url("../img/brand/wave.svg") center bottom / 100% 62% no-repeat;
	opacity: 0.4;
	-webkit-mask-image: linear-gradient(90deg, transparent 45%, var(--color-text) 80%);
	mask-image: linear-gradient(90deg, transparent 45%, var(--color-text) 80%);
}

.page-hero__grid {
	display: grid;
	gap: var(--space-10);
	align-items: center;
}

@media (min-width: 1024px) {
	.page-hero__grid {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		gap: var(--space-16);
		min-height: 22rem;
	}
}

.page-hero__title {
	max-width: 22ch;
	margin-bottom: var(--space-5);
	font-size: var(--fs-3xl);
	font-weight: var(--fw-black);
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-tight);
}

.page-hero__lead {
	max-width: var(--measure);
	margin-bottom: var(--space-8);
	font-size: var(--fs-lg);
	color: var(--color-text-muted);
}

.page-hero__content > :last-child {
	margin-bottom: 0;
}

.page-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-bottom: var(--space-6);
}

@media (max-width: 479px) {
	.page-hero__actions .btn {
		flex: 1 1 100%;
	}
}

.page-hero__content .chip {
	background: var(--color-surface);
	box-shadow: var(--shadow-xs);
}

.page-hero__content .chip .icon {
	color: var(--accent-ink);
}

/* Artwork: tiles (references / search) */
.banner-tiles {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-4);
	max-width: 24rem;
	margin-inline: auto;
}

.banner-tiles__tile {
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	border-radius: var(--radius-xl);
	background: var(--accent);
	color: var(--accent-on);
	box-shadow: var(--shadow-md);
	--icon-size: 3.5rem;
	--icon-stroke: 1.5;
}

.banner-tiles__tile:nth-child(even) {
	transform: translateY(var(--space-8));
}

.banner-tiles--single {
	grid-template-columns: minmax(0, 1fr);
	max-width: 12rem;
}

.banner-tiles--single .banner-tiles__tile {
	transform: none;
	--icon-size: 5rem;
}

/* Artwork: trust cards (about) */
.banner-trust {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-4);
	max-width: 28rem;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.banner-trust__item {
	display: grid;
	justify-items: start;
	gap: var(--space-4);
	padding: var(--space-6);
	border-radius: var(--radius-card);
	background: var(--color-surface);
	box-shadow: var(--shadow-md);
}

.banner-trust__item:nth-child(even) {
	transform: translateY(var(--space-6));
}

.banner-trust__item strong {
	font-size: var(--fs-md);
	line-height: var(--lh-snug);
}

/* Artwork: contact cards */
.banner-contact {
	display: grid;
	gap: var(--space-4);
	max-width: 26rem;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.banner-contact li {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	padding: var(--space-4) var(--space-5);
	border-radius: var(--radius-card);
	background: var(--color-surface);
	box-shadow: var(--shadow-md);
}

.banner-contact li:nth-child(2) {
	transform: translateX(var(--space-6));
}

.banner-contact a {
	display: grid;
	min-width: 0;
	color: var(--color-text);
	text-decoration: none;
	line-height: var(--lh-snug);
}

.banner-contact a span {
	font-size: var(--fs-xs);
	color: var(--color-text-muted);
}

.banner-contact a strong {
	font-size: var(--fs-md);
	overflow-wrap: anywhere;
}

@media (hover: hover) {
	.banner-contact a:hover strong {
		color: var(--color-primary-text);
	}
}

@media (max-width: 639px) {
	.banner-contact li:nth-child(2),
	.banner-tiles__tile:nth-child(even),
	.banner-trust__item:nth-child(even) {
		transform: none;
	}
}

/* Breadcrumbs */
.breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
}

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

.breadcrumbs__item a {
	color: var(--color-text-muted);
	text-decoration: none;
}

@media (hover: hover) {
	.breadcrumbs__item a:hover {
		color: var(--color-secondary);
		text-decoration: underline;
	}
}

.breadcrumbs__item [aria-current] {
	color: var(--color-text);
	font-weight: var(--fw-semibold);
}

/* Benefit cards (3 per row) */
.benefit {
	height: 100%;
	gap: var(--space-4);
	padding: var(--space-8);
}

.benefits + * {
	margin-top: 0;
}

.breadcrumbs {
	margin-bottom: var(--space-6);
}

.page-hero__grid {
	margin-top: 0;
}

/* Sister-brand note on light backgrounds */
.section--tight {
	padding-block: var(--space-8);
}

.subbrand-note {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
}

.subbrand-note a {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	color: var(--color-link);
	font-weight: var(--fw-semibold);
}

/* Search results */
.grid--results {
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 768px) {
	.grid--results {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.result {
	flex-direction: row;
	align-items: center;
	gap: var(--space-5);
	height: 100%;
}

.result__body {
	display: grid;
	flex: 1;
	justify-items: start;
	gap: var(--space-1);
	min-width: 0;
}

.search-page__empty {
	display: grid;
	gap: var(--space-3);
	color: var(--color-text-muted);
}

@media (max-width: 1023px) {
	.page-hero--wave .page-hero__bg {
		background-size: 160% auto;
		opacity: 0.18;
		-webkit-mask-image: linear-gradient(90deg, transparent 10%, var(--color-text) 60%);
		mask-image: linear-gradient(90deg, transparent 10%, var(--color-text) 60%);
	}
}

/* --------------------------------------------------------------------------
   Quote request (Printerei Shop plugin) – service pages
   -------------------------------------------------------------------------- */
.request {
	background: var(--color-surface-alt);
	scroll-margin-top: calc(var(--header-bar-h) + var(--space-4));
}

.request__grid {
	display: grid;
	gap: var(--space-10);
	align-items: start;
}

@media (min-width: 1024px) {
	.request__grid {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		gap: var(--space-16);
	}
}

.request__intro {
	display: grid;
	gap: var(--space-5);
}

.request__title {
	font-size: var(--fs-3xl);
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-tight);
}

.request__lead {
	font-size: var(--fs-md);
	color: var(--color-text-muted);
}

.request__steps {
	display: grid;
	gap: var(--space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.request__steps li {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	font-weight: var(--fw-semibold);
}

.request__steps span {
	display: grid;
	flex: none;
	place-items: center;
	width: 2rem;
	height: 2rem;
	border-radius: var(--radius-pill);
	background: var(--accent-soft, var(--color-secondary-soft));
	color: var(--accent-ink, var(--color-secondary));
	font-size: var(--fs-sm);
}

.request__phone {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	color: var(--color-text-muted);
}

.request__phone a {
	font-weight: var(--fw-bold);
	color: var(--color-secondary);
}

.request__form {
	display: grid;
	gap: var(--space-4);
	padding: var(--space-8);
	border-radius: var(--radius-card);
	background: var(--color-surface);
	box-shadow: var(--shadow-md);
}

.request__row {
	display: grid;
	gap: var(--space-4);
}

@media (min-width: 640px) {
	.request__row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.request__row--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.request__textarea {
	min-height: 7.5rem;
	padding-block: var(--space-3);
	resize: vertical;
}

.request__files {
	padding: var(--space-2) var(--space-3);
	min-height: auto;
}

.request__files::file-selector-button {
	margin-right: var(--space-3);
	padding: var(--space-2) var(--space-4);
	border: 0;
	border-radius: var(--radius-xs);
	background: var(--color-secondary-soft);
	color: var(--color-secondary);
	font: inherit;
	font-weight: var(--fw-semibold);
	cursor: pointer;
}

/* --------------------------------------------------------------------------
   Phones: one padding rule for every box – 16 px inside a card or panel,
   pictures 8 px from the edge (like the product cards on the home page).
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.benefit,
	.result,
	.request__form {
		padding: var(--space-4);
	}

	.banner-trust__item {
		padding: var(--space-4);
		gap: var(--space-3);
	}

	.banner-contact li {
		padding: var(--space-3) var(--space-4);
	}
}

/* --------------------------------------------------------------------------
   1.3.53: banner with the products themselves (Textildruck) – text left, the products right, the quote request
   under the text; on phones the products as a sideways row between the text and the buttons.
   -------------------------------------------------------------------------- */
.page-hero--products {
	padding-block: var(--space-6) var(--space-10);
}

.page-hero--products .page-hero__grid {
	grid-template-columns: minmax(0, 1fr); /* The sideways row must not widen the banner. */
	gap: var(--space-5);
}

.page-hero--products .page-hero__lead {
	margin-bottom: 0;
}

.page-hero--products .page-hero__actions--quiet {
	margin-bottom: 0;
}

@media (min-width: 1200px) {
	.page-hero--products .page-hero__grid {
		grid-template-columns: minmax(0, 27rem) minmax(0, 1fr);
		grid-template-areas:
			"content visual"
			"actions visual";
		grid-template-rows: auto 1fr;
		column-gap: var(--space-10);
		row-gap: var(--space-6);
		align-items: start;
		min-height: 0;
	}

	.page-hero--products .page-hero__content {
		grid-area: content;
		align-self: end;
	}

	.page-hero--products .page-hero__visual {
		grid-area: visual;
		align-self: center;
	}

	.page-hero--products .page-hero__actions--quiet {
		grid-area: actions;
		flex-wrap: nowrap;
	}

	.page-hero--products .page-hero__actions--quiet .btn {
		padding-inline: var(--space-5); /* Both buttons in one row beside the products. */
	}
}

.page-hero--products .page-hero__actions--quiet .btn {
	background: var(--color-surface);
}

/* Phones: the offer button takes the row, the phone is a square icon button. */
@media (max-width: 479px) {
	.page-hero--products .page-hero__actions--quiet {
		flex-wrap: nowrap;
	}

	.page-hero--products .page-hero__actions--quiet .page-hero__offer {
		flex: 1 1 auto;
	}

	.page-hero--products .page-hero__actions--quiet .page-hero__call {
		flex: none;
		width: var(--control-h-lg, 3.25rem);
		padding-inline: 0;
	}

	.page-hero__call-num {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

.hero-products {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.hero-product {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border-radius: var(--radius-card);
	background: var(--color-surface);
	box-shadow: var(--shadow-xs);
	color: var(--color-text);
	text-decoration: none;
	transition:
		transform var(--dur-slow) var(--ease-out),
		box-shadow var(--dur-slow) var(--ease-out);
}

.hero-product__pic {
	display: grid;
	place-items: center;
	aspect-ratio: 1 / 1;
	padding: var(--space-3);
	background: var(--accent-soft);
}

.hero-product__img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: transform var(--dur-slow) var(--ease-out);
}

.hero-product__body {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
	padding: var(--space-5);
}

.hero-product__text {
	display: grid;
	gap: var(--space-1);
	min-width: 0;
}

.hero-product__name {
	font-size: var(--fs-lg);
	font-weight: var(--fw-bold);
	line-height: var(--lh-snug);
}

.hero-product__price {
	font-weight: var(--fw-bold);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.hero-product__from {
	font-size: var(--fs-sm);
	font-weight: var(--fw-regular, 400);
	color: var(--color-text-muted);
}

.hero-product__arrow {
	--icon-size: var(--icon-sm, 1.125rem);
	flex: none;
	color: var(--color-text-muted);
	transition: transform var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}

@media (hover: hover) {
	.hero-product:hover {
		transform: translateY(var(--hover-lift));
		box-shadow: var(--shadow-md);
	}

	.hero-product:hover .hero-product__img {
		transform: scale(1.04);
	}

	.hero-product:hover .hero-product__arrow {
		color: var(--color-text);
		transform: translateX(3px);
	}
}

.hero-product:focus-visible {
	outline: 3px solid var(--color-focus, var(--color-secondary));
	outline-offset: 3px;
}

/* Phones and small tablets: one sideways row from edge to edge – the first card snaps to the start, the last to the
   end, the others to the middle; the cards keep 16 px to the screen edge also at the end of the row. */
@media (max-width: 767px) {
	.hero-products {
		display: flex;
		gap: var(--space-3);
		margin-inline: calc(var(--gutter) * -1);
		padding: var(--space-1) var(--gutter) var(--space-2);
		overflow-x: auto;
		overflow-y: hidden;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--gutter);
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.hero-products::-webkit-scrollbar {
		display: none;
	}

	.hero-products::after {
		content: "";
		flex: 0 0 1px; /* Keeps the gutter after the last card (padding at the end of a scroller is not always kept). */
		margin-left: calc(var(--gutter) - var(--space-3) - 1px);
	}

	.hero-products > li {
		flex: 0 0 10.25rem;
		scroll-snap-align: center;
	}

	.hero-products > li:first-child {
		scroll-snap-align: start;
	}

	.hero-products > li:last-child {
		scroll-snap-align: end;
	}

	.hero-product__name {
		font-size: var(--fs-base);
	}
}

@media (prefers-reduced-motion: reduce) {
	.hero-product,
	.hero-product__img,
	.hero-product__arrow {
		transition: none;
	}
}

/* Tablets and small laptops (stacked): the three cards stay card-sized, so the buttons stay on the first screen. */
@media (min-width: 768px) and (max-width: 1199px) {
	.hero-products {
		max-width: 46rem;
	}
}