/* =========================================================================
   GRAND THEFT PLANET – STARTSEITE (Hero + Kollektionen)
   ========================================================================= */

/* Auf der Startseite beginnt der Hero ganz oben, der Header schwebt
   transparent darüber – hier wird das sitewide reservierte
   Header-Padding (siehe Header-Plugin) bewusst wieder aufgehoben. */
body.gtp-has-hero {
	padding-top: 0 !important;
}

.gtp-hero {
	position: relative;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--gtp-ink, #060606);
	overflow: hidden;
}

/* ---------- Sternenfeld ---------- */
.gtp-hero__space {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-color: var(--gtp-ink, #060606);
	background-image:
		radial-gradient(1.6px 1.6px at 12% 22%, rgba(255, 255, 255, 0.9) 50%, transparent 100%),
		radial-gradient(1.2px 1.2px at 78% 15%, rgba(255, 255, 255, 0.7) 50%, transparent 100%),
		radial-gradient(1.8px 1.8px at 45% 68%, rgba(255, 255, 255, 0.8) 50%, transparent 100%),
		radial-gradient(1.2px 1.2px at 85% 78%, rgba(255, 255, 255, 0.6) 50%, transparent 100%),
		radial-gradient(1.4px 1.4px at 25% 85%, rgba(255, 255, 255, 0.7) 50%, transparent 100%),
		radial-gradient(1px 1px at 60% 35%, rgba(255, 255, 255, 0.6) 50%, transparent 100%),
		radial-gradient(1.6px 1.6px at 92% 45%, rgba(255, 255, 255, 0.8) 50%, transparent 100%),
		radial-gradient(1px 1px at 8% 55%, rgba(255, 255, 255, 0.5) 50%, transparent 100%);
	background-repeat: repeat;
	background-size: 340px 340px, 280px 280px, 400px 400px, 260px 260px, 320px 320px, 220px 220px, 380px 380px, 240px 240px;
}

.gtp-hero--motion .gtp-hero__space {
	animation: gtpTwinkle 6s ease-in-out infinite alternate;
}

@keyframes gtpTwinkle {
	from {
		opacity: 0.75;
	}
	to {
		opacity: 1;
	}
}

/* ---------- Living Globe ---------- */
.gtp-hero__globe-wrap {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 1;
	width: clamp(280px, 62vmin, 680px);
	height: clamp(280px, 62vmin, 680px);
	transform: translate(-50%, -50%) scale(0.85);
	opacity: 0;
	will-change: transform;
}

.gtp-hero--motion .gtp-hero__globe-wrap {
	animation: gtpGlobeIn 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes gtpGlobeIn {
	0% {
		opacity: 0;
		transform: translate(-50%, -50%) scale(0.82);
		filter: brightness(0.3);
	}
	55% {
		opacity: 1;
		filter: brightness(1.35);
	}
	100% {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1);
		filter: brightness(1);
	}
}

.gtp-hero__globe {
	position: relative;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	overflow: hidden;
	box-shadow: 0 0 90px rgba(22, 132, 221, 0.35), 0 0 160px rgba(148, 190, 114, 0.14);
}

.gtp-hero__globe-parallax {
	width: 100%;
	height: 100%;
}

.gtp-hero__globe-surface {
	position: absolute;
	inset: -2%;
	background-color: var(--gtp-blue-solid, #1479ca);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640'%3E%3Crect width='640' height='640' fill='%231684dd'/%3E%3Cg fill='%2394be72'%3E%3Cellipse cx='150' cy='450' rx='70' ry='110'/%3E%3Cellipse cx='108' cy='525' rx='40' ry='62'/%3E%3Cellipse cx='192' cy='378' rx='36' ry='50'/%3E%3Cellipse cx='400' cy='250' rx='82' ry='122'/%3E%3Cellipse cx='442' cy='340' rx='46' ry='60'/%3E%3Cellipse cx='368' cy='176' rx='36' ry='46'/%3E%3Cellipse cx='560' cy='382' rx='55' ry='90'/%3E%3Cellipse cx='602' cy='300' rx='30' ry='40'/%3E%3Ccircle cx='280' cy='548' r='10'/%3E%3Ccircle cx='500' cy='552' r='8'/%3E%3Ccircle cx='58' cy='198' r='9'/%3E%3Ccircle cx='612' cy='150' r='7'/%3E%3C/g%3E%3C/svg%3E");
	background-repeat: repeat;
	background-size: 640px 640px;
}

.gtp-hero--motion .gtp-hero__globe-surface {
	animation: gtpGlobeSpin 46s linear infinite;
}

@keyframes gtpGlobeSpin {
	from {
		background-position: 0 0;
	}
	to {
		background-position: -640px 0;
	}
}

.gtp-hero__globe-shade {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 26%),
		radial-gradient(circle at 68% 78%, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 55%),
		radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.6) 100%);
}

