/* MKE Wizard – CI mainilkanjo.de ("Energie, die rechnet").
   Marken-Tokens 1:1 aus dem Elementor-Kit: Primär #003A6F, Grün #7DB82D,
   Amber-Akzent #FFC107 + Creme #FFF9E6, Schrift Montserrat. */
.mke-wizard, .mke-account, .mke-intro {
	--mke-primary: #003A6F;   /* Dunkelblau – Überschriften, Text-dunkel */
	--mke-green:   #7DB82D;   /* Marken-Grün – Aktion/Fortschritt */
	--mke-green-d: #5d8a1f;   /* Grün dunkler – Hover */
	--mke-accent:  #FFC107;   /* Amber – CTA-Highlight, Preis, aktiver Schritt */
	--mke-accent-d:#e3a900;   /* Amber dunkler – Hover */
	--mke-bg:      #ffffff;
	--mke-soft:    #FFF9E6;   /* Creme – Highlight-Flächen */
	--mke-soft2:   #f4f7ee;   /* zartes Grün-Grau */
	--mke-border:  #e7e2d2;   /* warmer, heller Rahmen */
	--mke-text:    #353535;
	--mke-muted:   #7a7a72;
	font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
	color: var(--mke-text);
	max-width: 880px;
	margin: 0 auto;
	line-height: 1.6;
}

.mke-loading { padding: 48px; text-align: center; color: var(--mke-green-d); font-weight: 600; }

