/* ==========================================================================
   PRINTOPUS Trittbrett-Konfigurator — Frontend
   Designsystem übernommen von printopus.de
   ========================================================================== */

.ptk {
	--ptk-ink: #11303f;
	--ptk-ink-2: #1d4563;
	--ptk-accent: #f27d52;
	--ptk-accent-dark: #d9663c;
	--ptk-blue: #2a6f97;
	--ptk-slate: #354e5b;
	--ptk-text: #333;
	--ptk-muted: #67787f;
	--ptk-bg: #fff;
	--ptk-soft: #f4f6f7;
	--ptk-tint: #eaf1f5;
	--ptk-line: #dbe2e6;
	--ptk-line-strong: #c3ced4;
	--ptk-ok: #1f7a4d;
	--ptk-err: #b4241f;
	--ptk-r: 10px;
	--ptk-r-sm: 6px;
	--ptk-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--ptk-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
	--ptk-shadow: 0 1px 2px rgba(17, 48, 63, .06), 0 8px 24px rgba(17, 48, 63, .06);
	--ptk-shadow-lg: 0 2px 4px rgba(17, 48, 63, .05), 0 18px 48px rgba(17, 48, 63, .1);

	font-family: var(--ptk-sans);
	color: var(--ptk-text);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	container-type: inline-size;
}

.ptk *,
.ptk *::before,
.ptk *::after { box-sizing: border-box; }

.ptk h1, .ptk h2, .ptk h3, .ptk h4 {
	font-family: var(--ptk-sans);
	color: var(--ptk-ink);
	font-weight: 600;
	line-height: 1.22;
	margin: 0;
	letter-spacing: -0.01em;
}

.ptk p { margin: 0 0 1em; }
.ptk p:last-child { margin-bottom: 0; }
.ptk a { color: var(--ptk-blue); text-decoration: underline; text-underline-offset: 2px; }
.ptk a:hover { color: var(--ptk-ink); }
.ptk .is-hidden { display: none !important; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.ptk-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var(--ptk-ink);
	color: #fff;
	border-radius: var(--ptk-r);
	padding: 52px 44px;
	margin-bottom: 32px;
}

/* Fahrzeugfoto, rechts eingeblendet und zum Text hin ausgeblendet. */
.ptk-hero__photo {
	position: absolute;
	inset: 0 0 0 34%;
	background-image: var(--ptk-hero-img);
	background-size: cover;
	background-position: 62% 42%;
	opacity: .78;
	z-index: -2;
	/* Die Werkstattaufnahme ist von Haus aus dunkel und müsste sonst untergehen. */
	filter: brightness(1.22) saturate(1.12) contrast(1.04);
	-webkit-mask-image: linear-gradient(100deg, transparent 0%, rgba(0, 0, 0, .45) 22%, #000 52%);
	mask-image: linear-gradient(100deg, transparent 0%, rgba(0, 0, 0, .45) 22%, #000 52%);
}

/* Wabenraster als Bezug zum Produkt. Wird per Skript gezeichnet. */
.ptk-hero__mesh {
	position: absolute;
	inset: 0;
	z-index: -3;
	opacity: .3;
	overflow: hidden;
}

.ptk-hero__mesh svg { width: 100%; height: 100%; display: block; }

/* Farbschleier, damit der Text auf jedem Bild lesbar bleibt. */
.ptk-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(to top, rgba(17, 48, 63, .8) 0%, rgba(17, 48, 63, .25) 26%, transparent 46%),
		radial-gradient(105% 130% at 4% 16%, rgba(17, 48, 63, .98) 0%, rgba(17, 48, 63, .74) 34%, rgba(17, 48, 63, .08) 82%),
		linear-gradient(100deg, var(--ptk-ink) 0%, rgba(17, 48, 63, .82) 34%, rgba(17, 48, 63, .2) 78%);
	pointer-events: none;
}

/* Schmaler Akzentstreifen oben. */
.ptk-hero::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	z-index: 1;
	background: linear-gradient(90deg, var(--ptk-accent) 0%, #e8b21c 42%, var(--ptk-blue) 100%);
}

.ptk-hero__body { position: relative; z-index: 1; }

.ptk-eyebrow {
	font-family: var(--ptk-mono);
	font-size: 12px;
	font-weight: 300;
	letter-spacing: 1.3px;
	color: rgba(255, 255, 255, .72);
	margin: 0 0 16px;
	text-transform: uppercase;
}

/*
 * Die Klasse allein reicht nicht: .ptk h1 ist spezifischer und färbt die
 * Überschrift sonst dunkelpetrol — auf dem dunklen Kopfbereich unsichtbar.
 */
.ptk .ptk-hero__title {
	color: #fff;
	font-size: clamp(28px, 4.2vw, 44px);
	max-width: 20ch;
	margin-bottom: 10px;
}

.ptk-hero__sub {
	font-family: var(--ptk-mono);
	font-size: 14px;
	font-weight: 300;
	color: var(--ptk-accent);
	letter-spacing: .4px;
	margin-bottom: 18px;
}

.ptk-hero__intro {
	max-width: 62ch;
	color: rgba(255, 255, 255, .84);
	font-size: 16px;
	margin-bottom: 28px;
}

.ptk-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 1px;
	background: rgba(255, 255, 255, .16);
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: var(--ptk-r);
	overflow: hidden;
	margin: 0 0 26px;
	max-width: 680px;
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
}

.ptk-stat {
	background: rgba(12, 37, 49, .74);
	padding: 16px 18px;
	margin: 0;
}

.ptk-stat__value {
	font-family: var(--ptk-mono);
	font-size: 18px;
	font-weight: 600;
	color: #fff;
	margin: 0 0 2px;
}

.ptk-stat__label {
	font-size: 11px;
	letter-spacing: .6px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .58);
	margin: 0;
}

.ptk-trust {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
}

.ptk-trust li {
	font-size: 13.5px;
	color: rgba(255, 255, 255, .8);
	padding-left: 20px;
	position: relative;
}

