/* ==========================================================================
   PRINTEREI – SHARED SECTIONS
   Used on the homepage AND the service pages. Uses tokens + components.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Product cards
   -------------------------------------------------------------------------- */
.card__arrow {
	display: grid;
	place-items: center;
	width: var(--space-8);
	height: var(--space-8);
	flex: none;
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-pill);
	color: var(--color-text);
	transition: all var(--dur-base) var(--ease-out);
}

.card__arrow .icon {
	--icon-size: var(--icon-xs);
}

a.card:hover .card__arrow {
	border-color: var(--accent);
	background: var(--accent);
	color: var(--accent-on);
	transform: translateX(2px);
}

/* Price: small grey «ab», the amount in dark bold – calm, no red */
.card__price {
	display: inline-flex;
	align-items: baseline;
	gap: 0.3em;
	color: var(--color-heading);
	font-size: var(--fs-base);
	font-weight: var(--fw-bold);
	font-variant-numeric: tabular-nums;
	letter-spacing: var(--ls-snug);
	white-space: nowrap;
}

.card__price-from {
	color: var(--color-text-muted);
	font-size: var(--fs-xs);
	font-weight: var(--fw-medium);
	letter-spacing: 0;
}

.card__price.card__price--quiet {
	color: var(--color-text-muted);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
}

/* Featured services + "more" chips */
.grid--featured + .chips {
	margin-top: var(--space-10);
}

/* --------------------------------------------------------------------------
   Showcase – mockups on a tinted stage (hero slides, textile)
   -------------------------------------------------------------------------- */
.showcase {
	position: relative;
	overflow: hidden;
	aspect-ratio: 5 / 4;
	border-radius: var(--radius-media);
	background: var(--accent-soft);
	box-shadow: var(--shadow-lg);
}

.showcase__item {
	position: absolute;
	bottom: 0;
	height: auto;
	filter: var(--shadow-mockup);
}

.showcase__item--main  { left: 25%; width: 50%; z-index: 2; }
.showcase__item--left  { left: 0; width: 34%; bottom: 18%; }
.showcase__item--right { right: 0; width: 34%; bottom: 18%; }

.hero__media.is-active .showcase__item--main {
	animation: rise var(--dur-reveal) var(--ease-out) both;
}

.textile .showcase {
	box-shadow: var(--shadow-lg);
}

/* --------------------------------------------------------------------------
   Picture ring (homepage hero, page banners) – printerei_ring() + main.js
   One box; the pictures turn through it, the one in front is large, the
   neighbours peek in faintly at the edges. Sizes are relative to the box
   (cqw), so it looks the same at every width.
   -------------------------------------------------------------------------- */
.ring {
	position: relative;
	overflow: hidden;
	container: ring / inline-size;
	aspect-ratio: 31 / 25;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
	background: var(--accent-soft);
	transition: background-color var(--dur-ring) var(--ease-out);
}

.ring__list {
	position: absolute;
	inset: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	perspective: 242cqw;
}

/* Picture slot: 4:5 like the product photos, centred a little above the middle */
.ring__item {
	--p: 0;
	--a: 0;
	--s: 0.8;
	--step: 121.9%; /* distance to the neighbours, in slot widths */
	position: absolute;
	left: 50%;
	top: 50%;
	display: grid;
	place-items: center;
	width: 51.6%;
	aspect-ratio: 4 / 5;
	opacity: 0;
	transform:
		translate(-50%, -55%)
		translateX(calc(var(--p) * var(--step)))
		translateZ(calc(var(--a) * -38.7cqw))
		rotateY(calc(var(--p) * -48deg))
		scale(var(--s));
	transition:
		transform var(--dur-ring) var(--ease-out),
		opacity var(--dur-ring) var(--ease-out);
}

.ring__item[data-pos="-2"] { --p: -2; --a: 2; }
.ring__item[data-pos="-1"] { --p: -1; --a: 1; opacity: 0.4; z-index: 1; }
.ring__item[data-pos="0"]  { --s: 1.21; opacity: 1; z-index: 2; }
.ring__item[data-pos="1"]  { --p: 1;  --a: 1; opacity: 0.4; z-index: 1; }
.ring__item[data-pos="2"]  { --p: 2;  --a: 2; }

