/* ==========================================================================
   TERGIMUS — Produktseiten Design-System
   Pilot: PUREHAND Classic (10363)
   Alles ist unter .tg-produkt gekapselt, damit nichts anderes betroffen ist.
   ========================================================================== */

.tg-produkt {
	--tg-accent: #4fb3c2;
	--tg-accent-soft: #eaf6f8;
	--tg-ink: #1c2b30;
	--tg-ink-soft: #5a6b70;
	--tg-line: #e2e8ea;
	--tg-bg-alt: #f5f7f8;

	/* Abstands-Skala — skaliert selbst zwischen Handy und Desktop */
	--tg-s1: 8px;
	--tg-s2: 16px;
	--tg-s3: clamp(20px, 3vw, 28px);
	--tg-s4: clamp(28px, 4.5vw, 44px);
	--tg-s5: clamp(40px, 7vw, 72px);
	--tg-s6: clamp(56px, 10vw, 104px);

	--tg-measure: 68ch;
	--tg-max: 1180px;
}

/* --------------------------------------------------------------------------
   Sektion — der Grundbaustein. Ein Rhythmus für die ganze Seite.
   Typografie sitzt bewusst hier und nicht auf dem Body, damit Kopf-, Fuss-
   und Shopbereiche der Seite unberuehrt bleiben.
   -------------------------------------------------------------------------- */
.tg-produkt .tg-sec {
	padding-block: var(--tg-s6);
	padding-inline: var(--tg-s3);
	color: var(--tg-ink);
	font-size: clamp(15px, 1.05vw, 17px);
	line-height: 1.75;
}

.tg-produkt .tg-sec > .e-con-inner,
.tg-produkt .tg-sec-inner {
	max-width: var(--tg-max);
	margin-inline: auto;
	width: 100%;
}

/* Wechselnder Hintergrund gibt der langen Seite einen sichtbaren Takt */
.tg-produkt .tg-sec--alt {
	background-color: var(--tg-bg-alt);
}

.tg-produkt .tg-sec--tight {
	padding-block: var(--tg-s5);
}

/* --------------------------------------------------------------------------
   Sektions-Kopf: kleines Icon + gesperrte Versalien, darunter feine Linie
   -------------------------------------------------------------------------- */
.tg-produkt .tg-label {
	display: flex;
	align-items: center;
	gap: var(--tg-s2);
	margin: 0 0 var(--tg-s4);
	padding-bottom: var(--tg-s2);
	border-bottom: 1px solid var(--tg-line);
}

.tg-produkt .tg-label svg {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	stroke: var(--tg-accent);
	fill: none;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.tg-produkt .tg-label h2,
.tg-produkt .tg-label h3 {
	margin: 0;
	font-size: clamp(13px, 1.4vw, 15px);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1.3;
	color: var(--tg-ink);
}

/* Große Aussage-Überschrift (nicht die Sektions-Marke) */
.tg-produkt .tg-headline {
	margin: 0 0 var(--tg-s3);
	font-size: clamp(24px, 3.4vw, 38px);
	line-height: 1.22;
	font-weight: 600;
	letter-spacing: -0.01em;
	max-width: 20ch;
}

.tg-produkt .tg-sub {
	margin: 0 0 var(--tg-s2);
	font-size: clamp(15px, 1.3vw, 17px);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--tg-ink);
}

/* --------------------------------------------------------------------------
   Fließtext — begrenzte Zeilenlänge, das ist der halbe "ruhige" Eindruck
   -------------------------------------------------------------------------- */
.tg-produkt .tg-text {
	max-width: var(--tg-measure);
}

.tg-produkt .tg-text p {
	margin: 0 0 var(--tg-s3);
	color: var(--tg-ink-soft);
}

.tg-produkt .tg-text p:last-child {
	margin-bottom: 0;
}

.tg-produkt .tg-text strong {
	color: var(--tg-ink);
	font-weight: 600;
}