.ptk-trust li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .55em;
	width: 9px;
	height: 5px;
	border-left: 2px solid var(--ptk-accent);
	border-bottom: 2px solid var(--ptk-accent);
	transform: rotate(-45deg);
}

/* --------------------------------------------------------------------------
   Fertigerlogo am Fuß des Kopfbereichs
   -------------------------------------------------------------------------- */
.ptk-maker {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-top: 26px;
	padding-top: 20px;
	/* Nimmt die Linienfarbe der Kennzahlen auf, damit der Kopf ruhig bleibt. */
	border-top: 1px solid rgba(255, 255, 255, .16);
	/* Dieselbe Breite wie die Kennzahlenleiste: Die Linie fluchtet mit deren
	   Kante, statt quer durch den freien Teil des Fotos zu laufen. */
	max-width: 680px;
}

.ptk-maker__label {
	font-family: var(--ptk-mono);
	font-size: 11px;
	letter-spacing: .8px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .58);
	flex: 0 0 auto;
}

.ptk-maker__mark {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	min-width: 0;
}

.ptk-maker__logo {
	display: block;
	height: 60px;
	width: auto;
	/* Die Datei ist bereits freigestellt und weiß; der Schatten trennt sie
	   vom Foto, falls sie einmal über einer hellen Bildstelle liegt. */
	filter: drop-shadow(0 1px 7px rgba(0, 0, 0, .5));
	opacity: .95;
	transition: opacity .16s ease;
}

/* Ohne Logo bleibt der Name als Schriftzug. */
.ptk-maker__name {
	font-family: var(--ptk-mono);
	font-size: 15px;
	font-weight: 600;
	color: #fff;
}

a.ptk-maker__mark:hover .ptk-maker__logo,
a.ptk-maker__mark:focus-visible .ptk-maker__logo { opacity: 1; }

a.ptk-maker__mark:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 4px;
	border-radius: 4px;
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.ptk-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 396px;
	gap: 32px;
	align-items: start;
	margin: 0;
}

/*
 * Die Vorschau steht im Quelltext vor den Auswahlschritten, damit sie auf
 * schmalen Displays zuerst gelesen wird. Auf breiten Displays bekommen beide
 * ihren Rasterplatz ausdrücklich zugewiesen — Zeile und Spalte. Ohne die
 * Zeilenangabe rückt die automatische Platzierung den Hauptteil in eine zweite
 * Zeile, weil sie hinter der Seitenleiste nicht mehr zurückspringen kann.
 */
.ptk-main { grid-area: 1 / 1; min-width: 0; display: flex; flex-direction: column; gap: 20px; }

.ptk-aside { grid-area: 1 / 2; position: sticky; top: 24px; }

/*
 * Ist die Leiste höher als das Fenster, bliebe ihr unteres Ende beim Kleben
 * unerreichbar — deshalb scrollt sie in dem Fall in sich selbst.
 */
.ptk-aside__inner {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-height: calc(100vh - 48px);
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--ptk-line-strong) transparent;
	padding-right: 2px;
}

/* Vorschau und Zusammenfassung behalten ihre Höhe; gescrollt wird der Container. */
.ptk-aside__inner > * { flex-shrink: 0; }

.ptk-aside__inner::-webkit-scrollbar { width: 8px; }
.ptk-aside__inner::-webkit-scrollbar-track { background: transparent; }

.ptk-aside__inner::-webkit-scrollbar-thumb {
	background: var(--ptk-line-strong);
	border-radius: 100px;
	border: 2px solid #fff;
}

/* --------------------------------------------------------------------------
   Schritte
   -------------------------------------------------------------------------- */
.ptk-step {
	background: var(--ptk-bg);
	border: 1px solid var(--ptk-line);
	border-radius: var(--ptk-r);
	padding: 28px;
}

.ptk-step__head {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	margin-bottom: 20px;
}

.ptk-step__num {
	font-family: var(--ptk-mono);
	font-size: 15px;
	font-weight: 500;
	color: var(--ptk-accent);
	background: #fdf1eb;
	border-radius: var(--ptk-r-sm);
	width: 38px;
	height: 38px;
	display: grid;
	place-items: center;
	flex: none;
}

.ptk-step__title { font-size: 21px; margin-bottom: 3px; }
.ptk-step__sub { font-size: 14px; color: var(--ptk-muted); margin: 0; }

/* --------------------------------------------------------------------------
   Auswahlkarten
   -------------------------------------------------------------------------- */
.ptk-cards { display: grid; gap: 14px; }
.ptk-cards--2 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.ptk-cards--3 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

.ptk-card { display: block; cursor: pointer; margin: 0; }
.ptk-card input { position: absolute; opacity: 0; width: 0; height: 0; }

.ptk-card__inner {
	display: flex;
	flex-direction: column;
	height: 100%;
	position: relative;
	background: var(--ptk-bg);
	border: 1.5px solid var(--ptk-line);
	border-radius: var(--ptk-r);
	overflow: hidden;
	transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.ptk-card:hover .ptk-card__inner { border-color: var(--ptk-line-strong); box-shadow: var(--ptk-shadow); }

.ptk-card input:checked + .ptk-card__inner {
	border-color: var(--ptk-accent);
	background: #fffaf7;
	box-shadow: 0 0 0 3px rgba(242, 125, 82, .13);
}

.ptk-card input:focus-visible + .ptk-card__inner {
	outline: 2px solid var(--ptk-blue);
	outline-offset: 2px;
}

.ptk-card__media {
	display: block;
	aspect-ratio: 4 / 3;
	background: var(--ptk-soft);
	overflow: hidden;
}

.ptk-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .35s ease;
}

.ptk-card:hover .ptk-card__media img { transform: scale(1.035); }

.ptk-card__body { display: block; padding: 16px 18px; flex: 1; }
.ptk-cards--compact .ptk-card__body { padding: 13px 15px; }

/*
 * Das Häkchen liegt oben rechts über dem Inhalt. Bei Karten ohne Bild braucht
 * die erste Textzeile deshalb Platz daneben, sonst läuft sie darunter.
 */
