/*
Theme Name: Erotikmarkt24
Description: Eigenes Theme für erotikmarkt24.at. Farbwelt "Noir" – Burgund, Gold, Creme.
Version: 2.28.0
Requires PHP: 8.1
Text Domain: erotikmarkt
*/

/* ------------------------------------------------------------------
   Farb- und Maßsystem
   Dunkel ist der Ausgangszustand, hell wird per data-theme gesetzt.
------------------------------------------------------------------ */

:root,
[data-theme="dark"] {
	--bg:          #100609;
	--surface:     #1B0A11;
	--card:        #3B0D1C;
	--card-hover:  #4A1526;
	--line:        #3B0D1C;
	--line-soft:   #250810;

	--accent:       #D9A441;
	--accent-hover: #E8BC5E;
	--on-accent:    #2A1C04;

	/* Dritte Farbe: helles Burgunder-Rosé */
	--accent-2:       #E59AAC;
	--accent-2-soft:  rgba(229, 154, 172, 0.13);
	--heading:        #EFB3C0;

	/* Im Dunkeln geht Kontrast in die andere Richtung: eine Stufe
	   heller als --heading, nicht dunkler. */
	--card-title:     #F7CDD6;

	/* Und die Zählmarke dreht sich um: helles Rosé, dunkle Ziffer.
	   Weiß auf Rosé wäre im Dunkeln nicht zu lesen. */
	--badge-bg:       #E59AAC;
	--badge-fg:       #2B0A14;

	--text:        #F6EDE2;
	--text-muted:  #C9B8BC;
	--text-faint:  #9C8A90;

	--danger:      #FF6B5A;
	--danger-soft: rgba(255, 107, 90, 0.14);
	--focus:       #F2E4D0;

	--panel:       #1B0A11;
	--line-gold:   var(--line);

	/* Gedämpftes Gold für Flächen, die keine Knöpfe sind – derzeit die
	   Kontaktfelder im Inserat. Im Dunkeln ist --accent schon ein helles
	   Gold, eine Verdünnung genügt also. */
	--gold-soft:      rgba(217, 164, 65, 0.14);
	--gold-soft-line: rgba(217, 164, 65, 0.30);
	--status-on:      #4ECB71;
	--status-on-soft: rgba(78, 203, 113, 0.18);
	--status-off:     #7A5E67;
	--logo-word:   var(--heading);
	--shadow-glow: 0 0 32px rgba(217, 164, 65, 0.10);

	/* Füllung des Hauptknopfes. Im Dunkeln bleibt sie golden – auf dem
	   fast schwarzen Untergrund ist Gold der einzige Ton mit genug
	   Leuchtkraft. Hell weicht davon bewusst ab, siehe unten. */
	--btn-fill:       var(--accent);
	--btn-fill-hover: var(--accent-hover);
	--btn-text:       var(--on-accent);
}

[data-theme="light"] {
	--bg:          #F7F2EE;
	--surface:     #FFFFFF;
	--card:        #EFE2E5;
	--card-hover:  #E7D6DA;
	--line:        #E2D2D6;
	--line-soft:   #EFE6E8;

	--accent:       #8A6210;
	--accent-hover: #7E5A0E;
	--on-accent:    #FFFFFF;

	--accent-2:       #9E2E4C;
	--accent-2-soft:  rgba(158, 46, 76, 0.10);
	--heading:        #8A2440;

	/* Kartentitel eine Stufe tiefer als --heading: auf Weiß steigt der
	   Kontrast von 8.7:1 auf 11.3:1. Überschriften bleiben beim
	   helleren Bordeaux — dort trägt die Größe, hier nicht. */
	--card-title:     #6E1B32;

	/* Zählmarke: dunkles Bordeaux, weiße Ziffer. */
	--badge-bg:       #8A2440;
	--badge-fg:       #FFFFFF;

	--text:        #1E0C14;
	--text-muted:  #5C4650;
	--text-faint:  #7C6A72;

	--danger:      #C0392B;
	--danger-soft: rgba(192, 57, 43, 0.09);
	--focus:       #24101A;

	--panel:       #FFFFFF;
	--line-gold:   rgba(138, 98, 16, 0.45);

	/* Hell weicht bewusst vom Akzent ab: --accent ist hier #8A6210, ein
	   dunkles Goldbraun. Stark verdünnt wirkt das schlammig statt
	   golden, deshalb steht in der Füllung ein hellerer Goldton. Der
	   Rahmen darf beim Akzent bleiben. */
	--gold-soft:      rgba(196, 148, 42, 0.18);
	--gold-soft-line: rgba(138, 98, 16, 0.28);
	--status-on:      #1E9E4A;
	--status-on-soft: rgba(30, 158, 74, 0.16);
	--status-off:     #B3A2A8;
	--logo-word:   var(--heading);
	--shadow-glow: none;

	/* Nur im Hellmodus: Hauptknopf im gedämpften Grün der
	   Online-Marke. Der Text ist eine kräftigere Stufe desselben
	   Grüns – auf so heller Füllung wäre Weiß nicht lesbar. */
	--btn-fill:       rgba(30, 158, 74, 0.16);
	--btn-fill-hover: rgba(30, 158, 74, 0.26);
	--btn-text:       #14703A;
}

:root {
	--font-display: "Prata", Georgia, "Times New Roman", serif;

	/* Prata gibt es nur in einem einzigen Schnitt (400). Wird irgendwo
	   600 oder 700 verlangt, rechnet der Browser sich einen fetten
	   Schnitt selbst aus – das Ergebnis ist verschmiert und ungleich-
	   mäßig. Deshalb steht das Gewicht der Überschriftenschrift hier
	   an einer Stelle und wird überall darüber gesetzt. */
	--weight-display: 400;
	--font-body:    "Karla", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-mono:    "IBM Plex Mono", ui-monospace, Menlo, monospace;

	--radius:   8px;
	--radius-l: 12px;

	--wrap:     1080px; /* einheitlich mit der Fußzeile, keine Sonderbreite mehr dort */
	/* 210 statt ursprünglich 236: Die Inhaltsspalte wächst dadurch von
	   748 auf 790 px, die Karten von 175 auf 186. Bei 200 px wären es
	   188 gewesen — die zwei Pixel Unterschied sieht niemand, dem
	   Kalender in der Leiste fehlten sie dagegen spürbar.
	   Unter etwa 192 px ginge es ohnehin nicht: "Erotische Massagen"
	   und "Partnervermittlung" brauchen bei 15 px Schrift rund 140 px,
	   dazu Symbol, Abstände und Polster. */
	--sidebar:  210px;
	/* 168 statt 200: Damit passen neben der Seitenleiste vier Karten in
	   die Inhaltsspalte (748 px) statt drei. Gerechnet, nicht geschätzt –
	   auto-fill bleibt bei einer zu großen Mindestbreite stillschweigend
	   bei drei Spalten, ohne dass man den Grund sieht.
	   4 × 168 + 3 × 16 = 720 ≤ 748, fünf Spalten bräuchten 904. */
	--card-min: 168px;

	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 32px;
	--space-7: 48px;
	--space-8: 64px;
}

/* ------------------------------------------------------------------
   Grundlagen
------------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }

h1, h2, h3 {
	font-family: var(--font-display);
	font-weight: var(--weight-display);
	/* Serifenschrift: keine negative Laufweite, die Serifen brauchen
	   ihren Platz, sonst kleben die Buchstaben aneinander. */
	line-height: 1.25;
	letter-spacing: 0;
	color: var(--heading);
	margin: 0 0 var(--space-3);
}

h1 {
	font-size: clamp(24px, 3vw, 35px);
	overflow-wrap: break-word;
}
h2 { font-size: clamp(20px, 2.3vw, 26px); }
h3 { font-size: 17.5px; }

p { margin: 0 0 var(--space-4); }

:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 2px;
	border-radius: var(--radius);
}

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

.em-wrap {
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 0 var(--space-5);
}

/* ------------------------------------------------------------------
   Kopfzeile
------------------------------------------------------------------ */

.em-header {
	border-bottom: 1px solid var(--line);
	background: var(--bg);
	position: sticky;
	top: 0;
	z-index: 30;
}

.em-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding-top: var(--space-4);
	padding-bottom: var(--space-4);
}

.em-logo {
	display: inline-flex;
	align-items: center;
	color: var(--text);
	flex: 0 0 auto;
}
.em-logo:hover { color: var(--text); }

.em-logomark {
	display: block;
	height: 46px;
	width: auto;
}
.em-logomark .lg-word { fill: var(--logo-word); }
.em-logomark .lg-num  { fill: var(--accent); }

/* Zwei Farbebenen: die passende wird eingeblendet */
.em-logomark__light { display: none; }
[data-theme="light"] .em-logomark__dark  { display: none; }
[data-theme="light"] .em-logomark__light { display: inline; }

.em-logo__text {
	font-family: var(--font-display);
	font-weight: var(--weight-display);
	font-size: 19px;
	letter-spacing: 0.10em;
}
.em-logo__text span { color: var(--accent); }

@media (max-width: 560px) {
	.em-logomark { height: 32px; }
}

.em-header__actions {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	flex: 0 0 auto;
}

.em-header__link {
	font-size: 14px;
	color: var(--text-muted);
	white-space: nowrap;
}
.em-header__link:hover { color: var(--accent); }

/* ------------------------------------------------------------------
   Buttons – genau ein goldener pro Ansicht
------------------------------------------------------------------ */

.em-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font: inherit;
	font-size: 14px;
	padding: 10px 18px;
	border-radius: var(--radius);
	border: 1px solid transparent;
	cursor: pointer;
	background: none;
	color: var(--text);
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.em-btn--primary {
	background: var(--btn-fill);
	color: var(--btn-text);
	font-weight: 600;
}
.em-btn--primary:hover { background: var(--btn-fill-hover); color: var(--btn-text); }

.em-btn--outline {
	border-color: var(--accent);
	color: var(--accent);
}
.em-btn--outline:hover { background: var(--card); color: var(--accent); }

/* Profil/Anmelden in der Kopfzeile: fester Mindestplatz, damit der
   Knopf neben dem gefüllten goldenen nicht wie ein Anhängsel wirkt.
   Der Rahmen läuft bewusst über --line wie beim Modus-Umschalter und
   nicht über --accent: zwei goldene Rahmen nebeneinander haben sich
   im Dunkelmodus gegenseitig geschlagen. */
.em-header__actions .em-btn--outline {
	min-width: 130px;
	justify-content: center;
	padding: 10px 22px;
	font-weight: 600;
	letter-spacing: 0.01em;
	border-color: var(--line);
	color: var(--accent);
}
.em-header__actions .em-btn--outline:hover {
	border-color: var(--accent);
	background: var(--card);
}

.em-btn--quiet {
	border-color: var(--line);
	color: var(--text);
}
.em-btn--quiet:hover { background: var(--card); }

.em-btn--danger {
	border-color: var(--danger);
	color: var(--danger);
}

.em-theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Gleiche Größe wie die Glocke: zwei Symbolknöpfe nebeneinander,
	   die sich in der Größe unterscheiden, sehen nach Versehen aus. */
	width: 36px; height: 36px;
	flex: 0 0 36px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	color: var(--text-muted);
	background: none;
	cursor: pointer;
}
.em-theme-toggle:hover { color: var(--accent); border-color: var(--accent); }
.em-theme-toggle svg { width: 17px; height: 17px; }

/* ------------------------------------------------------------------
   Layout mit Seitenspalte
------------------------------------------------------------------ */

.em-layout {
	display: grid;
	min-width: 0;
	grid-template-columns: var(--sidebar) minmax(0, 1fr);
	/* 32 statt 48: der zweite Hebel neben der schmaleren Leiste. Das
	   Verschmälern allein hätte nur 9 px je Karte gebracht. */
	gap: var(--space-6);
	padding-top: var(--space-6);
	padding-bottom: var(--space-8);
}

.em-banner {
	margin-bottom: var(--space-5);
}

.em-banner__label {
	display: block;
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--text-faint);
	margin-bottom: var(--space-2);
	padding-left: 2px;
}

.em-banner img {
	width: 100%;
	height: auto;
	border-radius: var(--radius-l);
	border: 1px solid var(--line);
}

.em-sidebar__title {
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--text-faint);
	margin: 0 0 var(--space-2);
	padding-left: 10px;
}

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

.em-catnav__item a {
	display: flex;
	align-items: center;
	/* Enger gesetzt, damit die längsten Beschriftungen in die
	   schmalere Leiste passen. Die Schriftgröße bleibt bei 15 px –
	   kleiner wäre in einer Navigation schlecht lesbar. */
	gap: 10px;
	padding: 10px 10px;
	border-bottom: 1px solid var(--line-soft);
	border-left: 2px solid transparent;
	border-radius: 0;
	font-size: 15px;
	color: var(--text);
	transition: color .15s ease, background .15s ease;
}
.em-catnav__item a:hover {
	color: var(--text);
	background: var(--surface);
}
.em-catnav__item--active a {
	border-left-color: var(--accent);
	background: var(--surface);
	color: var(--text);
}
.em-catnav__item:last-child a { border-bottom: none; }

.em-catnav__icon {
	flex: 0 0 20px;
	width: 20px; height: 20px;
	color: var(--accent);
}
.em-catnav__icon svg { width: 100%; height: 100%; }

.em-catnav__label { flex: 1; min-width: 0; }

.em-catnav__count {
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--text-faint);
}

.em-catnav__more { color: var(--accent) !important; }

/* ------------------------------------------------------------------
   Hero
------------------------------------------------------------------ */

/*
 * Enger als zuvor (war jeweils --space-6).
 *
 * Unter der Überschrift summierten sich 32 px Polster, die Trennlinie
 * und noch einmal 32 px Abstand — dazu 16 px über der Zierlinie. Fast
 * 80 px Leere, bevor die erste Karte kam. Die Überschrift atmet auch
 * bei 24 px noch, der Blick erreicht die Inserate aber deutlich früher.
 */
.em-hero {
	padding-bottom: var(--space-5);
	border-bottom: 1px solid var(--line);
	margin-bottom: var(--space-5);
}

.em-hero__title { margin-bottom: var(--space-2); }

.em-hero__sub {
	color: var(--text-muted);
	font-size: 15px;
	/*
	 * Kein eigener Abstand nach unten mehr.
	 *
	 * Die Einleitung ist das letzte Element im Hero, darunter kommt
	 * bereits dessen Polster. Die 24 px hier lagen also obendrauf:
	 * zusammen mit Polster und Außenabstand standen rund 73 px
	 * zwischen Einleitung und "Neu & verführerisch". Genau die Lücke,
	 * die die Seite leer wirken ließ.
	 */
	margin-bottom: 0;
}

.em-search {
	display: flex;
	gap: var(--space-2);
	flex-wrap: wrap;
}

.em-search input[type="search"],
.em-search select {
	font: inherit;
	font-size: 14px;
	padding: 10px 12px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	color: var(--text);
}
.em-search input[type="search"] { flex: 2 1 220px; }
.em-search select { flex: 1 1 150px; }
.em-search input::placeholder { color: var(--text-faint); }

/* ------------------------------------------------------------------
   Inseratsraster
------------------------------------------------------------------ */

