/* ==========================================================================
   Goldstück – Package-Slider (Plugin)
   Optik wie der bisherige Elementor-Slider auf der Startseite:
   Sand-Fläche, Karten mit 1px Goldrahmen, Bild 200px, goldener Button.
   3 Karten Desktop / 2 Tablet / 1 Mobil, 16px Abstand.
   Farben: Elementor-Kit-Werte, später automatisch die theme.json-Presets.
   ========================================================================== */

.gs-packages {
	--gs-ink:  var(--wp--preset--color--ink,  #38424D);
	--gs-sand: var(--wp--preset--color--sand, #E2DCDA);
	--gs-gold: var(--wp--preset--color--gold, #C4AD82);
	--gs-white: #FFFFFF;
	--gs-per-view: 3;
	--gs-gap: 16px;
	--gs-side: 3vw;

	color: var(--gs-ink);
}
.gs-packages--flaeche {
	background: var(--gs-sand);
	padding: clamp(56px, 7vw, 110px) clamp(16px, 4vw, 48px);
}

.gs-packages .gs-packages__head {
	text-align: center;
	max-width: 760px;
	margin-inline: auto;
	margin-block: 0 clamp(28px, 3.5vw, 48px);
}

/* ---------- Slider-Rahmen (wird per JS um die Spur gelegt) ---------- */
.gs-packages__viewport {
	position: relative;
	padding-inline: var(--gs-side);
}

.gs-packages .gs-packages__track {
	display: flex;
	gap: var(--gs-gap);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	position: relative;
	margin: 0;
	padding: 0;
}
.gs-packages .gs-packages__track::-webkit-scrollbar { display: none; }
.gs-packages .gs-packages__track.is-dragging { scroll-snap-type: none; cursor: grabbing; }
.gs-packages .gs-packages__track.is-dragging * { user-select: none; pointer-events: none; }

/* ---------- Karte ---------- */
.gs-packages .gs-package {
	flex: 0 0 calc((100% - (var(--gs-per-view) - 1) * var(--gs-gap)) / var(--gs-per-view));
	min-width: 0;
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	gap: 0;
	border: 1px solid var(--gs-gold);
	padding: max(1vw, 12px);
	margin: 0;
	box-sizing: border-box;
}

.gs-packages .gs-package__img { display: block; margin: 0 0 18px; }
.gs-packages .gs-package__img img {
	display: block;
	width: 100%;
	min-width: 100%;
	height: 200px;
	object-fit: cover;
	object-position: center;
}

.gs-packages .gs-package__title {
	font-size: clamp(19px, 1.5vw, 22px);
	line-height: 1.2;
	margin: 0 0 10px;
}

.gs-packages .gs-package__teaser {
	font-size: 15px;
	line-height: 1.55;
	margin: 0 0 20px;
}

/* Button unten bündig, volle Breite, Gold mit weißer Mono-Schrift */
.gs-packages .gs-package__btn {
	display: block;
	margin-top: auto;
	width: 100%;
	box-sizing: border-box;
	background: var(--gs-gold);
	color: var(--gs-white);
	border: 0;
	border-radius: 0;
	text-decoration: none !important;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-family: "GT Pressura Pro Mono", "GT Pressura", ui-monospace, monospace;
	font-weight: 500;
	font-size: 15px;
	line-height: 1.3;
	padding: 12px 20px;
	transition: background-color .2s ease;
}
.gs-packages .gs-package__btn:hover,
.gs-packages .gs-package__btn:focus-visible {
	background: var(--gs-ink);
	color: var(--gs-white);
}
.gs-packages .screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* ---------- Pfeile ---------- */
.gs-packages__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	background: none;
	color: var(--gs-ink);
	cursor: pointer;
}
.gs-packages__arrow--prev { left: calc(var(--gs-side) / 2 - 20px); }
.gs-packages__arrow--next { right: calc(var(--gs-side) / 2 - 20px); }
.gs-packages__arrow svg { width: 22px; height: 22px; }
.gs-packages__arrow:hover { color: var(--gs-gold); }
.gs-packages__arrow[hidden] { display: none; }

/* ---------- Punkte ---------- */
.gs-packages__dots {
	display: flex;
	justify-content: center;
	gap: 4px;
	margin-top: 22px;
}
.gs-packages__dots[hidden] { display: none; }
.gs-packages__dot {
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	display: grid;
	place-items: center;
}
.gs-packages__dot::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--gs-ink);
	opacity: .25;
	transition: opacity .2s ease;
}
.gs-packages__dot[aria-current="true"]::before { opacity: 1; }

.gs-packages__arrow:focus-visible,
.gs-packages__dot:focus-visible,
.gs-packages .gs-package a:focus-visible {
	outline: 2px solid var(--gs-ink);
	outline-offset: 2px;
}

.gs-packages .gs-packages__all { margin: 34px 0 0; text-align: center; }
.gs-packages .gs-packages__all-btn {
	display: inline-block;
	border: 1px solid var(--gs-ink);
	color: var(--gs-ink);
	text-decoration: none !important;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 15px;
	padding: 12px 26px;
}
.gs-packages .gs-packages__all-btn:hover { background: var(--gs-ink); color: var(--gs-white); }
.gs-packages .gs-packages__fallback { text-align: center; }
.gs-packages .gs-packages__fallback .gs-package__btn { display: inline-block; width: auto; }

/* ---------- Tablet / Mobil ---------- */
@media (max-width: 1024px) {
	.gs-packages { --gs-per-view: 2; }
}
@media (max-width: 767px) {
	.gs-packages { --gs-per-view: 1; --gs-side: 34px; }
	.gs-packages .gs-package { padding: 3vw; }
	.gs-packages__arrow--prev { left: -6px; }
	.gs-packages__arrow--next { right: -6px; }
}