Add TipTap editor and switch tags to event/organization edit

contao/dca/tl_module.php

@@ -9,10 +9,43 @@ use Contao\StringUtil;
 $GLOBALS['TL_DCA']['tl_module']['palettes']['member_organizations'] = '{title_legend},name,headline,type;{eventmanager_legend},editPage;{protected_legend:hide},protected;{expert_legend:hide},guests,cssID';
 $GLOBALS['TL_DCA']['tl_module']['palettes']['member_events'] = '{title_legend},name,headline,type;{eventmanager_legend},editPage;{protected_legend:hide},protected;{expert_legend:hide},guests,cssID';
 $GLOBALS['TL_DCA']['tl_module']['palettes']['event_filter'] = '{title_legend},name,headline,type;{eventmanager_legend},cal_calendar,eventListDomId;{protected_legend:hide},protected;{expert_legend:hide},guests,cssID';
-$GLOBALS['TL_DCA']['tl_module']['palettes']['eventmanager_map'] = '{title_legend},name,headline,type;{eventmanager_legend},mapShowOrganizations,organizationTypeTags,mapShowExternalOrganizations,mapShowEvents,mapInitialDisplay,mapEventColor,mapOrganizationColor,mapPitch,mapCenterMode;{protected_legend:hide},protected;{expert_legend:hide},guests,cssID';
+$GLOBALS['TL_DCA']['tl_module']['palettes']['eventmanager_map'] = '{title_legend},name,headline,type;{eventmanager_legend},mapShowOrganizations,mapOrganizationListPage,organizationTypeTags,mapShowExternalOrganizations,mapShowEvents,mapInitialDisplay,mapEventColor,mapOrganizationColor,mapPitch,mapCenterMode;{protected_legend:hide},protected;{expert_legend:hide},guests,cssID';
 $GLOBALS['TL_DCA']['tl_module']['palettes']['organization_edit'] = '{title_legend},name,headline,type;{eventmanager_legend},listPage,logoFolder,organizationTypeTags;{protected_legend:hide},protected;{expert_legend:hide},guests,cssID';
 $GLOBALS['TL_DCA']['tl_module']['palettes']['event_edit'] = '{title_legend},name,headline,type;{eventmanager_legend},listPage,eventFolder,termsPage,frontendAuthorId,frontendArchiveId,eventTypeTags;{protected_legend:hide},protected;{expert_legend:hide},guests,cssID';
 
