.sm-fe {
	max-width: 1400px;
	margin: 0 auto;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: #1d2327;
	line-height: 1.5;
}

/* !important, da das Avada-Theme auf manchen Elementen (z.B. Absätzen, Links)
   eine eigene Schriftart mit höherer Spezifität setzt, die sonst gewinnen würde. */
.sm-fe,
.sm-fe * {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

.sm-fe select {
	/* Ohne diese Zeile erben select-Felder die line-height:1.5 von .sm-fe,
	   wodurch der interne Textbereich höher wird als die native Select-Box –
	   der Text wirkt dann abgeschnitten (nur die obere Hälfte sichtbar),
	   v.a. in Chrome/Edge unter Windows. */
	line-height: normal;
}

.sm-fe-narrow {
	max-width: 420px;
}

.sm-fe h1 {
	font-size: 22px;
	font-weight: 700;
	color: #1d2327;
	margin: 0 0 4px;
}

.sm-fe h2 {
	font-size: 18px;
	margin: 24px 0 12px;
}

.sm-fe h3 {
	font-size: 15px;
	margin: 0 0 12px;
}

.sm-fe-header {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px;
	border-bottom: 1px solid #dcdcde;
	padding-bottom: 12px;
	margin-bottom: 16px;
}

.sm-fe-user {
	font-size: 13px;
	color: #50575e;
	display: flex;
	align-items: center;
	gap: 6px;
}

.sm-alert {
	padding: 10px 14px;
	border-radius: 4px;
	margin: 12px 0;
	font-size: 14px;
}

.sm-alert-success {
	background: #e6f4ea;
	color: #1e6b34;
}

.sm-alert-error {
	background: #fbeaea;
	color: #a3232c;
}

.sm-tabs {
	display: flex;
	gap: 4px;
	border-bottom: 1px solid #dcdcde;
	margin-bottom: 16px;
	flex-wrap: wrap;
}

.sm-tabs a {
	padding: 8px 14px;
	text-decoration: none;
	color: #50575e;
	border-bottom: 2px solid transparent;
	font-size: 14px;
}

.sm-tabs a.active,
.sm-tabs a:hover {
	color: #1d2327;
	border-bottom-color: #2271b1;
}

.sm-form p {
	margin: 0 0 12px;
}

.sm-form label {
	display: block;
	font-weight: 600;
	font-size: 13px;
	margin-bottom: 4px;
}

.sm-form input[type="text"],
.sm-form input[type="email"],
.sm-form input[type="password"],
.sm-form input[type="search"],
.sm-form select,
.sm-form textarea {
	width: 100%;
	max-width: 420px;
	padding: 8px 10px;
	border: 1px solid #8c8f94;
	border-radius: 4px;
	font-size: 14px;
	box-sizing: border-box;
}


.sm-form textarea {
	max-width: 100%;
}

/*
 * Zweispaltiges Layout für größere Bildschirme (z.B. "Ticket erfassen" als
 * eigene Seite) – nutzt die verfügbare Breite besser aus, statt alle Felder
 * einspaltig mit viel Leerraum rechts daneben darzustellen. Felder ohne
 * "sm-span-2" stehen paarweise nebeneinander, mit "sm-span-2" über die volle
 * Breite (z.B. Beschreibung, Checkbox, Button).
 */
.sm-form-grid {
	display: grid;
	grid-template-columns: 1fr;
	column-gap: 24px;
}

.sm-form-grid p,
.sm-form-grid > div {
	min-width: 0;
}

/*
 * Feld-Wrapper, die ein verschachteltes <div> enthalten (z.B. Kunde-Autocomplete),
 * müssen selbst <div> statt <p> sein: ein <div> ist innerhalb eines <p> nicht
 * erlaubt, der Browser schließt das <p> in diesem Fall automatisch VOR dem <div> –
 * dadurch würden im Grid-Layout aus einem Feld plötzlich zwei/drei einzelne
 * Grid-Zellen statt einer, was das Raster durcheinanderbringt.
 */
.sm-form-grid > div {
	margin: 0 0 12px;
}

.sm-form-grid input[type="text"],
.sm-form-grid input[type="email"],
.sm-form-grid input[type="password"],
.sm-form-grid input[type="search"],
.sm-form-grid select,
.sm-form-grid .sm-kunde-autocomplete {
	max-width: none;
}

@media (min-width: 700px) {
	.sm-form-grid {
		grid-template-columns: 1fr 1fr;
	}

	.sm-form-grid .sm-span-2 {
		grid-column: 1 / -1;
	}
}

.sm-checkbox {
	display: flex !important;
	align-items: center;
	gap: 6px;
	font-weight: normal !important;
}

.sm-checkbox input {
	width: auto;
}

.sm-btn {
	display: inline-block;
	padding: 8px 16px;
	background: #f0f0f1;
	color: #1d2327;
	border: 1px solid #8c8f94;
	border-radius: 4px;
	cursor: pointer;
	font-size: 14px;
	text-decoration: none;
}

.sm-btn:hover {
	background: #e0e0e0;
}

.sm-btn-primary {
	background: #2271b1;
	border-color: #2271b1;
	color: #fff;
}

.sm-btn-primary:hover {
	background: #135e96;
}

.sm-btn-small {
	padding: 4px 10px;
	font-size: 12px;
}

.sm-btn-link {
	background: none;
	border: none;
	color: #2271b1;
	text-decoration: underline;
	padding: 0;
}

.sm-inline-form {
	display: inline;
}

.sm-filterbar {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	align-items: center;
	margin-bottom: 16px;
}

.sm-filterbar select,
.sm-filterbar input {
	padding: 6px 8px;
	border: 1px solid #8c8f94;
	border-radius: 4px;
}

.sm-table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 20px;
}