.em-section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-4);
	margin-bottom: var(--space-4);
}
.em-section-head h2 { margin: 0; }
/*
 * Der Weiterführungslink war grau und in Fließtextgröße — er sah aus
 * wie eine Beschriftung, nicht wie ein Weg. Kein Knopf daraus, aber
 * Gold, etwas mehr Gewicht und ein Pfeil.
 *
 * Der Pfeil kommt aus dem Stylesheet, nicht aus den Vorlagen: Es gibt
 * dreizehn Stellen mit .em-section-head, und dreizehnmal ein Zeichen
 * von Hand einzutragen hält keine zwei Änderungen durch.
 */
.em-section-head a {
	font-size: 13.5px;
	font-weight: 500;
	color: var(--accent);
	white-space: nowrap;
}
.em-section-head a::after {
	content: "→";
	display: inline-block;
	margin-left: 5px;
	transition: transform .15s ease;
}
.em-section-head a:hover { color: var(--accent-hover); }
.em-section-head a:hover::after { transform: translateX(3px); }

/*
 * Ausnahme: "Auswahl aufheben" im Eventkalender führt nicht weiter,
 * sondern nimmt etwas zurück. Ein Pfeil nach rechts wäre dort schlicht
 * falsch; der Link bleibt zurückhaltend grau.
 */
.em-section-head a.em-section-head__aktion {
	color: var(--text-muted);
	font-weight: 400;
}
.em-section-head a.em-section-head__aktion::after { content: none; }
.em-section-head a.em-section-head__aktion:hover { color: var(--text); }
.em-section-head__zusatz { color: var(--text-muted); font-size: .72em; }

/* ------------------------------------------------------------------
   Melden und Blockieren
------------------------------------------------------------------ */

/*
 * Bewusst kleiner und ohne Rahmen als "Nachricht senden" und "Folgen".
 * Diese beiden sind selten nötig und sollen nicht mit den Hauptknöpfen
 * konkurrieren — erst beim Darüberfahren werden sie deutlich.
 */
.em-still {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 10px;
	border: 0;
	border-radius: var(--radius);
	background: none;
	font: inherit;
	font-size: 13px;
	color: var(--text-faint);
	cursor: pointer;
}
.em-still:hover { color: var(--danger); background: var(--danger-soft); }
.em-still svg { width: 15px; height: 15px; }
.em-still.is-aktiv { color: var(--danger); }

.em-blockform { display: inline; margin: 0; }

/*
 * Eigene Zeile unter den Hauptknöpfen. Nebeneinander hätten sie bei
 * langen Namen und schmalen Fenstern in das Titelbild hineingeragt.
 */
.em-prof__still {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px;
	justify-content: flex-end;
	/*
	 * Zwei Ausgleiche, beide gegen den Innenabstand der Knöpfe:
	 *
	 * Rechts, damit der letzte Knopf bündig mit dem Kartenrand steht
	 * statt scheinbar eingerückt.
	 *
	 * Unten, weil das Raster die Kasten-Unterkanten aneinander
	 * ausrichtet — der Knopftext säße sonst um sein Polster höher als
	 * die Metazeile daneben.
	 */
	margin: 0 -10px -8px 0;
}

/* ------------------------------------------------------------------
   Glocke und Konto in der Kopfzeile
------------------------------------------------------------------ */

.em-glocke {
	position: relative;
	width: 36px; height: 36px;
	flex: 0 0 36px;
	/* Damit die überstehende Marke nicht beschnitten wird. */
	overflow: visible;
	display: grid; place-items: center;
	/* Sichtbarer Rahmen wie beim Modusknopf, damit die beiden
	   Symbolknöpfe als eine Familie lesbar sind. */
	border: 1px solid var(--line); border-radius: var(--radius);
	background: none; color: var(--text-muted); cursor: pointer;
}
.em-glocke:hover { background: var(--card); color: var(--text); border-color: var(--accent); }

/*
 * Liegt etwas an, wird der ganze Knopf hervorgehoben, nicht nur der
 * kleine Punkt darauf. Ein 8-px-Punkt am Rand einer Leiste voller
 * Knöpfe geht sonst leicht unter — der goldene Rahmen zieht den Blick
 * auf das Symbol selbst.
 */
.em-glocke.is-neu {
	border-color: var(--accent);
	color: var(--accent);
	background: var(--gold-soft);
}
.em-glocke.is-neu:hover { background: var(--card); }
.em-glocke[aria-expanded="true"] { background: var(--card); border-color: var(--line); }
.em-glocke svg { width: 19px; height: 19px; }
/*
 * Bordeaux statt Grün: dieselbe Familie wie Überschriften und Logo.
 * Der helle Rand hebt den Punkt vom Symbol ab, sonst verschwimmt er
 * mit der Glockenkontur.
 */
.em-glocke__punkt {
	position: absolute; top: 8px; right: 9px;
	width: 6px; height: 6px; border-radius: 50%;
	background: var(--accent-2);
	/* Rahmenfarbe = Knopfhintergrund, nicht Seitenhintergrund: Der Knopf
	   ist jetzt eingefärbt, ein heller Ring darauf wirkte wie ein Loch. */
	border: 2px solid transparent;
}

/*
 * Ab zwei Benachrichtigungen die Zahl statt des Punktes.
 *
 * Sie sitzt an der ÄUSSEREN Ecke und ragt über den Knopfrand hinaus.
 * Innen liegend deckte sie ein Drittel der Knopffläche ab und verdeckte
 * genau das Symbol, auf das sie hinweisen soll — von der Glocke war
 * kaum noch etwas zu sehen.
 */
.em-glocke__zahl {
	position: absolute; top: -6px; right: -6px;
	min-width: 15px; height: 15px; padding: 0 3px;
	display: grid; place-items: center;
	border-radius: 999px;
	background: var(--accent-2); color: #fff;
	/* Rand in Seitenfarbe: trennt die Marke vom goldenen Knopfrahmen. */
	border: 2px solid var(--bg);
	font-size: 9.5px; font-weight: 600; line-height: 1;
	font-family: var(--font-body);
	letter-spacing: 0;
}

.em-konto { position: relative; display: flex; align-items: center; }
.em-konto__knopf {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 4px 10px 4px 4px;
	border: 1px solid var(--line); border-radius: 999px;
	background: none; font: inherit; font-size: 13.5px; color: var(--text); cursor: pointer;
}
.em-konto__knopf:hover { background: var(--card); }
.em-konto__knopf[aria-expanded="true"] { background: var(--card); border-color: var(--accent); }
.em-konto__av {
	position: relative; width: 30px; height: 30px; border-radius: 50%;
	display: grid; place-items: center; color: #fff; font-weight: 600; font-size: 12px;
	flex: 0 0 30px;
}
.em-konto__av img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.em-konto__punkt {
	position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px;
	border-radius: 50%; background: var(--status-on); border: 2px solid var(--bg);
}
.em-konto__name {
	font-weight: 500; max-width: 130px;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.em-konto__pfeil { width: 13px; height: 13px; color: var(--text-faint); }

.em-drop {
	position: absolute; top: calc(100% + 9px); right: 0;
	min-width: 252px;
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: 14px;
	box-shadow: 0 16px 40px rgba(0, 0, 0, .16);
	padding: 6px;
	z-index: 60;
}
.em-drop[hidden] { display: none; }
.em-drop::before {
	content: ""; position: absolute; top: -6px; right: 18px;
	width: 11px; height: 11px; transform: rotate(45deg);
	background: var(--panel);
	border-left: 1px solid var(--line); border-top: 1px solid var(--line);
}
.em-drop__kopf {
	display: flex; align-items: center; gap: 10px;
	padding: 10px 12px 12px; margin-bottom: 4px;
	border-bottom: 1px solid var(--line-soft);
}
.em-drop__kopf b { display: block; font-size: 14.5px; font-family: var(--font-body); font-weight: 600; }
.em-drop__kopf > span > span { font-size: 12px; color: var(--text-muted); }
.em-drop__kopf .em-konto__av { width: 34px; height: 34px; flex: 0 0 34px; font-size: 14px; }

.em-drop a {
	display: flex; align-items: center; gap: 11px;
	padding: 10px 12px; border-radius: 9px;
	color: var(--text); font-size: 14px;
}
.em-drop a:hover { background: var(--card); color: var(--text); }
.em-drop a svg { width: 17px; height: 17px; color: var(--accent); flex: 0 0 17px; }
.em-drop__trenner { height: 1px; background: var(--line-soft); margin: 5px 8px; }
.em-drop a.ist-aus { color: var(--text-muted); }
.em-drop a.ist-aus svg { color: var(--text-faint); }
.em-drop__zahl {
	margin-left: auto;
	min-width: 20px; height: 20px; padding: 0 6px;
	border-radius: 999px; background: var(--accent-2); color: #fff;
	font-size: 11.5px; font-weight: 600; display: grid; place-items: center;
}

.em-drop--glocke { min-width: 292px; }
.em-drop__leer { padding: 26px 14px; margin: 0; text-align: center;
	color: var(--text-muted); font-size: 13.5px; }
.em-drop__zeile { display: flex; gap: 11px; padding: 10px 12px; border-radius: 9px; color: var(--text); }
.em-drop__zeile:hover { background: var(--card); }
.em-drop__zeile b { font-weight: 500; font-size: 14px; line-height: 1.35; font-family: var(--font-body); }
.em-drop__zeile span span { display: block; font-size: 12.5px; color: var(--text-muted); }
/*
 * Der Punkt sitzt auf der Höhe der ersten Textzeile.
 *
 * Vorher stand er über einen festen Außenabstand von 6 px da — der
 * passt zu genau einer Schriftgröße und rutschte sonst nach unten.
 * Jetzt ist der Punkt selbst so hoch wie die Titelzeile und zentriert
 * darin einen kleinen Kreis; das hält, egal wie groß der Titel wird.
 *
 * Die Farbe liegt auf "color" statt auf "background", damit der Kreis
 * im Pseudoelement sie über currentColor erbt.
 */
.em-drop__punkt {
	flex: 0 0 8px;
	width: 8px;
	height: 1.35em;
	margin-top: 0;
	display: flex;
	align-items: center;
	background: none;
	color: var(--accent-2);
}
.em-drop__punkt::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
}

/* Ungelesenes in Rot — der einzige Punkt, der etwas verlangt. */
.em-drop__zeile:not(.ist-gelesen) .em-drop__punkt { color: var(--danger); }
.em-drop__punkt--gut { color: var(--status-on); }
.em-drop__punkt--warn { color: var(--accent); }
.em-drop__punkt--stop { color: var(--danger); }

/*
 * Bereits gesehene Benachrichtigungen bleiben stehen, nur gedämpft.
 * Etwas, das man einmal gesehen hat und dann nie wiederfindet, ist so
 * gut wie nicht vorhanden — oft will man gerade das nachschlagen, was
 * gestern kam.
 */
.em-drop__zeile.ist-gelesen b { font-weight: 400; color: var(--text-muted); }
.em-drop__zeile.ist-gelesen .em-drop__punkt { color: var(--line); }

/* ------------------------------------------------------------------
   Suchleiste im Veranstaltungskalender
------------------------------------------------------------------ */

.em-calsuche {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0 0 var(--space-5);
	padding: 12px 14px;
	background: var(--gold-soft);
	border: 1px solid var(--gold-soft-line);
	border-radius: var(--radius);
}
.em-calsuche__feld { flex: 1 1 220px; min-width: 0; }
.em-calsuche__feld--region { flex: 0 1 200px; }
.em-calsuche input[type="search"],
.em-calsuche select {
	width: 100%;
	font: inherit;
	font-size: 14px;
	padding: 9px 12px;
	color: var(--text);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}
.em-calsuche select { padding-right: 28px; cursor: pointer; }
.em-calsuche input:focus-visible,
.em-calsuche select:focus-visible { border-color: var(--accent); }
.em-calsuche__weg { font-size: 13px; color: var(--accent); }

.em-calsuche__ergebnis { margin-bottom: var(--space-6); }
.em-calsuche__leer {
	margin: 0;
	padding: 22px;
	text-align: center;
	color: var(--text-muted);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-l);
}

/*
 * Hier stand früher eine Regel, die unter 560 px beide Felder auf volle
 * Breite zwang — daher die drei Zeilen untereinander. Die Handyansicht
 * regelt jetzt der Rasterblock weiter unten, an einer Stelle statt an
 * zweien.
 */

/* ------------------------------------------------------------------
   Eingrenzen auf Kategorie- und Regionsarchiven

   Knöpfe statt Auswahlfeld: Der ganze Vorrat steht sichtbar da, und
   ein Klick genügt. Der goldene Kasten drumherum entfällt — er hielt
   ein Formular zusammen, das es nicht mehr gibt.
------------------------------------------------------------------ */

.em-chips {
	display: flex;
	/*
	 * Eine Reihe, auch am großen Bildschirm.
	 *
	 * Umbrochen ergaben die dreizehn Knöpfe zwei Reihen und damit einen
	 * Block, der vor den Inseraten stand. In einer Zeile bleibt die
	 * Leiste eine Leiste; was nicht hineinpasst, holt man sich durch
	 * Schieben.
	 */
	flex-wrap: nowrap;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	gap: 8px;
	margin: 0 0 var(--space-5);

	/*
	 * Sichtbare Schiebeleiste.
	 *
	 * Vorher war sie ausgeblendet — am Telefon richtig, denn dort
	 * schiebt man mit dem Finger und sieht es an der Bewegung. Mit der
	 * Maus gibt es beides nicht: kein Wischen und kein Hinweis, dass
	 * rechts noch etwas liegt. Die Leiste ist der Hinweis.
	 */
	scrollbar-width: thin;
	scrollbar-color: var(--line-gold) transparent;
	padding-bottom: 10px;
}

.em-chips::-webkit-scrollbar { height: 7px; }
.em-chips::-webkit-scrollbar-track {
	background: var(--line-soft);
	border-radius: 999px;
}
.em-chips::-webkit-scrollbar-thumb {
	background: var(--line-gold);
	border-radius: 999px;
}
.em-chips::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/*
 * Auf Geräten ohne Mauszeiger bleibt sie unsichtbar. Dort schiebt der
 * Finger, und eine Leiste wäre nur eine Zeile, die Platz kostet.
 */
@media (hover: none) {
	.em-chips { scrollbar-width: none; padding-bottom: 3px; }
	.em-chips::-webkit-scrollbar { display: none; }
}

.em-chip { flex: none; }

.em-chip {
	display: inline-flex;
	align-items: center;
	padding: 7px 15px;
	border-radius: 999px;
	border: 1px solid var(--line);
	background: var(--surface);
	color: var(--text-muted);
	font-size: 13.5px;
	line-height: 1.4;
	text-decoration: none;
	white-space: nowrap;
	transition: color .15s ease, border-color .15s ease;
}
.em-chip:hover { color: var(--heading); border-color: var(--accent-2); }

/* Der gewählte Stand in Gold — dieselbe Farbe wie überall, wo etwas
   ausgewählt ist. */
.em-chip.ist-aktiv {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--on-accent);
	font-weight: 600;
}

.em-chips__treffer {
	margin: calc(var(--space-5) * -1 + 4px) 0 var(--space-5);
	font-size: 13px;
	color: var(--text-muted);
}

