/*
	Einreichformular.

	Nutzt dieselben CSS-Variablen wie das Theme (--accent, --surface,
	--line usw.), damit sich das Formular nicht wie ein Fremdkörper
	anfühlt. Fällt auf sinnvolle Werte zurück, falls diese Variablen
	aus irgendeinem Grund nicht verfügbar sind.
*/

.em-sf {
	max-width: 640px;
	margin: 0 auto;
	padding: 4px 0 40px;
}

.em-sf__gate {
	text-align: center;
	padding: 40px 24px;
	background: var(--surface, #fff);
	border: 1px solid var(--line, #e2d2d6);
	border-radius: 16px;
}
.em-sf__gate h2 {
	margin: 0 0 10px;
	font-family: var(--font-display, inherit);
	color: var(--heading, #8a2440);
}
.em-sf__gate p { color: var(--text-muted, #5c4650); margin: 0 0 20px; }
.em-sf__gate-alt { margin-top: 16px; font-size: 14px; }
.em-sf__gate-alt a { color: var(--accent, #8a6210); }

.em-sf__msg {
	margin: 0 0 20px;
	padding: 13px 15px;
	font-size: 14.5px;
	border-radius: 10px;
}
/*
 * Der Erfolgsfall hatte bisher gar keine Farbe – nur Polster und
 * Textgröße. Die Meldung stand also als schmuckloser Satz über dem
 * Formular und ging schlicht unter.
 */
.em-sf__msg {
	background: var(--status-on-soft, rgba(78, 203, 113, 0.18));
	color: var(--status-on, #4ecb71);
}
.em-sf__msg--fehler {
	background: rgba(255, 107, 90, 0.14);
	color: var(--danger, #ff6b5a);
}
[data-theme="light"] .em-sf__msg--fehler {
	background: rgba(192, 57, 43, 0.10);
}

.em-sf__hint--warn { color: var(--accent-2, #9e2e4c); }

/* Dateiauswahl im Veranstaltungsformular */
.em-sf__file {
	width: 100%;
	padding: 11px 12px;
	font: inherit;
	font-size: 14px;
	color: var(--text, #1e0c14);
	background: var(--surface, #fff);
	border: 1px dashed var(--line-gold, #e2d2d6);
	border-radius: 10px;
	cursor: pointer;
}
.em-sf__file:hover { border-color: var(--accent, #8a6210); }
.em-sf__file::file-selector-button {
	margin-right: 12px;
	padding: 7px 14px;
	font: inherit;
	font-size: 13px;
	color: var(--btn-text, #14703a);
	background: var(--btn-fill, rgba(30, 158, 74, 0.16));
	border: 0;
	border-radius: 6px;
	cursor: pointer;
}

/* Ansicht nach dem Einreichen */
.em-sf__danke {
	text-align: center;
	padding: 44px 28px 40px;
	background: var(--surface, #fff);
	border: 1px solid var(--line-gold, #e2d2d6);
	border-radius: 16px;
}
.em-sf__danke-haken {
	display: inline-grid;
	place-items: center;
	width: 58px;
	height: 58px;
	margin-bottom: 18px;
	border-radius: 50%;
	background: var(--status-on-soft, rgba(78, 203, 113, 0.18));
	color: var(--status-on, #4ecb71);
}
.em-sf__danke-haken svg { width: 30px; height: 30px; }
.em-sf__danke h2 {
	font-family: var(--font-display, Georgia, serif);
	font-weight: var(--weight-display, 400);
	color: var(--heading, #8a2440);
	margin: 0 0 12px;
}
.em-sf__danke p {
	max-width: 46ch;
	margin: 0 auto 26px;
	color: var(--text-muted, #5c4650);
}
.em-sf__danke-knoepfe {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: center;
}
.em-sf__danke-link {
	font-size: 14px;
	color: var(--accent, #8a6210);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.em-sf__step {
	margin-bottom: 32px;
	padding-bottom: 28px;
	border-bottom: 1px solid var(--line, #e2d2d6);
}
.em-sf__step:last-of-type { border-bottom: 0; }

.em-sf__step-title {
	margin: 0 0 18px;
	font-family: var(--font-display, inherit);
	font-size: 18px;
	color: var(--heading, #8a2440);
}

.em-sf__label {
	display: block;
	margin: 16px 0 6px;
	font-size: 14px;
	font-weight: 600;
	color: var(--text, #1e0c14);
}
.em-sf__field > .em-sf__label:first-child { margin-top: 0; }

/* Jedes dynamische Feld ist sein eigener Block – ohne diesen Abstand
   klebten die Felder aneinander, weil ihr Label ebenfalls ":first-child"
   innerhalb des eigenen Feldes ist und dadurch keinen oberen Rand bekam. */
.em-sf__field {
	margin-top: 26px;
	padding-top: 4px;
}
.em-sf__field:first-of-type { margin-top: 0; }

/* Kurze Felder wie Preis oder eine Auswahl passen nebeneinander –
   spart Platz und zeigt, dass sie zusammengehören.

   Raster statt Flexbox: Damit sind beide Spalten garantiert gleich
   breit, unabhängig von der Länge der Beschriftung. Der Abstand nach
   oben liegt jetzt an der Zeile selbst – vorher hatte ihn jedes Feld,
   und weil ":first-of-type" nur für das linke griff, stand das rechte
   Feld samt Beschriftung 26 Pixel tiefer. */
.em-sf__fields-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	align-items: start;
	gap: 26px 20px;
	margin-top: 26px;
	padding-top: 4px;
}
.em-sf__fields-row:first-child { margin-top: 0; }

/* Bewusst mit .em-sf davor: Diese Regel und
   ".em-sf__field:first-of-type" wären sonst gleich stark und es käme
   allein auf die Reihenfolge im Stylesheet an – zu zerbrechlich für
   etwas, das nur an einer Stelle sichtbar schiefgeht. */
.em-sf .em-sf__fields-row .em-sf__field {
	margin-top: 0;
	padding-top: 0;
	min-width: 0;
}

.em-sf__input {
	display: block;
	width: 100%;
	box-sizing: border-box;
	min-height: 48px;
	padding: 12px 14px;
	font-size: 16px;
	font-family: inherit;
	color: var(--text, #1e0c14);
	background: var(--surface, #fff);
	border: 1px solid var(--line, #e2d2d6);
	border-radius: 10px;
	-webkit-appearance: none;
	appearance: none;
}
textarea.em-sf__input { min-height: 120px; resize: vertical; }

.em-sf__toolbar {
	display: flex;
	gap: 6px;
	margin-bottom: 6px;
}
.em-sf__toolbar-btn {
	min-width: 36px;
	height: 34px;
	padding: 0 10px;
	font-size: 14px;
	color: var(--text, #1e0c14);
	background: var(--surface, #fff);
	border: 1px solid var(--line, #e2d2d6);
	border-radius: 8px;
	cursor: pointer;
}
.em-sf__toolbar-btn:hover { border-color: var(--accent, #8a6210); color: var(--accent, #8a6210); }
.em-sf__input:focus {
	outline: 2px solid var(--accent, #8a6210);
	outline-offset: 1px;
	border-color: var(--accent, #8a6210);
}
.em-sf__input:invalid:not(:placeholder-shown) { border-color: var(--danger, #b3261e); }

.em-sf__hint { margin: 6px 0 0; font-size: 13px; color: var(--text-muted, #5c4650); }

.em-sf__choices { display: flex; flex-wrap: wrap; gap: 10px 20px; }
.em-sf__choice {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14.5px;
	color: var(--text, #1e0c14);
	cursor: pointer;
}
.em-sf__choice input { width: 20px; height: 20px; accent-color: var(--accent, #8a6210); }

.em-sf__check {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 4px 0 22px;
	font-size: 14px;
	color: var(--text, #1e0c14);
	cursor: pointer;
}
.em-sf__check input { width: 22px; height: 22px; flex: 0 0 22px; accent-color: var(--accent, #8a6210); }

.em-sf__actions {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.em-sf__submit {
	display: block;
	width: 100%;
	min-height: 52px;
	padding: 14px 20px;
	font-size: 16px;
	font-weight: 700;
	font-family: inherit;
	/* Gleiche Quelle wie "Inserat aufgeben" und "Neue Anzeige":
	   im Hellmodus gedämpftes Grün, im Dunkeln Gold. */
	color: var(--btn-text, var(--on-accent, #fff));
	background: var(--btn-fill, var(--accent, #8a6210));
	border: 0;
	border-radius: 10px;
	cursor: pointer;
}
.em-sf__submit:hover { background: var(--btn-fill-hover, var(--accent-hover, #7e5a0e)); }

.em-sf__submit--ghost {
	color: var(--text, #1e0c14);
	background: transparent;
	border: 1px solid var(--line, rgba(138, 98, 16, 0.45));
	font-weight: 600;
}
.em-sf__submit--ghost:hover { filter: none; border-color: var(--accent, #8a6210); }

/* Bilder */

.em-sf__drop {
	position: relative;
	border: 2px dashed var(--line, #e2d2d6);
	border-radius: 14px;
	padding: 28px 16px;
	text-align: center;
	transition: border-color .15s ease, background .15s ease;
}
.em-sf__drop.is-over { border-color: var(--accent, #8a6210); background: var(--card, #efe2e5); }

.em-sf__drop input[type="file"] {
	position: absolute;
	inset: 0;
	opacity: 0;
	cursor: pointer;
}

.em-sf__drop-label {
	display: block;
	font-size: 14.5px;
	color: var(--text-muted, #5c4650);
	pointer-events: none;
}

.em-sf__preview {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
	gap: 10px;
	margin-top: 18px;
}

.em-sf__thumb {
	position: relative;
	aspect-ratio: 3 / 4;
	border-radius: 10px;
	overflow: hidden;
	background: var(--card, #efe2e5);
}
.em-sf__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.em-sf__thumb-remove {
	position: absolute;
	top: 5px;
	right: 5px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	border: 0;
	background: rgba(8, 3, 5, 0.72);
	color: #fff;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	z-index: 2;
}

/* Marke ist jetzt ein Knopf: golden gefüllt beim Titelbild, sonst
   zurückhaltend dunkel und erst beim Überfahren deutlich. */
.em-sf__thumb-badge {
	position: absolute;
	bottom: 5px;
	left: 5px;
	right: 5px;
	padding: 3px 8px;
	border: 0;
	font-family: inherit;
	font-size: 10px;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-align: center;
	background: rgba(20, 6, 12, 0.62);
	color: #fff;
	border-radius: 999px;
	cursor: pointer;
	opacity: 0.85;
	transition: background 0.15s ease, opacity 0.15s ease;
	z-index: 2;
}

.em-sf__thumb-badge:hover { background: var(--accent, #8a6210); opacity: 1; }

.em-sf__thumb-badge.is-on {
	background: var(--accent, #8a6210);
	color: var(--on-accent, #fff);
	opacity: 1;
	cursor: default;
}

@media (min-width: 640px) {
	.em-sf__submit { width: auto; min-width: 260px; }
	.em-sf__actions { flex-direction: row; }
}

/* Kennzeichnung optionaler Felder im Veranstaltungsformular. */
.em-sf__opt {
	font-weight: 400;
	font-size: 13px;
	color: var(--text-faint, #7c6a72);
}

/* select sieht sonst deutlich anders aus als die Textfelder. */
select.em-sf__input {
	appearance: none;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c6a72' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 18px;
	padding-right: 40px;
}

/* Datums- und Auswahlfelder bringen eigene Innenmaße mit. Ohne
   gemeinsame Zeilenhöhe stehen sie ein bis zwei Pixel anders als die
   Textfelder daneben – in einer Zeile fällt genau das auf. */
input.em-sf__input[type="date"],
input.em-sf__input[type="datetime-local"],
select.em-sf__input {
	line-height: 1.5;
	min-height: 0;
}
input.em-sf__input[type="date"]::-webkit-calendar-picker-indicator,
input.em-sf__input[type="datetime-local"]::-webkit-calendar-picker-indicator {
	opacity: 0.55;
	cursor: pointer;
}

/* ------------------------------------------------------------------
   Bearbeiten einer bestehenden Anzeige
------------------------------------------------------------------ */

.em-sf__edit-kopf {
	margin-bottom: 24px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--line-soft, #efe6e8);
}

.em-sf__edit-titel {
	margin: 0 0 6px;
	font-family: var(--font-display, inherit);
	font-weight: var(--weight-display, 600);
	font-size: 24px;
	line-height: 1.25;
	color: var(--heading, #8a2440);
}

.em-sf__edit-hinweis {
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--text-muted, #5c4650);
	max-width: 66ch;
}

.em-sf__bestand { margin-bottom: 18px; }

.em-sf__bestand-liste {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 8px 0 10px;
}

.em-sf__bestand-bild {
	position: relative;
	width: 116px;
	border-radius: var(--radius, 8px);
	overflow: hidden;
	cursor: pointer;
	border: 1px solid var(--line, #e2d2d6);
}

.em-sf__bestand-bild img {
	display: block;
	width: 100%;
	height: 96px;
	object-fit: cover;
	transition: opacity 0.15s ease;
}

/* Abgewähltes Bild sofort erkennbar – sonst merkt niemand, dass es
   beim Speichern verschwindet. */
.em-sf__bestand-bild:has(input:not(:checked)) img { opacity: 0.32; }
.em-sf__bestand-bild:has(input:not(:checked)) { border-style: dashed; }

.em-sf__bestand-marke {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 7px 9px;
	font-size: 12.5px;
	background: var(--panel, #fff);
	color: var(--text, #1e0c14);
}

/* ------------------------------------------------------------------
   Beschreibungsfeld mit sichtbarer Formatierung
------------------------------------------------------------------ */

.em-sf__versteckt {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.em-sf__rtf {
	min-height: 190px;
	max-height: 420px;
	overflow-y: auto;
	line-height: 1.6;
	white-space: pre-wrap;
	overflow-wrap: break-word;
	cursor: text;
}

.em-sf__rtf:focus {
	outline: 0;
	border-color: var(--accent, #8a6210);
	box-shadow: 0 0 0 3px rgba(217, 164, 65, 0.18);
}

.em-sf__rtf strong { font-weight: 700; }
.em-sf__rtf em { font-style: italic; }

/* Leerer Editor bekommt einen Hinweistext, sonst wirkt der Kasten
   wie ein Anzeigefeld statt wie ein Eingabefeld. */
.em-sf__rtf:empty::before {
	content: "Beschreib Dein Angebot …";
	color: var(--text-faint, #7c6a72);
}

.em-sf__rtf.is-fehler {
	border-color: var(--danger, #c0392b);
	box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.14);
}

/*
 * Hinweis im Bearbeitungsmodus.
 *
 * Nicht grün wie die Erfolgsmeldung und nicht rot wie der Fehler — es
 * ist beides nicht, sondern eine Auskunft über den Zustand. Gold ist
 * auf dieser Seite die Farbe dafür.
 */
.em-sf__msg--info {
	background: rgba(217, 164, 65, 0.14);
	color: var(--accent, #8a6210);
}
[data-theme="light"] .em-sf__msg--info {
	background: rgba(138, 98, 16, 0.10);
}

/*
 * Zeile mit nur einem Feld.
 *
 * "auto-fit" lässt eine Zeile mit einem einzigen Kind auf die volle
 * Breite wachsen — dann steht ein Feld doppelt so breit da wie die
 * darüber, und das wirkt wie ein Versehen. Zwei feste Spalten halten
 * die Breite, die rechte bleibt leer.
 */
.em-sf__fields-row--halb {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 640px) {
	/* Auf dem Telefon steht ohnehin alles untereinander. */
	.em-sf__fields-row--halb { grid-template-columns: minmax(0, 1fr); }
}

/*
 * Mehrfachauswahl als Raster statt als umbrechende Reihe.
 *
 * Nur für Mehrfachauswahlen (--raster). Auswahlknöpfe wie "Ich biete /
 * Ich suche" behalten die umbrechende Reihe: Bei zwei kurzen Worten
 * stünde sonst neben jedem ein halbleerer Streifen.
 *
 * "flex-wrap" reiht die Punkte aneinander und bricht um, wo es gerade
 * eng wird — bei unterschiedlich langen Beschriftungen wie "Deutsch"
 * und "Bosnisch / Kroatisch / Serbisch" beginnt dadurch jede Zeile
 * woanders. Das Auge findet keine Spalte und liest jedes Kästchen
 * einzeln.
 *
 * Im Raster sind alle Spalten gleich breit, die Kästchen stehen
 * untereinander, und man erfasst die Liste mit einem Blick.
 *
 * 260 px als Mindestbreite, nicht weniger: "Bosnisch / Kroatisch /
 * Serbisch" braucht mit Kästchen rund 256 px. Bei 190 hätte das Raster
 * drei Spalten à 221 px gebildet, und ausgerechnet die längste
 * Beschriftung wäre umgebrochen — der Mischmasch wäre geblieben, nur
 * ordentlicher sortiert. Mit 260 sind es zwei Spalten à 341 px, und
 * jede Beschriftung passt in ihre Zeile.
 */
.em-sf__choices--raster {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 12px 18px;
}

.em-sf__choice {
	/* "start" statt "center": Bricht eine Beschriftung doch einmal um,
	   bleibt das Kästchen auf Höhe der ersten Zeile statt in die Mitte
	   zu rutschen. */
	align-items: start;
}
.em-sf__choice input { margin-top: 2px; }

@media (max-width: 640px) {
	/* Auf dem Telefon eine Spalte: Bei 350 px Inhaltsbreite passt
	   keine zweite daneben, ohne dass die langen Namen umbrechen. */
	.em-sf__choices--raster { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}