+$getUsedOrganizationTagOptions = static function (): array {
+    $database = Database::getInstance();
+    $labelExpression = $database->fieldExists('title', 'tl_tags')
+        ? "COALESCE(NULLIF(t.title, ''), t.tag)"
+        : 't.tag';
+
+    $rows = $database
+        ->prepare(sprintf(
+            'SELECT DISTINCT t.id, %1$s AS label
+             FROM tl_tags_rel r
+             INNER JOIN tl_tags t ON t.id=r.tag_id
+             WHERE r.ptable=? AND (r.field=? OR r.field IS NULL OR r.field = \'\')
+             ORDER BY label ASC',
+            $labelExpression,
+        ))
+        ->execute('tl_organization', 'tags')
+        ->fetchAllAssoc();
+
+    $options = [];
+
+    foreach ($rows as $row) {
+        $label = trim((string) ($row['label'] ?? ''));
+
+        if ('' === $label) {
+            continue;
+        }
+
+        $options[(int) $row['id']] = $label;
+    }
+
+    return $options;
+};
+
 $GLOBALS['TL_DCA']['tl_module']['fields']['editPage'] = [
     'label' => &$GLOBALS['TL_LANG']['tl_module']['editPage'],
     'exclude' => true,
@@ -73,20 +106,7 @@ $GLOBALS['TL_DCA']['tl_module']['fields']['organizationTypeTags'] = [
     'label' => &$GLOBALS['TL_LANG']['tl_module']['organizationTypeTags'],
     'exclude' => true,
     'inputType' => 'checkbox',
-    'options_callback' => static function () {
+    'options_callback' => $getUsedOrganizationTagOptions,
-        $rows = Database::getInstance()
-            ->prepare('SELECT DISTINCT t.id, t.tag FROM tl_tags t LEFT JOIN tl_tags_rel r ON r.tag_id=t.id AND r.ptable=? AND r.field=? ORDER BY t.tag ASC')
-            ->execute('tl_organization', 'tags')
-            ->fetchAllAssoc();
-
-        $options = [];
-
-        foreach ($rows as $row) {
-            $options[(int) $row['id']] = (string) $row['tag'];
-        }
-
-        return $options;
-    },
     'eval' => ['multiple' => true, 'tl_class' => 'clr'],
     'sql' => ['type' => 'blob', 'notnull' => false],
     'save_callback' => [
@@ -173,6 +193,14 @@ $GLOBALS['TL_DCA']['tl_module']['fields']['mapShowOrganizations'] = [
     'sql' => ['type' => 'string', 'length' => 1, 'fixed' => true, 'default' => ''],
 ];
 
+$GLOBALS['TL_DCA']['tl_module']['fields']['mapOrganizationListPage'] = [
+    'label' => &$GLOBALS['TL_LANG']['tl_module']['mapOrganizationListPage'],
+    'exclude' => true,
+    'inputType' => 'pageTree',
+    'eval' => ['fieldType' => 'radio', 'mandatory' => false, 'tl_class' => 'w50'],
+    'sql' => ['type' => 'integer', 'unsigned' => true, 'default' => 0],
+];
+
 $GLOBALS['TL_DCA']['tl_module']['fields']['mapShowExternalOrganizations'] = [
     'label' => &$GLOBALS['TL_LANG']['tl_module']['mapShowExternalOrganizations'],
     'exclude' => true,
@@ -203,20 +231,7 @@ $GLOBALS['TL_DCA']['tl_module']['fields']['mapInitialOrganizationTagId'] = [
     'label' => &$GLOBALS['TL_LANG']['tl_module']['mapInitialOrganizationTagId'],
     'exclude' => true,
     'inputType' => 'select',
-    'options_callback' => static function (): array {
+    'options_callback' => $getUsedOrganizationTagOptions,
-        $rows = Database::getInstance()
-            ->prepare('SELECT DISTINCT t.id, t.tag FROM tl_tags t LEFT JOIN tl_tags_rel r ON r.tag_id=t.id AND r.ptable=? AND r.field=? ORDER BY t.tag ASC')
-            ->execute('tl_organization', 'tags')
-            ->fetchAllAssoc();
-
-        $options = [];
-
-        foreach ($rows as $row) {
-            $options[(int) $row['id']] = (string) $row['tag'];
-        }
-
-        return $options;
-    },
     'eval' => ['includeBlankOption' => true, 'chosen' => true, 'tl_class' => 'w50'],
     'sql' => ['type' => 'integer', 'unsigned' => true, 'default' => 0],
 ];

contao/languages/de/tl_module.php

@@ -14,6 +14,7 @@ $GLOBALS['TL_LANG']['tl_module']['eventListDomId'] = ['Eventlisten-ID (DOM)', 'W
 $GLOBALS['TL_LANG']['tl_module']['organizationTypeTags'] = ['Anzuzeigende Organisationstypen', 'Optional: Begrenzen Sie die im Frontend anzeigbaren Organisationstyp-Tags. Leer = alle.'];
 $GLOBALS['TL_LANG']['tl_module']['eventTypeTags'] = ['Anzuzeigende Veranstaltungstypen', 'Optional: Begrenzen Sie die im Frontend anzeigbaren Veranstaltungstyp-Tags. Leer = alle.'];
 $GLOBALS['TL_LANG']['tl_module']['mapShowOrganizations'] = ['Organisationen anzeigen', 'Wenn aktiviert, werden Organisations-Marker auf der Karte dargestellt.'];
+$GLOBALS['TL_LANG']['tl_module']['mapOrganizationListPage'] = ['Seite für Organisationsliste', 'Optional: Seite, auf der die Organisationsliste liegt. Wird für den Link „mehr Infos“ im Organisations-Popup verwendet.'];
 $GLOBALS['TL_LANG']['tl_module']['mapShowExternalOrganizations'] = ['Externe Organisationen anzeigen', 'Wenn aktiviert, werden externe Organisationen (isExternal=1) zusätzlich auf der Karte dargestellt. Standard: nein.'];
 $GLOBALS['TL_LANG']['tl_module']['mapShowEvents'] = ['Veranstaltungen anzeigen', 'Wenn aktiviert, werden Event- (inkl. Orts-) Marker auf der Karte dargestellt.'];
 $GLOBALS['TL_LANG']['tl_module']['mapInitialDisplay'] = ['Initiale Anzeige', 'Definiert, welche Marker beim Laden der Karte initial angezeigt werden.'];

contao/languages/en/tl_module.php

@@ -14,6 +14,7 @@ $GLOBALS['TL_LANG']['tl_module']['eventListDomId'] = ['Event list ID (DOM)', 'Se
 $GLOBALS['TL_LANG']['tl_module']['organizationTypeTags'] = ['Displayed organization types', 'Optional: Limit which organization type tags can be selected in the frontend. Empty = all.'];
 $GLOBALS['TL_LANG']['tl_module']['eventTypeTags'] = ['Displayed event types', 'Optional: Limit which event type tags can be selected in the frontend. Empty = all.'];
 $GLOBALS['TL_LANG']['tl_module']['mapShowOrganizations'] = ['Show organizations', 'If enabled, organization markers are rendered on the map.'];
+$GLOBALS['TL_LANG']['tl_module']['mapOrganizationListPage'] = ['Organization list page', 'Optional: page containing the organization list. Used for the "more info" link in organization popups.'];
 $GLOBALS['TL_LANG']['tl_module']['mapShowExternalOrganizations'] = ['Show external organizations', 'If enabled, external organizations (isExternal=1) are additionally rendered on the map. Default: no.'];
 $GLOBALS['TL_LANG']['tl_module']['mapShowEvents'] = ['Show events', 'If enabled, event markers (including related locations) are rendered on the map.'];
 $GLOBALS['TL_LANG']['tl_module']['mapInitialDisplay'] = ['Initial display', 'Defines which markers are initially shown when the map is loaded.'];

contao/templates/frontend/event_edit.html.twig

@@ -10,11 +10,222 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/themes/airbnb.css">
     <link rel="stylesheet" href="https://unpkg.com/filepond/dist/filepond.min.css">
     <link rel="stylesheet" href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css">
+    <style>
+      .module-event-edit .event-editor-toolbar {
+        display: flex;
+        flex-wrap: wrap;
+        gap: .5rem;
+        margin: .5rem 0;
+      }
+
+      .module-event-edit .event-editor-toolbar button {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        min-width: 2.2rem;
+        padding: .4rem .65rem;
+        border: 1px solid #cbd5e1;
+        border-radius: .375rem;
+        background: #f8fafc;
+        color: #1f2937;
+        font-size: .9rem;
+        font-weight: 600;
+        cursor: pointer;
+        line-height: 1;
+      }
+
+      .module-event-edit .event-editor-toolbar button img {
+        width: 1rem;
+        height: 1rem;
+        display: block;
+        filter: brightness(0) saturate(100%) invert(18%) sepia(18%) saturate(522%) hue-rotate(177deg) brightness(94%) contrast(91%);
+        transition: filter .15s ease;
+      }
+
+      .module-event-edit .event-editor-toolbar button:hover {
+        background: #eef2ff;
+        border-color: #a5b4fc;
+      }
+
+      .module-event-edit .event-editor-toolbar button:hover img {
+        filter: brightness(0) saturate(100%) invert(24%) sepia(57%) saturate(2496%) hue-rotate(231deg) brightness(87%) contrast(105%);
+      }
+
+      .module-event-edit .event-editor-toolbar button.is-active {
+        background: #4f46e5;
+        border-color: #4338ca;
+        color: #fff;
+      }
+
+      .module-event-edit .event-editor-toolbar button.is-active img {
+        filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7486%) hue-rotate(63deg) brightness(106%) contrast(101%);
+      }
+
+      .module-event-edit .event-editor-toolbar button:disabled {
+        opacity: .45;
+        cursor: not-allowed;
+        background: #f1f5f9;
+        border-color: #d1d5db;
+        color: #6b7280;
+      }
+
+      .module-event-edit .event-editor-toolbar button:disabled img {
+        filter: brightness(0) saturate(100%) invert(49%) sepia(8%) saturate(616%) hue-rotate(175deg) brightness(91%) contrast(88%);
+      }
+
+      .module-event-edit .event-editor {
+        border: 1px solid #cbd5e1;
+        border-radius: .375rem;
+        padding: .75rem;
+        min-height: 14rem;
+        background: #fff;
+      }
+
+      .module-event-edit .event-editor .ProseMirror {
+        outline: none;
+        min-height: 12rem;
+      }
+
+      .module-event-edit .event-editor-counter {
+        margin-top: .5rem;
+        font-size: .85rem;
+        color: #475569;
+      }
+
+      .module-event-edit .event-editor-counter.is-over-limit {
+        color: #b91c1c;
+        font-weight: 600;
+      }
+
+      .module-event-edit .event-editor-shortcuts {
+        margin-top: .6rem;
+        font-size: .85rem;
+        color: #334155;
+      }
+
+      .module-event-edit .event-editor-shortcuts ul {
+        margin: .25rem 0 0;
+        padding-left: 1.1rem;
+      }
+
+      .module-event-edit .ns-tag-switches {
+        display: grid;
+        gap: .5rem;
+        margin-top: .35rem;
+      }
+
+      .module-event-edit .ns-tag-switch-item {
+        display: flex;
+        align-items: center;
+        gap: .65rem;
+      }
+
+      .module-event-edit .ns-tag-switch-item label {
+        margin: 0;
+      }
+
+      .module-event-edit .visually-hidden {
+        position: absolute !important;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        border: 0;
+        white-space: nowrap;
+      }
+
+      .module-event-edit .ns-tag-switch-input {
+        appearance: none;
+        width: 2.5rem;
+        height: 1.4rem;
+        border-radius: 999px;
+        border: 1px solid #94a3b8;
+        background: #e2e8f0;
+        position: relative;
+        cursor: pointer;
+        transition: background-color .15s ease;
+      }
+
+      .module-event-edit .ns-tag-switch-input::after {
+        content: '';
+        position: absolute;
+        top: .1rem;
+        left: .12rem;
+        width: 1rem;
+        height: 1rem;
+        border-radius: 999px;
+        background: #fff;
+        box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
+        transition: transform .15s ease;
+      }
+
+      .module-event-edit .ns-tag-switch-input:checked {
+        background: #4f46e5;
+        border-color: #4338ca;
+      }
+
+      .module-event-edit .ns-tag-switch-input:checked::after {
+        transform: translateX(1.05rem);
+      }
+
+      .module-event-edit .ns-tag-switch-input:focus-visible {
+        outline: 2px solid #1d4ed8;
+        outline-offset: 2px;
+      }
+
+      .module-event-edit .filepond--root {
+        width: 400px;
+        height: 600px;
+      }
+
+      .module-event-edit .filepond--root .filepond--drop-label {
+        height: 100%;
+        inset: 0;
+      }
+
+      .module-event-edit .filepond--root .filepond--drop-label label {
+        display: block;
+        width: auto;
+        float: none;
+        margin: 0;
+        padding: 0;
+        text-align: center;
+        font-weight: inherit;
+      }
+
+      .module-event-edit .filepond--root .filepond--drop-label,
+      .module-event-edit .filepond--root .filepond--drop-label label,
+      .module-event-edit .filepond--root .filepond--file-action-button {
+        pointer-events: auto;
+      }
+
+      .module-event-edit .filepond--root .filepond--image-preview-wrapper {
+        background: #f7f7f7;
+      }
+
+      .module-event-edit .filepond--root .filepond--panel-root,
+      .module-event-edit .filepond--root .filepond--item-panel,
+      .module-event-edit .filepond--root .filepond--image-preview {
+        background-color: #f7f7f7 !important;
+      }
+
+      .module-event-edit .filepond--root .filepond--image-preview-overlay-idle,
+      .module-event-edit .filepond--root .filepond--image-preview-overlay-success,
+      .module-event-edit .filepond--root .filepond--image-preview-overlay-failure {
+        background: rgba(255, 255, 255, 0.65);
+      }
+    </style>
     <script src="https://cdn.jsdelivr.net/npm/choices.js/public/assets/scripts/choices.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
     <script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/de.js"></script>
     <script src="https://unpkg.com/filepond/dist/filepond.min.js"></script>
     <script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.js"></script>
+    <script src="https://unpkg.com/filepond-plugin-image-resize/dist/filepond-plugin-image-resize.min.js"></script>
+    <script src="https://unpkg.com/filepond-plugin-image-transform/dist/filepond-plugin-image-transform.min.js"></script>
+    <script type="module" src="{{ asset('bundles/mummertmediaeventmanager/editor.js') }}?v=1"></script>
+    <script src="{{ asset('bundles/mummertmediaeventmanager/editor-fallback.js') }}?v=1"></script>
 
     {{ form_start(form, { action: app.request.uri, attr: { 'aria-live': 'polite' } }) }}
       <input type="hidden" name="REQUEST_TOKEN" value="{{ requestToken }}">
@@ -32,9 +243,119 @@
         {{ form_row(form.organization_ids) }}
       {% endif %}
       {{ form_row(form.location_id) }}
-      {{ form_row(form.tags) }}
+
-      {{ form_row(form.teaser) }}
+      <fieldset class="widget" aria-describedby="event-tags-help event-tags-errors">
-      {{ form_row(form.description) }}
+        <legend>{{ form.tags.vars.label }}</legend>
+        <p id="event-tags-help" class="event-editor-shortcuts">Mehrfachauswahl möglich. Mit Leertaste ein- und ausschalten.</p>
+        <div class="ns-tag-switches">
+          {% for tagField in form.tags %}
+            {% set tagLabelId = tagField.vars.id ~ '-label' %}
+            <div class="ns-tag-switch-item">
+              {{ form_widget(tagField, { attr: { 'aria-describedby': tagField.vars.id ~ '-state', 'aria-labelledby': tagLabelId } }) }}
+              {{ form_label(tagField, null, { label_attr: { id: tagLabelId } }) }}
+              <span
+                id="{{ tagField.vars.id }}-state"
+                class="visually-hidden"
+                data-switch-state-for="{{ tagField.vars.id }}"
+              >
+                {{ tagField.vars.checked ? 'Ein' : 'Aus' }}
+              </span>
+            </div>
+          {% endfor %}
+        </div>
+        <div id="event-tags-errors">{{ form_errors(form.tags) }}</div>
+      </fieldset>
+
+      <div class="widget">
+        {{ form_label(form.teaser, null, { label_attr: { id: form.teaser.vars.id ~ '-label' } }) }}
+
+        <div
+          class="event-editor-toolbar"
+          data-mm-editor-toolbar="{{ form.teaser.vars.id }}"
+          role="toolbar"
+          aria-label="Formatierungswerkzeuge Beschreibung"
+          aria-orientation="horizontal"
+          aria-describedby="{{ form.teaser.vars.id }}-shortcuts"
+          aria-controls="{{ form.teaser.vars.id }}-editor"
+        >
+          <button type="button" data-action="paragraph" title="Absatz">
+            <img src="{{ asset('bundles/newssubmission/icons/paragraph.svg') }}" alt="" aria-hidden="true">
+            <span class="visually-hidden">Absatz</span>
+          </button>
+          <button type="button" data-action="h2" title="Überschrift H2">
+            <img src="{{ asset('bundles/newssubmission/icons/h2.svg') }}" alt="" aria-hidden="true">
+            <span class="visually-hidden">H2</span>
+          </button>
+          <button type="button" data-action="h3" title="Überschrift H3">
+            <img src="{{ asset('bundles/newssubmission/icons/h3.svg') }}" alt="" aria-hidden="true">
+            <span class="visually-hidden">H3</span>
+          </button>
+          <button type="button" data-action="bold" title="Fett (Strg/Cmd+B)" aria-keyshortcuts="Control+B Meta+B">
+            <img src="{{ asset('bundles/newssubmission/icons/bold.svg') }}" alt="" aria-hidden="true">
+            <span class="visually-hidden">Fett</span>
+          </button>
+          <button type="button" data-action="italic" title="Kursiv (Strg/Cmd+I)" aria-keyshortcuts="Control+I Meta+I">
+            <img src="{{ asset('bundles/newssubmission/icons/italic.svg') }}" alt="" aria-hidden="true">
+            <span class="visually-hidden">Kursiv</span>
+          </button>
+          <button type="button" data-action="underline" title="Unterstrichen (Strg/Cmd+U)" aria-keyshortcuts="Control+U Meta+U">
+            <img src="{{ asset('bundles/newssubmission/icons/underline.svg') }}" alt="" aria-hidden="true">
+            <span class="visually-hidden">Unterstrichen</span>
+          </button>
+          <button type="button" data-action="bulletList" title="Liste">
+            <img src="{{ asset('bundles/newssubmission/icons/ul.svg') }}" alt="" aria-hidden="true">
+            <span class="visually-hidden">Liste</span>
+          </button>
+          <button type="button" data-action="orderedList" title="Nummerierte Liste">
+            <img src="{{ asset('bundles/newssubmission/icons/ol.svg') }}" alt="" aria-hidden="true">
+            <span class="visually-hidden">Nummerierte Liste</span>
+          </button>
+          <button type="button" data-action="indent" title="Einzug vergrößern">
+            <img src="{{ asset('bundles/newssubmission/icons/indent.svg') }}" alt="" aria-hidden="true">
+            <span class="visually-hidden">Einzug vergrößern</span>
+          </button>
+          <button type="button" data-action="outdent" title="Einzug verkleinern">
+            <img src="{{ asset('bundles/newssubmission/icons/outdent.svg') }}" alt="" aria-hidden="true">
+            <span class="visually-hidden">Einzug verkleinern</span>
+          </button>
+          <button type="button" data-action="undo" title="Rückgängig (Strg/Cmd+Z)" aria-keyshortcuts="Control+Z Meta+Z">
+            <img src="{{ asset('bundles/newssubmission/icons/undo.svg') }}" alt="" aria-hidden="true">
+            <span class="visually-hidden">Rückgängig</span>
+          </button>
+          <button type="button" data-action="redo" title="Wiederholen (Strg/Cmd+Shift+Z)" aria-keyshortcuts="Control+Shift+Z Meta+Shift+Z">
+            <img src="{{ asset('bundles/newssubmission/icons/redo.svg') }}" alt="" aria-hidden="true">
+            <span class="visually-hidden">Wiederholen</span>
+          </button>
+        </div>
+
+        <div id="{{ form.teaser.vars.id }}-shortcuts" class="event-editor-shortcuts">
+          <strong>Tastaturkürzel:</strong>
+          <ul>
+            <li><span aria-hidden="true">Strg/Cmd+B</span> – Fett</li>
+            <li><span aria-hidden="true">Strg/Cmd+I</span> – Kursiv</li>
+            <li><span aria-hidden="true">Strg/Cmd+U</span> – Unterstrichen</li>
+            <li><span aria-hidden="true">Strg/Cmd+Z</span> – Rückgängig</li>
+            <li><span aria-hidden="true">Strg/Cmd+Shift+Z</span> – Wiederholen</li>
+            <li>Pfeiltasten links/rechts in der Toolbar – zwischen Buttons wechseln</li>
+          </ul>
+        </div>
+
+        <div
+          id="{{ form.teaser.vars.id }}-editor"
+          class="event-editor"
+          data-mm-editor="tiptap"
+          data-textarea-id="{{ form.teaser.vars.id }}"
+          data-editor-label="Beschreibung"
+          role="textbox"
+          aria-multiline="true"
+          aria-labelledby="{{ form.teaser.vars.id }}-label"
+          aria-describedby="{{ form.teaser.vars.id }}-shortcuts {{ form.teaser.vars.id }}-counter {{ form.teaser.vars.id }}-errors"
+        ></div>
+        <div id="{{ form.teaser.vars.id }}-counter" class="event-editor-counter" data-mm-editor-counter-for="{{ form.teaser.vars.id }}" role="status" aria-live="polite"></div>
+        {{ form_widget(form.teaser, { attr: { class: 'js-event-teaser-source', rows: 8, 'aria-hidden': 'true', tabindex: '-1' } }) }}
+        <div id="{{ form.teaser.vars.id }}-errors">{{ form_errors(form.teaser) }}</div>
+      </div>
+
       {{ form_row(form.url) }}
       {{ form_row(form.addImage) }}
 
@@ -59,7 +380,7 @@
       (function () {
         const locationSelect = document.querySelector('select.js-location-choice');
         const organizationSelect = document.querySelector('select.js-organization-choice');
-        const typeSelect = document.querySelector('select.js-event-tags-choice');
+        const tagSwitches = document.querySelectorAll('input.ns-tag-switch-input[role="switch"]');
 
         if (organizationSelect && typeof window.Choices === 'function') {
           new window.Choices(organizationSelect, {
@@ -86,18 +407,21 @@
           });
         }
 
-        if (typeSelect && typeof window.Choices === 'function') {
+        const syncSwitchState = (input) => {
-          new window.Choices(typeSelect, {
+          const isChecked = !!input.checked;
-            searchEnabled: false,
+          input.setAttribute('aria-checked', isChecked ? 'true' : 'false');
-            shouldSort: false,
+
-            removeItemButton: true,
+          const stateNode = document.querySelector(`[data-switch-state-for="${input.id}"]`);
-            itemSelectText: '',
+
-            placeholder: true,
+          if (stateNode) {
-            placeholderValue: typeSelect.dataset.placeholder || 'Typen suchen …',
+            stateNode.textContent = isChecked ? 'Ein' : 'Aus';
-            noResultsText: 'Keine Treffer',
-            noChoicesText: 'Keine Optionen verfügbar'
-          });
           }
+        };
+
+        tagSwitches.forEach((input) => {
+          syncSwitchState(input);
+          input.addEventListener('change', () => syncSwitchState(input));
+        });
 
         if (typeof window.flatpickr === 'function') {
           const dateInputs = document.querySelectorAll('input.js-flatpickr-date');
@@ -212,14 +536,46 @@
           if (typeof window.FilePondPluginImagePreview !== 'undefined') {
             window.FilePond.registerPlugin(window.FilePondPluginImagePreview);
           }
+          if (typeof window.FilePondPluginImageResize !== 'undefined') {
+            window.FilePond.registerPlugin(window.FilePondPluginImageResize);
+          }
+          if (typeof window.FilePondPluginImageTransform !== 'undefined') {
+            window.FilePond.registerPlugin(window.FilePondPluginImageTransform);
+          }
 
           const filePondOptions = {
             instantUpload: false,
             storeAsFile: true,
             allowMultiple: false,
             allowReplace: true,
+            stylePanelAspectRatio: 0.6666667,
+            styleItemPanelAspectRatio: 0.6666667,
             credits: false,
             acceptedFileTypes: ['image/*'],
+            allowImageResize: true,
+            imageResizeUpscale: false,
+            allowImageTransform: true,
+            onaddfile: function (error, fileItem) {
+              if (error || !fileItem || typeof fileItem.setMetadata !== 'function') {
+                return;
+              }
+
+              const fileType = fileItem.fileType || (fileItem.file && fileItem.file.type) || '';
+
+              if (fileType === 'image/svg+xml') {
+                fileItem.setMetadata('resize', null);
+                return;
+              }
+
+              fileItem.setMetadata('resize', {
+                mode: 'contain',
+                upscale: false,
+                size: {
+                  width: 2000,
+                  height: 2000
+                }
+              });
+            },
             labelIdle: 'Bild hierher ziehen oder <span class="filepond--label-action">durchsuchen</span>'
           };
 

contao/templates/frontend/event_filter.html.twig

@@ -8,6 +8,7 @@
                     <option value="tag-{{ tag.id }}">{{ tag.title }} ({{ tag.count }})</option>
                 {% endfor %}
             </select>
+            <button type="button" class="eventfilter-clear" data-eventfilter-clear="tag" aria-label="Kategorie-Filter zurücksetzen" hidden><span class="icon-cross"></span></button>
         </div>
 
         <div class="widget-select places">
@@ -18,6 +19,7 @@
                     <option value="location-{{ location.id }}">{{ location.title }} ({{ location.count }})</option>
                 {% endfor %}
             </select>
+            <button type="button" class="eventfilter-clear" data-eventfilter-clear="location" aria-label="Ort-Filter zurücksetzen" hidden><span class="icon-cross"></span></button>
         </div>
 
         <div class="widget-select org">
@@ -28,11 +30,10 @@
                     <option value="org-{{ organization.id }}">{{ organization.title }} ({{ organization.count }})</option>
                 {% endfor %}
             </select>
+            <button type="button" class="eventfilter-clear" data-eventfilter-clear="org" aria-label="Veranstalter-Filter zurücksetzen" hidden><span class="icon-cross"></span></button>
         </div>
     </div>
 
-    <button type="button" id="eventfilter-reset" class="eventfilter-reset" aria-label="Alle Filter zurücksetzen" aria-controls="{{ targetEventListId|default('eventlist')|e('html_attr') }}" hidden>Filter zurücksetzen</button>
-
     <p id="eventfilter-status" class="visually-hidden" aria-live="polite"></p>
 </div>
 
@@ -73,12 +74,37 @@
         outline-offset: 3px;
     }
 
+    #eventfilters .widget-select.active::before {
+        display: none;
+    }
+
     #eventfilters select:focus-visible {
         outline: 3px solid currentColor;
         outline-offset: 3px;
     }
 
-    #eventfilters .eventfilter-reset[hidden] {
+    #eventfilters .widget-select {
+        position: relative;
+    }
+
+    #eventfilters .eventfilter-clear {
+        position: absolute;
+        top: 50%;
+        right: 0;
+        transform: translateY(-50%);
+        margin: 0;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        border: 0;
+        background: transparent;
+        color: inherit;
+        cursor: pointer;
+        padding: 1em;
+        line-height: 1;
+    }
+
+    #eventfilters .eventfilter-clear[hidden] {
         display: none;
     }
 
@@ -107,7 +133,9 @@
     const tagWidget = tagSelect?.closest('.widget-select');
     const locationWidget = locationSelect?.closest('.widget-select');
     const orgWidget = orgSelect?.closest('.widget-select');
-    const resetButton = filters.querySelector('#eventfilter-reset');
+    const clearTagButton = filters.querySelector('[data-eventfilter-clear="tag"]');
+    const clearLocationButton = filters.querySelector('[data-eventfilter-clear="location"]');
+    const clearOrgButton = filters.querySelector('[data-eventfilter-clear="org"]');
     const status = filters.querySelector('#eventfilter-status');
     const stateStorageKey = 'event-filter-state';
     const stateQueryKey = 'event_filter';
@@ -279,9 +307,25 @@
         locationWidget?.classList.toggle('active', hasActiveLocation);
         orgWidget?.classList.toggle('active', hasActiveOrg);
 
-        if (resetButton) {
+        if (clearTagButton) {
-            resetButton.hidden = !(hasActiveTag || hasActiveLocation || hasActiveOrg);
+            clearTagButton.hidden = !hasActiveTag;
         }
+
+        if (clearLocationButton) {
+            clearLocationButton.hidden = !hasActiveLocation;
+        }
+
+        if (clearOrgButton) {
+            clearOrgButton.hidden = !hasActiveOrg;
+        }
+    };
+
+    const resetAllFilters = () => {
+        setSelectValue(tagSelect, '');
+        setSelectValue(locationSelect, '');
+        setSelectValue(orgSelect, '');
+
+        applyFilter({ type: 'all', value: '' });
     };
 
     const parseIdList = (rawValue) => (rawValue ?? '')
@@ -402,13 +446,9 @@
         );
     });
 
-    resetButton?.addEventListener('click', () => {
+    clearTagButton?.addEventListener('click', resetAllFilters);
-        setSelectValue(tagSelect, '');
+    clearLocationButton?.addEventListener('click', resetAllFilters);
-        setSelectValue(locationSelect, '');
+    clearOrgButton?.addEventListener('click', resetAllFilters);
-        setSelectValue(orgSelect, '');
-
-        applyFilter({ type: 'all', value: '' });
-    });
 
     const urlState = readUrlState();
     const storedState = readStoredState();

contao/templates/frontend/event_map.html.twig

@@ -105,7 +105,11 @@
         width: 100%;
         min-height: 420px;
     }