@media (max-width: 900px) {
	/*
	 * Auf dem Telefon eine rollende Zeile statt eines Blocks aus vier
	 * Reihen: Elf Regionen umbrochen füllten ein Drittel des
	 * Bildschirms, bevor das erste Inserat kam.
	 *
	 * Die negativen Außenabstände holen das Polster der Seite heraus,
	 * das Polster innen setzt es für den ersten und letzten Knopf
	 * wieder — sonst sähe der letzte sichtbare Knopf aus, als wäre er
	 * der letzte.
	 */
	/*
	 * Auf dem Telefon rollt die Reihe bis an den Bildrand: Die
	 * negativen Außenabstände holen das Polster der Seite heraus, das
	 * Polster innen setzt es für den ersten und letzten Knopf wieder.
	 * Ohne das sähe der letzte sichtbare Knopf aus, als wäre er der
	 * letzte.
	 */
	.em-chips {
		margin-left: -20px;
		margin-right: -20px;
		padding: 2px 20px 5px;
	}
	.em-chips::-webkit-scrollbar { display: none; }
	.em-chip { min-height: 36px; }
}

.em-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--card-min), 1fr));
	/* Engerer Abstand als vorher: Bei vier schmaleren Karten wirken
	   24 px Luft wie Löcher im Raster. */
	gap: var(--space-4);
	list-style: none;
	margin: 0;
	padding: 0;
}

.em-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 14px;
	padding: 10px 10px 12px;
	transition: border-color .15s ease, transform .15s ease;
}
.em-card:hover {
	border-color: var(--line-strong, var(--accent));
	transform: translateY(-2px);
}
.em-card__link { display: block; }

.em-card__media {
	position: relative;
	aspect-ratio: 3 / 4;
	border-radius: 10px;
	overflow: hidden;
	background: var(--card);
	transition: box-shadow .2s ease;
}
.em-card:hover .em-card__media { box-shadow: var(--shadow-glow); }

.em-card__media img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
}
.em-card:hover .em-card__media img { transform: scale(1.04); }

.em-card__placeholder {
	width: 100%; height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text-faint);
}
.em-card__placeholder svg { width: 28px; height: 28px; }

/* Badges auf dem Kartenbild */

.em-badge {
	position: absolute;
	max-width: calc(100% - 18px);
	font-size: 10px;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	font-weight: 500;
	line-height: 1.4;
	padding: 5px 11px;
	border-radius: 999px;
	background: rgba(10, 4, 6, 0.78);
	backdrop-filter: blur(3px);
	border: 1px solid rgba(255, 255, 255, 0.10);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.em-badge--region {
	top: 9px;
	left: 9px;
	color: #F6EDE2;
}

.em-badge--cat {
	bottom: 9px;
	right: 9px;
	color: #E59AAC;
	border-color: rgba(229, 154, 172, 0.55);
}



.em-card__title {
	font-family: var(--font-body);
	/* 13.5 statt 14.5: Auf der schmaleren Karte passen dadurch rund vier
	   Zeichen mehr in die Zeile, bei zwei Zeilen also knapp zehn.
	   Die Größe bleibt bewusst unverändert. */
	font-size: 13.5px;
	/*
	 * Mehr Gewicht statt mehr Größe. Nach dem Foto soll der Titel die
	 * zweite Blickstufe sein; bei 13.5 px und Gewicht 500 ging er
	 * dafür unter. Karla liefert 600 als eigenen Schnitt, der Browser
	 * muss also nichts hochrechnen.
	 */
	font-weight: 600;
	color: var(--card-title, var(--heading));
	margin: 11px 2px 0;
	line-height: 1.32;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	transition: color .15s ease;
}
.em-card__link:hover .em-card__title { color: var(--accent); }

.em-card__author {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 6px 2px 0;
	font-size: 12.5px;
	color: var(--text-muted);
}
.em-card__author::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--status-off);
	flex: 0 0 7px;
}
.em-card__author.is-online::before {
	background: var(--status-on);
	box-shadow: 0 0 0 3px var(--status-on-soft);
}
.em-card__author a { color: inherit; }
.em-card__author a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 10px;
	margin-right: 6px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	font-size: 14px;
	color: var(--text-muted);
}
.page-numbers:hover { color: var(--accent); border-color: var(--accent); }
.page-numbers.current {
	border-color: var(--accent);
	color: var(--accent);
}
.page-numbers.dots { border-color: transparent; }

.em-empty {
	border: 1px dashed var(--line);
	border-radius: var(--radius-l);
	padding: var(--space-7) var(--space-5);
	text-align: center;
	color: var(--text-muted);
}

/* ------------------------------------------------------------------
   Einzelinserat
------------------------------------------------------------------ */

.em-single__head { margin-bottom: var(--space-5); }

.em-single__meta {
	font-size: 13px;
	color: var(--text-muted);
	margin: 0;
}

.em-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: var(--space-3);
	margin-bottom: var(--space-6);
	max-width: 720px;
}
.em-gallery img {
	border-radius: var(--radius-l);
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
}
.em-gallery__main {
	grid-column: 1 / -1;
	max-width: 420px;
}
.em-gallery__main img { aspect-ratio: 4 / 5; }

.em-facts {
	list-style: none;
	margin: 0 0 var(--space-6);
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--space-3);
}

/* Zielgruppen einer Veranstaltung */

.em-zielgruppen { margin: 0 0 var(--space-6); }
.em-zielgruppen__titel {
	margin: 0 0 var(--space-3);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-faint);
}
.em-zielgruppen__liste {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-3);
	list-style: none;
	margin: 0;
	padding: 0;
}
.em-zielgruppen__liste li {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 13px 7px 10px;
	border-radius: 999px;
	background: var(--gold-soft);
	border: 1px solid var(--gold-soft-line);
	font-size: 14px;
}
.em-zielgruppen__liste svg {
	width: 15px;
	height: 15px;
	flex: 0 0 15px;
	color: var(--status-on);
}

.em-facts li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-4);
	padding: 12px 16px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	font-size: 14px;
}

.em-facts__label {
	color: var(--text);
	font-weight: 500;
	white-space: nowrap;
}

.em-facts__value {
	text-align: right;
	color: var(--text-muted);
	min-width: 0;
	word-break: break-word;
}

.em-prose {
	max-width: 68ch;
	padding-top: var(--space-2);
}

/* Das Konto-Dashboard bringt eine eigene Spaltenaufteilung mit und
   erstickt in der 68 Zeichen breiten Lesespalte. */
.em-prose--breit { max-width: none; }
.em-prose strong { font-weight: 500; }

/*
 * Links im Fließtext.
 *
 * Global steht a { color: inherit; text-decoration: none } – gut für
 * Karten und Navigation, im Fließtext aber fatal: Dort war ein Link von
 * normalem Text nicht zu unterscheiden. Die höhere Spezifität von
 * .em-prose a sticht die globale Regel, unabhängig von der Reihenfolge.
 *
 * Die Unterstreichung erscheint erst beim Zeigen. Farbe allein ist kein
 * verlässliches Merkmal für Menschen mit Farbsehschwäche – wenn Dir das
 * später wichtig wird, genügt es, die Unterstreichung aus der
 * :hover-Regel in die Grundregel zu ziehen.
 */
/*
 * ":not(.em-prose--breit)" nimmt das Konto-Dashboard aus.
 *
 * Es wird in page.php ebenfalls in .em-prose gerendert, und die Regel
 * hat dort seit 0.75.0 sämtliche Links gold gefärbt — auch die
 * Inseratstitel in der Liste. Gedacht war sie für Fließtext:
 * Startseite, Kategorie- und Regionstexte, Rechtsseiten.
 */
.em-prose:not(.em-prose--breit) a {
	color: var(--accent);
	text-decoration: none;
}
.em-prose:not(.em-prose--breit) a:hover {
	color: var(--accent-hover);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/*
 * Ausnahme für Knöpfe im Fließtext.
 *
 * .em-prose a hat höhere Spezifität als .em-btn--primary und würde
 * einem Knopf im Text die Schriftfarbe überschreiben – goldene Schrift
 * auf grüner Füllung. Diese Regel holt die Knopffarben zurück.
 */
.em-prose a.em-btn { color: var(--text); text-decoration: none; }
.em-prose a.em-btn--primary,
.em-prose a.em-btn--primary:hover { color: var(--btn-text); text-decoration: none; }
.em-prose a.em-btn--outline,
.em-prose a.em-btn--outline:hover { text-decoration: none; }

/* Ein Knopf am Absatzende braucht Luft nach oben. */
.em-prose .em-btn { margin-top: var(--space-2); }

/* ------------------------------------------------------------------
   Barrierefreiheit
------------------------------------------------------------------ */

/* Nur für Screenreader – etwa der Textinhalt hinter einem Bild-Impressum. */
.em-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Bild-Rechtstexte: helle/dunkle Fassung je nach Modus.
   Ausgangszustand ist dunkel (kein data-theme-Attribut gesetzt),
   siehe Farbsystem oben – dieselbe Logik wie beim Logo. */
.em-legal-image { max-width: 300px; margin: 0 0 var(--space-5); }
.em-legal-image img { display: block; width: 100%; height: auto; }
.em-legal-image .is-light { display: none; }
.em-legal-image .is-dark  { display: block; }
[data-theme="light"] .em-legal-image .is-light { display: block; }
[data-theme="light"] .em-legal-image .is-dark  { display: none; }

/* ------------------------------------------------------------------
   Fußzeile
------------------------------------------------------------------ */

.em-footer {
	border-top: 1px solid var(--line);
	background: var(--panel);
	font-size: 13.5px;
	color: var(--text-muted);
}

.em-footer__top {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	column-gap: var(--space-7);
	row-gap: var(--space-6);
	align-items: start;
	padding: var(--space-6) 0;
}

.em-footer__cols {
	display: flex;
	flex-wrap: wrap;
	/* Fester, garantiert gleicher Abstand zwischen den drei Spalten –
	   unabhängig davon, wie lang der Text in jeder Spalte ist. */
	gap: var(--space-6) var(--space-7);
}
.em-footer__col { flex: 0 0 auto; min-width: 110px; }

/* Logo + Kurztext */
.em-footer__brand {
	max-width: 380px;
}
.em-footer__logo { display: inline-flex; margin-bottom: var(--space-3); }
.em-footer__logo .em-logomark { height: 34px; }
.em-footer__text {
	margin: 0;
	line-height: 1.6;
}

/* Die drei Linkspalten teilen sich den Abstand über .em-footer__cols;
   hier nur noch die Feinheiten je Spalte. */
.em-footer__col { min-width: 0; }

.em-footer__heading {
	margin: 0 0 var(--space-3);
	font-family: var(--font-display);
	font-size: 12.5px;
	font-weight: var(--weight-display);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--accent-2);
}
.em-footer__links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}
.em-footer__links a {
	color: var(--text-muted);
	text-decoration: none;
	white-space: nowrap;
}
.em-footer__links a:hover {
	color: var(--accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.em-footer__bottom {
	border-top: 1px solid var(--line);
	padding: var(--space-3) 0;
	font-size: 12.5px;
}

@media (max-width: 900px) {
	.em-footer__top { justify-content: flex-start; }
	.em-footer__brand { flex: 1 1 100%; max-width: none; }
}

@media (max-width: 560px) {
	.em-footer__cols { gap: var(--space-5) var(--space-6); }
	.em-footer__col { flex: 1 1 45%; }
}

/* ------------------------------------------------------------------
   Mobil
------------------------------------------------------------------ */

@media (max-width: 900px) {
	.em-layout {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-6);
	}

	/*
	 * Kategorien entfallen mobil ganz — sie stehen in der unteren
	 * Leiste. Vorher lagen sie als aufklappbarer Kasten über den
	 * Inseraten, also über dem, wofür die Leute kommen.
	 */
	.em-sidebar__kategorien { display: none; }

	/*
	 * Auf der Inseratsseite ruft die rechte Leiste am Ende zusätzlich
	 * die Seitenleiste auf. Deren einziger Inhalt ist dort die
	 * Kategorieliste — die Veranstaltungen und die Werbung hängt
	 * sidebar.php nur auf der Startseite ein, und die hat keine rechte
	 * Leiste. Sind die Kategorien mobil ausgeblendet, bleibt also eine
	 * leere Hülle, der .em-rail .em-sidebar Rahmen, Hintergrund und
	 * Polster gibt: genau der Balken unter dem Eventkalender.
	 */
	.em-rail .em-sidebar { display: none; }

	/*
	 * Veranstaltungen und Werbung unter die Inserate. Die Leiste ist
	 * im Markup das erste Kind und stünde sonst oben; im Raster
	 * genügt die Reihenfolge, das Markup bleibt für Vorleseprogramme
	 * in seiner sinnvollen Ordnung.
	 */
	.em-sidebar { order: 2; }
	.em-sidebar__extra { display: flex; flex-direction: column; gap: var(--space-6); }

	.em-header__link--hide-mobile { display: none; }
}

@media (max-width: 560px) {
	.em-headsearch select { display: none; }
	.em-rail { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}
}

/* ==================================================================
   Kopfzeilen-Suche
================================================================== */

.em-headsearch {
	display: flex;
	align-items: stretch;
	/*
	 * Die Mindestbreite muss die Summe der drei Teile tragen:
	 * Suchfeld 165 + Auswahl 148 + Abstand 6 + Lupe 46 = 365 px.
	 * Bei 330 px war die Leiste schmäler als ihr Inhalt, und weil sie
	 * runde Ecken hat und deshalb außen abschneidet, wurde die Lupe
	 * angeschnitten.
	 */
	/*
	 * Schmaler als bisher (war 380–500), weil Glocke und Konto seit
	 * 0.89.0 in derselben Zeile stehen. Gerechnet: Logo 210 + Suche 340
	 * + Modus 38 + Inseratsknopf 165 + Glocke 38 + Konto 150 + Lücken 70
	 * = 1011 px bei 1032 px Inhaltsbreite.
	 */
	/*
	 * 260 statt 320 als Untergrenze: Vorher war die Leiste unter ihrer
	 * Wunschbreite unnachgiebig, also musste die Kopfzeile bei jedem
	 * schmäleren Fenster umbrechen — die Suche sprang auf eine eigene
	 * Zeile, obwohl seitlich noch Platz war. Jetzt gibt sie zwischen
	 * 340 und 260 px nach, und erst darunter wird umgebrochen.
	 *
	 * Warum nicht weiter herunter: Auswahl 126 + Abstand 6 + Lupe 44
	 * = 176 px sind fest. Bei 260 bleiben dem Eingabefeld 84 px, in
	 * denen der Platzhalter noch anlesbar ist. Darunter stünde dort
	 * nur noch "Wonach…".
	 */
	flex: 1 1 340px;
	min-width: 260px;
	max-width: 340px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 999px;
	overflow: hidden;
	transition: border-color .15s ease;
}
/*
 * Beim Hineinklicken wird nur der äußere Rahmen kräftiger. Die Dicke
 * kommt über einen Schatten in derselben Farbe statt über border-width:
 * Ein Wechsel von 1 auf 2 px würde den Inhalt der Leiste um einen Pixel
 * verschieben, weil der Rahmen zum Kasten zählt. Der Schatten liegt
 * außerhalb und verschiebt nichts.
 */
.em-headsearch:focus-within {
	border-color: var(--accent);
	box-shadow: 0 0 0 1px var(--accent);
}

/*
 * Die Felder in der Leiste bekommen keinen eigenen Rahmen mehr. Der
 * globale Fokusrahmen stand 2 px über den Rand hinaus und wurde vom
 * overflow: hidden der Leiste oben und unten abgeschnitten – daher der
 * gerade schwarze Balken. Alle anderen Stellen der Seite behalten ihn.
 */
.em-headsearch input[type="search"]:focus-visible,
.em-headsearch select:focus-visible,
.em-headsearch__go:focus-visible {
	outline: none;
}

/*
 * Beide Felder kleiner als der Fließtext, damit "Wonach suchst Du?"
 * samt Fragezeichen und "Alle Regionen" vollständig hineinpassen.
 *
 * Achtung: Eine eigene Regel weiter oben hatte hier keine Wirkung –
 * dieser gemeinsame Block steht später im Stylesheet und gewinnt bei
 * gleicher Spezifität. Deshalb stehen die Größen jetzt hier.
 */
.em-headsearch input[type="search"],
.em-headsearch select {
	font: inherit;
	font-size: 13px;
	background: none;
	border: 0;
	color: var(--text);
	padding: 10px 12px;
	min-width: 0;
}
.em-headsearch input[type="search"] {
	flex: 1 1 auto;
	/*
	 * Ohne Untergrenze. Die feste Breite von 140 px war es, die das
	 * Nachgeben der ganzen Leiste verhinderte: Ein Kind, das nicht
	 * schrumpft, hält auch den Kasten darüber auf seiner Breite fest.
	 * Die Grenze steht jetzt einmal außen an .em-headsearch (260 px),
	 * innen regelt text-overflow den Rest.
	 */
	min-width: 0;
	padding-right: 6px;
	text-overflow: ellipsis;
}
.em-headsearch select {
	flex: 0 0 auto;
	width: 126px;
	max-width: 126px;
	padding-right: 26px;
	border-left: 1px solid var(--line);
	color: var(--text-muted);
	cursor: pointer;
	margin-right: 6px;
}
.em-headsearch input::placeholder { color: var(--text-faint); }

.em-headsearch__go {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	border: 0;
	background: var(--accent);
	color: var(--on-accent);
	cursor: pointer;
}
.em-headsearch__go:hover { background: var(--accent-hover); }
.em-headsearch__go svg { width: 18px; height: 18px; }

/* ==================================================================
   Inseratsseite: drei Spalten
================================================================== */

.em-layout--single {
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: var(--space-6);
}

.em-single__price {
	font-family: var(--font-mono);
	font-size: 21px;
	color: var(--accent);
	margin: 0 0 var(--space-5);
}

/*
 * Zwischenüberschriften im Inserat — "Beschreibung", "Tags" und so
 * weiter. 16 statt 19: Sie sollen den Abschnitt benennen, nicht mit
 * dem Titel des Inserats konkurrieren.
 */
.em-single__h2 {
	font-size: 16px;
	margin-bottom: var(--space-3);
}

.em-rail {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}

/* Autorenbox */

.em-author {
	background: var(--surface);
	border: 1px solid var(--line-gold);
	border-radius: var(--radius-l);
	padding: var(--space-5);
}

.em-author__head {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin-bottom: var(--space-4);
}

.em-author__avatar img {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: cover;
	border: 1px solid var(--line);
}

.em-author__name {
	font-family: var(--font-display);
	font-weight: var(--weight-display);
	font-size: 18px;
	margin: 0 0 2px;
	color: var(--text);
}

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

/* Name, Status und Profillink stehen untereinander –
   nebeneinander bricht der Block bei langen Namen um. */
.em-author__link {
	display: inline-block;
	font-size: 13px;
	color: var(--accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.em-contact {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 14px;
	margin-bottom: var(--space-2);
	border: 1px solid var(--gold-soft-line);
	border-radius: var(--radius);
	background: var(--gold-soft);
	font-family: var(--font-mono);
	font-size: 14px;
	color: var(--text);
	word-break: break-all;
}
.em-contact:hover { border-color: var(--accent); color: var(--text); }
.em-contact svg { width: 17px; height: 17px; flex: 0 0 17px; color: var(--accent); }
.em-contact--web { font-family: var(--font-body); }

.em-author__cta {
	width: 100%;
	justify-content: center;
	margin-top: var(--space-2);
}

.em-author__hint {
	background: var(--card);
	border-radius: var(--radius);
	padding: 12px 14px;
	font-size: 14px;
	color: var(--text);
	margin: 0;
}

.em-author__register {
	display: block;
	text-align: center;
	font-size: 12.5px;
	color: var(--text-muted);
	margin-top: var(--space-3);
}

/* Bilderstrecke */

.em-shots {
	margin: 0 0 var(--space-6);
	background: var(--surface);
	border: 1px solid var(--line-gold);
	border-radius: var(--radius-l);
	overflow: hidden;
}

.em-shots__main {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: var(--card);
	cursor: zoom-in;
	line-height: 0;
	position: relative;
}

.em-shots__main img {
	width: 100%;
	height: auto;
	max-height: 620px;
	object-fit: cover;
	display: block;
	transition: opacity .2s ease;
}
.em-shots__main:hover img { opacity: .92; }

.em-shots__expand {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 38px;
	height: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius);
	background: rgba(10, 4, 6, 0.72);
	border: 1px solid rgba(255, 255, 255, 0.14);
	color: #F6EDE2;
}
.em-shots__expand svg { width: 17px; height: 17px; }

.em-shots__thumbs {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--space-2);
	padding: var(--space-3);
	background: var(--surface);
	border-top: 1px solid var(--line);
}

.em-shots__thumb {
	flex: 0 0 auto;
	width: 132px;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--card);
	cursor: zoom-in;
	line-height: 0;
	transition: border-color .15s ease, opacity .15s ease;
}
.em-shots__thumb img {
	width: 100%;
	height: 96px;
	object-fit: cover;
	display: block;
}
.em-shots__thumb:hover { border-color: var(--accent); opacity: .9; }