.ptk-card:not(.ptk-card--visual) .ptk-card__title { padding-right: 30px; }
.ptk-card--visual .ptk-card__title { padding-right: 0; }

.ptk-badge {
	display: inline-block;
	font-family: var(--ptk-mono);
	font-size: 10.5px;
	letter-spacing: .8px;
	text-transform: uppercase;
	color: var(--ptk-slate);
	background: var(--ptk-tint);
	border-radius: 4px;
	padding: 3px 8px;
	margin-bottom: 8px;
}

.ptk-card__title {
	display: block;
	font-weight: 600;
	font-size: 16px;
	color: var(--ptk-ink);
	margin-bottom: 4px;
	line-height: 1.3;
}

.ptk-card__text { display: block; font-size: 13.5px; color: var(--ptk-muted); line-height: 1.5; }

.ptk-card__hint {
	display: block;
	font-size: 12.5px;
	color: var(--ptk-blue);
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px dashed var(--ptk-line);
}

.ptk-card__price {
	display: block;
	padding: 12px 18px;
	border-top: 1px solid var(--ptk-line);
	background: var(--ptk-soft);
	font-family: var(--ptk-mono);
	font-size: 17px;
	font-weight: 600;
	color: var(--ptk-ink);
}

.ptk-card__price small {
	display: block;
	font-family: var(--ptk-sans);
	font-size: 11.5px;
	font-weight: 400;
	color: var(--ptk-muted);
	letter-spacing: .3px;
	margin-top: 1px;
}

/* --------------------------------------------------------------------------
   Zahlungsarten — flache Zeilen statt Produktkarten
   -------------------------------------------------------------------------- */
/* Breitere Mindestspalte als bei den Produktkarten: Vier Zahlungsarten teilen
   sich so gleichmäßig auf zwei Reihen, statt als 3+1 auszufransen. */
.ptk-cards--pay { gap: 10px; grid-template-columns: repeat(auto-fit, minmax(265px, 1fr)); }

.ptk-cards--pay .ptk-card__inner {
	flex-direction: row;
	align-items: flex-start;
	gap: 11px;
	padding: 11px 13px;
}

.ptk-cards--pay .ptk-card__body { padding: 0; }

/* Der Auswahlpunkt sitzt vorn in der Zeile, nicht als Häkchen in der Ecke —
   damit entfällt auch der Freiraum, den die Überschrift daneben brauchte. */
.ptk-cards--pay .ptk-card:not(.ptk-card--visual) .ptk-card__title {
	padding-right: 0;
	font-size: 14.5px;
	margin-bottom: 2px;
}

/*
 * Die Erläuterung erscheint nur an der gewählten Zahlungsart — vier
 * gleichzeitig sichtbare Absätze machten den Schritt unnötig lang, und die
 * Bezeichnungen tragen sich selbst. Sie wird dabei nicht aus dem Fluss
 * genommen, sondern nur optisch ausgeblendet: So liest die Sprachausgabe sie
 * bei jeder Option mit, auch wenn sie noch nicht angewählt ist.
 */
.ptk-cards--pay .ptk-card__text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.ptk-cards--pay .ptk-card input:checked + .ptk-card__inner .ptk-card__text {
	position: static;
	width: auto;
	height: auto;
	overflow: visible;
	clip-path: none;
	white-space: normal;
	font-size: 12.5px;
	line-height: 1.45;
	margin-top: 3px;
}

.ptk-card__dot {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin-top: 2px;
	border-radius: 50%;
	border: 1.5px solid var(--ptk-line-strong);
	background: #fff;
	transition: border-color .18s ease, border-width .18s ease;
}

.ptk-card input:checked + .ptk-card__inner .ptk-card__dot {
	border-color: var(--ptk-accent);
	border-width: 5px;
}

.ptk-card__check {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 1.5px solid var(--ptk-line-strong);
	background: rgba(255, 255, 255, .92);
	transition: all .18s ease;
}

.ptk-card input:checked + .ptk-card__inner .ptk-card__check {
	border-color: var(--ptk-accent);
	background: var(--ptk-accent);
}

.ptk-card input:checked + .ptk-card__inner .ptk-card__check::after {
	content: "";
	position: absolute;
	left: 6px;
	top: 6px;
	width: 8px;
	height: 4px;
	border-left: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(-45deg);
}

/* --------------------------------------------------------------------------
   Farbwahl
   -------------------------------------------------------------------------- */
.ptk-colors { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--ptk-line); }
.ptk-colorgroup + .ptk-colorgroup { margin-top: 20px; }

.ptk-label {
	display: block;
	font-family: var(--ptk-mono);
	font-size: 11.5px;
	letter-spacing: .9px;
	text-transform: uppercase;
	color: var(--ptk-slate);
	margin: 0 0 10px;
	font-weight: 500;
	padding: 0;
}

.ptk-swatches { display: flex; flex-wrap: wrap; gap: 8px; }

.ptk-swatch { position: relative; cursor: pointer; margin: 0; }
.ptk-swatch input { position: absolute; opacity: 0; width: 0; height: 0; }

/* Zeigegeräte: kompaktes Farbraster, Name als Tooltip beim Überfahren. */
.ptk-swatch__box {
	display: grid;
	place-items: center;
	border: 1.5px solid var(--ptk-line);
	border-radius: 100px;
	width: 40px;
	height: 40px;
	background: #fff;
	transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
	position: relative;
}

.ptk-swatch__dot {
	display: block;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--ptk-soft);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}

.ptk-swatch__name {
	position: absolute;
	left: 50%;
	bottom: calc(100% + 8px);
	transform: translateX(-50%);
	background: var(--ptk-ink);
	color: #fff;
	font-size: 11.5px;
	white-space: nowrap;
	padding: 4px 9px;
	border-radius: 5px;
	opacity: 0;
	pointer-events: none;
	transition: opacity .15s ease;
	z-index: 5;
}