/* ---------- Gebrandete Intro-Sektion ("So funktioniert's") ---------- */
.mke-intro {
	background: linear-gradient(135deg, #ffffff 0%, var(--mke-soft) 100%);
	border: 1px solid var(--mke-border);
	border-radius: 18px;
	padding: 32px 32px 28px;
	margin-bottom: 24px;
	box-shadow: 0 10px 30px rgba(0,58,111,.06);
}
.mke-intro-eyebrow {
	display: inline-block;
	font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
	color: var(--mke-green-d);
	background: #fff; border: 1px solid var(--mke-border);
	padding: 5px 12px; border-radius: 20px; margin-bottom: 14px;
}
.mke-intro-eyebrow::before { content: '⚡ '; }
.mke-intro h2 {
	margin: 0 0 8px; color: var(--mke-primary);
	font-size: 28px; font-weight: 700; line-height: 1.25;
}
.mke-intro p.mke-intro-lead { margin: 0 0 22px; color: #4a4a44; font-size: 16px; max-width: 60ch; }

.mke-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 0 0 22px; }
.mke-step-card {
	position: relative; background: #fff; border: 1px solid var(--mke-border);
	border-radius: 14px; padding: 18px 16px 16px;
}
.mke-step-card .mke-step-no {
	display: inline-flex; width: 34px; height: 34px; border-radius: 50%;
	background: var(--mke-accent); color: var(--mke-primary);
	align-items: center; justify-content: center; font-weight: 800; font-size: 16px;
	margin-bottom: 10px; box-shadow: 0 4px 10px rgba(255,193,7,.35);
}
.mke-step-card h4 { margin: 0 0 4px; font-size: 16px; color: var(--mke-primary); font-weight: 700; }
.mke-step-card p { margin: 0; font-size: 13.5px; color: var(--mke-muted); line-height: 1.5; }

.mke-trust { display: flex; flex-wrap: wrap; gap: 10px 20px; padding-top: 4px; }
.mke-trust span { font-size: 13.5px; color: var(--mke-primary); font-weight: 600; display: inline-flex; align-items: center; gap: 7px; }
.mke-trust span::before { content: '✓'; color: var(--mke-green); font-weight: 800; }

/* ---------- Stepper ---------- */
.mke-stepper { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 24px; }
.mke-step { display: flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 22px; background: var(--mke-soft2); font-size: 13px; color: var(--mke-muted); font-weight: 600; }
.mke-step.active { background: var(--mke-accent); color: var(--mke-primary); }
.mke-step.done { color: var(--mke-green-d); background: #eef5e1; }
.mke-step-num { display: inline-flex; width: 21px; height: 21px; border-radius: 50%; background: #fff; color: var(--mke-green-d); align-items: center; justify-content: center; font-weight: 800; font-size: 12px; }
.mke-step.active .mke-step-num { background: var(--mke-primary); color: #fff; }
.mke-step.done .mke-step-num { background: var(--mke-green); color: #fff; }

/* ---------- Cards ---------- */
.mke-card { background: var(--mke-bg); border: 1px solid var(--mke-border); border-radius: 16px; padding: 30px; box-shadow: 0 8px 26px rgba(0,58,111,.05); }
.mke-card h3 { margin-top: 0; color: var(--mke-primary); font-size: 21px; font-weight: 700; }
.mke-hint { font-size: 13.5px; color: var(--mke-muted); }

/* ---------- Module ---------- */
.mke-modules { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin: 18px 0; }
.mke-module { border: 2px solid var(--mke-border); border-radius: 12px; padding: 16px; cursor: pointer; transition: all .15s; background: #fff; }
.mke-module:hover { border-color: var(--mke-green); box-shadow: 0 4px 14px rgba(125,184,45,.12); }
.mke-module.active { border-color: var(--mke-green); background: var(--mke-soft2); }
.mke-module.active::after { content: '✓'; float: right; color: #fff; background: var(--mke-green); width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; margin-top: -2px; }
.mke-module-title { font-weight: 700; color: var(--mke-primary); }
.mke-module-desc { font-size: 13px; color: var(--mke-muted); margin-top: 4px; }

/* ---------- Felder ---------- */
.mke-field { margin: 16px 0; }
.mke-field label { display: block; font-weight: 600; margin-bottom: 5px; font-size: 14px; color: var(--mke-primary); }
.mke-field input[type=text], .mke-field input[type=number], .mke-field input[type=email],
.mke-field select, .mke-field textarea {
	width: 100%; padding: 11px 13px; border: 1px solid var(--mke-border); border-radius: 9px; font-size: 15px; font-family: inherit; color: var(--mke-text); background: #fff;
}
.mke-field input:focus, .mke-field select:focus, .mke-field textarea:focus { outline: 2px solid var(--mke-green); border-color: var(--mke-green); }
.mke-help { font-size: 12px; color: var(--mke-muted); margin-top: 4px; }
.mke-multi { display: flex; flex-wrap: wrap; gap: 12px; }
.mke-check { font-weight: 400; }

/* ---------- Upload ---------- */
.mke-dropzone { border: 2px dashed var(--mke-border); border-radius: 12px; padding: 18px; margin: 12px 0; display: flex; flex-direction: column; gap: 8px; background: var(--mke-soft2); }
.mke-dropzone strong { color: var(--mke-green-d); }
.mke-uploads { margin-top: 10px; }
.mke-upload-item { font-size: 14px; color: var(--mke-green-d); font-weight: 600; }

/* ---------- Fremd-Angebot-Hinweis ---------- */
.mke-offer-hint { margin: 18px 0 6px; padding: 14px 16px; background: var(--mke-soft2); border: 1px solid #e0ead0; border-left: 4px solid var(--mke-green); border-radius: 10px; }
.mke-offer-hint strong { display: block; color: var(--mke-primary); margin-bottom: 3px; }
.mke-offer-hint .mke-hint { margin: 0; }

/* ---------- Geld-zurück-Garantie ---------- */
.mke-guarantee { display: flex; align-items: flex-start; gap: 14px; background: linear-gradient(135deg, #fff 0%, var(--mke-soft) 100%); border: 1px solid #f0e3b0; border-radius: 14px; padding: 16px 18px; margin: 18px 0; }
.mke-guarantee-badge { flex: none; align-self: center; background: var(--mke-accent); color: var(--mke-primary); font-weight: 800; font-size: 12.5px; letter-spacing: .02em; padding: 8px 12px; border-radius: 10px; box-shadow: 0 4px 10px rgba(255,193,7,.35); text-align: center; line-height: 1.2; }
.mke-guarantee div { font-size: 14px; color: var(--mke-text); line-height: 1.5; }
.mke-guarantee strong { color: var(--mke-primary); }

/* ---------- Custom ---------- */
.mke-custom-row { display: grid; grid-template-columns: 1fr 2fr auto; gap: 8px; align-items: start; margin-bottom: 8px; }
.mke-custom-row input, .mke-custom-row textarea { width: 100%; padding: 9px; border: 1px solid var(--mke-border); border-radius: 8px; font-family: inherit; }

/* ---------- Vorschau / Preis ---------- */
.mke-price-box { background: var(--mke-soft); border: 1px solid #f0e3b0; border-radius: 14px; padding: 20px; margin: 18px 0; }
.mke-price-row { display: flex; justify-content: space-between; padding: 5px 0; color: var(--mke-text); }
.mke-price-total { display: flex; justify-content: space-between; padding: 12px 0 0; margin-top: 10px; border-top: 1px solid #f0e3b0; font-size: 19px; font-weight: 700; color: var(--mke-primary); }
.mke-disclaimer { font-size: 12px; color: #7a6a3a; background: #fbf6e7; border-left: 3px solid var(--mke-accent); padding: 11px 13px; margin: 14px 0; border-radius: 6px; }

/* ---------- Buttons / Nav ---------- */
.mke-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 24px; }
.mke-btn { background: var(--mke-green); color: #fff; border: none; border-radius: 10px; padding: 13px 24px; font-size: 15px; font-weight: 700; cursor: pointer; transition: all .15s; font-family: inherit; }
.mke-btn:hover { background: var(--mke-green-d); transform: translateY(-1px); }
.mke-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.mke-btn-ghost { background: transparent; color: var(--mke-primary); border: 1.5px solid var(--mke-border); }
.mke-btn-ghost:hover { background: var(--mke-soft2); border-color: var(--mke-green); color: var(--mke-green-d); }
.mke-btn-pay { background: var(--mke-accent); color: var(--mke-primary); box-shadow: 0 6px 16px rgba(255,193,7,.35); }
.mke-btn-pay:hover { background: var(--mke-accent-d); color: var(--mke-primary); }

/* ---------- Account ---------- */
.mke-account h2 { color: var(--mke-primary); }
.mke-status-box { background: var(--mke-soft); border: 1px solid #f0e3b0; border-radius: 14px; padding: 20px; margin: 16px 0; }
.mke-account-lookup { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; margin: 16px 0; }
.mke-account-lookup input { padding: 11px 13px; border: 1px solid var(--mke-border); border-radius: 9px; }
.mke-table { width: 100%; border-collapse: collapse; margin-top: 12px; }
.mke-table th, .mke-table td { border: 1px solid var(--mke-border); padding: 9px 11px; text-align: left; font-size: 14px; }
.mke-table th { background: var(--mke-soft); color: var(--mke-primary); }

@media (max-width: 680px) {
	.mke-steps { grid-template-columns: 1fr; }
	.mke-intro { padding: 24px 20px; }
	.mke-intro h2 { font-size: 23px; }
}
@media (max-width: 600px) {
	.mke-custom-row { grid-template-columns: 1fr; }
	.mke-step-lbl { display: none; }
}