.tg-produkt .tg-text a,
.tg-produkt .tg-note a,
.tg-produkt .tg-spec a {
	color: var(--tg-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Aufzählung mit Häkchen statt Punkt */
.tg-produkt .tg-list {
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: var(--tg-measure);
}

.tg-produkt .tg-list li {
	position: relative;
	padding-left: 30px;
	margin-bottom: var(--tg-s2);
	color: var(--tg-ink-soft);
}

.tg-produkt .tg-list li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 0.55em;
	width: 11px;
	height: 6px;
	border-left: 2px solid var(--tg-accent);
	border-bottom: 2px solid var(--tg-accent);
	transform: rotate(-45deg);
}

.tg-produkt .tg-list li:last-child {
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Zwei Spalten — Bild + Text, bricht sauber auf eine Spalte um
   -------------------------------------------------------------------------- */
.tg-produkt .tg-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(28px, 5vw, 72px);
	align-items: center;
}

.tg-produkt .tg-split--media-right .tg-split-media {
	order: 2;
}

.tg-produkt .tg-split-media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 10px;
}

@media (max-width: 900px) {
	.tg-produkt .tg-split {
		grid-template-columns: 1fr;
	}
	.tg-produkt .tg-split--media-right .tg-split-media {
		order: 0;
	}
}

/* --------------------------------------------------------------------------
   Vertrauens-Siegel
   -------------------------------------------------------------------------- */
.tg-produkt .tg-badges {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--tg-s4) var(--tg-s3);
	margin-top: var(--tg-s4);
}

.tg-produkt .tg-badge {
	text-align: center;
}

.tg-produkt .tg-badge img {
	width: 78px;
	height: 78px;
	object-fit: contain;
	margin: 0 auto var(--tg-s2);
	display: block;
}

.tg-produkt .tg-badge span {
	display: block;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--tg-ink);
}

@media (max-width: 600px) {
	.tg-produkt .tg-badges {
		grid-template-columns: repeat(2, 1fr);
	}
	/* laengere Siegelnamen sollen nicht an den Rand stossen */
	.tg-produkt .tg-badge span {
		font-size: 11px;
		letter-spacing: 0.04em;
		hyphens: auto;
	}
	.tg-produkt .tg-badge img {
		width: 68px;
		height: 68px;
	}
}

/* --------------------------------------------------------------------------
   Karten (Einsatzgruppen)
   -------------------------------------------------------------------------- */
.tg-produkt .tg-cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--tg-s3);
}

.tg-produkt .tg-card {
	background: #fff;
	border: 1px solid var(--tg-line);
	border-radius: 12px;
	padding: var(--tg-s4);
}

.tg-produkt .tg-card h3 {
	margin: 0 0 var(--tg-s1);
	font-size: clamp(17px, 1.6vw, 20px);
	font-weight: 600;
	line-height: 1.35;
}

.tg-produkt .tg-card p {
	margin: 0;
	color: var(--tg-ink-soft);
}

.tg-produkt .tg-card-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	margin-bottom: var(--tg-s2);
	border-radius: 50%;
	background: var(--tg-accent-soft);
	color: var(--tg-accent);
	font-size: 15px;
	font-weight: 700;
}

/* Vier Karten mit Bild — fuer Produkte mit eigenem Bildmaterial */
.tg-produkt .tg-cards--vier {
	grid-template-columns: repeat(4, 1fr);
}

.tg-produkt .tg-card--bild {
	padding: 0;
	overflow: hidden;
}

.tg-produkt .tg-card--bild img {
	display: block;
	width: 100%;
	height: 190px;
	object-fit: cover;
}

.tg-produkt .tg-card--bild h3,
.tg-produkt .tg-card--bild p {
	padding-inline: var(--tg-s3);
}

.tg-produkt .tg-card--bild h3 {
	margin-top: var(--tg-s3);
	font-size: clamp(15px, 1.3vw, 17px);
}

.tg-produkt .tg-card--bild p {
	padding-bottom: var(--tg-s3);
	font-size: 14px;
}