@media (max-width: 560px) {
	.em-shots__thumb { width: 96px; }
	.em-shots__thumb img { height: 72px; }
	.em-shots__main img { max-height: 420px; }
}

/* Vollbild */

.em-lightbox {
	position: fixed;
	inset: 0;
	z-index: 200;
	background: rgba(8, 3, 5, .93);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-3);
	padding: var(--space-6) var(--space-5);
}
.em-lightbox[hidden] { display: none; }

.em-lightbox__frame {
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-3);
}

.em-lightbox img {
	max-width: min(78vw, 680px);
	max-height: 74vh;
	width: auto;
	height: auto;
	border-radius: var(--radius-l);
}

.em-lightbox__count {
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--text-muted);
}

.em-lightbox__close {
	position: absolute;
	top: 16px;
	right: 20px;
	width: 44px;
	height: 44px;
	font-size: 26px;
	line-height: 1;
	border: 1px solid var(--line);
	border-radius: 50%;
	background: var(--bg);
	color: var(--text);
	cursor: pointer;
}
.em-lightbox__close:hover { border-color: var(--accent); color: var(--accent); }

.em-lightbox__nav {
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--line);
	border-radius: 50%;
	background: var(--bg);
	color: var(--text);
	cursor: pointer;
}
.em-lightbox__nav:hover { border-color: var(--accent); color: var(--accent); }
.em-lightbox__nav[hidden] { display: none; }
.em-lightbox__nav svg { width: 20px; height: 20px; }

/* Profilbild als Auslöser */

.em-author__avatar-btn {
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
	line-height: 0;
	border-radius: 50%;
}
.em-author__avatar-btn:hover img { border-color: var(--accent); }

@media (max-width: 640px) {
	.em-lightbox { padding: var(--space-5) var(--space-2); }
	.em-lightbox img { max-width: 92vw; max-height: 68vh; }
	.em-lightbox__nav { width: 38px; height: 38px; }
}

/* Tags */

.em-tags {
	/*
	 * 24 statt 48 nach unten. Der Kasten bekommt seine Höhe aus dem
	 * Inhalt; ein großer Außenabstand am letzten Element addiert sich
	 * auf das Polster und lässt ihn unten leer wirken — besonders bei
	 * wenigen Tags, wo darüber ohnehin kaum etwas steht.
	 */
	margin: var(--space-5) 0 var(--space-5);
	padding-top: var(--space-4);
	border-top: 1px solid var(--line);
}

.em-tags__label {
	display: block;
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--text-faint);
	margin-bottom: var(--space-3);
}

.em-tags ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.em-tags li {
	font-size: 13px;
	color: var(--text-muted);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: 5px 13px;
}

.em-related { margin-top: var(--space-7); }

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

   Die Einzelansicht hat nur noch zwei Spalten: Inhalt und rechte
   Leiste mit Autorenbox, Anzeige und Kategorien. Unter 980 Pixeln
   rutscht die Leiste unter den Inhalt.
------------------------------------------------------------------ */

@media (max-width: 980px) {
	.em-layout--single { grid-template-columns: minmax(0, 1fr); }
	.em-rail { flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
	.em-rail > * { flex: 1 1 260px; }
}

/*
 * Umbruch erst bei 1000 px statt bei 1320.
 *
 * Gerechnet für die angemeldete Kopfzeile, die die volle ist:
 * Logo 210 + Modus 38 + Inseratsknopf 165 + Glocke 38 + Konto 150
 * = 601 px fest, dazu fünf Lücken à 16 = 80, macht 681 px.
 * Bei 1000 px Fensterbreite bleiben nach den Polstern der Hülle
 * (2 × 24) noch 952 px Inhalt, also 271 px für die Suche — knapp über
 * deren Untergrenze von 260. Darunter reicht der Platz nicht mehr,
 * dort ist die eigene Zeile richtig.
 */
@media (max-width: 1000px) {
	.em-header__inner { flex-wrap: wrap; row-gap: var(--space-3); }
	.em-headsearch { order: 3; flex-basis: 100%; max-width: none; min-width: 0; }
}

@media (max-width: 560px) {
	.em-headsearch select { display: none; }
	.em-rail { flex-direction: column; }

	/* Profil und Inserat aufgeben stehen auf dem Handy nebeneinander –
	   mit den vollen Polstern passen sie sonst nicht in eine Zeile. */
	.em-header__actions .em-btn { padding: 9px 12px; font-size: 13.5px; }
	.em-header__actions { gap: var(--space-2); }
}

/* In der rechten Leiste steht die Kategorieliste kompakter */
.em-rail .em-sidebar {
	background: var(--surface);
	border: 1px solid var(--line-gold);
	border-radius: var(--radius-l);
	padding: var(--space-4);
}
.em-rail .em-sidebar__title { margin-bottom: var(--space-3); }

/* Druckansicht: Hintergründe entfallen, deshalb Textfarben festlegen */
@media print {
	.em-header, .em-rail, .em-actions, .em-related, .em-lightbox { display: none; }
	.em-layout--single { display: block; }
	.em-panel { border: 1px solid #999; }
	body, .em-panel { background: #fff !important; color: #111 !important; }
	h1, h2, h3, .em-facts__label, .em-facts__value { color: #111 !important; }
}

/* ==================================================================
   Abgesetzte Inhaltsfläche
================================================================== */

.em-panel {
	background: var(--panel);
	border: 1px solid var(--line-gold);
	border-radius: 16px;
	padding: var(--space-6);
	margin-bottom: var(--space-6);
}

.em-single__stats {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	font-size: 12.5px;
	color: var(--text-faint);
	margin: 0 0 var(--space-3);
}
.em-single__stats span + span::before {
	content: "·";
	margin-right: var(--space-3);
	color: var(--line);
}

/* Aktionsleiste */

.em-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-top: var(--space-4);
}

/*
 * Bewusst klein.
 *
 * Merken, Teilen und Melden sind Nebenhandlungen — niemand kommt auf
 * ein Inserat, um es zu melden. Vorher hatten sie die Maße eines
 * Hauptknopfes und standen damit gleichrangig neben Titel und Bildern.
 */
.em-action {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font: inherit;
	font-size: 12.5px;
	/* Zeilenhöhe festgelegt statt geerbt: Sonst schlägt der Fließtext
	   mit 1.6 durch und macht den Knopf wieder fünf Pixel höher. */
	line-height: 1.5;
	padding: 6px 10px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	color: var(--text-muted);
	cursor: pointer;
	transition: color .15s ease, border-color .15s ease;
}
.em-action:hover { color: var(--text); border-color: var(--border-hover, var(--accent-2)); }
.em-action svg { width: 14px; height: 14px; }
.em-action.is-active { color: var(--accent); border-color: var(--accent); }
.em-action.is-active svg { fill: var(--accent); }
.em-action[disabled] { opacity: .6; cursor: default; }

/* Meldeformular */

.em-report {
	margin-top: var(--space-4);
	padding: var(--space-4);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-l);
	max-width: 480px;
}
.em-report[hidden] { display: none; }

.em-report__title {
	font-size: 14px;
	font-weight: 500;
	margin: 0 0 var(--space-3);
	color: var(--text);
}

.em-report select,
.em-report textarea {
	font: inherit;
	font-size: 14px;
	width: 100%;
	padding: 9px 12px;
	margin-bottom: var(--space-3);
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	color: var(--text);
}
.em-report textarea { resize: vertical; }

.em-report__buttons { display: flex; gap: var(--space-2); }

.em-note {
	margin: var(--space-4) 0 0;
	padding: 11px 14px;
	background: var(--accent-2-soft);
	border-radius: var(--radius);
	font-size: 14px;
	color: var(--text);
}

/* Verlinkte Werte im Faktenraster */

.em-facts__value a {
	color: var(--accent-2);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.em-facts__value a:hover { color: var(--accent); }

.em-layout > * { min-width: 0; }
.em-single, .em-panel { min-width: 0; }

/* ==================================================================
   Farbige Kategorie-Icons
================================================================== */

.em-catnav__icon { color: var(--cat-color, var(--accent)); }

.em-catnav__item a:hover .em-catnav__icon,
.em-catnav__item--active .em-catnav__icon {
	color: var(--cat-color, var(--accent));
	filter: brightness(1.18);
}

.em-catnav__item--active a { border-left-color: var(--cat-color, var(--accent)); }

[data-theme="light"] .em-catnav__icon { filter: brightness(0.68) saturate(1.1); }
[data-theme="light"] .em-catnav__item a:hover .em-catnav__icon,
[data-theme="light"] .em-catnav__item--active .em-catnav__icon { filter: brightness(0.58) saturate(1.15); }

/* Preis-Kästchen im Faktenraster */

.em-facts__item--price {
	border-color: var(--accent);
	background: var(--card);
}

/*
 * Telefon und Website in der Faktenliste: dieselbe goldene Note wie die
 * Kontaktknöpfe weiter unten, damit erkennbar ist, dass es sich um
 * dieselben Angaben handelt und nicht um zwei verschiedene.
 */
.em-facts__item--kontakt {
	background: var(--gold-soft);
	border-color: var(--gold-soft-line);
}
.em-facts__item--kontakt .em-facts__value a {
	color: var(--accent);
	font-weight: 600;
	text-decoration: none;
}
.em-facts__item--kontakt .em-facts__value a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}
.em-facts__item--price .em-facts__value {
	font-family: var(--font-mono);
	font-weight: 500;
	color: var(--accent);
	font-size: 15px;
}

/* Anklickbare Tags */

.em-tags li { padding: 0; border: 0; background: none; }

.em-tags li a {
	display: inline-block;
	font-size: 13px;
	color: var(--text-muted);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: 6px 14px;
	transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.em-tags li a:hover {
	color: var(--on-accent);
	background: var(--accent);
	border-color: var(--accent);
}

/* ==================================================================
   Akzente in Burgunder-Rosé
================================================================== */

/*
 * Hier stand bis 0.79.0 ein Punkt hinter jeder Abschnittsüberschrift
 * (content: "." in Burgunder-Rosé). Auf Wunsch entfernt — bei
 * Kategorienamen wie "Escorts." wirkte er wie ein Tippfehler statt wie
 * ein Gestaltungsmittel.
 */

.em-hero__title::after {
	content: "";
	display: block;
	width: 54px;
	height: 3px;
	/* 12 statt 16: Die Zierlinie gehört zur Überschrift und soll wie
	   ein Teil von ihr sitzen, nicht wie ein eigener Absatz. */
	margin-top: var(--space-3);
	border-radius: 3px;
	background: var(--accent-2);
}

.em-sidebar__title,
.em-tags__label,
.em-banner__label { color: var(--accent-2); }

.em-catnav__count {
	background: var(--accent-2-soft);
	color: var(--accent-2);
	border-radius: 999px;
	padding: 2px 9px;
	font-size: 11px;
}




/* Gelieferte Icons als Rastergrafik: bringen ihre Farbe selbst mit,
   deshalb keine Einfärbung und keine Aufhellung im Hellmodus. */
.em-catnav__icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.em-catnav__icon--raster,
[data-theme="light"] .em-catnav__icon--raster,
.em-catnav__item a:hover .em-catnav__icon--raster,
.em-catnav__item--active .em-catnav__icon--raster {
	filter: none;
}

@media (max-width: 560px) {
	.em-badge { font-size: 9px; padding: 3px 7px; }
	.em-badge--cat { max-width: 70%; }
	.em-badge--region { max-width: 70%; }
}

/* ==================================================================
   Veranstaltungen
================================================================== */

.em-events {
	background: var(--surface);
	border: 1px solid var(--line-gold);
	border-radius: var(--radius-l);
	/*
	 * 12 statt 16 px. In der auf 200 px verschmälerten Seitenleiste
	 * zählt jeder Pixel: Innen bleiben so 174 statt 166 px für Datum
	 * und Titel.
	 */
	padding: var(--space-3);
	margin-bottom: var(--space-6);
}

.em-events__title {
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--accent-2);
	margin: 0 0 var(--space-3);
}

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

.em-event + .em-event { border-top: 1px solid var(--line-soft); }

.em-event a {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	/* Kein seitliches Polster mehr – das übernimmt der Kasten. */
	padding: 10px 0;
}
.em-event a:hover .em-event__name { color: var(--accent); }

.em-event__date {
	/* 38 statt 46 px. Zusammen mit dem engeren Polster wächst der Platz
	   für den Titel von 100 auf 126 px, also um gut ein Viertel. */
	flex: 0 0 38px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 6px 0;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	line-height: 1.1;
}

.em-event__day {
	font-family: var(--font-mono);
	font-size: 15px;
	font-weight: 500;
	color: var(--accent);
}

.em-event__mon {
	font-size: 9px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--text-muted);
}

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

.em-event__name {
	display: block;
	font-size: 14px;
	color: var(--text);
	line-height: 1.3;
	transition: color .15s ease;
}

.em-event__meta {
	display: block;
	font-size: 12px;
	color: var(--text-muted);
	margin-top: 2px;
}

.em-events__cta {
	width: 100%;
	justify-content: center;
	margin-top: var(--space-4);
	font-size: 13px;
	padding: 9px 12px;
}

.em-events__list--full .em-event a { padding: 14px 4px; }
.em-events__list--full .em-event__date { flex-basis: 56px; }
.em-events__list--full .em-event__name { font-size: 15px; }

/* Monatsraster – moderner: weicher Verlauf im Kopf, klare Formen,
   ein einzelner Punkt statt gezählter Herzen als Terminmarker. */

.em-cal {
	background: linear-gradient(180deg, var(--card) 0%, var(--surface) 130px);
	border: 1px solid var(--line-gold);
	border-radius: 20px;
	padding: var(--space-5);
	box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}

.em-cal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	margin-bottom: var(--space-5);
}