.ptk-swatch:hover .ptk-swatch__name { opacity: 1; }
.ptk-swatch:hover .ptk-swatch__box { transform: scale(1.06); border-color: var(--ptk-line-strong); }

.ptk-swatch input:checked + .ptk-swatch__box {
	border-color: var(--ptk-ink);
	box-shadow: 0 0 0 3px rgba(17, 48, 63, .14);
}

.ptk-swatch input:focus-visible + .ptk-swatch__box { outline: 2px solid var(--ptk-blue); outline-offset: 2px; }

.ptk-swatch--custom .ptk-swatch__dot {
	background: linear-gradient(135deg, #f27d52 0%, #e8b21c 25%, #2e7d46 50%, #1660b4 75%, #b4241f 100%);
	position: relative;
}

.ptk-swatch--custom .ptk-swatch__dot::after {
	content: "?";
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: #fff;
	font-weight: 700;
	font-size: 13px;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
}

/* Der gewählte Ton steht am Gruppentitel — nötig, sobald die Felder selbst
   keinen Namen mehr tragen, und auch am Zeigegerät die kürzere Auskunft. */
.ptk-label__val { color: var(--ptk-ink); font-weight: 600; letter-spacing: .3px; }
.ptk-label__val:not(:empty)::before { content: "· "; color: var(--ptk-line-strong); }

/* --------------------------------------------------------------------------
   Musterausschnitt bei der Farbwahl
   -------------------------------------------------------------------------- */
/* Am Zeigegerät steht die große Vorschau daneben im Bild — dort wäre die
   Kachel doppelt gemoppelt. Sie erscheint nur, wo die Vorschau wegscrollt. */
.ptk-colorpeek { display: none; }

/*
 * Touch-Geräte: Chips mit ausgeschriebenem Namen kosteten je Farbreihe die
 * halbe Bildschirmhöhe. Stattdessen ein Raster aus reinen Farbfeldern — der
 * Name wandert an den Gruppentitel, die Wirkung zeigt die Kachel darüber.
 */
@media (hover: none), (max-width: 720px) {
	.ptk-colorpeek {
		display: flex;
		align-items: center;
		gap: 13px;
		margin-bottom: 15px;
		padding: 9px;
		border: 1px solid var(--ptk-line);
		border-radius: 10px;
		background: var(--ptk-soft);
	}

	.ptk-colorpeek__tile {
		flex: 0 0 auto;
		width: 82px;
		height: 52px;
		border-radius: 7px;
		overflow: hidden;
		box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .16);
	}

	.ptk-colorpeek__tile svg { display: block; width: 100%; height: 100%; }

	.ptk-colorpeek__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

	.ptk-colorpeek__lead {
		font-family: var(--ptk-mono);
		font-size: 10.5px;
		letter-spacing: .9px;
		text-transform: uppercase;
		color: var(--ptk-muted);
	}

	.ptk-colorpeek__names {
		font-size: 14.5px;
		font-weight: 600;
		color: var(--ptk-ink);
		line-height: 1.3;
	}

	.ptk-swatches {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
		gap: 9px;
	}

	.ptk-swatch__box { width: 100%; height: 44px; border-radius: 11px; }
	.ptk-swatch__dot { width: 26px; height: 26px; }

	/* Für Screenreader bleibt der Name am Feld, sichtbar ist er es nicht mehr. */
	.ptk-swatch__name {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
		opacity: 1;
		background: none;
		transition: none;
	}

	.ptk-swatch:hover .ptk-swatch__box { transform: none; }

	.ptk-swatch input:checked + .ptk-swatch__box {
		border-color: var(--ptk-accent);
		border-width: 2px;
		box-shadow: 0 0 0 3px rgba(242, 125, 82, .18);
	}
}

/* Mit `.ptk` davor, sonst gewinnt der Absatz-Reset in `.ptk p` und der Hinweis
   klebt ohne jeden Abstand unter den Auswahlfeldern. */
.ptk .ptk-note {
	font-size: 12.5px;
	color: var(--ptk-muted);
	line-height: 1.55;
	margin: 24px 0 0;
	padding-left: 14px;
	border-left: 2px solid var(--ptk-line);
}

/* --------------------------------------------------------------------------
   Menge & Optionen
   -------------------------------------------------------------------------- */
