| Server IP : 202.61.199.114 / Your IP : 216.73.217.139 Web Server : nginx/1.22.1 System : Linux de.arni-solutions.de 6.1.0-49-amd64 #1 SMP PREEMPT_DYNAMIC Debian 6.1.174-1 (2026-05-26) x86_64 User : web20 ( 1018) PHP Version : 8.4.23 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : OFF | Sudo : ON | Pkexec : ON Directory : /tmp/ |
Upload File : |
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="favicon.ico">
<title>Buchungssystem - Parken-am-Schiff.de</title>
<!-- Theme vor dem Paint setzen (kein FOUC) -->
<script>(function(){try{var t=localStorage.getItem('pacim:theme');if(t){document.documentElement.setAttribute('data-theme',t);}}catch(e){}})();</script>
<!-- Fonts: Inter (Gentelella v4) -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<!-- Bootstrap 5 (Content-Komponenten) + Plugins -->
<link href="https://seaside.pacim.de/assets/css/bootstrap.min.css" rel="stylesheet">
<link href="https://seaside.pacim.de/assets/css/fonts/material-icon-font.css" rel="stylesheet">
<link href="https://seaside.pacim.de/assets/css/plugins/quill.snow.min.css" rel="stylesheet">
<link href="https://seaside.pacim.de/assets/css/plugins/choices.min.css" rel="stylesheet">
<link href="https://seaside.pacim.de/assets/css/styles.css" rel="stylesheet">
<!-- Gentelella v4 Shell + Akzente (zuletzt, überschreibt) -->
<link href="https://seaside.pacim.de/assets/css/gentelella.css?v=1780513076" rel="stylesheet">
<link href="https://seaside.pacim.de/assets/css/gentelella-accents.css?v=1780439034" rel="stylesheet">
<link href="https://seaside.pacim.de/assets/css/search.css?v=1780917534" rel="stylesheet">
<!-- Favicon -->
<link rel="apple-touch-icon" sizes="57x57" href="https://seaside.pacim.de/assets/favico/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="76x76" href="https://seaside.pacim.de/assets/favico/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="120x120" href="https://seaside.pacim.de/assets/favico/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="152x152" href="https://seaside.pacim.de/assets/favico/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="https://seaside.pacim.de/assets/favico/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="32x32" href="https://seaside.pacim.de/assets/favico/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="https://seaside.pacim.de/assets/favico/favicon-16x16.png">
<link rel="manifest" href="https://seaside.pacim.de/assets/favico/manifest.json">
<meta name="theme-color" content="#ffffff">
</head>
<body data-page="mailing">
<a class="skip-link" href="#main-content">Zum Inhalt springen</a>
<aside class="sidebar" id="sidebar" aria-label="Hauptnavigation">
<div class="sidebar-brand">
<a class="brand-link" href="https://seaside.pacim.de/" aria-label="Zum Cockpit">
<div class="brand-icon">P</div>
<div class="brand-name">PaCIM <small>v4</small></div>
</a>
</div>
<nav class="sidebar-nav">
<div class="nav-group">
<div class="nav-label">Übersicht</div>
<a class="nav-link" href="https://seaside.pacim.de/">
<svg class="icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="7" height="7" rx="1.5"/><rect x="14" y="3" width="7" height="4" rx="1.5"/><rect x="3" y="14" width="7" height="7" rx="1.5"/><rect x="14" y="10" width="7" height="11" rx="1.5"/></svg>
<span class="nav-text">Cockpit</span>
</a>
<a class="nav-link" href="https://seaside.pacim.de/tasks/dashboard/">
<svg class="icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M3 10h18M8 4v6M16 4v6"/></svg>
<span class="nav-text">Kalender</span>
</a>
<a class="nav-link" href="https://seaside.pacim.de/events/">
<svg class="icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M16 3v4M8 3v4M3 11h18M8 15h.01M12 15h.01M16 15h.01"/></svg>
<span class="nav-text">Events</span>
</a>
</div>
<div class="nav-group">
<div class="nav-label">Reports</div>
<a class="nav-link" href="https://seaside.pacim.de/accounting/dashboard/">
<svg class="icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M5 21V3h14v18l-3-2-3 2-3-2-3 2-2-2z"/><path d="M9 8h6M9 12h6M9 16h4"/></svg>
<span class="nav-text">Buchhaltung</span>
</a>
<a class="nav-link" href="https://seaside.pacim.de/reports/yearly/">
<svg class="icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 19V5M8 19v-8M12 19V9M16 19v-5M20 19v-9"/></svg>
<span class="nav-text">Buchungen nach Jahren</span>
</a>
<div class="nav-tree">
<button type="button" class="nav-link nav-toggle" aria-expanded="false">
<svg class="icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
<span class="nav-text">Zeiterfassung</span>
<svg class="nav-chev" width="12" height="12" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="M6 4l4 4-4 4"/></svg>
</button>
<div class="nav-sub"><div class="nav-sub-inner">
<a class="nav-sublink" href="https://seaside.pacim.de/worktime/dashboard/">Übersicht</a>
<a class="nav-sublink" href="https://seaside.pacim.de/worktime/employees/">Mitarbeiter</a>
<a class="nav-sublink" href="https://seaside.pacim.de/worktime/create/">Zeitnachweise</a>
</div></div>
</div>
</div>
<div class="nav-group">
<div class="nav-label">System</div>
<a class="nav-link active" href="https://seaside.pacim.de/mailing/">
<svg class="icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/></svg>
<span class="nav-text">Mailing</span>
</a>
<a class="nav-link" href="https://seaside.pacim.de/partner/">
<svg class="icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M17 20v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 20v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75"/></svg>
<span class="nav-text">Partnerprogramm</span>
</a>
<div class="nav-tree">
<button type="button" class="nav-link nav-toggle" aria-expanded="false">
<svg class="icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="3"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1"/></svg>
<span class="nav-text">Einstellungen</span>
<svg class="nav-chev" width="12" height="12" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="M6 4l4 4-4 4"/></svg>
</button>
<div class="nav-sub"><div class="nav-sub-inner">
<a class="nav-sublink" href="https://seaside.pacim.de/pacim/system/">Einstellungen</a>
<a class="nav-sublink" href="https://seaside.pacim.de/imports/manager/">Import-Manager</a>
</div></div>
</div>
</div>
</nav>
<div class="sidebar-footer">
<div class="sidebar-user">
<div class="avatar">P<span class="online"></span></div>
<div class="sidebar-user-info">
<div class="name">Daniel Großklags</div>
<div class="role">Administrator</div>
</div>
</div>
</div>
</aside>
<main class="main">
<header class="topbar">
<div class="topbar-left">
<button class="sidebar-toggle" type="button" aria-label="Menü umschalten" aria-controls="sidebar" aria-expanded="false">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="M4 6h16M4 12h16M4 18h16"/></svg>
</button>
<nav class="breadcrumb" aria-label="Breadcrumb"><span>PaCIM</span><span class="sep" aria-hidden="true">›</span><span class="current" aria-current="page">mailing</span></nav>
</div>
<div class="search-box" id="global-search">
<svg class="s-icon" width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><circle cx="7" cy="7" r="5"/><path d="M11 11l3.5 3.5"/></svg>
<input type="text" id="searchform" placeholder="Suche: Kunde, Buchung, Kennzeichen …" aria-label="Suche" autocomplete="off" role="combobox" aria-expanded="false" aria-controls="search-overlay" aria-autocomplete="list">
<div class="search-overlay" id="search-overlay" role="listbox" hidden></div>
</div>
<div class="topbar-right">
<button class="tb-btn theme-toggle" type="button" title="Design umschalten" aria-label="Design umschalten" aria-pressed="false">
<svg class="theme-icon-light" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/></svg>
<svg class="theme-icon-dark" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
</button>
<a class="tb-btn" href="https://seaside.pacim.de/logout.php" title="Abmelden" aria-label="Abmelden">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4"/><path d="M16 17l5-5-5-5M21 12H9"/></svg>
</a>
<div class="dropdown">
<button class="tb-avatar" type="button" id="userMenu" data-bs-toggle="dropdown" aria-expanded="false" title="Benutzerkonto" aria-label="Benutzerkonto">DA</button>
<ul class="dropdown-menu dropdown-menu-end shadow-sm" aria-labelledby="userMenu">
<li><h6 class="dropdown-header text-truncate">Daniel Großklags</h6></li>
<li><a class="dropdown-item d-flex align-items-center gap-2" href="https://seaside.pacim.de/pacim/system/"><i class="material-icons sm">settings</i> Einstellungen</a></li> <li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item d-flex align-items-center gap-2 text-danger" href="https://seaside.pacim.de/logout.php"><i class="material-icons sm">logout</i> Abmelden</a></li>
</ul>
</div>
</div>
</header>
<div class="page-wrapper" id="main-content" role="main">
<link rel="stylesheet" href="https://seaside.pacim.de/assets/css/cockpit.css?v=1780917736">
<div class="page-header">
<div class="page-pretitle">System</div>
<h1 class="h3 mb-0">Mailing</h1>
<div class="text-muted small mt-1">E-Mail-Templates verwalten, Vorschau und Testversand. SMTP & Header/Footer unter Einstellungen → E-Mail.</div>
</div>
<ul class="nav nav-tabs mb-3" role="tablist">
<li class="nav-item"><button class="nav-link active" data-bs-toggle="tab" data-bs-target="#ml-templates" type="button" role="tab">Templates</button></li>
<li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#ml-rules" type="button" role="tab">Regeln</button></li>
<li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#ml-queue" type="button" role="tab">Versand</button></li>
<li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#ml-newsletter" type="button" role="tab">Newsletter</button></li>
<li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#ml-lists" type="button" role="tab">Listen</button></li>
<li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#ml-accounts" type="button" role="tab">E-Mail-Konten</button></li>
<li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#ml-settings" type="button" role="tab">Einstellungen</button></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="ml-templates" role="tabpanel">
<div class="d-flex justify-content-end mb-3">
<button class="btn btn-primary" id="mlAddBtn"><i class="material-icons sm">add</i> Template anlegen</button>
</div>
<div class="card"><div class="table-responsive">
<table class="table table-hover align-middle mb-0">
<thead><tr><th>Name</th><th>Schlüssel</th><th>Betreff</th><th>Typ</th><th>Status</th><th></th></tr></thead>
<tbody id="mlBody"><tr><td colspan="6" class="text-center text-muted py-4">Wird geladen …</td></tr></tbody>
</table>
</div></div>
</div>
<div class="tab-pane fade" id="ml-rules" role="tabpanel">
<div class="d-flex justify-content-between align-items-center mb-3">
<div class="text-muted small">Regeln entscheiden, welches Template bei welchem Auslöser gesendet wird – mit mehreren Filtern (UND/ODER).</div>
<button class="btn btn-primary" id="rlAddBtn"><i class="material-icons sm">add</i> Regel anlegen</button>
</div>
<div class="card"><div class="table-responsive">
<table class="table table-hover align-middle mb-0">
<thead><tr><th>Name</th><th>Auslöser</th><th>Template</th><th>Filter</th><th>Status</th><th></th></tr></thead>
<tbody id="rlBody"><tr><td colspan="6" class="text-center text-muted py-4">Wird geladen …</td></tr></tbody>
</table>
</div></div>
</div>
<div class="tab-pane fade" id="ml-queue" role="tabpanel">
<div class="row g-3 mb-3">
<div class="col-6 col-md-3"><div class="card h-100"><div class="stat"><div class="stat-icon yellow"><i class="material-icons">schedule</i></div><div class="stat-content"><div class="stat-label">In Queue</div><div class="stat-value-row"><span class="stat-value" id="qStatQueued">–</span></div></div></div></div></div>
<div class="col-6 col-md-3"><div class="card h-100"><div class="stat"><div class="stat-icon green"><i class="material-icons">check_circle</i></div><div class="stat-content"><div class="stat-label">Gesendet (System)</div><div class="stat-value-row"><span class="stat-value" id="qStatSent">–</span></div></div></div></div></div>
<div class="col-6 col-md-3"><div class="card h-100"><div class="stat"><div class="stat-icon red"><i class="material-icons">error</i></div><div class="stat-content"><div class="stat-label">Fehlgeschlagen</div><div class="stat-value-row"><span class="stat-value" id="qStatFailed">–</span></div></div></div></div></div>
<div class="col-6 col-md-3 d-flex align-items-center"><button class="btn btn-primary w-100" id="qProcess"><i class="material-icons sm">send</i> Queue verarbeiten</button></div>
</div>
<div class="alert alert-info small" id="qTransportNote"></div>
<div class="card"><div class="card-header fw-bold">Letzte Systemmails</div><div class="table-responsive">
<table class="table table-hover align-middle mb-0">
<thead><tr><th>Zeit</th><th>Empfänger</th><th>Betreff</th><th>Status</th><th>Fehler</th></tr></thead>
<tbody id="qBody"><tr><td colspan="5" class="text-center text-muted py-4">Wird geladen …</td></tr></tbody>
</table>
</div></div>
</div>
<div class="tab-pane fade" id="ml-newsletter" role="tabpanel">
<div class="d-flex justify-content-between align-items-center mb-3">
<div class="text-muted small">Newsletter nur an Kunden mit Einwilligung – Abmeldungen werden automatisch berücksichtigt.</div>
<button class="btn btn-primary" id="cpAddBtn"><i class="material-icons sm">add</i> Kampagne anlegen</button>
</div>
<div class="card"><div class="table-responsive">
<table class="table table-hover align-middle mb-0">
<thead><tr><th>Name</th><th>Betreff</th><th>Status</th><th class="text-end">Empfänger</th><th class="text-end">Gesendet</th><th class="text-end">Fehler</th><th></th></tr></thead>
<tbody id="cpBody"><tr><td colspan="7" class="text-center text-muted py-4">Wird geladen …</td></tr></tbody>
</table>
</div></div>
</div>
<div class="tab-pane fade" id="ml-lists" role="tabpanel">
<div class="d-flex justify-content-between align-items-center mb-3">
<div class="text-muted small">Eigene Empfänger-Listen (z. B. Reisebüros, Ausschreibungen). Als Zielgruppe in Newsletter-Kampagnen wählbar.</div>
<button class="btn btn-primary" id="lsAddBtn"><i class="material-icons sm">add</i> Liste anlegen</button>
</div>
<div class="card"><div class="table-responsive">
<table class="table table-hover align-middle mb-0">
<thead><tr><th>Name</th><th class="text-end">Einträge</th><th></th></tr></thead>
<tbody id="lsBody"><tr><td colspan="3" class="text-center text-muted py-4">Wird geladen …</td></tr></tbody>
</table>
</div></div>
</div>
<div class="tab-pane fade" id="ml-settings" role="tabpanel">
<form id="mlSettingsForm" autocomplete="off">
<input type="hidden" name="mailingform" value="1">
<div class="card mb-3">
<div class="card-header d-flex justify-content-between align-items-center">
<span class="fw-bold">Universeller Header & Footer (HTML)</span>
<button type="submit" class="btn btn-sm btn-primary"><i class="material-icons sm">save</i> Speichern</button>
</div>
<div class="card-body">
<div class="text-muted small mb-2">Wird um den Template-Inhalt gelegt (sofern Template „Layout verwenden" aktiv hat). Platzhalter wie <code>[link_unsubscribe]</code> sind erlaubt. Leer = Standard.</div>
<div class="mb-3"><label class="form-label">Header</label><textarea class="form-control" name="header" id="mls-header" rows="5" style="font-family:monospace;font-size:12px;"></textarea></div>
<div class="mb-3"><label class="form-label">Footer</label><textarea class="form-control" name="footer" id="mls-footer" rows="5" style="font-family:monospace;font-size:12px;"></textarea></div>
<div class="row g-3">
<div class="col-12 col-md-6"><label class="form-label">Navigations-Link <code>[navigation_link]</code> – ohne Valet</label><input class="form-control" name="nav_map" id="mls-nav-map" placeholder="https://map.pacim.de"></div>
<div class="col-12 col-md-6"><label class="form-label">Navigations-Link – mit Valet</label><input class="form-control" name="nav_valet" id="mls-nav-valet" placeholder="https://valet.pacim.de"></div>
<div class="col-12 col-md-6"><label class="form-label">Anreiseanschrift <code>[navigation_address]</code> – ohne Valet</label><input class="form-control" name="nav_addr_map" id="mls-nav-addr-map" placeholder="An der Werft 3, 18119 Warnemünde"></div>
<div class="col-12 col-md-6"><label class="form-label">Anreiseanschrift – mit Valet</label><input class="form-control" name="nav_addr_valet" id="mls-nav-addr-valet" placeholder="Am Passagierkai 3, 18119 Warnemünde"></div>
</div>
<div class="js-status small mt-2" id="mls-status"></div>
</div>
</div>
</form>
</div>
<div class="tab-pane fade" id="ml-accounts" role="tabpanel">
<div class="d-flex justify-content-between align-items-center mb-3">
<div class="text-muted small">Eigene Absender-Konten (SMTP). Je Regel und Newsletter wählbar; „Standard" nutzt die globale SMTP-Konfiguration (Einstellungen → E-Mail).</div>
<button type="button" class="btn btn-primary" id="acAddBtn"><i class="material-icons sm">add</i> Konto anlegen</button>
</div>
<div class="card"><div class="table-responsive">
<table class="table table-hover align-middle mb-0">
<thead><tr><th>Name</th><th>Absender</th><th>Host</th><th>Status</th><th></th></tr></thead>
<tbody id="acBody"><tr><td colspan="5" class="text-center text-muted py-3">Wird geladen …</td></tr></tbody>
</table>
</div></div>
</div>
</div>
<div class="modal fade" id="cpModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-xl modal-dialog-centered">
<div class="modal-content">
<div class="modal-header"><h5 class="modal-title" id="cpTitle">Kampagne</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
<form id="cpForm" autocomplete="off">
<div class="modal-body">
<input type="hidden" name="id" id="cpId">
<div class="row g-3">
<div class="col-12 col-md-4"><label class="form-label">Name *</label><input class="form-control" name="name" id="cpName" required></div>
<div class="col-12 col-md-4"><label class="form-label">Betreff</label><input class="form-control" name="subject" id="cpSubject"></div>
<div class="col-12 col-md-4"><label class="form-label">Empfänger</label><select class="form-select" name="audience" id="cpAudience"></select></div>
<div class="col-12 col-md-4"><label class="form-label">Absender-Konto</label><select class="form-select" name="account" id="cpAccount"></select></div>
<div class="col-12"><label class="form-label">Inhalt (HTML)</label><textarea class="form-control" name="content" id="cpContent" rows="9" style="font-family:monospace;font-size:12px;"></textarea>
<div class="text-muted small mt-1">Platzhalter: <code>[salutation]</code> <code>[name]</code> <code>[customer_firstname]</code> <code>[link_unsubscribe]</code>. Header/Footer-Layout wird automatisch angewendet.</div>
</div>
<div class="col-12 col-md-6"><label class="form-label">Versand planen (optional)</label><input class="form-control" type="datetime-local" name="scheduled" id="cpScheduled"><div class="form-text">leer = sofort nach „Senden". Vor diesem Zeitpunkt wird nicht versendet.</div></div>
<div class="col-12 col-md-6"><label class="form-label">Dateianhänge</label>
<ul class="list-group list-group-flush mb-2" id="cpAttList"></ul>
<div class="d-flex flex-wrap align-items-center gap-2">
<input type="file" class="form-control form-control-sm" id="cpAttFile" style="max-width:260px;">
<button type="button" class="btn btn-sm btn-primary" id="cpAttUpload"><i class="material-icons sm">upload</i> Hochladen</button>
<span class="small" id="cpAttMsg"></span>
</div>
</div>
</div>
<hr>
<div class="d-flex align-items-center gap-3 mb-2">
<span class="fw-semibold" id="cpFilterLabel">Empfänger-Filter</span>
<div class="d-flex align-items-center gap-3" id="cpFilterControls">
<div class="btn-group btn-group-sm" role="group">
<input type="radio" class="btn-check" name="cplogic" id="cpLogicAnd" value="and" checked><label class="btn btn-outline-secondary" for="cpLogicAnd">alle (UND)</label>
<input type="radio" class="btn-check" name="cplogic" id="cpLogicOr" value="or"><label class="btn btn-outline-secondary" for="cpLogicOr">eine (ODER)</label>
</div>
<button type="button" class="btn btn-sm btn-light border" id="cpAddFilter"><i class="material-icons sm">add</i> Filter</button>
</div>
<span class="ms-auto badge bg-primary" id="cpCount" title="passende Empfänger">– Empfänger</span>
</div>
<div id="cpFilters"></div>
<div class="text-muted small mt-1" id="cpFilterNote">Keine Filter = alle Kunden mit Newsletter-Einwilligung.</div>
<div class="js-status small mt-2" id="cpFormMsg"></div>
</div>
<div class="modal-footer flex-wrap">
<button type="button" class="btn btn-light text-danger me-auto d-none" id="cpDeleteBtn"><i class="material-icons sm">delete</i> Löschen</button>
<div class="d-flex align-items-center gap-2 flex-wrap">
<input class="form-control form-control-sm" id="cpTestTo" type="email" style="width:190px;" placeholder="Testmail an …">
<button type="button" class="btn btn-light border btn-sm" id="cpTestBtn">Test</button>
<button type="button" class="btn btn-outline-primary btn-sm" id="cpFreezeBtn"><i class="material-icons sm">groups</i> Empfänger einfrieren</button>
<button type="button" class="btn btn-success btn-sm" id="cpSendBtn"><i class="material-icons sm">send</i> Senden</button>
<button class="btn btn-primary btn-sm" type="submit"><i class="material-icons sm">save</i> Speichern</button>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="modal fade" id="mlEditModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-xl modal-dialog-centered">
<div class="modal-content">
<div class="modal-header"><h5 class="modal-title" id="mlEditTitle">Template</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
<form id="mlForm" autocomplete="off">
<div class="modal-body">
<input type="hidden" name="id" id="mlId">
<div class="row g-3">
<div class="col-12 col-md-5"><label class="form-label">Name *</label><input class="form-control" name="name" id="mlName" required></div>
<div class="col-12 col-md-4"><label class="form-label">Schlüssel (key)</label><input class="form-control" name="key" id="mlKey" placeholder="z. B. booking_confirmation"></div>
<div class="col-6 col-md-3"><label class="form-label">Typ</label>
<select class="form-select" name="type" id="mlType"><option value="system">System</option><option value="newsletter">Newsletter</option><option value="both">Beides</option></select>
</div>
<div class="col-12"><label class="form-label">Betreff</label><input class="form-control" name="subject" id="mlSubject"></div>
<div class="col-12 col-lg-8">
<div class="d-flex justify-content-between align-items-center mb-1">
<label class="form-label mb-0">Inhalt</label>
<button type="button" class="btn btn-sm btn-light border" id="mlToggleSrc"><i class="material-icons sm">code</i> <span>HTML-Quelltext</span></button>
</div>
<textarea class="form-control" name="content" id="mlContent" rows="14" style="font-family:monospace;font-size:12px;"></textarea>
</div>
<div class="col-12 col-lg-4">
<label class="form-label">Platzhalter <span class="text-muted small">(klicken = kopieren & einfügen)</span></label>
<div id="mlPlaceholders" class="ml-ph-wrap">
<div class="ml-ph-group">Allgemein</div>
<button type="button" class="ml-ph" data-ph="[logo]">Logo</button>
<div class="ml-ph-group">Kunde</div>
<button type="button" class="ml-ph" data-ph="[salutation]">Anrede</button>
<button type="button" class="ml-ph" data-ph="[customer_firstname]">Vorname</button>
<button type="button" class="ml-ph" data-ph="[customer_lastname]">Nachname</button>
<button type="button" class="ml-ph" data-ph="[customer_email]">E-Mail</button>
<button type="button" class="ml-ph" data-ph="[customer_phone]">Telefon</button>
<div class="ml-ph-group">Buchung</div>
<button type="button" class="ml-ph" data-ph="[booking_no]">Buchungsnr.</button>
<button type="button" class="ml-ph" data-ph="[booking_begin]">Anreise</button>
<button type="button" class="ml-ph" data-ph="[booking_end]">Rückreise</button>
<button type="button" class="ml-ph" data-ph="[booking_type]">Stellplatz</button>
<button type="button" class="ml-ph" data-ph="[booking_event]">Schiff</button>
<button type="button" class="ml-ph" data-ph="[booking_plate]">Kennzeichen</button>
<div class="ml-ph-group">Rechnung / Zahlung</div>
<button type="button" class="ml-ph" data-ph="[invoice_no]">Rechnungsnr.</button>
<button type="button" class="ml-ph" data-ph="[invoice_price]">Betrag</button>
<button type="button" class="ml-ph" data-ph="[invoice_products]">Leistungen (Liste)</button>
<button type="button" class="ml-ph" data-ph="[invoice_date]">Datum</button>
<button type="button" class="ml-ph" data-ph="[payment_status]">Zahlstatus</button>
<div class="ml-ph-group">Links</div>
<button type="button" class="ml-ph" data-ph="[navigation_link]">Navigations-Link</button>
<button type="button" class="ml-ph" data-ph="[navigation_address]">Anreiseanschrift</button>
<button type="button" class="ml-ph" data-ph="[link_booking]">Buchungslink</button>
<button type="button" class="ml-ph" data-ph="[link_invoice]">Rechnungslink</button>
<button type="button" class="ml-ph" data-ph="[link_review]">Bewertungslink</button>
<button type="button" class="ml-ph" data-ph="[link_rebook]">Neu buchen</button>
<button type="button" class="ml-ph" data-ph="[link_unsubscribe]">Abmeldelink</button>
</div>
<div class="small mt-1" id="mlPhCopied" style="height:16px;color:#2e9e4f;"></div>
</div>
<div class="col-12 d-flex gap-4">
<label class="form-check d-flex align-items-center gap-2"><input class="form-check-input" type="checkbox" name="layout" id="mlLayout" value="1" checked> <span>Header/Footer-Layout verwenden</span></label>
<label class="form-check d-flex align-items-center gap-2"><input class="form-check-input" type="checkbox" name="active" id="mlActive" value="1" checked> <span>aktiv</span></label>
</div>
<div class="col-12">
<hr class="my-1">
<label class="form-label mb-1">Dateianhänge <span class="text-muted small">(Dokumente je Empfänger, z. B. Buchungsbestätigung/Rechnung)</span></label>
<div id="mlAttHint" class="text-muted small">Bitte das Template zuerst speichern, um Anhänge zu verwalten.</div>
<div id="mlAttBox" class="d-none">
<ul class="list-group list-group-flush mb-2" id="mlAttList"></ul>
<div class="d-flex flex-wrap align-items-end gap-2">
<div><label class="form-label small mb-0">Dokument</label>
<select class="form-select form-select-sm" id="mlAttPreset" style="min-width:220px;"></select>
</div>
<div id="mlAttCustom" class="d-none d-flex gap-2">
<div><label class="form-label small mb-0">Pfad (rel. zu datas/)</label><input class="form-control form-control-sm" id="mlAttPath" placeholder="z. B. booking/[booking_no].pdf"></div>
<div><label class="form-label small mb-0">Dateiname</label><input class="form-control form-control-sm" id="mlAttName" placeholder="[booking_no]-Dokument.pdf"></div>
</div>
<button type="button" class="btn btn-sm btn-light border" id="mlAttAdd"><i class="material-icons sm">attach_file</i> Hinzufügen</button>
<span class="small" id="mlAttMsg"></span>
</div>
<div class="d-flex flex-wrap align-items-center gap-2 mt-2 pt-2 border-top">
<label class="form-label small mb-0">Datei hochladen</label>
<input type="file" class="form-control form-control-sm" id="mlAttFile" style="max-width:320px;">
<button type="button" class="btn btn-sm btn-primary" id="mlAttUpload"><i class="material-icons sm">upload</i> Hochladen & anhängen</button>
<span class="small" id="mlAttUpMsg"></span>
</div>
</div>
</div>
</div>
<div class="js-status small mt-2" id="mlFormMsg"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light text-danger me-auto d-none" id="mlDeleteBtn"><i class="material-icons sm">delete</i> Löschen</button>
<button type="button" class="btn btn-light" id="mlPreviewBtn"><i class="material-icons sm">visibility</i> Vorschau</button>
<button type="button" class="btn btn-light" data-bs-dismiss="modal">Abbrechen</button>
<button class="btn btn-primary" type="submit"><i class="material-icons sm">save</i> Speichern</button>
</div>
</form>
</div>
</div>
</div>
<div class="modal fade" id="mlPreviewModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-xl modal-dialog-centered">
<div class="modal-content" style="height:88vh;">
<div class="modal-header">
<h5 class="modal-title">Vorschau: <span id="mlPvSubject" class="fw-normal"></span></h5>
<div class="ms-auto d-flex align-items-center gap-2">
<input class="form-control form-control-sm" id="mlPvInvoice" style="width:150px;" placeholder="Rechnungs-ID (Daten)">
<button type="button" class="btn btn-sm btn-light border" id="mlPvReload">Aktualisieren</button>
<input class="form-control form-control-sm" id="mlPvTo" type="email" style="width:200px;" placeholder="Testmail an …">
<button type="button" class="btn btn-sm btn-primary" id="mlPvSend"><i class="material-icons sm">send</i> Test</button>
<button type="button" class="btn-close ms-1" data-bs-dismiss="modal"></button>
</div>
</div>
<div class="modal-body p-0" style="overflow:hidden;"><iframe id="mlPvFrame" style="width:100%;height:100%;border:0;background:#fff;"></iframe></div>
<div class="px-3 py-1 small" id="mlPvStatus"></div>
</div>
</div>
</div>
<div class="modal fade" id="rlModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content">
<div class="modal-header"><h5 class="modal-title" id="rlTitle">Regel</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
<form id="rlForm" autocomplete="off">
<div class="modal-body">
<input type="hidden" name="id" id="rlId">
<div class="row g-3">
<div class="col-12 col-md-6"><label class="form-label">Name *</label><input class="form-control" name="name" id="rlName" required></div>
<div class="col-12 col-md-6"><label class="form-label">Template *</label><select class="form-select" name="template" id="rlTemplate"></select></div>
<div class="col-12 col-md-6"><label class="form-label">Auslöser *</label><select class="form-select" name="trigger" id="rlTrigger"></select></div>
<div class="col-12 col-md-6"><label class="form-label">Absender-Konto</label><select class="form-select" name="account" id="rlAccount"></select></div>
<div class="col-12 col-md-6" id="rlOffsetWrap" style="display:none;"><label class="form-label">Tage (Versatz)</label><input class="form-control" type="number" min="0" name="offset" id="rlOffset" value="0"><div class="form-text">z. B. „3 Tage vor Anreise" → 3</div></div>
<div class="col-12 col-md-6"><label class="form-label">Empfänger</label>
<select class="form-select" id="rlRecipientMode">
<option value="customer">Eigentlicher Empfänger (Kunde/Partner)</option>
<option value="custom">Eigene E-Mail-Adresse …</option>
</select>
</div>
<div class="col-12 col-md-6 d-none" id="rlRecipientWrap"><label class="form-label">E-Mail-Adresse *</label><input class="form-control" type="email" id="rlRecipient" placeholder="empfaenger@firma.de"><div class="form-text">Mails dieser Regel gehen an diese feste Adresse.</div></div>
<div class="col-12"><label class="form-label">BCC – Blindkopie</label><input class="form-control" id="rlBcc" placeholder="z. B. buchhaltung@firma.de, archiv@firma.de"><div class="form-text">Mehrere Adressen mit Komma trennen. Empfänger sehen die Blindkopien nicht.</div></div>
</div>
<div class="row g-3 mt-0">
<div class="col-12"><label class="form-label mb-1">Versand-Zeitpunkt</label></div>
<div class="col-12 col-md-6" id="rlSendOffsetWrap"><label class="form-label">Versand</label>
<select class="form-select" id="rlSendOffset" name="send_offset">
<option value="0">am Tag des Ereignisses</option>
<option value="1">1 Tag später</option>
<option value="2">2 Tage später</option>
<option value="3">3 Tage später</option>
<option value="5">5 Tage später</option>
<option value="7">7 Tage später</option>
</select>
</div>
<div class="col-12 col-md-6"><label class="form-label">Uhrzeit (vorher nicht senden)</label><input class="form-control" type="time" name="send_time" id="rlSendTime"><div class="form-text">leer = sofort, sobald die Queue läuft</div></div>
</div>
<hr>
<div class="d-flex align-items-center gap-3 mb-2">
<span class="fw-semibold">Filter</span>
<div class="btn-group btn-group-sm" role="group">
<input type="radio" class="btn-check" name="logic" id="rlLogicAnd" value="and" checked><label class="btn btn-outline-secondary" for="rlLogicAnd">alle (UND)</label>
<input type="radio" class="btn-check" name="logic" id="rlLogicOr" value="or"><label class="btn btn-outline-secondary" for="rlLogicOr">eine (ODER)</label>
</div>
<button type="button" class="btn btn-sm btn-light border ms-auto" id="rlAddFilter"><i class="material-icons sm">add</i> Filter</button>
</div>
<div id="rlFilters"></div>
<div class="text-muted small mt-1">Keine Filter = Regel trifft immer zu.</div>
<div class="col-12 mt-3"><label class="form-check d-flex align-items-center gap-2"><input class="form-check-input" type="checkbox" name="active" id="rlActive" value="1" checked> <span>aktiv</span></label></div>
<div class="js-status small mt-2" id="rlFormMsg"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light text-danger me-auto d-none" id="rlDeleteBtn"><i class="material-icons sm">delete</i> Löschen</button>
<button type="button" class="btn btn-light" data-bs-dismiss="modal">Abbrechen</button>
<button class="btn btn-primary" type="submit"><i class="material-icons sm">save</i> Speichern</button>
</div>
</form>
</div>
</div>
</div>
<div class="modal fade" id="lsModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content">
<div class="modal-header"><h5 class="modal-title" id="lsTitle">Liste</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
<div class="modal-body">
<input type="hidden" id="lsId">
<div class="row g-2 align-items-end mb-3">
<div class="col-12 col-md-8"><label class="form-label">Listenname *</label><input class="form-control" id="lsName" required></div>
<div class="col-12 col-md-4"><button type="button" class="btn btn-primary w-100" id="lsSaveName"><i class="material-icons sm">save</i> Name speichern</button></div>
</div>
<div id="lsEntryBox" class="d-none">
<hr>
<h6 class="mb-2">Empfänger hinzufügen</h6>
<div class="mb-2">
<label class="form-label small mb-0">E-Mails (mehrere – komma-, semikolon- oder zeilengetrennt)</label>
<textarea class="form-control" id="lsBatch" rows="2" placeholder="a@firma.de, b@firma.de, …"></textarea>
<div class="form-text">Beim Batch werden nur E-Mails übernommen (ohne Namen).</div>
</div>
<div class="row g-2 align-items-end mb-2">
<div class="col-12 col-md-3"><label class="form-label small mb-0">Einzeln: E-Mail</label><input class="form-control form-control-sm" id="lsEmail" placeholder="kontakt@reise.de"></div>
<div class="col-6 col-md-2"><label class="form-label small mb-0">Vorname</label><input class="form-control form-control-sm" id="lsFn"></div>
<div class="col-6 col-md-2"><label class="form-label small mb-0">Nachname</label><input class="form-control form-control-sm" id="lsLn"></div>
<div class="col-12 col-md-3"><label class="form-label small mb-0">Firma (statt Name)</label><input class="form-control form-control-sm" id="lsCo"></div>
<div class="col-12 col-md-2"><button type="button" class="btn btn-sm btn-primary w-100" id="lsEntryAdd"><i class="material-icons sm">person_add</i> Hinzufügen</button></div>
</div>
<div class="small mb-2" id="lsEntryMsg"></div>
<div class="table-responsive" style="max-height:300px;overflow:auto;">
<table class="table table-sm table-hover align-middle mb-0">
<thead><tr><th>E-Mail</th><th>Name / Firma</th><th></th></tr></thead>
<tbody id="lsEntries"></tbody>
</table>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light text-danger me-auto d-none" id="lsDeleteBtn"><i class="material-icons sm">delete</i> Liste löschen</button>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Schließen</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="acModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content">
<div class="modal-header"><h5 class="modal-title" id="acTitle">E-Mail-Konto</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
<form id="acForm" autocomplete="off">
<div class="modal-body">
<input type="hidden" id="acId">
<div class="row g-3">
<div class="col-12 col-md-6"><label class="form-label">Konto-Name *</label><input class="form-control" id="acName" required placeholder="z. B. Buchhaltung"></div>
<div class="col-6 col-md-3 d-flex align-items-end"><label class="form-check d-flex align-items-center gap-2"><input class="form-check-input" type="checkbox" id="acActive" checked> <span>aktiv</span></label></div>
<div class="col-12 col-md-7"><label class="form-label">SMTP-Host</label><input class="form-control" id="acHost"></div>
<div class="col-6 col-md-2"><label class="form-label">Port</label><input class="form-control" type="number" id="acPort" value="587"></div>
<div class="col-6 col-md-3"><label class="form-label">Verschlüsselung</label><select class="form-select" id="acSecure"><option value="">keine</option><option value="tls">TLS</option><option value="ssl">SSL</option></select></div>
<div class="col-6 col-md-3 d-flex align-items-end"><label class="form-check d-flex align-items-center gap-2"><input class="form-check-input" type="checkbox" id="acAuth" checked> <span>Authentifizierung</span></label></div>
<div class="col-12 col-md-4"><label class="form-label">Benutzer</label><input class="form-control" id="acUser" autocomplete="off"></div>
<div class="col-12 col-md-5"><label class="form-label">Passwort</label><input class="form-control" type="password" id="acPass" autocomplete="new-password" placeholder="•••••• (leer = unverändert)"></div>
<div class="col-12 col-md-6"><label class="form-label">Absender-Adresse</label><input class="form-control" type="email" id="acFromEmail"></div>
<div class="col-12 col-md-6"><label class="form-label">Absender-Name</label><input class="form-control" id="acFromName"></div>
</div>
<hr>
<div class="d-flex flex-wrap align-items-center gap-2">
<button type="button" class="btn btn-light border btn-sm" id="acTestConn"><i class="material-icons sm">wifi_tethering</i> Verbindung testen</button>
<input class="form-control form-control-sm" style="max-width:240px;" type="email" id="acTestTo" placeholder="Testmail an …">
<button type="button" class="btn btn-light border btn-sm" id="acTestMail"><i class="material-icons sm">send</i> Testmail</button>
<span class="small ms-1" id="acTestMsg"></span>
</div>
<div class="js-status small mt-2" id="acFormMsg"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light text-danger me-auto d-none" id="acDeleteBtn"><i class="material-icons sm">delete</i> Löschen</button>
<button class="btn btn-primary" type="submit"><i class="material-icons sm">save</i> Speichern</button>
</div>
</form>
</div>
</div>
</div>
<style>
#mlForm .form-check-input{ -webkit-appearance:auto; appearance:auto; width:1.1em; height:1.1em; min-height:auto; margin:0; }
#rlForm .form-check-input{ -webkit-appearance:auto; appearance:auto; width:1.1em; height:1.1em; min-height:auto; margin:0; }
#mlForm .form-check{ display:flex; align-items:center; gap:8px; margin:0; }
.ml-ph-wrap{ border:1px solid var(--border-color,#e6e7eb); border-radius:6px; padding:8px; max-height:340px; overflow:auto; background:var(--bg-surface,#fff); }
.ml-ph-group{ font-size:10.5px; text-transform:uppercase; letter-spacing:.4px; color:#7e8896; margin:8px 0 3px; }
.ml-ph-group:first-child{ margin-top:0; }
.ml-ph{ display:inline-block; margin:2px 3px 2px 0; padding:2px 8px; font-size:12px; border:1px solid var(--border-color,#e6e7eb); border-radius:12px; background:#f5f7fb; color:#1e2633; cursor:pointer; }
.ml-ph:hover{ background:#0b4677; color:#fff; border-color:#0b4677; }
.tox-tinymce-aux, .tox-dialog-wrap{ z-index:1090 !important; } /* TinyMCE-Dialoge über dem Modal */
</style>
<script src="https://cdn.jsdelivr.net/npm/tinymce@7/tinymce.min.js" referrerpolicy="origin"></script>
<script src="https://seaside.pacim.de/assets/js/mailing.js?v=1781469092"></script>
</div><!-- /.page-wrapper -->
<footer class="footer">
<span>PaCIM · Parken-am-Schiff.de</span>
<span>SeaSide Travel GmbH & Co. Immobilien KG</span>
</footer>
</main><!-- /.main -->
<div class="sidebar-backdrop" hidden></div>
<!-- Globale JS-Variable -->
<script>
var SITE_URL = "https://seaside.pacim.de";
</script>
<!-- Bootstrap 5 Bundle (Content-Komponenten, inkl. Popper) -->
<script src="https://seaside.pacim.de/assets/js/bootstrap.bundle.min.js"></script>
<!-- Gentelella v4 Shell-Verhalten (Sidebar/Drawer/Theme) -->
<script src="https://seaside.pacim.de/assets/js/gentelella.js?v=1780438958"></script>
<script src="https://seaside.pacim.de/assets/js/search.js?v=1780917509"></script>
<!-- Vanilla-Plugins -->
<script src="https://seaside.pacim.de/assets/js/plugins/quill.min.js"></script>
<script src="https://seaside.pacim.de/assets/js/plugins/choices.min.js"></script>
<script src="https://seaside.pacim.de/assets/js/plugins/theme-functions.js"></script>
<script src="https://seaside.pacim.de/assets/js/custom.min.js?v=1780452213"></script>
<script src="https://seaside.pacim.de/assets/js/filter.js?v=1780443738"></script>
<script src="https://seaside.pacim.de/assets/js/table-sort.js?v=1780460902"></script>
<script src="https://seaside.pacim.de/assets/js/address-autocomplete.js?v=1780694884"></script>
<!-- Bestätigungs-Modal -->
<div class="modal fade" id="confirmationModal" tabindex="-1" role="dialog" aria-labelledby="confirmationModalTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="confirmationModalTitle">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<div class="confirmation m-0 row w-100">
<button type="button" class="btn btn-danger col mx-1 d-block" data-bs-dismiss="modal">Abbrechen</button>
<button type="button" class="btn btn-primary col mx-1 d-block btn-send-ajax">Bestätigen</button>
</div>
<div class="editor m-0 row w-100" style="display:none;">
<button type="button" class="btn btn-light border-secondary col mx-1 d-block" data-bs-dismiss="modal">Abbrechen</button>
<button type="button" class="btn btn-success border-secondary col mx-1 d-block btn-send-ajax">Speichern</button>
</div>
</div>
</div>
</div>
</div>
<!-- Datei-Viewer-Modal -->
<div class="modal fade" id="fileModal" tabindex="-1" role="dialog" aria-labelledby="fileModalTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="fileModalTitle">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-danger col" data-bs-dismiss="modal">Schließen</button>
<button type="button" class="btn btn-primary col">Drucken</button>
</div>
</div>
</div>
</div>
</body>
</html>