/* ============================================================
   Anfragekorb – zentrale Styles (korb.css)
   Sitzmoment Palettenmöbel · Gold-Akzent #d6a917
   ============================================================ */

:root {
	--korb-gold: #d6a917;
	--korb-gold-dark: #b8901a;
}

/* ---------- Info-Hinweis + Tooltip über dem Add-Block ---------- */
.korb-hint {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	margin: 0 0 10px;
}
.korb-hint-text {
	font-size: 13px;
	color: #888;
	font-family: inherit;
}
.korb-add-block .korb-info,
.korb-hint .korb-info {
	position: relative !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 20px !important;
	height: 20px !important;
	min-width: 20px !important;
	flex: 0 0 20px !important;
	padding: 0 !important;
	flex-shrink: 0;
	border-radius: 50% !important;
	background: var(--korb-gold) !important;
	color: #fff !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	cursor: help !important;
	font-family: inherit;
	outline: none;
	text-decoration: none !important;
}
.korb-hint .korb-info:hover,
.korb-hint .korb-info:focus { background: var(--korb-gold-dark) !important; }

.korb-hint .korb-info-bubble {
	position: absolute !important;
	bottom: calc(100% + 10px);
	right: 0;
	left: auto;
	width: 250px !important;
	max-width: 78vw;
	padding: 11px 13px !important;
	margin: 0 !important;
	background: #2c2c2c !important;
	color: #fff !important;
	font-size: 13px !important;
	line-height: 1.5 !important;
	font-weight: 400 !important;
	border-radius: 8px !important;
	box-shadow: 0 6px 20px rgba(0,0,0,.25);
	opacity: 0 !important;
	visibility: hidden !important;
	transform: translateY(4px);
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
	z-index: 50;
	pointer-events: none;
	text-align: left !important;
	font-family: inherit;
	white-space: normal !important;
}
.korb-hint .korb-info-bubble::after {
	content: "";
	position: absolute;
	top: 100%;
	right: 7px;
	left: auto;
	border: 6px solid transparent;
	border-top-color: #2c2c2c;
}
.korb-hint .korb-info:hover .korb-info-bubble,
.korb-hint .korb-info:focus .korb-info-bubble {
	opacity: 1 !important;
	visibility: visible !important;
	transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
	.korb-hint .korb-info-bubble { transition: none; }
}

/* ---------- "In Anfragekorb"-Block in der Spec-Card ---------- */
.korb-add-block {
	display: flex;
	align-items: stretch;
	gap: 10px;
	margin: 0 0 12px;
}

