/* CV Generator – Public Stylesheet | Namespace: cvgen- */

.cvgen-wrap {
	--cvgen-primary: #11306F;
	--cvgen-accent: #C9A227;
	--cvgen-bg: #ffffff;
	--cvgen-bg-soft: #F7F8FA;
	--cvgen-border: #E1E4EA;
	--cvgen-text: #1B1F27;
	--cvgen-text-muted: #6B7280;
	--cvgen-danger: #C0392B;
	--cvgen-radius: 10px;

	max-width: 760px;
	margin: 0 auto;
	padding: 32px;
	background: var(--cvgen-bg);
	border: 1px solid var(--cvgen-border);
	border-radius: var(--cvgen-radius);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--cvgen-text);
	box-sizing: border-box;
}
.cvgen-wrap *,
.cvgen-wrap *::before,
.cvgen-wrap *::after { box-sizing: border-box; }

.cvgen-brand { margin-bottom: 16px; }
.cvgen-brand img { max-height: 48px; width: auto; }

.cvgen-intro {
	color: var(--cvgen-text-muted);
	margin: 0 0 28px;
	line-height: 1.55;
}

/* Fortschrittsanzeige */
.cvgen-progress { margin-bottom: 32px; }
.cvgen-progress-bar {
	height: 6px;
	background: var(--cvgen-bg-soft);
	border-radius: 999px;
	overflow: hidden;
	margin-bottom: 14px;
}
.cvgen-progress-fill {
	height: 100%;
	width: 20%;
	background: var(--cvgen-primary);
	transition: width .35s ease;
}
.cvgen-steps-nav {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	justify-content: space-between;
	font-size: 12px;
	color: var(--cvgen-text-muted);
	flex-wrap: wrap;
	gap: 4px;
}
.cvgen-steps-nav li { flex: 1; text-align: center; position: relative; }
.cvgen-steps-nav li.active { color: var(--cvgen-primary); font-weight: 600; }
.cvgen-steps-nav li.done { color: var(--cvgen-primary); }

/* Schritte */
.cvgen-step { display: none; animation: cvgen-fade .25s ease; }
.cvgen-step.active { display: block; }
@keyframes cvgen-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.cvgen-step h2 {
	font-size: 20px;
	margin: 0 0 20px;
	color: var(--cvgen-text);
}
.cvgen-step h3 {
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--cvgen-text-muted);
	margin: 24px 0 10px;
}

.cvgen-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
.cvgen-span-2 { grid-column: span 2; }

.cvgen-field { display: flex; flex-direction: column; gap: 6px; }
.cvgen-field label { font-size: 13px; font-weight: 600; color: var(--cvgen-text); }
.cvgen-field input[type="text"],
.cvgen-field input[type="email"],
.cvgen-field input[type="tel"],
.cvgen-field input[type="date"],
.cvgen-field input[type="month"],
.cvgen-field input[type="file"],
.cvgen-field select,
.cvgen-field textarea,
#cvgen_tag_input_it,
#cvgen_tag_input_soft {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--cvgen-border);
	border-radius: 8px;
	font-size: 14px;
	font-family: inherit;
	color: var(--cvgen-text);
	background: #fff;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.cvgen-field input:focus,
.cvgen-field select:focus,
.cvgen-field textarea:focus,
#cvgen_tag_input_it:focus,
#cvgen_tag_input_soft:focus {
	outline: none;
	border-color: var(--cvgen-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--cvgen-primary) 18%, transparent);
}
.cvgen-field textarea { resize: vertical; }
.cvgen-field.cvgen-invalid input,
.cvgen-field.cvgen-invalid textarea { border-color: var(--cvgen-danger); }

.cvgen-photo-preview { display: flex; gap: 10px; margin-top: 8px; }
.cvgen-photo-preview img {
	width: 72px; height: 72px; object-fit: cover;
	border-radius: 8px; border: 1px solid var(--cvgen-border);
}