.em-cal__month {
	font-family: var(--font-display);
	font-weight: var(--weight-display);
	font-size: 19px;
	color: var(--heading);
	margin: 0;
}

.em-cal__nav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1px solid var(--line);
	border-radius: 999px;
	color: var(--text-muted);
	background: var(--surface);
	transition: color .15s ease, border-color .15s ease, transform .15s ease;
}
.em-cal__nav:hover { color: var(--accent); border-color: var(--accent); transform: translateY(-1px); }
.em-cal__nav svg { width: 16px; height: 16px; }

.em-cal__grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
}

.em-cal__wd {
	text-align: center;
	padding: 0 0 var(--space-3);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--text-faint);
}

/* Leere Tage: keine Rahmen, nur die Zahl. Das nimmt die Unruhe raus. */
.em-cal__cell {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	aspect-ratio: 1 / 1;
	border: 0;
	border-radius: 12px;
	background: none;
	color: var(--text-faint);
	cursor: default;
	/* Ganz leichte Trennlinien zwischen den Tagen, unten und rechts –
	   per box-shadow, damit sie den Raster-Abstand nicht verändern. */
	box-shadow: inset 0 -1px 0 var(--line-soft), inset -1px 0 0 var(--line-soft);
}

.em-cal__cell--empty { aspect-ratio: auto; box-shadow: none; }

.em-cal__cell--we .em-cal__num { color: var(--text-muted); }

.em-cal__num {
	font-family: var(--font-mono);
	font-size: 13.5px;
	line-height: 1;
	padding: 5px 7px;
	border-radius: 999px;
	transition: background .14s ease, color .14s ease;
}

/* Jeder echte Tag (im Monat, nicht Randfüllung) reagiert mit JS
   anklickbar; ohne Termine öffnet er "Event hinzufügen" für
   bestätigte Mitglieder, siehe theme.js. */
.em-cal__cell:not(.em-cal__cell--empty) { cursor: pointer; }
.em-cal__cell:not(.em-cal__cell--empty):hover .em-cal__num {
	background: var(--card);
	color: var(--text);
}

/* Tage mit Terminen */
a.em-cal__cell--has {
	color: var(--text);
	transition: transform .14s ease;
}
a.em-cal__cell--has:hover { transform: translateY(-2px); }
a.em-cal__cell--has .em-cal__num {
	background: var(--card);
	color: var(--text);
	font-weight: 500;
}
a.em-cal__cell--has:hover .em-cal__num {
	background: var(--accent);
	color: var(--on-accent);
}

/* Heute – Ring statt Volltonfläche, damit ein eigener Termin an
   diesem Tag weiterhin klar erkennbar bleibt. */
.em-cal__cell--today .em-cal__num {
	box-shadow: inset 0 0 0 1.5px var(--accent);
	font-weight: 600;
	color: var(--accent);
}
a.em-cal__cell--has.em-cal__cell--today .em-cal__num {
	background: var(--accent);
	color: var(--on-accent);
	box-shadow: none;
}

/* Ausgewählter Tag (nur ohne JS relevant, siehe Klick-Fenster) */
a.em-cal__cell--active .em-cal__num {
	box-shadow: inset 0 0 0 1.5px var(--accent-2);
}

/* Ein kleines Herz zeigt "hier ist etwas los" – bewusst nur eines,
   ohne die Anzahl der Termine zu zählen. */
.em-cal__dot {
	width: 12px;
	height: 12px;
	color: var(--accent-2);
	transition: color .14s ease;
	line-height: 0;
}
.em-cal__dot svg { width: 100%; height: 100%; display: block; }
a.em-cal__cell--has:hover .em-cal__dot { color: var(--accent); }

.em-cal__hint {
	margin: var(--space-5) 0 0;
	padding: 14px 16px;
	background: var(--surface);
	border: 1px dashed var(--line);
	border-radius: var(--radius-l);
	font-size: 14px;
	color: var(--text-muted);
	text-align: center;
}

@media (max-width: 560px) {
	.em-cal { padding: var(--space-4); border-radius: 16px; }
	.em-cal__cell { font-size: 12px; }
}

/* ------------------------------------------------------------------
   Klick-Fenster im Kalender
------------------------------------------------------------------ */

.em-calmodal {
	position: fixed;
	inset: 0;
	z-index: 210;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}
.em-calmodal[hidden] { display: none; }

.em-calmodal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(8, 3, 5, .6);
}

.em-calmodal__panel {
	position: relative;
	width: 100%;
	max-width: 420px;
	max-height: 82vh;
	overflow-y: auto;
	background: var(--panel);
	border: 1px solid var(--line-gold);
	border-radius: 20px 20px 0 0;
	padding: var(--space-5) var(--space-5) var(--space-6);
	margin-bottom: 0;
}

@media (min-width: 640px) {
	.em-calmodal { align-items: center; }
	.em-calmodal__panel { border-radius: 20px; margin-bottom: var(--space-6); }
}

.em-calmodal__close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 34px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	line-height: 1;
	border: 1px solid var(--line);
	border-radius: 50%;
	background: var(--surface);
	color: var(--text);
	cursor: pointer;
}
.em-calmodal__close:hover { border-color: var(--accent); color: var(--accent); }

.em-calmodal__title {
	margin: 0 var(--space-6) var(--space-4) 0;
	font-family: var(--font-display);
	font-weight: var(--weight-display);
	font-size: 18px;
	color: var(--heading);
}

.em-calmodal__body { display: flex; flex-direction: column; gap: var(--space-3); }

.em-calmodal__empty {
	margin: 0 0 var(--space-4);
	font-size: 14px;
	color: var(--text-muted);
}

.em-calmodal__item {
	display: block;
	padding: 12px 14px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-l);
	color: var(--text);
}
.em-calmodal__item:hover { border-color: var(--accent); color: var(--text); }

.em-calmodal__item-time {
	font-family: var(--font-mono);
	font-size: 12.5px;
	color: var(--accent);
}
.em-calmodal__item-name {
	display: block;
	font-size: 14.5px;
	font-weight: 500;
	margin: 2px 0 4px;
}
.em-calmodal__item-meta {
	font-size: 12.5px;
	color: var(--text-muted);
}

.em-calmodal__badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.em-calmodal__badge {
	font-size: 11px;
	padding: 3px 9px;
	border-radius: 999px;
	background: var(--accent-2-soft);
	color: var(--accent-2);
}

.em-calmodal__add {
	display: block;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	margin-top: var(--space-2);
	padding: 12px 16px;
	border-radius: var(--radius-l);
	border: 1px dashed var(--line);
	color: var(--text-muted);
	font-size: 14px;
}
.em-calmodal__add:hover { border-color: var(--accent); color: var(--accent); border-style: solid; }

.em-events__empty {
	font-size: 13.5px;
	color: var(--text-muted);
	margin: 0;
	line-height: 1.5;
}
.em-events__empty a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

.em-events__note {
	font-size: 11.5px;
	color: var(--text-faint);
	margin: var(--space-2) 0 0;
}

/* Kalenderkasten in der Seitenspalte der Startseite */
.em-sidebar .em-events {
	margin-top: var(--space-5);
	margin-bottom: 0;
	padding: var(--space-4);
}
.em-sidebar .em-event a { padding: 9px 2px; }
.em-sidebar .em-event__date { flex-basis: 42px; }
.em-sidebar .em-event__name { font-size: 13.5px; }
.em-sidebar .em-event__meta { font-size: 11.5px; }

/* Termin heute: deutlich hervorgehoben */

.em-event--today {
	background: var(--accent-2-soft);
	border-radius: var(--radius);
	margin: 0 -6px;
	padding: 0 6px;
	position: relative;
}
.em-event--today::before {
	content: "";
	position: absolute;
	left: 0;
	top: 6px;
	bottom: 6px;
	width: 3px;
	border-radius: 3px;
	background: var(--accent);
}
.em-event--today + .em-event { border-top-color: transparent; }

.em-event--today .em-event__date {
	background: var(--accent);
	border-color: var(--accent);
}
.em-event--today .em-event__day { color: var(--on-accent); }
.em-event--today .em-event__mon { color: var(--on-accent); opacity: .85; }
.em-event--today .em-event__name { font-weight: 500; }

.em-event__flag {
	display: inline-block;
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 500;
	padding: 2px 8px;
	margin-bottom: 4px;
	border-radius: 999px;
	background: var(--accent);
	color: var(--on-accent);
}

.em-event__flag--soon {
	background: none;
	border: 1px solid var(--accent-2);
	color: var(--accent-2);
}

/* Kleinere Feinjustierung für den Kalender auf schmalen Bildschirmen –
   die Grundregeln stehen weiter oben im Kalender-Block. */
@media (max-width: 720px) {
	.em-cal__grid { gap: 4px; }
	.em-cal__cell { gap: 4px; border-radius: 9px; }
	.em-cal__num { font-size: 12.5px; padding: 4px 5px; }
	.em-cal__wd { text-align: center; padding-left: 0; }
}

/* Fließtext der Startseite */

.em-hometext {
	margin-top: var(--space-8);
	padding-top: var(--space-6);
	border-top: 1px solid var(--line);
	/*
	 * Volle Spaltenbreite statt der Lesespalte von 70 Zeichen.
	 * Bewusst nur hier: Die Rechtstexte behalten über .em-prose ihre
	 * schmalere Breite, weil lange Zeilen dort das Lesen wirklich
	 * erschweren. Auf der Startseite gewinnt der bündige Abschluss
	 * mit dem Inseratsraster darüber.
	 */
	max-width: none;
}
.em-hometext h2 { font-size: 22px; margin-bottom: var(--space-3); }
.em-hometext h3 { font-size: 17px; margin-top: var(--space-5); }
.em-hometext p { color: var(--text-muted); }

/* Bannerplätze in der Seitenspalte */

.em-sidebanners {
	margin-top: var(--space-5);
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.em-sidebanner img {
	width: 100%;
	height: auto;
	/* Obergrenze, damit eine hochformatige Werbegrafik die Seitenspalte
	   nicht sprengt – unabhängig vom Seitentyp immer gleich groß. */
	max-height: 220px;
	object-fit: contain;
	background: var(--card);
	border-radius: var(--radius-l);
	border: 1px solid var(--line);
	display: block;
}
.em-sidebanner a:hover img { border-color: var(--accent); }

/* Profilseite */

.em-profile__head {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	margin-bottom: var(--space-5);
}
.em-profile__head h1 { margin-bottom: var(--space-1); }

.em-profile__avatar img {
	width: 84px;
	height: 84px;
	border-radius: 50%;
	object-fit: cover;
	border: 1px solid var(--line-gold);
}

@media (max-width: 560px) {
	.em-profile__avatar img { width: 64px; height: 64px; }
}

/* Online-Status in der Autorenbox */

.em-author__state {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 2px 0 6px;
	font-size: 12.5px;
	color: var(--text-muted);
}
.em-author__state::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--status-off);
	flex: 0 0 7px;
}
.em-author__state.is-online {
	color: var(--status-on);
}
.em-author__state.is-online::before {
	background: var(--status-on);
	box-shadow: 0 0 0 3px var(--status-on-soft);
}

/* ------------------------------------------------------------------
   Öffentliches Profil (author.php)
------------------------------------------------------------------ */

.em-prof__karte {
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: var(--radius-l);
	overflow: hidden;
	margin-bottom: 20px;
}

