/* =========================================================================
   GRAND THEFT PLANET – CORE (Variablen, Header, Footer, Warenkorb-Panel)
   Wird auf jeder Seite geladen. Das Warenkorb-Panel gehoert hierher,
   weil es per wp_footer sitewide ausgegeben wird.
   ========================================================================= */

:root {
	/* Primärfarben – exakt aus dem GTP-Logo ausgelesen */
	--gtp-blue: #1684dd;
	--gtp-blue-dark: #0e5690;
	--gtp-blue-light: #d0e6f8;

	/* Für gefüllte Flächen mit weißem Text darauf (Buttons, Badges).
	   Optisch praktisch identisch zum Markenblau, erreicht aber 4.55:1
	   Kontrast gegen Weiß – die Schwelle für normale Schriftgrößen.
	   Das reine Markenblau bleibt für Ränder, Icons und Akzenttext auf
	   dunklem Grund reserviert (dort 5.19:1). */
	--gtp-blue-solid: #1479ca;

	--gtp-green: #94be72;
	--gtp-green-dark: #607c4a;
	--gtp-green-light: #eaf2e3;

	--gtp-ink: #060606;
	--gtp-paper: #ffffff;

	/* Typografie */
	--gtp-font-display: "Pricedown", "Anton", sans-serif;
	--gtp-font-body: "Archivo", Arial, sans-serif;
}