.sm-table th,
.sm-table td {
	text-align: left;
	padding: 10px 12px;
	border-bottom: 1px solid #e0e0e0;
	font-size: 14px;
}

.sm-sa-review-table th:nth-child(2),
.sm-sa-review-table td:nth-child(2) {
	width: 38%;
}

.sm-sa-review-table .sm-kunde-autocomplete {
	max-width: none;
	width: 100%;
}

.sm-sa-review-table .sm-kunde-input {
	max-width: none;
	width: 100%;
	box-sizing: border-box;
}

.sm-table th {
	font-size: 12px;
	text-transform: uppercase;
	color: #50575e;
	border-bottom: 2px solid #dcdcde;
}

.sm-table a {
	color: #2271b1;
}

.sm-badge {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 12px;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}

.sm-status-offen { background: #f0f0f1; color: #50575e; }
.sm-status-zugeteilt { background: #e5f2ff; color: #0a4b78; }
.sm-status-in_bearbeitung { background: #fff4e5; color: #8a5a00; }
.sm-status-erledigt { background: #e6f4ea; color: #1e6b34; }

.sm-prio-niedrig { background: #f0f0f1; color: #50575e; }
.sm-prio-mittel { background: #fff4e5; color: #8a5a00; }
.sm-prio-hoch { background: #fbeaea; color: #a3232c; }

.sm-detail-grid {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 20px;
	align-items: start;
}

.sm-box {
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 6px;
	padding: 18px;
	margin-bottom: 16px;
}

.sm-kunde-detail-top {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	align-items: flex-start;
}

.sm-kunde-detail-top > .sm-box {
	flex: 1 1 380px;
}

.sm-kunde-zusatzbox h4 {
	margin: 0 0 6px;
}

.sm-kunde-zusatzbox textarea {
	width: 100%;
}

.sm-kunde-dateien-liste {
	list-style: none;
	margin: 0 0 12px;
	padding: 0;
}

.sm-kunde-dateien-liste li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 0;
	border-bottom: 1px solid #f0f0f1;
}

.sm-kunde-inaktiv {
	opacity: 0.6;
}

.sm-muted {
	color: #757575;
	font-size: 13px;
}

.description {
	color: #757575;
	font-size: 13px;
}

@media (max-width: 900px) {
	.sm-detail-grid {
		grid-template-columns: 1fr;
	}
}

.sm-kunde-autocomplete {
	position: relative;
	max-width: 420px;
}

.sm-kunde-suggestions {
	position: absolute;
	z-index: 100;
	top: 100%;
	left: 0;
	right: 0;
	margin: 2px 0 0;
	padding: 0;
	list-style: none;
	background: #fff;
	border: 1px solid #8c8f94;
	border-radius: 4px;
	max-height: 240px;
	overflow-y: auto;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.sm-kunde-suggestions li {
	padding: 6px 10px;
	cursor: pointer;
	font-size: 13px;
}

.sm-kunde-suggestions li:hover,
.sm-kunde-suggestions li:focus {
	background: #f0f0f1;
}

.sm-kunde-suggestions li.sm-kunde-suggestion-info {
	color: #757575;
	font-style: italic;
	cursor: default;
}

.sm-kunde-suggestions li.sm-kunde-suggestion-info:hover {
	background: none;
}

.sm-quickadd {
	margin-bottom: 16px;
}

.sm-heading-with-action {
	display: flex;
	align-items: baseline;
	justify-content: flex-start;
	flex-wrap: wrap;
	gap: 8px 20px;
}

.sm-heading-with-action h2,
.sm-heading-with-action h3 {
	margin: 0;
}

.sm-heading-with-action .sm-quickadd {
	margin-bottom: 0;
}

.sm-quickadd > summary {
	cursor: pointer;
	font-weight: 600;
	color: #2271b1;
	list-style: none;
	padding: 4px 0;
}

.sm-quickadd > summary::-webkit-details-marker {
	display: none;
}

.sm-quickadd > summary::before {
	content: "+ ";
}

.sm-quickadd[open] > summary::before {
	content: "\2212 ";
}

.sm-quickadd .sm-form {
	margin-top: 12px;
	padding: 16px;
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 6px;
}

.sm-inline-quickadd {
	margin: 4px 0 0;
}

.sm-inline-quickadd > summary {
	font-size: 12px;
	padding: 0;
}

.sm-inline-quickadd form {
	margin-top: 6px;
}

.sm-filter-panel {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: flex-end;
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 6px;
	padding: 14px 16px;
	margin-bottom: 16px;
}

.sm-filter-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 160px;
}

.sm-filter-field label {
	font-size: 12px;
	font-weight: 600;
	color: #50575e;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.sm-filter-field input,
.sm-filter-field select {
	padding: 7px 9px;
	border: 1px solid #8c8f94;
	border-radius: 4px;
	font-size: 14px;
}

.sm-filter-field .sm-kunde-autocomplete {
	max-width: none;
}

.sm-filter-actions {
	display: flex;
	gap: 8px;
	margin-left: auto;
}

/* ---------- Smartphone-Optimierung ---------- */
@media (max-width: 680px) {
	.sm-standalone-wrap {
		padding: 16px 10px;
	}

	.sm-fe h1 {
		font-size: 19px;
	}

	.sm-fe-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}

	.sm-fe-user {
		font-size: 12px;
		flex-wrap: wrap;
	}

	.sm-tabs {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.sm-tabs::-webkit-scrollbar {
		display: none;
	}

	.sm-tabs a {
		padding: 8px 10px;
		font-size: 13px;
		white-space: nowrap;
		flex-shrink: 0;
	}

	.sm-table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		white-space: nowrap;
	}

	.sm-table th,
	.sm-table td {
		padding: 8px;
		font-size: 13px;
	}

	.sm-filter-panel {
		padding: 12px;
		gap: 10px;
	}

	.sm-filter-field {
		flex: 1 1 100%;
		min-width: 0;
	}

	.sm-filter-actions {
		margin-left: 0;
		width: 100%;
	}

	.sm-filter-actions .sm-btn {
		flex: 1 1 auto;
		text-align: center;
	}

	.sm-kunde-detail-top {
		flex-direction: column;
	}

	.sm-kunde-detail-top > .sm-box {
		flex-basis: auto;
		width: 100%;
		box-sizing: border-box;
	}

	.sm-btn {
		padding: 9px 14px;
	}

	.sm-quickadd .sm-form {
		padding: 12px;
	}
}