.em-prof__karte--klein { padding: 20px 24px; }

/* Titelband: eigenes Bild des Mitglieds, sonst Verlauf in Burgund und
   Gold. Der dunkle Verlauf darüber sorgt dafür, dass auch bei hellen
   Fotos die Kante zum Profilbild sichtbar bleibt. */
.em-prof__cover {
	height: 170px;
	position: relative;
	background: linear-gradient(135deg, #4a1224, #8a2440 55%, #b07a1e);
	background-size: cover;
	background-position: center;
}

.em-prof__cover::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(20, 6, 12, 0.5), transparent 62%);
}

/*
 * Nur das Profilbild ragt ins Band, nicht der ganze Block.
 *
 * Vorher zog ein negativer Außenabstand die gesamte untere Hälfte nach
 * oben – der Name saß dadurch fest an der Bandkante, und ein
 * Innenabstand am Namen half nicht, weil die Zeile unten ausgerichtet
 * ist und nach oben statt nach unten wächst.
 */
.em-prof__unten {
	position: relative;
	margin-top: 0;
	padding: 24px 26px 26px;
}

/*
 * Raster statt Flex-Zeile.
 *
 * In einer Flex-Zeile lassen sich Zeilen über Spalten hinweg nicht
 * ausrichten: Name und Meta lagen in einer Hülle, die Knöpfe daneben in
 * einer zweiten — beide wussten nichts voneinander, und die kleinen
 * Knöpfe schwebten zwischen den Textzeilen.
 *
 * Als Raster liegen Name und Hauptknöpfe zwangsläufig in Zeile 1,
 * Metazeile und Kleinknöpfe in Zeile 2.
 */
.em-prof__kopf {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: end;
	column-gap: 20px;
	row-gap: 4px;
	padding-top: 0;
}
/*
 * Oben ausgerichtet, nicht unten.
 *
 * Bei "end" bestimmt die Höhe der Rasterzeilen, wie weit das Bild ins
 * Titelband ragt — und die änderte sich mit den neuen Knopfzeilen.
 * Bei "start" hängt es allein am negativen Abstand.
 *
 * 86 px minus die 24 px Innenabstand ergeben 62 px im Band. Das Bild
 * ist mit Rand 124 px hoch, liegt also genau zur Hälfte auf der Kante
 * — wie in der Mitgliederverwaltung.
 */
.em-prof__bild  { grid-column: 1; grid-row: 1 / span 2; align-self: start; }
.em-prof__name  { grid-column: 2; grid-row: 1; align-self: end; }
.em-prof__meta  { grid-column: 2; grid-row: 2; }
.em-prof__haupt { grid-column: 3; grid-row: 1; align-self: end; }
.em-prof__still { grid-column: 3; grid-row: 2; }

.em-prof__bild {
	flex: 0 0 auto;
	width: 116px;
	height: 116px;
	/* Zieht allein das Bild ins Band, siehe Rasterzuweisung oben. */
	margin-top: -86px;
	margin-bottom: -4px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--card);
	border: 4px solid var(--panel);
	display: flex;
	align-items: center;
	justify-content: center;
}

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

.em-prof__initial {
	font-family: var(--font-display);
	font-weight: var(--weight-display);
	font-size: 42px;
	color: var(--heading);
	line-height: 1;
}


.em-prof__name {
	margin: 0 0 6px;
	font-size: clamp(23px, 2.5vw, 29px);
	color: var(--heading);
	line-height: 1.15;
	overflow-wrap: break-word;
}

.em-prof__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
	font-size: 13px;
	color: var(--text-muted);
}

.em-prof__trenner {
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: var(--line);
}

.em-prof__online {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--status-on);
}

.em-prof__punkt {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--status-on);
}

.em-prof__haupt {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	padding-bottom: 4px;
	justify-content: flex-end;
}

.em-prof__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 156px;
	padding: 11px 22px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	font-size: 15px;
	font-weight: 600;
	font-family: inherit;
	color: var(--text);
	background: transparent;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.em-prof__btn--primary {
	background: var(--btn-fill);
	border-color: transparent;
	color: var(--btn-text);
}

.em-prof__btn--primary:hover { background: var(--btn-fill-hover); color: var(--btn-text); }

/* Abgeschaltet, weil das Nachrichtensystem noch fehlt. */
.em-prof__btn--aus { opacity: 0.45; cursor: not-allowed; pointer-events: none; }

.em-prof__btn--folgen:hover { border-color: var(--accent); color: var(--accent); }

.em-prof__btn--folgen.is-on {
	background: var(--accent-2-soft);
	border-color: var(--accent-2);
	color: var(--accent-2);
}

.em-prof__daten {
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px 28px;
	margin-top: 26px;
	padding-top: 22px;
	border-top: 1px solid var(--line-soft);
}

.em-prof__label {
	margin: 0 0 8px;
	font-size: 11.5px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text-faint);
	font-weight: 600;
}

.em-prof__bio {
	margin: 0;
	font-size: 15px;
	line-height: 1.7;
	color: var(--text-muted);
	max-width: 78ch;
}

.em-prof__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.em-prof__liste li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; min-width: 0; }
.em-prof__liste svg { width: 18px; height: 18px; color: var(--accent); flex: 0 0 auto; }
.em-prof__liste a { overflow-wrap: anywhere; }
.em-prof__liste a:hover { color: var(--accent-2); }

.em-prof__ueber-titel {
	margin: 0 0 10px;
	font-size: 17px;
	color: var(--heading);
}

.em-prof__adresse {
	margin: 0;
	font-style: normal;
	font-size: 14.5px;
	line-height: 1.7;
	color: var(--text-muted);
}

.em-prof__abschnitt {
	margin: 28px 0 16px;
	font-size: clamp(18px, 2vw, 22px);
	color: var(--heading);
}

@media (min-width: 820px) {
	/* Kontakt weiter nach rechts: breitere Textspalte und ein
	   deutlicher Abstand dazwischen. */
	.em-prof__daten { grid-template-columns: minmax(0, 1.7fr) minmax(220px, 1fr); column-gap: 56px; }
}

@media (min-width: 1100px) {
	.em-prof__daten { column-gap: 80px; }
}

@media (max-width: 620px) {
	.em-prof__cover { height: 130px; }
	.em-prof__unten { padding: 20px 18px 22px; margin-top: 0; }
	/*
	 * Hier ist der Innenabstand 20 statt 24 px und das Bild 92 statt
	 * 116 px groß. Für die halbe Bildhöhe im Band braucht es deshalb
	 * einen eigenen Wert: 20 + 50 = 70.
	 */
	.em-prof__bild { margin-top: -70px; }
	/* Zu schmal für drei Spalten: alles untereinander, Knöpfe
	   linksbündig unter den Text. */
	.em-prof__kopf { grid-template-columns: minmax(0, 1fr); }
	.em-prof__bild  { grid-column: 1; grid-row: 1; }
	.em-prof__name  { grid-column: 1; grid-row: 2; }
	.em-prof__meta  { grid-column: 1; grid-row: 3; }
	.em-prof__haupt { grid-column: 1; grid-row: 4; justify-content: flex-start; width: 100%; }
	.em-prof__still { grid-column: 1; grid-row: 5; justify-content: flex-start; margin-right: 0; }
	.em-prof__bild { width: 92px; height: 92px; }
	.em-prof__initial { font-size: 34px; }
	.em-prof__btn { min-width: 0; flex: 1 1 auto; }
}

/* ==================================================================
   Untere Leiste und Blätter (nur Mobilgeräte)

   Die Leiste liegt fest am unteren Rand. Sie erscheint erst unter
   900 px — darüber gibt es die Kopfzeile mit allem Nötigen, und eine
   zweite Navigation wäre eine Dopplung.
================================================================== */

.em-tabbar { display: none; }
.em-blatt { display: none; }

@media (max-width: 900px) {

	.em-tabbar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 90;
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		align-items: stretch;
		background: var(--surface);
		border-top: 1px solid var(--line);
		/*
		 * Der Balken am unteren Rand neuerer Telefone liegt sonst über
		 * der Beschriftung. env() liefert die tatsächliche Höhe, auf
		 * Geräten ohne Balken ist sie null.
		 */
		padding-bottom: env(safe-area-inset-bottom, 0px);
		box-shadow: 0 -1px 14px rgba(0, 0, 0, 0.07);
	}

	.em-tabbar__item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		/* 56 px Höhe: unter 44 wird das Treffen mit dem Daumen zur
		   Geduldsprobe, viel mehr frisst nur Bildfläche. */
		min-height: 56px;
		padding: 7px 2px 8px;
		background: none;
		border: 0;
		font-family: var(--font-body);
		font-size: 10.5px;
		line-height: 1.2;
		text-align: center;
		color: var(--text-muted);
		text-decoration: none;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}

	.em-tabbar__item svg { width: 22px; height: 22px; display: block; }
	.em-tabbar__item.ist-aktiv { color: var(--heading); }
	.em-tabbar__item:active { color: var(--heading); }

	/* Punkt für Ungelesenes. Bewusst ohne Zahl: Auf 22 px ist eine
	   Ziffer nicht lesbar, und "es gibt Neues" genügt hier. */
	.em-tabbar__symbol { position: relative; display: block; }
	.em-tabbar__punkt {
		position: absolute;
		top: -1px;
		right: -3px;
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background: var(--accent-2);
		border: 1.5px solid var(--surface);
	}

	/*
	 * Das mittlere Feld ist erhöht und gefüllt. Es ragt über die
	 * Leiste hinaus, damit der Daumen es findet, ohne hinzusehen.
	 */
	.em-tabbar__item--haupt { color: var(--heading); font-weight: 600; }

	.em-tabbar__plus {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 42px;
		height: 42px;
		margin-top: -16px;
		border-radius: 50%;
		background: var(--accent);
		color: var(--on-accent);
		border: 3px solid var(--surface);
		box-shadow: 0 3px 10px rgba(138, 98, 16, 0.30);
	}
	.em-tabbar__plus svg { width: 20px; height: 20px; }

	/*
	 * Platz unter dem Inhalt, sonst verdeckt die Leiste die letzte
	 * Zeile — beim Impressum wäre das ausgerechnet die Zeile, die
	 * jemand sucht.
	 */
	body { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }

	/* --------------------------------------------------------------
	   Blätter
	-------------------------------------------------------------- */

	.em-blatt {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 100;
	}
	.em-blatt[hidden] { display: none; }

	.em-blatt__hintergrund {
		position: absolute;
		inset: 0;
		background: rgba(20, 6, 12, 0.45);
		opacity: 0;
		transition: opacity .2s ease;
	}
	.em-blatt.ist-offen .em-blatt__hintergrund { opacity: 1; }

	.em-blatt__kasten {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		max-height: 82vh;
		display: flex;
		flex-direction: column;
		background: var(--surface);
		border-top-left-radius: 20px;
		border-top-right-radius: 20px;
		padding-bottom: env(safe-area-inset-bottom, 0px);
		transform: translateY(100%);
		transition: transform .22s ease;
	}
	.em-blatt.ist-offen .em-blatt__kasten { transform: translateY(0); }

	.em-blatt__griff {
		width: 38px;
		height: 4px;
		border-radius: 4px;
		background: var(--line);
		margin: 9px auto 0;
		flex: none;
	}

	.em-blatt__kopf {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10px var(--space-5) 10px;
		flex: none;
	}

	.em-blatt__titel {
		margin: 0;
		font-family: var(--font-display);
		font-size: 17px;
		color: var(--heading);
	}

	.em-blatt__zu {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 36px;
		height: 36px;
		border: 0;
		border-radius: 50%;
		background: var(--panel);
		color: var(--text-muted);
		cursor: pointer;
	}
	.em-blatt__zu svg { width: 18px; height: 18px; }

	.em-blatt__inhalt {
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		padding: 0 var(--space-4) var(--space-5);
	}

	.em-blatt__unter {
		margin: var(--space-5) 0 var(--space-2);
		padding-left: var(--space-3);
		font-size: 10.5px;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: var(--text-faint);
	}

	/* Das Rollen der Seite hinter dem Blatt anhalten. */
	.em-blatt-sperre, .em-blatt-sperre body { overflow: hidden; }

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

	.em-blattnav a {
		display: flex;
		align-items: center;
		gap: var(--space-3);
		/* 50 px: dieselbe Großzügigkeit wie in der Leiste. Eine Liste
		   mit siebzehn Einträgen wird sonst zum Zielschießen. */
		min-height: 50px;
		padding: 0 var(--space-3);
		border-radius: var(--radius-m);
		color: var(--text);
		text-decoration: none;
		font-size: 15px;
	}
	.em-blattnav a:active { background: var(--panel); }

	.em-blattnav__icon { width: 24px; height: 24px; flex: none; display: block; }
	.em-blattnav__icon img { width: 100%; height: 100%; object-fit: contain; display: block; }
	.em-blattnav__text { flex: 1; min-width: 0; }

	.em-blattnav__zahl {
		flex: none;
		font-size: 12px;
		color: var(--accent-2);
		background: var(--accent-2-soft);
		border-radius: 999px;
		padding: 2px 9px;
	}

	.em-blattnav--klein a { min-height: 42px; font-size: 14px; color: var(--text-muted); }
}

/* ==================================================================
   Mobiler Feinschliff

   Steffis Befund war "viel zu eng". Die Ursache war nicht eine Regel,
   sondern die Summe: Polster von 16 px, Kartenabstände von 12, Karten
   ab 150 px Breite, dazu eine Kopfzeile, die alles gleichzeitig zeigen
   wollte. Hier wird das an einer Stelle zurechtgerückt.
================================================================== */

@media (max-width: 900px) {

	/*
	 * Die Kopfzeile gibt ab, was jetzt unten steht: Inseratsknopf und
	 * Konto. Übrig bleiben Logo, Suche, Glocke und Modus — die Suche
	 * bekommt damit endlich die volle Zeile für sich.
	 */
	.em-header__actions .em-btn--primary { display: none; }
	.em-konto { display: none; }

	.em-header__inner { padding-top: var(--space-3); padding-bottom: var(--space-3); }
	.em-headsearch { order: 3; flex-basis: 100%; max-width: none; min-width: 0; }

	/* 44 px statt 38: Die Kopfzeile hat jetzt Platz, und ein Ziel,
	   das man zweimal antippen muss, ist keines. */
	.em-glocke, .em-theme-toggle { width: 44px; height: 44px; }

	.em-layout { padding-top: var(--space-5); padding-bottom: var(--space-6); }
}

