/**
 * Frontend tool interpreter styles (ss-tools.js) — tabs slider, Swiper shells.
 */
.ss-tabs-slider {
	width: 100%;
}
.ss-tab-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 0.75rem;
	border-bottom: 1px solid var(--ss-color-line, #e5e7eb);
	padding-bottom: 0.5rem;
}
.ss-tab-btn {
	appearance: none;
	border: 1px solid var(--ss-color-line, #e5e7eb);
	background: var(--ss-color-surface, #fff);
	color: var(--ss-color-ink, #111827);
	border-radius: 0;
	padding: 0.375rem 0.75rem;
	font-size: 0.875rem;
	line-height: 1.25rem;
	cursor: pointer;
}
.ss-tab-btn.is-active {
	background: var(--ss-color-primary, #0f766e);
	border-color: var(--ss-color-primary, #0f766e);
	color: var(--ss-color-primary-fg, #fff);
}
.ss-tab-panels {
	width: 100%;
}
.ss-tab-panel {
	display: none;
	width: 100%;
}
.ss-tab-panel.is-active {
	display: block;
}
.ss-tab-swiper {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	overflow: hidden;
}
.ss-content-swiper,
.ss-tool .swiper {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	overflow: hidden;
	position: relative;
}

/* Swiper nav / pagination / scrollbar — use storefront design tokens */
#serverspot-design-frame .swiper,
.ss-content-swiper,
.ss-tab-swiper,
.ss-tool .swiper,
.ss-pdp-gallery-main,
.ss-pdp-gallery-thumbs {
	--swiper-theme-color: var(--ss-color-primary, #0f766e);
	--swiper-navigation-color: var(--ss-color-primary, #0f766e);
	--swiper-pagination-color: var(--ss-color-primary, #0f766e);
	--swiper-pagination-fraction-color: var(--ss-color-ink, #111827);
	--swiper-pagination-bullet-inactive-color: var(--ss-color-muted, #6b7280);
	--swiper-pagination-bullet-inactive-opacity: 0.4;
	--swiper-pagination-progressbar-bg-color: color-mix(
		in srgb,
		var(--ss-color-line, #e5e7eb) 90%,
		transparent
	);
	--swiper-scrollbar-bg-color: color-mix(
		in srgb,
		var(--ss-color-line, #e5e7eb) 85%,
		transparent
	);
	--swiper-scrollbar-drag-bg-color: var(--ss-color-primary, #0f766e);
	--swiper-preloader-color: var(--ss-color-primary, #0f766e);
}

#serverspot-design-frame .swiper-button-prev,
#serverspot-design-frame .swiper-button-next,
.ss-content-swiper .swiper-button-prev,
.ss-content-swiper .swiper-button-next,
.ss-tab-swiper .swiper-button-prev,
.ss-tab-swiper .swiper-button-next,
.ss-tool .swiper .swiper-button-prev,
.ss-tool .swiper .swiper-button-next,
.ss-pdp-gallery-main .swiper-button-prev,
.ss-pdp-gallery-main .swiper-button-next {
	color: var(--ss-color-primary, #0f766e);
}

#serverspot-design-frame .swiper-button-prev.swiper-button-disabled,
#serverspot-design-frame .swiper-button-next.swiper-button-disabled,
.ss-content-swiper .swiper-button-prev.swiper-button-disabled,
.ss-content-swiper .swiper-button-next.swiper-button-disabled,
.ss-tab-swiper .swiper-button-prev.swiper-button-disabled,
.ss-tab-swiper .swiper-button-next.swiper-button-disabled,
.ss-tool .swiper .swiper-button-prev.swiper-button-disabled,
.ss-tool .swiper .swiper-button-next.swiper-button-disabled,
.ss-pdp-gallery-main .swiper-button-prev.swiper-button-disabled,
.ss-pdp-gallery-main .swiper-button-next.swiper-button-disabled {
	opacity: 1;
	color: color-mix(in srgb, var(--ss-color-muted, #6b7280) 55%, transparent);
}

#serverspot-design-frame .swiper-pagination-bullet-active,
.ss-content-swiper .swiper-pagination-bullet-active,
.ss-tab-swiper .swiper-pagination-bullet-active,
.ss-tool .swiper .swiper-pagination-bullet-active,
.ss-pdp-gallery-main .swiper-pagination-bullet-active {
	background: var(--ss-color-primary, #0f766e);
}

.ss-content-swiper .swiper-wrapper {
	min-width: 0;
}
.ss-swiper-content-slide {
	width: 100%;
	min-width: 0;
}
.ss-swiper-content-slide .prose {
	max-width: none;
}

.ss-pdp-gallery {
	width: 100%;
	max-width: 100%;
	min-width: 0;
}
.ss-pdp-gallery-main,
.ss-pdp-gallery-thumbs {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	overflow: hidden;
	position: relative;
}
.ss-pdp-gallery-main .swiper-slide {
	display: flex;
	align-items: center;
	justify-content: center;
}
.ss-pdp-gallery-thumbs {
	height: 4.75rem;
}
.ss-pdp-gallery-thumbs .swiper-slide {
	height: 4.75rem;
	opacity: 0.55;
	cursor: pointer;
	transition: opacity 0.15s ease;
}
.ss-pdp-gallery-thumbs .swiper-slide-thumb-active {
	opacity: 1;
	border-color: var(--ss-color-secondary, #0f766e);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--ss-color-secondary, #0f766e) 35%, transparent);
}

/**
 * Token spinner (S11 §4.3 T-G). Primary ring uses --ss-color-primary.
 * Bib-Editor "Stil & Farben" spinner variants — planned S15 §4.3c, not configurable here.
 */
@keyframes ss-spinner-spin {
	to {
		transform: rotate(360deg);
	}
}

.ss-spinner {
	display: inline-block;
	width: 2rem;
	height: 2rem;
	border-radius: 9999px;
	border: 3px solid color-mix(in srgb, var(--ss-color-primary, #0f766e) 22%, transparent);
	border-top-color: var(--ss-color-primary, #0f766e);
	animation: ss-spinner-spin 0.75s linear infinite;
	flex-shrink: 0;
}

.ss-spinner-sm {
	width: 1.25rem;
	height: 1.25rem;
	border-width: 2px;
}

.ss-spinner-center {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}

/* Gray overlay for inline loading states (minicart, big cart, …). */
.ss-loading-overlay {
	position: absolute;
	inset: 0;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	background: rgb(107 114 128 / 0.28);
}

.ss-loading-overlay--raised {
	z-index: 20;
}

/* Footer grid: legacy Bootstrap col-* on grid children must not shrink columns. */
.ss-footer-grid > .ss-footer-col {
	width: 100%;
	max-width: none;
	flex: none;
}

/* Product ribbons — legacy get_ribbons() markup (.ribbons / .ribbon.*) */
#serverspot-design-frame .ribbons,
.ribbons {
	position: absolute;
	top: 1.25rem;
	left: -0.0625rem;
	z-index: 10;
	pointer-events: none;
}
#serverspot-design-frame .ribbon,
.ribbon {
	display: block;
	float: left;
	clear: both;
	position: relative;
	text-align: center;
	padding: 0.1875rem 0.625rem;
	margin: 0 0 0.3125rem 0;
	margin-left: -8px;
	font-size: 11px;
	font-weight: bold;
	line-height: 1.2;
	white-space: nowrap;
}
#serverspot-design-frame .ribbon::before,
.ribbon::before {
	content: "";
	border: 4px solid transparent;
	position: absolute;
	left: 0;
	bottom: -7px;
}
#serverspot-design-frame .ribbon.sold,
.ribbon.sold {
	color: #e8e8e8;
	background-color: #9e0000;
}
#serverspot-design-frame .ribbon.sold::before,
.ribbon.sold::before {
	border-color: #9e0000 #9e0000 transparent transparent;
}
#serverspot-design-frame .ribbon.sale,
.ribbon.sale {
	background: linear-gradient(var(--ss-color-ribbon_sale_bg), color-mix(in srgb, var(--ss-color-ribbon_sale_bg) 80%, #000));
	color: var(--ss-color-ribbon_sale_text);
}
#serverspot-design-frame .ribbon.new,
.ribbon.new {
	background: linear-gradient(var(--ss-color-ribbon_new_bg), color-mix(in srgb, var(--ss-color-ribbon_new_bg) 80%, #000));
	color: var(--ss-color-ribbon_new_text);
}
#serverspot-design-frame .ribbon.set,
.ribbon.set {
	background: linear-gradient(var(--ss-color-ribbon_set_bg), color-mix(in srgb, var(--ss-color-ribbon_set_bg) 80%, #000));
	color: var(--ss-color-ribbon_set_text);
}
#serverspot-design-frame .ribbon.bundle,
.ribbon.bundle {
	background: linear-gradient(var(--ss-color-ribbon_bundle_bg), color-mix(in srgb, var(--ss-color-ribbon_bundle_bg) 80%, #000));
	color: var(--ss-color-ribbon_bundle_text);
}
#serverspot-design-frame .ribbon.freeship,
.ribbon.freeship {
	background: linear-gradient(var(--ss-color-ribbon_freeship_bg), color-mix(in srgb, var(--ss-color-ribbon_freeship_bg) 80%, #000));
	color: var(--ss-color-ribbon_freeship_text);
}
#serverspot-design-frame .ribbon.highlight,
.ribbon.highlight {
	background: linear-gradient(var(--ss-color-highlight_ribbon), color-mix(in srgb, var(--ss-color-highlight_ribbon) 80%, #000));
	color: var(--ss-color-highlight_ribbon_text);
}

/* Scroll-pinned whole header (ssStickyHeader in ss-actions.js) */
.ss-sticky-header-host.ss-header-is-pinned {
	position: fixed !important;
	top: 0;
	left: 0;
	right: 0;
	z-index: 40;
	width: 100%;
}
.ss-header-sticky-sentinel {
	height: 0;
	overflow: hidden;
}

/* Scroll-pinned main menu (ssStickyMenuBar in ss-actions.js) */
#header.header-menu.ss-menu-is-pinned,
.header-menu.ss-menu-is-pinned {
	position: fixed !important;
	top: 0;
	left: 0;
	right: 0;
	z-index: 40;
	width: 100%;
}
.ss-menu-sticky-sentinel {
	height: 0;
	overflow: hidden;
}

/* Storefront layout — no Tailwind arbitrary utilities (see DESIGN_MIGRATION_ROADMAP §4b) */
.ss-ui-caret {
	font-size: 10px;
	line-height: 1;
}
.ss-flyout-panel {
	min-width: 12rem;
}
.ss-flyout-panel-wide {
	min-width: 16rem;
}
.ss-dropdown-compact {
	min-width: 3rem;
}
.ss-overlay-front {
	z-index: 1200;
}
.ss-search-popup-overlay {
	padding-top: 10vh;
}
.ss-search-backdrop {
	background-color: rgba(0, 0, 0, 0.45);
}
.ss-search-popup-empty {
	padding: 2.5rem 1rem;
	text-align: center;
}
.ss-search-autocomplete-scroll {
	max-height: min(60vh, 24rem);
}
.ss-search-suggest-scroll {
	max-height: min(70vh, 28rem);
}
.ss-search-section-label {
	font-size: 11px;
}
.ss-minicart-dropdown-panel {
	width: min(100vw, 20rem);
}
.ss-qty-value {
	min-width: 1.5rem;
}
.ss-qty-digit {
	min-width: 2ch;
}
.ss-account-dropdown-panel {
	width: min(20rem, calc(100vw - 2rem));
}
.ss-account-dropdown-panel a,
.ss-account-dropdown-panel nav a,
.header-menu .ss-account-dropdown-panel a,
.header-menu .ss-account-dropdown-panel nav a {
	color: var(--ss-color-ink) !important;
}
.ss-account-dropdown-panel a:hover,
.header-menu .ss-account-dropdown-panel a:hover {
	color: var(--ss-color-primary) !important;
}
.ss-nav-utility-btn {
	color: var(--ss-color-menu_text);
}
.header-menu .ss-nav-utility-btn:hover {
	background: var(--ss-color-nav_hover_bg);
	color: var(--ss-color-menu_text_hover);
}
.ss-cart-voucher input:focus {
	outline: none;
	box-shadow: none;
}
.ss-cart-voucher > div:focus-within {
	outline: none;
}
.header-menu > .header-container,
.header-menu .nav_row {
	background: var(--ss-color-menu_bg);
}
#header.header-menu,
.header-menu.w-full.ss-sticky-menu-host {
	max-width: var(--ss-container) !important;
	margin-left: auto !important;
	margin-right: auto !important;
	width: 100%;
	box-sizing: border-box;
}
.ss-announcement-bar {
	position: relative;
}
.ss-announcement-bar .ss-announcement-dismiss {
	position: absolute;
	right: var(--ss-pad-container, 1rem);
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	margin-right: 0;
}
.ss-announcement-rotator-track {
	width: 100%;
}
.ss-announcement-countdown {
	white-space: nowrap;
}
.ss-market-flag {
	width: 1.75rem;
	height: auto;
	max-width: 1.75rem;
}
.ss-nav-drawer-panel {
	width: min(100%, 270px);
}
.ss-video-embed {
	min-height: 240px;
}
.ss-hero-min {
	min-height: 280px;
}
.ss-slider-stage {
	min-height: 280px;
}
@media (min-width: 768px) {
	.ss-hero-min {
		min-height: 360px;
	}
	.ss-slider-stage {
		min-height: 450px;
	}
}
.ss-category-tile {
	min-height: 5.5rem;
}
.ss-header-sticky-top {
	position: sticky;
	top: 0;
	z-index: 40;
}
.ss-header-transparent-home {
	background: transparent;
}
.ss-sidebar-sticky {
	position: sticky;
	top: 0;
	align-self: flex-start;
}
@media (min-width: 1024px) {
	.ss-checkout-summary-sticky {
		position: sticky;
		top: calc(var(--ss-sticky-shell-top, 0px) + var(--ss-gap-block, 1rem));
		align-self: start;
		height: fit-content;
		max-height: calc(
			100dvh - var(--ss-sticky-shell-top, 0px) - var(--ss-checkout-summary-sticky-offset, 2rem)
		);
	}
	.ss-checkout-summary-sticky [data-ss-summary-scroll] {
		flex: 1 1 auto;
		min-height: 0;
		overflow-y: auto;
	}
}
.ss-checkout-summary-col {
	align-self: stretch;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}
.ss-sidebar-gap-compact {
	gap: var(--ss-gap-inline);
}
.ss-sidebar-gap-normal {
	gap: var(--ss-gap-block);
}
.ss-sidebar-gap-relaxed {
	gap: calc(var(--ss-gap-block) * 1.5);
}
.ss-footer-legal-inline .footer_link {
	display: inline-block;
	margin-right: var(--ss-gap-inline);
}
.ss-footer-legal-stacked .footer_link {
	display: block;
	margin-bottom: var(--ss-gap-inline);
}

/* Design-setting runtime consumers (contract-backed, no arbitrary Tailwind) */
.ss-mega-menu-sticky {
	position: sticky;
	top: 0;
	z-index: 40;
}
.ss-mega-menu-cols-2 .ss-mega-columns > .ss-mega-col {
	flex: 1 1 50%;
	max-width: 50%;
}
.ss-mega-menu-cols-3 .ss-mega-columns > .ss-mega-col {
	flex: 1 1 33.3333%;
	max-width: 33.3333%;
}
.ss-mega-menu-cols-4 .ss-mega-columns > .ss-mega-col {
	flex: 1 1 25%;
	max-width: 25%;
}
.ss-mega-menu-cols-5 .ss-mega-columns > .ss-mega-col {
	flex: 1 1 20%;
	max-width: 20%;
}
.ss-mega-menu-cols-6 .ss-mega-columns > .ss-mega-col {
	flex: 1 1 16.6667%;
	max-width: 16.6667%;
}
.ss-discount-output-short .ss-discount-price-full,
.ss-discount-output-short .ss-discount-price-uvp {
	display: none;
}
.ss-discount-output-full .ss-discount-price-short,
.ss-discount-output-full .ss-discount-price-uvp {
	display: none;
}
.ss-discount-output-uvp .ss-discount-price-short,
.ss-discount-output-uvp .ss-discount-price-full {
	display: none;
}
.ss-variant-mode-each .ss-variant-picker-slot {
	display: block;
}
.ss-variant-mode-grouped .ss-variant-picker-slot {
	display: none;
}
.ss-search-variant-mode-each::after {
	content: "Suche: Varianten einzeln";
	display: block;
	font-size: 0.65rem;
	color: var(--ss-color-muted, #6b7280);
	margin-top: 0.25rem;
}
.ss-search-variant-mode-grouped::after {
	content: "";
	display: none;
}
.ss-pdp-gallery-zoom .ss-pdp-gallery-img {
	cursor: zoom-in;
}
.ss-pdp-gallery-zoom .ss-pdp-gallery-main:hover .ss-pdp-gallery-img {
	transform: scale(1.02);
	transition: transform 0.2s ease;
}
.ss-login-box-side-left {
	margin-right: auto;
	max-width: 20rem;
}
.ss-login-box-side-right {
	margin-left: auto;
	max-width: 20rem;
}
.ss-top-of-shop-compact .ss-product-stack {
	gap: var(--ss-gap-inline);
}
.ss-top-of-shop-compact .ss-product-stack > * {
	flex: 1 1 8rem;
	max-width: 10rem;
}
.ss-side-category-parent-big .ss-sidebox-link {
	font-size: 1rem;
	padding: 0.75rem 0.875rem;
}
.ss-side-category-child-big .ss-sidebox-link {
	font-size: 0.9375rem;
	padding: 0.625rem 0.875rem;
}
.side_div_cats_parent .ss-sidebox-link {
	font-size: 0.8125rem;
	padding: 8px 11px;
}
.side_div_cats_child .ss-sidebox-link {
	font-size: 0.75rem;
	padding: 6px 11px;
}
.ss-side-category-collapsible .side_cats_sub_outer {
	display: none;
}
.ss-side-category-child-in-main .side_cats_sub_outer {
	display: block;
	margin-left: 0;
}
.ss-footer-payment-max-1 img:nth-of-type(n + 2),
.ss-footer-payment-max-1 .footer_link:nth-of-type(n + 2) {
	display: none;
}
.ss-footer-payment-max-2 img:nth-of-type(n + 3),
.ss-footer-payment-max-2 .footer_link:nth-of-type(n + 3) {
	display: none;
}
.ss-footer-payment-max-3 img:nth-of-type(n + 4),
.ss-footer-payment-max-3 .footer_link:nth-of-type(n + 4) {
	display: none;
}
.ss-footer-payment-max-4 img:nth-of-type(n + 5),
.ss-footer-payment-max-4 .footer_link:nth-of-type(n + 5) {
	display: none;
}
.ss-footer-payment-max-5 img:nth-of-type(n + 6),
.ss-footer-payment-max-5 .footer_link:nth-of-type(n + 6) {
	display: none;
}
.ss-footer-payment-max-6 img:nth-of-type(n + 7),
.ss-footer-payment-max-6 .footer_link:nth-of-type(n + 7) {
	display: none;
}
.ss-footer-payment-max-7 img:nth-of-type(n + 8),
.ss-footer-payment-max-7 .footer_link:nth-of-type(n + 8) {
	display: none;
}
.ss-footer-payment-max-8 img:nth-of-type(n + 9),
.ss-footer-payment-max-8 .footer_link:nth-of-type(n + 9) {
	display: none;
}
.ss-swiper-slides-md-1 .swiper-slide {
	width: 100%;
}
.ss-swiper-slides-md-2 .swiper-slide {
	width: 50%;
}
.ss-swiper-slides-md-3 .swiper-slide {
	width: 33.3333%;
}
.ss-swiper-slides-md-4 .swiper-slide {
	width: 25%;
}

/* Form controls (Säule C1) — token-driven via ThemeTokenCssService controls */
.ss-field {
	display: flex;
	flex-direction: column;
	gap: var(--ss-field-gap, 0.35rem);
	width: 100%;
}
.ss-label {
	font-size: var(--ss-label-size, 0.875rem);
	font-weight: var(--ss-label-weight, 500);
	color: var(--ss-color-ink, #0f172a);
	line-height: 1.25;
}
.ss-control {
	box-sizing: border-box;
	display: block;
	width: 100%;
	min-height: var(--ss-control-height, 2.5rem);
	height: var(--ss-control-height, 2.5rem);
	padding: var(--ss-control-padding-y, 0.5rem) var(--ss-control-padding-x, 0.75rem);
	font-size: var(--ss-label-size, 0.875rem);
	line-height: 1.25;
	color: var(--ss-color-ink, #0f172a);
	background-color: var(--ss-color-surface, #ffffff);
	border: 1px solid var(--ss-color-input_border, #d1d5db);
	border-radius: var(--ss-radius, 0.75rem);
}
.ss-control:focus {
	outline: 2px solid var(--ss-color-primary, #0f766e);
	outline-offset: 1px;
}
.ss-control--textarea {
	height: auto;
	min-height: calc(var(--ss-control-height, 2.5rem) * 2);
	resize: vertical;
}
.ss-control--checkbox,
.ss-control--radio {
	width: auto;
	min-height: auto;
	height: auto;
	padding: 0;
	flex-shrink: 0;
}
.ss-form-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--ss-control-height, 2.5rem);
	padding: var(--ss-control-padding-y, 0.5rem) calc(var(--ss-control-padding-x, 0.75rem) * 1.5);
	font-size: var(--ss-label-size, 0.875rem);
	font-weight: var(--ss-label-weight, 500);
	border-radius: var(--ss-radius, 0.75rem);
	border: 0;
	background-color: var(--ss-color-secondary, #334155);
	color: var(--ss-color-primary-fg, #ffffff);
	cursor: pointer;
}
.ss-form-button:hover {
	opacity: 0.92;
}
.ss-form-button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Surface box-model v2 — width + alignment (LayoutBuilder surface.width / surface.align) */
.ss-width-contained {
	max-width: var(--ss-container-max, 80rem);
	margin-inline: auto;
	width: 100%;
}
.ss-width-full {
	max-width: none;
	width: 100%;
}
.ss-width-bleed {
	max-width: none;
	width: 100%;
	padding-left: 0;
	padding-right: 0;
}
.ss-align-left {
	margin-right: auto;
}
.ss-align-center {
	margin-inline: auto;
}
.ss-align-right {
	margin-left: auto;
}

/* Surface parallax — background scrolls slower than content (ss-tools.js data-ss-parallax) */
.ss-parallax {
	background-attachment: scroll;
	will-change: background-position;
}