/* ---------- Filmkorn ---------- */
.gtp-hero__grain {
	position: absolute;
	inset: 0;
	z-index: 3;
	opacity: 0.05;
	mix-blend-mode: overlay;
	pointer-events: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Vignette ---------- */
.gtp-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background: radial-gradient(120% 100% at 50% 45%, rgba(6, 6, 6, 0) 32%, rgba(6, 6, 6, 0.6) 100%);
}

/* ---------- Kino-Balken ---------- */
.gtp-hero__letterbox {
	position: absolute;
	left: 0;
	width: 100%;
	height: clamp(28px, 4vw, 46px);
	background: var(--gtp-ink, #060606);
	z-index: 4;
}

.gtp-hero__letterbox--top {
	top: 0;
	transform: translateY(-100%);
}

.gtp-hero__letterbox--bottom {
	bottom: 0;
	transform: translateY(100%);
	display: flex;
	align-items: center;
	overflow: hidden;
}

.gtp-hero--motion .gtp-hero__letterbox {
	animation: gtpBarIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
	animation-delay: 0.1s;
}

@keyframes gtpBarIn {
	to {
		transform: translateY(0);
	}
}

/* ---------- Laufschrift im unteren Balken ---------- */
.gtp-hero__ticker {
	width: 100%;
	overflow: hidden;
	white-space: nowrap;
}

.gtp-hero__ticker-track {
	display: inline-flex;
	white-space: nowrap;
}

.gtp-hero--motion .gtp-hero__ticker-track {
	animation: gtpTicker 24s linear infinite;
}

@keyframes gtpTicker {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}

.gtp-hero__ticker-track span {
	padding: 0 6px;
	font-family: "Archivo", Arial, sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.8);
}

/* ---------- Inhalt ---------- */
.gtp-hero__inner {
	position: relative;
	z-index: 5;
	max-width: 860px;
	padding: 0 24px;
	text-align: center;
}

/* Zusätzlicher, fokussierter Schutzschatten hinter dem Textblock – garantiert
   Lesbarkeit unabhängig vom Globus dahinter. */
.gtp-hero__inner::before {
	content: "";
	position: absolute;
	inset: -48px -80px;
	z-index: -1;
	background: radial-gradient(60% 65% at 50% 42%, rgba(6, 6, 6, 0.55) 0%, rgba(6, 6, 6, 0) 78%);
	pointer-events: none;
}

.gtp-hero__eyebrow {
	display: inline-block;
	margin: 0 0 14px;
	padding: 6px 16px;
	background: rgba(22, 132, 221, 0.14) !important;
	border: 1px solid rgba(22, 132, 221, 0.55) !important;
	border-radius: 999px;
	font-family: "Archivo", Arial, sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--gtp-blue-light, #d0e6f8) !important;
	opacity: 0;
	transform: translateY(14px);
}

.gtp-hero--motion .gtp-hero__eyebrow {
	animation: gtpFadeUp 0.7s ease forwards;
	animation-delay: 0.1s;
}

.gtp-hero__headline {
	position: relative;
	font-family: "Pricedown", "Anton", sans-serif;
	font-size: clamp(2.6rem, 8vw, 6.2rem);
	line-height: 1;
	letter-spacing: 0.02em;
	color: #ffffff !important;
	margin: 0 0 22px;
	text-transform: uppercase;
	text-shadow: 0 4px 24px rgba(0, 0, 0, 0.55);
	opacity: 0;
	transform: translateY(24px);
}

.gtp-hero--motion .gtp-hero__headline {
	animation: gtpFadeUp 0.9s ease forwards;
	animation-delay: 0.35s;
}