.korb-qty {
	display: flex;
	align-items: center;
	border: 1px solid #d8d8d8;
	border-radius: 6px;
	overflow: hidden;
	flex-shrink: 0;
	background: #fff;
}
.korb-qty button {
	width: 38px;
	height: 100%;
	min-height: 48px;
	border: none;
	background: #f6f4ef;
	color: #333;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	transition: background .15s ease;
	font-family: inherit;
}
.korb-qty button:hover { background: #ece7da; }
.korb-qty input {
	width: 56px;
	height: 48px;
	border: none;
	border-left: 1px solid #e4e4e4;
	border-right: 1px solid #e4e4e4;
	text-align: center;
	font-size: 16px;
	font-family: inherit;
	color: #222;
	-moz-appearance: textfield;
}
.korb-qty input::-webkit-outer-spin-button,
.korb-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.korb-add-btn {
	flex: 1 1 auto;
	min-height: 48px;
	border: none;
	border-radius: 6px;
	background: var(--korb-gold);
	color: #fff !important;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .02em;
	cursor: pointer;
	font-family: inherit;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	transition: background .18s ease, transform .08s ease;
	text-decoration: none;
}
.korb-add-btn:hover { background: var(--korb-gold-dark); }
.korb-add-btn:active { transform: scale(.98); }
.korb-add-btn.is-added {
	background: #4a8a3f;
}
.korb-add-btn i { font-size: 15px; }

/* ---------- Korb-Icon in der Navigation ---------- */
.modern-site-header .msh-cart {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	margin-left: 6px;
	border-radius: 50%;
	color: #222;
	text-decoration: none;
	transition: background .15s ease, color .15s ease;
	flex-shrink: 0;
}
.modern-site-header .msh-cart:hover {
	background: rgba(214,169,23,.12);
	color: var(--korb-gold);
}
.modern-site-header .msh-cart i { font-size: 19px; }
.korb-badge {
	position: absolute;
	top: 2px;
	right: 0;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: 9px;
	background: var(--korb-gold);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
	box-sizing: border-box;
	transform: scale(0);
	transition: transform .2s cubic-bezier(.5,1.6,.5,1);
	font-family: inherit;
}
.korb-badge.has-items { transform: scale(1); }

/* ---------- Korb-Button unter dem Floating-Sidebar-Feld ---------- */
.korb-float-wrap {
	position: fixed;
	top: 50%;
	right: 8px;
	transform: translateY(72px);
	z-index: 9998;
	display: flex;
	justify-content: center;
	width: 130px;          /* etwa Breite der Sidebar – Button mittig darunter */
	pointer-events: none;  /* Wrapper selbst nicht klickbar */
}
.korb-float-wrap .korb-float {
	pointer-events: auto;
	display: none;            /* nur sichtbar, wenn Artikel im Korb */
	position: relative !important;
	top: auto !important;
	right: auto !important;
	bottom: auto !important;
	left: auto !important;
	float: none !important;
	width: 46px !important;
	height: 46px !important;
	margin: 0 !important;
	border-radius: 50% !important;
	background: var(--korb-gold) !important;
	color: #fff !important;
	border: none;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(0,0,0,.20);
	align-items: center !important;
	justify-content: center !important;
	transition: transform .15s ease, background .18s ease;
	text-decoration: none !important;
}
.korb-float-wrap .korb-float.has-items { display: inline-flex !important; }
.korb-float-wrap .korb-float:hover { background: var(--korb-gold-dark) !important; transform: scale(1.08); text-decoration: none; }
.korb-float-wrap .korb-float i { font-size: 19px !important; color: #fff !important; width: auto !important; }
.korb-float-wrap .korb-float .korb-badge {
	top: -4px;
	right: -4px;
	background: #2c2c2c;
	border: 2px solid #fff;
}
@media (max-width: 991px) {
	.korb-float-wrap { display: none; }
}

/* ---------- kleiner Toast bei "hinzugefügt" ---------- */
.korb-toast {
	position: fixed;
	left: 50%;
	bottom: 92px;
	transform: translateX(-50%) translateY(20px);
	z-index: 9100;
	background: #2c2c2c;
	color: #fff;
	padding: 12px 20px;
	border-radius: 8px;
	font-size: 14px;
	font-family: inherit;
	box-shadow: 0 6px 22px rgba(0,0,0,.28);
	opacity: 0;
	pointer-events: none;
	transition: opacity .25s ease, transform .25s ease;
	max-width: 86vw;
	text-align: center;
}
.korb-toast.show {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}
.korb-toast b { color: var(--korb-gold); }

@media (max-width: 600px) {
	.korb-float { right: 16px; bottom: 16px; width: 54px; height: 54px; }
}
@media (prefers-reduced-motion: reduce) {
	.korb-badge, .korb-float, .korb-add-btn, .korb-toast { transition: none; }
}

/* ============================================================
   Kompakte Korb-Zeilen (mehrere Elemente pro Produktseite)
   z.B. Lounge: Sofa / Insel / Tisch
   ============================================================ */
.korb-rows {
	margin: 0 0 14px;
	border-top: 1px solid #eee;
}
.korb-row {
	display: flex;
	align-items: center;
	gap: 10px 12px;
	padding: 9px 0;
	border-bottom: 1px solid #eee;
	flex-wrap: wrap;
}
.korb-row-main {
	flex: 1 1 100%;
	display: flex;
	align-items: baseline;
	gap: 8px;
	flex-wrap: wrap;
}
.korb-row-name {
	font-size: 14px;
	font-weight: 600;
	color: #1a1a1a;
	font-family: inherit;
	line-height: 1.25;
}
.korb-row-dim {
	display: inline;
	font-size: 12px;
	font-weight: 400;
	color: #aaa;
	margin: 0;
}
.korb-row-controls {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1 1 100%;
}
/* Farb-Umschalter – kompakt, neben den Namen */
.korb-color {
	display: inline-flex;
	gap: 4px;
	flex-shrink: 0;
	margin-left: auto;
}
.korb-color-opt {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 8px;
	border: 1px solid #e0e0e0;
	border-radius: 5px;
	background: #fff;
	cursor: pointer;
	font-size: 12px;
	font-family: inherit;
	color: #777;
	transition: border-color .15s ease, background .15s ease, color .15s ease;
	line-height: 1;
}
.korb-color-opt .dot {
	width: 11px;
	height: 11px;
	border-radius: 50%;
	border: 1px solid rgba(0,0,0,.18);
	flex-shrink: 0;
}
.korb-color-opt .dot.grau   { background: #9a9a9a; }
.korb-color-opt .dot.schwarz{ background: #2c2c2c; }
.korb-color-opt.is-active {
	border-color: var(--korb-gold);
	background: rgba(214,169,23,.10);
	color: #1a1a1a;
	font-weight: 600;
}
/* Mini-Mengen-Stepper für Zeilen */
.korb-row .korb-qty { flex-shrink: 0; height: 38px; box-sizing: border-box; }
.korb-row .korb-qty button { height: 100%; min-height: 0; width: 28px; font-size: 16px; box-sizing: border-box; }
.korb-row .korb-qty input { height: 100%; min-height: 0; width: 48px; font-size: 14px; box-sizing: border-box; }
/* Mini Add-Button – gold, kompakt */
.korb-row .korb-add-btn {
	flex: 1 1 auto;
	min-height: 38px;
	height: 38px;
	min-width: 0;
	font-size: 13px;
	font-weight: 600;
	padding: 0 12px;
	gap: 6px;
}
.korb-row .korb-add-btn i { font-size: 13px; }

/* ---------- Freitext-Maßfeld in Korb-Zeilen ---------- */
.korb-measure {
	flex: 1 1 100%;
	margin: 2px 0 0;
}
.korb-measure input {
	width: 100%;
	height: 36px;
	box-sizing: border-box;
	border: 1px solid #e0e0e0;
	border-radius: 6px;
	padding: 0 10px;
	font-size: 12px;
	font-family: inherit;
	color: #1a1a1a;
	background: #fff;
	transition: border-color .15s ease;
}
.korb-measure input:focus {
	outline: none;
	border-color: var(--korb-gold);
}
.korb-measure input::placeholder { color: #aaa; }