/* Angebotsanfrage – Treppenkonfigurator im Neumorphismus-Stil (Gold/Creme) */

.rb-config {
	--rbc-dark: #D3C3AE;
	--rbc-light: #FFFFFF;
	--rbc-edge: #E8DBC8;
	--rbc-gold: #B98647;
	display: grid;
	gap: clamp(1.5rem, 3vw, 2.2rem);
}

/* Schritt-Karte */
.rb-config__step {
	padding: clamp(1.5rem, 3vw, 2.4rem);
	border: 2px solid var(--rbc-edge);
	border-radius: 26px;
	background: var(--rbm-cream);
	box-shadow: 10px 10px 24px var(--rbc-dark), -10px -10px 24px var(--rbc-light);
}
.rb-config__step[hidden],
.rb-config__part[hidden] { display: none !important; }
.rb-config__part { display: grid; gap: clamp(1.5rem, 3vw, 2.2rem); }
/* Grid-Kinder dürfen schmaler werden als ihr Inhalt (sonst horizontales Scrollen auf dem Smartphone) */
.rb-config > *,
.rb-config__part > *,
.rb-config__tiles > *,
.rb-config__sizes > * { min-width: 0; }
.rb-tile__label { overflow-wrap: anywhere; hyphens: auto; }

.rb-config__head {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1.4rem;
}
.rb-config__head h2 {
	margin: 0;
	font-family: var(--rbm-serif);
	font-weight: 400;
	font-size: clamp(1.4rem, 2.2vw, 1.8rem);
	line-height: 1.15;
	color: var(--rbm-ink);
}
.rb-config__num {
	flex: none;
	width: 2.8rem;
	height: 2.8rem;
	display: grid;
	place-items: center;
	padding: 0;
	font-variant-numeric: lining-nums tabular-nums;
	border-radius: 50%;
	border: 2px solid #C99A5C;
	background: var(--rbc-gold);
	box-shadow: inset 3px 3px 7px #8F6331, inset -3px -3px 7px #E2B577;
	color: #fff;
	font-family: var(--rbm-sans);
	font-weight: 500;
	font-size: 1.05rem;
	line-height: 1;
	text-align: center;
}
.rb-config__hint { margin: 0 0 1.2rem; font-size: .88rem; color: var(--rbm-text); max-width: 46rem; }
.rb-config__hint a { color: var(--rbm-bronze); }
.rb-config__tiles + .rb-config__hint { margin: 1.8rem 0 0; }