+
+    .maplibregl-popup {
+        z-index: 2147483647;
+    }
 </style>
 
 <script type="application/json" id="{{ mapDataElementId|e('html_attr') }}">{{ mapItemsJson|raw }}</script>
-<script type="module" src="/bundles/mummertmediaeventmanager/assets/map-module.js?v=20260226h"></script>
+<script type="module" src="/bundles/mummertmediaeventmanager/assets/map-module.js?v=20260227b"></script>

contao/templates/frontend/member_events.html.twig

@@ -16,6 +16,7 @@
           </span>
 
           {% if isEditor %}
+            <div class="member-events-actions">
               <form method="post" style="display:inline;" aria-label="Sichtbarkeit für {{ item.title }} ändern">
                 <input type="hidden" name="REQUEST_TOKEN" value="{{ requestToken }}">
                 <input type="hidden" name="action" value="toggle_published">
@@ -27,19 +28,20 @@
                 <a href="{{ item.editUrl }}" aria-label="{{ item.title }} bearbeiten">Bearbeiten</a>
               {% endif %}
 
-            <form method="post" style="display:inline;" aria-label="{{ item.title }} duplizieren">
+              <form method="post" style="display:inline;" data-confirm-message="{{ ('Möchten Sie das Event \"' ~ item.title ~ '\" wirklich duplizieren?')|e('html_attr') }}" aria-label="{{ item.title }} duplizieren">
                 <input type="hidden" name="REQUEST_TOKEN" value="{{ requestToken }}">
                 <input type="hidden" name="action" value="duplicate">
                 <input type="hidden" name="event_id" value="{{ item.id }}">
                 <button type="submit" aria-label="{{ item.title }} duplizieren">Duplizieren</button>
               </form>
 
-            <form method="post" style="display:inline;" onsubmit="return confirm('wirklich löschen?');" aria-label="{{ item.title }} löschen">
+              <form method="post" style="display:inline;" data-confirm-message="{{ ('Möchten Sie das Event \"' ~ item.title ~ '\" wirklich löschen?')|e('html_attr') }}" aria-label="{{ item.title }} löschen">
                 <input type="hidden" name="REQUEST_TOKEN" value="{{ requestToken }}">
                 <input type="hidden" name="action" value="delete">
                 <input type="hidden" name="event_id" value="{{ item.id }}">
                 <button type="submit" aria-label="{{ item.title }} löschen">Löschen</button>
               </form>
+            </div>
           {% endif %}
         </li>
       {% endfor %}
@@ -54,6 +56,8 @@
     </form>
   {% endif %}
 
+  <script src="/bundles/mummertmediaeventmanager/assets/member-events-confirm.js?v=20260301a"></script>
+
   <h2>Vergangene Veranstaltungen</h2>
   {% if pastEvents is empty %}
     <p>Keine vergangenen Veranstaltungen gefunden.</p>
@@ -69,6 +73,7 @@
           </span>
 
           {% if isEditor %}
+            <div class="member-events-actions">
               <form method="post" style="display:inline;" aria-label="Sichtbarkeit für {{ item.title }} ändern">
                 <input type="hidden" name="REQUEST_TOKEN" value="{{ requestToken }}">
                 <input type="hidden" name="action" value="toggle_published">
@@ -80,19 +85,20 @@
                 <a href="{{ item.editUrl }}" aria-label="{{ item.title }} bearbeiten">Bearbeiten</a>
               {% endif %}
 
-            <form method="post" style="display:inline;" aria-label="{{ item.title }} duplizieren">
+              <form method="post" style="display:inline;" data-confirm-message="{{ ('Möchten Sie das Event \"' ~ item.title ~ '\" wirklich duplizieren?')|e('html_attr') }}" aria-label="{{ item.title }} duplizieren">
                 <input type="hidden" name="REQUEST_TOKEN" value="{{ requestToken }}">
                 <input type="hidden" name="action" value="duplicate">
                 <input type="hidden" name="event_id" value="{{ item.id }}">
                 <button type="submit" aria-label="{{ item.title }} duplizieren">Duplizieren</button>
               </form>
 
-            <form method="post" style="display:inline;" onsubmit="return confirm('wirklich löschen?');" aria-label="{{ item.title }} löschen">
+              <form method="post" style="display:inline;" data-confirm-message="{{ ('Möchten Sie das Event \"' ~ item.title ~ '\" wirklich löschen?')|e('html_attr') }}" aria-label="{{ item.title }} löschen">
                 <input type="hidden" name="REQUEST_TOKEN" value="{{ requestToken }}">
                 <input type="hidden" name="action" value="delete">
                 <input type="hidden" name="event_id" value="{{ item.id }}">
                 <button type="submit" aria-label="{{ item.title }} löschen">Löschen</button>
               </form>
+            </div>
           {% endif %}
         </li>
       {% endfor %}

contao/templates/frontend/organization_edit.html.twig

@@ -5,17 +5,348 @@
     <p role="alert">{{ error }}</p>
     <p><a href="{{ backUrl }}">Zurück</a></p>
   {% elseif form is defined and form %}
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/choices.js/public/assets/styles/choices.min.css">
     <link rel="stylesheet" href="https://unpkg.com/filepond/dist/filepond.min.css">
     <link rel="stylesheet" href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css">