/* Textmarkierung in Markenblau statt Browser-Standardblau */
::selection {
	/* Kontraststarke Blau-Variante: weißer Text auf Markenblau erreicht nur
	   3.9:1, auf blue-solid dagegen 4.55:1. */
	background: var(--gtp-blue-solid, #1479ca) !important;
	color: var(--gtp-paper, #ffffff) !important;
}

/* Sichtbarer Fokus-Ring in Markenfarbe statt Browser-Standard.
   Mit !important, weil einzelne Plugins den Standard-Outline an
   Formularfeldern entfernen (dort ersetzt durch farbigen Rahmen) – ohne
   diese Regel sähen Tastaturnutzer nicht mehr, wo sie sich befinden.
   :focus-visible greift nur bei Tastaturbedienung, nicht bei Mausklick. */
:focus-visible {
	outline: 2px solid var(--gtp-blue, #1684dd) !important;
	outline-offset: 2px !important;
}

/* Scrollbar in Markenfarben (Firefox) */
html {
	scrollbar-color: var(--gtp-blue, #1684dd) var(--gtp-ink, #060606);
	scrollbar-width: thin;
}

/* Scrollbar in Markenfarben (Chrome, Safari, Edge) */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
	width: 10px;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
	background: var(--gtp-ink, #060606);
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
	background: var(--gtp-blue, #1684dd);
	border-radius: 6px;
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover {
	background: var(--gtp-green, #94be72);
}

/* ---------------------------------------------------------------------
   Theme-eigenen Header/Footer (Hello Elementor) hart ausblenden.
   Header und Footer sind komplett durch unsere eigenen Plugins ersetzt
   (gtp-header-nav / gtp-footer) – das Theme-Original würde sonst
   zusätzlich und ungestyled mitrendern (inkl. Elementors pinker
   Standardfarbe auf Links).
   ------------------------------------------------------------------ */
#site-header,
.site-header,
#masthead,
header.site-header,
#site-footer,
.site-footer,
#colophon,
footer.site-footer {
	display: none !important;
}

/* ---------------------------------------------------------------------
   Zusätzliche Absicherung: Elementors 4 globale Kit-Farben (Primary,
   Secondary, Text, Accent) direkt auf Markenblau umbiegen. Betrifft
   jedes Element, das sich per var(--e-global-color-...) auf Elementors
   Kit-Farbe bezieht, statt sich auf unsere eigenen Klassen zu verlassen.
   Ersetzt NICHT den Schritt in Elementor → Site Settings → Global
   Colors, ergänzt ihn nur zusätzlich.
   ------------------------------------------------------------------ */
:root {
	--e-global-color-primary: #1684dd !important;
	--e-global-color-secondary: #1684dd !important;
	--e-global-color-accent: #1684dd !important;
	--e-global-color-text: rgba(255, 255, 255, 0.85) !important;
}


/* =========================================================================
   GRAND THEFT PLANET – HEADER (HUD)
   ========================================================================= */

/* Der Header reserviert seinen eigenen Platz für die GESAMTE Website via
   body-Padding – nicht mehr pro Seite/Plugin einzeln geraten. Das ist die
   einzige Stelle, an der dieser Abstand definiert wird. Jede Seite, die
   ihn braucht, bekommt ihn automatisch; keine kann mehr "vergessen",
   ihn selbst nachzubauen, und der Header kann nirgends mehr überlappt
   werden. Ausnahme: die Startseite (siehe Hero-Plugin), wo der Header
   absichtlich transparent über dem Hero schwebt. */
body {
	padding-top: 150px !important;
}

@media (max-width: 900px) {
	body {
		padding-top: 120px !important;
	}
}

.gtp-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 50;
	/* Eigene Compositing-Ebene: der Header wird beim Scrollen dann nur
	   verschoben statt neu gezeichnet. */
	will-change: transform;
	transform: translateZ(0);
}

/* Eingeloggte Nutzer sehen oben die WordPress-Adminleiste (fixiert, 32px).
   Ohne diesen Versatz läge unser Header darunter und die Statusleiste
   wäre verdeckt. Unter 783px ist die Adminleiste 46px hoch. */
body.admin-bar .gtp-header {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .gtp-header {
		top: 46px;
	}
}

/* ---------- Statusleiste ---------- */
.gtp-header__status {
	background: var(--gtp-ink, #060606) !important;
	border-bottom: 1px solid rgba(22, 132, 221, 0.25);
	max-height: 32px;
	overflow: hidden;
	transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

.gtp-header.is-scrolled .gtp-header__status {
	max-height: 0;
	opacity: 0;
}

.gtp-header__status-inner {
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 28px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.gtp-header__status-tag,
.gtp-header__status-clock,
.gtp-header__status-msg {
	font-family: "Archivo", Arial, sans-serif;
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	white-space: nowrap;
}

.gtp-header__status-tag {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: rgba(255, 255, 255, 0.72) !important;
	flex-shrink: 0;
}

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

@media (prefers-reduced-motion: no-preference) {
	.gtp-header__signal {
		animation: gtpSignal 2.4s ease-in-out infinite;
	}
}

@keyframes gtpSignal {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.25; }
}

.gtp-header__status-msgs {
	position: relative;
	flex: 1;
	height: 32px;
	overflow: hidden;
}

.gtp-header__status-msg {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transform: translateY(100%);
	color: rgba(255, 255, 255, 0.75) !important;
	transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.gtp-header__status-msg.is-active {
	opacity: 1;
	transform: translateY(0);
}

.gtp-header__status-clock {
	color: rgba(255, 255, 255, 0.58) !important;
	font-variant-numeric: tabular-nums;
	flex-shrink: 0;
}

/* ---------- Hauptleiste ---------- */
.gtp-header__bar {
	position: relative;
	background: transparent !important;
	border-bottom: 1px solid transparent !important;
	transition: background-color 0.35s ease, border-color 0.35s ease;
}

.gtp-header.is-scrolled .gtp-header__bar {
	background-color: rgba(6, 6, 6, 0.72);
	/* Milchglas-Effekt beim Scrollen. Ich hatte das aus Performance-
	   gruenden entfernt - der Effekt ist beim Scrollen tatsaechlich teuer.
	   Gegenmassnahmen, damit er trotzdem fluessig bleibt:
	     - nur im gescrollten Zustand aktiv, nicht dauerhaft
	     - kleinerer Radius (10px statt 12px)
	     - eigene Compositing-Ebene ueber den Header (siehe .gtp-header)
	     - 'contain: paint' begrenzt den Bereich, den der Browser neu
	       berechnen muss, auf die Leiste selbst */
	backdrop-filter: blur(10px) saturate(140%);
	-webkit-backdrop-filter: blur(10px) saturate(140%);
	contain: paint;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.gtp-header__inner {
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 28px;
	height: 74px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	transition: height 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.gtp-header.is-scrolled .gtp-header__inner {
	height: 62px;
}

.gtp-header__logo {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	text-decoration: none;
	/* Die Höhe sitzt auf dem Link, NICHT auf dem Bild. Grund: wird height
	   direkt auf einem <img> animiert, greift der Browser waehrend der
	   Animation kurz auf die natuerliche Bildgroesse zurueck - bei einem
	   grossen Quellbild blitzt das Logo dann riesig auf. Mit fester Hoehe
	   am Eltern-Element und height:100% am Bild kann das nicht passieren. */
	height: 40px;
	max-width: 240px;
	overflow: hidden;
	transition: height 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.gtp-header.is-scrolled .gtp-header__logo {
	height: 32px;
}

.gtp-header__logo img {
	display: block;
	height: 100% !important;
	width: auto !important;
	max-width: 240px !important;
	max-height: 100% !important;
	object-fit: contain;
	transition: none;
}

.gtp-header__logo-text {
	font-family: "Pricedown", "Anton", sans-serif;
	font-size: 1.3rem;
	color: #ffffff !important;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

/* ---------- Navigation: nummerierte Missions-Einträge ---------- */
.gtp-header__nav {
	flex: 1;
	display: flex;
	justify-content: center;
}

.gtp-header__menu {
	display: flex;
	align-items: center;
	gap: 34px;
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: gtpnav;
}

.gtp-header__menu > li {
	position: relative;
	counter-increment: gtpnav;
}

.gtp-header__menu > li > a {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 12px;
	color: rgba(255, 255, 255, 0.85) !important;
	text-decoration: none;
	font-family: "Archivo", Arial, sans-serif;
	font-weight: 600;
	font-size: 0.78rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	transition: color 0.2s ease;
}

/* Laufende Nummer vor jedem Menüpunkt (01, 02, 03 …) */
.gtp-header__menu > li > a::before {
	content: counter(gtpnav, decimal-leading-zero);
	font-size: 0.58rem;
	letter-spacing: 0.1em;
	color: var(--gtp-blue, #1684dd) !important;
	opacity: 0.75;
	transition: opacity 0.2s ease;
}

/* Klammer-Cursor: fährt beim Hover von beiden Seiten ein */
.gtp-header__menu > li > a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-left: 2px solid var(--gtp-blue, #1684dd);
	border-right: 2px solid var(--gtp-blue, #1684dd);
	opacity: 0;
	transform: scaleX(1.35);
	transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
	pointer-events: none;
}

.gtp-header__menu > li > a:hover,
.gtp-header__menu > li > a:focus {
	color: #ffffff !important;
}

.gtp-header__menu > li > a:hover::after,
.gtp-header__menu > li > a:focus::after {
	opacity: 1;
	transform: scaleX(1);
}

.gtp-header__menu > li > a:hover::before {
	opacity: 1;
}

.gtp-header__menu > li.current-menu-item > a::before {
	opacity: 1;
}

/* ---------- Aktions-Icons ---------- */
.gtp-header__actions {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-shrink: 0;
}

.gtp-header__icon {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	background: transparent !important;
	border: 1px solid rgba(255, 255, 255, 0.16) !important;
	border-radius: 4px;
	color: #ffffff !important;
	cursor: pointer;
	padding: 0;
	transition: border-color 0.25s ease, background-color 0.25s ease;
}

.gtp-header__icon:hover,
.gtp-header__icon:focus-visible {
	border-color: var(--gtp-blue, #1684dd) !important;
	background: rgba(22, 132, 221, 0.14) !important;
}

.gtp-cart-count {
	position: absolute;
	top: -7px;
	right: -7px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	border-radius: 3px;
	background: var(--gtp-blue-solid, #1479ca) !important;
	color: #ffffff !important;
	font-family: "Archivo", Arial, sans-serif;
	font-size: 10px;
	font-weight: 600;
	line-height: 17px;
	text-align: center;
}

/* ---------- Burger (nur Mobile) ---------- */
.gtp-header__burger {
	display: none !important;
	flex-direction: column;
	justify-content: center;
	gap: 6px;
	width: 34px;
	height: 34px;
	background: transparent !important;
	border: 1px solid rgba(255, 255, 255, 0.16) !important;
	border-radius: 4px;
	cursor: pointer;
	padding: 0 8px;
}

.gtp-header__burger span {
	display: block;
	height: 2px;
	width: 100%;
	background: #ffffff !important;
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.gtp-header__burger[aria-expanded="true"] span:nth-child(1) {
	transform: translateY(4px) rotate(45deg);
}

.gtp-header__burger[aria-expanded="true"] span:nth-child(2) {
	transform: translateY(-4px) rotate(-45deg);
}

/* ---------- Scroll-Fortschrittslinie ---------- */
.gtp-header__progress {
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 100%;
	height: 2px;
	background: transparent !important;
	pointer-events: none;
}

.gtp-header__progress span {
	display: block;
	/* Volle Breite, Fortschritt über scaleX – das läuft auf der
	   Grafikkarte. Eine Animation über width würde bei jedem Scroll-Frame
	   ein Neu-Layout auslösen und das Scrollen zäh machen. */
	width: 100%;
	height: 100%;
	transform: scaleX(0);
	transform-origin: left center;
	will-change: transform;
	background: linear-gradient(90deg, var(--gtp-blue, #1684dd), var(--gtp-green, #94be72));
	box-shadow: 0 0 10px rgba(22, 132, 221, 0.6);
}

/* ---------- Such-Panel ---------- */
.gtp-header__search {
	background: rgba(6, 6, 6, 0.9);
	backdrop-filter: blur(10px) saturate(140%);
	-webkit-backdrop-filter: blur(10px) saturate(140%);
	border-bottom: 1px solid rgba(22, 132, 221, 0.3);
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

.gtp-header__search.is-open {
	max-height: 110px;
	opacity: 1;
}

.gtp-header__search-form {
	max-width: 1320px;
	margin: 0 auto;
	padding: 24px 28px;
	display: flex;
	align-items: center;
	gap: 16px;
}

.gtp-header__search-label {
	font-family: "Archivo", Arial, sans-serif;
	font-size: 0.6rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--gtp-blue, #1684dd) !important;
	flex-shrink: 0;
}

.gtp-header__search-input {
	flex: 1;
	background: transparent !important;
	border: none !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.25) !important;
	padding: 8px 2px;
	color: #ffffff !important;
	font-family: "Archivo", Arial, sans-serif;
	font-size: 1.05rem;
	outline: none;
}

.gtp-header__search-input::placeholder {
	color: rgba(255, 255, 255, 0.58) !important;
}

.gtp-header__search-submit,
.gtp-header__search-close {
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent !important;
	border: none !important;
	color: #ffffff !important;
	cursor: pointer;
	padding: 6px;
	flex-shrink: 0;
}

.gtp-header__search-close {
	font-size: 1.5rem;
	line-height: 1;
	color: rgba(255, 255, 255, 0.65) !important;
}

/* =========================================================================
   MOBILE: Fullscreen-Takeover
   ========================================================================= */

.gtp-mobile {
	position: fixed;
	inset: 0;
	z-index: 60;
	visibility: hidden;
	pointer-events: none;
}

.gtp-mobile.is-open {
	visibility: visible;
	pointer-events: auto;
}

.gtp-mobile__panel {
	position: absolute;
	inset: 0;
	background: var(--gtp-ink, #060606);
	display: flex;
	flex-direction: column;
	padding: 22px 24px 40px;
	clip-path: circle(0% at calc(100% - 40px) 40px);
	transition: clip-path 0.55s cubic-bezier(0.16, 1, 0.3, 1);
	overflow-y: auto;
}

.gtp-mobile.is-open .gtp-mobile__panel {
	clip-path: circle(150% at calc(100% - 40px) 40px);
}

.gtp-mobile__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 30px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.gtp-mobile__tag {
	font-family: "Archivo", Arial, sans-serif;
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.65) !important;
}

.gtp-mobile__close {
	background: transparent !important;
	border: none !important;
	color: #ffffff !important;
	font-size: 2rem;
	line-height: 1;
	cursor: pointer;
	padding: 0 4px;
}

.gtp-mobile__nav {
	padding-top: 34px;
}

.gtp-mobile__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: gtpmob;
}

.gtp-mobile__menu > li {
	counter-increment: gtpmob;
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.gtp-mobile__menu > li > a {
	display: flex;
	align-items: baseline;
	gap: 14px;
	padding: 20px 0;
	color: #ffffff !important;
	text-decoration: none;
	font-family: "Pricedown", "Anton", sans-serif;
	font-size: 2rem;
	line-height: 1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.gtp-mobile__menu > li > a::before {
	content: counter(gtpmob, decimal-leading-zero);
	font-family: "Archivo", Arial, sans-serif;
	font-size: 0.6rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	color: var(--gtp-blue, #1684dd) !important;
}

.gtp-mobile__foot {
	display: flex;
	gap: 24px;
	margin-top: auto;
	padding-top: 32px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.gtp-mobile__foot a {
	color: rgba(255, 255, 255, 0.72) !important;
	text-decoration: none;
	font-family: "Archivo", Arial, sans-serif;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */

@media (max-width: 900px) {
	.gtp-header__nav {
		display: none !important;
	}
	.gtp-header__burger {
		display: flex !important;
	}
	.gtp-header__inner {
		height: 64px;
		padding: 0 18px;
	}
	.gtp-header__status-inner {
		padding: 0 18px;
	}
	.gtp-header__status-clock {
		display: none;
	}
	.gtp-header__actions {
		gap: 12px;
	}
	.gtp-header__search-form {
		padding: 20px 18px;
	}
	.gtp-header__search-label {
		display: none;
	}
}

@media (max-width: 520px) {
	.gtp-header__status-tag {
		font-size: 0.55rem;
		letter-spacing: 0.14em;
	}
	.gtp-header__status-msg {
		font-size: 0.55rem;
		letter-spacing: 0.12em;
	}
	.gtp-mobile__menu > li > a {
		font-size: 1.6rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gtp-header__status,
	.gtp-header__inner,
	.gtp-header__logo img,
	.gtp-header__status-msg,
	.gtp-mobile__panel {
		transition: none !important;
	}
	.gtp-mobile__panel {
		clip-path: none !important;
		opacity: 0;
	}
	.gtp-mobile.is-open .gtp-mobile__panel {
		opacity: 1;
	}
}


/* =========================================================================
   GRAND THEFT PLANET – FOOTER (END OF TRANSMISSION)
   ========================================================================= */

.gtp-footer {
	position: relative;
	background: var(--gtp-ink, #060606) !important;
	overflow: hidden;
	padding-top: 1px;
}

/* ---------- Horizont: Krümmung des Planeten aus dem Hero ---------- */
.gtp-footer__horizon {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 160%;
	height: 340px;
	border-radius: 50% 50% 0 0 / 100% 100% 0 0;
	background:
		radial-gradient(70% 100% at 50% 100%, rgba(22, 132, 221, 0.22) 0%, rgba(22, 132, 221, 0) 70%),
		radial-gradient(50% 100% at 30% 100%, rgba(148, 190, 114, 0.14) 0%, rgba(148, 190, 114, 0) 70%);
	pointer-events: none;
}

.gtp-footer__horizon::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	border-top: 1px solid rgba(22, 132, 221, 0.4);
	box-shadow: 0 -1px 26px rgba(22, 132, 221, 0.28);
}

/* ---------- Signal-Statuszeile ---------- */
.gtp-footer__status {
	position: relative;
	z-index: 1;
	max-width: 1320px;
	margin: 0 auto;
	padding: 46px 28px 0;
	display: flex;
	align-items: center;
	gap: 10px;
}

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

@media (prefers-reduced-motion: no-preference) {
	.gtp-footer__signal {
		animation: gtpFooterSignal 2.4s ease-in-out infinite;
	}
}

@keyframes gtpFooterSignal {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.25; }
}

.gtp-footer__status-text {
	font-family: "Archivo", Arial, sans-serif;
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.65) !important;
}

/* ---------- Spalten ---------- */
.gtp-footer__inner {
	position: relative;
	z-index: 1;
	max-width: 1320px;
	margin: 0 auto;
	padding: 44px 28px 48px;
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1.4fr;
	gap: 44px;
}

.gtp-footer__logo {
	display: inline-block;
	font-family: "Pricedown", "Anton", sans-serif;
	font-size: 1.5rem;
	letter-spacing: 0.02em;
	color: #ffffff !important;
	text-decoration: none;
	text-transform: uppercase;
	margin-bottom: 16px;
}

.gtp-footer__blurb {
	font-family: "Archivo", Arial, sans-serif;
	font-size: 0.85rem;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.72) !important;
	margin: 0 0 22px;
	max-width: 300px;
}

.gtp-footer__social {
	display: flex;
	gap: 10px;
}

.gtp-footer__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1px solid rgba(255, 255, 255, 0.16) !important;
	border-radius: 4px;
	color: #ffffff !important;
	transition: border-color 0.25s ease, background-color 0.25s ease;
}

.gtp-footer__icon:hover,
.gtp-footer__icon:focus-visible {
	border-color: var(--gtp-blue, #1684dd) !important;
	background: rgba(22, 132, 221, 0.14) !important;
}

.gtp-footer__heading {
	display: flex;
	align-items: baseline;
	gap: 9px;
	font-family: "Archivo", Arial, sans-serif;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #ffffff !important;
	margin: 0 0 20px;
}

.gtp-footer__heading span {
	font-size: 0.58rem;
	letter-spacing: 0.1em;
	color: var(--gtp-blue, #1684dd) !important;
}

.gtp-footer__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 13px;
}

.gtp-footer__menu a {
	position: relative;
	display: inline-block;
	color: rgba(255, 255, 255, 0.72) !important;
	text-decoration: none;
	font-family: "Archivo", Arial, sans-serif;
	font-size: 0.85rem;
	transition: color 0.2s ease, padding-left 0.25s ease;
}

.gtp-footer__menu a::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 0;
	height: 1px;
	background: var(--gtp-blue-solid, #1479ca) !important;
	transition: width 0.25s ease;
}

.gtp-footer__menu a:hover,
.gtp-footer__menu a:focus-visible {
	color: #ffffff !important;
	padding-left: 16px;
}

.gtp-footer__menu a:hover::before,
.gtp-footer__menu a:focus-visible::before {
	width: 10px;
}

/* ---------- Newsletter ---------- */
.gtp-footer__newsletter-copy {
	font-family: "Archivo", Arial, sans-serif;
	font-size: 0.85rem;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.72) !important;
	margin: 0 0 18px;
}

.gtp-footer__newsletter-row {
	display: flex;
	align-items: stretch;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 4px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.03);
	transition: border-color 0.25s ease;
}

.gtp-footer__newsletter-row:focus-within {
	border-color: var(--gtp-blue, #1684dd);
}

.gtp-footer__newsletter-input {
	flex: 1;
	min-width: 0;
	background: transparent !important;
	border: none !important;
	padding: 13px 16px;
	color: #ffffff !important;
	font-family: "Archivo", Arial, sans-serif;
	font-size: 0.85rem;
	outline: none;
}

.gtp-footer__newsletter-input::placeholder {
	color: rgba(255, 255, 255, 0.58) !important;
}

.gtp-footer__newsletter-submit {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	background: var(--gtp-blue-solid, #1479ca) !important;
	border: none !important;
	color: #ffffff !important;
	cursor: pointer;
	transition: background-color 0.2s ease;
	flex-shrink: 0;
}

.gtp-footer__newsletter-submit:hover,
.gtp-footer__newsletter-submit:focus-visible {
	background: var(--gtp-blue-dark, #0e5690) !important;
}

.gtp-footer__newsletter-msg {
	min-height: 18px;
	margin: 11px 0 0;
	font-family: "Archivo", Arial, sans-serif;
	font-size: 0.76rem;
	letter-spacing: 0.04em;
	color: var(--gtp-green, #94be72) !important;
}

.gtp-footer__newsletter-msg.is-error {
	color: rgba(255, 255, 255, 0.8) !important;
}

/* ---------- Untere Zeile ---------- */
.gtp-footer__bottom {
	position: relative;
	z-index: 1;
	max-width: 1320px;
	margin: 0 auto;
	padding: 22px 28px;
	border-top: 1px solid rgba(255, 255, 255, 0.07);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
}

.gtp-footer__copy {
	margin: 0;
	font-family: "Archivo", Arial, sans-serif;
	font-size: 0.72rem;
	letter-spacing: 0.04em;
	color: rgba(255, 255, 255, 0.58) !important;
}

.gtp-footer__payments {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.gtp-footer__payments span {
	font-family: "Archivo", Arial, sans-serif;
	font-size: 0.65rem;
	letter-spacing: 0.06em;
	color: rgba(255, 255, 255, 0.65) !important;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 4px;
	padding: 5px 10px;
}

/* ---------- Riesiger Schriftzug ---------- */
.gtp-footer__wordmark {
	position: relative;
	z-index: 1;
	margin-top: 8px;
	height: clamp(72px, 11vw, 168px);
	overflow: hidden;
	display: flex;
	justify-content: center;
	pointer-events: none;
	user-select: none;
}

.gtp-footer__wordmark span {
	display: block;
	font-family: "Pricedown", "Anton", sans-serif;
	font-size: clamp(4.2rem, 15.5vw, 15rem);
	line-height: 1;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	white-space: nowrap;
	color: rgba(255, 255, 255, 0.58) !important;
	background-image: linear-gradient(100deg, rgba(255, 255, 255, 0.07) 38%, rgba(22, 132, 221, 0.55) 50%, rgba(255, 255, 255, 0.07) 62%);
	background-size: 300% 100%;
	background-position: 120% 0;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

@media (prefers-reduced-motion: no-preference) {
	.gtp-footer__wordmark span {
		animation: gtpWordmarkSweep 7s ease-in-out infinite;
	}
}

@keyframes gtpWordmarkSweep {
	0% { background-position: 130% 0; }
	60%, 100% { background-position: -30% 0; }
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */

@media (max-width: 980px) {
	.gtp-footer__inner {
		grid-template-columns: 1fr 1fr;
		gap: 36px;
	}
	.gtp-footer__col--brand,
	.gtp-footer__col--newsletter {
		grid-column: 1 / -1;
	}
}

@media (max-width: 560px) {
	.gtp-footer__status,
	.gtp-footer__inner,
	.gtp-footer__bottom {
		padding-left: 18px;
		padding-right: 18px;
	}
	.gtp-footer__inner {
		grid-template-columns: 1fr;
		gap: 32px;
		padding-top: 36px;
		padding-bottom: 36px;
	}
	.gtp-footer__col--brand,
	.gtp-footer__col--newsletter {
		grid-column: auto;
	}
	.gtp-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
	}
}


.gtp-cart-drawer {
	position: fixed;
	inset: 0;
	z-index: 200;
	visibility: hidden;
	pointer-events: none;
}

.gtp-cart-drawer.is-open {
	visibility: visible;
	pointer-events: auto;
}

.gtp-cart-drawer__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.gtp-cart-drawer.is-open .gtp-cart-drawer__backdrop {
	opacity: 1;
}

.gtp-cart-drawer__panel {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: min(90vw, 420px);
	background: var(--gtp-ink, #060606);
	color: #ffffff;
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.gtp-cart-drawer.is-open .gtp-cart-drawer__panel {
	transform: translateX(0);
}

.gtp-cart-drawer__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 24px 24px 16px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.gtp-cart-drawer__header h2 {
	font-family: "Archivo", Arial, sans-serif;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin: 0;
	color: #ffffff !important;
}

.gtp-cart-drawer__close {
	background: none !important;
	border: none !important;
	color: #ffffff !important;
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
	padding: 4px;
}

.gtp-cart-drawer__added-note {
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	padding: 0 24px;
	font-family: "Archivo", Arial, sans-serif;
	font-size: 0.8rem;
	color: var(--gtp-green, #94be72) !important;
	transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
}

.gtp-cart-drawer__added-note.is-visible {
	max-height: 40px;
	opacity: 1;
	padding: 12px 24px;
}

.gtp-cart-drawer__body {
	flex: 1;
	overflow-y: auto;
	padding: 20px 24px 24px;
}

/* ---------- WooCommerce Mini-Cart neu gestylt ---------- */
.gtp-cart-drawer__body .woocommerce-mini-cart {
	list-style: none;
	margin: 0;
	padding: 0;
}

.gtp-cart-drawer__body .woocommerce-mini-cart-item {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
	align-items: flex-start;
	padding: 16px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.gtp-cart-drawer__body .woocommerce-mini-cart-item img {
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: 4px;
	flex-shrink: 0;
}

/* WooCommerce verlinkt Bild + Produktname gemeinsam in einem <a> statt sie
   als getrennte Geschwister auszugeben. Der Link selbst muss deshalb der
   Flex-Container sein, sonst läuft der Text hinter/über das Bild. */
.gtp-cart-drawer__body .woocommerce-mini-cart-item > a:not(.remove) {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	flex: 1 1 auto;
	min-width: 0;
	color: #ffffff !important;
	text-decoration: none !important;
	font-family: "Archivo", Arial, sans-serif;
	font-size: 0.85rem;
}

.gtp-cart-drawer__body .quantity {
	display: block;
	width: 100%;
	padding-left: 78px;
	box-sizing: border-box;
	margin-top: 0;
	font-family: "Archivo", Arial, sans-serif;
	font-size: 0.78rem;
	color: rgba(255, 255, 255, 0.72) !important;
}

.gtp-cart-drawer__body .remove {
	position: absolute;
	top: 16px;
	right: 0;
	color: rgba(255, 255, 255, 0.65) !important;
	text-decoration: none;
	font-size: 1.1rem;
	line-height: 1;
}

.gtp-cart-drawer__body .remove:hover {
	color: #ffffff !important;
}

.gtp-cart-drawer__body .total {
	display: flex;
	justify-content: space-between;
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	font-family: "Archivo", Arial, sans-serif;
	font-weight: 600;
	font-size: 0.9rem;
	color: #ffffff !important;
}

.gtp-cart-drawer__body .woocommerce-mini-cart__buttons {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 20px 0 0;
	padding: 0;
}

.gtp-cart-drawer__body .woocommerce-mini-cart__buttons a {
	display: block;
	text-align: center;
	padding: 14px;
	font-family: "Archivo", Arial, sans-serif;
	font-weight: 600;
	font-size: 0.8rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.gtp-cart-drawer__body .wc-forward {
	border: 2px solid #ffffff !important;
	color: #ffffff !important;
}

.gtp-cart-drawer__body .wc-forward:hover {
	background: #ffffff !important;
	color: var(--gtp-ink, #060606) !important;
}

.gtp-cart-drawer__body .checkout.wc-forward {
	background: var(--gtp-blue-solid, #1479ca) !important;
	border: 2px solid var(--gtp-blue-solid, #1479ca) !important;
	color: #ffffff !important;
}

.gtp-cart-drawer__body .checkout.wc-forward:hover {
	background: var(--gtp-blue-dark, #0e5690) !important;
	border-color: var(--gtp-blue-dark, #0e5690) !important;
}

.gtp-cart-drawer__body .woocommerce-mini-cart__empty-message {
	font-family: "Archivo", Arial, sans-serif;
	font-size: 0.9rem;
	color: rgba(255, 255, 255, 0.72) !important;
}

/* -------------------------------------------------------------------------
   Bewegungsreduzierung: Nutzer mit entsprechender Systemeinstellung sehen
   das Panel ohne Ein-/Ausfahr-Animation.
   ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.gtp-cart-drawer__backdrop,
	.gtp-cart-drawer__panel,
	.gtp-cart-drawer__added-note,
	.gtp-cart-drawer__body .woocommerce-mini-cart__buttons a {
		transition: none !important;
	}
}


/* =========================================================================
   GETEILTE BAUTEILE
   HUD-Seitenkopf und Signal-Zeilen. Liegen in core.css, weil sie von
   Shop, Suche, Konto, Inhaltsseiten und 404 gemeinsam genutzt werden.
   ========================================================================= */
body.gtp-content-page h1:not(.gtp-hud__title),
body.gtp-search-page h1:not(.gtp-hud__title),
body.gtp-404-page h1:not(.gtp-404__title):not(.gtp-hud__title) {
	display: none !important;
}.gtp-hud {
	position: relative;
	background:
		radial-gradient(80% 100% at 50% 0%, rgba(22, 132, 221, 0.1) 0%, rgba(22, 132, 221, 0) 70%),
		transparent;
}.gtp-hud__inner {
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 28px 34px;
	box-sizing: border-box;
	border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}.gtp-hud__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 16px;
	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-hud__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;
}@media (prefers-reduced-motion: no-preference) {
	.gtp-hud__signal {
		animation: gtpHudSignal 2.4s ease-in-out infinite;
	}
}@keyframes gtpHudSignal {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.25; }
}.gtp-hud__title {
	font-family: "Pricedown", "Anton", sans-serif;
	font-size: clamp(2.2rem, 5.5vw, 4rem);
	line-height: 1.02;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #ffffff !important;
	margin: 0 0 24px !important;
	padding: 0 !important;
	word-break: break-word;
}.gtp-hud__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 34px;
}.gtp-hud__stat {
	display: flex;
	flex-direction: column;
	gap: 5px;
}.gtp-hud__stat-label {
	font-family: "Archivo", Arial, sans-serif;
	font-size: 0.58rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.58) !important;
}.gtp-hud__stat-value {
	font-family: "Archivo", Arial, sans-serif;
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #ffffff !important;
	font-variant-numeric: tabular-nums;
}.gtp-hud__stat-value--live {
	color: var(--gtp-green, #94be72) !important;
}.gtp-signals {
	list-style: none !important;
	margin: 26px 0 0 !important;
	padding: 22px 0 0 !important;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	display: flex;
	flex-direction: column;
	gap: 11px;
}.gtp-signals li {
	display: flex;
	align-items: center;
	gap: 11px;
	margin: 0;
	padding: 0;
	list-style: none !important;
	font-family: "Archivo", Arial, sans-serif;
	font-size: 0.8rem;
	color: rgba(255, 255, 255, 0.65) !important;
}.gtp-signals__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;
}

/* =========================================================================
   KRITISCHE KORREKTUREN

   1. Logo-Größe gegen WooCommerce-CSS absichern
   2. Theme-Seitentitel auf der Startseite ausblenden
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. LOGO

   WooCommerce liefert `.woocommerce-page img { height: auto; }` mit –
   exakt dieselbe Spezifität wie `.gtp-header__logo img`, aber später
   geladen, also gewann sie. Ergebnis: das Logo wurde auf WooCommerce-
   Seiten in Originalgröße dargestellt (riesig), auf allen anderen Seiten
   dagegen korrekt. Deshalb hier !important plus fester Deckel.
   ---------------------------------------------------------------------- */

.gtp-header .gtp-header__logo img,
body.woocommerce-page .gtp-header__logo img,
body.woocommerce .gtp-header__logo img {
	display: block !important;
	height: 40px !important;
	max-height: 40px !important;
	width: auto !important;
	max-width: 220px !important;
	object-fit: contain;
}

.gtp-header.is-scrolled .gtp-header__logo img,
body.woocommerce-page .gtp-header.is-scrolled .gtp-header__logo img {
	height: 32px !important;
	max-height: 32px !important;
}

@media (max-width: 640px) {
	.gtp-header .gtp-header__logo img,
	body.woocommerce-page .gtp-header__logo img {
		height: 32px !important;
		max-height: 32px !important;
		max-width: 150px !important;
	}
	.gtp-header.is-scrolled .gtp-header__logo img,
	body.woocommerce-page .gtp-header.is-scrolled .gtp-header__logo img {
		height: 28px !important;
		max-height: 28px !important;
	}
}

/* -------------------------------------------------------------------------
   2. THEME-SEITENTITEL

   Das Theme gab auf der Startseite einen weißen Balken mit dem Seitentitel
   ("Homepage") zwischen Inhalt und Footer aus. Wir liefern auf jeder Seite
   eigene Überschriften, also fliegt der Theme-Titel sitewide raus – hier
   sicherheitshalber über mehrere gängige Klassennamen UND über jede H1,
   die nicht von uns stammt.
   ---------------------------------------------------------------------- */

body.gtp-has-hero .entry-header,
body.gtp-has-hero .page-header,
body.gtp-has-hero .entry-title,
body.gtp-has-hero .page-title,
body.gtp-has-hero h1:not(.gtp-hero__headline):not(.gtp-hud__title):not(.gtp-flow__title) {
	display: none !important;
}

/* Der weiße Balken kam vom Theme-Wrapper um den Titel. */
body.gtp-has-hero .site-main > .entry-header,
body.gtp-has-hero .site-main > header,
body.gtp-has-hero article > header {
	display: none !important;
	background: transparent !important;
}


/* =========================================================================
   HINWEISBOXEN – SIGNAL-PUNKT

   Zwei Anlaeufe haben nicht gehalten:
     1. inline-block im Textfluss -> rutschte bei Umbruch auf eine
        eigene Zeile ueber den ersten Buchstaben
     2. Flex mit gap -> WooCommerce setzt an manchen Stellen eigene
        display-Werte, die das Flex-Layout aushebeln

   Deshalb jetzt absolut positioniert. Der Punkt sitzt an festen
   Koordinaten im Kasten und kann den Text unter keinen Umstaenden mehr
   beruehren, egal welches display der Kasten hat oder wie der Text
   umbricht. Der Platz dafuer kommt aus padding-left am Kasten selbst.
   ========================================================================= */

.woocommerce-info,
.woocommerce-message,
.woocommerce-error,
.woocommerce-NoticeGroup > .woocommerce-error,
.woocommerce-NoticeGroup > .woocommerce-message {
	position: relative !important;
	padding-left: 44px !important;
	list-style: none !important;
}

.woocommerce-info::before,
.woocommerce-message::before,
.woocommerce-error::before,
.woocommerce-NoticeGroup > .woocommerce-error::before,
.woocommerce-NoticeGroup > .woocommerce-message::before {
	content: '' !important;
	position: absolute !important;
	left: 22px !important;
	top: 1.45em !important;
	width: 6px !important;
	height: 6px !important;
	margin: 0 !important;
	padding: 0 !important;
	border-radius: 50% !important;
	background: var(--gtp-blue, #1684dd) !important;
	border: none !important;
	font-size: inherit !important;
	line-height: 1 !important;
	transform: none !important;
}

/* Auf der Bestellbestaetigung ist Gruen die Leitfarbe */
body.gtp-order-page .woocommerce-info::before,
body.gtp-order-page .woocommerce-message::before,
body.gtp-order-page .woocommerce-error::before {
	/* WooCommerce setzt auf dieses Pseudo-Element ein position:absolute
	   mit top/left. Ohne die naechsten drei Zeilen bleibt der Punkt absolut
	   positioniert und liegt mitten im Text statt daneben. */
	position: static !important;
	top: auto !important;
	left: auto !important;
	background: var(--gtp-green, #94be72) !important;
}

/* Listen-Meldungen (WooCommerce nutzt teils <ul>) */
ul.woocommerce-error li,
ul.woocommerce-message li,
ul.woocommerce-info li {
	list-style: none !important;
	margin-left: 0 !important;
}



/* =========================================================================
   WOOCOMMERCE-HINWEISBOXEN – POSITIONIERUNG ZURUECKSETZEN

   WooCommerce setzt auf .woocommerce-info::before / -message / -error sein
   eigenes Icon MIT position:absolute (top:1em, left:1.5em). Wir ersetzen
   nur den Inhalt durch unseren Signal-Punkt - die absolute Positionierung
   blieb aber bestehen, weshalb der Punkt mitten im ersten Buchstaben lag
   ("Have a coupon?", "Sorry, it seems...").

   Diese Regeln stehen bewusst am Dateiende und ohne body-Praefix, damit
   sie in jedem Kontext greifen und zuletzt gewinnen.
   ========================================================================= */

.woocommerce-info,
.woocommerce-message,
.woocommerce-error {
	position: relative;
	display: flex !important;
	align-items: flex-start;
	gap: 12px;
	flex-wrap: wrap;
	padding-left: 22px !important;
}

.woocommerce-info::before,
.woocommerce-message::before,
.woocommerce-error::before {
	content: '' !important;
	position: static !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	bottom: auto !important;
	display: block !important;
	flex-shrink: 0;
	width: 6px !important;
	height: 6px !important;
	min-width: 6px;
	margin: 0.55em 0 0 !important;
	padding: 0 !important;
	border-radius: 50% !important;
	font-size: 0 !important;
	line-height: 0 !important;
	background: var(--gtp-blue, #1684dd) !important;
	color: transparent !important;
}

/* Auf der Bestellbestaetigung ist Gruen die Leitfarbe */
body.gtp-order-page .woocommerce-info::before,
body.gtp-order-page .woocommerce-message::before,
body.gtp-order-page .woocommerce-error::before {
	/* WooCommerce setzt auf dieses Pseudo-Element ein position:absolute
	   mit top/left. Ohne die naechsten drei Zeilen bleibt der Punkt absolut
	   positioniert und liegt mitten im Text statt daneben. */
	position: static !important;
	top: auto !important;
	left: auto !important;
	background: var(--gtp-green, #94be72) !important;
}