/*
	Kontoformulare.

	Die Farbwerte kommen aus dem Theme, mit Rückfallwerten für den Fall,
	dass ein anderes Theme aktiv ist. Schriftgröße in Eingabefeldern
	bewusst 16px: darunter zoomt iOS beim Antippen hinein.
*/

.em-acc {
	max-width: 460px;
	margin: 0 auto;
	padding: 4px 0 32px;
}

.em-acc__title {
	font-family: var(--font-display, inherit);
	font-size: 26px;
	line-height: 1.2;
	margin: 0 0 8px;
	color: var(--heading, #8a2440);
}

.em-acc__lead {
	margin: 0 0 22px;
	font-size: 15px;
	line-height: 1.55;
	color: var(--text-muted, #5c4650);
}

.em-acc__form { margin: 0 0 18px; }

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

.em-acc__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, rgba(138, 98, 16, 0.45));
	border-radius: var(--radius, 10px);
	-webkit-appearance: none;
	appearance: none;
}

.em-acc__input:focus {
	outline: 2px solid var(--accent, #8a6210);
	outline-offset: 1px;
	border-color: var(--accent, #8a6210);
}

/* Passwort mit Augen-Knopf zum Anzeigen/Verbergen */
.em-acc__pwwrap { position: relative; }
.em-acc__pwwrap .em-acc__input { padding-right: 46px; }
.em-acc__pwtoggle {
	position: absolute;
	top: 50%;
	right: 4px;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--text-muted, #5c4650);
	cursor: pointer;
	border-radius: var(--radius, 10px);
}
.em-acc__pwtoggle:hover { color: var(--accent, #8a6210); }
.em-acc__pwtoggle svg { width: 20px; height: 20px; display: block; }

.em-acc__input--code {
	font-family: var(--font-mono, ui-monospace, monospace);
	font-size: 24px;
	letter-spacing: 8px;
	text-align: center;
}

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

.em-acc__check {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 20px 0 4px;
	font-size: 14px;
	/*
	 * Zeilenhöhe gleich der Kästchenhöhe (22 px), nicht 1.5.
	 *
	 * Damit sind Kästchen und erste Textzeile exakt gleich hoch, und
	 * die Frage, ob oben, mittig oder an der Schriftlinie ausgerichtet
	 * wird, ist gegenstandslos – alle drei ergeben dasselbe Bild.
	 * „flex-start" bleibt trotzdem stehen: Bei mehrzeiligem Text wie
	 * der AGB-Zeile gehört das Kästchen auf die erste Zeile und nicht
	 * in die Mitte des Absatzes.
	 */
	line-height: 22px;
	color: var(--text, #1e0c14);
	cursor: pointer;
}

/* Ankreuzfelder sind sonst am Handy kaum zu treffen. */
.em-acc__check input {
	width: 22px;
	height: 22px;
	min-height: 22px;
	margin: 0;
	flex: 0 0 22px;
	accent-color: var(--accent, #8a6210);
}

.em-acc__check a { color: var(--accent, #8a6210); }

.em-acc__btn {
	display: block;
	width: 100%;
	min-height: 50px;
	margin-top: 22px;
	padding: 14px 20px;
	font-size: 16px;
	font-weight: 700;
	font-family: inherit;
	color: #fff;
	background: var(--accent, #8a6210);
	border: 0;
	border-radius: var(--radius, 10px);
	cursor: pointer;
}

.em-acc__btn:hover { filter: brightness(1.08); }

.em-acc__btn--ghost {
	color: var(--text, #1e0c14);
	background: transparent;
	border: 1px solid var(--line, rgba(138, 98, 16, 0.45));
}

.em-acc__btn--warn {
	background: transparent;
	color: var(--danger, #b3261e);
	border: 1px solid var(--danger, #b3261e);
}

.em-acc__link {
	margin-top: 14px;
	padding: 12px 0;
	font-size: 14px;
	font-family: inherit;
	color: var(--accent, #8a6210);
	background: none;
	border: 0;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.em-acc__msg {
	margin: 0 0 18px;
	padding: 13px 15px;
	font-size: 14.5px;
	line-height: 1.5;
	border-radius: var(--radius, 10px);
	background: var(--card, #efe2e5);
	color: var(--text, #1e0c14);
}

.em-acc__msg--fehler {
	background: rgba(255, 107, 90, 0.14);
	color: var(--danger, #ff6b5a);
}
[data-theme="light"] .em-acc__msg--fehler {
	background: rgba(192, 57, 43, 0.10);
}

.em-acc__msg--ok {
	background: var(--status-on-soft, rgba(78, 203, 113, 0.18));
	color: var(--status-on, #4ecb71);
}

.em-acc__box {
	margin: 0 0 22px;
	padding: 20px;
	background: var(--surface, #fff);
	border: 1px solid var(--line, rgba(138, 98, 16, 0.45));
	border-radius: var(--radius-l, 14px);
}

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

.em-acc__box p {
	margin: 0 0 12px;
	font-size: 14.5px;
	line-height: 1.55;
}

.em-acc__dl {
	margin: 0 0 18px;
	font-size: 14.5px;
}

.em-acc__dl dt {
	margin-top: 10px;
	font-size: 13px;
	color: var(--text-muted, #5c4650);
}

.em-acc__dl dd {
	margin: 2px 0 0;
	color: var(--text, #1e0c14);
}

.em-acc__row {
	display: flex;
	flex-direction: column;
	gap: 26px;
	padding-top: 18px;
	border-top: 1px solid var(--line, rgba(138, 98, 16, 0.25));
}

.em-acc__foot {
	margin: 18px 0 0;
	font-size: 14px;
	text-align: center;
	color: var(--text-muted, #5c4650);
}

.em-acc__foot a { color: var(--accent, #8a6210); }

/* Herz neben "Willkommen zurück" */
.em-acc__heart {
	color: var(--accent-2, #9e2e4c);
	font-size: 0.75em;
	vertical-align: middle;
}

/* Passwort vergessen – bewusst zurückhaltend, keine zweite Aktion */
.em-acc__foot--quiet {
	margin-top: 10px;
	font-size: 13px;
}

/* Anmelden und Registrieren nebeneinander statt gestapelt – auf einer
   breiten Seite wirkt eine einzelne schmale Spalte sonst verloren.

   Achtung: Im Markup steht "em-acc--split" (Modifikator), die Regeln
   hier standen auf "em-acc__split" (Element). Ein einziger Unterstrich
   Unterschied – das Nebeneinander hat deshalb nie gegriffen, nur die
   Trennlinie der rechten Spalte war zu sehen. */
.em-acc--split {
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.em-acc__col { min-width: 0; }

.em-acc__col--invite {
	padding-top: 28px;
	border-top: 1px solid var(--line, rgba(138, 98, 16, 0.25));
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.em-acc__invite-title {
	margin: 0 0 8px;
	font-family: var(--font-display, inherit);
	font-size: 21px;
	color: var(--heading, #8a2440);
}
.em-acc__invite-text {
	margin: 0 0 18px;
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--text-muted, #5c4650);
	max-width: 40ch;
	margin-left: auto;
	margin-right: auto;
}

/* Button unter dem Formular mittig statt links hängend, sobald er
   nicht mehr die volle Breite einnimmt. */
.em-acc__btn--centered { display: block; margin-left: auto; margin-right: auto; }

@media (min-width: 640px) {
	.em-acc { padding-top: 12px; }
	.em-acc__btn { width: auto; min-width: 220px; }
}

@media (min-width: 860px) {
	.em-acc--split {
		flex-direction: row;
		align-items: stretch;
		gap: 48px;
	}
	/* Die Anmeldespalte bekommt etwas mehr Platz als die Einladung –
	   dort stehen Felder, hier nur ein Absatz und ein Knopf. */
	.em-acc__col { flex: 1.15 1 0; }
	.em-acc__col--invite { flex: 1 1 0; }
	.em-acc__col--invite {
		padding-top: 0;
		padding-left: 40px;
		border-top: 0;
		border-left: 1px solid var(--line, rgba(138, 98, 16, 0.25));
	}
}

/* ------------------------------------------------------------------
   Dashboard (Mein Bereich)
   Aufbau: Seitenleiste als eigene Karte, rechts Kennzahlen + Tabelle.
   Farben kommen ausschließlich aus den Theme-Variablen, damit Hell-
   und Dunkelmodus ohne Sonderregeln funktionieren.
------------------------------------------------------------------ */

.em-dash {
	max-width: 1080px;
	margin: 0 auto;
	padding: 20px 0 64px;
	font-family: var(--font-body, inherit);
}

.em-dash__ico {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
}

.em-dash__verify { margin-bottom: 20px; }

.em-dash__body {
	display: flex;
	flex-direction: column;
	gap: 20px;
	align-items: flex-start;
}

/* ---------------------------------------------------------------
   Seitenleiste
--------------------------------------------------------------- */

.em-dash__aside {
	width: 100%;
	background: var(--panel, #fff);
	border: 1px solid var(--line, #e2d2d6);
	border-radius: var(--radius-l, 12px);
	overflow: hidden;
}

.em-dash__profil {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 18px 18px 16px;
	border-bottom: 1px solid var(--line-soft, #efe6e8);
}

.em-dash__avatar {
	flex: 0 0 auto;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--card, #efe2e5);
	display: flex;
	align-items: center;
	justify-content: center;
}

.em-dash__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.em-dash__avatar-fallback {
	font-family: var(--font-display, inherit);
	font-size: 21px;
	font-weight: var(--weight-display, 600);
	color: var(--heading, #8a2440);
	line-height: 1;
}

.em-dash__avatar--gross { width: 96px; height: 96px; }
.em-dash__avatar--gross .em-dash__avatar-fallback { font-size: 34px; }

.em-dash__wer { min-width: 0; }

.em-dash__name {
	margin: 0 0 4px;
	font-family: var(--font-display, inherit);
	font-size: 17px;
	font-weight: var(--weight-display, 600);
	color: var(--text, #1e0c14);
	line-height: 1.2;
	overflow-wrap: anywhere;
}

.em-dash__badge {
	display: inline-block;
	padding: 2px 9px;
	border-radius: 999px;
	font-size: 11.5px;
	letter-spacing: 0.02em;
	background: var(--card, #efe2e5);
	color: var(--text-muted, #5c4650);
}

.em-dash__nav { padding: 10px; }

.em-dash__nav-link {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 10px 12px;
	border-radius: var(--radius, 8px);
	font-size: 15px;
	color: var(--text, #1e0c14);
	cursor: pointer;
	list-style: none;
	transition: background 0.15s ease, color 0.15s ease;
}

.em-dash__nav-link::-webkit-details-marker { display: none; }

.em-dash__nav-text { flex: 1 1 auto; min-width: 0; }

.em-dash__nav-link:hover {
	background: var(--card, #efe2e5);
	color: var(--text, #1e0c14);
}

.em-dash__nav-link.is-active {
	background: var(--accent-2-soft, rgba(158, 46, 76, 0.10));
	color: var(--heading, #8a2440);
	font-weight: 600;
}

.em-dash__nav-link.is-active .em-dash__ico { color: var(--heading, #8a2440); }

.em-dash__nav-link--still { color: var(--text-muted, #5c4650); }

/* Abmelden ist kein gleichrangiger Menüpunkt – abgesetzt und leiser. */
.em-dash__nav-link--abmelden {
	margin-top: 8px;
	padding-top: 14px;
	border-top: 1px solid var(--line-soft, #efe6e8);
	border-radius: 0;
	font-size: 13.5px;
	color: var(--text-faint, #7c6a72);
}
.em-dash__nav-link--abmelden .em-dash__ico { width: 16px; height: 16px; }
.em-dash__nav-link--abmelden:hover {
	background: transparent;
	color: var(--danger, #c0392b);
}

.em-dash__chevron {
	display: inline-flex;
	transition: transform 0.18s ease;
	color: var(--text-faint, #7c6a72);
}

.em-dash__gruppe[open] > .em-dash__nav-link .em-dash__chevron { transform: rotate(180deg); }

.em-dash__zahl {
	flex: 0 0 auto;
	min-width: 20px;
	padding: 1px 7px;
	border-radius: 999px;
	background: var(--card, #efe2e5);
	color: var(--text-muted, #5c4650);
	font-size: 12px;
	text-align: center;
}

.em-dash__subnav {
	list-style: none;
	margin: 2px 0 6px;
	padding: 0 0 0 12px;
	border-left: 1px solid var(--line-soft, #efe6e8);
	margin-left: 21px;
}

.em-dash__sub-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 7px 12px;
	border-radius: var(--radius, 8px);
	font-size: 14px;
	color: var(--text-muted, #5c4650);
	transition: background 0.15s ease, color 0.15s ease;
}

.em-dash__sub-link:hover {
	background: var(--card, #efe2e5);
	color: var(--text, #1e0c14);
}

.em-dash__sub-link.is-active {
	color: var(--heading, #8a2440);
	font-weight: 600;
}

.em-dash__sub-zahl {
	font-size: 12px;
	color: var(--text-faint, #7c6a72);
	font-variant-numeric: tabular-nums;
}

.em-dash__sub-link.is-active .em-dash__sub-zahl { color: var(--heading, #8a2440); }

/* ---------------------------------------------------------------
   Inhaltsspalte
--------------------------------------------------------------- */

.em-dash__content {
	width: 100%;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* Kennzahlen */

.em-dash__kacheln {
	display: grid;
	/* Vier Kacheln: zwei nebeneinander am Handy, vier am Rechner. */
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.em-dash__kachel {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
	padding: 16px;
	background: var(--panel, #fff);
	border: 1px solid var(--line, #e2d2d6);
	border-radius: var(--radius-l, 12px);
	transition: border-color 0.15s ease, transform 0.15s ease;
}

.em-dash__kachel:hover {
	border-color: var(--accent, #8a6210);
	transform: translateY(-1px);
	color: inherit;
}

.em-dash__kachel.is-active { border-color: var(--accent, #8a6210); }

.em-dash__kachel-ico {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--card, #efe2e5);
	color: var(--text-muted, #5c4650);
}

.em-dash__kachel-ico .em-dash__ico { width: 20px; height: 20px; }

.em-dash__kachel--alle .em-dash__kachel-ico {
	background: var(--accent-2-soft, rgba(158, 46, 76, 0.10));
	color: var(--accent-2, #9e2e4c);
}

.em-dash__kachel--aktiv .em-dash__kachel-ico {
	background: var(--status-on-soft, rgba(30, 158, 74, 0.16));
	color: var(--status-on, #1e9e4a);
}

.em-dash__kachel--pruefung .em-dash__kachel-ico {
	background: rgba(217, 164, 65, 0.16);
	color: var(--accent, #8a6210);
}

.em-dash__kachel--inaktiv .em-dash__kachel-ico {
	background: rgba(192, 57, 43, 0.12);
	color: var(--danger, #c0392b);
}

.em-dash__kachel-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
	flex: 1 1 auto;
}

.em-dash__kachel-zahl {
	font-family: var(--font-display, inherit);
	font-size: 24px;
	font-weight: var(--weight-display, 600);
	line-height: 1.1;
	color: var(--text, #1e0c14);
	font-variant-numeric: tabular-nums;
}

.em-dash__kachel-label {
	font-size: 12.5px;
	color: var(--text-muted, #5c4650);
	line-height: 1.3;
	overflow-wrap: break-word;
	hyphens: auto;
}

/* Panel */

.em-dash__panel {
	background: var(--panel, #fff);
	border: 1px solid var(--line, #e2d2d6);
	border-radius: var(--radius-l, 12px);
	padding: 20px;
}

.em-dash__panel-kopf {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 16px;
}

.em-dash__h1 {
	margin: 0;
	font-family: var(--font-display, inherit);
	font-size: 21px;
	font-weight: var(--weight-display, 600);
	letter-spacing: -0.01em;
	color: var(--heading, #8a2440);
	line-height: 1.2;
}

/* Knöpfe */

.em-dash__btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 16px;
	border: 1px solid var(--line, #e2d2d6);
	border-radius: var(--radius, 8px);
	background: transparent;
	color: var(--text, #1e0c14);
	font-family: inherit;
	font-size: 14px;
	line-height: 1.2;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.em-dash__btn:hover { border-color: var(--accent, #8a6210); color: var(--accent, #8a6210); }

/* Füllung und Textfarbe kommen aus dem Theme, damit "Neue Anzeige"
   und "Inserat aufgeben" in der Kopfzeile immer gleich aussehen. */
.em-dash__btn--primary {
	background: var(--btn-fill, var(--accent, #8a6210));
	border-color: transparent;
	color: var(--btn-text, var(--on-accent, #fff));
	font-weight: 600;
}

.em-dash__btn--primary:hover {
	background: var(--btn-fill-hover, var(--accent-hover, #7e5a0e));
	border-color: transparent;
	color: var(--btn-text, var(--on-accent, #fff));
}

.em-dash__btn--still { font-size: 13.5px; padding: 7px 13px; }

/* Leerzustand */

.em-dash__leer {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	padding: 28px 4px;
	color: var(--text-muted, #5c4650);
}

.em-dash__leer p { margin: 0; max-width: 52ch; }

/* ---------------------------------------------------------------
   Tabelle
--------------------------------------------------------------- */

/* Kein overflow hier: Ein scrollbarer Rahmen kappt jedes absolut
   positionierte Element, das über die Tabelle hinausragt – das
   Verwalten-Menü klappte zwar auf, war aber unterhalb abgeschnitten.
   Die Spalten haben feste Anteile, unter 900 px werden daraus
   gestapelte Karten; gescrollt werden muss also nirgends. */
/*
 * Liste der Inserate als Raster.
 *
 * Kopfzeile und Datenzeilen benutzen dieselbe Spaltendefinition aus
 * einer Variablen – damit können sie nicht auseinanderlaufen. Ohne
 * Tabellenelemente, weil Safari "display: contents" auf Tabellenzeilen
 * fehlerhaft behandelt und die Zellen dort übereinanderlagen.
 */
.em-dash__liste {
	/* Der Titel darf zweizeilig werden, die Aktionsspalte braucht dafür
	   genug Platz für beide Knöpfe nebeneinander. */
	/* Vier Spalten: Die Anzeigennummer stand nur im Weg – sie ist in
	   der Adresse des Inserats ohnehin enthalten. */
	/*
	 * Statusspalte 21fr statt 17fr.
	 *
	 * „Wartet auf Freigabe" ist die längste Marke und brauchte rund
	 * 17 Pixel mehr, als 17fr hergaben. Weil die Marke nicht umbrechen
	 * durfte, lief der Text rechts aus seinem Hintergrund heraus –
	 * sichtbar am letzten Buchstaben. Drei Anteile kommen von der
	 * Titelspalte, einer von der Ablaufspalte; die Summe bleibt 100.
	 */
	--em-spalten: minmax(0, 37fr) minmax(0, 14fr) minmax(0, 21fr) minmax(0, 28fr);
	font-size: 14.5px;
}

.em-dash__kopfzeile,
.em-dash__zeile {
	display: grid;
	grid-template-columns: var(--em-spalten);
	align-items: center;
	gap: 10px;
}

.em-dash__kopfzeile {
	padding: 10px 12px;
	border-radius: var(--radius, 8px);
	background: var(--card, #efe2e5);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text-faint, #7c6a72);
	white-space: nowrap;
}

.em-dash__zeile {
	padding: 14px 12px;
	border-bottom: 1px solid var(--line-soft, #efe6e8);
}

.em-dash__zeile:last-child { border-bottom: 0; }

.em-dash__td-titel,
.em-dash__td-ablauf,
.em-dash__td-status,
.em-dash__td-aktion { min-width: 0; }

/*
 * Status mittig in seiner Spalte statt linksbündig.
 *
 * Linksbündig klebte die Marke am Ablaufdatum und ließ zum
 * Aktionsknopf eine große Lücke — die Zeile las sich dadurch, als
 * gehörte der Status zum Datum. Mittig sitzt er gleich weit von
 * beiden Nachbarn entfernt.
 */
.em-dash__td-status { display: flex; justify-content: center; }
.em-dash__th-status { text-align: center; }

.em-dash__th-rechts { text-align: right; }

.em-dash__titel-zelle {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
	width: 100%;
}

.em-dash__thumb {
	flex: 0 0 auto;
	width: 56px;
	height: 44px;
	border-radius: var(--radius, 8px);
	overflow: hidden;
	background: var(--card, #efe2e5);
	display: block;
}

.em-dash__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.em-dash__titel-text {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
}

.em-dash__kat {
	font-size: 11.5px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--text-faint, #7c6a72);
	line-height: 1.4;
}

.em-dash__titel {
	font-weight: 600;
	color: var(--text, #1e0c14);
	line-height: 1.35;
	overflow-wrap: break-word;
}

a.em-dash__titel:hover { color: var(--accent-2, #9e2e4c); }

.em-dash__grund {
	margin-top: 3px;
	font-size: 12.5px;
	color: var(--danger, #c0392b);
	line-height: 1.4;
}

/*
 * Die Löschfrist bewusst NICHT in Rot: Der Ablehnungsgrund steht direkt
 * darüber und ist die eigentliche Nachricht. Zwei rote Zeilen
 * untereinander heben sich gegenseitig auf — dann liest man beide als
 * eine einzige Warnung und keine davon genau.
 */
.em-dash__frist {
	display: block;
	margin-top: 3px;
	font-size: 12.5px;
	color: var(--accent, #8a6210);
	line-height: 1.4;
}

.em-dash__td-ablauf { white-space: nowrap; }

.em-dash__datum {
	display: block;
	font-variant-numeric: tabular-nums;
	color: var(--text, #1e0c14);
}

.em-dash__rest {
	display: block;
	font-size: 12.5px;
	color: var(--text-faint, #7c6a72);
}

.em-dash__leer-zelle { color: var(--text-faint, #7c6a72); }

/* Die Anzeigennummer braucht kaum Platz – sie ist nur für Rückfragen
   beim Support da. Die gewonnene Breite geht an die Titelspalte. */
.em-dash__th-id { text-align: center; }
.em-dash__td-id { text-align: center; }

.em-dash__id {
	font-family: var(--font-mono, ui-monospace, monospace);
	font-size: 12px;
	color: var(--text-faint, #7c6a72);
}

/* Status-Pillen */

.em-dash__pill {
	/*
	 * "width: fit-content" ist der entscheidende Teil.
	 *
	 * Die Marke steht in einer Rasterzelle beziehungsweise in einem
	 * Flex-Kasten mit "justify-content: center". Ein Kind mit
	 * automatischer Breite wird dort gedehnt — der Hintergrund lief
	 * dadurch über die ganze Spalte, während der Text mittig darin
	 * schwamm. Mit fit-content bleibt die Marke so breit wie ihr Wort.
	 */
	display: inline-block;
	width: fit-content;
	justify-self: center;
	align-self: center;
	padding: 4px 11px;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 600;
	/*
	 * Umbrechen statt ausbrechen.
	 *
	 * „fit-content" deckelt die Marke auf die verfügbare Zellenbreite –
	 * das ist gewollt. Zusammen mit „nowrap" war es aber ein Widerspruch:
	 * Der Kasten wurde beschnitten, der Text konnte nicht nachgeben und
	 * stand rechts im Freien. Eine der beiden Bedingungen muss weichen,
	 * und ein Umbruch ist ehrlicher als ein Text ohne Hintergrund.
	 * Solange die Spalte reicht, bleibt die Marke einzeilig wie bisher.
	 */
	white-space: normal;
	overflow-wrap: break-word;
	text-align: center;
	max-width: 100%;
	background: var(--card, #efe2e5);
	color: var(--text-muted, #5c4650);
}

.em-dash__pill--veroeffentlicht {
	background: var(--status-on-soft, rgba(30, 158, 74, 0.16));
	color: var(--status-on, #1e9e4a);
}

.em-dash__pill--wartet_freigabe {
	background: rgba(217, 164, 65, 0.18);
	color: var(--accent, #8a6210);
}

.em-dash__pill--abgelehnt,
.em-dash__pill--gesperrt {
	background: rgba(192, 57, 43, 0.12);
	color: var(--danger, #c0392b);
}

.em-dash__pill--abgelaufen {
	background: rgba(124, 106, 114, 0.16);
	color: var(--text-muted, #5c4650);
}

.em-dash__pill--pausiert {
	background: rgba(124, 106, 114, 0.16);
	color: var(--text-muted, #5c4650);
}

.em-dash__pill--entwurf {
	background: var(--accent-2-soft, rgba(158, 46, 76, 0.10));
	color: var(--accent-2, #9e2e4c);
}

.em-dash__leise {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	color: var(--text-faint, #7c6a72);
}

/* Inserate von Profilen, denen man folgt */

.em-dash__feed-text {
	display: flex;
	flex-direction: column;
	gap: 3px;
	flex: 1 1 auto;
	min-width: 0;
}
.em-dash__feed-meta {
	font-size: 12.5px;
	color: var(--text-muted, #5c4650);
}
.em-dash__feed-meta a { color: var(--text-muted, #5c4650); }
.em-dash__feed-meta a:hover { color: var(--accent, #8a6210); }
.em-dash__frisch {
	display: inline-block;
	margin-left: 7px;
	padding: 1px 7px;
	border-radius: 999px;
	background: var(--accent-2, #9e2e4c);
	color: #fff;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	vertical-align: 1px;
}
.em-dash__blaettern {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: 18px 0 4px;
	font-size: 13.5px;
	color: var(--text-muted, #5c4650);
}

/* Melden und Blockieren im Gespräch */

.em-still {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 9px;
	border: 0;
	border-radius: var(--radius, 8px);
	background: none;
	font: inherit;
	font-size: 12.5px;
	color: var(--text-faint, #7c6a72);
	cursor: pointer;
}
.em-still:hover { color: var(--danger, #c0392b); background: var(--danger-soft, rgba(192, 57, 43, .09)); }
.em-still svg { width: 15px; height: 15px; flex: 0 0 15px; }
.em-still.is-aktiv { color: var(--danger, #c0392b); }
.em-blockform { display: inline; margin: 0; }

.em-report--msg {
	margin: 0;
	border: 0;
	border-bottom: 1px solid var(--line-soft, #efe6e8);
	border-radius: 0;
	padding: 16px;
	background: var(--bg, #f7f2ee);
}

/*
 * Statt des Eingabefelds, wenn eine Sperre besteht. Der Verlauf
 * darüber bleibt lesbar — man soll nachlesen können, was vorgefallen
 * ist, auch wenn man nicht mehr antworten will.
 */
.em-msg__gesperrt {
	margin: 12px;
	padding: 18px;
	text-align: center;
	border: 1px dashed var(--line, #e2d2d6);
	border-radius: var(--radius-l, 12px);
	background: var(--bg, #f7f2ee);
	color: var(--text-muted, #5c4650);
	font-size: 13.5px;
}
.em-msg__gesperrt b { display: block; color: var(--text, #1e0c14); margin-bottom: 4px; }
.em-msg__gesperrt p { margin: 0 0 10px; }

/* ---------------------------------------------------------------
   Nachrichten
--------------------------------------------------------------- */

.em-dash__panel--msg { padding: 0; overflow: hidden; }

.em-msg {
	display: grid;
	grid-template-columns: 270px minmax(0, 1fr);
	height: 620px;
}

/*
 * min-height: 0 ist hier Pflicht, nicht Zierde.
 *
 * Flex- und Grid-Elemente haben von Haus aus min-height: auto und
 * schrumpfen deshalb NICHT unter die Größe ihres Inhalts. Ein hohes
 * Bild im Verlauf hat den Kasten dadurch von innen aufgeblasen und das
 * Eingabefeld nach unten aus dem sichtbaren Bereich geschoben — die
 * Nachricht war da, man kam nur nicht mehr an das Feld.
 */
.em-msg__liste {
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 0;
	border-right: 1px solid var(--line-soft, #efe6e8);
}
.em-msg__gespraeche { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

.em-msg__eintrag {
	display: grid;
	grid-template-columns: 42px minmax(0, 1fr);
	gap: 11px;
	padding: 12px 14px;
	border-bottom: 1px solid var(--line-soft, #efe6e8);
	border-left: 3px solid transparent;
	text-decoration: none;
	color: var(--text, #1e0c14);
}
.em-msg__eintrag:hover { background: var(--bg, #f7f2ee); color: var(--text, #1e0c14); }
.em-msg__eintrag.is-aktiv {
	background: var(--accent-2-soft, rgba(158, 46, 76, 0.1));
	border-left-color: var(--accent-2, #9e2e4c);
}

.em-msg__av {
	position: relative;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	overflow: visible;
	display: block;
	flex: 0 0 42px;
}
.em-msg__av img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.em-msg__av--text {
	display: grid;
	place-items: center;
	color: #fff;
	font-weight: 600;
	font-size: 16px;
}
/*
 * Das Bild im Gesprächskopf ist ein Verweis aufs Profil.
 *
 * Als <a> erbt es sonst Farbe und Unterstreichung der Textlinks – bei
 * der Kurzform ohne Bild (Buchstabe auf farbigem Grund) wäre der
 * Buchstabe dann unterstrichen. Der Fingerzeiger bleibt, damit
 * erkennbar ist, dass hier etwas passiert.
 */
.em-msg__av--link {
	text-decoration: none;
	color: inherit;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.em-msg__av--link:hover img { filter: brightness(0.92); }
.em-msg__av--link:focus-visible {
	outline: 2px solid var(--accent, #8a6210);
	outline-offset: 2px;
	border-radius: 50%;
}

.em-msg__punkt {
	position: absolute;
	right: -1px;
	bottom: -1px;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--status-on, #1e9e4a);
	border: 2px solid var(--surface, #fff);
}

.em-msg__wer { min-width: 0; display: block; }
/*
 * Name links, dann Uhrzeit, dann der Zähler.
 *
 * "align-items: center" statt "baseline": Die runde Marke hat keine
 * Schriftlinie, an der sie sich ausrichten könnte — auf baseline hing
 * sie zu tief. Der Name nimmt den Rest der Zeile und wird bei Bedarf
 * gekürzt, damit Uhrzeit und Zähler nie verdrängt werden.
 */
.em-msg__kopfzeile {
	display: flex;
	justify-content: flex-start;
	gap: 8px;
	align-items: center;
}
.em-msg__kopfzeile .em-msg__name { flex: 1 1 auto; min-width: 0; }
.em-msg__kopfzeile .em-msg__zahl { margin-left: 0; }
.em-msg__name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.em-msg__wann { flex: 0 0 auto; font-size: 11.5px; color: var(--text-faint, #7c6a72); }
.em-msg__vorschau {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: var(--text-muted, #5c4650);
}
.em-msg__vorschau-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.em-msg__zahl {
	flex: 0 0 auto;
	min-width: 19px;
	height: 19px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--accent-2, #9e2e4c);
	color: #fff;
	font-size: 11.5px;
	font-weight: 600;
	display: grid;
	place-items: center;
}

.em-msg__panel { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.em-msg__panel-kopf {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	border-bottom: 1px solid var(--line-soft, #efe6e8);
}
.em-msg__panel-kopf .em-msg__av { width: 36px; height: 36px; flex: 0 0 36px; font-size: 14px; }
.em-msg__panel-kopf .em-msg__wer b,
.em-msg__partner { display: block; font-weight: 600; }

/*
 * Melden und Blockieren ganz nach rechts. Ohne das "margin-left: auto"
 * standen sie direkt neben dem Namen, mitten in der Zeile — dort wirkten
 * sie wie ein Teil der Namensangabe.
 */
.em-msg__stillgruppe {
	display: flex;
	align-items: center;
	gap: 2px;
	margin-left: auto;
	flex: 0 0 auto;
	/*
	 * Oben ausgerichtet, nicht mittig: Neben dem Namen steht darunter
	 * noch der Status. Mittig zentriert saßen die Knöpfe zwischen den
	 * beiden Zeilen und gehörten optisch zu keiner.
	 *
	 * Die -7 px gleichen das Polster der Knöpfe aus. "flex-start"
	 * richtet die Kasten-Oberkanten aneinander aus; der Knopftext sitzt
	 * aber 7 px unter seiner Oberkante und stünde damit unter dem
	 * Namen statt auf einer Linie mit ihm.
	 */
	align-self: flex-start;
	margin-top: -7px;
}
.em-msg__partner { color: var(--text, #1e0c14); text-decoration: none; }
.em-msg__partner:hover { color: var(--accent, #8a6210); text-decoration: underline; text-underline-offset: 3px; }
.em-msg__panel-kopf .em-msg__wer span { font-size: 12.5px; color: var(--text-muted, #5c4650); }

.em-msg__verlauf { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 18px 16px; }
.em-msg__tag { text-align: center; margin: 16px 0 14px; font-size: 12px; color: var(--text-faint, #7c6a72); }
.em-msg__tag span { background: var(--card, #efe2e5); border-radius: 999px; padding: 3px 12px; }

/*
 * Hinweis auf das Inserat — bewusst KEINE Sprechblase.
 *
 * Er benutzte dieselben Farben wie die eigene Nachricht und sah
 * dadurch aus wie etwas, das man selbst geschrieben hat. Jetzt steht
 * er mittig, neutral und gestrichelt: erkennbar ein Vermerk der Seite
 * und keine Wortmeldung, ähnlich wie die Datumstrenner darüber.
 */
.em-msg__bezug {
	display: block;
	width: fit-content;
	max-width: 90%;
	margin: 4px auto 12px;
	padding: 6px 13px;
	border-radius: 999px;
	background: transparent;
	border: 1px dashed var(--line, #e2d2d6);
	font-size: 12.5px;
	text-align: center;
	color: var(--text-faint, #7c6a72);
}
.em-msg__bezug a {
	color: var(--text-muted, #5c4650);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.em-msg__bezug a:hover { color: var(--accent, #8a6210); }

/* Vor dem Absenden, über dem Eingabefeld: dort ist es kein Rückblick,
   sondern eine Ansage — deshalb etwas bestimmter. */
.em-msg__bezug--neu {
	margin: 0 12px 8px;
	width: auto;
	max-width: none;
	border-style: solid;
	border-color: var(--gold-soft-line, rgba(138, 98, 16, 0.28));
	background: var(--gold-soft, rgba(196, 148, 42, 0.18));
	color: var(--text-muted, #5c4650);
	text-align: left;
}

.em-msg__blase { max-width: 74%; margin-bottom: 10px; }
.em-msg__blase--ich { margin-left: auto; }
.em-msg__inhalt {
	padding: 10px 13px;
	border-radius: 14px;
	background: var(--card, #efe2e5);
	overflow-wrap: break-word;
}
.em-msg__blase--ich .em-msg__inhalt {
	background: var(--gold-soft, rgba(196, 148, 42, 0.18));
	border: 1px solid var(--gold-soft-line, rgba(138, 98, 16, 0.28));
}
.em-msg__zeit {
	display: block;
	margin-top: 4px;
	padding: 0 4px;
	font-size: 11.5px;
	color: var(--text-faint, #7c6a72);
}
.em-msg__blase--ich .em-msg__zeit { text-align: right; }

.em-msg__eingabe { border-top: 1px solid var(--line-soft, #efe6e8); padding: 10px 12px; margin: 0; }
.em-msg__werkzeuge { display: flex; gap: 4px; margin-bottom: 8px; }
.em-msg__wz {
	width: 32px;
	height: 32px;
	display: grid;
	place-items: center;
	background: none;
	border: 1px solid transparent;
	border-radius: 6px;
	color: var(--text-muted, #5c4650);
	cursor: pointer;
	font-family: Georgia, serif;
	font-size: 15px;
}
.em-msg__wz:hover { background: var(--card, #efe2e5); color: var(--text, #1e0c14); }
.em-msg__wz--fett { font-weight: 700; }
.em-msg__wz--kursiv { font-style: italic; }

.em-msg__zeile { display: flex; gap: 8px; align-items: flex-end; }
.em-msg__feld {
	flex: 1 1 auto;
	min-height: 44px;
	max-height: 140px;
	overflow-y: auto;
	padding: 11px 13px;
	background: var(--bg, #f7f2ee);
	border: 1px solid var(--line, #e2d2d6);
	border-radius: var(--radius, 8px);
	color: var(--text, #1e0c14);
}
.em-msg__feld:focus-visible {
	outline: none;
	border-color: var(--accent, #8a6210);
	box-shadow: 0 0 0 1px var(--accent, #8a6210);
}
.em-msg__feld:empty::before { content: attr(data-platzhalter); color: var(--text-faint, #7c6a72); }
.em-msg__senden {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: var(--radius, 8px);
	background: var(--btn-fill, rgba(30, 158, 74, 0.16));
	color: var(--btn-text, #14703a);
	cursor: pointer;
}
.em-msg__senden svg { width: 19px; height: 19px; }
.em-msg__hinweis { margin: 8px 2px 0; font-size: 12px; color: var(--text-faint, #7c6a72); }

.em-msg__wz input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.em-msg__wz svg { width: 17px; height: 17px; }
/* Vorschau der gewählten Datei, vor dem Absenden. */
.em-msg__vorab {
	display: none;
	align-items: center;
	gap: 10px;
	margin-bottom: 8px;
	padding: 6px 10px 6px 6px;
	border: 1px solid var(--gold-soft-line, rgba(138, 98, 16, 0.28));
	background: var(--gold-soft, rgba(196, 148, 42, 0.18));
	border-radius: 10px;
	max-width: 100%;
}
.em-msg__vorab.is-da { display: inline-flex; }
.em-msg__vorab img {
	width: 46px;
	height: 46px;
	object-fit: cover;
	border-radius: 7px;
	display: block;
	flex: 0 0 46px;
}
.em-msg__vorab-name {
	font-size: 12.5px;
	color: var(--text-muted, #5c4650);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 190px;
}
.em-msg__vorab-weg {
	width: 24px;
	height: 24px;
	flex: 0 0 24px;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.12);
	color: var(--text, #1e0c14);
	cursor: pointer;
	font-size: 15px;
	line-height: 1;
}
.em-msg__vorab-weg:hover { background: var(--danger, #c0392b); color: #fff; }

/*
 * Höhe begrenzen. Ohne das sprengt ein hochformatiges Foto die Blase
 * und schiebt den Verlauf über den ganzen Bildschirm — das Bild wurde
 * so hoch dargestellt, wie es war.
 */
.em-msg__bild { display: block; margin: -2px -3px 0; }
.em-msg__bild img {
	max-width: 100%;
	max-height: 320px;
	width: auto;
	height: auto;
	border-radius: 9px;
	display: block;
}
.em-msg__text { margin-top: 8px; }
.em-msg__inhalt > .em-msg__text:first-child { margin-top: 0; }

.em-msg__leer {
	flex: 1 1 auto;
	display: grid;
	place-items: center;
	padding: 40px;
	text-align: center;
	color: var(--text-muted, #5c4650);
}

.em-dash__zahl--neu {
	background: var(--accent-2, #9e2e4c);
	color: #fff;
	border-radius: 999px;
	padding: 1px 7px;
	font-size: 11.5px;
	font-weight: 600;
}

@media (max-width: 720px) {
	.em-msg { grid-template-columns: minmax(0, 1fr); height: auto; }
	.em-msg__liste { border-right: 0; border-bottom: 1px solid var(--line-soft, #efe6e8); }
	.em-msg__gespraeche { max-height: 240px; }
	.em-msg__verlauf { height: 360px; }
	.em-msg__blase { max-width: 88%; }
}

/* Eigene Veranstaltungen im Konto */

.em-dash__events { list-style: none; margin: 0; padding: 0; }

.em-dash__event {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 0;
	border-bottom: 1px solid var(--line-soft, #efe6e8);
	flex-wrap: wrap;
}
.em-dash__event:last-child { border-bottom: 0; }

.em-dash__event-datum {
	flex: 0 0 48px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 7px 0;
	border-radius: 8px;
	background: var(--card, #efe2e5);
	border: 1px solid var(--line, #e2d2d6);
}
.em-dash__event-datum b {
	font-family: var(--font-mono, monospace);
	font-size: 17px;
	color: var(--accent, #8a6210);
	line-height: 1.1;
}
.em-dash__event-datum span {
	font-size: 10px;
	letter-spacing: 0.06em;
	color: var(--text-muted, #5c4650);
}

.em-dash__event-text { flex: 1 1 220px; min-width: 0; }
.em-dash__event-titel { display: block; font-weight: 500; }
.em-dash__event-meta {
	display: block;
	font-size: 12.5px;
	color: var(--text-muted, #5c4650);
	margin-top: 2px;
}
.em-dash__event-grund {
	display: block;
	width: 100%;
	margin-top: 6px;
	font-size: 12.5px;
	color: var(--danger, #c0392b);
}

/* Verwalten-Menü */

/*
 * Im Menü stehen jetzt Links und Formular-Knöpfe nebeneinander. Ohne
 * diese Angleichung ragt der Knopf mit Browser-Rahmen und grauer
 * Füllung heraus.
 */
.em-dash__drop-menu form { margin: 0; }
.em-dash__drop-menu button.em-dash__drop-item {
	width: 100%;
	border: 0;
	background: none;
	font: inherit;
	text-align: left;
	cursor: pointer;
}
.em-dash__drop-item--stop { color: var(--danger, #c0392b); }

.em-dash__td-aktion { text-align: right; }

/*
 * Umbruch erlaubt. Ohne ihn schoben sich die Knöpfe bei knapper Spalte
 * nach links über die Nachbarspalte – "justify-content: flex-end"
 * lässt Überlänge nach links austreten, und die ID lag dann unter dem
 * Knopf.
 */
.em-dash__aktionen {
	display: flex;
	flex-wrap: nowrap;
	/* Oben ausgerichtet, damit beide Knöpfe auf einer Linie stehen und
	   die Restzeit darunter hängt, statt "Boosten" nach oben zu
	   schieben. */
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	min-width: 0;
}

/*
 * Beide Knöpfe exakt auf einer Höhe.
 *
 * Die Knöpfe sind Inline-Elemente und saßen dadurch auf einer
 * Textgrundlinie – die Zeilenhöhe des Umschlags (1,6) schob sie
 * unterschiedlich weit nach unten, je nachdem ob ein Formular oder das
 * Klappelement drumherum stand. Sind die Umschläge selbst Flex-Boxen,
 * gibt es keine Grundlinie mehr, an der sich etwas ausrichten könnte.
 */
.em-dash__aktionen > * { align-self: center; }

.em-dash__aktionen form,
.em-dash__aktionen .em-dash__drop {
	display: flex;
	line-height: 1;
}

/* "Boosten" und "Verwalten" passen mit kurzen Beschriftungen
   nebeneinander; der Umbruch bleibt als Notnagel für sehr schmale
   Fenster bestehen. */
.em-dash__push span, .em-dash__drop-knopf span { white-space: nowrap; }

.em-dash__aktionen form { margin: 0; }

/* Pushup steht bewusst offen in der Zeile statt im Klappmenü – es ist
   die einzige Aktion, die Mitglieder täglich benutzen. */
.em-dash__push {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 7px 10px;
	border: 1px solid var(--line, #e2d2d6);
	border-radius: var(--radius, 8px);
	background: transparent;
	color: var(--text, #1e0c14);
	font-family: inherit;
	font-size: 13.5px;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.em-dash__push .em-dash__ico { width: 15px; height: 15px; }
.em-dash__push, .em-dash__drop-knopf { font-size: 13px; }

button.em-dash__push:hover {
	border-color: var(--accent, #8a6210);
	color: var(--accent, #8a6210);
}

.em-dash__push--aus {
	color: var(--text-faint, #7c6a72);
	cursor: default;
}

/* Knopf und Restzeit als ein Block, damit die Zeile nicht höher wird
   als nötig. */
/*
 * Die Restzeit hängt unter dem Knopf, zählt aber nicht zur Höhe.
 *
 * Andernfalls ist der Boost-Block höher als "Verwalten", und die ganze
 * Gruppe sitzt beim mittigen Ausrichten anders als die Statusmarke
 * links daneben.
 */
.em-dash__boost {
	position: relative;
	display: flex;
	line-height: 1;
}

.em-dash__boost-rest {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	margin-top: 4px;
	text-align: center;
	font-size: 11px;
	line-height: 1.2;
	color: var(--text-faint, #7c6a72);
	white-space: nowrap;
}

/*
 * Platz für die Restzeit – oben und unten gleich viel.
 *
 * Nur unten mehr Polster war falsch: Der Inhalt wird innerhalb des
 * Polsters mittig ausgerichtet, ein einseitiger Zuschlag schiebt also
 * alles nach oben, auch die Statusmarke.
 */
.em-dash__zeile:has(.em-dash__boost-rest) {
	padding-top: 22px;
	padding-bottom: 22px;
}

.em-dash__drop {
	position: relative;
	display: inline-block;
	text-align: left;
}

.em-dash__drop-knopf {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 7px 11px;
	border: 1px solid var(--line, #e2d2d6);
	border-radius: var(--radius, 8px);
	font-size: 13.5px;
	color: var(--text, #1e0c14);
	cursor: pointer;
	list-style: none;
	white-space: nowrap;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.em-dash__drop-knopf::-webkit-details-marker { display: none; }
.em-dash__drop-knopf:hover { border-color: var(--accent, #8a6210); color: var(--accent, #8a6210); }
.em-dash__drop[open] > .em-dash__drop-knopf .em-dash__chevron { transform: rotate(180deg); }

.em-dash__drop-menu {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	z-index: 30;
	min-width: 232px;
	padding: 6px;
	background: var(--panel, #fff);
	border: 1px solid var(--line, #e2d2d6);
	border-radius: var(--radius, 8px);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
}

.em-dash__drop-menu form { margin: 0; }

.em-dash__drop-item {
	display: flex;
	align-items: center;
	gap: 9px;
	width: 100%;
	padding: 9px 10px;
	border: 0;
	border-radius: var(--radius, 8px);
	background: transparent;
	color: var(--text, #1e0c14);
	font-family: inherit;
	font-size: 14px;
	line-height: 1.3;
	text-align: left;
	cursor: pointer;
	transition: background 0.15s ease;
}

a.em-dash__drop-item:hover,
button.em-dash__drop-item:hover {
	background: var(--card, #efe2e5);
	color: var(--text, #1e0c14);
}

.em-dash__drop-item--aus {
	color: var(--text-faint, #7c6a72);
	cursor: default;
}

.em-dash__drop-item--aus:hover { background: transparent; }

/* ---------------------------------------------------------------
   Favoriten
--------------------------------------------------------------- */

.em-dash__fav { list-style: none; margin: 0; padding: 0; }

.em-dash__fav-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid var(--line-soft, #efe6e8);
}

.em-dash__fav-row:last-child { border-bottom: 0; }
.em-dash__fav-row .em-dash__titel { flex: 1 1 auto; min-width: 0; }

/* ---------------------------------------------------------------
   Profil
--------------------------------------------------------------- */

.em-dash__avatar-edit {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-bottom: 22px;
}

/* ---------------------------------------------------------------
   Umbrüche
--------------------------------------------------------------- */

/* Schmale Schirme: Tabelle wird zu gestapelten Karten. */
@media (max-width: 1279px) {
	/* Eine Karte je Inserat, Beschriftung vor dem Wert. */
	.em-dash__kopfzeile { display: none; }

	.em-dash__zeile {
		display: block;
		padding: 14px;
		margin-bottom: 12px;
		border: 1px solid var(--line, #e2d2d6);
		border-radius: var(--radius-l, 12px);
	}

	.em-dash__zeile:last-child { margin-bottom: 0; border-bottom: 1px solid var(--line, #e2d2d6); }

	.em-dash__td-titel { margin-bottom: 12px; }

	.em-dash__td-ablauf,
	.em-dash__td-status {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 7px 0;
		border-top: 1px solid var(--line-soft, #efe6e8);
		text-align: right;
	}

	.em-dash__td-ablauf::before,
	.em-dash__td-status::before {
		content: attr(data-label);
		font-size: 11.5px;
		letter-spacing: 0.05em;
		text-transform: uppercase;
		color: var(--text-faint, #7c6a72);
	}

	.em-dash__datum, .em-dash__rest { display: inline; }
	.em-dash__rest { margin-left: 6px; }

	.em-dash__td-aktion { padding-top: 12px; }
	.em-dash__aktionen { justify-content: stretch; }
	.em-dash__aktionen form { flex: 1 1 0; }
	.em-dash__push { width: 100%; justify-content: center; }
	.em-dash__drop { display: block; flex: 1 1 0; }
	.em-dash__drop-knopf { width: 100%; justify-content: center; }
	.em-dash__drop-menu { right: 0; left: auto; min-width: 200px; }
}

@media (min-width: 560px) {
	.em-dash__kacheln { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/*
 * Zwei getrennte Schwellen, bewusst.
 *
 * Die Seitenleiste rückt schon ab 960 px neben den Inhalt – dafür
 * reicht der Platz längst. Die Inseratsliste bleibt bis 1280 px eine
 * Kartenansicht, weil neben der Seitenleiste sonst nur rund 200 px für
 * die beiden Knöpfe übrig bleiben und sie umbrechen.
 */
@media (min-width: 960px) {
	.em-dash__body { flex-direction: row; }

	.em-dash__aside {
		flex: 0 0 244px;
		width: 244px;
		position: sticky;
		top: 20px;
	}

	.em-dash__content { flex: 1 1 auto; }
	.em-dash__panel { padding: 24px; }
}

/* ------------------------------------------------------------------
   Profilseite
------------------------------------------------------------------ */

/* Kopf der Profilseite: eine Karte wie alle anderen, kein Farbband.
   Der erste Entwurf hatte einen Verlaufsstreifen mit überlappendem
   Bild und drei großen Zahlenblöcken – das brachte ein zweites,
   lauteres Gestaltungsprinzip auf eine Seite, die sonst aus ruhigen
   weißen Karten besteht. Die Zahlen stehen jetzt als schmale
   Faktenzeile darunter. */
.em-dash__kopf { margin-bottom: 20px; }

.em-dash__kopf-zeile {
	display: flex;
	align-items: center;
	gap: 16px;
}

.em-dash__kopf-avatar {
	position: relative;
	flex: 0 0 auto;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--card, #efe2e5);
	display: flex;
	align-items: center;
	justify-content: center;
}

.em-dash__kopf-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.em-dash__kopf-avatar .em-dash__avatar-fallback { font-size: 24px; }

.em-dash__avatar-edit-hint {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(20, 6, 12, 0.55);
	color: #fff;
	opacity: 0;
	transition: opacity 0.16s ease;
}
.em-dash__avatar--link { position: relative; }
.em-dash__avatar--link:hover .em-dash__avatar-edit-hint,
.em-dash__kopf-avatar:hover .em-dash__avatar-edit-hint,
.em-dash__avatar--link:focus-visible .em-dash__avatar-edit-hint,
.em-dash__kopf-avatar:focus-visible .em-dash__avatar-edit-hint { opacity: 1; }

.em-dash__kopf-text { flex: 1 1 auto; min-width: 0; }

.em-dash__kopf-name {
	margin: 0 0 5px;
	font-family: var(--font-display, inherit);
	font-weight: var(--weight-display, 600);
	font-size: 21px;
	line-height: 1.2;
	color: var(--heading, #8a2440);
	overflow-wrap: break-word;
}

.em-dash__kopf-link { flex: 0 0 auto; }

.em-dash__marken {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
}

.em-dash__status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: var(--text-muted, #5c4650);
}

.em-dash__punkt {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--text-faint, #7c6a72);
}
.em-dash__status.is-on .em-dash__punkt { background: var(--status-on, #1e9e4a); }
.em-dash__status.is-on { color: var(--status-on, #1e9e4a); }

/* Fakten als schmale Zeile statt als drei große Blöcke. */
.em-dash__kopf-fakten {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 22px;
	margin: 16px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--line-soft, #efe6e8);
	font-size: 13.5px;
	color: var(--text-muted, #5c4650);
}

.em-dash__kopf-fakten strong {
	font-weight: 600;
	color: var(--text, #1e0c14);
	font-variant-numeric: tabular-nums;
}

.em-dash__panel-lead { margin: -4px 0 18px; max-width: 68ch; }

.em-dash__felder-zeile {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	align-items: start;
	gap: 18px 20px;
	margin-bottom: 18px;
}
.em-dash__felder-zeile:last-child { margin-bottom: 0; }

.em-dash__profilform {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* Profilbild links schmal, Text rechts breit. */
.em-dash__profil-raster {
	display: grid;
	grid-template-columns: 1fr;
	gap: 22px;
	align-items: start;
}

.em-dash__profil-bild .em-dash__avatar--gross { margin-bottom: 12px; }
.em-dash__profil-bild input[type="file"] { max-width: 100%; font-size: 13.5px; }
.em-dash__profil-text { min-width: 0; }
.em-dash__profil-text textarea { resize: vertical; }

/* Sichtbarkeitsschalter */
.em-dash__schalter {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	cursor: pointer;
}

.em-dash__schalter-text { min-width: 0; }

.em-dash__schalter-titel {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	color: var(--text, #1e0c14);
}

.em-dash__punkt--gross {
	width: 10px;
	height: 10px;
	background: var(--status-on, #1e9e4a);
}

.em-dash__schalter-hinweis {
	display: block;
	margin-top: 4px;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--text-muted, #5c4650);
	max-width: 62ch;
}

/* Der Nebensatz für den Ausnahmefall – bewusst leiser als der Rest,
   damit er erklärt, ohne die eigentliche Aussage zu überlagern. */
.em-dash__schalter-fein {
	display: block;
	margin-top: 6px;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--text-faint, #7c6a72);
	max-width: 62ch;
}

/* Kippschalter statt Häkchen: Ein An/Aus-Zustand liest sich damit auf
   einen Blick, ohne die Beschriftung lesen zu müssen. */
.em-dash__kippe {
	position: relative;
	flex: 0 0 auto;
	display: inline-block;
	width: 48px;
	height: 28px;
}

.em-dash__kippe input {
	position: absolute;
	opacity: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	cursor: pointer;
}

.em-dash__kippe-bahn {
	position: absolute;
	inset: 0;
	border-radius: 999px;
	background: var(--card, #efe2e5);
	border: 1px solid var(--line, #e2d2d6);
	transition: background 0.18s ease, border-color 0.18s ease;
}

.em-dash__kippe-bahn::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--panel, #fff);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
	transition: transform 0.18s ease;
}

.em-dash__kippe input:checked + .em-dash__kippe-bahn {
	background: var(--status-on, #1e9e4a);
	border-color: var(--status-on, #1e9e4a);
}

.em-dash__kippe input:checked + .em-dash__kippe-bahn::after { transform: translateX(20px); }

.em-dash__kippe input:focus-visible + .em-dash__kippe-bahn {
	box-shadow: 0 0 0 3px rgba(30, 158, 74, 0.28);
}

.em-dash__actions-fest { display: flex; justify-content: flex-end; }

.em-dash__panel--warn { border-color: rgba(192, 57, 43, 0.35); }
.em-dash__panel--warn .em-dash__h1 { color: var(--danger, #c0392b); }

@media (min-width: 700px) {
	.em-dash__profil-raster { grid-template-columns: 200px 1fr; gap: 28px; }
}

@media (max-width: 559px) {
	.em-dash__kopf-zeile { flex-wrap: wrap; }
	.em-dash__schalter { flex-direction: column; }
	.em-dash__kopf-link { width: 100%; justify-content: center; }
	.em-dash__actions-fest { justify-content: stretch; }
	.em-dash__actions-fest .em-dash__btn { width: 100%; justify-content: center; }
}

/* Bestätigungsblock auf der Registrierungsseite */
.em-acc__verify { margin-top: 4px; }
.em-acc__verify-lead { margin: 0 0 14px; color: var(--text-muted, #5c4650); }
.em-acc__verify-hint {
	margin: 14px 0 4px;
	font-size: 13.5px;
	color: var(--text-faint, #7c6a72);
	text-align: center;
}

/* ------------------------------------------------------------------
   Kontakte im Dashboard
------------------------------------------------------------------ */

/* Textreiter mit Unterstrich statt zwei großer Knöpfe: Das sind zwei
   Ansichten derselben Sache, keine zwei Handlungen. */
.em-dash__tabs {
	display: flex;
	gap: 26px;
	margin-bottom: 4px;
	border-bottom: 1px solid var(--line-soft, #efe6e8);
}

.em-dash__tab {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 0 0 12px;
	font-size: 15px;
	color: var(--text-muted, #5c4650);
	transition: color 0.15s ease;
}

.em-dash__tab span {
	font-size: 12.5px;
	padding: 1px 8px;
	border-radius: 999px;
	background: var(--card, #efe2e5);
	color: var(--text-faint, #7c6a72);
	font-variant-numeric: tabular-nums;
}

.em-dash__tab:hover { color: var(--text, #1e0c14); }

.em-dash__tab.is-active {
	color: var(--heading, #8a2440);
	font-weight: 600;
}

.em-dash__tab.is-active::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	background: var(--accent-2, #9e2e4c);
	border-radius: 2px;
}

.em-dash__tab.is-active span {
	background: var(--accent-2-soft, rgba(158, 46, 76, 0.10));
	color: var(--heading, #8a2440);
}

/* Leerzustand: knapp gehalten, damit eine leere Liste nicht mehr Platz
   einnimmt als eine gefüllte. */
.em-dash__nichts {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 32px 20px 28px;
}

.em-dash__nichts-ico {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--card, #efe2e5);
	color: var(--accent-2, #9e2e4c);
	margin-bottom: 12px;
}

.em-dash__nichts-ico .em-dash__ico { width: 21px; height: 21px; }

.em-dash__nichts-titel {
	margin: 0 0 4px;
	font-weight: 600;
	font-size: 15.5px;
	color: var(--text, #1e0c14);
}

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

.em-dash__nichts-text:last-child { margin-bottom: 0; }

.em-dash__leute { list-style: none; margin: 0; padding: 0; }

.em-dash__leute-zeile {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid var(--line-soft, #efe6e8);
}

.em-dash__leute-zeile:last-child { border-bottom: 0; }

.em-dash__leute-text {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

/* Kontodaten und Löschen nebeneinander – beides sind kurze Karten,
   untereinander erzeugten sie unnötig viel Leerlauf. */
.em-dash__konto-raster {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	margin-top: 20px;
	align-items: start;
}

@media (min-width: 860px) {
	.em-dash__konto-raster { grid-template-columns: 1fr 1fr; }
}

/* Speichern unter jedem Bereich. Alle Knöpfe schicken dasselbe
   Formular ab – es wird also immer alles gespeichert, egal welchen man
   drückt. Wichtig, damit niemand Änderungen in einem anderen Abschnitt
   verliert, weil er den falschen Knopf vermutet. */
.em-dash__panel-speichern {
	display: flex;
	justify-content: flex-end;
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid var(--line-soft, #efe6e8);
}

@media (max-width: 559px) {
	.em-dash__panel-speichern .em-dash__btn { width: 100%; justify-content: center; }
}

/* Konto löschen steht unter dem zweispaltigen Block, nicht darin. */
.em-dash__panel--abstand { margin-top: 20px; }

/* ------------------------------------------------------------------
   Kontodaten und Passwort
------------------------------------------------------------------ */

/* Beide Karten gleich hoch – unterschiedliche Höhen wirken wie ein
   Versehen, nicht wie Gestaltung. */
.em-dash__konto-raster { align-items: stretch; }
.em-dash__konto-raster > .em-dash__panel { display: flex; flex-direction: column; }

/* Kontodaten als Zeilen mit Trennlinien: liest sich wie eine
   Übersicht statt wie ein leeres Formular. */
.em-dash__zeilen { margin: 0; }

/* Bewusst nicht "em-dash__zeile": Diesen Namen trägt schon jede
   Tabellenzeile der Inseratsliste. Die Regeln hier haben dort
   "display: flex" erzwungen – dadurch richteten sich Kopf- und
   Datenzeile nach unterschiedlichen Breiten aus und die
   Beschriftungen standen nicht mehr über ihren Werten. */
.em-dash__datenzeile {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	padding: 11px 0;
	border-bottom: 1px solid var(--line-soft, #efe6e8);
}

.em-dash__datenzeile:first-child { padding-top: 0; }
.em-dash__datenzeile:last-child { border-bottom: 0; }

.em-dash__datenzeile dt { font-size: 13.5px; color: var(--text-faint, #7c6a72); }

.em-dash__datenzeile dd {
	margin: 0;
	font-size: 14.5px;
	font-weight: 600;
	text-align: right;
	overflow-wrap: anywhere;
}

.em-dash__wert--ok { color: var(--status-on, #1e9e4a); }

.em-dash__karten-fuss {
	margin: 16px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--line-soft, #efe6e8);
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--text-faint, #7c6a72);
}

/* Passwortformular */
.em-dash__pwform { display: flex; flex-direction: column; flex: 1 1 auto; }

.em-dash__feld { margin-bottom: 14px; }

.em-dash__feld-label {
	display: block;
	margin: 0 0 5px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--text, #1e0c14);
}

.em-dash__eingabe { position: relative; }

.em-dash__eingabe input {
	width: 100%;
	padding: 10px 42px 10px 13px;
	font-family: inherit;
	font-size: 15px;
	color: var(--text, #1e0c14);
	background: var(--panel, #fff);
	border: 1px solid var(--line, #e2d2d6);
	border-radius: var(--radius, 8px);
}

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

/* Das Auge sitzt im Feld statt daneben – außerhalb überlagerte es
   den Rahmen des Eingabefeldes. */
.em-dash__eingabe .em-acc__auge,
.em-dash__eingabe button {
	position: absolute;
	top: 50%;
	right: 6px;
	transform: translateY(-50%);
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: var(--text-faint, #7c6a72);
	cursor: pointer;
}

.em-dash__eingabe button svg { width: 18px; height: 18px; }
.em-dash__eingabe button:hover { color: var(--accent, #8a6210); background: var(--card, #efe2e5); }

.em-dash__feld-hinweis {
	margin: 5px 0 0;
	font-size: 12.5px;
	color: var(--text-faint, #7c6a72);
}

/* Drei Striche, die sich beim Tippen füllen. */
.em-dash__staerke { display: flex; gap: 4px; margin-top: 7px; }

.em-dash__staerke i {
	height: 3px;
	flex: 1 1 0;
	border-radius: 2px;
	background: var(--line, #e2d2d6);
	transition: background 0.18s ease;
}

.em-dash__staerke.s1 i:nth-child(1) { background: var(--danger, #c0392b); }
.em-dash__staerke.s2 i:nth-child(-n+2) { background: var(--accent, #8a6210); }
.em-dash__staerke.s3 i { background: var(--status-on, #1e9e4a); }

.em-dash__pwform .em-dash__panel-speichern { margin-top: auto; }

/* Unterabschnitte innerhalb einer Karte – Kontaktdaten und
   Sichtbarkeit gehören zum öffentlichen Profil und stehen deshalb
   nicht mehr in eigenen Karten. */
.em-dash__abschnitt {
	margin-top: 22px;
	padding-top: 20px;
	border-top: 1px solid var(--line-soft, #efe6e8);
}

.em-dash__abschnitt-titel {
	margin: 0 0 4px;
	font-size: 15px;
	font-weight: 600;
	color: var(--text, #1e0c14);
}

.em-dash__abschnitt-lead {
	margin: 0 0 16px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--text-faint, #7c6a72);
	max-width: 68ch;
}

.em-dash__schalter-zeile {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	margin-top: 20px;
	padding-top: 18px;
	border-top: 1px solid var(--line-soft, #efe6e8);
	cursor: pointer;
}

@media (max-width: 559px) {
	.em-dash__schalter-zeile { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* Titelbild im Profil bearbeiten */
.em-dash__cover { display: grid; gap: 12px; }

.em-dash__cover-vorschau {
	aspect-ratio: 5 / 1;
	min-height: 96px;
	border-radius: var(--radius, 8px);
	border: 1px solid var(--line, #e2d2d6);
	background: linear-gradient(135deg, #4a1224, #8a2440 55%, #b07a1e);
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, 0.85);
	font-size: 13px;
}

.em-dash__cover-steuerung { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.em-dash__cover-weg { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; }

/* Verschiebbare Bildvorschau */
.em-dash__zieh {
	background-size: cover;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	touch-action: none;
	/* Ohne Bild ist die Fläche ein Knopf: Ein Klick öffnet die
	   Dateiauswahl. Mit Bild übernimmt darunter "grab" den Zeiger. */
	cursor: pointer;
}

.em-dash__zieh[style*="background-image"] { cursor: grab; }
.em-dash__zieh[style*="background-image"]:active { cursor: grabbing; }

/* Das eingebettete Bild würde die Hintergrundvorschau verdecken. */
.em-dash__zieh img { display: none; }

/* Kurze Zeilen statt Absätze: Jede Erklärung im Profilformular ist
   eine einzige Zeile, sonst wirkt ein simples Formular kompliziert. */
.em-dash__zieh-hilfe {
	display: block;
	margin: 8px 0 0;
	font-size: 12.5px;
	color: var(--text-faint, #7c6a72);
}

.em-dash__zieh-hilfe[hidden] { display: none; }

.em-dash__feld-lead {
	margin: -2px 0 8px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--text-faint, #7c6a72);
}

/* Kreuz zum Löschen, sitzt in der Ecke der Vorschau. */
.em-dash__zieh { position: relative; }

.em-dash__weg {
	position: absolute;
	top: 6px;
	right: 6px;
	z-index: 2;
	width: 26px;
	height: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(20, 6, 12, 0.62);
	color: #fff;
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.15s ease;
}

.em-dash__weg:hover { background: var(--danger, #c0392b); }
.em-dash__weg[hidden] { display: none; }

.em-dash__cover-leer { color: rgba(255, 255, 255, 0.85); font-size: 13px; }

/* ==================================================================
   Mobiler Feinschliff im Konto

   Das Dashboard brach schon sauber um — Seitenleiste unter 960 px
   gestapelt, Inseratsliste unter 1280 px als Karten. Was fehlte, war
   die Größe: Menüpunkte mit 10 px Polster und Knöpfe aus der
   Mausbedienung sind mit dem Daumen kaum zu treffen.

   Die Marke liegt bei 44 px. Das ist keine Geschmacksfrage, sondern
   die Größe, ab der ein Ziel zuverlässig getroffen wird.
================================================================== */

@media (max-width: 640px) {

	.em-dash { padding: 14px 0 40px; }

	/* Menüpunkte des Kontos: aus einer Liste wird eine Bedienfläche. */
	.em-dash__nav { padding: 6px; }
	.em-dash__nav-link {
		min-height: 48px;
		padding: 12px 14px;
		font-size: 15.5px;
	}
	.em-dash__nav-link--abmelden { min-height: 44px; }

	/* Panels bis an den Rand ausatmen lassen statt einzuschnüren. */
	.em-dash__panel { padding: 16px; }
	.em-dash__panel--msg { padding: 0; }

	/*
	 * Nachrichten: Der Verlauf bekommt mehr Höhe. 360 px waren an
	 * einem Telefon rund vier Blasen — man las mehr Rahmen als Text.
	 */
	.em-msg__verlauf { height: 58vh; min-height: 320px; }
	.em-msg__gespraeche { max-height: 34vh; }
	.em-msg__blase { max-width: 84%; font-size: 15px; }

	/* Eingabefelder auf 16 px: Darunter zoomt iOS beim Antippen
	   hinein und lässt die Seite verschoben stehen. */
	/*
	 * Ankreuzfelder und Auswahlknöpfe ausdrücklich ausgenommen.
	 *
	 * „.em-acc input" traf auch sie. Die Mindesthöhe von 46 Pixeln
	 * machte den Kasten eines Ankreuzfeldes 46 Pixel hoch, während das
	 * gezeichnete Quadrat nur 22 Pixel misst und darin mittig sitzt –
	 * es stand dadurch rund zwölf Pixel tiefer als seine Beschriftung.
	 * Für diese beiden Feldarten bringt die Regel ohnehin nichts: iOS
	 * zoomt bei ihnen nicht hinein, und die Trefferfläche ist die
	 * ganze Beschriftung, nicht das Quadrat.
	 */
	.em-dash input[type="text"], .em-dash input[type="email"],
	.em-dash input[type="password"], .em-dash input[type="search"],
	.em-dash input[type="tel"], .em-dash input[type="url"],
	.em-dash input[type="number"], .em-dash select, .em-dash textarea,
	.em-acc input:not([type="checkbox"]):not([type="radio"]),
	.em-acc select, .em-acc textarea {
		font-size: 16px;
		min-height: 46px;
	}
	.em-dash textarea, .em-acc textarea { min-height: 110px; }

	/*
	 * Boosten und Verwalten nebeneinander.
	 *
	 * Ich hatte sie im letzten Durchgang untereinander gesetzt, damit
	 * jeder die volle Breite bekommt — das sah nach zwei getrennten
	 * Handlungen aus statt nach einem Knopfpaar zu einem Inserat.
	 * Zurück in eine Zeile, je zur Hälfte, mit 44 px Höhe.
	 */
	.em-dash__aktionen {
		display: flex;
		flex-direction: row;
		align-items: stretch;
		gap: 8px;
	}
	.em-dash__aktionen > *, .em-dash__aktionen form { flex: 1 1 0; min-width: 0; }
	.em-dash__push, .em-dash__drop-knopf {
		width: 100%;
		min-height: 44px;
		justify-content: center;
		padding: 10px 8px;
		font-size: 13.5px;
		white-space: nowrap;
		overflow: hidden;
	}

	/* Kennzahlen zu zweit statt zu viert — vier nebeneinander ergaben
	   Kacheln von 70 px, in denen die Zahl größer war als ihr Wort. */
	.em-dash__kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

	/* Reiter im Profil rollen seitlich, statt umzubrechen. */
	.em-dash__tabs {
		display: flex;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		gap: 6px;
	}
	.em-dash__tabs::-webkit-scrollbar { display: none; }
	.em-dash__tabs > * { flex: none; min-height: 44px; }

	/* Anmelden und Registrieren */
	.em-acc { padding: 16px 0 32px; }
	.em-acc__btn { min-height: 48px; }
}

/* ==================================================================
   Handy: Konto wie eine App
================================================================== */

/* Der Zurück-Pfeil im Gesprächskopf gehört ans Telefon, nicht an den
   großen Bildschirm — dort steht die Liste daneben. */
.em-msg__zurueck { display: none; }

@media (max-width: 720px) {

	/*
	 * Nachrichten in zwei Ansichten statt einer geteilten.
	 *
	 * Untereinander gestapelt stand der Name doppelt da: einmal in der
	 * Gesprächszeile, einmal im Kopf des Verlaufs. Jetzt zeigt die
	 * Seite entweder die Übersicht oder ein Gespräch — welches, sagt
	 * die Klasse "hat-auswahl" am Kasten.
	 */
	.em-msg__liste { border-bottom: 0; }
	.em-msg__gespraeche { max-height: none; }

	.em-msg.hat-auswahl .em-msg__liste { display: none; }
	.em-msg:not(.hat-auswahl) .em-msg__panel { display: none; }

	.em-msg__zurueck {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 38px;
		height: 38px;
		margin-left: -6px;
		flex: none;
		border-radius: 50%;
		color: var(--text-muted, #5c4650);
		text-decoration: none;
	}
	.em-msg__zurueck svg { width: 21px; height: 21px; }

	/* Der Verlauf darf die Höhe ausnutzen, die die Liste freigibt. */
	.em-msg__verlauf { height: 62vh; min-height: 340px; }
}

@media (max-width: 900px) {

	/*
	 * Inhalt zuerst, Menü darunter.
	 *
	 * Vorher stand die Menükarte oben und der angeklickte Bereich
	 * darunter — man tippte einen Punkt an und sah zunächst wieder das
	 * Menü. Jetzt öffnet sich der gewählte Bereich sofort, das Menü
	 * bleibt darunter für den nächsten Wechsel erreichbar.
	 */
	.em-dash__body { flex-direction: column; }
	.em-dash__aside { order: 2; position: static; width: 100%; flex: none; }
	.em-dash__content { order: 1; }

	/*
	 * Riegel gegen seitliches Verrutschen.
	 *
	 * Einzelne Bausteine im Konto sind breiter als ein Telefon — das
	 * Ausklappmenü der Inseratsliste mit seinen 232 px, lange Namen
	 * ohne Umbruchpunkt, die Kennzahlenreihe. Ein einziger davon
	 * schiebt die ganze Seite zur Seite, und dann verrutscht auch die
	 * Kopfzeile, wie auf Steffis Bildschirmfoto zu sehen.
	 *
	 * min-width: 0 ist der eigentliche Hebel: Flex- und Rasterkinder
	 * weigern sich sonst, unter ihre Inhaltsbreite zu schrumpfen.
	 */
	.em-dash, .em-dash__body, .em-dash__content, .em-dash__aside,
	.em-dash__panel, .em-msg, .em-msg__panel, .em-msg__liste { min-width: 0; max-width: 100%; }

	.em-dash__drop-menu { min-width: 0; width: min(232px, calc(100vw - 64px)); }

	/* Lange Namen und Adressen brechen um, statt zu schieben. */
	.em-dash__panel { overflow-wrap: anywhere; }
}

@media (max-width: 640px) {

	/*
	 * Das Titelbild stand ohne feste Höhe da und wuchs mit dem Bild,
	 * bis es die Karte sprengte. Fester Rahmen, Bild im Ausschnitt.
	 */
	.em-dash__cover-vorschau {
		height: 130px;
		width: 100%;
		max-width: 100%;
		background-size: cover;
		background-position: 50% 50%;
	}
	.em-dash__cover-vorschau img { display: none; }

	/* Dateiauswahl über die volle Breite statt halb abgeschnitten. */
	.em-dash input[type="file"] { max-width: 100%; font-size: 13px; }
}

/* ==================================================================
   Kontomenü als Klappe, Gesprächskopf entzerrt
================================================================== */

/* Am großen Bildschirm gibt es den Knopf nicht — dort steht die Liste
   dauerhaft in der linken Spalte. */
.em-dash__menue-knopf { display: none; }

@media (max-width: 900px) {

	.em-dash__menue-knopf {
		display: flex;
		align-items: center;
		gap: 10px;
		width: 100%;
		min-height: 56px;
		padding: 12px 16px;
		background: none;
		border: 0;
		font-family: inherit;
		text-align: left;
		cursor: pointer;
		color: var(--heading, #8a2440);
	}

	.em-dash__menue-titel { font-size: 16px; font-weight: 600; }

	.em-dash__menue-hinweis {
		flex: 1;
		font-size: 12.5px;
		color: var(--text-faint, #7c6a72);
		text-align: right;
	}

	.em-dash__menue-knopf .em-dash__chevron {
		flex: none;
		display: flex;
		transition: transform .18s ease;
	}
	.em-dash__aside.menue-offen .em-dash__menue-knopf .em-dash__chevron { transform: rotate(180deg); }

	/*
	 * Zugeklappt verschwinden Menü und Kopfbereich der Karte. Übrig
	 * bleibt eine Zeile, die sagt, wo man ist — statt zehn Zeilen, an
	 * denen man auf jeder Kontoseite vorbeiscrollt.
	 */
	.em-dash__aside:not(.menue-offen) .em-dash__nav { display: none; }

	.em-dash__aside.menue-offen .em-dash__menue-knopf {
		border-bottom: 1px solid var(--line-soft, #efe6e8);
	}
}

@media (max-width: 720px) {

	/*
	 * Der Kopf des Gesprächs stand in einer Zeile: Zurück, Bild, Name,
	 * Anwesenheit, dazu Melden und Blockieren. Für den Namen blieben
	 * rund 40 px, er brach mitten im Wort um — "Lar / a" und "Offli /
	 * ne". Jetzt zwei Zeilen: oben wer, darunter die beiden Aktionen.
	 */
	.em-msg__panel-kopf {
		display: grid;
		grid-template-columns: auto auto minmax(0, 1fr);
		align-items: center;
		gap: 10px;
		padding: 10px 12px;
	}

	.em-msg__panel-kopf .em-msg__wer {
		grid-column: 3;
		min-width: 0;
		display: flex;
		flex-direction: column;
		gap: 1px;
	}

	.em-msg__partner, .em-msg__panel-kopf .em-msg__wer > span {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		max-width: 100%;
	}
	.em-msg__partner { font-size: 15.5px; font-weight: 600; }
	.em-msg__panel-kopf .em-msg__wer > span { font-size: 12.5px; }

	/*
	 * Melden und Blockieren rutschen in eine eigene Zeile unter den
	 * Namen und teilen sie sich hälftig. Der Blockieren-Knopf steckt in
	 * einem Formular, deshalb muss auch das mitwachsen.
	 */
	.em-msg__stillgruppe {
		grid-column: 1 / -1;
		display: flex;
		gap: 8px;
		width: 100%;
		/*
		 * margin-left und flex zurücksetzen.
		 *
		 * Die Grundregel schiebt die Gruppe mit "margin-left: auto"
		 * nach rechts und lässt sie mit "flex: 0 0 auto" auf
		 * Inhaltsbreite schrumpfen — richtig, solange sie neben dem
		 * Namen steht. In der eigenen Zeile darunter klebte sie
		 * dadurch rechts, während die Trennlinie über die volle
		 * Breite lief. Beides muss hier ausdrücklich zurück.
		 */
		margin-left: 0;
		margin-top: 2px;
		flex: 1 1 auto;
		padding-top: 8px;
		border-top: 1px solid var(--line-soft, #efe6e8);
	}
	.em-msg__stillgruppe > *, .em-msg__stillgruppe form {
		flex: 1 1 0;
		min-width: 0;
		justify-content: center;
		min-height: 40px;
		font-size: 13px;
		white-space: nowrap;
	}
}

@media (max-width: 720px) {
	.em-msg__stillgruppe form { display: flex; }
	.em-msg__stillgruppe form > * { width: 100%; justify-content: center; }
}

@media (max-width: 900px) {
	/*
	 * Der Kopf der Kontokarte — Profilbild und Name — entfällt auf dem
	 * Handy ganz.
	 *
	 * Er stand über dem Menüknopf und wiederholte nur, wer angemeldet
	 * ist. Das weiß man; und wenn nicht, führt die untere Leiste zum
	 * Profil. Übrig bleibt eine Karte, die genau eine Sache tut: den
	 * Bereich anzeigen und wechseln lassen.
	 */
	.em-dash__aside .em-dash__profil { display: none; }
}

/* ==================================================================
   Chat auf dem Telefon
================================================================== */

@media (max-width: 720px) {

	/*
	 * Der Chat füllt den Bildschirm — nichts drumherum.
	 *
	 * Warum der erste Versuch nichts bewirkte: Ich hatte den Kopf auf
	 * "position: sticky" gesetzt. Sticky braucht aber einen Bereich,
	 * in dem gerollt wird; hier rollte die ganze Seite, weil der Kasten
	 * höher war als der Bildschirm. Der Kopf klebte also an einem
	 * Bereich, der selbst mitwanderte.
	 *
	 * Jetzt umgekehrt: Der Kasten bekommt genau die Höhe, die übrig
	 * bleibt, und rollt selbst nicht mehr. Kopf und Eingabe stehen
	 * dadurch von allein fest, und nur der Verlauf dazwischen bewegt
	 * sich.
	 *
	 * --em-chat-abzug: Im Nachrichtenbereich blendet das Theme seine
	 * Kopfzeile aus, es zählt also nur die untere Leiste (60 px) und
	 * der Rand des Geräts. Das ist die einzige Stelle mit dieser Zahl —
	 * ändert sich die Höhe der Leiste, ändert sie sich hier.
	 */
	.em-dash--msg {
		--em-chat-abzug: calc(60px + env(safe-area-inset-bottom, 0px));
		padding: 0;
	}

	/* Über die volle Breite. Die Ränder kommen von der Hülle der Seite;
	   die Rechnung mit 50% und 50vw holt sie zurück, ohne dass hier
	   stehen muss, wie breit sie gerade sind. */
	.em-dash--msg .em-dash__content,
	.em-dash--msg .em-dash__panel--msg {
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
		width: 100vw;
		max-width: 100vw;
		padding: 0;
	}

	/* Menükarte weg — die untere Leiste führt über "Mein Konto"
	   dorthin, und unter dem Chat stand sie nur im Weg. */
	.em-dash--msg .em-dash__aside { display: none; }

	.em-dash--msg .em-msg {
		border-radius: 0;
		border-left: 0;
		border-right: 0;
		margin: 0;
		height: auto;
	}

	.em-msg__panel {
		display: flex;
		flex-direction: column;
		height: calc(100dvh - var(--em-chat-abzug, 60px));
	}

	.em-msg__panel-kopf { flex: none; }

	.em-msg__verlauf {
		flex: 1 1 auto;
		height: auto;
		min-height: 0;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
	}

	.em-msg__eingabe {
		flex: none;
		border-top: 1px solid var(--line-soft, #efe6e8);
	}

	/* Die Übersicht ohne Auswahl darf dieselbe Höhe nutzen. */
	.em-msg__liste { max-height: none; }
	.em-msg__gespraeche { max-height: none; }

	/* --------------------------------------------------------------
	   Der Kopf: Name oben, darunter eine Kleinzeile
	-------------------------------------------------------------- */

	.em-msg__panel-kopf {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 9px 12px;
		border-bottom: 1px solid var(--line-soft, #efe6e8);
	}

	.em-msg__panel-kopf .em-msg__wer {
		flex: 1 1 auto;
		min-width: 0;
		display: flex;
		flex-direction: column;
		gap: 1px;
	}

	/*
	 * Enge Zeilenhöhen, damit Name und Kleinzeile zusammenrücken.
	 *
	 * Der Abstand kam nicht aus einer Lücke, sondern aus dem geerbten
	 * Wert 1.6 des Fließtexts: Bei 15.5 px ergibt das einen 25 px
	 * hohen Zeilenkasten, in dem der Name mittig sitzt — oben und
	 * unten blieben je fünf Pixel Luft, die niemand gesetzt hat. Der
	 * ganze Block ist im Kopf senkrecht zentriert, ein niedrigerer
	 * Block bringt den Namen also nach unten.
	 */
	.em-msg__panel-kopf .em-msg__wer b {
		font-size: 15.5px;
		line-height: 1.15;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/*
	 * Anwesenheit, Melden und Blockieren in einer Kleinzeile — alle
	 * drei in derselben Größe und Farbe wie zuvor nur "Offline".
	 */
	.em-msg__zeile2 {
		display: flex;
		align-items: center;
		gap: 12px;
		font-size: 12.5px;
		line-height: 1.25;
		color: var(--text-muted, #5c4650);
	}
	.em-msg__status { flex: none; }

	.em-msg__zeile2 .em-msg__stillgruppe {
		display: flex;
		align-items: center;
		gap: 12px;
		margin: 0;
		padding: 0;
		border: 0;
		flex: 0 1 auto;
		min-width: 0;
	}
	.em-msg__zeile2 .em-still {
		min-height: 0;
		padding: 0;
		font-size: 12.5px;
		background: none;
		border: 0;
		gap: 4px;
		white-space: nowrap;
	}
	.em-msg__zeile2 .em-still svg { width: 14px; height: 14px; }
	.em-msg__zeile2 form { display: inline-flex; }
}

/* ==================================================================
   Veranstaltungen im Konto (mobil)
================================================================== */

@media (max-width: 640px) {

	/*
	 * Überschrift und Knopf in einer Zeile. "flex-wrap: wrap" schickte
	 * den Knopf auf eine eigene Zeile, sobald es eng wurde — über der
	 * Liste standen dann zwei Zeilen Kopf. Beide werden stattdessen
	 * eine Spur kleiner und bleiben nebeneinander.
	 */
	.em-dash__panel-kopf {
		flex-wrap: nowrap;
		align-items: center;
		gap: 10px;
		margin-bottom: 14px;
	}
	/*
	 * Die Überschrift darf umbrechen.
	 *
	 * Sie stand auf "nowrap" mit Auslassungspunkten, damit sie den
	 * Knopf daneben nicht verdrängt. Bei "Veranstaltungen" ging das
	 * gut, bei "Impressumsangaben für gewerbliche Inserate" wurde die
	 * Überschrift abgeschnitten — und dort steht gar kein Knopf.
	 * Umbrechen kostet eine Zeile und schneidet nichts ab.
	 */
	.em-dash__panel-kopf .em-dash__h1 {
		font-size: 21px;
		min-width: 0;
		line-height: 1.25;
	}
	.em-dash__panel-kopf .em-dash__btn {
		flex: none;
		padding: 9px 13px;
		font-size: 13px;
		min-height: 40px;
		white-space: nowrap;
	}

	/*
	 * Die Veranstaltungszeile als Raster: Datum links, Text in der
	 * Mitte, Bild rechts, Marke und Knopf darunter. Als Flexzeile
	 * standen Bild und Datum beide vorne — zwei Kacheln hintereinander,
	 * bevor überhaupt ein Wort kam.
	 *
	 * Die dritte Spalte ist "auto": Fehlt das Bild, fällt sie zusammen,
	 * statt eine Lücke zu hinterlassen.
	 */
	.em-dash__event {
		display: grid;
		grid-template-columns: 46px minmax(0, 1fr) auto;
		grid-template-areas:
			"datum text  bild"
			".     unten unten";
		align-items: start;
		gap: 10px 12px;
		flex-wrap: initial;
	}
	.em-dash__event-datum { grid-area: datum; }
	.em-dash__event-text  { grid-area: text; min-width: 0; }
	.em-dash__thumb {
		grid-area: bild;
		width: 62px;
		height: 62px;
		border-radius: 10px;
	}

	.em-dash__event > .em-dash__event-unten {
		grid-area: unten;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 8px;
	}
	/* Die Knöpfe rücken nach rechts, die Marke bleibt links. */
	.em-dash__event-unten .em-dash__btn { margin-left: auto; min-height: 38px; }
	.em-dash__event-unten .em-dash__btn + .em-dash__btn { margin-left: 0; }
}

/* ==================================================================
   Kalendermarke
================================================================== */

/*
 * "Im Kalender" in Gold statt Grün.
 *
 * Grün ist auf dieser Seite die Farbe der Handlungsknöpfe — "Nachricht
 * senden", "Neue Veranstaltung". Dieselbe Farbe an einer Marke, die
 * nur einen Zustand meldet, sah nach einem weiteren Knopf aus, den man
 * antippen könnte.
 *
 * Bewusst nur innerhalb der Veranstaltungsliste: Bei den Inseraten
 * meldet dieselbe Variante "Online", und dort ist Grün richtig, weil
 * es dem Ampelgedanken folgt und keinem Knopf gleicht.
 */
.em-dash__event .em-dash__pill--veroeffentlicht {
	background: rgba(138, 98, 16, 0.13);
	color: var(--accent, #8a6210);
}

@media (max-width: 900px) {
	/*
	 * Die Menükarte steht auf dem Telefon normalerweise nicht da — sie
	 * wiederholte unter jedem Bereich dieselbe Liste, obwohl die untere
	 * Leiste ohnehin überall hinführt.
	 *
	 * Eine Ausnahme: "Mein Konto" in der Leiste hängt "?menue=auf" an,
	 * und dann ist die Karte genau das, was man sehen will. Deshalb
	 * hängt die Sichtbarkeit an derselben Klasse, die auch das
	 * Aufklappen steuert.
	 *
	 * Folge davon: Klappt man sie über den Knopf wieder zu, ist sie
	 * ganz weg. Das ist gewollt — zugeklappt hätte sie hier keinen
	 * Zweck, und der Weg zurück steht in der Leiste.
	 */
	.em-dash__aside { display: none; }
	.em-dash__aside.menue-offen { display: block; }

	/* Aufgeklappt gehört sie nach oben, nicht unter den Inhalt: Wer
	   "Mein Konto" tippt, will zuerst wählen. */
	.em-dash__aside.menue-offen { order: 0; }
}

@media (max-width: 720px) {
	/*
	 * 100dvh statt 100vh: dvh folgt der Höhe, die tatsächlich sichtbar
	 * ist — auf dem Telefon ändert sie sich, wenn die Adresszeile ein-
	 * und ausfährt. Mit vh stünde das Eingabefeld zeitweise darunter.
	 */
	body.em-chat .em-dash--msg .em-msg__panel { max-height: none; }
}

/* ==================================================================
   Statusfilter statt Kacheln (Handy)
================================================================== */

/* Am großen Bildschirm übernehmen Kacheln und Kontomenü diese
   Aufgabe — dort wäre die Reihe eine dritte Dopplung. */
.em-dash__filter { display: none; }

@media (max-width: 900px) {

	.em-dash__kacheln { display: none; }

	.em-dash__filter {
		display: flex;
		gap: 8px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		margin: 0 0 14px;
		/*
		 * Die Reihe rollt bis an den Bildrand und wird dort nicht
		 * abgeschnitten: Der negative Außenabstand holt das Polster der
		 * Seite heraus, das Polster innen setzt es für den ersten und
		 * letzten Knopf wieder. Ohne das sähe der letzte Knopf aus, als
		 * wäre er der letzte, obwohl noch mehr kommt.
		 */
		margin-left: -20px;
		margin-right: -20px;
		padding: 2px 20px;
	}
	.em-dash__filter::-webkit-scrollbar { display: none; }

	.em-dash__filter-knopf {
		flex: none;
		display: inline-flex;
		align-items: center;
		gap: 6px;
		min-height: 38px;
		padding: 0 13px;
		border-radius: 999px;
		border: 1px solid var(--line, #e2d2d6);
		background: var(--surface, #fff);
		color: var(--text-muted, #5c4650);
		font-size: 13.5px;
		text-decoration: none;
		white-space: nowrap;
	}

	.em-dash__filter-knopf.ist-aktiv {
		background: var(--heading, #8a2440);
		border-color: var(--heading, #8a2440);
		color: #fff;
	}

	.em-dash__filter-zahl {
		font-size: 12px;
		opacity: .75;
	}
	.em-dash__filter-knopf.ist-aktiv .em-dash__filter-zahl { opacity: .85; }
}

@media (max-width: 720px) {

	/*
	 * Auch die Gesprächsübersicht füllt den Bildschirm.
	 *
	 * Vorher bekam nur der Verlauf eine Höhe; die Liste stand oben und
	 * darunter blieb cremefarbene Fläche. Die Höhe sitzt jetzt am
	 * gemeinsamen Rahmen, und die jeweils sichtbare Seite — Liste oder
	 * Verlauf — nimmt sich davon, was übrig ist.
	 */
	body.em-chat .em-msg {
		display: flex;
		flex-direction: column;
		height: calc(100dvh - var(--em-chat-abzug, 60px));
		border-top: 0;
		border-bottom: 0;
	}

	body.em-chat .em-msg__liste,
	body.em-chat .em-msg__panel {
		flex: 1 1 auto;
		min-height: 0;
		height: auto;
	}

	body.em-chat .em-msg__gespraeche {
		flex: 1 1 auto;
		min-height: 0;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* Kein Rahmen oben — er war der weiße Strich unter der Statuszeile. */
	body.em-chat .em-dash__panel--msg { border: 0; border-radius: 0; }
}

/* Am großen Bildschirm steht die Gruppe rechts in der Zeile. */
.em-dash__event-unten {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-left: auto;
	flex: 0 0 auto;
}

@media (max-width: 720px) {
	/*
	 * Name und Kleinzeile ganz dicht.
	 *
	 * Der vorige Versuch mit 1.15 und 1.25 hat den Abstand halbiert,
	 * aber nicht beseitigt — er stammte zusätzlich aus dem Zwischenraum
	 * der Flexspalte und aus der Grundregel, die dem Namen "display:
	 * block" gibt und ihn damit eine eigene Zeile mit geerbter Höhe
	 * aufspannen lässt.
	 *
	 * Diese Regeln stehen bewusst am Dateiende: Sie sollen alles davor
	 * schlagen, ohne dass ich jede einzelne Vorgängerregel suchen muss.
	 */
	.em-msg__panel-kopf .em-msg__wer { gap: 0; }

	/*
	 * Beide Schreibweisen ansprechen.
	 *
	 * Der Name steht als <a class="em-msg__partner">, sobald das Konto
	 * noch existiert — nur bei gelöschten Konten als <b>. Meine
	 * bisherigen Regeln zielten allein auf das <b> und haben deshalb
	 * nie gegriffen; dreimal habe ich an Zahlen gedreht, die kein Feld
	 * erreicht haben. Der Name ist der häufigere Fall.
	 */
	.em-msg__panel-kopf .em-msg__wer b,
	.em-msg__panel-kopf .em-msg__partner {
		font-size: 15.5px;
		line-height: 1.1;
		display: block;
		margin: 0;
		padding: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.em-msg__zeile2 { line-height: 1.1; margin: 0; padding: 0; }
	.em-msg__status { line-height: 1.1; }
}

/* Der Name in der Kontokarte verweist aufs eigene Profil, soll aber
   nicht wie ein gewöhnlicher Link aussehen — er ist zuerst eine
   Angabe, dann ein Weg. */
.em-dash__name a { color: inherit; text-decoration: none; }
.em-dash__name a:hover { color: var(--accent, #8a6210); text-decoration: underline; text-underline-offset: 3px; }

/* ==================================================================
   Namensblock im Gesprächskopf — letzte Instanz
================================================================== */

@media (max-width: 720px) {
	/*
	 * Alle direkten Kinder ansprechen, nicht einzelne Elemente.
	 *
	 * Ich habe hier viermal danebengegriffen: erst auf "b" gezielt,
	 * während der Name ein "a.em-msg__partner" ist, dann auf beide,
	 * aber gegen ältere Regeln mit gleicher Stärke. Der Selektor
	 * "> *" trifft, was auch immer dort steht — Link, fetter Text
	 * oder die Kleinzeile — und macht die Frage gegenstandslos.
	 *
	 * "line-height: 1.1" heißt: Der Zeilenkasten ist nur zehn Prozent
	 * höher als die Buchstaben selbst. Weniger geht nicht, ohne dass
	 * Unterlängen wie beim "g" abgeschnitten werden.
	 */
	.em-msg__panel-kopf .em-msg__wer {
		display: flex;
		flex-direction: column;
		gap: 0;
		justify-content: center;

		/*
		 * Der eigentliche Übeltäter: line-height am Elternteil.
		 *
		 * Zwischen dem Namen und der Kleinzeile steht im Markup ein
		 * Zeilenumbruch. Ist der Kasten kein Flex-Kasten — und das war
		 * er offenbar nicht, sonst hätten die bisherigen Regeln
		 * gewirkt —, bildet dieser Leerraum eine eigene, unsichtbare
		 * Textzeile mit der geerbten Höhe von 1.6. Bei 16 px Grundgröße
		 * sind das gut 25 px, die niemand sieht und niemand gesetzt hat.
		 * Genau der doppelte Abstand, den Steffi viermal gemeldet hat.
		 *
		 * "line-height: 0" am Elternteil macht diese leere Zeile
		 * höhenlos. Die sichtbaren Zeilen bekommen ihre Höhe unten
		 * einzeln zugewiesen und sind davon unberührt.
		 */
		line-height: 0;
	}

	.em-msg__panel-kopf .em-msg__wer > * {
		line-height: 1.1;
		margin: 0;
		padding: 0;
	}

	.em-msg__panel-kopf .em-msg__wer > .em-msg__partner,
	.em-msg__panel-kopf .em-msg__wer > b {
		font-size: 15.5px;
		font-weight: 600;
	}

	.em-msg__panel-kopf .em-msg__wer > .em-msg__zeile2 { font-size: 12.5px; }
}

/* ==================================================================
   Gesprächskopf: feste Zeilenhöhen

   Sechster Anlauf, diesmal mit der tatsächlichen Ursache.

   Die zweite Zeile ist kein Text, sondern eine Flexzeile mit den
   Knöpfen "Melden" und "Blockieren". Die tragen 7 px Polster oben und
   unten — die Zeile ist dadurch rund 31 px hoch statt 14, und
   "Offline" sitzt mittig darin, also acht Pixel tiefer als nötig.
   Genau diese acht Pixel waren der Rest, den ich in den Zeilenhöhen
   des Textes gesucht und nie gefunden habe.

   Deshalb hier feste Höhen in Pixeln und ein Selektor, der jedem
   Nachfahren Polster, Rand und Mindesthöhe nimmt. Was in dieser Zeile
   steht, kann sie damit nicht mehr aufblähen — auch nichts, was
   später dazukommt.
================================================================== */

@media (max-width: 720px) {

	.em-msg__panel-kopf .em-msg__wer > .em-msg__partner,
	.em-msg__panel-kopf .em-msg__wer > b {
		line-height: 16px;
	}

	.em-msg__panel-kopf .em-msg__wer > .em-msg__zeile2 {
		height: 15px;
		line-height: 15px;
		align-items: center;
	}

	.em-msg__panel-kopf .em-msg__wer > .em-msg__zeile2 * {
		line-height: 15px;
		min-height: 0;
		height: auto;
		padding: 0;
		margin: 0;
		border: 0;
		align-self: center;
	}

	/* Die Symbole eine Spur kleiner, damit sie in 15 px passen. */
	.em-msg__panel-kopf .em-msg__wer > .em-msg__zeile2 svg {
		width: 13px;
		height: 13px;
	}
}

@media (max-width: 720px) {
	/*
	 * Die Kleinzeile ein Stück tiefer, der Name bleibt stehen.
	 *
	 * Mit Außenabständen ging das nicht: Der Block ist senkrecht
	 * zentriert, und bei der Zentrierung zählt der Außenabstand mit.
	 * Ein Gegenzug von -3 px verschob den Block deshalb nur um 1,5 px
	 * — der Name wanderte, die Kleinzeile blieb fast stehen. Genau
	 * verkehrt herum.
	 *
	 * "position: relative" verschiebt nur die Darstellung. Der Platz,
	 * den die Zeile im Block einnimmt, bleibt unverändert; die Höhe
	 * des Blocks ändert sich nicht, die Zentrierung also auch nicht.
	 * Der Name kann sich dadurch gar nicht bewegen.
	 */
	.em-msg__panel-kopf .em-msg__wer > .em-msg__zeile2 {
		position: relative;
		top: 6px;
	}
}

/* ==================================================================
   Ankreuzfelder: Kästchen und Beschriftung auf einer Linie

   Unter 640 px bekommen Eingabefelder eine Mindesthöhe fürs Antippen.
   Ein Ankreuzfeld zeichnet darin aber weiter nur sein 22-px-Quadrat und
   setzt es mittig in den hohen Kasten — es steht dadurch rund dreizehn
   Pixel unter seiner Beschriftung.

   Deshalb hier eine feste Höhe statt einer Mindesthöhe, dazu kein
   Polster und kein Rand. Was das Kästchen sonst noch aufblähen könnte,
   kann es damit nicht mehr.

   Der Selektor nennt Elternklasse und Feldart, um dieselbe Stärke zu
   erreichen wie die Mindesthöhenregel; die Stellung am Dateiende
   entscheidet dann. Beide Konten-Bereiche sind aufgeführt, weil die
   Zeile in Anmeldung, Registrierung und Konto vorkommt.
================================================================== */

.em-acc .em-acc__check input[type="checkbox"],
.em-dash .em-acc__check input[type="checkbox"],
.em-acc__check input[type="checkbox"] {
	box-sizing: border-box;
	width: 22px;
	height: 22px;
	min-height: 22px;
	max-height: 22px;
	flex: 0 0 22px;
	margin: 0;
	padding: 0;
	align-self: flex-start;
}

/*
 * „flex-start" bleibt bewusst stehen: Bei der AGB-Zeile läuft der Text
 * über mehrere Zeilen, und dort gehört das Kästchen auf die erste
 * Zeile und nicht in die Mitte des Absatzes. Weil Zeilenhöhe und
 * Kästchen beide 22 px messen, sitzt es bei einzeiligem Text trotzdem
 * genau auf der Linie der Beschriftung.
 */
.em-acc__check {
	line-height: 22px;
}

/* ==================================================================
   Gesprächskopf am großen Bildschirm

   Drei Dinge auf einmal, weil sie voneinander abhängen.

   1. Kleinzeile in einer Reihe. Die Einzeiligkeit von
      „Offline · Melden · Blockieren" stand bisher ausschließlich in
      der Abfrage für unter 720 px. Am großen Bildschirm war die
      Kleinzeile ein gewöhnliches Inline-Element — und die Knopfgruppe
      darin ein Flex-Kasten, der immer eine eigene Zeile beansprucht.

   2. Melden und Blockieren ganz nach rechts. „margin-left: auto"
      allein reichte nicht: „.em-msg__wer" ist ein Flex-Kind ohne
      Wachstum und damit nur so breit wie sein Inhalt. Der Automatik-
      abstand schob die Knöpfe also nur an den Rand des Namens, nicht
      an den des Kopfes. Deshalb „flex: 1 1 auto".

   3. Weniger Abstand zwischen Name und Kleinzeile. Er entstand aus
      der geerbten Zeilenhöhe und aus dem Polster der Knöpfe. Hier
      stehen beide Zeilenhöhen fest: 20 px für den Namen, 23 px für
      die Kleinzeile, dazwischen 3 px. Was in der Kleinzeile steht,
      kann sie damit nicht mehr aufblähen.

   Ab 721 px, damit die Handyansicht unberührt bleibt — die hat sechs
   Anläufe gekostet und sitzt.
================================================================== */

@media (min-width: 721px) {

	.em-msg__panel-kopf .em-msg__wer {
		/*
		 * „stretch" ist hier Pflicht, nicht Standardgeschmack: In
		 * Spaltenrichtung schrumpfen die Kinder bei „flex-start" auf
		 * ihre Inhaltsbreite, und dann hat der Automatikabstand in der
		 * Kleinzeile keinen Platz mehr, in den er schieben könnte.
		 * Dieser Fehler ist im Projekt schon dreimal aufgetreten.
		 */
		display: flex;
		flex-direction: column;
		align-items: stretch;
		justify-content: center;
		flex: 1 1 auto;
		gap: 3px;

		/*
		 * Zwischen Name und Kleinzeile steht im Markup ein
		 * Zeilenumbruch. Ohne „line-height: 0" bildet dieser Leerraum
		 * eine eigene, unsichtbare Textzeile mit geerbter Höhe. Die
		 * sichtbaren Zeilen bekommen ihre Höhe unten einzeln.
		 */
		line-height: 0;
	}

	.em-msg__panel-kopf .em-msg__wer > * { margin: 0; padding: 0; }

	/*
	 * Der Name sitzt tiefer, „Offline" bleibt stehen.
	 *
	 * Gerechnet, damit sich nur eine der beiden Zeilen bewegt: Der
	 * Block ist im Kopf senkrecht zentriert, jede Änderung seiner
	 * Gesamthöhe verschöbe also beide Zeilen. Deshalb wandern die
	 * 5 px, die der Name an Zeilenhöhe verliert, als Polster über ihn
	 * — die Summe bleibt 5 + 15 + 3 + 23 = 46 px wie zuvor, und die
	 * Kleinzeile beginnt weiterhin exakt 23 px unter der Oberkante.
	 *
	 * Wirkung: Der Name rückt rund 2,5 px nach unten, der Abstand zu
	 * „Offline" schrumpft um denselben Betrag.
	 */
	.em-msg__panel-kopf .em-msg__wer { padding-top: 5px; }

	.em-msg__panel-kopf .em-msg__wer > .em-msg__partner,
	.em-msg__panel-kopf .em-msg__wer > b {
		font-size: 15.5px;
		line-height: 15px;
	}

	.em-msg__panel-kopf .em-msg__zeile2 {
		display: flex;
		align-items: center;
		gap: 12px;
		height: 23px;
		line-height: 23px;
		font-size: 12.5px;
		color: var(--text-muted, #5c4650);
	}

	.em-msg__panel-kopf .em-msg__zeile2 .em-msg__status { flex: none; }

	/*
	 * Rechtsbündig über „margin-left: auto". Der negative Abstand
	 * rechts nimmt das Polster des letzten Knopfes wieder heraus —
	 * sonst endete „Blockieren" acht Pixel vor der Kante und stünde
	 * sichtbar weiter innen als alles andere im Kopf.
	 */
	.em-msg__panel-kopf .em-msg__zeile2 .em-msg__stillgruppe {
		display: flex;
		align-items: center;
		gap: 2px;
		flex: 0 0 auto;
		align-self: center;
		margin: 0 -8px 0 auto;
	}

	/*
	 * Knapperes Polster als sonst: Die Hoverfläche bleibt für die Maus
	 * groß genug, die Zeile wird aber nicht höher als ihre 23 px.
	 */
	.em-msg__panel-kopf .em-msg__zeile2 .em-still {
		min-height: 0;
		padding: 4px 8px;
		line-height: 15px;
		white-space: nowrap;
	}

	.em-msg__panel-kopf .em-msg__zeile2 .em-still svg { width: 14px; height: 14px; flex: 0 0 14px; }
	.em-msg__panel-kopf .em-msg__zeile2 form { display: inline-flex; margin: 0; }
}