-    <script src="https://cdn.jsdelivr.net/npm/choices.js/public/assets/scripts/choices.min.js"></script>
+    <style>
+      .module-organization-edit .event-editor-toolbar {
+        display: flex;
+        flex-wrap: wrap;
+        gap: .5rem;
+        margin: .5rem 0;
+      }
+
+      .module-organization-edit .event-editor-toolbar button {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        min-width: 2.2rem;
+        padding: .4rem .65rem;
+        border: 1px solid #cbd5e1;
+        border-radius: .375rem;
+        background: #f8fafc;
+        color: #1f2937;
+        font-size: .9rem;
+        font-weight: 600;
+        cursor: pointer;
+        line-height: 1;
+      }
+
+      .module-organization-edit .event-editor-toolbar button img {
+        width: 1rem;
+        height: 1rem;
+        display: block;
+        filter: brightness(0) saturate(100%) invert(18%) sepia(18%) saturate(522%) hue-rotate(177deg) brightness(94%) contrast(91%);
+        transition: filter .15s ease;
+      }
+
+      .module-organization-edit .event-editor-toolbar button:hover {
+        background: #eef2ff;
+        border-color: #a5b4fc;
+      }
+
+      .module-organization-edit .event-editor-toolbar button:hover img {
+        filter: brightness(0) saturate(100%) invert(24%) sepia(57%) saturate(2496%) hue-rotate(231deg) brightness(87%) contrast(105%);
+      }
+
+      .module-organization-edit .event-editor-toolbar button.is-active {
+        background: #4f46e5;
+        border-color: #4338ca;
+        color: #fff;
+      }
+
+      .module-organization-edit .event-editor-toolbar button.is-active img {
+        filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7486%) hue-rotate(63deg) brightness(106%) contrast(101%);
+      }
+
+      .module-organization-edit .event-editor-toolbar button:disabled {
+        opacity: .45;
+        cursor: not-allowed;
+        background: #f1f5f9;
+        border-color: #d1d5db;
+        color: #6b7280;
+      }
+
+      .module-organization-edit .event-editor-toolbar button:disabled img {
+        filter: brightness(0) saturate(100%) invert(49%) sepia(8%) saturate(616%) hue-rotate(175deg) brightness(91%) contrast(88%);
+      }
+
+      .module-organization-edit .event-editor {
+        border: 1px solid #cbd5e1;
+        border-radius: .375rem;
+        padding: .75rem;
+        min-height: 14rem;
+        background: #fff;
+      }
+
+      .module-organization-edit .event-editor .ProseMirror {
+        outline: none;
+        min-height: 12rem;
+      }
+
+      .module-organization-edit .event-editor-counter {
+        margin-top: .5rem;
+        font-size: .85rem;
+        color: #475569;
+      }
+
+      .module-organization-edit .event-editor-counter.is-over-limit {
+        color: #b91c1c;
+        font-weight: 600;
+      }
+
+      .module-organization-edit .event-editor-shortcuts {
+        margin-top: .6rem;
+        font-size: .85rem;
+        color: #334155;
+      }
+
+      .module-organization-edit .event-editor-shortcuts ul {
+        margin: .25rem 0 0;
+        padding-left: 1.1rem;
+      }
+
+      .module-organization-edit .ns-tag-switches {
+        display: grid;
+        gap: .5rem;
+        margin-top: .35rem;
+      }
+
+      .module-organization-edit .ns-tag-switch-item {
+        display: flex;
+        align-items: center;
+        gap: .65rem;
+      }
+
+      .module-organization-edit .ns-tag-switch-item label {
+        margin: 0;
+      }
+
+      .module-organization-edit .visually-hidden {
+        position: absolute !important;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        border: 0;
+        white-space: nowrap;
+      }
+
+      .module-organization-edit .ns-tag-switch-input {
+        appearance: none;
+        width: 2.5rem;
+        height: 1.4rem;
+        border-radius: 999px;
+        border: 1px solid #94a3b8;
+        background: #e2e8f0;
+        position: relative;
+        cursor: pointer;
+        transition: background-color .15s ease;
+      }
+
+      .module-organization-edit .ns-tag-switch-input::after {
+        content: '';
+        position: absolute;
+        top: .1rem;
+        left: .12rem;
+        width: 1rem;
+        height: 1rem;
+        border-radius: 999px;
+        background: #fff;
+        box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
+        transition: transform .15s ease;
+      }
+
+      .module-organization-edit .ns-tag-switch-input:checked {
+        background: #4f46e5;
+        border-color: #4338ca;
+      }
+
+      .module-organization-edit .ns-tag-switch-input:checked::after {
+        transform: translateX(1.05rem);
+      }
+
+      .module-organization-edit .ns-tag-switch-input:focus-visible {
+        outline: 2px solid #1d4ed8;
+        outline-offset: 2px;
+      }
+
+      .module-organization-edit .filepond--root {
+        width: 400px;
+        height: 400px;
+      }
+
+      .module-organization-edit .filepond--root .filepond--drop-label {
+        height: 100%;
+        inset: 0;
+      }
+
+      .module-organization-edit .filepond--root .filepond--drop-label label {
+        display: block;
+        width: auto;
+        float: none;
+        margin: 0;
+        padding: 0;
+        text-align: center;
+        font-weight: inherit;
+      }
+
+      .module-organization-edit .filepond--root .filepond--drop-label,
+      .module-organization-edit .filepond--root .filepond--drop-label label,
+      .module-organization-edit .filepond--root .filepond--file-action-button {
+        pointer-events: auto;
+      }
+
+      .module-organization-edit .filepond--root .filepond--image-preview-wrapper {
+        background: #f7f7f7;
+      }
+
+      .module-organization-edit .filepond--root .filepond--panel-root,
+      .module-organization-edit .filepond--root .filepond--item-panel,
+      .module-organization-edit .filepond--root .filepond--image-preview {
+        background-color: #f7f7f7 !important;
+      }
+
+      .module-organization-edit .filepond--root .filepond--image-preview-overlay-idle,
+      .module-organization-edit .filepond--root .filepond--image-preview-overlay-success,
+      .module-organization-edit .filepond--root .filepond--image-preview-overlay-failure {
+        background: rgba(255, 255, 255, 0.65);
+      }
+    </style>
     <script src="https://unpkg.com/filepond/dist/filepond.min.js"></script>
     <script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.js"></script>
+    <script src="https://unpkg.com/filepond-plugin-image-resize/dist/filepond-plugin-image-resize.min.js"></script>
+    <script src="https://unpkg.com/filepond-plugin-image-transform/dist/filepond-plugin-image-transform.min.js"></script>
+    <script type="module" src="{{ asset('bundles/mummertmediaeventmanager/editor.js') }}?v=1"></script>
+    <script src="{{ asset('bundles/mummertmediaeventmanager/editor-fallback.js') }}?v=1"></script>
 
     {{ form_start(form, { attr: { 'aria-live': 'polite' } }) }}
       <input type="hidden" name="REQUEST_TOKEN" value="{{ requestToken }}">
       <input type="hidden" id="remove_logo" name="remove_logo" value="0">
-      {{ form_widget(form) }}
+      {{ form_row(form.title) }}
+      {{ form_row(form.street) }}
+      {{ form_row(form.street2) }}
+      {{ form_row(form.postal) }}
+      {{ form_row(form.city) }}
+      {{ form_row(form.phone) }}
+      {{ form_row(form.email) }}
+      {{ form_row(form.website) }}
+
+      <div class="widget">
+        {{ form_label(form.description, null, { label_attr: { id: form.description.vars.id ~ '-label' } }) }}
+
+        <div
+          class="event-editor-toolbar"
+          data-mm-editor-toolbar="{{ form.description.vars.id }}"
+          role="toolbar"
+          aria-label="Formatierungswerkzeuge Beschreibung"
+          aria-orientation="horizontal"
+          aria-describedby="{{ form.description.vars.id }}-shortcuts"
+          aria-controls="{{ form.description.vars.id }}-editor"
+        >
+          <button type="button" data-action="paragraph" title="Absatz">
+            <img src="{{ asset('bundles/newssubmission/icons/paragraph.svg') }}" alt="" aria-hidden="true">
+            <span class="visually-hidden">Absatz</span>
+          </button>
+          <button type="button" data-action="h2" title="Überschrift H2">
+            <img src="{{ asset('bundles/newssubmission/icons/h2.svg') }}" alt="" aria-hidden="true">
+            <span class="visually-hidden">H2</span>
+          </button>
+          <button type="button" data-action="h3" title="Überschrift H3">
+            <img src="{{ asset('bundles/newssubmission/icons/h3.svg') }}" alt="" aria-hidden="true">
+            <span class="visually-hidden">H3</span>
+          </button>
+          <button type="button" data-action="bold" title="Fett (Strg/Cmd+B)" aria-keyshortcuts="Control+B Meta+B">
+            <img src="{{ asset('bundles/newssubmission/icons/bold.svg') }}" alt="" aria-hidden="true">
+            <span class="visually-hidden">Fett</span>
+          </button>
+          <button type="button" data-action="italic" title="Kursiv (Strg/Cmd+I)" aria-keyshortcuts="Control+I Meta+I">
+            <img src="{{ asset('bundles/newssubmission/icons/italic.svg') }}" alt="" aria-hidden="true">
+            <span class="visually-hidden">Kursiv</span>
+          </button>
+          <button type="button" data-action="underline" title="Unterstrichen (Strg/Cmd+U)" aria-keyshortcuts="Control+U Meta+U">
+            <img src="{{ asset('bundles/newssubmission/icons/underline.svg') }}" alt="" aria-hidden="true">
+            <span class="visually-hidden">Unterstrichen</span>
+          </button>
+          <button type="button" data-action="bulletList" title="Liste">
+            <img src="{{ asset('bundles/newssubmission/icons/ul.svg') }}" alt="" aria-hidden="true">
+            <span class="visually-hidden">Liste</span>
+          </button>
+          <button type="button" data-action="orderedList" title="Nummerierte Liste">
+            <img src="{{ asset('bundles/newssubmission/icons/ol.svg') }}" alt="" aria-hidden="true">
+            <span class="visually-hidden">Nummerierte Liste</span>
+          </button>
+          <button type="button" data-action="indent" title="Einzug vergrößern">
+            <img src="{{ asset('bundles/newssubmission/icons/indent.svg') }}" alt="" aria-hidden="true">
+            <span class="visually-hidden">Einzug vergrößern</span>
+          </button>
+          <button type="button" data-action="outdent" title="Einzug verkleinern">
+            <img src="{{ asset('bundles/newssubmission/icons/outdent.svg') }}" alt="" aria-hidden="true">
+            <span class="visually-hidden">Einzug verkleinern</span>
+          </button>
+          <button type="button" data-action="undo" title="Rückgängig (Strg/Cmd+Z)" aria-keyshortcuts="Control+Z Meta+Z">
+            <img src="{{ asset('bundles/newssubmission/icons/undo.svg') }}" alt="" aria-hidden="true">
+            <span class="visually-hidden">Rückgängig</span>
+          </button>
+          <button type="button" data-action="redo" title="Wiederholen (Strg/Cmd+Shift+Z)" aria-keyshortcuts="Control+Shift+Z Meta+Shift+Z">
+            <img src="{{ asset('bundles/newssubmission/icons/redo.svg') }}" alt="" aria-hidden="true">
+            <span class="visually-hidden">Wiederholen</span>
+          </button>
+        </div>
+
+        <div id="{{ form.description.vars.id }}-shortcuts" class="event-editor-shortcuts">
+          <strong>Tastaturkürzel:</strong>
+          <ul>
+            <li><span aria-hidden="true">Strg/Cmd+B</span> – Fett</li>
+            <li><span aria-hidden="true">Strg/Cmd+I</span> – Kursiv</li>
+            <li><span aria-hidden="true">Strg/Cmd+U</span> – Unterstrichen</li>
+            <li><span aria-hidden="true">Strg/Cmd+Z</span> – Rückgängig</li>
+            <li><span aria-hidden="true">Strg/Cmd+Shift+Z</span> – Wiederholen</li>
+            <li>Pfeiltasten links/rechts in der Toolbar – zwischen Buttons wechseln</li>
+          </ul>
+        </div>
+
+        <div
+          id="{{ form.description.vars.id }}-editor"
+          class="event-editor"
+          data-mm-editor="tiptap"
+          data-textarea-id="{{ form.description.vars.id }}"
+          data-editor-label="Beschreibung"
+          role="textbox"
+          aria-multiline="true"
+          aria-labelledby="{{ form.description.vars.id }}-label"
+          aria-describedby="{{ form.description.vars.id }}-shortcuts {{ form.description.vars.id }}-counter {{ form.description.vars.id }}-errors"
+        ></div>
+        <div id="{{ form.description.vars.id }}-counter" class="event-editor-counter" data-mm-editor-counter-for="{{ form.description.vars.id }}" role="status" aria-live="polite"></div>
+        {{ form_widget(form.description, { attr: { class: 'js-organization-description-source', rows: 8, 'aria-hidden': 'true', tabindex: '-1' } }) }}
+        <div id="{{ form.description.vars.id }}-errors">{{ form_errors(form.description) }}</div>
+      </div>
+
+      <fieldset class="widget" aria-describedby="organization-tags-help organization-tags-errors">
+        <legend>{{ form.tags.vars.label }}</legend>
+        <p id="organization-tags-help" class="event-editor-shortcuts">Mehrfachauswahl möglich. Mit Leertaste ein- und ausschalten.</p>
+        <div class="ns-tag-switches">
+          {% for tagField in form.tags %}
+            {% set tagLabelId = tagField.vars.id ~ '-label' %}
+            <div class="ns-tag-switch-item">
+              {{ form_widget(tagField, { attr: { 'aria-describedby': tagField.vars.id ~ '-state', 'aria-labelledby': tagLabelId } }) }}
+              {{ form_label(tagField, null, { label_attr: { id: tagLabelId } }) }}
+              <span
+                id="{{ tagField.vars.id }}-state"
+                class="visually-hidden"
+                data-switch-state-for="{{ tagField.vars.id }}"
+              >
+                {{ tagField.vars.checked ? 'Ein' : 'Aus' }}
+              </span>
+            </div>
+          {% endfor %}
+        </div>
+        <div id="organization-tags-errors">{{ form_errors(form.tags) }}</div>
+      </fieldset>
+
+      {{ form_row(form.logoUpload) }}
+
       <div class="actions" aria-label="Formularaktionen">
         <button type="submit" id="save-btn" disabled>Speichern</button>
         <button type="submit" id="save-back-btn" name="save_back" value="1" disabled>Speichern und Zurück</button>