/* RGB-Glitch-Intro: zwei farbige Kopien der Headline, die kurz auseinanderspringen und zusammenfinden */
.gtp-hero__headline::before,
.gtp-hero__headline::after {
	content: attr(data-text);
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	opacity: 0;
	pointer-events: none;
	mix-blend-mode: screen;
}

.gtp-hero--motion .gtp-hero__headline::before,
.gtp-hero--motion .gtp-hero__headline::after {
	animation-duration: 0.6s;
	animation-timing-function: steps(2, end);
	animation-fill-mode: forwards;
	animation-delay: 0.35s;
}

.gtp-hero--motion .gtp-hero__headline::before {
	color: var(--gtp-blue, #1684dd);
	animation-name: gtpGlitchBlue;
}

.gtp-hero--motion .gtp-hero__headline::after {
	color: var(--gtp-green, #94be72);
	animation-name: gtpGlitchGreen;
}

@keyframes gtpGlitchBlue {
	0% {
		opacity: 0.9;
		transform: translate(-6px, 0);
		clip-path: inset(0 0 60% 0);
	}
	50% {
		opacity: 0.7;
		transform: translate(4px, 0);
		clip-path: inset(40% 0 20% 0);
	}
	100% {
		opacity: 0;
		transform: translate(0, 0);
		clip-path: inset(0 0 0 0);
	}
}

@keyframes gtpGlitchGreen {
	0% {
		opacity: 0.9;
		transform: translate(6px, 0);
		clip-path: inset(50% 0 10% 0);
	}
	50% {
		opacity: 0.7;
		transform: translate(-4px, 0);
		clip-path: inset(10% 0 50% 0);
	}
	100% {
		opacity: 0;
		transform: translate(0, 0);
		clip-path: inset(0 0 0 0);
	}
}

.gtp-hero__tagline {
	font-family: "Archivo", Arial, sans-serif;
	font-size: clamp(0.95rem, 1.4vw, 1.15rem);
	font-weight: 400;
	letter-spacing: 0.06em;
	color: rgba(255, 255, 255, 0.82) !important;
	margin: 0 0 40px;
	text-transform: uppercase;
	opacity: 0;
	transform: translateY(20px);
}

.gtp-hero--motion .gtp-hero__tagline {
	animation: gtpFadeUp 0.9s ease forwards;
	animation-delay: 0.6s;
}

.gtp-hero__cta {
	position: relative;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 16px 42px;
	border: 2px solid #ffffff !important;
	color: #ffffff !important;
	text-decoration: none;
	font-family: "Archivo", Arial, sans-serif;
	font-weight: 600;
	font-size: 0.9rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	transition: background-color 0.25s ease, color 0.25s ease;
	opacity: 0;
	transform: translateY(16px);
}

.gtp-hero--motion .gtp-hero__cta {
	animation: gtpFadeUp 0.9s ease forwards;
	animation-delay: 0.85s;
}

.gtp-hero__cta::before {
	content: "";
	position: absolute;
	top: 0;
	left: -60%;
	width: 40%;
	height: 100%;
	background: rgba(255, 255, 255, 0.25) !important;
	transform: skewX(-20deg);
	transition: left 0.5s ease;
	pointer-events: none;
}

.gtp-hero__cta:hover::before,
.gtp-hero__cta:focus-visible::before {
	left: 130%;
}

.gtp-hero__cta:hover,
.gtp-hero__cta:focus {
	background-color: var(--gtp-blue-solid, #1479ca) !important;
	border-color: var(--gtp-blue-solid, #1479ca) !important;
	color: #ffffff !important;
}

.gtp-hero__cta-arrow {
	transition: transform 0.25s ease;
}

.gtp-hero__cta:hover .gtp-hero__cta-arrow,
.gtp-hero__cta:focus-visible .gtp-hero__cta-arrow {
	transform: translateX(4px);
}

/* ---------- Scroll-Indikator ---------- */
.gtp-hero__scroll {
	position: absolute;
	bottom: calc(clamp(28px, 4vw, 46px) + 26px);
	left: 50%;
	transform: translateX(-50%);
	width: 26px;
	height: 42px;
	border: 2px solid rgba(255, 255, 255, 0.7) !important;
	border-radius: 14px;
	background: transparent !important;
	cursor: pointer;
	z-index: 5;
	padding: 0;
}

.gtp-hero__scroll span {
	position: absolute;
	top: 8px;
	left: 50%;
	width: 4px;
	height: 8px;
	margin-left: -2px;
	background: #ffffff !important;
	border-radius: 2px;
}

.gtp-hero--motion .gtp-hero__scroll span {
	animation: gtpScroll 1.6s ease infinite;
}

@keyframes gtpFadeUp {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes gtpScroll {
	0% {
		opacity: 1;
		top: 8px;
	}
	70% {
		opacity: 0;
		top: 22px;
	}
	100% {
		opacity: 0;
		top: 8px;
	}
}

@media (max-width: 480px) {
	.gtp-hero__cta {
		padding: 14px 32px;
		font-size: 0.8rem;
	}
}

/* ---------- Bewegung reduzieren: alles landet sofort im Endzustand ---------- */
@media (prefers-reduced-motion: reduce) {
	.gtp-hero__space,
	.gtp-hero__globe-wrap,
	.gtp-hero__globe-surface,
	.gtp-hero__letterbox,
	.gtp-hero__ticker-track,
	.gtp-hero__eyebrow,
	.gtp-hero__headline,
	.gtp-hero__headline::before,
	.gtp-hero__headline::after,
	.gtp-hero__tagline,
	.gtp-hero__cta,
	.gtp-hero__scroll span {
		animation: none !important;
	}
	.gtp-hero__letterbox {
		transform: translateY(0) !important;
	}
	.gtp-hero__globe-wrap {
		opacity: 1 !important;
		transform: translate(-50%, -50%) scale(1) !important;
		filter: none !important;
	}
	.gtp-hero__eyebrow,
	.gtp-hero__headline,
	.gtp-hero__tagline,
	.gtp-hero__cta {
		opacity: 1 !important;
		transform: translateY(0) !important;
	}
	.gtp-hero__headline::before,
	.gtp-hero__headline::after {
		opacity: 0 !important;
	}
}


.gtp-collections {
	background: var(--gtp-ink, #060606);
	padding: 96px 28px;
}

.gtp-collections__intro {
	max-width: 640px;
	margin: 0 auto 56px;
	text-align: center;
}

.gtp-collections__eyebrow {
	display: inline-block;
	margin: 0 0 14px;
	padding: 6px 16px;
	background: rgba(22, 132, 221, 0.14);
	border: 1px solid rgba(22, 132, 221, 0.55);
	border-radius: 999px;
	font-family: "Archivo", Arial, sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--gtp-blue-light, #d0e6f8) !important;
}

.gtp-collections__heading {
	font-family: "Pricedown", "Anton", sans-serif;
	font-size: clamp(2.2rem, 5vw, 3.6rem);
	line-height: 1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #ffffff !important;
	margin: 0 0 16px;
}

.gtp-collections__sub {
	font-family: "Archivo", Arial, sans-serif;
	font-size: 0.95rem;
	color: rgba(255, 255, 255, 0.72) !important;
	margin: 0;
}

.gtp-collections__grid {
	max-width: 1320px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 22px;
}

.gtp-collections__card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	aspect-ratio: 3 / 4;
	padding: 26px 22px;
	overflow: hidden;
	text-decoration: none;
	border: 1px solid rgba(255, 255, 255, 0.1);
	background:
		radial-gradient(120% 90% at 15% 100%, rgba(148, 190, 114, 0.16) 0%, rgba(148, 190, 114, 0) 55%),
		radial-gradient(120% 90% at 100% 0%, rgba(22, 132, 221, 0.22) 0%, rgba(22, 132, 221, 0) 55%),
		#0d0d0d;
	transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.gtp-collections__card.is-live {
	cursor: pointer;
}

.gtp-collections__card.is-live:hover {
	transform: translateY(-6px);
	border-color: rgba(22, 132, 221, 0.5);
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45);
}

.gtp-collections__monogram {
	position: absolute;
	right: -10px;
	bottom: -40px;
	font-family: "Pricedown", "Anton", sans-serif;
	font-size: 13rem;
	line-height: 1;
	color: rgba(255, 255, 255, 0.58);
	pointer-events: none;
	user-select: none;
}

.gtp-collections__card-eyebrow {
	position: relative;
	z-index: 1;
	font-family: "Archivo", Arial, sans-serif;
	font-size: 0.65rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.65) !important;
	margin-bottom: 8px;
}

.gtp-collections__card-title {
	position: relative;
	z-index: 1;
	font-family: "Pricedown", "Anton", sans-serif;
	font-size: clamp(1.8rem, 3.2vw, 2.4rem);
	line-height: 1.05;
	text-transform: uppercase;
	color: #ffffff !important;
	margin-bottom: 10px;
}

.gtp-collections__card-tagline {
	position: relative;
	z-index: 1;
	font-family: "Archivo", Arial, sans-serif;
	font-size: 0.82rem;
	color: rgba(255, 255, 255, 0.72) !important;
	margin-bottom: auto;
	padding-bottom: 20px;
}

.gtp-collections__card-cta {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: "Archivo", Arial, sans-serif;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-top: 18px;
}

.gtp-collections__card.is-live .gtp-collections__card-cta {
	color: #ffffff !important;
}

.gtp-collections__card.is-soon .gtp-collections__card-cta {
	color: rgba(255, 255, 255, 0.58) !important;
	border: 1px solid rgba(255, 255, 255, 0.25);
	padding: 5px 12px;
	border-radius: 999px;
}

@media (max-width: 640px) {
	.gtp-collections {
		padding: 64px 20px;
	}
	.gtp-collections__grid {
		grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
		gap: 14px;
	}
	.gtp-collections__monogram {
		font-size: 8rem;
	}
}

/* -------------------------------------------------------------------------
   Bewegungsreduzierung: Karten heben sich nicht an, kein weiches Überblenden.
   ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.gtp-collections__card {
		transition: none !important;
	}
	.gtp-collections__card.is-live:hover {
		transform: none;
	}
}


/* =========================================================================
   ZUSÄTZLICHE STARTSEITEN-SEKTIONEN

   Bewusst keine neue Designsprache: Signal-Punkte, Eyebrow-Pille,
   Pricedown-Überschriften und die Karten-Optik existieren alle schon
   an anderer Stelle. Hier werden sie nur neu angeordnet.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. VERTRAUENSLEISTE
   Dünne Zeile direkt unter den Kollektions-Karten. Dieselben Signal-Punkte
   wie im Header, Footer und auf der Produktseite.
   ---------------------------------------------------------------------- */

.gtp-trust {
	background: var(--gtp-ink, #060606) !important;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.gtp-trust__inner {
	max-width: 1320px;
	margin: 0 auto;
	padding: 22px 28px;
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px 48px;
}

.gtp-trust__item {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: 'Archivo', Arial, sans-serif;
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.65) !important;
}

.gtp-trust__dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--gtp-green, #94be72) !important;
	box-shadow: 0 0 6px rgba(148, 190, 114, 0.8);
	flex-shrink: 0;
}

/* -------------------------------------------------------------------------
   2. PRODUKT-REIHE
   Nutzt die Karten-Optik aus shop.css (wird auf der Startseite
   mitgeladen), hier nur Rahmen und Kopfzeile.
   ---------------------------------------------------------------------- */

.gtp-featured {
	background: var(--gtp-ink, #060606) !important;
	padding: 84px 0 0;
}

.gtp-featured__head {
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 28px 30px;
	box-sizing: border-box;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
}

.gtp-featured__title {
	font-family: 'Pricedown', 'Anton', sans-serif;
	font-size: clamp(1.8rem, 4vw, 2.8rem);
	line-height: 1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #ffffff !important;
	margin: 0 !important;
	padding: 0 !important;
}

.gtp-featured__all {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	color: rgba(255, 255, 255, 0.65) !important;
	text-decoration: none !important;
	font-family: 'Archivo', Arial, sans-serif;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	transition: color 0.2s ease;
	padding-bottom: 4px;
}

.gtp-featured__all:hover,
.gtp-featured__all:focus-visible {
	color: #ffffff !important;
}

.gtp-featured__all svg {
	transition: transform 0.25s ease;
}

.gtp-featured__all:hover svg,
.gtp-featured__all:focus-visible svg {
	transform: translateX(3px);
}

/* Karten-Raster: gleiche Maße wie in der Shop-Übersicht.
   auto-fit (nicht auto-fill), damit bei wenigen Produkten keine leeren
   Spalten entstehen und die Karten sich nicht schmal quetschen. */
ul.products.gtp-featured__grid {
	max-width: 1320px;
	margin: 0 auto !important;
	padding: 0 28px 0 !important;
	box-sizing: border-box;
	list-style: none !important;
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 24px;
	counter-reset: gtpcard;
}

ul.products.gtp-featured__grid::before,
ul.products.gtp-featured__grid::after {
	display: none !important;
}

/* Die Karten selbst: identisch zur Shop-Übersicht. Die ausführlichen
   Regeln stehen in shop.css; hier nur das, was dort an die
   body.gtp-shop-page-Klasse gebunden ist und deshalb auf der Startseite
   nicht greifen würde. */
ul.products.gtp-featured__grid li.product {
	position: relative;
	counter-increment: gtpcard;
	float: none !important;
	clear: none !important;
	width: auto !important;
	margin: 0 !important;
	padding: 16px 16px 20px !important;
	display: flex !important;
	flex-direction: column;
	background:
		radial-gradient(120% 90% at 15% 100%, rgba(148, 190, 114, 0.12) 0%, rgba(148, 190, 114, 0) 55%),
		radial-gradient(120% 90% at 100% 0%, rgba(22, 132, 221, 0.16) 0%, rgba(22, 132, 221, 0) 55%),
		#0d0d0d;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 4px;
	transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}

ul.products.gtp-featured__grid li.product:hover {
	transform: translateY(-6px);
	border-color: rgba(22, 132, 221, 0.5);
	box-shadow: 0 22px 44px rgba(0, 0, 0, 0.5);
}

ul.products.gtp-featured__grid li.product::before {
	content: counter(gtpcard, decimal-leading-zero);
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 3;
	padding: 4px 8px;
	background: rgba(6, 6, 6, 0.75);
	border-radius: 3px;
	font-family: 'Archivo', Arial, sans-serif;
	font-size: 0.58rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	color: var(--gtp-blue, #1684dd) !important;
}

ul.products.gtp-featured__grid li.product a {
	text-decoration: none !important;
}

ul.products.gtp-featured__grid li.product img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0 0 16px !important;
	border-radius: 3px;
}

ul.products.gtp-featured__grid li.product .woocommerce-loop-product__title {
	font-family: 'Pricedown', 'Anton', sans-serif;
	font-size: 1.25rem !important;
	line-height: 1.15;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: #ffffff !important;
	margin: 0 0 8px !important;
	padding: 0 !important;
}

ul.products.gtp-featured__grid li.product .price {
	display: block;
	margin: 0 0 auto !important;
	padding-bottom: 16px;
	font-family: 'Archivo', Arial, sans-serif;
	font-size: 0.9rem;
	font-weight: 600;
	color: #ffffff !important;
}

ul.products.gtp-featured__grid li.product .price del {
	color: rgba(255, 255, 255, 0.58) !important;
	font-weight: 400;
	opacity: 1;
	margin-right: 6px;
}

ul.products.gtp-featured__grid li.product .price ins {
	color: #ffffff !important;
	text-decoration: none !important;
	font-weight: 600;
}

ul.products.gtp-featured__grid li.product .star-rating {
	margin: 0 0 8px !important;
	color: var(--gtp-blue, #1684dd) !important;
	font-size: 0.8rem;
}

ul.products.gtp-featured__grid li.product a.button,
ul.products.gtp-featured__grid li.product a.add_to_cart_button {
	display: block;
	width: 100%;
	margin: 0 !important;
	padding: 12px 14px !important;
	box-sizing: border-box;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	background: transparent !important;
	border: 1.5px solid rgba(255, 255, 255, 0.8) !important;
	border-radius: 0 !important;
	color: #ffffff !important;
	font-family: 'Archivo', Arial, sans-serif;
	font-weight: 600;
	font-size: 0.72rem;
	line-height: 1.4;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	transition: background-color 0.25s ease, border-color 0.25s ease;
}

ul.products.gtp-featured__grid li.product a.button:hover,
ul.products.gtp-featured__grid li.product a.button:focus-visible,
ul.products.gtp-featured__grid li.product a.add_to_cart_button:hover,
ul.products.gtp-featured__grid li.product a.add_to_cart_button:focus-visible {
	background: var(--gtp-blue-solid, #1479ca) !important;
	border-color: var(--gtp-blue-solid, #1479ca) !important;
	color: #ffffff !important;
}

ul.products.gtp-featured__grid li.product a.added_to_cart {
	display: block;
	margin-top: 9px !important;
	text-align: center;
	font-family: 'Archivo', Arial, sans-serif;
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--gtp-green, #94be72) !important;
}

ul.products.gtp-featured__grid span.onsale {
	position: absolute !important;
	top: 10px !important;
	right: 10px !important;
	left: auto !important;
	bottom: auto !important;
	z-index: 3;
	margin: 0 !important;
	padding: 5px 10px !important;
	min-height: 0 !important;
	min-width: 0 !important;
	line-height: 1.4 !important;
	background: var(--gtp-blue-solid, #1479ca) !important;
	color: #ffffff !important;
	border-radius: 3px !important;
	font-family: 'Archivo', Arial, sans-serif;
	font-size: 0.6rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* -------------------------------------------------------------------------
   3. MARKENSTORY
   Eyebrow-Pille und Pricedown-Überschrift wie überall sonst.
   ---------------------------------------------------------------------- */

.gtp-story {
	background: var(--gtp-ink, #060606) !important;
	padding: 90px 0;
}

.gtp-story__inner {
	max-width: 720px;
	margin: 0 auto;
	padding: 0 28px;
	box-sizing: border-box;
	text-align: center;
}

.gtp-story__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 20px;
	padding: 6px 16px;
	background: rgba(22, 132, 221, 0.14) !important;
	border: 1px solid rgba(22, 132, 221, 0.55) !important;
	border-radius: 999px;
	font-family: 'Archivo', Arial, sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--gtp-blue-light, #d0e6f8) !important;
}

.gtp-story__signal {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--gtp-green, #94be72) !important;
	box-shadow: 0 0 7px rgba(148, 190, 114, 0.9);
	flex-shrink: 0;
}

.gtp-story__title {
	font-family: 'Pricedown', 'Anton', sans-serif;
	font-size: clamp(1.9rem, 4.4vw, 3rem);
	line-height: 1.05;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #ffffff !important;
	margin: 0 0 22px !important;
	padding: 0 !important;
}

.gtp-story__text {
	font-family: 'Archivo', Arial, sans-serif;
	font-size: 1rem;
	line-height: 1.8;
	color: rgba(255, 255, 255, 0.72) !important;
	margin: 0 auto 30px !important;
	max-width: 560px;
}

.gtp-story__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 30px;
	border: 2px solid #ffffff !important;
	color: #ffffff !important;
	text-decoration: none !important;
	font-family: 'Archivo', Arial, sans-serif;
	font-weight: 600;
	font-size: 0.78rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	transition: background-color 0.25s ease, border-color 0.25s ease;
}

.gtp-story__link:hover,
.gtp-story__link:focus-visible {
	background: var(--gtp-blue-solid, #1479ca) !important;
	border-color: var(--gtp-blue-solid, #1479ca) !important;
	color: #ffffff !important;
}

.gtp-story__link svg {
	transition: transform 0.25s ease;
}

.gtp-story__link:hover svg,
.gtp-story__link:focus-visible svg {
	transform: translateX(4px);
}

/* -------------------------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------------------- */

@media (max-width: 900px) {
	.gtp-trust__inner {
		padding-left: 18px;
		padding-right: 18px;
		gap: 12px 28px;
	}
	.gtp-featured {
		padding-top: 60px;
	}
	.gtp-featured__head,
	ul.products.gtp-featured__grid,
	.gtp-story__inner {
		padding-left: 18px !important;
		padding-right: 18px !important;
	}
	.gtp-story {
		padding: 64px 0;
	}
}

@media (max-width: 560px) {
	.gtp-trust__item {
		font-size: 0.62rem;
		letter-spacing: 0.14em;
	}
	ul.products.gtp-featured__grid {
		grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
		gap: 14px;
	}
	ul.products.gtp-featured__grid li.product {
		padding: 12px 12px 16px !important;
	}
	ul.products.gtp-featured__grid li.product .woocommerce-loop-product__title {
		font-size: 1rem !important;
	}
	.gtp-story__link {
		width: 100%;
		justify-content: center;
		box-sizing: border-box;
	}
}

@media (prefers-reduced-motion: reduce) {
	ul.products.gtp-featured__grid li.product,
	.gtp-featured__all,
	.gtp-featured__all svg,
	.gtp-story__link,
	.gtp-story__link svg {
		transition: none !important;
	}
	ul.products.gtp-featured__grid li.product:hover {
		transform: none;
	}
}