.ptk-qty { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ptk-qty .ptk-label { margin: 0; }

.ptk-stepper {
	display: inline-flex;
	align-items: center;
	border: 1.5px solid var(--ptk-line);
	border-radius: var(--ptk-r);
	overflow: hidden;
	background: #fff;
}

.ptk-stepper__btn {
	width: 42px;
	height: 44px;
	border: 0;
	background: var(--ptk-soft);
	color: var(--ptk-ink);
	font-size: 19px;
	line-height: 1;
	cursor: pointer;
	transition: background .15s ease;
	font-family: var(--ptk-sans);
}

.ptk-stepper__btn:hover { background: var(--ptk-tint); }

.ptk-stepper input {
	width: 62px;
	height: 44px;
	border: 0;
	border-left: 1px solid var(--ptk-line);
	border-right: 1px solid var(--ptk-line);
	text-align: center;
	font-family: var(--ptk-mono);
	font-size: 16px;
	font-weight: 600;
	color: var(--ptk-ink);
	background: #fff;
	-moz-appearance: textfield;
	appearance: textfield;
	border-radius: 0;
	padding: 0;
}

.ptk-stepper input::-webkit-outer-spin-button,
.ptk-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.ptk-options { margin-top: 22px; display: flex; flex-direction: column; gap: 10px; }

.ptk-option {
	display: flex;
	align-items: flex-start;
	gap: 13px;
	padding: 14px 16px;
	border: 1.5px solid var(--ptk-line);
	border-radius: var(--ptk-r);
	cursor: pointer;
	transition: border-color .16s ease, background .16s ease;
	margin: 0;
}

.ptk-option:hover { border-color: var(--ptk-line-strong); }
.ptk-option input { position: absolute; opacity: 0; width: 0; height: 0; }
.ptk-option:has(input:checked) { border-color: var(--ptk-accent); background: #fffaf7; }

.ptk-option__box {
	flex: none;
	width: 20px;
	height: 20px;
	border: 1.5px solid var(--ptk-line-strong);
	border-radius: 5px;
	background: #fff;
	margin-top: 2px;
	position: relative;
	transition: all .16s ease;
}

.ptk-option:has(input:checked) .ptk-option__box,
.ptk-consent:has(input:checked) .ptk-option__box {
	background: var(--ptk-accent);
	border-color: var(--ptk-accent);
}

.ptk-option:has(input:checked) .ptk-option__box::after,
.ptk-consent:has(input:checked) .ptk-option__box::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 5px;
	width: 8px;
	height: 4px;
	border-left: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(-45deg);
}

.ptk-option__body { flex: 1; min-width: 0; }
.ptk-option__title { display: block; font-weight: 600; font-size: 14.5px; color: var(--ptk-ink); }
.ptk-option__text { display: block; font-size: 13px; color: var(--ptk-muted); line-height: 1.45; margin-top: 2px; }

.ptk-option__price {
	flex: none;
	font-family: var(--ptk-mono);
	font-size: 12.5px;
	color: var(--ptk-slate);
	white-space: nowrap;
	padding-top: 2px;
}

/* --------------------------------------------------------------------------
   Vorschau / Viewer
   -------------------------------------------------------------------------- */
.ptk-viewer {
	background: var(--ptk-bg);
	border: 1px solid var(--ptk-line);
	border-radius: var(--ptk-r);
	overflow: hidden;
}

.ptk-viewer__tabs { display: flex; border-bottom: 1px solid var(--ptk-line); background: var(--ptk-soft); }

.ptk-tab {
	flex: 1;
	padding: 12px 10px;
	border: 0;
	background: transparent;
	font-family: var(--ptk-mono);
	font-size: 11.5px;
	letter-spacing: .8px;
	text-transform: uppercase;
	color: var(--ptk-muted);
	cursor: pointer;
	border-bottom: 2px solid transparent;
	transition: all .16s ease;
}

.ptk-tab:hover { color: var(--ptk-ink); }
.ptk-tab.is-active { color: var(--ptk-ink); background: #fff; border-bottom-color: var(--ptk-accent); }

.ptk-viewer__stage { padding: 18px; }

.ptk-svgwrap {
	background: var(--ptk-soft);
	border-radius: var(--ptk-r-sm);
	padding: 16px;
	display: grid;
	place-items: center;
	min-height: 300px;
	cursor: grab;
	/* Beim Ziehen soll die Seite nicht mitscrollen. */
	touch-action: none;
	-webkit-user-select: none;
	user-select: none;
}

.ptk-svgwrap:focus-visible { outline: 2px solid var(--ptk-blue); outline-offset: 2px; }
.ptk-svgwrap.is-turning { cursor: grabbing; }
.ptk-svgwrap svg { width: 100%; height: auto; max-height: 380px; display: block; pointer-events: none; }

/* Leiste unter der Darstellung: Bedienhinweis und Rücksetzen */
.ptk-viewer__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: 8px;
}

.ptk-viewer__drag {
	font-family: var(--ptk-mono);
	font-size: 11px;
	letter-spacing: .6px;
	text-transform: uppercase;
	color: var(--ptk-muted);
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.ptk-viewer__drag::before {
	content: "";
	width: 14px;
	height: 10px;
	flex: none;
	background: var(--ptk-muted);
	/* zwei Pfeilspitzen nach links und rechts */
	-webkit-mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
	mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
	-webkit-mask-size: 5px 2px, 14px 2px;
	mask-size: 5px 2px, 14px 2px;
	-webkit-mask-position: 0 4px, 0 4px;
	mask-position: 0 4px, 0 4px;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	border-left: 3px solid transparent;
	border-right: 3px solid transparent;
	box-sizing: content-box;
}

.ptk-viewer__reset {
	border: 0;
	background: none;
	padding: 3px 0;
	font-family: var(--ptk-sans);
	font-size: 12px;
	color: var(--ptk-blue);
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ptk-viewer__reset:hover { color: var(--ptk-ink); }

.ptk-viewer__hint { font-size: 11.5px; color: var(--ptk-muted); margin: 8px 0 0; line-height: 1.45; }

.ptk-photo { margin: 0; }

.ptk-photo img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--ptk-r-sm);
	background: var(--ptk-soft);
	display: block;
}

.ptk-photo figcaption { font-size: 12px; color: var(--ptk-muted); margin-top: 8px; line-height: 1.45; }

.ptk-thumbs { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

.ptk-thumbs button {
	width: 56px;
	height: 56px;
	padding: 0;
	border: 1.5px solid var(--ptk-line);
	border-radius: var(--ptk-r-sm);
	overflow: hidden;
	background: var(--ptk-soft);
	cursor: pointer;
	transition: border-color .16s ease;
}

.ptk-thumbs button:hover { border-color: var(--ptk-line-strong); }
.ptk-thumbs button.is-active { border-color: var(--ptk-accent); box-shadow: 0 0 0 2px rgba(242, 125, 82, .18); }
.ptk-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --------------------------------------------------------------------------
   Zusammenfassung
   -------------------------------------------------------------------------- */
.ptk-summary {
	background: var(--ptk-bg);
	border: 1px solid var(--ptk-line);
	border-radius: var(--ptk-r);
	padding: 22px;
}

.ptk-summary__title {
	font-family: var(--ptk-mono);
	font-size: 11.5px;
	letter-spacing: .9px;
	text-transform: uppercase;
	color: var(--ptk-slate);
	font-weight: 500;
	margin-bottom: 14px;
}

.ptk-summary__list { margin: 0 0 18px; padding: 0; font-size: 13.5px; }

.ptk-summary__list > div {
	display: flex;
	justify-content: space-between;
	gap: 14px;
	padding: 7px 0;
	border-bottom: 1px solid var(--ptk-soft);
}

.ptk-summary__list > div:last-child { border-bottom: 0; }
.ptk-summary__list dt { color: var(--ptk-muted); flex: none; margin: 0; font-weight: 400; }
.ptk-summary__list dd { margin: 0; text-align: right; color: var(--ptk-ink); font-weight: 500; min-width: 0; }

.ptk-summary__swatches { display: inline-flex; gap: 5px; vertical-align: middle; margin-right: 6px; }

.ptk-summary__swatches i {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 1px solid rgba(0, 0, 0, .18);
	display: inline-block;
}

.ptk-price { border-top: 1.5px solid var(--ptk-line); padding-top: 16px; }
.ptk-price__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.ptk-price__label { font-size: 14px; color: var(--ptk-slate); font-weight: 500; }

.ptk-price__value {
	font-family: var(--ptk-mono);
	font-size: 27px;
	font-weight: 600;
	color: var(--ptk-ink);
	letter-spacing: -0.5px;
	white-space: nowrap;
}

.ptk-price__meta { font-size: 11.5px; color: var(--ptk-muted); margin: 5px 0 0; line-height: 1.45; }

.ptk-disclaimer {
	font-size: 11.5px;
	color: var(--ptk-muted);
	line-height: 1.5;
	margin: 14px 0 0;
	padding: 10px 12px;
	background: var(--ptk-soft);
	border-radius: var(--ptk-r-sm);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.ptk-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--ptk-sans);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	padding: 13px 26px;
	border-radius: var(--ptk-r);
	border: 1.5px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: background .16s ease, border-color .16s ease, transform .1s ease, opacity .16s ease;
}

.ptk-btn:active { transform: translateY(1px); }
.ptk-btn--primary { background: var(--ptk-accent); color: #fff; }
.ptk-btn--primary:hover { background: var(--ptk-accent-dark); color: #fff; }
.ptk-btn--ghost { background: #fff; color: var(--ptk-ink); border-color: var(--ptk-line-strong); }
.ptk-btn--ghost:hover { background: var(--ptk-soft); border-color: var(--ptk-slate); color: var(--ptk-ink); }
.ptk-btn--block { width: 100%; margin-top: 14px; }
.ptk-btn--sm { padding: 10px 18px; font-size: 13.5px; }
.ptk-btn[disabled] { opacity: .55; cursor: not-allowed; }

/* --------------------------------------------------------------------------
   Formular
   -------------------------------------------------------------------------- */
.ptk-fieldset { border: 0; padding: 0; margin: 0 0 26px; }
.ptk-fieldset legend { padding: 0; }

.ptk-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 15px; }
.ptk-field { grid-column: span 6; }
.ptk-field--half { grid-column: span 3; }
.ptk-field--third { grid-column: span 2; }
.ptk-field--twothird { grid-column: span 4; }
.ptk-field--wide { grid-column: span 6; }

.ptk-field label {
	display: block;
	font-size: 13px;
	font-weight: 500;
	color: var(--ptk-slate);
	margin-bottom: 6px;
}

.ptk-req { color: var(--ptk-accent); }
.ptk-opt { color: var(--ptk-muted); font-weight: 400; font-size: 12px; }

.ptk-field input,
.ptk-field select,
.ptk-field textarea {
	width: 100%;
	font-family: var(--ptk-sans);
	font-size: 15px;
	color: var(--ptk-text);
	background: #fff;
	border: 1.5px solid var(--ptk-line);
	border-radius: var(--ptk-r);
	padding: 11px 14px;
	transition: border-color .16s ease, box-shadow .16s ease;
	line-height: 1.4;
	max-width: 100%;
}

.ptk-field textarea { resize: vertical; min-height: 96px; }

.ptk-field input:focus,
.ptk-field select:focus,
.ptk-field textarea:focus {
	outline: 0;
	border-color: var(--ptk-blue);
	box-shadow: 0 0 0 3px rgba(42, 111, 151, .12);
}

.ptk-field.has-error input,
.ptk-field.has-error select,
.ptk-field.has-error textarea { border-color: var(--ptk-err); }

.ptk-field__error { display: block; font-size: 12px; color: var(--ptk-err); margin-top: 5px; }

.ptk-consent {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-top: 20px;
	font-size: 13.5px;
	color: var(--ptk-text);
	line-height: 1.5;
	cursor: pointer;
}

.ptk-consent input { position: absolute; opacity: 0; width: 0; height: 0; }
.ptk-consent.has-error .ptk-option__box { border-color: var(--ptk-err); }

.ptk-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.ptk-submit {
	margin-top: 26px;
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
}

.ptk-submit__meta { font-size: 13px; color: var(--ptk-muted); margin: 0; }
.ptk-submit__meta strong { color: var(--ptk-ink); font-family: var(--ptk-mono); }

.ptk-alert {
	margin-top: 18px;
	padding: 13px 16px;
	border-radius: var(--ptk-r);
	font-size: 13.5px;
	background: #fdf0ef;
	border: 1px solid #f3cdcb;
	color: #8f1c18;
}

.ptk-success {
	background: var(--ptk-tint);
	border: 1px solid #c6dce9;
	border-radius: var(--ptk-r);
	padding: 40px 32px;
	text-align: center;
}

.ptk-success__icon {
	width: 54px;
	height: 54px;
	margin: 0 auto 18px;
	border-radius: 50%;
	background: var(--ptk-ok);
	color: #fff;
	display: grid;
	place-items: center;
	font-size: 26px;
	line-height: 1;
}

.ptk-success h2 { font-size: 24px; margin-bottom: 10px; }
.ptk-success p { color: var(--ptk-slate); max-width: 52ch; margin: 0 auto 22px; }
.ptk-success .ptk-summary__list { max-width: 420px; margin: 0 auto; text-align: left; }

/* --------------------------------------------------------------------------
   Zusammenfassung vor dem Absenden (ersetzt auf schmalen Displays die Seitenleiste)
   -------------------------------------------------------------------------- */
.ptk-recap {
	display: none;
	margin-top: 24px;
	padding: 18px;
	background: var(--ptk-soft);
	border: 1px solid var(--ptk-line);
	border-radius: var(--ptk-r);
}

.ptk-recap__title {
	font-family: var(--ptk-mono);
	font-size: 11.5px;
	letter-spacing: .9px;
	text-transform: uppercase;
	color: var(--ptk-slate);
	font-weight: 500;
	margin-bottom: 12px;
}

.ptk-recap .ptk-summary__list { margin-bottom: 14px; }
.ptk-recap .ptk-summary__list > div { border-bottom-color: #e5eaed; }

.ptk-recap__price {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	padding-top: 13px;
	border-top: 1.5px solid var(--ptk-line);
}

.ptk-recap__price span { font-size: 14px; color: var(--ptk-slate); font-weight: 500; }

.ptk-recap__price strong {
	font-family: var(--ptk-mono);
	font-size: 24px;
	font-weight: 600;
	color: var(--ptk-ink);
	white-space: nowrap;
}

.ptk-recap__meta { font-size: 11.5px; color: var(--ptk-muted); margin: 5px 0 0; line-height: 1.45; }

/* --------------------------------------------------------------------------
   Preisleiste am unteren Rand
   Klebt innerhalb von .ptk-configurator, damit sie beim Weiterlesen in den
   Textteil und die Fragen nicht mitwandert.
   -------------------------------------------------------------------------- */
.ptk-configurator { position: relative; }

.ptk-bottombar {
	display: none;
	position: sticky;
	bottom: 0;
	z-index: 20;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 14px;
	background: rgba(255, 255, 255, .96);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid var(--ptk-line);
	border-radius: var(--ptk-r) var(--ptk-r) 0 0;
	box-shadow: 0 -6px 24px rgba(17, 48, 63, .1);
}

/* Sobald das Formular selbst im Bild ist, weicht die Leiste dem Absende-Button. */
.ptk-bottombar.is-tucked {
	transform: translateY(120%);
	opacity: 0;
	pointer-events: none;
	transition: transform .22s ease, opacity .18s ease;
}

.ptk-bottombar { transition: transform .22s ease, opacity .18s ease; }

.ptk-bottombar__info { min-width: 0; }

.ptk-bottombar__label {
	display: block;
	font-size: 11px;
	color: var(--ptk-muted);
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ptk-bottombar__price { font-family: var(--ptk-mono); font-size: 19px; font-weight: 600; color: var(--ptk-ink); }

/* --------------------------------------------------------------------------
   Redaktioneller Inhalt
   -------------------------------------------------------------------------- */
.ptk-content, .ptk-faq { margin-top: 56px; }
/* Die Klasse allein verlöre gegen den Reset in `.ptk h2` — daher mit `.ptk`
   davor, sonst klebt der Fließtext an der Überschrift. */
.ptk .ptk-content__title { font-size: clamp(23px, 3vw, 31px); margin-bottom: 26px; }
.ptk-content > p { color: var(--ptk-text); }

.ptk-variantdoc {
	margin-top: 40px;
	padding-top: 34px;
	border-top: 1px solid var(--ptk-line);
}

.ptk-variantdoc h3 { font-size: 22px; margin-bottom: 16px; }
.ptk-variantdoc__grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.ptk-variantdoc__media { display: grid; gap: 14px; }
.ptk-variantdoc__media figure { margin: 0; }

.ptk-variantdoc__media img {
	width: 100%;
	height: auto;
	border-radius: var(--ptk-r);
	display: block;
	background: var(--ptk-soft);
}

.ptk-variantdoc__media figcaption { font-size: 12px; color: var(--ptk-muted); margin-top: 7px; }

.ptk-checklist { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 9px; }

.ptk-checklist li {
	position: relative;
	padding-left: 26px;
	font-size: 14.5px;
	color: var(--ptk-text);
}

.ptk-checklist li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: .5em;
	width: 10px;
	height: 5px;
	border-left: 2px solid var(--ptk-accent);
	border-bottom: 2px solid var(--ptk-accent);
	transform: rotate(-45deg);
}

.ptk-spec { margin-top: 44px; }
.ptk-spec h3 { font-size: 20px; margin-bottom: 14px; }

.ptk-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }

.ptk-table th,
.ptk-table td {
	text-align: left;
	padding: 11px 14px;
	border-bottom: 1px solid var(--ptk-line);
	vertical-align: top;
}

.ptk-table th { width: 34%; color: var(--ptk-slate); font-weight: 500; background: var(--ptk-soft); }
.ptk-table tr:last-child th, .ptk-table tr:last-child td { border-bottom: 0; }

.ptk-faq__item {
	border: 1px solid var(--ptk-line);
	border-radius: var(--ptk-r);
	margin-bottom: 10px;
	overflow: hidden;
	background: #fff;
}

.ptk-faq__item summary {
	padding: 16px 46px 16px 20px;
	cursor: pointer;
	font-weight: 600;
	font-size: 15.5px;
	color: var(--ptk-ink);
	list-style: none;
	position: relative;
	transition: background .15s ease;
}

.ptk-faq__item summary::-webkit-details-marker { display: none; }
.ptk-faq__item summary:hover { background: var(--ptk-soft); }

.ptk-faq__item summary::after {
	content: "";
	position: absolute;
	right: 20px;
	top: 50%;
	width: 9px;
	height: 9px;
	border-right: 2px solid var(--ptk-accent);
	border-bottom: 2px solid var(--ptk-accent);
	transform: translateY(-65%) rotate(45deg);
	transition: transform .2s ease;
}

.ptk-faq__item[open] summary::after { transform: translateY(-25%) rotate(225deg); }
.ptk-faq__answer { padding: 0 20px 18px; font-size: 14.5px; color: var(--ptk-text); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
	.ptk-layout { grid-template-columns: 1fr; }
	.ptk-main { grid-area: auto; }
	.ptk-aside { grid-area: auto; position: static; order: -1; }
	.ptk-aside__inner { max-height: none; overflow-y: visible; padding-right: 0; }
	.ptk-aside__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
	.ptk-variantdoc__grid { grid-template-columns: 1fr; gap: 22px; }
	.ptk-variantdoc__media { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}

@media (max-width: 720px) {
	.ptk-hero { padding: 28px 20px; border-radius: var(--ptk-r); }
	.ptk-hero__intro { margin-bottom: 22px; }

	.ptk-maker { gap: 13px; margin-top: 20px; padding-top: 16px; }
	.ptk-maker__logo { height: 46px; }

	/*
	 * Auf schmalen Displays liegt der Text über der ganzen Breite. Das Foto
	 * tritt deshalb zurück und wird nur noch als Andeutung sichtbar.
	 */
	.ptk-hero__photo { inset: 0; opacity: .5; }

	/*
	 * Nur eine Schleierlage: Zwei übereinandergelegte Verläufe multiplizieren
	 * sich und würden das Foto vollständig zudecken. Der Text steht hier über
	 * der ganzen Breite, deshalb bleibt vom Bild bewusst nur eine Andeutung.
	 */
	.ptk-hero::after {
		background: linear-gradient(to top,
			rgba(17, 48, 63, .96) 0%,
			rgba(17, 48, 63, .84) 42%,
			rgba(17, 48, 63, .72) 100%);
	}
	.ptk-stats { grid-template-columns: 1fr 1fr; margin-bottom: 20px; }
	.ptk-stat { padding: 13px 14px; }
	.ptk-stat__value { font-size: 16px; }
	.ptk-trust { gap: 6px 16px; }
	.ptk-trust li { font-size: 13px; }

	.ptk-step { padding: 20px 18px; }
	.ptk-aside__inner { grid-template-columns: 1fr; }
	.ptk-svgwrap { min-height: 240px; }
	.ptk-svgwrap svg { max-height: 300px; }
	.ptk-summary { display: none; }
	.ptk-recap { display: block; }
	.ptk-bottombar { display: flex; }

	/*
	 * Die Vorschau rutscht zwischen Ausführung und Farbwahl. Dort ändert sie
	 * sich sichtbar mit jeder Auswahl, statt weit oben unbeachtet zu stehen.
	 * display:contents hebt die Zwischenebene auf, damit sich Schritte und
	 * Vorschau im selben Raster sortieren lassen.
	 */
	.ptk-layout { gap: 18px; }
	.ptk-main { display: contents; }

	/*
	 * Ohne die Zwischenebene tragen die Schritte selbst die Rasterzelle. Grid-
	 * Elemente haben von Haus aus min-width:auto und würden sich am breitesten
	 * Inhalt aufziehen, statt ihn umbrechen zu lassen. display:contents lässt
	 * die DOM-Struktur unberührt, deshalb müssen die Schritte über .ptk-main
	 * adressiert werden.
	 */
	.ptk-layout > *,
	.ptk-main > * { min-width: 0; }

	.ptk-aside { order: 3; }
	.ptk-main > [data-ptk-step="1"] { order: 1; }
	.ptk-main > [data-ptk-step="2"] { order: 2; }
	.ptk-main > [data-ptk-step="3"] { order: 4; }
	.ptk-main > [data-ptk-step="4"] { order: 5; }
	.ptk-main > [data-ptk-step="5"] { order: 6; }
	.ptk-main > [data-ptk-step="6"] { order: 7; padding-bottom: 84px; }
	.ptk-main > .ptk-success { order: 8; }
	.ptk-field--half, .ptk-field--third, .ptk-field--twothird { grid-column: span 6; }
	.ptk-price__value { font-size: 24px; }
	.ptk-table th { width: 42%; }
	.ptk-submit { flex-direction: column; align-items: stretch; gap: 12px; }
	.ptk-submit .ptk-btn { width: 100%; }
	.ptk-submit__meta { text-align: center; }
	.ptk-step__head { gap: 13px; }
	.ptk-step__title { font-size: 19px; }
	.ptk-variantdoc__media { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Touch-Bedienung
   Fingerkuppen brauchen rund 44 px Zielfläche; außerdem zoomt iOS Safari beim
   Fokussieren jedes Feldes, dessen Schrift kleiner als 16 px ist.
   -------------------------------------------------------------------------- */
@media (hover: none), (max-width: 720px) {
	.ptk-field input,
	.ptk-field select,
	.ptk-field textarea {
		font-size: 16px;
		padding: 12px 14px;
	}

	.ptk-tab { min-height: 48px; font-size: 12px; }

	.ptk-stepper__btn { width: 52px; height: 50px; font-size: 22px; }
	.ptk-stepper input { height: 50px; width: 70px; font-size: 17px; }

	.ptk-thumbs button { width: 62px; height: 62px; }

	.ptk-option { padding: 15px 16px; }
	.ptk-consent { padding: 6px 0; align-items: center; }
	.ptk-consent .ptk-option__box { width: 24px; height: 24px; margin-top: 0; }
	.ptk-consent:has(input:checked) .ptk-option__box::after { left: 7px; top: 7px; }

	.ptk-btn { padding: 14px 24px; }
	.ptk-btn--sm { padding: 13px 18px; }

	.ptk-faq__item summary { padding-top: 18px; padding-bottom: 18px; }

	.ptk-viewer__reset { padding: 14px 4px; font-size: 13px; }
	.ptk-viewer__bar { margin-top: 4px; }

	/* Kein blaues Aufblitzen beim Antippen — der Auswahlzustand zeigt es ohnehin. */
	.ptk-card, .ptk-swatch, .ptk-option, .ptk-tab, .ptk-btn, .ptk-thumbs button, .ptk-stepper__btn {
		-webkit-tap-highlight-color: rgba(17, 48, 63, .06);
	}
}

/* Sprungziel nicht unter einem klebenden Seitenkopf verstecken. */
.ptk-step { scroll-margin-top: 90px; }

@media (prefers-reduced-motion: reduce) {
	.ptk *, .ptk *::before, .ptk *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

@media print {
	.ptk-bottombar, .ptk-btn, .ptk-viewer__tabs { display: none !important; }
	.ptk-layout { grid-template-columns: 1fr; }
}