/* Jumping around the back of the ring, or quick hops after a tab click */
.ring__item.is-jump {
	transition: none;
}

.ring.is-fast .ring__item {
	--dur-ring: var(--dur-slow);
}

.ring__item .mockup {
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: var(--shadow-mockup);
}

/* Photos (full scenes) become a card, a bit smaller than the cut-outs */
.ring__item .mockup--photo {
	width: 76%;
	height: 76%;
	border-radius: var(--radius-md);
	object-fit: cover;
	filter: none;
	box-shadow: var(--shadow-sm);
}

/* Narrow box (phones, small laptops): square, so the picture has room above the bottom line */
@media (max-width: 639px), (min-width: 1024px) and (max-width: 1279px) {
	.ring {
		aspect-ratio: 1;
	}

	.ring__item {
		--step: 112.3%;
		top: 45%;
		width: 56%;
	}
}

/* Bottom line: badge (left, optional) · dots + pause (right) */
.ring__foot {
	position: absolute;
	right: 3.5cqw;
	bottom: 3.2cqw;
	left: 3.2cqw;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
}

.ring__controls {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin-left: auto;
}

.ring__pips {
	display: flex;
	flex: none;
	gap: 6px;
}

.ring__pip {
	width: 6px;
	height: 6px;
	border-radius: var(--radius-pill);
	background: rgb(20 33 32 / 0.18);
	transition:
		width var(--dur-slow) var(--ease-out),
		background-color var(--dur-slow) var(--ease-out);
}

.ring__pip.is-active {
	width: 22px;
	background: var(--accent-ink);
}

.ring__pause {
	--icon-size: 1rem;
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	background: var(--color-surface);
	color: var(--color-heading);
	transition: border-color var(--dur-base) var(--ease-out);
}

.ring__pause:hover {
	border-color: var(--color-border-strong);
}

.ring__pause[hidden],
.ring__pause-icon--play,
.ring:not(.is-playing) .ring__pause-icon--pause {
	display: none;
}

.ring:not(.is-playing) .ring__pause-icon--play {
	display: block;
}

