/* Stellenangebot Block Styles */
.stellenangebot-block {
	font-family: var(--font-family-base);
}

.stellenangebot-item {
	background-color: var(--color-base-100);
	box-shadow: var(--shadow-md);
	border: var(--size-border) solid var(--color-base-300);
	overflow: hidden;
	transition: all 0.2s ease;
}

.stellenangebot-item:hover {
	box-shadow: var(--shadow-lg);
}

.stellenangebot-header {
	padding: var(--space-lg);
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

@media (min-width: 960px) {
	.stellenangebot-header {
		flex-direction: row;
	}
}

.stellenangebot-header:hover {
	background-color: var(--color-base-200);
}

.stellenangebot-content {
	border-top: var(--size-border) solid var(--color-base-300);
}

/* Progress Steps */
.progress-step {
	width: 6rem;
	height: 2rem;
	border: 2px solid var(--color-base-300);
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--color-base-100);
	transition: all 0.2s ease;
}

.progress-step.active {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-primary-content);
}

/* Application Steps */
.application-step {
	display: none;
}

.application-step.active {
	display: block;
}

/* Form Elements */
.btn-primary:focus {
	outline: none;
	box-shadow: 0 0 0 3px oklch(var(--color-primary) / 0.1);
}

/* Navigation Buttons */
.step-navigation-buttons {
	/* Navigation buttons container */
}

/* File Upload */
.file-list-container {
	/* File list container */
}

/* Validation Messages */
.validation-error {
	/* Validation error messages */
}

.file-error {
	/* File upload error messages */
}

/* Application Form */
.application-form-view {
	/* Application form container */
}

.job-details-view {
	/* Job details container */
}

/* Prose Styling */
.stellenangebot-content .prose {
	color: var(--color-base-content);
	max-width: none;
}

.stellenangebot-content .prose h1 {
	color: var(--color-base-content);
	font-family: var(--font-family-heading);
	font-size: var(--text-4xl);
	line-height: var(--line-height-4xl);
	font-weight: 700;
	margin-top: var(--space-2xl);
	margin-bottom: var(--space-lg);
}

.stellenangebot-content .prose h2 {
	color: var(--color-base-content);
	font-family: var(--font-family-heading);
	font-size: var(--text-3xl);
	line-height: var(--line-height-3xl);
	font-weight: 600;
	margin-top: var(--space-xl);
	margin-bottom: var(--space-md);
}

.stellenangebot-content  .prose h3 {
	color: var(--color-base-content);
	font-family: var(--font-family-heading);
	font-size: var(--text-2xl);
	line-height: var(--line-height-2xl);
	font-weight: 600;
	margin-top: var(--space-lg);
	margin-bottom: var(--space-sm);
}

.stellenangebot-content.prose h4 {
	color: var(--color-base-content);
	font-family: var(--font-family-heading);
	font-size: var(--text-xl);
	line-height: var(--line-height-xl);
	font-weight: 600;
	margin-top: var(--space-md);
	margin-bottom: var(--space-sm);
}

.stellenangebot-content .prose h5 {
	color: var(--color-base-content);
	font-family: var(--font-family-heading);
	font-size: var(--text-lg);
	line-height: var(--line-height-lg);
	font-weight: 600;
	margin-top: var(--space-md);
	margin-bottom: var(--space-sm);
}

.stellenangebot-content .prose h6 {
	color: var(--color-base-content);
	font-family: var(--font-family-heading);
	font-size: var(--text-base);
	line-height: var(--line-height-base);
	font-weight: 600;
	margin-top: var(--space-md);
	margin-bottom: var(--space-sm);
}

.stellenangebot-content .prose p {
	color: var(--color-base-content);
	font-size: var(--text-base);
	line-height: var(--line-height-base);
	margin-top: var(--space-sm);
	margin-bottom: var(--space-sm);
}

.stellenangebot-content .prose ul {
	color: var(--color-base-content);
	margin-top: var(--space-sm);
	margin-bottom: var(--space-sm);
	padding-left: var(--space-lg);
}

.prose ol {
	color: var(--color-base-content);
	margin-top: var(--space-sm);
	margin-bottom: var(--space-sm);
	padding-left: var(--space-lg);
}

.prose li {
	color: var(--color-base-content);
	font-size: var(--text-base);
	line-height: var(--line-height-base);
	margin-top: var(--space-xs);
	margin-bottom: var(--space-xs);
}

.prose ul li {
	list-style-type: disc;
}

.prose ol li {
	list-style-type: decimal;
}

.prose ul ul,
.prose ol ol {
	margin-top: var(--space-xs);
	margin-bottom: var(--space-xs);
}

.prose ul ul li {
	list-style-type: circle;
}

.prose ol ol li {
	list-style-type: lower-alpha;
}

.prose ul ol li {
	list-style-type: decimal;
}

.prose ol ul li {
	list-style-type: disc;
}

.prose strong {
	font-weight: 600;
	color: var(--color-base-content);
}

.prose em {
	font-style: italic;
	color: var(--color-base-content);
}

.prose a {
	color: var(--color-primary);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
	transition: color 0.2s ease;
}

.prose a:hover {
	color: var(--color-primary);
	text-decoration-thickness: 2px;
}

.prose blockquote {
	border-left: 4px solid var(--color-primary);
	padding-left: var(--space-md);
	margin-left: 0;
	margin-right: 0;
	font-style: italic;
	color: var(--color-base-content);
	background-color: var(--color-base-200);
	padding: var(--space-md);
	border-radius: var(--radius-box);
}

.prose code {
	background-color: var(--color-base-200);
	color: var(--color-base-content);
	padding: 0.125rem 0.25rem;
	border-radius: var(--radius-field);
	font-family: var(--font-family-mono);
	font-size: 0.875em;
}

.prose pre {
	background-color: var(--color-base-200);
	color: var(--color-base-content);
	padding: var(--space-md);
	border-radius: var(--radius-box);
	overflow-x: auto;
	font-family: var(--font-family-mono);
	font-size: 0.875em;
	line-height: var(--line-height-base);
}

.prose pre code {
	background-color: transparent;
	padding: 0;
	border-radius: 0;
}

.prose hr {
	border: none;
	border-top: 1px solid var(--color-base-300);
	margin-top: var(--space-xl);
	margin-bottom: var(--space-xl);
}

.prose table {
	width: 100%;
	border-collapse: collapse;
	margin-top: var(--space-md);
	margin-bottom: var(--space-md);
}

.prose th {
	background-color: var(--color-base-200);
	color: var(--color-base-content);
	font-weight: 600;
	padding: var(--space-sm);
	text-align: left;
	border: 1px solid var(--color-base-300);
}

.prose td {
	padding: var(--space-sm);
	border: 1px solid var(--color-base-300);
	color: var(--color-base-content);
}

.prose img {
	max-width: 100%;
	height: auto;
	margin-top: var(--space-md);
	margin-bottom: var(--space-md);
}