/* Mobileri Kolcukaj – Maßanfertigung, strikt Champagner & Braun */

.mk-massanf{
	--mk-champ-050:#FBF4E6; --mk-champ:#F7ECD8; --mk-champ-300:#E7D3AC;
	--mk-surface:#FFFDF8; --mk-gold:#C6A667; --mk-gold-deep:#B08E4E;
	--mk-brown-500:#6E5236; --mk-brown-700:#3E2C1C; --mk-brown-800:#2A1D12;
	max-width:760px; margin:0 auto; color:var(--mk-brown-800);
}
.mk-massanf-intro h2{
	font-size:clamp(1.6rem,3vw,2.2rem); color:var(--mk-brown-700);
	margin:0 0 .4em; letter-spacing:.01em;
}
.mk-massanf-intro p{ color:var(--mk-brown-500); line-height:1.6; margin:0 0 1.6em; }

.mk-massanf-ok,.mk-massanf-err{
	border-radius:14px; padding:1rem 1.2rem; margin-bottom:1.4rem; line-height:1.5;
}
.mk-massanf-ok{ background:var(--mk-champ); border:1px solid var(--mk-gold); color:var(--mk-brown-700); }
.mk-massanf-err{ background:#F7ECD8; border:1px solid #B08E4E; color:#7a3b1f; }

.mk-massanf-form{
	background:var(--mk-surface); border:1px solid var(--mk-champ-300);
	border-radius:20px; padding:clamp(1.2rem,3vw,2rem);
	box-shadow:0 10px 40px -24px rgba(62,44,28,.4);
	display:flex; flex-direction:column; gap:1.15rem;
}
.mk-field{ display:flex; flex-direction:column; gap:.4rem; }
.mk-field > label, .mk-massanf-form legend{
	font-weight:600; color:var(--mk-brown-700); font-size:.95rem;
}
.mk-field span, .mk-massanf-form legend span{ color:var(--mk-gold-deep); }

.mk-massanf-form input[type=text],
.mk-massanf-form input[type=email],
.mk-massanf-form input[type=tel],
.mk-massanf-form input[type=number],
.mk-massanf-form select,
.mk-massanf-form textarea,
.mk-massanf-form input[type=file]{
	width:100%; box-sizing:border-box;
	background:var(--mk-champ-050); border:1px solid var(--mk-champ-300);
	border-radius:12px; padding:.7rem .85rem; font:inherit; color:var(--mk-brown-800);
	transition:border-color .15s, box-shadow .15s;
}
.mk-massanf-form input:focus,
.mk-massanf-form select:focus,
.mk-massanf-form textarea:focus{
	outline:none; border-color:var(--mk-gold);
	box-shadow:0 0 0 3px rgba(198,166,103,.25);
}
.mk-massanf-form textarea{ resize:vertical; }

.mk-massanf-form fieldset{ border:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.5rem; }
.mk-masse-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:.7rem; }
.mk-masse-row label{ display:flex; flex-direction:column; gap:.3rem; font-size:.85rem; color:var(--mk-brown-500); }

/* Farb-Swatches */
.mk-swatches{ display:flex; flex-wrap:wrap; gap:.55rem; }
.mk-swatch{ position:relative; cursor:pointer; }
.mk-swatch input{ position:absolute; opacity:0; inset:0; }
.mk-swatch-dot{
	display:block; width:42px; height:42px; border-radius:50%;
	border:2px solid var(--mk-champ-300); box-shadow:inset 0 0 0 2px #fff;
	transition:transform .12s, border-color .12s;
}
.mk-swatch-name{
	display:block; text-align:center; font-size:.68rem; margin-top:.25rem;
	color:var(--mk-brown-500); max-width:56px; line-height:1.15;
}
.mk-swatch input:checked + .mk-swatch-dot{
	border-color:var(--mk-brown-700); transform:scale(1.08);
	box-shadow:inset 0 0 0 2px #fff, 0 0 0 3px rgba(198,166,103,.4);
}
.mk-swatch input:focus-visible + .mk-swatch-dot{ border-color:var(--mk-gold-deep); }

.mk-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }

/* Ausstattungs-Konfigurator (Fächer/Türen/Schubladen je Möbeltyp) */
.mk-config{ background:var(--mk-champ-050); border:1px solid var(--mk-champ-300);
	border-radius:14px; padding:.85rem 1rem 1rem; gap:.6rem; }
.mk-config[hidden]{ display:none; }
.mk-config legend{ padding:0 .35rem; }
.mk-cfg-row{ display:flex; align-items:center; justify-content:space-between; gap:1rem;
	font-size:.9rem; color:var(--mk-brown-700); font-weight:600; }