/* Timer for boxes without tabs: invisible, its animation runs the steps */
.ring__timer {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.ring.is-playing .ring__timer {
	animation: ring-step-a var(--hero-step) linear both;
}

.ring.is-playing .ring__timer.is-b {
	animation-name: ring-step-b;
}

.ring.is-paused .ring__timer {
	animation-play-state: paused;
}

/* Two identical keyframes: switching the name restarts the timer */
@keyframes ring-step-a {
	from { transform: scaleX(var(--from, 0)); }
	to   { transform: scaleX(var(--to, 1)); }
}

@keyframes ring-step-b {
	from { transform: scaleX(var(--from, 0)); }
	to   { transform: scaleX(var(--to, 1)); }
}

@media (prefers-reduced-motion: reduce) {
	.ring,
	.ring__item,
	.ring__pip {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   Process
   -------------------------------------------------------------------------- */
.process {
	--tile-size: 4rem;
	position: relative;
	display: grid;
	gap: var(--space-10) var(--space-8);
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: center;
}

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

@media (min-width: 1024px) {
	.process {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	/* Dashed connector line behind the icons */
	.process::before {
		content: "";
		position: absolute;
		top: calc(var(--tile-size) / 2);
		left: 12.5%;
		right: 12.5%;
		border-top: 2px dashed var(--color-border-strong);
	}
}

.process__step {
	position: relative;
	display: grid;
	justify-items: center;
	gap: var(--space-3);
}

.process__marker {
	position: relative;
	display: inline-flex;
	margin-bottom: var(--space-2);
}

.process .icon-tile {
	--tile-size: 4rem;
	background: var(--accent);
	color: var(--accent-on);
	box-shadow: 0 0 0 var(--space-2) var(--color-bg);
}

.process .icon-tile .icon {
	--icon-size: var(--icon-lg);
}

.process__step:hover .icon-tile {
	transform: rotate(-6deg) scale(1.06);
}

.process__num {
	position: absolute;
	top: calc(var(--space-2) * -1);
	right: calc(var(--space-2) * -1);
	display: grid;
	place-items: center;
	width: var(--space-6);
	height: var(--space-6);
	border-radius: var(--radius-pill);
	background: var(--color-heading);
	color: var(--color-on-dark);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	box-shadow: 0 0 0 2px var(--color-bg);
}

.process__title {
	font-size: var(--fs-lg);
}

.process__text {
	max-width: 17rem;
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.faq {
	display: grid;
	gap: var(--space-10) var(--space-16);
	align-items: start;
}

@media (min-width: 1024px) {
	.faq {
		grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	}

	.faq__intro {
		position: sticky;
		top: calc(var(--header-h) + var(--space-8));
	}
}

.faq .section-head {
	margin-bottom: var(--space-8);
}

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */
.contact {
	display: grid;
	overflow: hidden;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
	background: var(--color-surface);
	box-shadow: var(--shadow-lg);
}

@media (min-width: 1024px) {
	.contact {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
}

.contact__panel,
.contact__form {
	padding: clamp(var(--space-8), 4vw, var(--space-14));
}

.contact__panel {
	position: relative;
	display: grid;
	align-content: start;
	gap: var(--space-5);
	overflow: hidden;
	background: var(--color-secondary);
	color: var(--color-on-dark-muted);
}

/* Decorative rings */
.contact__panel::after {
	content: "";
	position: absolute;
	right: -7rem;
	bottom: -7rem;
	width: 20rem;
	height: 20rem;
	border: 3.5rem solid var(--color-on-dark-surface);
	border-radius: var(--radius-pill);
	pointer-events: none;
}

.contact__panel .eyebrow {
	color: var(--color-on-dark-accent);
}

.contact__title {
	color: var(--color-on-dark);
}

.contact__lead {
	max-width: 30rem;
	font-size: var(--fs-md);
}

.contact__phone {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	justify-self: start;
	margin-top: var(--space-2);
	color: var(--color-on-dark);
	font-size: var(--fs-2xl);
	font-weight: var(--fw-black);
	letter-spacing: var(--ls-snug);
	text-decoration: none;
}

.contact__phone:hover {
	color: var(--color-on-dark-accent);
}

.contact__list {
	position: relative;
	display: grid;
	gap: var(--space-3);
	margin-top: var(--space-2);
	font-size: var(--fs-sm);
}

.contact__list li {
	display: flex;
	align-items: center;
	gap: var(--space-3);
}

.contact__list .icon {
	color: var(--color-on-dark-accent);
}

.contact__list a {
	color: var(--color-on-dark);
	text-decoration: none;
}

.contact__list a:hover {
	color: var(--color-on-dark-accent);
}

.contact__form {
	display: grid;
	align-content: start;
	gap: var(--space-5);
}

.contact__form-title {
	font-size: var(--fs-xl);
}

/* Custom select arrow (mask = color comes from currentColor) */
.select {
	position: relative;
	display: block;
	color: var(--color-text-muted);
}

.select::after {
	content: "";
	position: absolute;
	top: 50%;
	right: var(--space-4);
	width: var(--icon-xs);
	height: var(--icon-xs);
	background: currentColor;
	transform: translateY(-50%);
	pointer-events: none;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6 -6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6 -6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* The JavaScript dropdown (components.css → .pr-select) brings its own arrow. */
.select:has(.pr-select)::after {
	content: none;
}

.input--select {
	appearance: none;
	padding-right: var(--space-10);
	color: var(--color-text);
	cursor: pointer;
}

/* Showcase variants: one product, or icon placeholder while no mockup exists */
.showcase--single .showcase__item--main {
	left: 20%;
	width: 60%;
}

.showcase__icon {
	position: absolute;
	inset: 0;
	width: 40%;
	height: 40%;
	margin: auto;
	--icon-size: 100%;
	--icon-stroke: 1;
	color: var(--accent-ink);
	opacity: 0.5;
}

.card__icon {
	position: absolute;
	inset: 0;
	width: 35%;
	height: 35%;
	margin: auto;
	--icon-size: 100%;
	--icon-stroke: 1;
	color: var(--accent-ink);
	opacity: 0.5;
}

/* "Show all" link below a teaser section */
.section__more {
	display: flex;
	justify-content: center;
	margin-top: var(--space-8);
}

/* --------------------------------------------------------------------------
   Phones: product and service cards as a swipe row from edge to edge
   (home, Druckprodukte, Werbetechnik, Textildruck, service and product pages).
   The first card lines up with the text, the last with the right edge,
   every card in between stops in the middle.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.grid--rail {
		display: flex;
		gap: var(--space-3);
		margin-inline: calc(var(--gutter) * -1);
		padding: var(--space-1) var(--gutter) var(--space-3);
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--gutter);
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.grid--rail::-webkit-scrollbar {
		display: none;
	}

	.grid--rail {
		overflow-y: hidden; /* Sideways only: the row never moves up or down under the finger. */
		touch-action: pan-x pan-y;
	}

	.grid--rail > li {
		flex: 0 0 min(15rem, 68%);
		scroll-snap-align: center;
	}

	/* A card is not something to pick up and drag (iOS lifts links and pictures). */
	.grid--rail a,
	.grid--rail img {
		-webkit-user-drag: none;
		user-select: none;
		-webkit-touch-callout: none;
	}

	/* No hover lift inside the row: on touch it sticks and the card looks loose. */
	.grid--rail a.card:hover {
		transform: none;
		box-shadow: none;
	}

	.grid--rail > li:first-child {
		scroll-snap-align: start;
	}

	.grid--rail > li:last-child {
		scroll-snap-align: end;
	}

	/* Cards further right fade in as they come, without waiting for their place in the queue. */
	.js .grid--rail > [data-reveal] {
		transform: none; /* Fade only – a rising card would make the row taller than itself. */
		transition-delay: calc(min(var(--i, 0), 2) * var(--stagger));
	}

	/* Smaller cards */
	.grid--rail .card__stage {
		aspect-ratio: 1;
	}

	.grid--rail .card__body {
		gap: var(--space-2);
		padding: var(--space-3) var(--space-2) var(--space-2);
	}

	.grid--rail .card__title {
		font-size: var(--fs-base);
	}

	.grid--rail .card__badge {
		top: var(--space-2);
		left: var(--space-2);
	}

	/* Features as one quiet line («A6 bis A3 · ein-/beidseitig»), so every card has the same height. */
	.grid--rail .chips {
		display: block;
		overflow: hidden;
		color: var(--color-text-muted);
		font-size: var(--fs-sm);
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.grid--rail .chip {
		display: inline;
		min-height: 0;
		padding: 0;
		border: 0;
		background: none;
		color: inherit;
		font-size: inherit;
		font-weight: var(--fw-medium);
	}

	.grid--rail .chip + .chip::before {
		content: " · ";
	}
}

/* --------------------------------------------------------------------------
   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) {
	.contact__panel,
	.contact__form {
		padding: var(--space-6) var(--space-4);
	}
}

/* --------------------------------------------------------------------------
   1.3.46: /druckprodukte/ – all products in groups, chips jump to a group.
   The chip row scrolls sideways: the first chip stops at the start, the last at the end, the others in the middle.
   -------------------------------------------------------------------------- */
.product-groups__nav {
	display: flex;
	gap: var(--space-2);
	margin: 0 calc(var(--gutter) * -1) var(--space-6);
	padding: var(--space-1) var(--gutter);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--gutter);
	scrollbar-width: none;
}

.product-groups__nav::-webkit-scrollbar {
	display: none;
}

.product-groups__chip {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-4);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	background: var(--color-surface);
	color: var(--color-text);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	text-decoration: none;
	white-space: nowrap;
	scroll-snap-align: center;
	transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.product-groups__chip:first-child {
	scroll-snap-align: start;
}

.product-groups__chip:last-child {
	scroll-snap-align: end;
}

.product-groups__chip span {
	color: var(--color-text-muted);
	font-weight: var(--fw-regular, 400);
	font-variant-numeric: tabular-nums;
}

.product-groups__chip:hover {
	border-color: var(--color-border-strong);
	background: var(--color-surface-alt);
}

.product-group {
	scroll-margin-top: calc(var(--header-h, 4rem) + var(--space-4));
}

.product-group + .product-group {
	margin-top: var(--space-8);
}

.product-group__title {
	margin: 0 0 var(--space-4);
	font-size: var(--fs-lg);
	line-height: var(--lh-tight);
}