@media (max-width: 640px) {

	/* 20 statt 16 am Rand: Der Inhalt klebte an der Bildschirmkante. */
	.em-wrap { padding: 0 20px; }

	/*
	 * Zwei Karten je Zeile, aber mit Luft. Vorher füllte
	 * auto-fill ab 150 px auf — auf einem breiteren Handy standen
	 * dadurch drei gedrängte Karten statt zwei ruhigen.
	 */
	.em-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px var(--space-4);
	}

	.em-hero__title { font-size: 27px; line-height: 1.18; }
	.em-hero__sub { font-size: 14.5px; line-height: 1.55; }
	.em-hero { padding-bottom: var(--space-4); margin-bottom: var(--space-5); }

	.em-section-head { margin-bottom: var(--space-4); }
	.em-section-head h2 { font-size: 18px; }

	/* Die Karte selbst darf atmen: Titel und Angaben standen direkt
	   an der Kante des Rahmens. */
	.em-card { padding: 9px; }
	.em-card__title { font-size: 14px; margin-top: 10px; }

	/*
	 * Alles, was man antippt, auf 44 px. Das betrifft die Knöpfe im
	 * Inserat, die Blätterlinks und die Filter — bisher waren sie für
	 * die Maus gebaut.
	 */
	.em-btn { min-height: 44px; padding: 11px 16px; }
	.page-numbers { min-width: 44px; min-height: 44px; display: inline-flex;
		align-items: center; justify-content: center; }

	/* Abschnitte weiter auseinander: Auf dem schmalen Bildschirm
	   laufen sie sonst ineinander, weil nichts mehr seitlich trennt. */
	.em-layout > div > section { margin-bottom: var(--space-7); }

	.em-single__head h1 { font-size: 24px; line-height: 1.2; }
	.em-single__h2 { font-size: 17px; }

	/* Formulare: 16 px verhindert, dass iOS beim Antippen hineinzoomt
	   und die Seite verschoben stehen lässt. */
	input[type="text"], input[type="email"], input[type="password"],
	input[type="search"], input[type="tel"], input[type="url"],
	input[type="number"], select, textarea { font-size: 16px; }

	.em-footer__cols { gap: var(--space-5) var(--space-5); }
	.em-footer__col { flex: 1 1 100%; }
}

/* ==================================================================
   Handy: Nachbesserungen nach dem ersten Durchgang
================================================================== */

@media (max-width: 900px) {

	/*
	 * Riegel gegen seitliches Verrutschen der ganzen Seite.
	 *
	 * "clip" statt "hidden": hidden macht aus dem Element einen
	 * eigenen Rollbereich, und darin hört "position: sticky" auf zu
	 * wirken — die Kopfzeile scrollte deshalb mit weg. clip schneidet
	 * nur ab, ohne einen Rollbereich zu erzeugen, und lässt sticky in
	 * Ruhe. Nur am body, nicht zusätzlich am html-Element, sonst
	 * greift derselbe Effekt eine Ebene höher.
	 */
	html { max-width: 100%; }
	body { max-width: 100%; overflow-x: clip; }

	/*
	 * Die Fußzeile entfällt. Ihre Links stehen im Menü der unteren
	 * Leiste, und zweimal derselbe Weg braucht niemand — schon gar
	 * nicht als lange Spaltenwand am Seitenende.
	 */
	.em-footer { display: none; }

	/* Das Logo saß am oberen Rand der Kopfzeile fest. */
	.em-header__inner { padding-top: 14px; padding-bottom: 12px; }
	.em-logo { padding-top: 3px; }

	/* Luft zwischen Kopfzeile und Inhalt: Vorher begann die
	   Überschrift unmittelbar unter der Suchleiste. */
	.em-layout { padding-top: 26px; }
}

@media (max-width: 640px) {

	/* Und Luft um die Überschrift der Startseite. */
	.em-hero { padding-top: 6px; padding-bottom: 22px; margin-bottom: 26px; }
	.em-hero__title { margin-top: 0; }

	/*
	 * Melden, Merken und Teilen in eine Zeile.
	 *
	 * Sie umbrachen auf zwei Zeilen, weil jeder Knopf seine
	 * Wunschbreite behielt. Drei gleiche Anteile, etwas kleiner, und
	 * die Reihe passt — die 44 px Höhe bleiben erhalten.
	 */
	/*
	 * Nicht mehr auf die volle Breite dehnen.
	 *
	 * "flex: 1 1 0" verteilte die Zeile gleichmäßig auf die drei — sie
	 * wurden dadurch so breit wie ein Hauptknopf, obwohl in jedem nur
	 * ein Wort steht. Jetzt nehmen sie ihre eigene Breite und stehen
	 * links; die Zeile bleibt trotzdem eine, weil sie zusammen keine
	 * 260 px brauchen.
	 */
	.em-actions {
		display: flex;
		flex-wrap: nowrap;
		gap: 6px;
	}
	.em-actions > * { flex: 0 0 auto; min-width: 0; }
	.em-action {
		justify-content: center;
		padding: 6px 9px;
		font-size: 12px;
		gap: 4px;
		/* Beschriftungen stehen teils als blanker Text im Knopf, teils
		   in einem span. Deshalb hier abschneiden, nicht am Kind. */
		overflow: hidden;
		white-space: nowrap;
	}
	.em-action svg { flex: none; }

	/*
	 * Die Suche im Veranstaltungskalender stand als drei volle Zeilen
	 * untereinander — Feld, Auswahl, Knopf. Nebeneinander in zwei
	 * Reihen ist sie halb so hoch und wirkt nicht mehr wie ein
	 * Formular für einen Antrag.
	 */
	/*
	 * Alles in eine Zeile: Suchfeld, Region, Lupe.
	 *
	 * Gerechnet für 390 px Bildschirmbreite. Abzüglich der Polster der
	 * Hülle (2 × 20) und des Formulars (2 × 12) bleiben 326 px, davon
	 * zwei Lücken à 8. Region 106 und Knopf 46 sind fest, dem Suchfeld
	 * bleiben 158 px — genug für "Wonach suchst Du?".
	 */
	.em-calsuche {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 106px 46px;
		align-items: center;
		gap: 8px;
		padding: 12px;
	}
	.em-calsuche__feld { min-width: 0; }
	.em-calsuche input[type="search"], .em-calsuche select {
		width: 100%;
		min-width: 0;
		font-size: 16px;
		min-height: 46px;
	}
	.em-calsuche select { padding-right: 22px; }

	/* Aus dem Wortknopf wird ein rundes Ziel mit Lupe. */
	.em-calsuche__go {
		width: 46px;
		min-width: 0;
		height: 46px;
		padding: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
	}
	.em-calsuche__go svg { width: 20px; height: 20px; }
	.em-calsuche__go-text { display: none; }

	.em-calsuche__tipp { grid-column: 1 / -1; margin: 2px 0 0; }
	.em-calsuche__weg { grid-column: 1 / -1; }

	/*
	 * Die Reihenfolge auf der Inseratsseite steht weiter unten, in
	 * einem eigenen Block. Hier stand sie bis 2.18.0 ein zweites Mal —
	 * zwei Stellen für dieselbe Sache, von denen die spätere gewinnt.
	 */
}

@media (max-width: 640px) {

	/*
	 * Die Box zur inserierenden Person kompakter.
	 *
	 * Sie wirkte auseinandergezogen: 24 px Polster, 16 px unter dem
	 * Kopf, dazwischen große Knöpfe mit viel Eigenhöhe. Auf einem
	 * Telefon füllte sie fast den halben Bildschirm, ohne mehr zu
	 * sagen. Enger gesetzt, Kontaktknöpfe über die volle Breite und
	 * gleich hoch — dadurch liest sie sich als eine Einheit.
	 */
	.em-author { padding: 16px; }
	.em-author__head { gap: 12px; margin-bottom: 14px; }
	.em-author__avatar img { width: 52px; height: 52px; }
	.em-author__name { font-size: 17px; }
	.em-author__link { margin-top: 4px; }

	.em-contact {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		width: 100%;
		min-height: 46px;
		margin-bottom: 8px;
	}
	.em-contact span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

	.em-author__cta { width: 100%; min-height: 48px; margin-top: 4px; }
}

/* Der Beispielhinweis unter der Kalendersuche. Er ersetzt das
   Beispiel, das vorher im Platzhalter stand und dort die ganze Zeile
   belegte. */
.em-calsuche__tipp {
	margin: 0;
	font-size: 12.5px;
	color: var(--text-faint);
}

/* Am großen Bildschirm bleibt der Wortknopf. */
@media (min-width: 641px) {
	.em-calsuche__go svg { display: none; }
}

/*
 * Sehr schmale Geräte (iPhone SE und Ähnliches).
 *
 * Bei 320 px blieben dem Suchfeld nur 88 px — darin ist "Wonach suchst
 * Du?" nicht mehr zu lesen. Region und Lücken geben etwas ab, damit es
 * auf gut 110 px kommt.
 */
@media (max-width: 360px) {
	.em-calsuche { grid-template-columns: minmax(0, 1fr) 92px 44px; gap: 6px; padding: 10px; }
	.em-calsuche__go { width: 44px; height: 44px; }
	.em-calsuche input[type="search"], .em-calsuche select { min-height: 44px; }
	.em-calsuche select { font-size: 14px; padding-right: 18px; }
}

/* ==================================================================
   Nachrichtensymbol in der Kopfzeile (nur Handy)
================================================================== */

.em-headmsg { display: none; }

