/* Rennradsticker Farbberater v1.0 – Akkordeon im Seiten-Look */

.rrs-fb {
	margin: 18px 0;
	border: 1px solid #e3e1da;
	border-radius: 14px;
	background: #fff;
	overflow: hidden;
	font-family: inherit;
}
.rrs-fb[open] { box-shadow: 0 6px 22px rgba(0, 0, 0, 0.07); }

/* ---- Kopf / Auslöser ---- */
.rrs-fb__summary {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 15px 18px;
	cursor: pointer;
	list-style: none;
	user-select: none;
}
.rrs-fb__summary::-webkit-details-marker { display: none; }
.rrs-fb__summary-ic {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	border-radius: 10px;
	background: #1A1B1E;
	color: #D3E709;
}
.rrs-fb__summary-txt { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.rrs-fb__summary-txt strong { font-size: 1rem; color: #1A1B1E; }
.rrs-fb__summary-txt small { font-size: .82rem; color: #8a8d93; }
.rrs-fb__chevron { color: #8a8d93; transition: transform .2s ease; flex-shrink: 0; }
.rrs-fb[open] .rrs-fb__chevron { transform: rotate(180deg); }
.rrs-fb__summary:hover .rrs-fb__summary-txt strong { color: #000; }

/* ---- Körper ---- */
.rrs-fb__body { padding: 4px 18px 18px; border-top: 1px solid #efede6; }
.rrs-fb__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 14px; }
@media (max-width: 640px) { .rrs-fb__grid { grid-template-columns: 1fr; } }

.rrs-fb__lbl {
	margin: 0 0 8px;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #8a8d93;
}
.rrs-fb__lbl--sm { margin-top: 10px; }

.rrs-fb__pick { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.rrs-fb__pick input[type="color"] {
	width: 52px; height: 52px; padding: 3px;
	border: 1px solid #d9d7d0; border-radius: 12px; background: #fff; cursor: pointer;
}
.rrs-fb__pick-hint { display: block; font-size: .85rem; color: #1A1B1E; }
.rrs-fb__hex { display: block; font-family: monospace; font-size: .8rem; color: #8a8d93; }

.rrs-fb__upload {
	display: inline-flex; align-items: center; gap: 7px;
	padding: 8px 14px; border: 1px solid #d9d7d0; border-radius: 999px;
	font-size: .85rem; color: #1A1B1E; cursor: pointer; transition: border-color .15s;
}
.rrs-fb__upload:hover { border-color: #1A1B1E; }

.rrs-fb__photo-wrap {
	position: relative; height: 130px; margin-top: 10px;
	border-radius: 10px; overflow: hidden; background: #f1f0ec;
}
.rrs-fb__photo-wrap img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }

.rrs-fb__swatches { display: flex; gap: 7px; flex-wrap: wrap; }
.rrs-fb__swatch {
	width: 34px; height: 34px; padding: 0;
	border: 2px solid #d9d7d0; border-radius: 9px; cursor: pointer; transition: border-color .15s, transform .1s;
}
.rrs-fb__swatch:hover { transform: scale(1.06); }
.rrs-fb__swatch.is-sel { border-color: #1A1B1E; }

/* ---- Empfehlungsgruppen ---- */
.rrs-fb__sgroup { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; }
.rrs-fb__sgroup-lbl { width: 120px; flex-shrink: 0; font-size: .8rem; color: #8a8d93; }
.rrs-fb__sgroup-chips { display: flex; gap: 8px; flex-wrap: wrap; min-width: 0; }
.rrs-fb__foilchip {
	display: inline-flex; align-items: center; gap: 7px;
	padding: 5px 12px 5px 6px;
	border: 2px solid #d9d7d0; border-radius: 999px; background: #fff;
	font-size: .8rem; color: #1A1B1E; cursor: pointer; transition: border-color .15s, transform .1s;
}
.rrs-fb__foilchip:hover { transform: scale(1.03); }
.rrs-fb__foilchip.is-sel { border-color: #1A1B1E; }
.rrs-fb__foilchip-dot { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; border: 1px solid rgba(0,0,0,.12); }

/* ---- Vorschau ---- */
.rrs-fb__preview { margin-top: 16px; padding-top: 14px; border-top: 1px solid #efede6; }
.rrs-fb__preview-head {
	display: flex; justify-content: space-between; align-items: center; gap: 10px;
	flex-wrap: wrap; margin-bottom: 10px; font-size: .8rem; color: #8a8d93;
}
.rrs-fb__foil b { color: #1A1B1E; }
.rrs-fb__foil code { color: #8a8d93; }
.rrs-fb__tube {
	height: 90px; border-radius: 14px;
	display: flex; align-items: center; justify-content: center; overflow: hidden;
	transition: background .3s;
}
.rrs-fb__tube span {
	font-size: 30px; font-weight: 600; font-style: italic; letter-spacing: 4px; white-space: nowrap;
	transition: color .3s;
}
.rrs-fb__preview-row { display: flex; gap: 8px; margin-top: 12px; align-items: center; flex-wrap: wrap; }
.rrs-fb__preview-row input[type="text"] {
	flex: 1; min-width: 140px; padding: 8px 12px;
	border: 1px solid #d9d7d0; border-radius: 8px; font-size: .9rem;
}
.rrs-fb__btn-ghost {
	padding: 8px 14px; border: 1px solid #d9d7d0; border-radius: 999px;
	background: #fff; font-size: .85rem; color: #1A1B1E; cursor: pointer; white-space: nowrap;
}
.rrs-fb__btn-ghost:hover { border-color: #1A1B1E; }
.rrs-fb__fullpal { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid #efede6; }

.rrs-fb__note { margin: 14px 0 0; font-size: .8rem; color: #a4a7ac; font-style: italic; }