/* Auswahlkacheln */
.rb-config__tiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
	gap: 1.1rem;
}
.rb-config__tiles--art { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
@media (min-width: 900px) { .rb-config__tiles--art { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.rb-tile {
	position: relative;
	display: grid;
	grid-template-rows: auto 1fr;
	gap: .7rem;
	padding: .9rem .9rem 1rem;
	border: 2px solid var(--rbc-edge);
	border-radius: 18px;
	background: var(--rbm-cream);
	box-shadow: 6px 6px 14px var(--rbc-dark), -6px -6px 14px var(--rbc-light);
	cursor: pointer;
	text-align: center;
	transition: box-shadow .2s ease-in-out, border-color .2s ease-in-out;
}
@media (hover: hover) { /* hover-only */ .rb-tile:hover { box-shadow: 3px 3px 8px var(--rbc-dark), -3px -3px 8px var(--rbc-light); } }
.rb-tile input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
}
.rb-tile__img {
	display: grid;
	place-items: center;
	height: 108px;
	padding: .4rem;
	border-radius: 12px;
}
.rb-tile__img img { max-width: 100%; max-height: 92px; object-fit: contain; opacity: .85; transition: opacity .2s, transform .3s; }
@media (hover: hover) { /* hover-only */ .rb-tile:hover .rb-tile__img img { opacity: 1; transform: scale(1.04); } }
.rb-tile__label {
	align-self: center;
	font-size: .8rem;
	line-height: 1.35;
	color: var(--rbm-ink);
}

/* Foto-Kacheln für die Treppenart */
.rb-tile--photo { padding: .7rem .7rem 1rem; }
.rb-tile--photo .rb-tile__img {
	height: 150px;
	padding: 0;
	overflow: hidden;
	box-shadow: inset 4px 4px 10px rgba(45, 28, 10, .45), inset -4px -4px 10px rgba(255, 238, 205, .3);
}
.rb-tile--photo .rb-tile__img img { width: 100%; height: 100%; max-height: none; object-fit: cover; opacity: 1; }
.rb-tile--photo .rb-tile__label { font-family: var(--rbm-serif); font-size: 1.1rem; }

/* gewählt: eingedrückt + Gold */
.rb-tile:has(input:checked) {
	border-color: #C99A5C;
	box-shadow: inset 5px 5px 12px var(--rbc-dark), inset -5px -5px 12px var(--rbc-light);
}
.rb-tile:has(input:checked) .rb-tile__label { color: var(--rbm-bronze); } /* ohne Fettung – sonst ändert sich der Zeilenumbruch und die Kachel wird höher */
.rb-tile:has(input:checked)::after {
	content: "";
	position: absolute;
	top: -.6rem;
	right: -.6rem;
	width: 1.7rem;
	height: 1.7rem;
	border-radius: 50%;
	border: 2px solid #C99A5C;
	background: var(--rbc-gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / .85rem no-repeat;
	box-shadow: inset 2px 2px 4px #8F6331, inset -2px -2px 4px #E2B577, 0 4px 10px rgba(90, 60, 25, .3);
}
.rb-tile:has(input:focus-visible) { outline: 2px solid var(--rbm-bronze); outline-offset: 3px; }

/* Maße mit Skizze */
.rb-config__sizes {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
	gap: 1.5rem 2.5rem;
	align-items: center;
}
.rb-config__sketch {
	margin: 0;
	padding: .8rem;
	border: 2px solid var(--rbc-edge);
	border-radius: 18px;
	background: #fff;
	box-shadow: inset 4px 4px 10px var(--rbc-dark), inset -4px -4px 10px var(--rbc-light);
}
.rb-config__sketch img { display: block; width: 100%; height: auto; border-radius: 10px; }

/* Eingabefeld mit Einheit */
.rb-field--unit { position: relative; }
.rb-field--unit input { padding-right: 3rem; }
.rb-field--unit i {
	position: absolute;
	right: 1.1rem;
	bottom: .95rem;
	font-style: normal;
	font-size: .85rem;
	color: var(--rbm-bronze);
	pointer-events: none;
}
.rb-field input[type=number] { -moz-appearance: textfield; }
.rb-field input[type=number]::-webkit-outer-spin-button,
.rb-field input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.rb-config__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Datei-Upload (neumorph) */
.rb-upload {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: .55rem;
	border: 2px solid #EFE4D6;
	border-radius: 14px;
	background: var(--rbm-cream);
	box-shadow: inset 4px 4px 9px #D9CAB6, inset -4px -4px 9px #FFFFFF;
	cursor: pointer;
}
.rb-upload input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rb-upload__btn {
	flex: none;
	padding: .65rem 1.2rem;
	border: 2px solid #C99A5C;
	border-radius: 999px;
	background: var(--rbc-gold);
	color: #fff;
	font-size: .78rem;
	font-weight: 500;
	letter-spacing: .08em;
	text-transform: uppercase;
	box-shadow: inset 3px 3px 7px #8F6331, inset -3px -3px 7px #E2B577;
	transition: box-shadow .2s;
}
@media (hover: hover) { /* hover-only */ .rb-upload:hover .rb-upload__btn { box-shadow: inset 2px 2px 5px #8F6331, inset -2px -2px 5px #E2B577, 2px 2px 5px #8F6331, -2px -2px 5px #E2B577; } }
.rb-upload:has(input:focus-visible) { outline: 2px solid var(--rbm-bronze); outline-offset: 3px; }
.rb-config .rb-field { min-width: 0; grid-template-columns: minmax(0, 1fr); }
.rb-upload { min-width: 0; }
.rb-upload__name { min-width: 0; font-size: .85rem; color: #8C8175; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rb-upload.has-file .rb-upload__name { color: var(--rbm-ink); }

.rb-config__contact .rb-form__submit { max-width: 26rem; margin-inline: auto; }
.rb-config-success { padding: clamp(2rem, 5vw, 3.5rem); border-radius: 26px; background: var(--rbm-cream); box-shadow: 10px 10px 24px #D3C3AE, -10px -10px 24px #FFFFFF; }
.rb-config-success .rb-success { min-height: 0; }

@media (max-width: 781px) {
	.rb-config__step { padding: 1.2rem; border-radius: 22px; }
	.rb-config__sizes { grid-template-columns: 1fr; }
	.rb-config__grid { grid-template-columns: minmax(0, 1fr); }
	.rb-config__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
	.rb-config__tiles--art { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.rb-config__tiles--art .rb-tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
	.rb-tile__img { height: 90px; }
	.rb-tile__img img { max-height: 76px; }
	.rb-tile--photo .rb-tile__img { height: 110px; }
	.rb-tile__label { font-size: .75rem; }
}

/* Plakietka „Neu“ auf der Treppenart-Kachel (oben links – oben rechts sitzt das Häkchen) */
.rb-tile .rb-badge-neu { top: .7rem; left: .7rem; right: auto; }

/* Liste der ausgewählten Anhänge */
.rb-upload__list { list-style: none; margin: .7rem 0 0; padding: 0; display: grid; gap: .4rem; }
.rb-upload__list li { display: flex; align-items: center; gap: .7rem; padding: .45rem .5rem .45rem .9rem; border: 1px solid #E8DBC8; border-radius: 12px; background: #FBF8F3; font-size: .85rem; }
.rb-upload__file { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--rbm-ink); }
.rb-upload__size { color: #8C8175; font-size: .8rem; white-space: nowrap; }
.rb-upload__remove { flex: none; width: 1.8rem; height: 1.8rem; border: 0; border-radius: 50%; background: #EFE5D6; color: #6B5A45; font-size: 1.1rem; line-height: 1; cursor: pointer; }
@media (hover: hover) { /* hover-only */ .rb-upload__remove:hover { background: #E2D2BB; } }