@media (max-width: 900px) {
	.em-headmsg {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		flex: none;
		border: 1px solid var(--line);
		border-radius: var(--radius);
		color: var(--text-muted);
		text-decoration: none;
	}
	.em-headmsg svg { width: 20px; height: 20px; }

	/*
	 * Die Zahl sitzt an der oberen rechten Ecke des Feldes und darf
	 * darüber hinausragen — innerhalb des Rahmens bliebe sie zu klein,
	 * um gelesen zu werden.
	 *
	 * Bordeaux statt des helleren Akzents: Der Punkt vorher ging im
	 * cremefarbenen Kopf unter. Der Ring in Hintergrundfarbe trennt
	 * die Zahl vom Rahmen darunter.
	 */
	.em-headmsg__zahl {
		position: absolute;
		top: -6px;
		right: -6px;
		min-width: 19px;
		height: 19px;
		padding: 0 5px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 999px;
		background: var(--badge-bg, #8A2440);
		color: var(--badge-fg, #FFF);
		font-size: 11.5px;
		font-weight: 600;
		line-height: 1;
		border: 2px solid var(--bg);
	}
}

@media (max-width: 640px) {
	/*
	 * Der Platzhalter der Kalendersuche eine Spur kleiner als das
	 * Eingabefeld. Bei 16 px stand das Fragezeichen außerhalb — und
	 * das Feld selbst darf nicht kleiner werden, weil iOS unter 16 px
	 * beim Antippen hineinzoomt und die Seite verschoben stehen lässt.
	 * Nur den Platzhalter zu verkleinern löst beides.
	 */
	.em-calsuche input[type="search"]::placeholder { font-size: 14px; }
	.em-calsuche input[type="search"]::-webkit-input-placeholder { font-size: 14px; }
}

@media (max-width: 900px) {
	/*
	 * Einspaltig — auch auf der Inseratsseite.
	 *
	 * .em-layout--single steht im Stylesheet nach der mobilen Regel
	 * für .em-layout und setzt die rechte Spalte auf feste 300 px.
	 * Bei gleicher Spezifität gewinnt die spätere Regel, also blieb
	 * die Box zur inserierenden Person auch auf dem Telefon bei 300 px
	 * und stand als schmale Säule neben leerer Fläche. Deshalb hier
	 * noch einmal ausdrücklich, und zwar nach ihr.
	 */
	.em-layout--single { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {

	/*
	 * Die Box zur inserierenden Person: oben und unten gleich viel
	 * Luft. Der letzte Knopf hatte einen Außenabstand nach unten, der
	 * sich auf das Polster der Box addierte — unten stand dadurch
	 * deutlich mehr Platz als oben.
	 */
	.em-author { padding: 18px; }
	.em-author > *:last-child { margin-bottom: 0; }
	.em-author__cta { margin-bottom: 0; }

	/* Das Profilbild darf größer sein, jetzt wo die Box die volle
	   Breite hat — es ist das Einzige, was die Person zeigt. */
	.em-author__avatar img { width: 68px; height: 68px; }
	.em-author__name { font-size: 19px; }

	/*
	 * Im Kalender bekommt der Titel mehr Zeile. Der Marker "Morgen"
	 * stand über ihm und schob ihn in den Umbruch — daneben gestellt
	 * bleibt für den Titel eine Zeile übrig.
	 */
	.em-event a { gap: 12px; align-items: flex-start; }
	.em-event__body { display: flex; flex-direction: column; gap: 3px; }
	.em-event__flag { align-self: flex-start; }
	.em-event__name { font-size: 15px; line-height: 1.28; }
}

@media (max-width: 900px) {

	/*
	 * Symbole im Menüblatt. Drei Töne aus der Palette der Seite:
	 * Bordeaux für die eigenen Inhalte, Gold für das Öffentliche,
	 * Rosé für das Persönliche. Abmelden bleibt grau — es ist kein
	 * Ziel, sondern ein Ausgang.
	 */
	.em-blattnav__sym {
		flex: none;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 26px;
		height: 26px;
	}
	.em-blattnav__sym svg { width: 21px; height: 21px; }

	.em-blattnav a[data-em-ton="bordeaux"] .em-blattnav__sym { color: var(--heading); }
	.em-blattnav a[data-em-ton="gold"]     .em-blattnav__sym { color: var(--accent); }
	.em-blattnav a[data-em-ton="rose"]     .em-blattnav__sym { color: var(--accent-2); }
	.em-blattnav a[data-em-ton="grau"]     .em-blattnav__sym { color: var(--text-faint); }
	.em-blattnav a[data-em-ton="grau"]     .em-blattnav__text { color: var(--text-muted); }
}

/* ==================================================================
   Kopfzeile auf dem Telefon kompakter

   Sie nahm rund 128 px ein — ein knappes Fünftel des Bildschirms,
   bevor der erste Inhalt kam. Alle Teile geben etwas ab, keiner so
   viel, dass er unbedienbar wird: Die beiden Felder bleiben mit 38 px
   über der Grenze, ab der man zweimal tippen muss.
================================================================== */

@media (max-width: 900px) {

	.em-header__inner {
		padding-top: 10px;
		padding-bottom: 9px;
		gap: 10px;
	}

	/* 38 statt 46 — das Logo bleibt lesbar, spart aber 8 px Höhe. */
	.em-logomark { height: 38px; }
	.em-logo { padding-top: 0; }

	/* 38 statt 44 bei beiden Feldern. */
	.em-headmsg, .em-theme-toggle, .em-glocke { width: 38px; height: 38px; }
	.em-headmsg svg, .em-theme-toggle svg { width: 18px; height: 18px; }

	/* Die Zählmarke rückt mit, sonst hinge sie neben dem Feld. */
	.em-headmsg__zahl {
		top: -5px;
		right: -5px;
		min-width: 17px;
		height: 17px;
		font-size: 11px;
	}

	/*
	 * Die Suchleiste hat keine eigene Höhe — sie ergibt sich aus dem
	 * Polster des Eingabefelds. Ein "min-height" hätte deshalb nichts
	 * verkleinert, sondern nur eine Untergrenze gesetzt. Der Hebel ist
	 * das Polster: 7 statt 10 px oben und unten, macht 6 px weniger.
	 *
	 * Die Schriftgröße von 16 px bleibt unangetastet — darunter zoomt
	 * iOS beim Antippen hinein und lässt die Seite verschoben stehen.
	 */
	.em-headsearch input[type="search"],
	.em-headsearch select { padding-top: 7px; padding-bottom: 7px; }
	.em-headsearch__go { width: 42px; }
}

/* ==================================================================
   Nachrichten: der Chat bekommt den Bildschirm

   Die Klasse setzt em-accounts am body, sobald der Nachrichtenbereich
   offen ist — Übersicht wie Gespräch.
   Warum überhaupt: Solange die Kopfzeile mitlief, war der Chatkasten
   zusammen mit ihr höher als der Bildschirm — und dann rollt die Seite,
   ganz gleich wie sorgfältig die Höhe des Kastens gerechnet ist. Nimmt
   man die Kopfzeile weg, bleibt genau ein Bildschirm übrig, und die
   Rechnerei entfällt.

   Nur auf dem Telefon. Am großen Bildschirm ist Platz für beides.
================================================================== */

@media (max-width: 900px) {

	body.em-chat .em-header { display: none; }

	/* Kein Polster mehr oben — der Chat beginnt an der Bildkante. */
	body.em-chat .em-layout { padding-top: 0; padding-bottom: 0; }

	/*
	 * Die Seite darf nicht mehr rollen. Ohne das federt iOS beim
	 * Wischen die ganze Seite mit, obwohl innen der Verlauf rollt —
	 * genau das Gummiband, das Steffi als "verschiebt sich" beschreibt.
	 */
	body.em-chat { overflow: hidden; height: 100dvh; }
}

/* ==================================================================
   Einfache Seiten (Impressum, Konto, AGB …)

   Das Polster stand bis 2.8.0 als Inline-Stil im Markup und ließ sich
   dadurch nirgends überschreiben. Hier steht es an einer Stelle und
   ist damit auch für die Handyansicht erreichbar.
================================================================== */

.em-seite { padding: 48px 24px 64px; }
.em-prose { margin: 0 auto; }

@media (max-width: 640px) {
	.em-seite { padding: 26px 20px 40px; }
}

@media (max-width: 900px) {
	/* Im geöffneten Gespräch gar keins: Der Chat beginnt an der
	   Bildkante und endet an der unteren Leiste. */
	body.em-chat .em-seite { padding: 0; }
	body.em-chat .em-prose { max-width: none; }
}

/* ==================================================================
   Gummiband am Seitenrand unterbinden
================================================================== */

html {
	/*
	 * Zieht man die Seite über ihren Anfang hinaus, federte sie zurück
	 * und gab dabei den Bereich dahinter frei — dort steht die Farbe
	 * aus dem theme-color-Eintrag, also Bordeaux. Auf dem Telefon sah
	 * das aus, als wäre die Seite verrutscht.
	 *
	 * "overscroll-behavior-y: none" nimmt der Seite dieses Nachfedern.
	 * Das Rollen im Chatverlauf bleibt davon unberührt, weil das ein
	 * eigener Bereich ist.
	 */
	overscroll-behavior-y: none;

	/* Und falls doch etwas durchscheint, dann in Seitenfarbe. */
	background: var(--bg);
}


@media (max-width: 900px) {
	/*
	 * Der letzte weiße Streifen über dem Chat.
	 *
	 * Er kam nicht aus einer einzigen Regel, sondern aus der Kette
	 * darüber: Seitenhülle, Textspalte und Inhaltsspalte bringen je
	 * einen kleinen Abstand mit, der einzeln nicht auffällt. Hier
	 * werden sie gemeinsam auf null gesetzt, statt einen nach dem
	 * anderen zu suchen.
	 */
	body.em-chat #em-main,
	body.em-chat .em-prose,
	body.em-chat .em-layout {
		padding-top: 0;
		margin-top: 0;
	}
	body.em-chat .em-dash { padding-top: 0; margin-top: 0; }
}

@media (max-width: 640px) {

	.em-single { display: contents; }
	.em-single > .em-panel   { order: 1; }
	.em-rail > .em-author    { order: 2; }
	.em-single > .em-related { order: 3; }
	.em-rail > .em-events    { order: 4; }
	.em-rail > .em-banner,
	.em-rail > .em-sidebanners { order: 5; }

	/* Weniger Luft zwischen den Bereichen: 32 px waren auf dem
	   schmalen Bildschirm eine halbe Handbreit Leere. */
	.em-layout { gap: 20px; }
	.em-layout > section { margin-bottom: 0; }

	/*
	 * Der Inseratstitel. 24 px waren am Telefon drei Zeilen für einen
	 * Titel — er verdrängte die Knöpfe und das erste Bild aus dem
	 * ersten Blick.
	 */
	.em-single__head h1 { font-size: 20px; line-height: 1.22; }

	/* Und die drei Knöpfe eine Nummer kleiner, damit sie sich die
	   Zeile bequemer teilen. */

	/*
	 * Der Kasten endet dichter unter den Tags. Die 48 px Außenabstand
	 * addierten sich auf das Polster des Kastens — zusammen fast 80 px
	 * Weiß unter drei kleinen Schaltflächen.
	 */
	.em-tags { margin: var(--space-4) 0 0; padding-top: var(--space-3); }
}

/* ==================================================================
   Werbebanner ohne Rahmen (Handy)
================================================================== */

@media (max-width: 900px) {
	/*
	 * Kein Kasten mehr hinter der Grafik.
	 *
	 * Der blasse Rahmen war kein Rahmen, sondern der Untergrund der
	 * Grafik selbst: "max-height: 220px" mit "object-fit: contain"
	 * schrumpft ein hochformatiges Banner in einen Kasten, der auf der
	 * vollen Handybreite viel höher wäre — der Rest blieb als Fläche
	 * stehen. In der schmalen Seitenspalte war die Obergrenze richtig,
	 * hier ist sie es nicht.
	 */
	.em-sidebanner img,
	.em-banner img {
		max-height: none;
		background: none;
		border: 0;
	}
	.em-sidebanner a:hover img { border: 0; }
}



/* ==================================================================
   Inseratsseite: Größen am großen Bildschirm
================================================================== */

/*
 * Der Titel nimmt die globale h1-Regel, und die wächst bis 35 px. Auf
 * einer Inseratsseite ist das zu viel: Der Titel steht dort über einem
 * Foto, das ohnehin die Aufmerksamkeit hat, und drückte alles Übrige
 * nach unten. Bis 27 px reicht — immer noch die größte Schrift der
 * Seite, aber ohne die Knöpfe und das erste Bild zu verdrängen.
 */
.em-single__head h1 {
	font-size: clamp(22px, 2.1vw, 27px);
	line-height: 1.22;
}

/*
 * Merken, Teilen, Melden nach rechts.
 *
 * Links standen sie unter dem Titel wie eine Fortsetzung davon. Rechts
 * ordnen sie sich dem Titel unter, und das entspricht ihrem Gewicht:
 * Nebenhandlungen.
 */
.em-actions { justify-content: flex-end; }

@media (max-width: 640px) {
	/* Auf dem Telefon bleiben sie links: Dort ist die Zeile schmal,
	   und rechtsbündig sähe es aus, als fehlte etwas davor. */
	.em-actions { justify-content: flex-start; }
}

/*
 * Vier ähnliche Inserate je Reihe statt drei.
 *
 * Gerechnet: In der Einzelansicht bleiben neben der 300 px breiten
 * rechten Leiste rund 700 px. Mit auto-fill und 168 px Mindestbreite
 * bräuchten vier Karten 720 px — sechs zu viel, also passten nur drei.
 * Eine feste Vierteilung lässt jede Karte 163 px breit werden.
 *
 * Nur in der Einzelansicht und erst ab 981 px: Darunter ist das
 * Layout einspaltig, und dort gelten die zwei Spalten der
 * Handyansicht.
 */
@media (min-width: 981px) {
	.em-layout--single .em-related .em-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* ==================================================================
   Merken, Teilen, Melden: kleiner und zurückhaltender
================================================================== */

/*
 * Der Abstand zum Titel kam aus zwei Quellen, nicht aus einer: dem
 * Außenabstand der Überschrift (rund 18 px vom Browser vorgegeben) und
 * den 16 px über der Knopfreihe. Zusammen rund 34 px — daher die
 * Lücke. Beide sind jetzt gesetzt statt geerbt.
 */
.em-single__head h1 { margin-bottom: 8px; }
.em-actions { margin-top: 4px; }

/*
 * Und die Knöpfe selbst eine Stufe leiser.
 *
 * Ein voller Rahmen in --line macht aus jedem Knopf einen Kasten, und
 * drei Kästen nebeneinander ziehen den Blick. Der weichere Rahmen
 * hält sie als Gruppe zusammen, ohne sie hervorzuheben; beim
 * Überfahren tritt der Rahmen wieder hervor, damit klar bleibt, dass
 * man sie anklicken kann.
 */
.em-action {
	font-size: 12px;
	line-height: 1.45;
	padding: 4px 9px;
	gap: 4px;
	border-color: var(--line-soft);
	color: var(--text-faint);
}
.em-action svg { width: 13px; height: 13px; }
.em-action:hover { color: var(--text-muted); border-color: var(--line); }

@media (max-width: 640px) {
	/*
	 * Auf dem Telefon etwas mehr Polster als am großen Bildschirm: Was
	 * mit der Maus bequem zu treffen ist, ist es mit dem Daumen noch
	 * lange nicht. Diese Regel muss nach der Grundregel stehen, sonst
	 * überschreibt die Grundregel sie wieder.
	 */
	.em-action { padding: 6px 9px; }
}

/* ==================================================================
   Punkte in der Glocke
================================================================== */

/*
 * Rot bedeutet ungelesen — und nur das.
 *
 * Gelesenes wird gedämpft, aber nicht rot: Ein roter Punkt an einer
 * Zeile, die man längst gesehen hat, verlangt Aufmerksamkeit, die
 * nichts mehr rechtfertigt. Vorher stand dort --line, ein blasses
 * Rosé, das im hellen Kopf kaum zu sehen war — deshalb jetzt der
 * gedeckte Grauton, sichtbar, aber ruhig.
 */
.em-drop__zeile:not(.ist-gelesen) .em-drop__punkt { color: var(--danger); }
.em-drop__zeile.ist-gelesen .em-drop__punkt { color: var(--text-faint); opacity: 1; }

/*
 * Und exakt auf der Höhe der ersten Zeile.
 *
 * "height: 1.35em" rechnete gegen die Schriftgröße der Zeile (16 px),
 * nicht gegen die des Titels (14 px) — der Punkt saß dadurch etwas zu
 * tief, und bei zweizeiligen Einträgen fiel es auf. 19 px sind genau
 * 14 × 1.35, also die Zeilenhöhe des Titels.
 */
.em-drop__punkt { height: 19px; align-self: flex-start; }

/* ==================================================================
   Wahl zwischen Inserat und Veranstaltung
================================================================== */

.em-wahl { position: fixed; inset: 0; z-index: 120; }
.em-wahl[hidden] { display: none; }

.em-wahl__hintergrund {
	position: absolute;
	inset: 0;
	background: rgba(20, 6, 12, 0.5);
	opacity: 0;
	transition: opacity .2s ease;
}
.em-wahl.ist-offen .em-wahl__hintergrund { opacity: 1; }

.em-wahl__kasten {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -46%);
	width: min(520px, calc(100vw - 40px));
	background: var(--surface);
	border: 1px solid var(--line-gold);
	border-radius: var(--radius-l);
	padding: 28px 26px 26px;
	opacity: 0;
	transition: opacity .2s ease, transform .2s ease;
}
.em-wahl.ist-offen .em-wahl__kasten { opacity: 1; transform: translate(-50%, -50%); }

.em-wahl__zu {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--text-faint);
	cursor: pointer;
}
.em-wahl__zu svg { width: 18px; height: 18px; }
.em-wahl__zu:hover { background: var(--panel); color: var(--text); }

.em-wahl__titel {
	margin: 0 0 20px;
	font-family: var(--font-display);
	font-size: 21px;
	color: var(--heading);
	padding-right: 30px;
}

.em-wahl__karten { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.em-wahl__karte {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	padding: 18px 16px;
	border: 1px solid var(--line);
	border-radius: var(--radius-l);
	color: var(--text);
	text-decoration: none;
	transition: border-color .15s ease, background .15s ease;
}
.em-wahl__karte:hover { border-color: var(--accent); background: var(--panel); }
.em-wahl__karte svg { width: 26px; height: 26px; color: var(--accent); margin-bottom: 4px; }
.em-wahl__karte-titel { font-family: var(--font-display); font-size: 17px; color: var(--heading); }
.em-wahl__karte-text { font-size: 13px; line-height: 1.45; color: var(--text-muted); }

@media (max-width: 560px) {
	/* Untereinander: Zwei Karten nebeneinander lassen auf 320 px je
	   130 px übrig, und darin bricht schon der Titel um. */
	.em-wahl__karten { grid-template-columns: 1fr; gap: 10px; }
	.em-wahl__karte { flex-direction: row; align-items: center; gap: 12px; flex-wrap: wrap; }
	.em-wahl__karte svg { margin-bottom: 0; flex: none; }
	.em-wahl__karte-text { flex-basis: 100%; }
	.em-wahl__kasten { padding: 22px 18px 20px; }
	.em-wahl__titel { font-size: 18px; margin-bottom: 16px; }
}

/*
 * Der Kopf des Kontomenüs ist jetzt ein Verweis aufs eigene Profil.
 * Er soll sich nicht wie ein Menüpunkt anfühlen — deshalb kein
 * Unterstrich, nur ein leiser Hintergrund beim Überfahren.
 */
.em-drop__kopf--link { text-decoration: none; color: inherit; border-radius: 9px; }
.em-drop__kopf--link:hover { background: var(--card); }
.em-drop__kopf--link:hover b { color: var(--heading); }

/* ==================================================================
   Startseitentext: Abstand über der Trennlinie

   Der Abstand stand längst bei .em-hometext — er wurde nur nie
   wirksam. Weiter oben in dieser Datei folgt auf ihn
   „.em-prose { margin: 0 auto }", und weil der Textblock beide Klassen
   trägt und beide gleich stark sind, gewinnt die spätere Regel. Der
   Abstand über der Linie war dadurch null.

   „section.em-hometext" nennt zusätzlich den Elementtyp und ist damit
   stärker als beide. Die Stellung am Dateiende ist nur die zweite
   Absicherung.

   40 px und nicht 32: Unter der Linie stehen 32 px Polster, bis zum
   ersten Buchstaben sind es aber rund 40, weil jede Textzeile oben
   Luft mitbringt. Die Kartenunterkante ist eine harte Linie ohne diese
   Luft. Gleich aussehen tun beide Abstände deshalb erst bei 40 px.
================================================================== */

section.em-hometext { margin-top: 40px; }

/* ==================================================================
   Kopfleiste: mehr Luft um den Veröffentlichen-Knopf

   Der Versuch aus 2.27.0 ist wieder draußen. „margin-left: auto" an
   der Suche hat zwar beide Lücken gleich gemacht, aber um den Preis,
   dass die Suchleiste an den Knopf rückte und das Logo allein links
   stand. Das war zu viel Umbau für zu wenig Gewinn.

   Stattdessen bleibt es bei „space-between": Der freie Platz verteilt
   sich wieder gleichmäßig auf die Lücke vor und die Lücke nach der
   Suche, die Suche sitzt also weiter links als in 2.27.0.

   Neu ist nur der Abstand innerhalb der Aktionsgruppe: 20 statt 12 px.
   Er kostet dreimal 8 px, die dem freien Platz abgehen — die beiden
   großen Lücken werden dadurch je 12 px kleiner, was sie einander
   etwas annähert.

   Der Wert steht bewusst allein hier: Wenn Dir 20 px zu wenig oder zu
   viel sind, ist es diese eine Zahl.
================================================================== */

@media (min-width: 1001px) {
	.em-header__actions { gap: 20px; }
}