.mk-cfg-row input, .mk-cfg-row select{ max-width:120px; }

.mk-massanf-btn{
	background:var(--mk-brown-700); color:var(--mk-champ-050); border:none;
	border-radius:999px; padding:.9rem 1.5rem; font-size:1.02rem; font-weight:600;
	cursor:pointer; transition:background .15s, transform .1s; margin-top:.3rem;
}
.mk-massanf-btn:hover{ background:var(--mk-brown-500); }
.mk-massanf-btn:active{ transform:translateY(1px); }

.mk-massanf-hint{ font-size:.78rem; color:var(--mk-brown-500); margin:.2rem 0 0; }

/* Honeypot verstecken */
.mk-hp{ position:absolute; left:-9999px; height:0; overflow:hidden; }

@media (max-width:560px){
	.mk-grid2{ grid-template-columns:1fr; }
	.mk-masse-row{ grid-template-columns:1fr 1fr; }
}

/* ------------------------------------------------------------------ */
/* 3D-Vorschau – typ-abhaengige Moebel-Geometrie (dependency-frei)     */
/* ------------------------------------------------------------------ */
.mk-3d{ margin:1.25rem 0 .5rem;
	background:radial-gradient(120% 90% at 50% 0%,#FFFDF8,#F3E6CC 70%,#E7D3AC);
	border:1px solid #E7D3AC; border-radius:18px; padding:1rem 1rem 1.1rem;
	box-shadow:inset 0 1px 0 rgba(255,255,255,.6); }
.mk-3d-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:.4rem; gap:.75rem; }
.mk-3d-head span{ font-family:Georgia,"Iowan Old Style",serif; font-weight:700; color:#3E2C1C; }
.mk-3d-reset{ background:none; border:1px solid #C6A667; color:#6E5236; border-radius:999px;
	padding:.3rem .85rem; font-size:.82rem; font-weight:600; cursor:pointer; white-space:nowrap;
	transition:background .14s,color .14s; }
.mk-3d-reset:hover{ background:#C6A667; color:#FFFDF8; }

/* WebGL-Buehne (Three.js zeichnet ein Canvas hinein) */
.mk-3d-stage{ position:relative; height:340px; overflow:hidden; border-radius:12px;
	cursor:grab; touch-action:none; -webkit-user-select:none; user-select:none; }
.mk-3d-stage canvas{ display:block; width:100% !important; height:100% !important; }
.mk-3d.is-dragging .mk-3d-stage{ cursor:grabbing; }
.mk-3d-nogl .mk-3d-stage{ display:flex; align-items:center; justify-content:center; }
.mk-3d-cap{ text-align:center; margin-top:.5rem; color:#3E2C1C; font-weight:700; font-size:.98rem; }
.mk-3d-hint{ text-align:center; color:#8A6A47; font-size:.8rem; margin:.25rem 0 0; }

/* ------------------------------------------------------------------ */
/* Etappe 2b – Umschalter Vorlage/Zeichnen + Grundriss-Zeichenflaeche  */
/* ------------------------------------------------------------------ */
.mk-modus-row{ display:flex; gap:.6rem; flex-wrap:wrap; }
.mk-modus-opt{ flex:1 1 46%; display:flex; align-items:center; justify-content:center; gap:.4rem;
	min-height:44px; padding:.55rem .8rem; cursor:pointer; text-align:center;
	background:var(--mk-champ-050); border:1px solid var(--mk-champ-300); border-radius:12px;
	color:var(--mk-brown-500); font-weight:600; font-size:.92rem; transition:border-color .14s,background .14s,color .14s; }
.mk-modus-opt input{ position:absolute; opacity:0; width:0; height:0; }
.mk-modus-opt:has(input:checked){ background:var(--mk-champ); border-color:var(--mk-gold); color:var(--mk-brown-700); }
.mk-modus-opt:has(input:focus-visible){ border-color:var(--mk-gold-deep); }

.mk-draw{ margin:.25rem 0 1.1rem;
	background:radial-gradient(120% 90% at 50% 0%,#FFFDF8,#F3E6CC 70%,#E7D3AC);
	border:1px solid #E7D3AC; border-radius:18px; padding:1rem;
	box-shadow:inset 0 1px 0 rgba(255,255,255,.6); }
.mk-draw-head{ display:flex; justify-content:space-between; align-items:center; gap:.75rem; margin-bottom:.5rem; flex-wrap:wrap; }
.mk-draw-head > span{ font-family:Georgia,"Iowan Old Style",serif; font-weight:700; color:var(--mk-brown-700); }
.mk-draw-tools{ display:flex; gap:.4rem; }
.mk-draw-tools button{ background:none; border:1px solid var(--mk-gold); color:var(--mk-brown-500);
	border-radius:999px; padding:.3rem .8rem; font-size:.8rem; font-weight:600; cursor:pointer;
	transition:background .14s,color .14s; }
.mk-draw-tools button:hover{ background:var(--mk-gold); color:#FFFDF8; }
.mk-draw-canvas{ display:block; width:100%; height:300px; border-radius:12px;
	border:1px solid var(--mk-champ-300); background:#FBF4E6;
	cursor:crosshair; touch-action:none; -webkit-user-select:none; user-select:none; }
.mk-draw-hint{ text-align:center; color:#8A6A47; font-size:.8rem; margin:.5rem 0 0; }

/* ------------------------------------------------------------------ */
/* Material & Oberflaeche – Marken-Dekore (Kronospan, Alfawood,        */
/* Kastamonu Evogloss, Davis). Anwendung + nach Marke gruppierte Dekore*/
/* ------------------------------------------------------------------ */
.mk-mat{ border:1px solid var(--mk-champ-300); border-radius:16px; padding:1rem 1.1rem;
	background:linear-gradient(180deg,#fffdf8,#fbf4e6); }
.mk-mat-intro{ margin:.1rem 0 .85rem; color:#8A6A47; font-size:.9rem; line-height:1.5; }
.mk-mat-art{ display:flex; flex-direction:column; gap:.35rem; font-weight:600;
	color:var(--mk-brown-500); margin-bottom:1rem; max-width:340px; }
.mk-mat-sub{ display:block; font-weight:700; color:var(--mk-brown-700); margin:.2rem 0 .6rem; }
.mk-dekor-group{ margin-bottom:1rem; padding-bottom:.9rem; border-bottom:1px dashed var(--mk-champ-300); }
.mk-dekor-group:last-child{ border-bottom:0; margin-bottom:0; padding-bottom:0; }
.mk-dekor-title{ display:inline-block; font-size:.72rem; letter-spacing:.05em; text-transform:uppercase;
	color:#fff; background:var(--mk-brown-500); padding:.2rem .6rem; border-radius:999px; margin-bottom:.6rem; }
/* Bezugsstoff-Block – nur bei Polstermöbeln sichtbar */
.mk-mat-bezug{ margin-top:1rem; padding-top:1rem; border-top:1px dashed var(--mk-champ-300); }
.mk-mat-bezug[hidden]{ display:none; }
/* Nummerierte Schritt-Badges (1 Typ, 2 Maße, 3 Ausstattung, 4 Material) */
.mk-step-no{ display:inline-flex; align-items:center; justify-content:center;
	width:1.5rem; height:1.5rem; margin-right:.5rem; border-radius:50%;
	background:var(--mk-gold); color:var(--mk-brown-700); font-size:.82rem; font-weight:700; }

/* Realistische Swatch-Optik je nach Finish -------------------------- */
/* Holz: feine diagonale Maserung ueber dem Grundton */
.mk-fin-wood .mk-swatch-dot{
	background-image:repeating-linear-gradient(115deg,
		rgba(255,255,255,.10) 0 2px, rgba(90,66,40,.10) 2px 4px);
	background-blend-mode:overlay;
}
/* Hochglanz: kraeftiges Glanzlicht + glatter Rand */
.mk-fin-gloss .mk-swatch-dot{
	background-image:linear-gradient(135deg,
		rgba(255,255,255,.85) 0%, rgba(255,255,255,.15) 32%,
		rgba(255,255,255,0) 55%, rgba(0,0,0,.10) 100%);
	box-shadow:inset 0 0 0 2px #fff, inset -3px -3px 8px rgba(0,0,0,.12);
}
/* Softmatt/Uni: sehr dezenter, matter Verlauf */
.mk-fin-uni .mk-swatch-dot{
	background-image:linear-gradient(160deg, rgba(255,255,255,.18), rgba(0,0,0,.05));
}
/* Stoff: feines Gewebe-Raster */
.mk-fin-fabric .mk-swatch-dot{
	background-image:
		repeating-linear-gradient(0deg, rgba(0,0,0,.07) 0 1px, transparent 1px 4px),
		repeating-linear-gradient(90deg, rgba(255,255,255,.10) 0 1px, transparent 1px 4px);
}