/* Wiederholbare Einträge (Erfahrung / Ausbildung / Sprachen) */
.cvgen-repeat-item {
	position: relative;
	background: var(--cvgen-bg-soft);
	border: 1px solid var(--cvgen-border);
	border-radius: var(--cvgen-radius);
	padding: 18px;
	margin-bottom: 14px;
}
.cvgen-repeat-inline { padding: 14px 18px; }
.cvgen-remove-item {
	position: absolute;
	top: 10px; right: 10px;
	width: 26px; height: 26px;
	border-radius: 50%;
	border: none;
	background: #fff;
	color: var(--cvgen-text-muted);
	cursor: pointer;
	font-size: 13px;
	line-height: 1;
	border: 1px solid var(--cvgen-border);
}
.cvgen-remove-item:hover { color: var(--cvgen-danger); border-color: var(--cvgen-danger); }

.cvgen-btn-add {
	background: none;
	border: 1px dashed var(--cvgen-primary);
	color: var(--cvgen-primary);
	padding: 10px 16px;
	border-radius: 8px;
	cursor: pointer;
	font-size: 13px;
	font-weight: 600;
	width: 100%;
}
.cvgen-btn-add:hover { background: color-mix(in srgb, var(--cvgen-primary) 8%, transparent); }

/* Tags (IT-Kenntnisse / Soft Skills) */
.cvgen-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.cvgen-tag {
	display: inline-flex; align-items: center; gap: 6px;
	background: var(--cvgen-bg-soft);
	border: 1px solid var(--cvgen-border);
	color: var(--cvgen-text);
	padding: 5px 10px;
	border-radius: 999px;
	font-size: 13px;
}
.cvgen-tag button {
	border: none; background: none; cursor: pointer;
	color: var(--cvgen-text-muted); font-size: 12px; line-height: 1; padding: 0;
}

/* Zusammenfassung */
.cvgen-preview-box {
	background: var(--cvgen-bg-soft);
	border: 1px solid var(--cvgen-border);
	border-radius: var(--cvgen-radius);
	padding: 16px 18px;
	font-size: 13px;
	color: var(--cvgen-text-muted);
	margin-bottom: 18px;
	line-height: 1.7;
}
.cvgen-preview-box strong { color: var(--cvgen-text); }

.cvgen-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 13px;
	color: var(--cvgen-text-muted);
	line-height: 1.5;
	cursor: pointer;
}
.cvgen-checkbox input { margin-top: 3px; }
.cvgen-checkbox a { color: var(--cvgen-primary); }

/* Navigation */
.cvgen-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 28px;
	padding-top: 20px;
	border-top: 1px solid var(--cvgen-border);
}
.cvgen-btn {
	padding: 12px 24px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	border: 1px solid transparent;
	transition: transform .1s ease, opacity .15s ease;
}
.cvgen-btn:active { transform: translateY(1px); }
.cvgen-btn-primary { background: var(--cvgen-primary); color: #fff; margin-left: auto; }
.cvgen-btn-primary:hover { opacity: .92; }
.cvgen-btn-primary:disabled { opacity: .55; cursor: not-allowed; }
.cvgen-btn-secondary { background: none; border-color: var(--cvgen-border); color: var(--cvgen-text); }
.cvgen-btn-secondary:hover { background: var(--cvgen-bg-soft); }

.cvgen-status {
	margin-top: 14px;
	font-size: 13px;
	text-align: center;
	min-height: 18px;
}
.cvgen-status.cvgen-error { color: var(--cvgen-danger); }
.cvgen-status.cvgen-loading { color: var(--cvgen-text-muted); }

/* Erfolgsansicht */
.cvgen-success { text-align: center; padding: 40px 20px; }
.cvgen-success-icon {
	width: 56px; height: 56px; line-height: 56px;
	border-radius: 50%;
	background: var(--cvgen-primary);
	color: #fff;
	font-size: 26px;
	margin: 0 auto 18px;
}
.cvgen-success p { color: var(--cvgen-text-muted); font-size: 15px; line-height: 1.6; }

.cvgen-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

/* Mobil */
@media (max-width: 600px) {
	.cvgen-wrap { padding: 20px; border-radius: 0; }
	.cvgen-grid { grid-template-columns: 1fr; }
	.cvgen-span-2 { grid-column: span 1; }
	.cvgen-steps-nav li:not(.active) { display: none; }
	.cvgen-steps-nav { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
	.cvgen-step, .cvgen-progress-fill { animation: none !important; transition: none !important; }
}