@media (max-width: 1100px) {
	.tg-produkt .tg-cards--vier {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 780px) {
	.tg-produkt .tg-cards {
		grid-template-columns: 1fr;
	}
	.tg-produkt .tg-cards--vier {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 520px) {
	.tg-produkt .tg-cards--vier {
		grid-template-columns: 1fr;
	}
	.tg-produkt .tg-card--bild img {
		height: 170px;
	}
}

/* Kleingedruckter Zusatz unter Tabellen */
.tg-produkt .tg-hinweis {
	margin-top: var(--tg-s2);
	font-size: 13px;
	color: var(--tg-ink-soft);
	max-width: var(--tg-measure);
}

.tg-produkt .tg-hinweis a {
	color: var(--tg-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Anwendungsschritte
   -------------------------------------------------------------------------- */
.tg-produkt .tg-steps {
	list-style: none;
	counter-reset: tg-step;
	margin: 0;
	padding: 0;
	max-width: var(--tg-measure);
}

.tg-produkt .tg-steps li {
	counter-increment: tg-step;
	position: relative;
	padding-left: 58px;
	padding-bottom: var(--tg-s4);
	color: var(--tg-ink-soft);
}

.tg-produkt .tg-steps li::before {
	content: counter(tg-step);
	position: absolute;
	left: 0;
	top: -2px;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #fff;
	border: 1px solid var(--tg-line);
	color: var(--tg-accent);
	font-size: 15px;
	font-weight: 700;
}

/* durchgehende Linie zwischen den Schritten */
.tg-produkt .tg-steps li::after {
	content: "";
	position: absolute;
	left: 18px;
	top: 38px;
	bottom: 8px;
	width: 1px;
	background: var(--tg-line);
}

.tg-produkt .tg-steps li:last-child {
	padding-bottom: 0;
}

.tg-produkt .tg-steps li:last-child::after {
	display: none;
}

/* Text, der auf eine Schrittfolge oder Tabelle folgt, braucht Luft davor */
.tg-produkt .elementor-widget-html + .elementor-widget-text-editor {
	margin-top: var(--tg-s4);
}

/* Einspaltige Sektion: gleiche Breite wie die Textspalte, kein Grid */
.tg-produkt .tg-einspaltig {
	display: block;
}

/* --------------------------------------------------------------------------
   Hinweis-Kasten
   -------------------------------------------------------------------------- */
.tg-produkt .tg-note {
	margin-top: var(--tg-s4);
	padding: var(--tg-s3) var(--tg-s4);
	background: var(--tg-accent-soft);
	border-left: 3px solid var(--tg-accent);
	border-radius: 0 8px 8px 0;
	max-width: var(--tg-measure);
}

.tg-produkt .tg-note p {
	margin: 0;
	color: var(--tg-ink);
}

/* --------------------------------------------------------------------------
   Spezifikations-Tabelle (Zusammensetzung, Produktdetails)
   -------------------------------------------------------------------------- */
.tg-produkt .tg-spec {
	width: 100%;
	max-width: 820px;
	border-collapse: collapse;
}

/* Produktdetails laufen einspaltig ueber die volle Textbreite */
.tg-produkt .tg-spec--breit {
	max-width: 980px;
}

.tg-produkt .tg-spec--breit th {
	width: 26%;
}

.tg-produkt .tg-spec th,
.tg-produkt .tg-spec td {
	text-align: left;
	padding: var(--tg-s3) var(--tg-s2);
	border-bottom: 1px solid var(--tg-line);
	vertical-align: top;
}

.tg-produkt .tg-spec th {
	width: 38%;
	font-weight: 600;
	color: var(--tg-ink);
}

.tg-produkt .tg-spec td {
	color: var(--tg-ink-soft);
}

.tg-produkt .tg-spec tr:last-child th,
.tg-produkt .tg-spec tr:last-child td {
	border-bottom: 0;
}

@media (max-width: 600px) {
	.tg-produkt .tg-spec th,
	.tg-produkt .tg-spec td {
		display: block;
		width: 100%;
		padding-inline: 0;
	}
	.tg-produkt .tg-spec th {
		border-bottom: 0;
		padding-bottom: 4px;
	}
	.tg-produkt .tg-spec td {
		padding-top: 0;
	}
}

/* --------------------------------------------------------------------------
   Ausklappbarer Block (Sicherheitshinweise)
   -------------------------------------------------------------------------- */
.tg-produkt .tg-acc {
	max-width: var(--tg-measure);
	border-top: 1px solid var(--tg-line);
	border-bottom: 1px solid var(--tg-line);
}

.tg-produkt .tg-acc summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--tg-s2);
	padding: var(--tg-s3) 0;
	cursor: pointer;
	list-style: none;
	font-weight: 600;
	color: var(--tg-ink);
}

.tg-produkt .tg-acc summary::-webkit-details-marker {
	display: none;
}

.tg-produkt .tg-acc summary::after {
	content: "";
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	border-right: 2px solid var(--tg-accent);
	border-bottom: 2px solid var(--tg-accent);
	transform: rotate(45deg);
	transition: transform 0.2s ease;
}

.tg-produkt .tg-acc[open] summary::after {
	transform: rotate(-135deg);
}

.tg-produkt .tg-acc-body {
	padding-bottom: var(--tg-s3);
}

/* --------------------------------------------------------------------------
   Abschluss-Aufruf
   -------------------------------------------------------------------------- */
.tg-produkt .tg-cta {
	text-align: center;
	max-width: 640px;
	margin-inline: auto;
}

.tg-produkt .tg-cta p {
	margin: 0 0 var(--tg-s3);
	color: var(--tg-ink-soft);
}

.tg-produkt .tg-btn {
	display: inline-block;
	padding: 14px 30px;
	margin: 0 6px 10px;
	border-radius: 40px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-decoration: none;
	transition: opacity 0.2s ease;
	min-height: 44px;
}

.tg-produkt .tg-btn--solid {
	background: var(--tg-accent);
	color: #fff;
}

.tg-produkt .tg-btn--ghost {
	background: transparent;
	color: var(--tg-ink);
	border: 1px solid var(--tg-line);
}

.tg-produkt .tg-btn:hover {
	opacity: 0.85;
}

/* --------------------------------------------------------------------------
   Ankernavigation — klebt beim Scrollen, auf dem Handy horizontal scrollbar
   -------------------------------------------------------------------------- */
.tg-produkt .tg-nav {
	position: sticky;
	top: 0;
	z-index: 90;
	background: rgba(255, 255, 255, 0.96);
	backdrop-filter: blur(8px);
	border-top: 1px solid var(--tg-line);
	border-bottom: 1px solid var(--tg-line);
	margin-bottom: 0;
}

.tg-produkt .tg-nav ul {
	display: flex;
	flex-wrap: nowrap; /* sonst faellt der letzte Punkt in die naechste Zeile */
	gap: clamp(16px, 3vw, 42px);
	justify-content: center;
	align-items: stretch;
	margin: 0;
	padding: 0 var(--tg-s3);
	list-style: none;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

/* Das Theme gibt Listenpunkten eigene Abstaende — hier zuruecksetzen */
.tg-produkt .tg-nav li {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tg-produkt .tg-nav li::before,
.tg-produkt .tg-nav li::marker {
	content: none;
}

.tg-produkt .tg-nav ul::-webkit-scrollbar {
	display: none;
}

.tg-produkt .tg-nav a {
	display: block;
	padding: 16px 0;
	white-space: nowrap;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--tg-ink-soft);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.tg-produkt .tg-nav a:hover {
	color: var(--tg-accent);
	border-bottom-color: var(--tg-accent);
}

@media (max-width: 900px) {
	.tg-produkt .tg-nav ul {
		justify-content: flex-start;
	}
}

/* Sprungziele nicht unter die klebende Leiste rutschen lassen */
.tg-produkt [id^="tg-"] {
	scroll-margin-top: 120px;
}

/* --------------------------------------------------------------------------
   Referenz-Logos
   -------------------------------------------------------------------------- */
/* Es sind Screenshots echter Kundenbewertungen — sie muessen lesbar sein,
   also volle Groesse und keine Graustufen. */
.tg-produkt .tg-refs .elementor-image-carousel-wrapper img {
	width: 100%;
	height: auto;
	border: 1px solid var(--tg-line);
	border-radius: 10px;
	background: #fff;
}

.tg-produkt .tg-refs .swiper-slide,
.tg-produkt .tg-refs .elementor-carousel-image {
	padding-inline: 6px;
}

/* --------------------------------------------------------------------------
   Bewegung respektieren
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.tg-produkt * {
		transition: none !important;
	}
}

/* ==========================================================================
   PUREMANENT YOGA — waermere Farbwelt fuer eine andere Zielgruppe.
   Gleiche Struktur wie alle Produktseiten, nur andere Tokens und ein paar
   zusaetzliche Bausteine. Aktiv ueber die Body-Klasse .tg-produkt--yoga.
   ========================================================================== */

.tg-produkt--yoga {
	--tg-accent: #7c8f6b;        /* Salbei */
	--tg-accent-soft: #eef1e9;
	--tg-ink: #2c3128;
	--tg-ink-soft: #5f6858;
	--tg-line: #e3e2d9;
	--tg-bg-alt: #f7f5f0;        /* Creme statt kuehlem Grau */
}

/* ==========================================================================
   KIDS — waerme Farbwelt fuer Familien. Struktur unveraendert, nur Tokens.
   Aktiv ueber die Body-Klasse .tg-produkt--kids (Meta `_tg_theme = kids`).
   Der Akzent ist bewusst dunkler gewaehlt als ein reines Orange: er traegt
   auch weisse Schrift auf Buttons (Kontrast rund 4:1).
   ========================================================================== */

.tg-produkt--kids {
	--tg-accent: #d9722f;        /* warmes Orange */
	--tg-accent-soft: #fdf0e5;
	--tg-ink: #2a2520;
	--tg-ink-soft: #6a5c50;
	--tg-line: #efe3d8;
	--tg-bg-alt: #fff8f1;        /* helle Creme statt kuehlem Grau */
}

/* Der Zitat-Abschnitt am Seitenende: Bild klein halten, Text fuehrt. */
.tg-produkt--kids .tg-stimme p {
	font-style: italic;
}

/* ==========================================================================
   LONG PROTECT / B2B — sachlichere, kuehlere Farbwelt fuer Praxen und Betriebe.
   Aktiv ueber die Body-Klasse .tg-produkt--protect (Meta `_tg_theme = protect`).
   Tieferes Petrolblau als das Classic-Tuerkis: traegt weisse Schrift auf Buttons.
   ========================================================================== */

.tg-produkt--protect {
	--tg-accent: #2f6b8f;        /* Petrolblau */
	--tg-accent-soft: #e9f1f6;
	--tg-ink: #1b2833;
	--tg-ink-soft: #556673;
	--tg-line: #dde5ea;
	--tg-bg-alt: #f4f7f9;
}

/* ==========================================================================
   PET — waermeres Gruen fuer PUREMANENT Pet und PUREPAW Paw Wipes.
   Aktiv ueber die Body-Klasse .tg-produkt--pet (Meta `_tg_theme = pet`).
   ========================================================================== */

.tg-produkt--pet {
	--tg-accent: #4a7c59;        /* gedaempftes Gruen */
	--tg-accent-soft: #eaf2ec;
	--tg-ink: #222b25;
	--tg-ink-soft: #57655b;
	--tg-line: #dfe6e0;
	--tg-bg-alt: #f5f8f5;
}

/* --------------------------------------------------------------------------
   Auftakt: grosse Aussage, Bild daneben, ruhig gesetzt
   -------------------------------------------------------------------------- */
.tg-produkt .tg-auftakt {
	padding-block: var(--tg-s6) var(--tg-s5);
}

.tg-produkt .tg-eyebrow {
	margin: 0 0 var(--tg-s2);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--tg-accent);
}

.tg-produkt .tg-auftakt .tg-headline {
	font-size: clamp(28px, 4.2vw, 48px);
	max-width: 16ch;
	line-height: 1.14;
}

.tg-produkt .tg-lead {
	max-width: 54ch;
	font-size: clamp(16px, 1.4vw, 19px);
	line-height: 1.65;
	color: var(--tg-ink-soft);
}

/* --------------------------------------------------------------------------
   Nutzenleiste — fuenf Punkte mit Linien-Icons, wie im Entwurf
   -------------------------------------------------------------------------- */
.tg-produkt .tg-benefits {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	background: #fff;
	border: 1px solid var(--tg-line);
	border-radius: 14px;
	overflow: hidden;
}

.tg-produkt .tg-benefit {
	padding: var(--tg-s4) var(--tg-s3);
	text-align: center;
	border-right: 1px solid var(--tg-line);
	min-width: 0;              /* sonst sprengt der Inhalt die Rasterspalte */
	overflow-wrap: break-word; /* Sicherheitsnetz fuer sehr lange Woerter */
}

.tg-produkt .tg-benefit:last-child {
	border-right: 0;
}

.tg-produkt .tg-benefit svg {
	width: 30px;
	height: 30px;
	margin: 0 auto var(--tg-s2);
	display: block;
	stroke: var(--tg-accent);
	fill: none;
	stroke-width: 1.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.tg-produkt .tg-benefit b {
	display: block;
	margin-bottom: 6px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--tg-ink);
}

.tg-produkt .tg-benefit span {
	display: block;
	font-size: 13px;
	line-height: 1.5;
	color: var(--tg-ink-soft);
}

@media (max-width: 1000px) {
	.tg-produkt .tg-benefits {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.tg-produkt .tg-benefit:nth-child(3) {
		border-right: 0;
	}
	.tg-produkt .tg-benefit:nth-child(-n + 3) {
		border-bottom: 1px solid var(--tg-line);
	}
}

@media (max-width: 620px) {
	.tg-produkt .tg-benefits {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	/* lange Begriffe wie "Materialschonend" muessen in die halbe Breite passen */
	.tg-produkt .tg-benefit {
		padding-inline: var(--tg-s2);
	}
	.tg-produkt .tg-benefit b {
		font-size: 11px;
		letter-spacing: 0.04em;
	}
	.tg-produkt .tg-benefit {
		border-right: 1px solid var(--tg-line);
		border-bottom: 1px solid var(--tg-line);
	}
	.tg-produkt .tg-benefit:nth-child(2n) {
		border-right: 0;
	}
	.tg-produkt .tg-benefit:last-child {
		grid-column: 1 / -1;
		border-bottom: 0;
	}
}

/* --------------------------------------------------------------------------
   Drei Schritte nebeneinander, mit Pfeil dazwischen
   -------------------------------------------------------------------------- */
.tg-produkt .tg-ablauf {
	display: grid;
	grid-template-columns: 1fr auto 1fr auto 1fr;
	align-items: start;
	gap: var(--tg-s3);
}

.tg-produkt .tg-ablauf-schritt svg {
	width: 34px;
	height: 34px;
	margin-bottom: var(--tg-s2);
	display: block;
	stroke: var(--tg-accent);
	fill: none;
	stroke-width: 1.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.tg-produkt .tg-ablauf-nr {
	display: block;
	margin-bottom: 4px;
	font-size: 13px;
	font-weight: 700;
	color: var(--tg-accent);
}

.tg-produkt .tg-ablauf-schritt b {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.tg-produkt .tg-ablauf-schritt p {
	margin: 0;
	font-size: 14px;
	color: var(--tg-ink-soft);
}

.tg-produkt .tg-ablauf-pfeil {
	align-self: center;
	color: var(--tg-accent);
	opacity: 0.5;
	font-size: 26px;
	line-height: 1;
}

@media (max-width: 820px) {
	.tg-produkt .tg-ablauf {
		grid-template-columns: 1fr;
		gap: var(--tg-s4);
	}
	.tg-produkt .tg-ablauf-pfeil {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   Vergleichstabelle — drei Spalten, erste Spalte hervorgehoben
   -------------------------------------------------------------------------- */
.tg-produkt .tg-vergleich-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.tg-produkt .tg-vergleich {
	width: 100%;
	min-width: 640px;
	border-collapse: collapse;
	font-size: 14px;
}

.tg-produkt .tg-vergleich th,
.tg-produkt .tg-vergleich td {
	padding: 14px var(--tg-s2);
	border-bottom: 1px solid var(--tg-line);
	text-align: left;
}

.tg-produkt .tg-vergleich thead th {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--tg-ink);
	border-bottom: 2px solid var(--tg-accent);
	vertical-align: bottom;
}

.tg-produkt .tg-vergleich tbody th {
	font-weight: 500;
	color: var(--tg-ink-soft);
}

.tg-produkt .tg-vergleich .tg-spalte-wir {
	background: var(--tg-accent-soft);
	font-weight: 600;
	color: var(--tg-ink);
	text-align: center;
}

.tg-produkt .tg-vergleich td:not(.tg-spalte-wir) {
	text-align: center;
	color: var(--tg-ink-soft);
}

/* --------------------------------------------------------------------------
   Ergiebigkeit — zwei ruhige Preiskacheln
   -------------------------------------------------------------------------- */
.tg-produkt .tg-kosten {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--tg-s3);
	max-width: 760px;
}

.tg-produkt .tg-kosten div {
	padding: var(--tg-s4);
	background: #fff;
	border: 1px solid var(--tg-line);
	border-radius: 12px;
	text-align: center;
}

.tg-produkt .tg-kosten b {
	display: block;
	font-size: clamp(24px, 3vw, 32px);
	font-weight: 600;
	color: var(--tg-accent);
	line-height: 1.2;
}

.tg-produkt .tg-kosten span {
	display: block;
	margin-top: 6px;
	font-size: 14px;
	color: var(--tg-ink-soft);
}

@media (max-width: 600px) {
	.tg-produkt .tg-kosten {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------------------------
   Breites Stimmungsbild als Abschnittstrenner
   -------------------------------------------------------------------------- */
.tg-produkt .tg-bildband img {
	display: block;
	width: 100%;
	height: auto;          /* vollstaendig sichtbar, kein Beschnitt */
	max-width: 900px;
	margin-inline: auto;
	border-radius: 14px;
}

.tg-produkt .tg-bildband .elementor-widget-image {
	text-align: center;
}

/* Stimmen aus der Community — echte Kundinnen mit Foto und Zitat */
.tg-produkt .tg-cards--drei {
	grid-template-columns: repeat(3, 1fr);
}

.tg-produkt .tg-stimme blockquote {
	margin: 0;
	padding: 0 var(--tg-s3) var(--tg-s3);
	font-size: 15px;
	line-height: 1.65;
	color: var(--tg-ink-soft);
}

.tg-produkt .tg-stimme cite {
	display: block;
	padding: var(--tg-s3) var(--tg-s3) 6px;
	font-style: normal;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--tg-accent);
}

@media (max-width: 900px) {
	.tg-produkt .tg-cards--drei {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Themenseiten (ab 11.08.2026) — erste Seite: Yoga (14159)
   Dieselben Tokens wie die Produktseiten; nur was auf Themenseiten neu ist.
   ========================================================================== */

/* Buttonzeile unter Fliesstext */
.tg-produkt .tg-btns {
	margin: var(--tg-s3) 0 0;
}

/* Nutzenleiste in drei Spalten statt fuenf/sechs */
.tg-produkt .tg-benefits--drei {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Kleine Karten innerhalb einer Split-Spalte: zwei nebeneinander, kompakter */
.tg-produkt .tg-cards--mini {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--tg-s2);
	margin-top: var(--tg-s3);
}

.tg-produkt .tg-cards--mini .tg-card {
	padding: var(--tg-s2);
}

.tg-produkt .tg-cards--mini .tg-card h3 {
	margin: var(--tg-s1) 0 4px;
	font-size: 15px;
}

.tg-produkt .tg-cards--mini .tg-card p {
	font-size: 14px;
	line-height: 1.5;
}

.tg-produkt .tg-cards--mini svg {
	width: 24px;
	height: 24px;
	fill: none;
	stroke: var(--tg-accent);
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Abschlussband: Bild als Hintergrund, darueber ein Schleier, damit der Text traegt */
.tg-produkt .tg-ctaband {
	position: relative;
	isolation: isolate;
}

.tg-produkt .tg-ctaband::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(12, 40, 46, .72), rgba(12, 40, 46, .82));
}

.tg-produkt .tg-ctaband .tg-eyebrow,
.tg-produkt .tg-ctaband .tg-headline,
.tg-produkt .tg-ctaband .tg-lead,
.tg-produkt .tg-ctaband p {
	color: #fff;
}

.tg-produkt .tg-ctaband .tg-btn--ghost {
	color: #fff;
	border-color: rgba(255, 255, 255, .55);
}

/* Ankernavigation auf Themenseiten: nicht klebend, sonst kollidiert sie mit
   der Kopfleiste der Seite (Produktseiten haben dort keinen Seitentitel). */
.tg-produkt.page .tg-nav {
	position: static;
}

@media (max-width: 767px) {
	.tg-produkt .tg-benefits--drei,
	.tg-produkt .tg-cards--mini {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Ablaufleiste mit VIER Schritten (Themenseiten). Das Grundraster ist auf drei
   Schritte plus zwei Pfeile ausgelegt; bei vier Schritten sind es sieben Spalten,
   sonst bricht die Reihe um. */
.tg-produkt .tg-ablauf--vier {
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
	gap: var(--tg-s2);
}

@media (max-width: 1024px) {
	.tg-produkt .tg-ablauf--vier {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
	.tg-produkt .tg-ablauf--vier .tg-ablauf-pfeil {
		display: none;
	}
}

@media (max-width: 575px) {
	.tg-produkt .tg-ablauf--vier {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Fragenliste auf Themenseiten darf die volle Spaltenbreite nutzen —
   auf Produktseiten sitzt sie in einer schmalen Spalte, hier nicht. */
.tg-produkt.page .tg-acc {
	max-width: none;
}