@@ -25,20 +356,23 @@
 
     <script>
       (function () {
-        const typeSelect = document.querySelector('select.js-organization-tags-choice');
+        const tagSwitches = document.querySelectorAll('input.ns-tag-switch-input[role="switch"]');
 
-        if (typeSelect && typeof window.Choices === 'function') {
+        const syncSwitchState = (input) => {
-          new window.Choices(typeSelect, {
+          const isChecked = !!input.checked;
-            searchEnabled: false,
+          input.setAttribute('aria-checked', isChecked ? 'true' : 'false');
-            shouldSort: false,
+
-            removeItemButton: true,
+          const stateNode = document.querySelector(`[data-switch-state-for="${input.id}"]`);
-            itemSelectText: '',
+
-            placeholder: true,
+          if (stateNode) {
-            placeholderValue: typeSelect.dataset.placeholder || 'Typ auswählen …',
+            stateNode.textContent = isChecked ? 'Ein' : 'Aus';
-            noResultsText: 'Keine Treffer',
-            noChoicesText: 'Keine Optionen verfügbar'
-          });
           }
+        };
+
+        tagSwitches.forEach((input) => {
+          syncSwitchState(input);
+          input.addEventListener('change', () => syncSwitchState(input));
+        });
 
         const currentLogoPath = {{ (currentLogoPath is defined and currentLogoPath) ? ('/' ~ currentLogoPath)|json_encode|raw : 'null' }};
         const logoInput = document.querySelector('input.js-logo-upload');
@@ -73,14 +407,46 @@
           if (typeof window.FilePondPluginImagePreview !== 'undefined') {
             window.FilePond.registerPlugin(window.FilePondPluginImagePreview);
           }
+          if (typeof window.FilePondPluginImageResize !== 'undefined') {
+            window.FilePond.registerPlugin(window.FilePondPluginImageResize);
+          }
+          if (typeof window.FilePondPluginImageTransform !== 'undefined') {
+            window.FilePond.registerPlugin(window.FilePondPluginImageTransform);
+          }
 
           const filePondOptions = {
             instantUpload: false,
             storeAsFile: true,
             allowMultiple: false,
             allowReplace: true,
+            stylePanelAspectRatio: 1,
+            styleItemPanelAspectRatio: 1,
             credits: false,
             acceptedFileTypes: ['image/*'],
+            allowImageResize: true,
+            imageResizeUpscale: false,
+            allowImageTransform: true,
+            onaddfile: function (error, fileItem) {
+              if (error || !fileItem || typeof fileItem.setMetadata !== 'function') {
+                return;
+              }
+
+              const fileType = fileItem.fileType || (fileItem.file && fileItem.file.type) || '';
+
+              if (fileType === 'image/svg+xml') {
+                fileItem.setMetadata('resize', null);
+                return;
+              }
+
+              fileItem.setMetadata('resize', {
+                mode: 'contain',
+                upscale: false,
+                size: {
+                  width: 800,
+                  height: 800
+                }
+              });
+            },
             labelIdle: 'Logo hierher ziehen oder <span class="filepond--label-action">durchsuchen</span>'
           };
 

public/assets/map-module.js

@@ -10,14 +10,71 @@ const DEFAULT_ZOOM = 6;
 const DEFAULT_EVENT_COLOR = '#BC5067';
 const EVENT_FADE_DURATION_MS = 200;
 const EVENT_CLUSTER_LAYER_ID = 'eventmanager-events-clusters';
-const EVENT_CLUSTER_SPIDERFY_LAYER_ID = 'eventmanager-events-clusters-spiderfy';
 const EVENT_UNCLUSTERED_LAYER_ID = 'eventmanager-events-unclustered';
 const SATELLITE_SOURCE_ID = 'eventmanager-satellite-source';
 const SATELLITE_LAYER_ID = 'eventmanager-satellite-layer';
 const SATELLITE_TILE_URL = 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}';
+const SATELLITE_LABELS_SOURCE_ID = 'eventmanager-satellite-labels-source';
+const SATELLITE_LABELS_LAYER_ID = 'eventmanager-satellite-labels-layer';
+const SATELLITE_LABELS_TILE_URL = 'https://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer/tile/{z}/{y}/{x}';
+const SATELLITE_ROADS_SOURCE_ID = 'eventmanager-satellite-roads-source';
+const SATELLITE_ROADS_LAYER_ID = 'eventmanager-satellite-roads-layer';
+const SATELLITE_ROADS_TILE_URL = 'https://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Transportation/MapServer/tile/{z}/{y}/{x}';
 const SATELLITE_ATTRIBUTION = '© Esri, Maxar';
+const PROTOMAPS_SOURCE_ID = 'protomaps';
+const DEFAULT_BASE_STYLE_URL = 'https://maps.mummert.media/metadaten/world-light.json';
+const PROTOMAPS_PM_TILES_URL = 'pmtiles://https://maps.mummert.media/tiles/world.pmtiles';
+const PROTOMAPS_ATTRIBUTION = '<a href="https://github.com/protomaps/basemaps">Protomaps</a> © <a href="https://openstreetmap.org">OpenStreetMap</a>';
+const PROTOMAPS_GLYPHS_URL = 'https://maps.mummert.media/fonts/{fontstack}/{range}.pbf';
+const PROTOMAPS_SPRITE_URL = 'https://maps.mummert.media/sprites/v4/light';
+const PROTOMAPS_FLAVOR_URL = 'https://maps.mummert.media/metadaten/flavors/bio.json';
+const PROTOMAPS_BASEMAPS_ESM_URLS = [
+    'https://cdn.jsdelivr.net/npm/@protomaps/basemaps@5/+esm',
+    'https://esm.sh/@protomaps/basemaps@5',
+];
+const PROTOMAPS_BASEMAPS_UMD_URL = 'https://unpkg.com/@protomaps/basemaps@5/dist/basemaps.js';
 
 let dependenciesPromise = null;
+let basemapsApiPromise = null;
+const protomapsStylePromises = new Map();
+
+const getBasemapsApi = async () => {
+    if (basemapsApiPromise) {
+        return basemapsApiPromise;
+    }
+
+    basemapsApiPromise = (async () => {
+        for (const url of PROTOMAPS_BASEMAPS_ESM_URLS) {
+            try {
+                const module = await import(url);
+                const moduleApi = module && 'object' === typeof module
+                    ? (module.layers ? module : (module.default && module.default.layers ? module.default : null))
+                    : null;
+
+                if (moduleApi && 'function' === typeof moduleApi.layers) {
+                    return moduleApi;
+                }
+            } catch (error) {
+                continue;
+            }
+        }
+
+        await loadScript(PROTOMAPS_BASEMAPS_UMD_URL);
+
+        if (window.basemaps && 'function' === typeof window.basemaps.layers) {
+            return window.basemaps;
+        }
+
+        throw new Error('Failed to load Protomaps basemaps API');
+    })();
+
+    basemapsApiPromise = basemapsApiPromise.catch((error) => {
+        basemapsApiPromise = null;
+        throw error;
+    });
+
+    return basemapsApiPromise;
+};
 
 const ensureStylesheet = (href) => {
     if (!href) {
@@ -89,6 +146,69 @@ const ensureDependencies = async () => {
     return dependenciesPromise;
 };
 
+const getProtomapsStyle = async (baseStyleUrl = DEFAULT_BASE_STYLE_URL) => {
+    const normalizedBaseStyleUrl = String(baseStyleUrl || DEFAULT_BASE_STYLE_URL).trim() || DEFAULT_BASE_STYLE_URL;
+
+    if (protomapsStylePromises.has(normalizedBaseStyleUrl)) {
+        return protomapsStylePromises.get(normalizedBaseStyleUrl);
+    }
+
+    const stylePromise = (async () => {
+        const baseStyleResponse = await fetch(normalizedBaseStyleUrl, { credentials: 'omit' });
+
+        if (!baseStyleResponse.ok) {
+            throw new Error(`Failed to load base map style: ${baseStyleResponse.status}`);
+        }
+
+        const baseStyle = await baseStyleResponse.json();
+        const baseSources = baseStyle?.sources && 'object' === typeof baseStyle.sources
+            ? baseStyle.sources
+            : {};
+        const protomapsSource = baseSources[PROTOMAPS_SOURCE_ID] && 'object' === typeof baseSources[PROTOMAPS_SOURCE_ID]
+            ? baseSources[PROTOMAPS_SOURCE_ID]
+            : {
+                type: 'vector',
+                attribution: PROTOMAPS_ATTRIBUTION,
+                url: PROTOMAPS_PM_TILES_URL,
+            };
+
+        try {
+            const basemapsApi = await getBasemapsApi();
+            const flavorResponse = await fetch(PROTOMAPS_FLAVOR_URL, { credentials: 'omit' });
+
+            if (!flavorResponse.ok) {
+                throw new Error(`Failed to load Protomaps flavor: ${flavorResponse.status}`);
+            }
+
+            const flavor = await flavorResponse.json();
+            const generatedLayers = basemapsApi.layers(PROTOMAPS_SOURCE_ID, flavor, { lang: 'de' });
+
+            return {
+                ...baseStyle,
+                version: 8,
+                glyphs: baseStyle?.glyphs || PROTOMAPS_GLYPHS_URL,
+                sprite: baseStyle?.sprite || PROTOMAPS_SPRITE_URL,
+                sources: {
+                    ...baseSources,
+                    [PROTOMAPS_SOURCE_ID]: protomapsSource,
+                },
+                layers: generatedLayers,
+            };
+        } catch (error) {
+            return baseStyle;
+        }
+    })();
+
+    const cachedStylePromise = stylePromise.catch((error) => {
+        protomapsStylePromises.delete(normalizedBaseStyleUrl);
+        throw error;
+    });
+
+    protomapsStylePromises.set(normalizedBaseStyleUrl, cachedStylePromise);
+
+    return cachedStylePromise;
+};
+
 const rewriteGlyphUrl = (url) => {
     if (!url) {
         return url;
@@ -156,7 +276,7 @@ const parseItems = (container) => {
         const unique = new Map();
 
         parsed.forEach((item) => {
-            if (!item || !['event', 'location', 'organisation'].includes(item.type)) {
+            if (!item || !['event', 'organisation'].includes(item.type)) {
                 return;
             }
 
@@ -291,9 +411,7 @@ const ensureSatelliteLayer = (map) => {
 
     const markerLayerCandidates = [
         EVENT_CLUSTER_LAYER_ID,
-        EVENT_CLUSTER_SPIDERFY_LAYER_ID,
         EVENT_UNCLUSTERED_LAYER_ID,
-        'eventmanager-non-events',
     ];
     const beforeId = markerLayerCandidates.find((layerId) => map.getLayer(layerId));
 
@@ -312,6 +430,44 @@ const ensureSatelliteLayer = (map) => {
             'raster-saturation': 0,
         },
     }, beforeId);
+
+    map.addSource(SATELLITE_ROADS_SOURCE_ID, {
+        type: 'raster',
+        tiles: [SATELLITE_ROADS_TILE_URL],
+        tileSize: 256,
+        attribution: SATELLITE_ATTRIBUTION,
+    });
+
+    map.addLayer({
+        id: SATELLITE_ROADS_LAYER_ID,
+        type: 'raster',
+        source: SATELLITE_ROADS_SOURCE_ID,
+        layout: {
+            visibility: 'none',
+        },
+        paint: {
+            'raster-opacity': 1,
+        },
+    }, beforeId);
+
+    map.addSource(SATELLITE_LABELS_SOURCE_ID, {
+        type: 'raster',
+        tiles: [SATELLITE_LABELS_TILE_URL],
+        tileSize: 256,
+        attribution: SATELLITE_ATTRIBUTION,
+    });
+
+    map.addLayer({
+        id: SATELLITE_LABELS_LAYER_ID,
+        type: 'raster',
+        source: SATELLITE_LABELS_SOURCE_ID,
+        layout: {
+            visibility: 'none',
+        },
+        paint: {
+            'raster-opacity': 1,
+        },
+    }, beforeId);
 };
 
 const setSatelliteMode = (map, enabled) => {
@@ -325,7 +481,16 @@ const setSatelliteMode = (map, enabled) => {
         return;
     }
 
+    const hybridOverlayLayerIds = [SATELLITE_ROADS_LAYER_ID, SATELLITE_LABELS_LAYER_ID];
+
     map.setLayoutProperty(SATELLITE_LAYER_ID, 'visibility', enabled ? 'visible' : 'none');
+    hybridOverlayLayerIds.forEach((layerId) => {
+        if (map.getLayer(layerId)) {
+            map.setLayoutProperty(layerId, 'visibility', enabled ? 'visible' : 'none');
+            map.setPaintProperty(layerId, 'raster-opacity-transition', { duration: EVENT_FADE_DURATION_MS, delay: 0 });
+            map.setPaintProperty(layerId, 'raster-opacity', enabled ? 1 : 0);
+        }
+    });
     map.setPaintProperty(SATELLITE_LAYER_ID, 'raster-opacity-transition', { duration: EVENT_FADE_DURATION_MS, delay: 0 });
     map.setPaintProperty(SATELLITE_LAYER_ID, 'raster-brightness-min-transition', { duration: EVENT_FADE_DURATION_MS, delay: 0 });
     map.setPaintProperty(SATELLITE_LAYER_ID, 'raster-brightness-max-transition', { duration: EVENT_FADE_DURATION_MS, delay: 0 });
@@ -438,6 +603,20 @@ const popupHtmlFor = (item) => {
         ].join('');
     }
 
+    if (item.type === 'organisation') {
+        const title = sanitizeDisplayText(item.title || '');
+        const detailUrl = String(item.extra?.detailUrl || '').trim();
+        const hasDetailUrl = /^(https?:\/\/|\/)/i.test(detailUrl);
+        const detailLink = hasDetailUrl
+            ? `<div><a href="${escapeHtml(detailUrl)}">mehr Infos</a></div>`
+            : '';
+
+        return [
+            `<strong>${title}</strong>`,
+            detailLink,
+        ].join('');
+    }
+
     return `<strong>${sanitizeDisplayText(item.title)}</strong>`;
 };
 
@@ -459,7 +638,7 @@ const toFeature = (item) => ({
     },
 });
 
-const initOrganizationMarkers = (map, organizationItems, organizationColor) => {
+const initOrganizationMarkers = (map, organizationItems, organizationColor, openPopup) => {
     if (!organizationItems.length) {
         return {
             setOnlyTagId: () => {},
@@ -475,16 +654,21 @@ const initOrganizationMarkers = (map, organizationItems, organizationColor) => {
         const marker = new maplibregl.Marker(organizationColor ? { color: organizationColor } : undefined)
             .setLngLat([item.longitude, item.latitude]);
 
-        if (popupHtml) {
-            marker.setPopup(new maplibregl.Popup({ offset: 15 }).setHTML(String(popupHtml)));
-        }
-
         marker.addTo(map);
 
         const markerElement = marker.getElement();
 
         if (markerElement) {
             markerElement.style.zIndex = String(Math.round((90 - item.latitude) * 1000));
+            markerElement.style.cursor = 'pointer';
+
+            if (popupHtml && typeof openPopup === 'function') {
+                markerElement.addEventListener('click', (event) => {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    openPopup([item.longitude, item.latitude], String(popupHtml));
+                });
+            }
         }
 
         return {
@@ -538,7 +722,7 @@ const initOrganizationMarkers = (map, organizationItems, organizationColor) => {
     };
 };
 
-const bindExternalTagFilters = (container, map, organizationMarkerManager, eventLayerManager) => {
+const bindExternalTagFilters = (container, map, organizationMarkerManager, eventLayerManager, closePopup) => {
     const wrapperId = container.dataset.mapFilterWrapperId || '';
 
     if (!wrapperId || !organizationMarkerManager) {
@@ -653,6 +837,9 @@ const bindExternalTagFilters = (container, map, organizationMarkerManager, event
 
             setEventButtonState(false);
             updateExclusiveButtonAccessibility();
+            if (typeof closePopup === 'function') {
+                closePopup();
+            }
             applyFilter();
         });
     });
@@ -694,6 +881,9 @@ const bindExternalTagFilters = (container, map, organizationMarkerManager, event
             tagButtons.forEach((button) => setButtonState(button, false));
             setEventButtonState(eventsOnly);
             updateExclusiveButtonAccessibility();
+            if (typeof closePopup === 'function') {
+                closePopup();
+            }
             applyFilter();
         });
     } else if (eventToggleButton) {
@@ -780,119 +970,7 @@ const bindExternalTagFilters = (container, map, organizationMarkerManager, event
     applyMapStyleMode();
 };
 
-const initLocationLayers = (map, locationItems, markerImageId) => {
+const initEventLayers = (map, eventItems, eventColor, markerImageId, clusterMarkerImageId, openPopup, closePopup) => {
-    if (!locationItems.length) {
-        return {
-            setVisible: () => {},
-        };
-    }
-
-    const sourceId = 'eventmanager-non-events-source';
-    const layerId = 'eventmanager-non-events';
-    map.addSource(sourceId, {
-        type: 'geojson',
-        data: {
-            type: 'FeatureCollection',
-            features: locationItems.map(toFeature),
-        },
-    });
-
-    map.addLayer({
-        id: layerId,
-        type: 'symbol',
-        source: sourceId,
-        layout: {
-            'icon-image': markerImageId,
-            'icon-size': 1,
-            'icon-anchor': 'bottom',
-            'icon-allow-overlap': true,
-            'icon-ignore-placement': true,
-            'symbol-sort-key': ['*', -1, ['to-number', ['get', 'latitude'], 0]],
-        },
-        paint: {
-            'icon-opacity': 1,
-            'icon-translate': [0, 4],
-        },
-    });
-
-    map.on('click', layerId, (event) => {
-        const blockingLayers = [
-            EVENT_CLUSTER_LAYER_ID,
-            EVENT_CLUSTER_SPIDERFY_LAYER_ID,
-            EVENT_UNCLUSTERED_LAYER_ID,
-        ].filter((id) => map.getLayer(id));
-
-        if (blockingLayers.length) {
-            const topEventFeatures = map.queryRenderedFeatures(event.point, { layers: blockingLayers });
-
-            if (topEventFeatures.length) {
-                return;
-            }
-        }
-
-        const feature = event.features && event.features[0] ? event.features[0] : null;
-
-        if (!feature) {
-            return;
-        }
-
-        const popupHtml = feature?.properties?.popupHtml || '';
-        const coordinates = event.lngLat ? [event.lngLat.lng, event.lngLat.lat] : null;
-
-        if (!coordinates) {
-            return;
-        }
-
-        new maplibregl.Popup({ offset: 15 })
-            .setLngLat(coordinates)
-            .setHTML(String(popupHtml))
-            .addTo(map);
-    });
-
-    map.on('mouseenter', layerId, () => {
-        map.getCanvas().style.cursor = 'pointer';
-    });
-
-    map.on('mouseleave', layerId, () => {
-        map.getCanvas().style.cursor = '';
-    });
-
-    const setLayerLayoutVisibility = (isVisible) => {
-        if (!map.getLayer(layerId)) {
-            return;
-        }
-
-        map.setLayoutProperty(layerId, 'visibility', isVisible ? 'visible' : 'none');
-    };
-
-    const fadeLayerOpacity = (value) => {
-        if (!map.getLayer(layerId)) {
-            return;
-        }
-
-        map.setPaintProperty(layerId, 'icon-opacity-transition', { duration: EVENT_FADE_DURATION_MS, delay: 0 });
-        map.setPaintProperty(layerId, 'icon-opacity', value);
-    };
-
-    return {
-        setVisible: (isVisible) => {
-            if (isVisible) {
-                setLayerLayoutVisibility(true);
-                fadeLayerOpacity(1);
-
-                return;
-            }
-
-            fadeLayerOpacity(0);
-
-            window.setTimeout(() => {
-                setLayerLayoutVisibility(false);
-            }, EVENT_FADE_DURATION_MS + 10);
-        },
-    };
-};
-
-const initEventLayers = (map, eventItems, eventColor, markerImageId, clusterMarkerImageId) => {
     const sourceId = 'eventmanager-events-source';
     const clusterLayerId = EVENT_CLUSTER_LAYER_ID;
     const unclusteredLayerId = EVENT_UNCLUSTERED_LAYER_ID;
@@ -969,10 +1047,9 @@ const initEventLayers = (map, eventItems, eventColor, markerImageId, clusterMark
             return;
         }
 
-        new maplibregl.Popup({ offset: 15 })
+        if (typeof openPopup === 'function') {
-            .setLngLat([lng, lat])
+            openPopup([lng, lat], String(popupHtml));
-            .setHTML(String(popupHtml))
+        }
-            .addTo(map);
     };
 
     map.on('click', unclusteredLayerId, (event) => {
@@ -1057,7 +1134,7 @@ const initEventLayers = (map, eventItems, eventColor, markerImageId, clusterMark
                 },
                 spiderLeavesPaint: {
                     'icon-opacity': 1,
-                    'icon-translate': [0, 9],
+                    'icon-translate': [-3, 9],
                 },
                 onLeafClick: (feature, spiderEvent) => {
                     const clickCoordinates = spiderEvent?.lngLat
@@ -1141,6 +1218,10 @@ const initEventLayers = (map, eventItems, eventColor, markerImageId, clusterMark
                 }
             }
 
+            if (typeof closePopup === 'function') {
+                closePopup();
+            }
+
             fadeLayerOpacity(clusterLayerId, 'icon-opacity', 0);
             fadeLayerOpacity(clusterLayerId, 'text-opacity', 0);
             fadeLayerOpacity(unclusteredLayerId, 'icon-opacity', 0);
@@ -1186,7 +1267,7 @@ const initSingleMap = (container) => {
     container.dataset.mapInitialized = '1';
 
     ensureDependencies()
-        .then(() => {
+        .then(async () => {
             if (typeof maplibregl === 'undefined') {
                 return;
             }
@@ -1197,7 +1278,8 @@ const initSingleMap = (container) => {
                 window.__eventmanagerPmtilesRegistered = true;
             }
 
-            const style = container.dataset.mapStyle || 'https://maps.mummert.media/metadaten/world-light.json';
+            const baseStyleUrl = container.dataset.mapStyle || DEFAULT_BASE_STYLE_URL;
+            const style = await getProtomapsStyle(baseStyleUrl);
             const map = new maplibregl.Map({
                 container,
                 style,
@@ -1218,6 +1300,44 @@ const initSingleMap = (container) => {
                 },
             });
 
+            let activePopup = null;
+
+            const closePopup = () => {
+                if (!activePopup) {
+                    return;
+                }
+
+                activePopup.remove();
+                activePopup = null;
+            };
+
+            const openPopup = (coordinates, popupHtml) => {
+                if (!Array.isArray(coordinates) || coordinates.length !== 2 || !popupHtml) {
+                    return;
+                }
+
+                const [lng, lat] = coordinates.map((value) => Number(value));
+
+                if (!Number.isFinite(lng) || !Number.isFinite(lat)) {
+                    return;
+                }
+
+                closePopup();
+
+                const popup = new maplibregl.Popup({ offset: 15 })
+                    .setLngLat([lng, lat])
+                    .setHTML(String(popupHtml))
+                    .addTo(map);
+
+                popup.on('close', () => {
+                    if (activePopup === popup) {
+                        activePopup = null;
+                    }
+                });
+
+                activePopup = popup;
+            };
+
             map.on('style.load', () => {
                 applyDefaultProjection(map);
             });
@@ -1267,9 +1387,6 @@ const initSingleMap = (container) => {
                 const organizationItems = items
                     .filter((item) => item.type === 'organisation')
                     .sort((firstItem, secondItem) => secondItem.latitude - firstItem.latitude);
-                const locationItems = items
-                    .filter((item) => item.type === 'location')
-                    .sort((firstItem, secondItem) => secondItem.latitude - firstItem.latitude);
                 const eventItems = items
                     .filter((item) => item.type === 'event')
                     .sort((firstItem, secondItem) => secondItem.latitude - firstItem.latitude);
@@ -1290,25 +1407,14 @@ const initSingleMap = (container) => {
                     return;
                 }
 
-                const organizationMarkerManager = initOrganizationMarkers(map, organizationItems, organizationColor);
+                const organizationMarkerManager = initOrganizationMarkers(map, organizationItems, organizationColor, openPopup);
-                const locationLayerManager = initLocationLayers(map, locationItems, eventMarkerImageId);
                 let eventLayerManager = null;
 
                 if (eventItems.length) {
-                    eventLayerManager = initEventLayers(map, eventItems, eventColor, eventMarkerImageId, clusterMarkerImageId);
+                    eventLayerManager = initEventLayers(map, eventItems, eventColor, eventMarkerImageId, clusterMarkerImageId, openPopup, closePopup);
                 }
 
-                const combinedEventLayerManager = {
+                bindExternalTagFilters(container, map, organizationMarkerManager, eventLayerManager, closePopup);
-                    setVisible: (isVisible) => {
-                        locationLayerManager.setVisible(isVisible);
-
-                        if (eventLayerManager) {
-                            eventLayerManager.setVisible(isVisible);
-                        }
-                    },
-                };
-
-                bindExternalTagFilters(container, map, organizationMarkerManager, combinedEventLayerManager);
 
                 if ('markers' === centerMode) {
                     fitBounds(allCoordinates);

public/assets/member-events-confirm.js

@@ -0,0 +1,28 @@
+(function () {
+    var decodeHtmlEntities = function (value) {
+        var textarea = document.createElement('textarea');
+        textarea.innerHTML = String(value || '');
+
+        return textarea.value;
+    };
+
+    var handleSubmit = function (event) {
+        var target = event.target;
+
+        if (!(target instanceof HTMLFormElement)) {
+            return;
+        }
+
+        var message = decodeHtmlEntities(target.getAttribute('data-confirm-message') || '');
+
+        if (!message) {
+            return;
+        }
+
+        if (!window.confirm(message)) {
+            event.preventDefault();
+        }
+    };
+
+    document.addEventListener('submit', handleSubmit, true);
+})();

public/editor-fallback.js

@@ -0,0 +1,112 @@
+(function () {
+  const mounts = document.querySelectorAll('[data-mm-editor="tiptap"]');
+
+  if (!mounts.length) {
+    return;
+  }
+
+  const runFallback = (mount) => {
+    if (!mount || mount.querySelector('.ProseMirror') || mount.getAttribute('data-mm-fallback-ready') === '1') {
+      return;
+    }
+
+    const textareaId = mount.getAttribute('data-textarea-id');
+
+    if (!textareaId) {
+      return;
+    }
+
+    const textarea = document.getElementById(textareaId);
+
+    if (!textarea) {
+      return;
+    }
+
+    const toolbar = document.querySelector('[data-mm-editor-toolbar="' + textareaId + '"]');
+    const form = textarea.closest('form');
+
+    mount.setAttribute('contenteditable', 'true');
+    mount.setAttribute('data-mm-fallback-ready', '1');
+    mount.classList.add('mm-fallback-editor');
+    mount.innerHTML = textarea.value || '<p></p>';
+    textarea.style.display = 'none';
+
+    const syncState = () => {
+      textarea.value = mount.innerHTML;
+    };
+
+    const focusMount = () => {
+      mount.focus();
+    };
+
+    mount.addEventListener('input', syncState);
+    mount.addEventListener('blur', syncState);
+
+    if (toolbar) {
+      toolbar.addEventListener('click', (event) => {
+        const target = event.target.closest('button[data-action]');
+
+        if (!target || target.disabled) {
+          return;
+        }
+
+        event.preventDefault();
+
+        const action = target.getAttribute('data-action');
+
+        focusMount();
+
+        switch (action) {
+          case 'paragraph':
+            document.execCommand('formatBlock', false, 'p');
+            break;
+          case 'h2':
+            document.execCommand('formatBlock', false, 'h2');
+            break;
+          case 'h3':
+            document.execCommand('formatBlock', false, 'h3');
+            break;
+          case 'bold':
+            document.execCommand('bold', false);
+            break;
+          case 'italic':
+            document.execCommand('italic', false);
+            break;
+          case 'underline':
+            document.execCommand('underline', false);
+            break;
+          case 'bulletList':
+            document.execCommand('insertUnorderedList', false);
+            break;
+          case 'orderedList':
+            document.execCommand('insertOrderedList', false);
+            break;
+          case 'indent':
+            document.execCommand('indent', false);
+            break;
+          case 'outdent':
+            document.execCommand('outdent', false);
+            break;
+          case 'undo':
+            document.execCommand('undo', false);
+            break;
+          case 'redo':
+            document.execCommand('redo', false);
+            break;
+          default:
+            break;
+        }
+
+        syncState();
+      });
+    }
+
+    if (form) {
+      form.addEventListener('submit', syncState);
+    }
+  };
+
+  window.setTimeout(() => {
+    mounts.forEach(runFallback);
+  }, 900);
+})();

public/editor.js

@@ -0,0 +1,330 @@
+import { Editor } from 'https://esm.sh/@tiptap/core@3';
+import Document from 'https://esm.sh/@tiptap/extension-document@3';
+import Paragraph from 'https://esm.sh/@tiptap/extension-paragraph@3';
+import Text from 'https://esm.sh/@tiptap/extension-text@3';
+import Heading from 'https://esm.sh/@tiptap/extension-heading@3';
+import Bold from 'https://esm.sh/@tiptap/extension-bold@3';
+import Italic from 'https://esm.sh/@tiptap/extension-italic@3';
+import Underline from 'https://esm.sh/@tiptap/extension-underline@3';
+import BulletList from 'https://esm.sh/@tiptap/extension-bullet-list@3';
+import OrderedList from 'https://esm.sh/@tiptap/extension-ordered-list@3';
+import ListItem from 'https://esm.sh/@tiptap/extension-list-item@3';
+import CharacterCount from 'https://esm.sh/@tiptap/extension-character-count@3';
+import History from 'https://esm.sh/@tiptap/extension-history@3';
+
+const CHARACTER_LIMIT = 30000;
+
+(function () {
+  const editorMounts = document.querySelectorAll('[data-mm-editor="tiptap"]');
+
+  if (!editorMounts.length) {
+    return;
+  }
+
+  const syncState = (editor, textarea) => {
+    textarea.value = editor.getHTML();
+  };
+
+  const updateEditorA11yState = (mount, textarea, textareaId, editor) => {
+    if (!mount || !textareaId || !editor || !textarea) {
+      return;
+    }
+
+    const errorNode = document.getElementById(`${textareaId}-errors`);
+    const hasError = !!(errorNode && errorNode.textContent && errorNode.textContent.trim().length > 0);
+    const plainTextLength = editor.storage?.characterCount?.characters?.() ?? 0;
+    const isEmpty = plainTextLength === 0;
+    const label = mount.getAttribute('data-editor-label') || textarea.getAttribute('aria-label') || 'Text';
+
+    mount.setAttribute('aria-invalid', hasError ? 'true' : 'false');
+    mount.setAttribute('aria-required', textarea.required ? 'true' : 'false');
+
+    const proseMirror = mount.querySelector('.ProseMirror');
+
+    if (!proseMirror) {
+      return;
+    }
+
+    proseMirror.setAttribute('role', 'textbox');
+    proseMirror.setAttribute('aria-multiline', 'true');
+    proseMirror.setAttribute('aria-invalid', hasError ? 'true' : 'false');
+    proseMirror.setAttribute('aria-required', textarea.required ? 'true' : 'false');
+    proseMirror.setAttribute('aria-label', label);
+    proseMirror.setAttribute('data-empty', isEmpty ? 'true' : 'false');
+  };
+
+  const updateCharacterCounter = (counterNode, editor) => {
+    if (!counterNode || !editor?.storage?.characterCount) {
+      return;
+    }
+
+    const used = editor.storage.characterCount.characters();
+    const words = editor.storage.characterCount.words();
+    const remaining = CHARACTER_LIMIT - used;
+
+    counterNode.textContent = `${words.toLocaleString('de-DE')} Wörter · ${used.toLocaleString('de-DE')} / ${CHARACTER_LIMIT.toLocaleString('de-DE')} Zeichen`;
+    counterNode.classList.toggle('is-over-limit', remaining < 0);
+  };
+
+  const setupToolbarKeyboardNavigation = (toolbar) => {
+    if (!toolbar) {
+      return;
+    }
+
+    const getEnabledButtons = () => Array.from(toolbar.querySelectorAll('button[data-action]:not(:disabled)'));
+
+    toolbar.addEventListener('keydown', (event) => {
+      const activeElement = event.target.closest('button[data-action]');
+
+      if (!activeElement) {
+        return;
+      }
+
+      const buttons = getEnabledButtons();
+
+      if (!buttons.length) {
+        return;
+      }
+
+      const currentIndex = buttons.indexOf(activeElement);
+
+      if (currentIndex < 0) {
+        return;
+      }
+
+      let nextIndex = currentIndex;
+
+      switch (event.key) {
+        case 'ArrowRight':
+          nextIndex = (currentIndex + 1) % buttons.length;
+          break;
+        case 'ArrowLeft':
+          nextIndex = (currentIndex - 1 + buttons.length) % buttons.length;
+          break;
+        case 'Home':
+          nextIndex = 0;
+          break;
+        case 'End':
+          nextIndex = buttons.length - 1;
+          break;
+        case 'Enter':
+        case ' ':
+          event.preventDefault();
+          activeElement.click();
+          return;
+        default:
+          return;
+      }
+
+      event.preventDefault();
+      buttons[nextIndex].focus();
+    });
+  };
+
+  const updateToolbarState = (toolbar, editor) => {
+    if (!toolbar) {
+      return;
+    }
+
+    const canIndent = editor.can().chain().focus().sinkListItem('listItem').run();
+    const canOutdent = editor.can().chain().focus().liftListItem('listItem').run();
+    const canUndo = editor.can().chain().focus().undo().run();
+    const canRedo = editor.can().chain().focus().redo().run();
+
+    toolbar.querySelectorAll('button[data-action]').forEach((button) => {
+      const action = button.getAttribute('data-action');
+      let isActive = false;
+      let isDisabled = false;
+
+      switch (action) {
+        case 'paragraph':
+          isActive = editor.isActive('paragraph');
+          break;
+        case 'h2':
+          isActive = editor.isActive('heading', { level: 2 });
+          break;
+        case 'h3':
+          isActive = editor.isActive('heading', { level: 3 });
+          break;
+        case 'bold':
+          isActive = editor.isActive('bold');
+          break;
+        case 'italic':
+          isActive = editor.isActive('italic');
+          break;
+        case 'underline':
+          isActive = editor.isActive('underline');
+          break;
+        case 'bulletList':
+          isActive = editor.isActive('bulletList');
+          break;
+        case 'orderedList':
+          isActive = editor.isActive('orderedList');
+          break;
+        case 'indent':
+          isDisabled = !canIndent;
+          break;
+        case 'outdent':
+          isDisabled = !canOutdent;
+          break;
+        case 'undo':
+          isDisabled = !canUndo;
+          break;
+        case 'redo':
+          isDisabled = !canRedo;
+          break;
+        default:
+          break;
+      }
+
+      button.classList.toggle('is-active', isActive);
+      button.setAttribute('aria-pressed', isActive ? 'true' : 'false');
+      button.disabled = isDisabled;
+      button.setAttribute('aria-disabled', isDisabled ? 'true' : 'false');
+    });
+  };
+
+  editorMounts.forEach((mount) => {
+    const textareaId = mount.getAttribute('data-textarea-id');
+
+    if (!textareaId) {
+      return;
+    }
+
+    const textarea = document.getElementById(textareaId);
+
+    if (!textarea) {
+      return;
+    }
+
+    textarea.style.display = 'none';
+
+    const form = textarea.closest('form');
+    const toolbar = document.querySelector(`[data-mm-editor-toolbar="${textareaId}"]`);
+    const counterNode = document.querySelector(`[data-mm-editor-counter-for="${textareaId}"]`);
+
+    setupToolbarKeyboardNavigation(toolbar);
+
+    const editor = new Editor({
+      element: mount,
+      extensions: [
+        Document,
+        Paragraph,
+        Text,
+        Heading.configure({ levels: [2, 3] }),
+        Bold,
+        Italic,
+        Underline,
+        BulletList,
+        OrderedList,
+        ListItem,
+        History,
+        CharacterCount.configure({
+          limit: CHARACTER_LIMIT,
+        }),
+      ],
+      content: textarea.value || '<p></p>',
+      onCreate({ editor: currentEditor }) {
+        updateToolbarState(toolbar, currentEditor);
+        updateCharacterCounter(counterNode, currentEditor);
+        updateEditorA11yState(mount, textarea, textareaId, currentEditor);
+      },
+      onUpdate({ editor: currentEditor }) {
+        syncState(currentEditor, textarea);
+        updateToolbarState(toolbar, currentEditor);
+        updateCharacterCounter(counterNode, currentEditor);
+        updateEditorA11yState(mount, textarea, textareaId, currentEditor);
+      },
+      onSelectionUpdate({ editor: currentEditor }) {
+        updateToolbarState(toolbar, currentEditor);
+        updateEditorA11yState(mount, textarea, textareaId, currentEditor);
+      },
+    });
+
+    editor.on('transaction', () => {
+      updateToolbarState(toolbar, editor);
+      updateCharacterCounter(counterNode, editor);
+      updateEditorA11yState(mount, textarea, textareaId, editor);
+    });
+
+    editor.on('focus', () => {
+      updateToolbarState(toolbar, editor);
+      updateCharacterCounter(counterNode, editor);
+      updateEditorA11yState(mount, textarea, textareaId, editor);
+    });
+
+    editor.on('blur', () => {
+      updateToolbarState(toolbar, editor);
+      updateCharacterCounter(counterNode, editor);
+      updateEditorA11yState(mount, textarea, textareaId, editor);
+    });
+
+    if (toolbar) {
+      toolbar.addEventListener('click', (event) => {
+        const target = event.target.closest('button[data-action]');
+
+        if (!target || target.disabled) {
+          return;
+        }
+
+        event.preventDefault();
+
+        const action = target.getAttribute('data-action');
+        const chain = editor.chain().focus();
+
+        switch (action) {
+          case 'paragraph':
+            chain.setParagraph().run();
+            break;
+          case 'h2':
+            chain.toggleHeading({ level: 2 }).run();
+            break;
+          case 'h3':
+            chain.toggleHeading({ level: 3 }).run();
+            break;
+          case 'bold':
+            chain.toggleBold().run();
+            break;
+          case 'italic':
+            chain.toggleItalic().run();
+            break;
+          case 'underline':
+            chain.toggleUnderline().run();
+            break;
+          case 'bulletList':
+            chain.toggleBulletList().run();
+            break;
+          case 'orderedList':
+            chain.toggleOrderedList().run();
+            break;
+          case 'indent':
+            chain.sinkListItem('listItem').run();
+            break;
+          case 'outdent':
+            chain.liftListItem('listItem').run();
+            break;
+          case 'undo':
+            chain.undo().run();
+            break;
+          case 'redo':
+            chain.redo().run();
+            break;
+          default:
+            break;
+        }
+
+        syncState(editor, textarea);
+        updateToolbarState(toolbar, editor);
+      });
+    }
+
+    if (form) {
+      form.addEventListener('submit', () => {
+        syncState(editor, textarea);
+        updateEditorA11yState(mount, textarea, textareaId, editor);
+      });
+    }
+
+    updateEditorA11yState(mount, textarea, textareaId, editor);
+  });
+})();

src/Controller/Frontend/EventEditController.php

@@ -103,8 +103,9 @@ class EventEditController extends AbstractFrontendModuleController
             'endTime' => $this->resolveFormEndTime($event),
             'location_id' => (int) ($event['location_id'] ?? 0),
             'tags' => $currentTagIds,
-            'teaser' => (string) ($event['teaser'] ?? ''),
+            'teaser' => '' !== trim((string) ($event['teaser'] ?? ''))
-            'description' => (string) ($event['description'] ?? ''),
+                ? (string) ($event['teaser'] ?? '')
+                : (string) ($event['description'] ?? ''),
             'url' => (string) ($event['url'] ?? ''),
             'photographer' => (string) ($event['photographer'] ?? ''),
             'addImage' => '1' === (string) ($event['addImage'] ?? ''),

src/Controller/Frontend/EventMapController.php

@@ -8,6 +8,7 @@ use Contao\CoreBundle\Controller\FrontendModule\AbstractFrontendModuleController
 use Contao\CoreBundle\DependencyInjection\Attribute\AsFrontendModule;
 use Contao\CoreBundle\Twig\FragmentTemplate;
 use Contao\ModuleModel;
+use Contao\PageModel;
 use Contao\StringUtil;
 use MummertMedia\EventManagerBundle\Service\MapModuleDataProvider;
 use Symfony\Component\HttpFoundation\Request;
@@ -44,6 +45,16 @@ class EventMapController extends AbstractFrontendModuleController
             array_map('intval', StringUtil::deserialize($model->organizationTypeTags ?? null, true)),
             static fn (int $tagId): bool => $tagId > 0,
         )));
+        $availableOrganizationTags = $this->mapModuleDataProvider->getOrganizationTags();
+        $availableOrganizationTagIds = array_map(
+            static fn (array $tag): int => (int) ($tag['id'] ?? 0),
+            $availableOrganizationTags,
+        );
+        $selectedOrganizationTagIds = [] === $selectedOrganizationTagIds
+            ? []
+            : array_values(array_intersect($selectedOrganizationTagIds, $availableOrganizationTagIds));
+        $organizationListPageId = (int) ($model->mapOrganizationListPage ?? 0);
+        $organizationListBaseUrl = $this->buildOrganizationListBaseUrl($organizationListPageId, $request);
         $initialDisplay = (string) ($model->mapInitialDisplay ?? self::DEFAULT_INITIAL_DISPLAY);
         $initialOrganizationTagId = (int) ($model->mapInitialOrganizationTagId ?? 0);
         $centerMode = (string) ($model->mapCenterMode ?? self::DEFAULT_CENTER_MODE);
@@ -80,7 +91,7 @@ class EventMapController extends AbstractFrontendModuleController
         $template->set('mapCenterZoom', (int) ($model->mapCenterZoom ?? 12));
         $template->set('mapPitch', $mapPitch);
         $template->set('mapItemsJson', json_encode(
-            $this->mapModuleDataProvider->getMapItems($showOrganizations, $showEvents, $showExternalOrganizations, $selectedOrganizationTagIds),
+            $this->mapModuleDataProvider->getMapItems($showOrganizations, $showEvents, $showExternalOrganizations, $selectedOrganizationTagIds, $organizationListBaseUrl),
             \JSON_HEX_TAG | \JSON_HEX_AMP | \JSON_HEX_APOS | \JSON_HEX_QUOT | \JSON_UNESCAPED_UNICODE | \JSON_THROW_ON_ERROR,
         ));
         $template->set('mapOrganizationTags', $this->mapModuleDataProvider->getOrganizationTags($selectedOrganizationTagIds));
@@ -139,4 +150,29 @@ class EventMapController extends AbstractFrontendModuleController
 
         return $parsedPitch;
     }
+
+    private function buildOrganizationListBaseUrl(int $pageId, Request $request): string
+    {
+        if ($pageId <= 0) {
+            return '';
+        }
+
+        $pageModel = PageModel::findById($pageId);
+
+        if (null === $pageModel) {
+            return '';
+        }
+
+        $frontendUrl = trim((string) $pageModel->getFrontendUrl());
+
+        if ('' === $frontendUrl) {
+            return '';
+        }
+
+        if (preg_match('#^https?://#i', $frontendUrl)) {
+            return $frontendUrl;
+        }
+
+        return rtrim($request->getSchemeAndHttpHost(), '/').'/'.ltrim($frontendUrl, '/');
+    }
 }

src/Controller/Frontend/MemberEventsController.php

@@ -65,7 +65,14 @@ class MemberEventsController extends AbstractFrontendModuleController
                 if ('toggle_published' === $action) {
                     $this->eventRepository->togglePublished($eventId);
                 } elseif ('duplicate' === $action) {
-                    $this->eventRepository->duplicate($eventId);
+                    $newEventId = $this->eventRepository->duplicate($eventId);
+
+                    if ($newEventId > 0 && $editPage instanceof PageModel) {
+                        return new RedirectResponse($this->generateContentUrl($editPage, [
+                            'event' => (string) $newEventId,
+                            'ref' => base64_encode($backUrl),
+                        ]));
+                    }
                 } elseif ('delete' === $action) {
                     $this->eventRepository->delete($eventId);
                 }

src/Controller/Frontend/OrganizationEditController.php

@@ -70,14 +70,13 @@ class OrganizationEditController extends AbstractFrontendModuleController
         $formData = [
             'title' => (string) ($organization['title'] ?? ''),
             'street' => (string) ($organization['street'] ?? ''),
+            'street2' => (string) ($organization['street2'] ?? ''),
             'postal' => (string) ($organization['postal'] ?? ''),
             'city' => (string) ($organization['city'] ?? ''),
-            'state' => (string) ($organization['state'] ?? ''),
-            'country' => (string) ($organization['country'] ?? ''),
             'phone' => (string) ($organization['phone'] ?? ''),
             'email' => (string) ($organization['email'] ?? ''),
             'website' => (string) ($organization['website'] ?? ''),
-            'description' => (string) ($organization['description'] ?? ''),
+            'description' => $this->normalizeTextareaDescription((string) ($organization['description'] ?? '')),
             'tags' => $this->organizationRepository->getTagIdsForOrganization($organizationId),
         ];
 
@@ -219,4 +218,14 @@ class OrganizationEditController extends AbstractFrontendModuleController
 
         return $page instanceof PageModel ? $this->generateContentUrl($page) : '/';
     }
+
+    private function normalizeTextareaDescription(string $value): string
+    {
+        $decoded = html_entity_decode($value, ENT_QUOTES | ENT_HTML5, 'UTF-8');
+        $decoded = preg_replace('/<\s*br\s*\/?>/i', "\n", $decoded) ?? $decoded;
+        $decoded = preg_replace('/<\s*\/p\s*>\s*<\s*p[^>]*>/i', "\n\n", $decoded) ?? $decoded;
+        $decoded = strip_tags($decoded);
+
+        return trim($decoded);
+    }
 }

src/Form/EventType.php

@@ -119,17 +119,19 @@ class EventType extends AbstractType
                 ],
             ])
             ->add('tags', ChoiceType::class, [
-                'label' => 'Typen',
+                'label' => 'Kategorien',
                 'choices' => $options['tag_choices'],
+                'expanded' => true,
                 'multiple' => true,
                 'required' => false,
-                'attr' => [
+                'choice_attr' => static function (): array {
-                    'class' => 'js-event-tags-choice',
+                    return [
-                    'data-placeholder' => 'Typen suchen …',
+                        'role' => 'switch',
-                ],
+                        'class' => 'ns-tag-switch-input',
+                    ];
+                },
             ])
-            ->add('teaser', TextareaType::class, ['label' => 'Teaser', 'required' => false])
+            ->add('teaser', TextareaType::class, ['label' => 'Beschreibung', 'required' => false])
-            ->add('description', TextareaType::class, ['label' => 'Beschreibung', 'required' => false])
             ->add('url', UrlType::class, [
                 'label' => 'Link (extern)',
                 'required' => false,

src/Form/OrganizationType.php

@@ -20,23 +20,25 @@ class OrganizationType extends AbstractType
         $builder
             ->add('title', TextType::class, ['label' => 'Titel', 'required' => true])
             ->add('street', TextType::class, ['label' => 'Straße', 'required' => false])
+            ->add('street2', TextType::class, ['label' => 'Weitere Adressangaben', 'required' => false])
             ->add('postal', TextType::class, ['label' => 'PLZ', 'required' => false])
             ->add('city', TextType::class, ['label' => 'Ort', 'required' => false])
-            ->add('state', TextType::class, ['label' => 'Bundesland', 'required' => false])
-            ->add('country', TextType::class, ['label' => 'Land', 'required' => false])
             ->add('phone', TextType::class, ['label' => 'Telefon', 'required' => false])
             ->add('email', EmailType::class, ['label' => 'E-Mail', 'required' => false])
             ->add('website', TextType::class, ['label' => 'Webseite', 'required' => false])
             ->add('description', TextareaType::class, ['label' => 'Beschreibung', 'required' => false])
             ->add('tags', ChoiceType::class, [
-                'label' => 'Typen',
+                'label' => 'Kategorien',
                 'choices' => $options['tag_choices'],
+                'expanded' => true,
                 'multiple' => true,
                 'required' => false,
-                'attr' => [
+                'choice_attr' => static function (): array {
-                    'class' => 'js-organization-tags-choice',
+                    return [
-                    'data-placeholder' => 'Typ auswählen …',
+                        'role' => 'switch',
-                ],
+                        'class' => 'ns-tag-switch-input',
+                    ];
+                },
             ])
             ->add('logoUpload', FileType::class, [
                 'label' => 'Logo hochladen',

src/Service/EventRepository.php

@@ -84,7 +84,8 @@ class EventRepository
         unset($row['id']);
 
         if (array_key_exists('title', $row)) {
-            $row['title'] = trim((string) $row['title'].' (Kopie)');
+            $normalizedTitle = html_entity_decode((string) $row['title'], ENT_QUOTES | ENT_HTML5, 'UTF-8');
+            $row['title'] = trim($normalizedTitle.' (Kopie)');
         }
 
         if (array_key_exists('alias', $row)) {

src/Service/MapModuleDataProvider.php

@@ -31,7 +31,7 @@ class MapModuleDataProvider
     /**
         * @return list<array{type:string,markerType:string,id:int,title:string,latitude:float,longitude:float,extra:array<string,mixed>}>
      */
-    public function getMapItems(bool $includeOrganizations = true, bool $includeEvents = true, bool $includeExternalOrganizations = false, array $selectedOrganizationTagIds = []): array
+    public function getMapItems(bool $includeOrganizations = true, bool $includeEvents = true, bool $includeExternalOrganizations = false, array $selectedOrganizationTagIds = [], string $organizationListBaseUrl = ''): array
     {
         if (!$includeOrganizations && !$includeEvents) {
             return [];
@@ -102,6 +102,7 @@ class MapModuleDataProvider
                     'extra' => [
                         'organizationTagIds' => $tagData['ids'],
                         'organizationTagLabels' => $tagData['labels'],
+                        'detailUrl' => $this->buildOrganizationDetailUrl($organizationListBaseUrl, $id),
                     ],
                 ];
             }
@@ -150,7 +151,7 @@ class MapModuleDataProvider
      */
     public function getOrganizationTags(array $selectedTagIds = []): array
     {
-        if (!$this->tableExists('tl_tags')) {
+        if (!$this->tableExists('tl_tags') || !$this->tableExists('tl_tags_rel')) {
             return [];
         }
 
@@ -168,8 +169,13 @@ class MapModuleDataProvider
 
         $qb = $this->connection->createQueryBuilder();
         $qb
-            ->select('t.id', sprintf('t.%s AS label', $labelColumn))
+            ->select('DISTINCT t.id', sprintf('t.%s AS label', $labelColumn))
-            ->from('tl_tags', 't')
+            ->from('tl_tags_rel', 'r')
+            ->innerJoin('r', 'tl_tags', 't', 't.id = r.tag_id')
+            ->andWhere('r.ptable = :organization_ptable')
+            ->andWhere('(r.field = :organization_field OR r.field IS NULL OR r.field = \'\')')
+            ->setParameter('organization_ptable', 'tl_organization')
+            ->setParameter('organization_field', 'tags')
             ->orderBy(sprintf('t.%s', $labelColumn), 'ASC');
 
         if ([] !== $selectedTagIds) {
@@ -341,24 +347,6 @@ class MapModuleDataProvider
         return $qb->executeQuery()->fetchAllAssociative();
     }
 
-    /**
-     * @return list<array<string,mixed>>
-     */
-    private function fetchLocationRows(string $locationTable, array $locationGeoColumns): array
-    {
-        $qb = $this->connection->createQueryBuilder();
-        $qb
-            ->select('l.id', 'l.title')
-            ->addSelect(sprintf('l.%s AS latitude', $locationGeoColumns['latitude']))
-            ->addSelect(sprintf('l.%s AS longitude', $locationGeoColumns['longitude']))
-            ->from($locationTable, 'l')
-            ->orderBy('l.id', 'ASC');
-
-        $this->applyPublicationConstraints($qb, 'l', $locationTable);
-
-        return $qb->executeQuery()->fetchAllAssociative();
-    }
-
     /**
      * @return list<array<string,mixed>>
      */
@@ -493,6 +481,19 @@ class MapModuleDataProvider
         }
     }
 
+    private function buildOrganizationDetailUrl(string $baseUrl, int $organizationId): string
+    {
+        $normalizedBaseUrl = trim($baseUrl);
+
+        if ('' === $normalizedBaseUrl || $organizationId <= 0) {
+            return '';
+        }
+
+        $separator = str_contains($normalizedBaseUrl, '?') ? '&' : '?';
+
+        return sprintf('%s%sshow=%d', $normalizedBaseUrl, $separator, $organizationId);
+    }
+
     /**
      * @param list<string> $candidates
      */

src/Service/OrganizationRepository.php

@@ -71,10 +71,9 @@ class OrganizationRepository
             [
                 'title' => $data['title'] ?? '',
                 'street' => $data['street'] ?? '',
+                'street2' => $data['street2'] ?? '',
                 'postal' => $data['postal'] ?? '',
                 'city' => $data['city'] ?? '',
-                'state' => $data['state'] ?? '',
-                'country' => $data['country'] ?? '',
                 'phone' => $data['phone'] ?? '',
                 'email' => $data['email'] ?? '',
                 'website' => $data['website'] ?? '',