Changeset 3476291

Timestamp:

03/06/2026 11:05:10 AM (3 weeks ago)

Author:

luzidmedia

Message:

Update to 1.4.2

Location:

luzid-content-scheduler/trunk

Files:

• assets/css/luzid.css (modified) (1 diff)
• assets/js/luzid-admin.js (modified) (5 diffs)
• howto-de.php (modified) (6 diffs)
• howto-en.php (modified) (1 diff)
• luzid-content-scheduler.php (modified) (46 diffs)
• readme.txt (modified) (5 diffs)

luzid-content-scheduler/trunk/assets/css/luzid.css

@@ -1126 +1126 @@
 /* Recurring rule validation (admin only) */
 .lcs-row--invalid td { background: #fff8e5; }
+
+/* ========================================
+   Card-based Layout for Termine/Wiederholungen
+   ======================================== */
+
+.lcs-cards-repeater {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.lcs-card {
+  background: #f9f9f9;
+  border: 1px solid #dcdcde;
+  border-radius: 4px;
+  padding: 16px;
+}
+
+.lcs-card__row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  align-items: flex-end;
+}
+
+.lcs-card__row + .lcs-card__row {
+  margin-top: 12px;
+  padding-top: 12px;
+  border-top: 1px solid #e5e5e5;
+}
+
+.lcs-card__field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.lcs-card__field label {
+  font-size: 11px;
+  font-weight: 600;
+  color: #646970;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.lcs-card__field input[type="date"],
+.lcs-card__field input[type="time"] {
+  width: 130px;
+  min-width: 130px;
+}
+
+.lcs-card__field input[type="text"] {
+  min-width: 180px;
+}
+
+.lcs-card__field select {
+  min-width: 80px;
+}
+
+.lcs-card__field--wide {
+  flex: 1;
+  min-width: 200px;
+}
+
+.lcs-card__field--wide input[type="text"] {
+  width: 100%;
+}
+
+.lcs-card__actions {
+  display: flex;
+  align-items: flex-end;
+  padding-bottom: 2px;
+}
+
+/* Wiederholungen: Zwei-Zeilen-Layout */
+.lcs-recurring-card {
+  background: #f9f9f9;
+  border: 1px solid #dcdcde;
+  border-radius: 4px;
+  padding: 16px;
+  margin-bottom: 12px;
+}
+
+.lcs-recurring-card__row1 {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.lcs-recurring-card__row2 {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  align-items: flex-end;
+  padding-top: 12px;
+  border-top: 1px solid #e5e5e5;
+}
+
+.lcs-recurring-card__field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.lcs-recurring-card__field label {
+  font-size: 11px;
+  font-weight: 600;
+  color: #646970;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.lcs-recurring-card__field--type {
+  min-width: 140px;
+}
+
+.lcs-recurring-card__field--details {
+  flex: 1;
+  min-width: 200px;
+}
+
+.lcs-recurring-card__field--time input[type="time"] {
+  width: 100px;
+}
+
+.lcs-recurring-card__field--text {
+  flex: 1;
+  min-width: 150px;
+}
+
+.lcs-recurring-card__field--text input {
+  width: 100%;
+}
+
+.lcs-recurring-card__field--period {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.lcs-recurring-card__field--period input[type="date"] {
+  width: 130px;
+}
+
+.lcs-recurring-card__field--period .lcs-help-inline {
+  font-size: 12px;
+  color: #646970;
+}
+
+.lcs-recurring-card__actions {
+  display: flex;
+  align-items: flex-end;
+  padding-bottom: 2px;
+}
+
+/* Inline inputs spacing fix */
+.lcs-inline-inputs {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+}
+
+.lcs-inline-inputs .lcs-input {
+  margin: 0;
+}
+
+.lcs-inline-inputs .lcs-select {
+  margin: 0;
+}
+
+/* Smaller inputs for compact layouts */
+.lcs-input--small {
+  padding: 4px 8px;
+  font-size: 13px;
+}
+
+.lcs-select--small {
+  padding: 4px 8px;
+  font-size: 13px;
+}
+
+/* Warning box for incomplete rules */
+.lcs-rec-inline-warning {
+  margin-bottom: 8px;
+  padding: 8px 10px;
+  background: #fff8e5;
+  border: 1px solid #dba617;
+  border-radius: 4px;
+  color: #6b5a00;
+  font-size: 13px;
+}
+
+.lcs-rec-inline-warning .dashicons {
+  margin-right: 6px;
+  vertical-align: middle;
+}

luzid-content-scheduler/trunk/assets/js/luzid-admin.js

@@ -192 +192 @@
     if (!container) return;
 
-    var rowsWrap = container.querySelector('[data-lcs-rows]');
+    // Support both table-based (tbody with data-lcs-rows) and card-based (.lcs-cards-repeater) layouts
+    var rowsWrap = container.querySelector('[data-lcs-rows]') || container;
     var tpl = container.querySelector('template[data-lcs-template]');
-    if (!rowsWrap || !tpl) return;
+    if (!tpl) return;
 
     container.addEventListener('click', function (e) {
@@ -201 +202 @@
         e.preventDefault();
         var html = tpl.innerHTML;
-        var idx = rowsWrap.querySelectorAll('[data-lcs-row]').length;
+        var idx = container.querySelectorAll('[data-lcs-row]').length;
         html = html.replace(/__i__/g, String(idx));
-        var tmp = document.createElement('tbody');
+        
+        // Create temporary container based on layout type
+        var isCardLayout = container.classList.contains('lcs-cards-repeater');
+        var tmp = document.createElement(isCardLayout ? 'div' : 'tbody');
         tmp.innerHTML = html;
-        // Append all rows from template
-        Array.prototype.slice.call(tmp.children).forEach(function (tr) {
-          rowsWrap.appendChild(tr);
+        
+        // Append all rows/cards from template
+        Array.prototype.slice.call(tmp.children).forEach(function (el) {
+          if (isCardLayout) {
+            // Insert before the template element
+            tpl.parentNode.insertBefore(el, tpl);
+          } else {
+            rowsWrap.appendChild(el);
+          }
         });
         // Update recurring row visibility if needed
-        initRecurringTypeToggle(rowsWrap);
+        initRecurringTypeToggle(container);
         // Native inputs (date/time) need no additional initialization
         return;
@@ -226 +236 @@
 
   function initRecurringTypeToggle(root) {
-    // root can be tbody or document
+    // root can be tbody, div, or document
     var scope = root || document;
 
@@ -235 +245 @@
       row.querySelectorAll('[data-details]').forEach(function (el) {
         var isActive = (el.getAttribute('data-details') === type);
-        el.style.display = isActive ? 'inline-flex' : 'none';
+        el.style.display = isActive ? '' : 'none';
         // Wichtig: Inputs in versteckten Bereichen deaktivieren, damit keine doppelten POST-Werte
         // (z.B. weekday in weekly + nth_weekday_month) den gespeicherten Wert überschreiben.
@@ -242 +252 @@
         });
       });
-      var common = row.querySelector('.lcs-rec-common');
-      if (common) {
-        common.style.display = type ? 'inline-flex' : 'none';
+      // Show/hide all elements with lcs-rec-common class (can be multiple)
+      row.querySelectorAll('.lcs-rec-common').forEach(function (common) {
+        common.style.display = type ? '' : 'none';
         common.querySelectorAll('input, select, textarea').forEach(function (inp) {
           inp.disabled = !type;
         });
-      }
-    }
-
-    scope.querySelectorAll('tr[data-lcs-row]').forEach(applyRow);
+      });
+    }
+
+    // Support both tr[data-lcs-row] (table layout) and div[data-lcs-row] (card layout)
+    scope.querySelectorAll('[data-lcs-row]').forEach(applyRow);
 
     scope.addEventListener('change', function (e) {
       var sel = e.target.closest('.lcs-rec-type');
       if (!sel) return;
-      var row = sel.closest('tr[data-lcs-row]');
+      var row = sel.closest('[data-lcs-row]');
       if (row) applyRow(row);
     });

luzid-content-scheduler/trunk/howto-de.php

@@ -5 +5 @@
 <div class="luzid-howto">
   <div class="lcs-howto-section">
-    <h3>Worum geht’s?</h3>
-    <p>Der <strong>Luzid Content Scheduler</strong> steuert die Sichtbarkeit von Frontend-Contentblöcken (z. B. Banner, Alerts, Divs) anhand von <strong>Terminen</strong>, <strong>Wiederholungen</strong> und <strong>Ausnahmen</strong> – ohne dass du dafür Code schreiben musst.</p>
+    <h3>Worum geht's?</h3>
+    <p>Der <strong>Luzid Content Scheduler</strong> steuert die Sichtbarkeit von Frontend-Contentblöcken (z. B. Banner, Alerts, Divs) anhand von <strong>Terminen</strong>, <strong>Wiederholungen</strong> und <strong>Ausnahmen</strong> – ohne dass du dafür Code schreiben musst.</p>
     <div class="lcs-callout">
       <p><strong>Merksatz:</strong> Der Block ist sichtbar, wenn <strong>mindestens eine Regel passt</strong> (ODER-Logik). <strong>Ausnahmen</strong> überschreiben alles und verhindern die Anzeige.</p>
@@ -15 +15 @@
     <h3>Schnellstart in 3 Schritten</h3>
     <ol>
-      <li><strong>Scheduler anlegen</strong> (Tab „Setup“) und speichern. Dadurch wird der <em>Slug</em> erzeugt.</li>
-      <li>Deinem Frontend-Block die CSS-Klasse <code>.luzid-cs-&lt;slug&gt;</code> geben (siehe Abschnitt „CSS-Klasse in Pagebuildern“).</li>
+      <li><strong>Scheduler anlegen</strong> (Tab „Setup") und speichern. Dadurch wird der <em>Slug</em> erzeugt.</li>
+      <li>Deinem Frontend-Block die CSS-Klasse <code>.luzid-cs-&lt;slug&gt;</code> geben (siehe Abschnitt „CSS-Klasse in Pagebuildern").</li>
       <li>Regeln definieren (Termine/Wiederholungen/Ausnahmen). Optional Event-Offset aktivieren.</li>
     </ol>
@@ -22 +22 @@
 
   <div class="lcs-howto-section">
-    <h3>Tab „Setup“</h3>
+    <h3>Tab „Setup"</h3>
     <p>Hier vergibst du den <strong>Namen</strong> des Schedulers. Beim Speichern wird daraus automatisch die stabile CSS-Klasse/der Slug erstellt. Änderst du später den Namen, ändert sich auch der Slug.</p>
     <div class="lcs-callout">
       <p><strong>CSS-Klasse:</strong> Diese fügst du an den Frontend-Block an, den du steuern möchtest.</p>
-      <p><strong>Shortcode:</strong> Gibt das nächste Event-Datum dynamisch aus, z. B. <code>[luzid_cs slug="wartung" opt="long"]</code></p>
-    </div>
-  </div>
-
-  <div class="lcs-howto-section">
-    <h3>Tab „Termine“</h3>
-    <p>Termine definieren <strong>einzelne Tage</strong> oder <strong>Zeiträume</strong>, in denen Content angezeigt werden kann.</p>
-    <ul>
-      <li><strong>Von</strong> gesetzt, <strong>Bis</strong> leer → gilt nur dieser Tag.</li>
-      <li><strong>Von</strong> und <strong>Bis</strong> gesetzt → gilt als Zeitraum.</li>
-      <li><strong>Präfix</strong> + <strong>Zeit</strong> steuern den Zeitpunkt: <em>ab</em>, <em>bis</em>, <em>um</em>.</li>
-    </ul>
-  </div>
-
-  <div class="lcs-howto-section">
-    <h3>Tab „Wiederholungen“</h3>
-    <p>Wiederholungen sind Regeln wie „jeden Donnerstag“ oder „jeden 1. Donnerstag im Monat“. Mehrere Regeln werden per <strong>ODER</strong> kombiniert.</p>
+      <p><strong>Shortcode:</strong> Gibt das nächste Event-Datum dynamisch aus, z. B. <code>[luzid_cs slug="wartung" date="long"]</code></p>
+      <p><strong>Event-Tabelle:</strong> Aktiviere „In Event-Tabelle einbeziehen", um Events dieses Schedulers im <code>[luzid_cs_eventtable]</code> Shortcode anzuzeigen.</p>
+    </div>
+  </div>
+
+  <div class="lcs-howto-section">
+    <h3>Tab „Termine"</h3>
+    <p>Termine definieren <strong>einzelne Tage</strong>, an denen Content angezeigt werden kann.</p>
+    <ul>
+      <li><strong>Datum</strong>: Der Tag des Events.</li>
+      <li><strong>Präfix 1</strong> + <strong>Zeit von</strong>: Startzeit mit optionalem Präfix (ab, bis, um, von).</li>
+      <li><strong>Präfix 2</strong> + <strong>Zeit bis</strong>: Endzeit mit optionalem Präfix (bis, –).</li>
+      <li><strong>Eventtext</strong>: Optionaler Text, der im Shortcode ausgegeben werden kann.</li>
+    </ul>
+  </div>
+
+  <div class="lcs-howto-section">
+    <h3>Tab „Wiederholungen"</h3>
+    <p>Wiederholungen sind Regeln wie „jeden Donnerstag", „jeden 1. Donnerstag im Monat" oder „jährlich am 14. Februar". Mehrere Regeln werden per <strong>ODER</strong> kombiniert.</p>
     <div class="lcs-callout">
       <p><strong>Beispiel:</strong> Du willst Content <em>jeden Montag</em> und zusätzlich <em>am 1. des Monats</em> anzeigen → lege zwei Regeln an. Sobald eine Regel passt, ist der Block sichtbar.</p>
     </div>
-    <p>Jede Regel kann einen eigenen <strong>Regel-Zeitraum</strong> (von/bis) haben, der nur diese Regel einschränkt.</p>
-  </div>
-
-  <div class="lcs-howto-section">
-    <h3>Tab „Ausnahmen“</h3>
+    <p><strong>Typen:</strong></p>
+    <ul>
+      <li><strong>Wöchentlich</strong>: Jeden bestimmten Wochentag.</li>
+      <li><strong>Monatlich</strong>: An einem bestimmten Tag im Monat (z.B. jeden 15.).</li>
+      <li><strong>Wochentag im Monat</strong>: Z.B. „1. Donnerstag" oder „letzter Freitag" im Monat.</li>
+      <li><strong>Jährlich</strong>: An einem bestimmten Datum jedes Jahr (z.B. 14. Februar).</li>
+    </ul>
+    <p>Jede Regel kann einen eigenen <strong>Regel-Zeitraum</strong> (Gültig von/bis) haben, der nur diese Regel einschränkt.</p>
+  </div>
+
+  <div class="lcs-howto-section">
+    <h3>Tab „Ausnahmen"</h3>
     <p>Ausnahmen überschreiben alle anderen Regeln. An den definierten Ausnahmen wird <strong>kein Content</strong> angezeigt.</p>
     <ul>
@@ -57 +66 @@
     </ul>
     <div class="lcs-callout lcs-callout--warn">
-      <p><strong>Wichtig:</strong> Wenn „jetzt“ in einer Ausnahme liegt, bleibt der Block immer unsichtbar – auch wenn Termine oder Wiederholungen passen.</p>
-    </div>
-  </div>
-
-  <div class="lcs-howto-section">
-    <h3>Tab „Event-Offset“</h3>
-    <p>Der Event-Offset erweitert das Sichtbarkeitsfenster <strong>vor</strong> bzw. <strong>nach</strong> dem berechneten Event. Der Offset ändert <strong>nicht</strong> die Text-Ausgabe des Shortcodes, sondern nur die Sichtbarkeit.</p>
-    <ul>
-      <li><strong>Tage vorher</strong> + <strong>Startzeit</strong>: ab wann der Block vor dem Event eingeblendet wird.</li>
-      <li><strong>Tage nachher</strong> + <strong>Endzeit</strong>: wann die Sichtbarkeit endet (bei Zeiträumen bezogen auf den letzten Tag).</li>
-    </ul>
-  </div>
-
-  <div class="lcs-howto-section">
-    <h3>Tab „Vorschau“</h3>
+      <p><strong>Wichtig:</strong> Wenn „jetzt" in einer Ausnahme liegt, bleibt der Block immer unsichtbar – auch wenn Termine oder Wiederholungen passen.</p>
+    </div>
+  </div>
+
+  <div class="lcs-howto-section">
+    <h3>Tab „Event-Klassen"</h3>
+    <p>Event-Klassen ermöglichen dir, <strong>mehrere unabhängige Sichtbarkeitszeiträume</strong> für einen Scheduler zu definieren. Jede Klasse erzeugt eine eigene CSS-Klasse mit individuellen Offset-Einstellungen.</p>
+    
+    <div class="lcs-callout">
+      <p><strong>Anwendungsbeispiel:</strong> Du hast ein Event am 15. April. Mit Event-Klassen kannst du:</p>
+      <ul style="margin: 10px 0;">
+        <li>Ein <strong>Popup</strong> 4 Tage vorher einblenden</li>
+        <li>Den <strong>Event-Content</strong> (mit Bildern) 2 Wochen vorher zeigen</li>
+        <li>Einen <strong>Menüeintrag</strong> 11 Tage vorher aktivieren</li>
+      </ul>
+      <p>Jeder dieser Inhalte hat seine eigene CSS-Klasse und wird unabhängig voneinander sichtbar.</p>
+    </div>
+
+    <h4>Standard-Klasse</h4>
+    <p>Die erste Klasse heißt immer „Standard" und kann nicht gelöscht oder umbenannt werden. Sie erzeugt die Haupt-CSS-Klasse:</p>
+    <p><code>.luzid-cs-&lt;schedulername&gt;</code></p>
+
+    <h4>Zusätzliche Klassen</h4>
+    <p>Klicke auf „+ Klasse hinzufügen", um weitere Klassen anzulegen. Jede zusätzliche Klasse erhält einen eigenen Namen und erzeugt eine erweiterte CSS-Klasse:</p>
+    <p><code>.luzid-cs-&lt;schedulername&gt;-&lt;klassenname&gt;</code></p>
+
+    <h4>Offset-Einstellungen pro Klasse</h4>
+    <ul>
+      <li><strong>Tage vorher</strong>: Ab wie vielen Tagen vor dem Event wird der Content sichtbar?</li>
+      <li><strong>Startzeit</strong>: Ab welcher Uhrzeit beginnt die Sichtbarkeit? (leer = 00:00 Uhr)</li>
+      <li><strong>Tage nachher</strong>: Wie viele Tage nach dem Event bleibt der Content sichtbar?</li>
+      <li><strong>Endzeit</strong>: Bis zu welcher Uhrzeit endet die Sichtbarkeit? (leer = Event-Zeitpunkt)</li>
+    </ul>
+
+    <h4>Vorschau</h4>
+    <p>Unter jeder Klasse siehst du eine Live-Vorschau des Sichtbarkeitszeitraums basierend auf dem nächsten berechneten Event.</p>
+
+    <div class="lcs-callout">
+      <p><strong>Beispiel-Konfiguration:</strong></p>
+      <table class="lcs-table lcs-table--compact">
+        <thead>
+          <tr><th>Klasse</th><th>CSS-Klasse</th><th>Tage vorher</th><th>Verwendung</th></tr>
+        </thead>
+        <tbody>
+          <tr><td>Standard</td><td><code>.luzid-cs-krimidinner</code></td><td>14</td><td>Hauptinhalt mit Bildern</td></tr>
+          <tr><td>popup</td><td><code>.luzid-cs-krimidinner-popup</code></td><td>4</td><td>Ankündigungs-Popup</td></tr>
+          <tr><td>menu</td><td><code>.luzid-cs-krimidinner-menu</code></td><td>11</td><td>Menüeintrag</td></tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+
+  <div class="lcs-howto-section">
+    <h3>Tab „Vorschau"</h3>
     <p>Mit der Vorschau kannst du dir die nächsten berechneten Events (inkl. Einblendungszeitpunkt und Shortcode-Text) anzeigen lassen – praktisch zum Testen deiner Regeln.</p>
   </div>
@@ -77 +125 @@
   <div class="lcs-howto-section">
     <h3>CSS-Klasse in WordPress &amp; Pagebuildern</h3>
-    <p class="lcs-text"><em>Hinweis:</em> Frühere Plugin-Versionen nutzten das Präfix <code>luzid-cs-</code>. Diese Klasse wird weiterhin unterstützt – empfohlen ist aber <code>luzid-cs-</code>.</p>
-    <div class="lcs-callout">
-      <p><strong>Gutenberg:</strong> Block auswählen → „Erweitert“ → „Zusätzliche CSS-Klasse(n)“ → <code>luzid-cs-&lt;slug&gt;</code> eintragen (ohne Punkt).</p>
-      <p><strong>Elementor:</strong> Widget auswählen → „Erweitert“ → „CSS-Klassen“ → <code>luzid-cs-&lt;slug&gt;</code> eintragen.</p>
-      <p><strong>Divi/andere Builder:</strong> Im Bereich „CSS-Klasse“ oder „Custom CSS Class“ den gleichen Wert eintragen.</p>
+    <div class="lcs-callout">
+      <p><strong>Gutenberg:</strong> Block auswählen → „Erweitert" → „Zusätzliche CSS-Klasse(n)" → <code>luzid-cs-&lt;slug&gt;</code> eintragen (ohne Punkt).</p>
+      <p><strong>Elementor:</strong> Widget auswählen → „Erweitert" → „CSS-Klassen" → <code>luzid-cs-&lt;slug&gt;</code> eintragen.</p>
+      <p><strong>Divi/andere Builder:</strong> Im Bereich „CSS-Klasse" oder „Custom CSS Class" den gleichen Wert eintragen.</p>
     </div>
     <p>Wichtig: Die Klasse wird <strong>ohne führenden Punkt</strong> im Builder eingetragen. Der Punkt <code>.</code> ist nur in CSS-Schreibweise relevant.</p>
@@ -87 +134 @@
 
   <div class="lcs-howto-section">
-    <h3>Shortcode-Ausgabe</h3>
-    <p>Mit dem Shortcode gibst du das nächste Event oder eine Liste kommender Events im Frontend aus.</p>
-
-    <p><strong>Formate (<code>opt</code>):</strong></p>
-    <ul>
-      <li><code>opt="short"</code> → <em>01.01.2026</em></li>
-      <li><code>opt="date"</code> → <em>Donnerstag, 01.01.2026</em></li>
-      <li><code>opt="time"</code> → <em>ab 16:00 Uhr</em></li>
-      <li><code>opt="long"</code> → <em>Donnerstag, 01.01.2026 ab 16:00 Uhr</em></li>
-    </ul>
-
-    <p><strong>Parameter:</strong></p>
-    <ul>
-      <li><code>list="true|false"</code> (Standard: <code>false</code>) → gibt <code>count</code> Events als Liste aus (je Zeile ein Event, getrennt durch <code>&lt;br&gt;</code>).</li>
-      <li><code>count="n"</code> (n &gt; 0, Standard: 10, Max.: 200) → Anzahl Events bei <code>list="true"</code>.</li>
-      <li><code>text="true|false"</code> (Standard: <code>false</code>) → hängt den optionalen <strong>Eventtext</strong> an (aus Termine/Wiederholungen).</li>
-      <li><code>sep="…"</code> (Standard: <code>-</code>) → Separator zwischen <code>&lt;opt&gt;</code> und Eventtext. Tipp: Zeilenumbruch mit <code>sep="&lt;br&gt;"</code>.</li>
-      <li><code>timeoffset="…"</code> (Minuten, auch negativ) → verschiebt nur die <em>Ausgabe</em> (nicht die Logik).</li>
-      <li><code>lang="de|en"</code> → Sprache für die Ausgabe erzwingen (leer = aktuelle UI).</li>
-    </ul>
-
-    <div class="lcs-callout">
-      <p><strong>Beispiel:</strong> <code>[luzid_cs slug="wartung" opt="long"]</code></p>
-      <p><strong>Beispiel (Liste + Text):</strong> <code>[luzid_cs slug="krimidinner" opt="short" list="true" count="5" text="true" sep=" | "]</code></p>
-      <p><strong>Beispiel (Text in neuer Zeile):</strong> <code>[luzid_cs slug="krimidinner" opt="date" text="true" sep="&lt;br&gt;"]</code></p>
-    </div>
-
-    <p><strong>CSS-Klassen für eigenes Styling (externe CSS):</strong><br>
-      Die Ausgabe ist in Spans gekapselt, damit du Datum/Separator/Text unterschiedlich formatieren kannst:</p>
+    <h3>Shortcode: Einzelnes Event</h3>
+    <p>Mit dem Shortcode <code>[luzid_cs]</code> gibst du das nächste Event oder eine Liste kommender Events im Frontend aus.</p>
+
+    <p><strong>Basis-Syntax:</strong> <code>[luzid_cs slug="dein-slug"]</code></p>
+
+    <h4>Parameter-Übersicht</h4>
+    <table class="lcs-table lcs-table--compact">
+      <thead>
+        <tr><th>Parameter</th><th>Standard</th><th>Beschreibung</th></tr>
+      </thead>
+      <tbody>
+        <tr><td><code>slug</code></td><td><em>(Pflicht)</em></td><td>Scheduler-Slug</td></tr>
+        <tr><td><code>date</code></td><td><em>(leer)</em></td><td>Datumsformat: <code>short</code>, <code>medium</code>, <code>long</code>, <code>full</code></td></tr>
+        <tr><td><code>time</code></td><td><em>(leer)</em></td><td>Zeitformat: <code>auto</code>, <code>raw</code>, <code>prefix</code>, <code>range</code>, <code>range_long</code></td></tr>
+        <tr><td><code>list</code></td><td><code>false</code></td><td>Liste ausgeben: <code>true</code> oder <code>false</code></td></tr>
+        <tr><td><code>count</code></td><td><code>10</code></td><td>Anzahl Events bei <code>list="true"</code> (max. 200)</td></tr>
+        <tr><td><code>text</code></td><td><code>false</code></td><td>Eventtext anhängen: <code>true</code> oder <code>false</code></td></tr>
+        <tr><td><code>sep1</code></td><td><code> </code> (Leerzeichen)</td><td>Trennzeichen zwischen Datum und Zeit</td></tr>
+        <tr><td><code>sep2</code></td><td><code> </code> (Leerzeichen)</td><td>Trennzeichen zwischen Zeit und Text</td></tr>
+        <tr><td><code>sep3</code></td><td><em>(leer)</em></td><td>Trennzeichen zwischen Listenelementen</td></tr>
+        <tr><td><code>timeoffset</code></td><td><code>0</code></td><td>Zeitverschiebung in Minuten (auch negativ)</td></tr>
+        <tr><td><code>lang</code></td><td><em>(aktuell)</em></td><td>Sprache erzwingen: <code>de</code> oder <code>en</code></td></tr>
+      </tbody>
+    </table>
+
+    <h4>Werte für <code>date</code></h4>
+    <table class="lcs-table lcs-table--compact">
+      <thead>
+        <tr><th>Wert</th><th>Ausgabe (Beispiel)</th></tr>
+      </thead>
+      <tbody>
+        <tr><td><code>short</code></td><td>14.02.2026</td></tr>
+        <tr><td><code>medium</code></td><td>Sa, 14.02.2026</td></tr>
+        <tr><td><code>long</code></td><td>Samstag, 14.02.2026</td></tr>
+        <tr><td><code>full</code></td><td>Samstag, 14. Februar 2026</td></tr>
+      </tbody>
+    </table>
+
+    <h4>Werte für <code>time</code></h4>
+    <p><strong>Wichtig:</strong> Ohne <code>time</code>-Parameter wird <strong>keine Uhrzeit</strong> ausgegeben – nur das Datum!</p>
+    <table class="lcs-table lcs-table--compact">
+      <thead>
+        <tr><th>Wert</th><th>Ausgabe (Beispiel)</th></tr>
+      </thead>
+      <tbody>
+        <tr><td><em>(nicht gesetzt)</em></td><td><em>keine Zeit</em></td></tr>
+        <tr><td><code>raw</code></td><td>18:00</td></tr>
+        <tr><td><code>prefix</code></td><td>von 18:00 Uhr</td></tr>
+        <tr><td><code>range</code></td><td>18:00 bis 20:00</td></tr>
+        <tr><td><code>range_long</code></td><td>von 18:00 bis 20:00 Uhr</td></tr>
+        <tr><td><code>auto</code></td><td>von 18:00 bis 20:00 Uhr <em>(intelligent)</em></td></tr>
+      </tbody>
+    </table>
+
+    <h4>Trennzeichen (Separatoren) – So funktioniert's</h4>
+    <p>Die Ausgabe besteht aus bis zu drei Teilen: <strong>Datum</strong>, <strong>Zeit</strong> und <strong>Eventtext</strong>. Mit den Trennzeichen bestimmst du, was zwischen diesen Teilen steht.</p>
+    
+    <div class="lcs-callout">
+      <p><strong>Aufbau der Ausgabe:</strong></p>
+      <p style="font-family: monospace; background: #f5f5f5; padding: 10px; border-radius: 4px;">
+        [DATUM] <span style="color: #c00;">sep1</span> [ZEIT] <span style="color: #c00;">sep2</span> [TEXT]
+      </p>
+      <ul style="margin-top: 10px;">
+        <li><code>sep1</code> = Was steht zwischen Datum und Zeit?</li>
+        <li><code>sep2</code> = Was steht zwischen Zeit und Text? (oder zwischen Datum und Text, wenn keine Zeit)</li>
+        <li><code>sep3</code> = Was steht zwischen den Einträgen in einer Liste?</li>
+      </ul>
+    </div>
+
+    <p><strong>Typische Werte:</strong></p>
+    <ul>
+      <li><code>" "</code> (Leerzeichen) – alles in einer Zeile</li>
+      <li><code>"&lt;br&gt;"</code> – Zeilenumbruch (neuer Absatz)</li>
+      <li><code>" | "</code> – senkrechter Strich als Trenner</li>
+      <li><code>" – "</code> – Gedankenstrich als Trenner</li>
+    </ul>
+
+    <h4>Beispiele mit Trennzeichen</h4>
+    
+    <p><strong>Alles in einer Zeile (Standard):</strong></p>
+    <pre><code>[luzid_cs slug="event" date="long" time="auto" text="true"]</code></pre>
+    <p>→ Samstag, 14.02.2026 von 18:00 bis 20:00 Uhr Valentins-Dinner</p>
+
+    <p><strong>Nur Datum und Text, zweizeilig:</strong></p>
+    <pre><code>[luzid_cs slug="event" date="long" text="true" sep2="&lt;br&gt;"]</code></pre>
+    <p>→ Samstag, 14.02.2026<br>&nbsp;&nbsp;&nbsp;Valentins-Dinner</p>
+
+    <p><strong>Datum, Zeit und Text jeweils in eigener Zeile (dreizeilig):</strong></p>
+    <pre><code>[luzid_cs slug="event" date="long" time="auto" text="true" sep1="&lt;br&gt;" sep2="&lt;br&gt;"]</code></pre>
+    <p>→ Samstag, 14.02.2026<br>&nbsp;&nbsp;&nbsp;von 18:00 bis 20:00 Uhr<br>&nbsp;&nbsp;&nbsp;Valentins-Dinner</p>
+
+    <p><strong>Mit Trennstrich:</strong></p>
+    <pre><code>[luzid_cs slug="event" date="long" time="raw" text="true" sep1=" | " sep2=" – "]</code></pre>
+    <p>→ Samstag, 14.02.2026 | 18:00 – Valentins-Dinner</p>
+
+    <p><strong>Liste mit Leerzeile zwischen Einträgen:</strong></p>
+    <pre><code>[luzid_cs slug="event" date="long" text="true" sep2="&lt;br&gt;" sep3="&lt;br&gt;&lt;br&gt;" list="true" count="5"]</code></pre>
+
+    <h4>CSS-Klassen für eigenes Styling</h4>
     <ul>
       <li><code>.luzid-cs</code> – Wrapper (zusätzlich <code>.luzid-cs--single</code> / <code>.luzid-cs--list</code>)</li>
       <li><code>.luzid-cs-item</code> – ein Event (bei Listen-Ausgabe)</li>
-      <li><code>.luzid-cs-opt</code> – Datums-/Zeit-Teil (opt)</li>
-      <li><code>.luzid-cs-sep</code> – Separator</li>
-      <li><code>.luzid-cs-text</code> – optionaler Eventtext</li>
-    </ul>
-
-    <p><em>Hinweis:</em> <code>opt="list"</code> bleibt aus Kompatibilitätsgründen erhalten und entspricht <code>opt="long" list="true"</code>.</p>
+      <li><code>.luzid-cs-date</code> – Datums-Teil</li>
+      <li><code>.luzid-cs-time</code> – Zeit-Teil</li>
+      <li><code>.luzid-cs-text</code> – Eventtext</li>
+      <li><code>.luzid-cs-sep</code> – Trennzeichen (zusätzlich <code>.luzid-cs-sep1</code> / <code>.luzid-cs-sep2</code>)</li>
+    </ul>
+  </div>
+
+  <div class="lcs-howto-section">
+    <h3>Shortcode: Event-Tabelle</h3>
+    <p>Mit <code>[luzid_cs_eventtable]</code> gibst du eine Tabelle aller kommenden Events aus – aus allen Schedulern, die „In Event-Tabelle einbeziehen" aktiviert haben.</p>
+
+    <p><strong>Basis-Syntax:</strong> <code>[luzid_cs_eventtable]</code></p>
+
+    <h4>Parameter-Übersicht</h4>
+    <table class="lcs-table lcs-table--compact">
+      <thead>
+        <tr><th>Parameter</th><th>Standard</th><th>Beschreibung</th></tr>
+      </thead>
+      <tbody>
+        <tr><td><code>cols</code></td><td><code>date_medium,time_auto,text</code></td><td>Spalten (komma-getrennt)</td></tr>
+        <tr><td><code>count</code></td><td><code>30</code></td><td>Max. Anzahl Events</td></tr>
+        <tr><td><code>headers</code></td><td><em>(automatisch)</em></td><td>Eigene Header (komma-getrennt)</td></tr>
+        <tr><td><code>noheaders</code></td><td><code>false</code></td><td>Header ausblenden</td></tr>
+        <tr><td><code>class</code></td><td><em>(leer)</em></td><td>Zusätzliche CSS-Klasse</td></tr>
+        <tr><td><code>empty</code></td><td>Keine Termine</td><td>Text wenn keine Events</td></tr>
+        <tr><td><code>order</code></td><td><code>asc</code></td><td>Sortierung: <code>asc</code> oder <code>desc</code></td></tr>
+        <tr><td><code>lang</code></td><td><em>(aktuell)</em></td><td>Sprache erzwingen</td></tr>
+      </tbody>
+    </table>
+
+    <h4>Verfügbare Spaltentypen für <code>cols</code></h4>
+    <table class="lcs-table lcs-table--compact">
+      <thead>
+        <tr><th>Spalte</th><th>Ausgabe (Beispiel)</th></tr>
+      </thead>
+      <tbody>
+        <tr><td><code>date_short</code></td><td>14.02.2026</td></tr>
+        <tr><td><code>date_medium</code></td><td>Sa, 14.02.2026</td></tr>
+        <tr><td><code>date_long</code></td><td>Samstag, 14.02.2026</td></tr>
+        <tr><td><code>date_full</code></td><td>Samstag, 14. Februar 2026</td></tr>
+        <tr><td><code>weekday_short</code></td><td>Sa</td></tr>
+        <tr><td><code>weekday_long</code></td><td>Samstag</td></tr>
+        <tr><td><code>time_raw</code></td><td>18:00</td></tr>
+        <tr><td><code>time_auto</code></td><td>von 18:00 bis 20:00 Uhr</td></tr>
+        <tr><td><code>time_prefix</code></td><td>von 18:00 Uhr</td></tr>
+        <tr><td><code>time_range</code></td><td>18:00 bis 20:00</td></tr>
+        <tr><td><code>time_range_long</code></td><td>von 18:00 bis 20:00 Uhr</td></tr>
+        <tr><td><code>text</code></td><td>Eventtext</td></tr>
+        <tr><td><code>scheduler</code></td><td>Scheduler-Name</td></tr>
+      </tbody>
+    </table>
+
+    <div class="lcs-callout">
+      <p><strong>Beispiele:</strong></p>
+      <p><code>[luzid_cs_eventtable]</code> → Standard-Tabelle</p>
+      <p><code>[luzid_cs_eventtable cols="weekday_short,date_short,time_range,text" count="10"]</code></p>
+      <p><code>[luzid_cs_eventtable cols="date_long,time_auto,text,scheduler" headers="Datum,Uhrzeit,Event,Kategorie"]</code></p>
+    </div>
+
+    <p><strong>CSS-Klassen für eigenes Styling:</strong></p>
+    <ul>
+      <li><code>.luzid-cs-eventtable</code> – Tabelle</li>
+      <li><code>.luzid-cs-eventtable__head</code> – Tabellenkopf</li>
+      <li><code>.luzid-cs-eventtable__body</code> – Tabellenkörper</li>
+      <li><code>.luzid-cs-eventtable__row</code> – Zeile (+ <code>--header</code>, <code>--odd</code>, <code>--even</code>)</li>
+      <li><code>.luzid-cs-eventtable__cell</code> – Zelle (+ <code>--date_short</code>, <code>--time_auto</code>, etc.)</li>
+    </ul>
   </div>
 </div>

luzid-content-scheduler/trunk/howto-en.php

@@ -5 +5 @@
 <div class="luzid-howto">
   <div class="lcs-howto-section">
-    <h3>What does it do?</h3>
-    <p><strong>Luzid Content Scheduler</strong> controls the visibility of frontend content blocks (e.g. banners, alerts, divs) based on <strong>dates</strong>, <strong>recurring rules</strong> and <strong>exceptions</strong> — without writing code.</p>
-    <div class="lcs-callout">
-      <p><strong>Rule of thumb:</strong> The block is visible if <strong>any rule matches</strong> (OR logic). <strong>Exceptions</strong> override everything and hide the content.</p>
-    </div>
-  </div>
-
-  <div class="lcs-howto-section">
-    <h3>Quick start in 3 steps</h3>
+    <h3>What's this about?</h3>
+    <p>The <strong>Luzid Content Scheduler</strong> controls the visibility of frontend content blocks (e.g., banners, alerts, divs) based on <strong>dates</strong>, <strong>recurring rules</strong>, and <strong>exceptions</strong> – without writing any code.</p>
+    <div class="lcs-callout">
+      <p><strong>Remember:</strong> The block is visible when <strong>at least one rule matches</strong> (OR logic). <strong>Exceptions</strong> override everything and prevent display.</p>
+    </div>
+  </div>
+
+  <div class="lcs-howto-section">
+    <h3>Quick Start in 3 Steps</h3>
     <ol>
-      <li><strong>Create a scheduler</strong> (tab “Setup”) and save it. This generates the <em>slug</em>.</li>
-      <li>Add the CSS class <code>.luzid-cs-&lt;slug&gt;</code> to your frontend block (see “Using the CSS class in page builders”).</li>
-      <li>Define rules (Dates / Recurring / Exceptions). Optionally enable Event Offset.</li>
+      <li><strong>Create a scheduler</strong> (Setup tab) and save. This generates the <em>slug</em>.</li>
+      <li>Add the CSS class <code>.luzid-cs-&lt;slug&gt;</code> to your frontend block (see "CSS Class in Page Builders").</li>
+      <li>Define rules (Dates/Recurring/Exceptions). Optionally enable Event Offset.</li>
     </ol>
   </div>
 
   <div class="lcs-howto-section">
-    <h3>Tab “Setup”</h3>
-    <p>Enter a <strong>name</strong> for the scheduler. When saving, the CSS class/slug is generated automatically. If you rename it later, the slug changes as well.</p>
-    <div class="lcs-callout">
-      <p><strong>CSS class:</strong> Add this to the frontend block you want to control.</p>
-      <p><strong>Shortcode:</strong> Prints the next event dynamically, e.g. <code>[luzid_cs slug="maintenance" opt="long"]</code></p>
-    </div>
-  </div>
-
-  <div class="lcs-howto-section">
-    <h3>Tab “Dates”</h3>
-    <p>Dates define <strong>single days</strong> or <strong>ranges</strong> in which content can be shown.</p>
-    <ul>
-      <li><strong>From</strong> set, <strong>To</strong> empty → applies to that single day.</li>
-      <li><strong>From</strong> and <strong>To</strong> set → treated as a date range.</li>
-      <li><strong>Prefix</strong> + <strong>time</strong> control the moment: <em>from</em>, <em>until</em>, <em>at</em>.</li>
-    </ul>
-  </div>
-
-  <div class="lcs-howto-section">
-    <h3>Tab “Recurring”</h3>
-    <p>Recurring rules are patterns like “every Thursday” or “every 1st Thursday of the month”. Multiple rules are combined with <strong>OR</strong>.</p>
+    <h3>Setup Tab</h3>
+    <p>Here you set the <strong>name</strong> of the scheduler. When saving, the stable CSS class/slug is automatically created. If you change the name later, the slug changes too.</p>
+    <div class="lcs-callout">
+      <p><strong>CSS Class:</strong> Add this to the frontend block you want to control.</p>
+      <p><strong>Shortcode:</strong> Outputs the next event date dynamically, e.g., <code>[luzid_cs slug="maintenance" date="long"]</code></p>
+      <p><strong>Event Table:</strong> Enable "Include in Event Table" to show events from this scheduler in the <code>[luzid_cs_eventtable]</code> shortcode.</p>
+    </div>
+  </div>
+
+  <div class="lcs-howto-section">
+    <h3>Dates Tab</h3>
+    <p>Dates define <strong>single days</strong> when content should be displayed.</p>
+    <ul>
+      <li><strong>Date</strong>: The day of the event.</li>
+      <li><strong>Prefix 1</strong> + <strong>Time from</strong>: Start time with optional prefix (from, until, at).</li>
+      <li><strong>Prefix 2</strong> + <strong>Time to</strong>: End time with optional prefix (to, –).</li>
+      <li><strong>Event text</strong>: Optional text that can be output in the shortcode.</li>
+    </ul>
+  </div>
+
+  <div class="lcs-howto-section">
+    <h3>Recurring Tab</h3>
+    <p>Recurring rules are patterns like "every Thursday", "first Thursday of the month", or "yearly on February 14". Multiple rules are combined with <strong>OR</strong> logic.</p>
     <div class="lcs-callout">
       <p><strong>Example:</strong> You want content visible <em>every Monday</em> and also <em>on the 1st of each month</em> → create two rules. As soon as one rule matches, the block is visible.</p>
     </div>
-    <p>Each rule can have its own <strong>rule period</strong> (from/to) which restricts only that rule.</p>
-  </div>
-
-  <div class="lcs-howto-section">
-    <h3>Tab “Exceptions”</h3>
-    <p>Exceptions override all other rules. No content is shown within the defined exception ranges.</p>
-    <ul>
-      <li>For a single day, fill only <strong>from</strong> and leave <strong>to</strong> empty.</li>
-      <li>For a range, fill both fields.</li>
+    <p><strong>Types:</strong></p>
+    <ul>
+      <li><strong>Weekly</strong>: Every specific weekday.</li>
+      <li><strong>Monthly</strong>: On a specific day of the month (e.g., every 15th).</li>
+      <li><strong>Weekday in month</strong>: E.g., "1st Thursday" or "last Friday" of the month.</li>
+      <li><strong>Yearly</strong>: On a specific date each year (e.g., February 14).</li>
+    </ul>
+    <p>Each rule can have its own <strong>validity period</strong> (Valid from/to) that restricts only that rule.</p>
+  </div>
+
+  <div class="lcs-howto-section">
+    <h3>Exceptions Tab</h3>
+    <p>Exceptions override all other rules. On defined exceptions, <strong>no content</strong> is displayed.</p>
+    <ul>
+      <li>For single days, fill only the <strong>from</strong> field and leave the <strong>to</strong> field empty.</li>
+      <li>For date ranges, fill both fields.</li>
     </ul>
     <div class="lcs-callout lcs-callout--warn">
-      <p><strong>Important:</strong> If “now” is inside an exception range, the block stays hidden — even if dates or recurring rules match.</p>
-    </div>
-  </div>
-
-  <div class="lcs-howto-section">
-    <h3>Tab “Event Offset”</h3>
-    <p>Event offset extends the visibility window <strong>before</strong> and/or <strong>after</strong> the calculated event. It does <strong>not</strong> change the shortcode text output — only visibility.</p>
-    <ul>
-      <li><strong>Days before</strong> + <strong>start time</strong>: when the block becomes visible before the event.</li>
-      <li><strong>Days after</strong> + <strong>end time</strong>: when visibility ends (for ranges, based on the last day).</li>
-    </ul>
-  </div>
-
-  <div class="lcs-howto-section">
-    <h3>Tab “Preview”</h3>
-    <p>The preview generates upcoming calculated events (including show-from time and shortcode text) — useful for testing your rules.</p>
-  </div>
-
-  <div class="lcs-howto-section">
-    <h3>Using the CSS class in WordPress &amp; page builders</h3>
-    <div class="lcs-callout">
-      <p><strong>Gutenberg:</strong> Select block → “Advanced” → “Additional CSS class(es)” → enter <code>luzid-cs-&lt;slug&gt;</code> (without the dot).</p>
-      <p><strong>Elementor:</strong> Select widget → “Advanced” → “CSS Classes” → enter <code>luzid-cs-&lt;slug&gt;</code>.</p>
-      <p><strong>Divi/other builders:</strong> Use the “CSS Class” / “Custom CSS class” field with the same value.</p>
-    </div>
-    <p>Note: In builders you enter the class <strong>without</strong> the leading dot. The dot <code>.</code> is only used in CSS notation.</p>
-  </div>
-
-  <div class="lcs-howto-section">
-    <h3>Shortcode output</h3>
-    <p>Use the shortcode to print the next event – or a list of upcoming events – in the frontend.</p>
-
-    <p><strong>Formats (<code>opt</code>):</strong></p>
-    <ul>
-      <li><code>opt="short"</code> → <em>01.01.2026</em></li>
-      <li><code>opt="date"</code> → <em>Thursday, 01.01.2026</em></li>
-      <li><code>opt="time"</code> → <em>from 16:00</em></li>
-      <li><code>opt="long"</code> → <em>Thursday, 01.01.2026 from 16:00</em></li>
-    </ul>
-
-    <p><strong>Parameters:</strong></p>
-    <ul>
-      <li><code>list="true|false"</code> (default: <code>false</code>) → outputs <code>count</code> events as a list (one per line, separated by <code>&lt;br&gt;</code>).</li>
-      <li><code>count="n"</code> (n &gt; 0, default: 10, max: 200) → number of events for <code>list="true"</code>.</li>
-      <li><code>text="true|false"</code> (default: <code>false</code>) → appends the optional <strong>event text</strong> (from single dates / recurring rules).</li>
-      <li><code>sep="…"</code> (default: <code>-</code>) → separator between <code>&lt;opt&gt;</code> and event text. Tip: line break with <code>sep="&lt;br&gt;"</code>.</li>
-      <li><code>timeoffset="…"</code> (minutes, can be negative) → shifts the <em>printed output</em> only (not the schedule logic).</li>
-      <li><code>lang="de|en"</code> → force output language (empty = current UI).</li>
-    </ul>
-
-    <div class="lcs-callout">
-      <p><strong>Example:</strong> <code>[luzid_cs slug="maintenance" opt="long"]</code></p>
-      <p><strong>Example (list + text):</strong> <code>[luzid_cs slug="krimidinner" opt="short" list="true" count="5" text="true" sep=" | "]</code></p>
-      <p><strong>Example (text on new line):</strong> <code>[luzid_cs slug="krimidinner" opt="date" text="true" sep="&lt;br&gt;"]</code></p>
-    </div>
-
-    <p><strong>CSS hooks for your own styling (external CSS):</strong><br>
-      Output is wrapped in spans so you can style date/separator/text individually:</p>
-    <ul>
-      <li><code>.luzid-cs</code> – wrapper (plus <code>.luzid-cs--single</code> / <code>.luzid-cs--list</code>)</li>
-      <li><code>.luzid-cs-item</code> – one event (for list output)</li>
-      <li><code>.luzid-cs-opt</code> – date/time part (opt)</li>
-      <li><code>.luzid-cs-sep</code> – separator</li>
-      <li><code>.luzid-cs-text</code> – optional event text</li>
-    </ul>
-
-    <p><em>Note:</em> <code>opt="list"</code> is kept for backwards compatibility and equals <code>opt="long" list="true"</code>.</p>
+      <p><strong>Important:</strong> If "now" falls within an exception, the block stays invisible – even if dates or recurring rules match.</p>
+    </div>
+  </div>
+
+  <div class="lcs-howto-section">
+    <h3>Event Classes Tab</h3>
+    <p>Event classes allow you to define <strong>multiple independent visibility windows</strong> for a scheduler. Each class generates its own CSS class with individual offset settings.</p>
+    
+    <div class="lcs-callout">
+      <p><strong>Use case example:</strong> You have an event on April 15th. With event classes you can:</p>
+      <ul style="margin: 10px 0;">
+        <li>Show a <strong>popup</strong> 4 days before</li>
+        <li>Display the <strong>event content</strong> (with images) 2 weeks before</li>
+        <li>Activate a <strong>menu item</strong> 11 days before</li>
+      </ul>
+      <p>Each of these content blocks has its own CSS class and becomes visible independently.</p>
+    </div>
+
+    <h4>Standard Class</h4>
+    <p>The first class is always called "Standard" and cannot be deleted or renamed. It generates the main CSS class:</p>
+    <p><code>.luzid-cs-&lt;schedulername&gt;</code></p>
+
+    <h4>Additional Classes</h4>
+    <p>Click "+ Add class" to create more classes. Each additional class gets its own name and generates an extended CSS class:</p>
+    <p><code>.luzid-cs-&lt;schedulername&gt;-&lt;classname&gt;</code></p>
+
+    <h4>Offset Settings per Class</h4>
+    <ul>
+      <li><strong>Days before</strong>: How many days before the event should the content become visible?</li>
+      <li><strong>Start time</strong>: At what time does visibility begin? (empty = 00:00)</li>
+      <li><strong>Days after</strong>: How many days after the event should the content remain visible?</li>
+      <li><strong>End time</strong>: Until what time does visibility last? (empty = event time)</li>
+    </ul>
+
+    <h4>Preview</h4>
+    <p>Below each class you'll see a live preview of the visibility window based on the next calculated event.</p>
+
+    <div class="lcs-callout">
+      <p><strong>Example configuration:</strong></p>
+      <table class="lcs-table lcs-table--compact">
+        <thead>
+          <tr><th>Class</th><th>CSS Class</th><th>Days before</th><th>Usage</th></tr>
+        </thead>
+        <tbody>
+          <tr><td>Standard</td><td><code>.luzid-cs-murder-mystery</code></td><td>14</td><td>Main content with images</td></tr>
+          <tr><td>popup</td><td><code>.luzid-cs-murder-mystery-popup</code></td><td>4</td><td>Announcement popup</td></tr>
+          <tr><td>menu</td><td><code>.luzid-cs-murder-mystery-menu</code></td><td>11</td><td>Menu entry</td></tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+
+  <div class="lcs-howto-section">
+    <h3>Preview Tab</h3>
+    <p>The preview shows you the next calculated events (including display time and shortcode text) – useful for testing your rules.</p>
+  </div>
+
+  <div class="lcs-howto-section">
+    <h3>CSS Class in WordPress &amp; Page Builders</h3>
+    <div class="lcs-callout">
+      <p><strong>Gutenberg:</strong> Select block → "Advanced" → "Additional CSS class(es)" → enter <code>luzid-cs-&lt;slug&gt;</code> (without dot).</p>
+      <p><strong>Elementor:</strong> Select widget → "Advanced" → "CSS Classes" → enter <code>luzid-cs-&lt;slug&gt;</code>.</p>
+      <p><strong>Divi/other builders:</strong> Enter the same value in the "CSS Class" or "Custom CSS Class" field.</p>
+    </div>
+    <p>Important: The class is entered <strong>without the leading dot</strong> in the builder. The dot <code>.</code> is only used in CSS notation.</p>
+  </div>
+
+  <div class="lcs-howto-section">
+    <h3>Shortcode: Single Event</h3>
+    <p>Use the <code>[luzid_cs]</code> shortcode to output the next event or a list of upcoming events in the frontend.</p>
+
+    <p><strong>Basic syntax:</strong> <code>[luzid_cs slug="your-slug"]</code></p>
+
+    <h4>Parameter Overview</h4>
+    <table class="lcs-table lcs-table--compact">
+      <thead>
+        <tr><th>Parameter</th><th>Default</th><th>Description</th></tr>
+      </thead>
+      <tbody>
+        <tr><td><code>slug</code></td><td><em>(required)</em></td><td>Scheduler slug</td></tr>
+        <tr><td><code>date</code></td><td><em>(leer)</em></td><td>Date format: <code>short</code>, <code>medium</code>, <code>long</code>, <code>full</code></td></tr>
+        <tr><td><code>time</code></td><td><em>(empty)</em></td><td>Time format: <code>auto</code>, <code>raw</code>, <code>prefix</code>, <code>range</code>, <code>range_long</code></td></tr>
+        <tr><td><code>list</code></td><td><code>false</code></td><td>Output as list: <code>true</code> or <code>false</code></td></tr>
+        <tr><td><code>count</code></td><td><code>10</code></td><td>Number of events when <code>list="true"</code> (max. 200)</td></tr>
+        <tr><td><code>text</code></td><td><code>false</code></td><td>Append event text: <code>true</code> or <code>false</code></td></tr>
+        <tr><td><code>sep1</code></td><td><code> </code> (space)</td><td>Separator between date and time</td></tr>
+        <tr><td><code>sep2</code></td><td><code> </code> (space)</td><td>Separator between time and text</td></tr>
+        <tr><td><code>sep3</code></td><td><em>(empty)</em></td><td>Separator between list items</td></tr>
+        <tr><td><code>timeoffset</code></td><td><code>0</code></td><td>Time offset in minutes (can be negative)</td></tr>
+        <tr><td><code>lang</code></td><td><em>(current)</em></td><td>Force language: <code>de</code> or <code>en</code></td></tr>
+      </tbody>
+    </table>
+
+    <h4>Values for <code>date</code></h4>
+    <table class="lcs-table lcs-table--compact">
+      <thead>
+        <tr><th>Value</th><th>Output (Example)</th></tr>
+      </thead>
+      <tbody>
+        <tr><td><code>short</code></td><td>14.02.2026</td></tr>
+        <tr><td><code>medium</code></td><td>Sat, 14.02.2026</td></tr>
+        <tr><td><code>long</code></td><td>Saturday, 14.02.2026</td></tr>
+        <tr><td><code>full</code></td><td>Saturday, 14 February 2026</td></tr>
+      </tbody>
+    </table>
+
+    <h4>Values for <code>time</code></h4>
+    <p><strong>Important:</strong> Without the <code>time</code> parameter, <strong>no time</strong> is displayed – only the date!</p>
+    <table class="lcs-table lcs-table--compact">
+      <thead>
+        <tr><th>Value</th><th>Output (Example)</th></tr>
+      </thead>
+      <tbody>
+        <tr><td><em>(not set)</em></td><td><em>no time</em></td></tr>
+        <tr><td><code>raw</code></td><td>18:00</td></tr>
+        <tr><td><code>prefix</code></td><td>from 18:00</td></tr>
+        <tr><td><code>range</code></td><td>18:00 to 20:00</td></tr>
+        <tr><td><code>range_long</code></td><td>from 18:00 to 20:00</td></tr>
+        <tr><td><code>auto</code></td><td>from 18:00 to 20:00 <em>(intelligent)</em></td></tr>
+      </tbody>
+    </table>
+
+    <h4>Separators – How They Work</h4>
+    <p>The output consists of up to three parts: <strong>Date</strong>, <strong>Time</strong>, and <strong>Event text</strong>. Separators let you control what appears between these parts.</p>
+    
+    <div class="lcs-callout">
+      <p><strong>Output structure:</strong></p>
+      <p style="font-family: monospace; background: #f5f5f5; padding: 10px; border-radius: 4px;">
+        [DATE] <span style="color: #c00;">sep1</span> [TIME] <span style="color: #c00;">sep2</span> [TEXT]
+      </p>
+      <ul style="margin-top: 10px;">
+        <li><code>sep1</code> = What goes between date and time?</li>
+        <li><code>sep2</code> = What goes between time and text? (or between date and text if no time)</li>
+        <li><code>sep3</code> = What goes between entries in a list?</li>
+      </ul>
+    </div>
+
+    <p><strong>Common values:</strong></p>
+    <ul>
+      <li><code>" "</code> (space) – everything on one line</li>
+      <li><code>"&lt;br&gt;"</code> – line break (new line)</li>
+      <li><code>" | "</code> – pipe character as separator</li>
+      <li><code>" – "</code> – dash as separator</li>
+    </ul>
+
+    <h4>Examples with Separators</h4>
+    
+    <p><strong>Everything on one line (default):</strong></p>
+    <pre><code>[luzid_cs slug="event" date="long" time="auto" text="true"]</code></pre>
+    <p>→ Saturday, 14.02.2026 from 18:00 to 20:00 Valentine's Dinner</p>
+
+    <p><strong>Date and text only, two lines:</strong></p>
+    <pre><code>[luzid_cs slug="event" date="long" text="true" sep2="&lt;br&gt;"]</code></pre>
+    <p>→ Saturday, 14.02.2026<br>&nbsp;&nbsp;&nbsp;Valentine's Dinner</p>
+
+    <p><strong>Date, time, and text each on separate lines (three lines):</strong></p>
+    <pre><code>[luzid_cs slug="event" date="long" time="auto" text="true" sep1="&lt;br&gt;" sep2="&lt;br&gt;"]</code></pre>
+    <p>→ Saturday, 14.02.2026<br>&nbsp;&nbsp;&nbsp;from 18:00 to 20:00<br>&nbsp;&nbsp;&nbsp;Valentine's Dinner</p>
+
+    <p><strong>With separators:</strong></p>
+    <pre><code>[luzid_cs slug="event" date="long" time="raw" text="true" sep1=" | " sep2=" – "]</code></pre>
+    <p>→ Saturday, 14.02.2026 | 18:00 – Valentine's Dinner</p>
+
+    <p><strong>List with blank line between entries:</strong></p>
+    <pre><code>[luzid_cs slug="event" date="long" text="true" sep2="&lt;br&gt;" sep3="&lt;br&gt;&lt;br&gt;" list="true" count="5"]</code></pre>
+
+    <h4>CSS Classes for Custom Styling</h4>
+    <ul>
+      <li><code>.luzid-cs</code> – Wrapper (also <code>.luzid-cs--single</code> / <code>.luzid-cs--list</code>)</li>
+      <li><code>.luzid-cs-item</code> – One event (in list output)</li>
+      <li><code>.luzid-cs-date</code> – Date part</li>
+      <li><code>.luzid-cs-time</code> – Time part</li>
+      <li><code>.luzid-cs-text</code> – Event text</li>
+      <li><code>.luzid-cs-sep</code> – Separator (also <code>.luzid-cs-sep1</code> / <code>.luzid-cs-sep2</code>)</li>
+    </ul>
+  </div>
+
+  <div class="lcs-howto-section">
+    <h3>Shortcode: Event Table</h3>
+    <p>Use <code>[luzid_cs_eventtable]</code> to output a table of all upcoming events – from all schedulers that have "Include in Event Table" enabled.</p>
+
+    <p><strong>Basic syntax:</strong> <code>[luzid_cs_eventtable]</code></p>
+
+    <h4>Parameter Overview</h4>
+    <table class="lcs-table lcs-table--compact">
+      <thead>
+        <tr><th>Parameter</th><th>Default</th><th>Description</th></tr>
+      </thead>
+      <tbody>
+        <tr><td><code>cols</code></td><td><code>date_medium,time_auto,text</code></td><td>Columns (comma-separated)</td></tr>
+        <tr><td><code>count</code></td><td><code>30</code></td><td>Max. number of events</td></tr>
+        <tr><td><code>headers</code></td><td><em>(automatic)</em></td><td>Custom headers (comma-separated)</td></tr>
+        <tr><td><code>noheaders</code></td><td><code>false</code></td><td>Hide headers</td></tr>
+        <tr><td><code>class</code></td><td><em>(empty)</em></td><td>Additional CSS class</td></tr>
+        <tr><td><code>empty</code></td><td>No events</td><td>Text when no events</td></tr>
+        <tr><td><code>order</code></td><td><code>asc</code></td><td>Sort order: <code>asc</code> or <code>desc</code></td></tr>
+        <tr><td><code>lang</code></td><td><em>(current)</em></td><td>Force language</td></tr>
+      </tbody>
+    </table>
+
+    <h4>Available Column Types for <code>cols</code></h4>
+    <table class="lcs-table lcs-table--compact">
+      <thead>
+        <tr><th>Column</th><th>Output (Example)</th></tr>
+      </thead>
+      <tbody>
+        <tr><td><code>date_short</code></td><td>14.02.2026</td></tr>
+        <tr><td><code>date_medium</code></td><td>Sat, 14.02.2026</td></tr>
+        <tr><td><code>date_long</code></td><td>Saturday, 14.02.2026</td></tr>
+        <tr><td><code>date_full</code></td><td>Saturday, 14 February 2026</td></tr>
+        <tr><td><code>weekday_short</code></td><td>Sat</td></tr>
+        <tr><td><code>weekday_long</code></td><td>Saturday</td></tr>
+        <tr><td><code>time_raw</code></td><td>18:00</td></tr>
+        <tr><td><code>time_auto</code></td><td>from 18:00 to 20:00</td></tr>
+        <tr><td><code>time_prefix</code></td><td>from 18:00</td></tr>
+        <tr><td><code>time_range</code></td><td>18:00 to 20:00</td></tr>
+        <tr><td><code>time_range_long</code></td><td>from 18:00 to 20:00</td></tr>
+        <tr><td><code>text</code></td><td>Event text</td></tr>
+        <tr><td><code>scheduler</code></td><td>Scheduler name</td></tr>
+      </tbody>
+    </table>
+
+    <div class="lcs-callout">
+      <p><strong>Examples:</strong></p>
+      <p><code>[luzid_cs_eventtable]</code> → Default table</p>
+      <p><code>[luzid_cs_eventtable cols="weekday_short,date_short,time_range,text" count="10"]</code></p>
+      <p><code>[luzid_cs_eventtable cols="date_long,time_auto,text,scheduler" headers="Date,Time,Event,Category"]</code></p>
+    </div>
+
+    <p><strong>CSS Classes for Custom Styling:</strong></p>
+    <ul>
+      <li><code>.luzid-cs-eventtable</code> – Table</li>
+      <li><code>.luzid-cs-eventtable__head</code> – Table head</li>
+      <li><code>.luzid-cs-eventtable__body</code> – Table body</li>
+      <li><code>.luzid-cs-eventtable__row</code> – Row (+ <code>--header</code>, <code>--odd</code>, <code>--even</code>)</li>
+      <li><code>.luzid-cs-eventtable__cell</code> – Cell (+ <code>--date_short</code>, <code>--time_auto</code>, etc.)</li>
+    </ul>
   </div>
 </div>

luzid-content-scheduler/trunk/luzid-content-scheduler.php

@@ -4 +4 @@
  * Plugin URI: 
  * Description: Schedule the visibility of frontend content blocks (banners, alerts, divs) and output the next event via shortcode.
- * Version: 1.2.2
+ * Version: 1.4.2
  * Author: Luzid Media
  * Author URI: https://luzid-media.com
@@ -65 +65 @@
 class Luzid_Content_Scheduler {
 
-    const VERSION = '1.2.2';
+    const VERSION = '1.4.2';
     const MENU_SLUG   = 'luzid-content-scheduler';
     const OPT_ENTRIES = 'luzid_cs_entries';
@@ -290 +290 @@
 
         add_shortcode( 'luzid_cs', [ $this, 'shortcode_next_event' ] );
+        add_shortcode( 'luzid_cs_eventtable', [ $this, 'shortcode_eventtable' ] );
+        
 
         add_filter( 'body_class', [ $this, 'body_class_active_entries' ] );
@@ -307 +309 @@
                 return [];
             }
-            // Deep sanitize: we sanitize individual fields when accessing them,
-            // but we need the raw structure for array fields like luzid_cs_single[].
-            // Using map_deep with sanitize_text_field for basic protection.
             // phpcs:ignore WordPress.Security.NonceVerification.Missing -- Nonce is verified in handle_actions() before data processing.
             return map_deep( wp_unslash( $_POST ), 'sanitize_text_field' );
@@ -477 +476 @@
             'exceptions' => [],
             'event_offset' => [ 'enabled' => 0, 'days_before' => 0, 'start_time' => '00:01', 'days_after' => 0, 'end_time' => '' ],
+            'include_in_eventtable' => 0,
         ];
 
@@ -520 +520 @@
     $type = sanitize_text_field( (string) $type_raw );
     if ( $type === '' ) { continue; }
-    $allowed_types = [ 'weekly', 'day_of_month', 'nth_weekday_month' ];
+    $allowed_types = [ 'weekly', 'day_of_month', 'nth_weekday_month', 'yearly' ];
     if ( ! in_array( $type, $allowed_types, true ) ) { continue; }
     $time = $this->sanitize_time( $rr['time'] ?? '' );
@@ -536 +536 @@
             $offset_enabled = ! empty( $post['luzid_cs_offset_enabled'] ) ? 1 : 0;
 
-            $days_before = isset( $post['luzid_cs_offset_days_before'] ) ? (int) $post['luzid_cs_offset_days_before'] : 0;
+// Backward-Compat: altes Feld luzid_cs_offset_days -> days_before
+            $days_before = isset( $post['luzid_cs_offset_days_before'] ) ? (int) wp_unslash( (string) $post['luzid_cs_offset_days_before'] ) : ( isset( $post['luzid_cs_offset_days'] ) ? (int) wp_unslash( (string) $post['luzid_cs_offset_days'] ) : 0 );
 $days_before = max( 0, $days_before );
 
@@ -555 +556 @@
     'end_time' => $end_time,
 ];
+
+// Include in Event Table
+$entry['include_in_eventtable'] = ! empty( $post['luzid_cs_include_in_eventtable'] ) ? 1 : 0;
 
             return [ 'entry' => $entry, 'errors' => $errors ];
@@ -660 +664 @@
     private function sanitize_prefix( $s ) {
         $s = sanitize_text_field( (string) $s );
-        $allowed = [ '', 'ab', 'bis', 'um' ];
+        // Präfix 1: keins | ab | bis | um | von | Ab | Bis | Um | Von (+ EN variants)
+        $allowed = [ '', 'ab', 'bis', 'um', 'von', 'Ab', 'Bis', 'Um', 'Von', 'from', 'until', 'at', 'From', 'Until', 'At' ];
         return in_array( $s, $allowed, true ) ? $s : '';
     }
 
+    private function sanitize_prefix2( $s ) {
+        $s = sanitize_text_field( (string) $s );
+        // Präfix 2: keins | bis | Bis | dash (+ EN variants)
+        $allowed = [ '', 'bis', 'Bis', 'dash', 'to', 'To' ];
+        return in_array( $s, $allowed, true ) ? $s : '';
+    }
+
     /**
-     * Termine: Von/Bis (Bis optional). Für einzelne Tage nur "von" ausfüllen.
-     * Backward-Compat: alte Struktur {date,prefix,time} wird als {from,to,prefix,time} interpretiert.
+     * Termine: Einzelne Tage mit optionaler Zeit und Zeitspanne.
      */
     
@@ -679 +690 @@
         // Migration: "date" -> "from"
         $from = $this->sanitize_date( $r['from'] ?? ( $r['date'] ?? '' ) );
-        $to   = $this->sanitize_date( $r['to'] ?? '' );
 
         if ( $from === '' ) {
             continue;
         }
-        if ( $to !== '' && $to < $from ) {
-            $tmp  = $from;
-            $from = $to;
-            $to   = $tmp;
-        }
 
         $prefix = $this->sanitize_prefix( $r['prefix'] ?? '' );
         $time   = $this->sanitize_time( $r['time'] ?? '' );
+        $prefix2 = $this->sanitize_prefix2( $r['prefix2'] ?? '' );
+        $time_to = $this->sanitize_time( $r['time_to'] ?? '' );
         $text   = $this->sanitize_event_text( $r['text'] ?? '' );
 
         $out[] = [
-            'from'   => $from,
-            'to'     => $to,
-            'prefix' => $prefix,
-            'time'   => $time,
-            'text'   => $text,
+            'from'    => $from,
+            'prefix'  => $prefix,
+            'time'    => $time,
+            'prefix2' => $prefix2,
+            'time_to' => $time_to,
+            'text'    => $text,
         ];
     }
@@ -736 +744 @@
             if ( ! is_array( $r ) ) continue;
             $type = sanitize_text_field( (string) ( $r['type'] ?? '' ) );
-            $allowed = [ 'weekly', 'day_of_month', 'nth_weekday_month' ];
+            $allowed = [ 'weekly', 'day_of_month', 'nth_weekday_month', 'yearly' ];
             if ( ! in_array( $type, $allowed, true ) ) continue;
 
@@ -742 +750 @@
             $time = $this->sanitize_time( $r['time'] ?? '' );
             if ( $time === '' ) { continue; }
+            $prefix2 = $this->sanitize_prefix2( $r['prefix2'] ?? '' );
+            $time_to = $this->sanitize_time( $r['time_to'] ?? '' );
             $text = $this->sanitize_event_text( $r['text'] ?? '' );
 
@@ -752 +762 @@
                 'prefix' => $prefix,
                 'time' => $time,
+                'prefix2' => $prefix2,
+                'time_to' => $time_to,
                 'text' => $text,
                 'from' => $from,
@@ -784 +796 @@
                 $rule['nth'] = $nth;
                 $rule['weekday'] = $weekday;
+            }
+
+            if ( $type === 'yearly' ) {
+                $yearly_day = isset( $r['yearly_day'] ) ? (int) $r['yearly_day'] : 0;
+                $yearly_month = isset( $r['yearly_month'] ) ? (int) $r['yearly_month'] : 0;
+                if ( $yearly_day < 1 || $yearly_day > 31 ) continue;
+                if ( $yearly_month < 1 || $yearly_month > 12 ) continue;
+                $rule['yearly_day'] = $yearly_day;
+                $rule['yearly_month'] = $yearly_month;
             }
 
@@ -969 +990 @@
                 $is_sel = ( ! $is_new && $selected && $selected['id'] === $e['id'] );
                 $slug = (string) ( $e['slug'] ?? '' );
-                $sc = $slug ? '[luzid_cs slug="' . esc_attr( $slug ) . '" opt="long"]' : '';
+                $sc = $slug ? '[luzid_cs slug="' . esc_attr( $slug ) . '" date="long"]' : '';
 
                 $active = $this->is_entry_active_now( $e, $now_ts );
@@ -1033 +1054 @@
         $slug = (string) ( $entry['slug'] ?? '' );
         $css_class = $slug ? 'luzid-cs-' . $slug : 'luzid-cs-…';
-        $sc_example = $slug ? '[luzid_cs slug="' . esc_attr( $slug ) . '" opt="long"]' : '[luzid_cs slug="…" opt="long"]';
+        $sc_example = $slug ? '[luzid_cs slug="' . esc_attr( $slug ) . '" date="long"]' : '[luzid_cs slug="…" date="long"]';
+        $include_in_table = ! empty( $entry['include_in_eventtable'] );
 
         echo '<div class="lcs-tab-content" data-panel="setup">';
@@ -1059 +1081 @@
         echo '<button type="button" class="lcs-copy-btn lcs-button-secondary lcs-btn-icon" data-lcs-copy="' . esc_attr( $sc_example ) . '"><span class="dashicons dashicons-admin-page" aria-hidden="true"></span></button>';
         echo '</div>';
-        echo '<span class="lcs-description">' . esc_html( $this->is_en ? 'Prints the next event dynamically (opt: short|date|time|long).' : 'Gibt den nächsten Event dynamisch aus (opt: short|date|time|long).' ) . '</span>';
+        echo '<span class="lcs-description">' . esc_html( $this->is_en ? 'Prints the next event dynamically (date: short|medium|long|full, time: auto|raw|prefix|range).' : 'Gibt den nächsten Event dynamisch aus (date: short|medium|long|full, time: auto|raw|prefix|range).' ) . '</span>';
+        echo '</td></tr>';
+
+        // Include in Event Table
+        echo '<tr><th>' . esc_html( $this->is_en ? 'Event Table' : 'Event-Tabelle' ) . '</th><td>';
+        echo '<label class="lcs-checkbox-label"><input type="checkbox" name="luzid_cs_include_in_eventtable" value="1" ' . checked( $include_in_table, true, false ) . '>';
+        echo ' ' . esc_html( $this->is_en ? 'Include in Event Table output' : 'In Event-Tabelle einbeziehen' ) . '</label>';
+        echo '<span class="lcs-description">' . esc_html( $this->is_en ? 'If checked, events from this scheduler will be included when using [luzid_cs_eventtable].' : 'Wenn aktiviert, werden Events dieses Schedulers bei [luzid_cs_eventtable] einbezogen.' ) . '</span>';
         echo '</td></tr>';
 
@@ -1077 +1106 @@
             'exceptions' => [],
             'event_offset' => [ 'enabled' => 0, 'days_before' => 0, 'start_time' => '00:01', 'days_after' => 0, 'end_time' => '' ],
+            'include_in_eventtable' => 0,
         ];
     }
@@ -1096 +1126 @@
         echo '<div class="lcs-tab-content" data-panel="termine">';
         $this->render_panel_title( $this->panel_title_text( 'termine', $entry, $is_new ) );
-        echo '<p class="lcs-paragraph lcs-text">' . esc_html( $this->is_en ? 'Dates define ranges in which content can be shown. For single days fill only the from field and leave the to field empty.' : 'Termine definieren Zeiträume, an denen Content angezeigt werden kann. Für einzelne Tage nur das von Feld ausfüllen und das bis Feld freilassen.' ) . '</p>';
-
-        echo '<div data-lcs-repeater="single">';
-        echo '<table class="lcs-table lcs-table--compact">';
-        echo '<thead><tr>';
-        echo '<th>' . esc_html( $this->is_en ? 'From' : 'Von' ) . '</th><th>' . esc_html( $this->is_en ? 'To' : 'Bis' ) . '</th><th>' . esc_html( $this->is_en ? 'Prefix' : 'Präfix' ) . '</th><th>' . esc_html( $this->is_en ? 'Time (optional)' : 'Zeit (optional)' ) . '</th><th>' . esc_html( $this->is_en ? 'Event text (optional)' : 'Eventtext (optional)' ) . '</th><th>' . esc_html( $this->is_en ? 'Action' : 'Aktion' ) . '</th>';
-        echo '</tr></thead>';
-        echo '<tbody data-lcs-rows>'; 
+        echo '<p class="lcs-paragraph lcs-text">' . esc_html( $this->is_en ? 'Define single dates when content should be visible.' : 'Definiere einzelne Termine, an denen Content sichtbar sein soll.' ) . '</p>';
+
+        echo '<div data-lcs-repeater="single" class="lcs-cards-repeater">';
 
         if ( empty( $rows ) ) {
-            $rows = [ [ 'from' => '', 'to' => '', 'prefix' => '', 'time' => '', 'text' => '' ] ];
+            $rows = [ [ 'from' => '', 'prefix' => '', 'time' => '', 'prefix2' => '', 'time_to' => '', 'text' => '' ] ];
         }
 
             foreach ( $rows as $i => $r ) {
                 $from_raw = (string) ( $r['from'] ?? ( $r['date'] ?? '' ) );
-                $to_raw   = (string) ( $r['to'] ?? '' );
                 $prefix   = (string) ( $r['prefix'] ?? '' );
                 $time_raw = (string) ( $r['time'] ?? '' );
+                $prefix2  = (string) ( $r['prefix2'] ?? '' );
+                $time_to_raw = (string) ( $r['time_to'] ?? '' );
                 $text_raw = (string) ( $r['text'] ?? '' );
-            echo '<tr data-lcs-row>';
-                echo '<td><input class="lcs-input" type="date" lang="' . esc_attr( $this->is_en ? 'en-GB' : 'de-DE' ) . '" name="luzid_cs_single[' . (int) $i . '][from]" value="' . esc_attr( $from_raw ) . '"></td>';
-                echo '<td><input class="lcs-input" type="date" lang="' . esc_attr( $this->is_en ? 'en-GB' : 'de-DE' ) . '" name="luzid_cs_single[' . (int) $i . '][to]" value="' . esc_attr( $to_raw ) . '"></td>';
-                echo '<td>' . $this->prefix_select( 'luzid_cs_single[' . (int) $i . '][prefix]', $prefix ) . '</td>'; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
-                echo '<td><input class="lcs-input" type="time" name="luzid_cs_single[' . (int) $i . '][time]" value="' . esc_attr( $time_raw ) . '"></td>';
-                echo '<td><input class="lcs-input" type="text" name="luzid_cs_single[' . (int) $i . '][text]" value="' . esc_attr( $text_raw ) . '" placeholder="' . esc_attr( $this->is_en ? 'Optional' : 'Optional' ) . '"></td>';
-            echo '<td><div class="lcs-row-actions">';
-            echo '<a class="lcs-copy-btn lcs-button-secondary lcs-btn-icon" href="#" data-lcs-remove title="' . esc_attr( $this->is_en ? 'Remove row' : 'Zeile entfernen' ) . '"><span class="dashicons dashicons-trash"></span></a>';
-            echo '</div></td>';
-            echo '</tr>';
-        }
-
-        echo '</tbody>';
-        echo '</table>';
+            
+            echo '<div class="lcs-card" data-lcs-row>';
+            echo '<div class="lcs-card__row">';
+            echo '<div class="lcs-card__field"><label>' . esc_html( $this->is_en ? 'Date' : 'Datum' ) . '</label><input class="lcs-input" type="date" name="luzid_cs_single[' . (int) $i . '][from]" value="' . esc_attr( $from_raw ) . '"></div>';
+            echo '<div class="lcs-card__field"><label>' . esc_html( $this->is_en ? 'Prefix 1' : 'Präfix 1' ) . '</label>' . $this->prefix_select( 'luzid_cs_single[' . (int) $i . '][prefix]', $prefix ) . '</div>'; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
+            echo '<div class="lcs-card__field"><label>' . esc_html( $this->is_en ? 'Time from' : 'Zeit von' ) . '</label><input class="lcs-input" type="time" name="luzid_cs_single[' . (int) $i . '][time]" value="' . esc_attr( $time_raw ) . '"></div>';
+            echo '<div class="lcs-card__field"><label>' . esc_html( $this->is_en ? 'Prefix 2' : 'Präfix 2' ) . '</label>' . $this->prefix2_select( 'luzid_cs_single[' . (int) $i . '][prefix2]', $prefix2 ) . '</div>'; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
+            echo '<div class="lcs-card__field"><label>' . esc_html( $this->is_en ? 'Time to' : 'Zeit bis' ) . '</label><input class="lcs-input" type="time" name="luzid_cs_single[' . (int) $i . '][time_to]" value="' . esc_attr( $time_to_raw ) . '"></div>';
+            echo '</div>';
+            echo '<div class="lcs-card__row">';
+            echo '<div class="lcs-card__field lcs-card__field--wide"><label>' . esc_html( $this->is_en ? 'Event text' : 'Eventtext' ) . '</label><input class="lcs-input" type="text" name="luzid_cs_single[' . (int) $i . '][text]" value="' . esc_attr( $text_raw ) . '" placeholder="' . esc_attr( $this->is_en ? 'Optional' : 'Optional' ) . '"></div>';
+            echo '<div class="lcs-card__actions"><a class="lcs-button-secondary lcs-btn-icon" href="#" data-lcs-remove title="' . esc_attr( $this->is_en ? 'Remove' : 'Entfernen' ) . '"><span class="dashicons dashicons-trash"></span></a></div>';
+            echo '</div>';
+            echo '</div>';
+        }
 
         echo '<template data-lcs-template>';
-        echo '<tr data-lcs-row>';
-        echo '<td><input class="lcs-input" type="date" lang="' . esc_attr( $this->is_en ? 'en-GB' : 'de-DE' ) . '" name="luzid_cs_single[__i__][from]" value=""></td>';
-        echo '<td><input class="lcs-input" type="date" lang="' . esc_attr( $this->is_en ? 'en-GB' : 'de-DE' ) . '" name="luzid_cs_single[__i__][to]" value=""></td>';
-            echo '<td>' . $this->prefix_select( 'luzid_cs_single[__i__][prefix]', '' ) . '</td>'; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
-        echo '<td><input class="lcs-input" type="time" name="luzid_cs_single[__i__][time]" value=""></td>';
-        echo '<td><input class="lcs-input" type="text" name="luzid_cs_single[__i__][text]" value="" placeholder="' . esc_attr( $this->is_en ? 'Optional' : 'Optional' ) . '"></td>';
-        echo '<td><div class="lcs-row-actions">';
-        echo '<a class="lcs-copy-btn lcs-button-secondary lcs-btn-icon" href="#" data-lcs-remove title="' . esc_attr( $this->is_en ? 'Remove row' : 'Zeile entfernen' ) . '"><span class="dashicons dashicons-trash"></span></a>';
-        echo '</div></td>';
-        echo '</tr>';
+        echo '<div class="lcs-card" data-lcs-row>';
+        echo '<div class="lcs-card__row">';
+        echo '<div class="lcs-card__field"><label>' . esc_html( $this->is_en ? 'Date' : 'Datum' ) . '</label><input class="lcs-input" type="date" name="luzid_cs_single[__i__][from]" value=""></div>';
+        echo '<div class="lcs-card__field"><label>' . esc_html( $this->is_en ? 'Prefix 1' : 'Präfix 1' ) . '</label>' . $this->prefix_select( 'luzid_cs_single[__i__][prefix]', '' ) . '</div>'; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
+        echo '<div class="lcs-card__field"><label>' . esc_html( $this->is_en ? 'Time from' : 'Zeit von' ) . '</label><input class="lcs-input" type="time" name="luzid_cs_single[__i__][time]" value=""></div>';
+        echo '<div class="lcs-card__field"><label>' . esc_html( $this->is_en ? 'Prefix 2' : 'Präfix 2' ) . '</label>' . $this->prefix2_select( 'luzid_cs_single[__i__][prefix2]', '' ) . '</div>'; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
+        echo '<div class="lcs-card__field"><label>' . esc_html( $this->is_en ? 'Time to' : 'Zeit bis' ) . '</label><input class="lcs-input" type="time" name="luzid_cs_single[__i__][time_to]" value=""></div>';
+        echo '</div>';
+        echo '<div class="lcs-card__row">';
+        echo '<div class="lcs-card__field lcs-card__field--wide"><label>' . esc_html( $this->is_en ? 'Event text' : 'Eventtext' ) . '</label><input class="lcs-input" type="text" name="luzid_cs_single[__i__][text]" value="" placeholder="' . esc_attr( $this->is_en ? 'Optional' : 'Optional' ) . '"></div>';
+        echo '<div class="lcs-card__actions"><a class="lcs-button-secondary lcs-btn-icon" href="#" data-lcs-remove title="' . esc_attr( $this->is_en ? 'Remove' : 'Entfernen' ) . '"><span class="dashicons dashicons-trash"></span></a></div>';
+        echo '</div>';
+        echo '</div>';
         echo '</template>';
 
@@ -1158 +1188 @@
         echo '<p class="lcs-paragraph lcs-text">' . esc_html( $this->is_en ? 'Multiple recurring rules (OR logic). Each rule has its own period (from/to) that restricts only that rule.' : 'Mehrere Wiederholungsregeln (ODER-Logik). Jede Regel hat einen eigenen Zeitraum (von/bis), der nur diese Regel einschränkt.' ) . '</p>';
 
-        echo '<div data-lcs-repeater="recurring">';
-        echo '<table class="lcs-table lcs-table--compact">';
-        echo '<thead><tr>';
-        echo '<th>' . esc_html( $this->is_en ? 'Type' : 'Typ' ) . '</th><th>' . esc_html( $this->is_en ? 'Details' : 'Details' ) . '</th><th>' . esc_html( $this->is_en ? 'Rule period' : 'Regel-Zeitraum' ) . '</th><th>' . esc_html( $this->is_en ? 'Action' : 'Aktion' ) . '</th>';
-        echo '</tr></thead>';
-        echo '<tbody data-lcs-rows>'; 
+        echo '<div data-lcs-repeater="recurring" class="lcs-cards-repeater">';
 
         if ( empty( $rows ) ) {
-            $rows = [ [ 'type' => '', 'weekdays' => [], 'prefix' => '', 'time' => '', 'text' => '', 'from' => '', 'to' => '' ] ];
+            $rows = [ [ 'type' => '', 'weekdays' => [], 'prefix' => '', 'time' => '', 'prefix2' => '', 'time_to' => '', 'text' => '', 'from' => '', 'to' => '' ] ];
         }
 
         foreach ( $rows as $i => $r ) {
-                echo $this->render_recurring_row( $i, $r ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
-        }
-
-        echo '</tbody>';
-        echo '</table>';
+                echo $this->render_recurring_card( $i, $r ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
+        }
 
         echo '<template data-lcs-template>';
-            echo $this->render_recurring_row( '__i__', [ 'type' => '', 'weekdays' => [], 'prefix' => '', 'time' => '', 'text' => '', 'from' => '', 'to' => '' ], true ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
+            echo $this->render_recurring_card( '__i__', [ 'type' => '', 'weekdays' => [], 'prefix' => '', 'time' => '', 'prefix2' => '', 'time_to' => '', 'text' => '', 'from' => '', 'to' => '' ], true ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
         echo '</template>';
 
@@ -1188 +1210 @@
     }
 
-    private function render_recurring_row( $i, $r, $is_template = false ) {
+    private function render_recurring_card( $i, $r, $is_template = false ) {
         $idx = $i;
         $name = function( $field ) use ( $idx ) { return 'luzid_cs_recurring[' . $idx . '][' . $field . ']'; };
@@ -1195 +1217 @@
         $prefix = (string) ( $r['prefix'] ?? '' );
         $time = (string) ( $r['time'] ?? '' );
+        $prefix2 = (string) ( $r['prefix2'] ?? '' );
+        $time_to = (string) ( $r['time_to'] ?? '' );
         $text = (string) ( $r['text'] ?? '' );
         $from = (string) ( $r['from'] ?? '' );
         $to = (string) ( $r['to'] ?? '' );
 
-        $html = '';
         $is_invalid = ( ! $is_template && $type !== '' && $time === '' );
-        $tr_class = $is_invalid ? ' class="lcs-row--invalid"' : '';
-        $html .= '<tr data-lcs-row' . $tr_class . '>';
-
-        // Type
-        $html .= '<td>';
+        $card_class = $is_invalid ? 'lcs-card lcs-card--invalid' : 'lcs-card';
+
+        $html = '<div class="' . esc_attr( $card_class ) . '" data-lcs-row>';
+
+        // Warning for incomplete rules
+        if ( $is_invalid ) {
+            $html .= '<div class="lcs-rec-inline-warning">';
+            $html .= '<span class="dashicons dashicons-warning"></span>';
+            $html .= '<strong>' . esc_html( $this->is_en ? 'Incomplete: missing time – this rule will be ignored.' : 'Unvollständig: Uhrzeit fehlt – diese Regel wird ignoriert.' ) . '</strong>';
+            $html .= '</div>';
+        }
+
+        // Row 1: Type + Details + Prefix 1 + Time from + Prefix 2 + Time to
+        $html .= '<div class="lcs-card__row">';
+        
+        // Type select
+        $html .= '<div class="lcs-card__field">';
+        $html .= '<label>' . esc_html( $this->is_en ? 'Type' : 'Typ' ) . '</label>';
         $html .= '<select class="lcs-select lcs-rec-type" name="' . esc_attr( $name('type') ) . '">';
-$html .= '<option value="">' . esc_html( $this->is_en ? '— Choose type —' : '— Typ wählen —' ) . '</option>';
+        $html .= '<option value="">' . esc_html( $this->is_en ? '— Choose —' : '— Wählen —' ) . '</option>';
         $html .= '<option value="weekly" ' . selected( $type, 'weekly', false ) . '>' . esc_html( $this->is_en ? 'Weekly' : 'Wöchentlich' ) . '</option>';
         $html .= '<option value="day_of_month" ' . selected( $type, 'day_of_month', false ) . '>' . esc_html( $this->is_en ? 'Monthly' : 'Monatlich' ) . '</option>';
         $html .= '<option value="nth_weekday_month" ' . selected( $type, 'nth_weekday_month', false ) . '>' . esc_html( $this->is_en ? 'Weekday in month' : 'Wochentag im Monat' ) . '</option>';
+        $html .= '<option value="yearly" ' . selected( $type, 'yearly', false ) . '>' . esc_html( $this->is_en ? 'Yearly' : 'Jährlich' ) . '</option>';
         $html .= '</select>';
-        $html .= '</td>';
-
-        // Details
-        $html .= '<td class="lcs-rec-details">';
-if ( $is_invalid ) {
-    $html .= '<div class="lcs-rec-inline-warning" style="margin-bottom:8px; padding:8px 10px; background:#fff8e5; border:1px solid #dba617; border-radius:4px; color:#6b5a00; font-size:13px;">';
-    $html .= '<span class="dashicons dashicons-warning" style="margin-right:6px; vertical-align:middle;"></span>';
-    $html .= '<strong>' . esc_html( $this->is_en ? 'Incomplete: missing time – this rule will be ignored.' : 'Unvollständig: Uhrzeit fehlt – diese Regel wird ignoriert.' ) . '</strong>';
-    $html .= '</div>';
-}
-
-
-        // Weekly details (Dropdown, single)
+        $html .= '</div>';
+
+        // Details (dynamic based on type)
         $weekday_single = (int) ( $r['weekday'] ?? 0 );
         if ( $weekday_single < 1 || $weekday_single > 7 ) {
@@ -1232 +1259 @@
         }
 
-        $weekly_style = ( $type === 'weekly' ) ? 'display: inline-flex;' : 'display: none;';
-        $dom_style    = ( $type === 'day_of_month' ) ? 'display: inline-flex;' : 'display: none;';
-        $nth_style    = ( $type === 'nth_weekday_month' ) ? 'display: inline-flex;' : 'display: none;';
-
-        $html .= '<span class="lcs-inline-inputs" data-details="weekly" style="' . esc_attr( $weekly_style ) . '">';
-        $html .= '<span class="lcs-help-inline">' . esc_html( $this->is_en ? 'Every ' : 'Jeden ' ) . '</span> ';
+        $weekly_style = ( $type === 'weekly' ) ? '' : 'display: none;';
+        $dom_style    = ( $type === 'day_of_month' ) ? '' : 'display: none;';
+        $nth_style    = ( $type === 'nth_weekday_month' ) ? '' : 'display: none;';
+        $yearly_style = ( $type === 'yearly' ) ? '' : 'display: none;';
+
+        // Weekly: Weekday
+        $html .= '<div class="lcs-card__field" data-details="weekly" style="' . esc_attr( $weekly_style ) . '">';
+        $html .= '<label>' . esc_html( $this->is_en ? 'Weekday' : 'Wochentag' ) . '</label>';
         $html .= $this->weekday_select( $name('weekday'), $weekday_single );
-        $html .= '</span>';
-
-        // Day-of-month details (Dropdown)
+        $html .= '</div>';
+
+        // Monthly: Day of month
         $dom = (int) ( $r['day'] ?? 1 );
         if ( $dom < 1 || $dom > 31 ) { $dom = 1; }
-        $html .= '<span class="lcs-inline-inputs" data-details="day_of_month" style="' . esc_attr( $dom_style ) . '">';
-        $html .= '<span class="lcs-help-inline">' . esc_html( $this->is_en ? 'Every ' : 'Jeden ' ) . '</span> ';
+        $html .= '<div class="lcs-card__field" data-details="day_of_month" style="' . esc_attr( $dom_style ) . '">';
+        $html .= '<label>' . esc_html( $this->is_en ? 'Day' : 'Tag' ) . '</label>';
         $html .= $this->day_of_month_select( $name('day'), $dom );
-        $html .= '<span class="lcs-help-inline"> </span>';
-        $html .= '</span>';
-
-        // Nth weekday details
+        $html .= '</div>';
+
+        // Nth weekday: Nth + Weekday
         $nth = (int) ( $r['nth'] ?? 1 );
         $weekday = (int) ( $r['weekday'] ?? 4 );
-        $html .= '<span class="lcs-inline-inputs" data-details="nth_weekday_month" style="' . esc_attr( $nth_style ) . '">';
-        $html .= '<span class="lcs-help-inline">' . esc_html( $this->is_en ? 'Every' : 'Jeden' ) . '</span> ';
+        $html .= '<div class="lcs-card__field" data-details="nth_weekday_month" style="' . esc_attr( $nth_style ) . '">';
+        $html .= '<label>' . esc_html( $this->is_en ? 'Which' : 'Welcher' ) . '</label>';
         $html .= '<select class="lcs-select" name="' . esc_attr( $name('nth') ) . '">';
         $nth_labels = [ 1 => '1.', 2 => '2.', 3 => '3.', 4 => '4.', 5 => '5.', -1 => ( $this->is_en ? 'last' : 'letzter' ) ];
@@ -1261 +1289 @@
         }
         $html .= '</select>';
-
-        $html .= '<span class="lcs-help-inline"> </span> ';
+        $html .= '</div>';
+
+        $html .= '<div class="lcs-card__field" data-details="nth_weekday_month" style="' . esc_attr( $nth_style ) . '">';
+        $html .= '<label>' . esc_html( $this->is_en ? 'Weekday' : 'Wochentag' ) . '</label>';
         $html .= $this->weekday_select( $name('weekday'), $weekday );
-        $html .= '</span>';
-
-        // Common: prefix + time (single fields, avoids duplicate POST values)
-        $html .= '<span class="lcs-inline-inputs lcs-rec-common" style="' . ( $type !== '' ? 'display: inline-flex;' : 'display: none;' ) . '">';
-        $html .= '<span class="lcs-sep"> </span>';
+        $html .= '</div>';
+
+        // Yearly: Day + Month
+        $yearly_day = (int) ( $r['yearly_day'] ?? 1 );
+        $yearly_month = (int) ( $r['yearly_month'] ?? 1 );
+        if ( $yearly_day < 1 || $yearly_day > 31 ) { $yearly_day = 1; }
+        if ( $yearly_month < 1 || $yearly_month > 12 ) { $yearly_month = 1; }
+
+        $html .= '<div class="lcs-card__field" data-details="yearly" style="' . esc_attr( $yearly_style ) . '">';
+        $html .= '<label>' . esc_html( $this->is_en ? 'Day' : 'Tag' ) . '</label>';
+        $html .= $this->day_of_month_select( $name('yearly_day'), $yearly_day );
+        $html .= '</div>';
+
+        $html .= '<div class="lcs-card__field" data-details="yearly" style="' . esc_attr( $yearly_style ) . '">';
+        $html .= '<label>' . esc_html( $this->is_en ? 'Month' : 'Monat' ) . '</label>';
+        $html .= '<select class="lcs-select" name="' . esc_attr( $name('yearly_month') ) . '">';
+        $months = $this->is_en 
+            ? [ 1 => 'January', 2 => 'February', 3 => 'March', 4 => 'April', 5 => 'May', 6 => 'June', 7 => 'July', 8 => 'August', 9 => 'September', 10 => 'October', 11 => 'November', 12 => 'December' ]
+            : [ 1 => 'Januar', 2 => 'Februar', 3 => 'März', 4 => 'April', 5 => 'Mai', 6 => 'Juni', 7 => 'Juli', 8 => 'August', 9 => 'September', 10 => 'Oktober', 11 => 'November', 12 => 'Dezember' ];
+        foreach ( $months as $m => $label ) {
+            $html .= '<option value="' . esc_attr( (string) $m ) . '" ' . selected( $yearly_month, $m, false ) . '>' . esc_html( $label ) . '</option>';
+        }
+        $html .= '</select>';
+        $html .= '</div>';
+
+        // Time fields in Row 1 (visible when type is selected)
+        $html .= '<div class="lcs-card__field lcs-rec-common" data-rec-time style="' . ( $type !== '' ? '' : 'display: none;' ) . '">';
+        $html .= '<label>' . esc_html( $this->is_en ? 'Prefix 1' : 'Präfix 1' ) . '</label>';
         $html .= $this->prefix_select( $name('prefix'), $prefix );
-        $html .= '<span class="lcs-help-inline"> </span> ';
+        $html .= '</div>';
+
+        $html .= '<div class="lcs-card__field lcs-rec-common" data-rec-time style="' . ( $type !== '' ? '' : 'display: none;' ) . '">';
+        $html .= '<label>' . esc_html( $this->is_en ? 'Time from' : 'Zeit von' ) . '</label>';
         $html .= '<input class="lcs-input" type="time" name="' . esc_attr( $name('time') ) . '" value="' . esc_attr( $time ) . '">';
-
-        // Optional event text for this recurring rule (shown in shortcode output when text="true")
-        $html .= '<input class="lcs-input" type="text" name="' . esc_attr( $name('text') ) . '" value="' . esc_attr( $text ) . '" placeholder="' . esc_attr( $this->is_en ? 'Event text (optional)' : 'Eventtext (optional)' ) . '">';
-        $html .= '</span>';
-
-        $html .= '</td>';
-
-        // Period
-        $html .= '<td>';
-        $html .= '<span class="lcs-inline-inputs">';
-        $html .= '<span class="lcs-help-inline">' . esc_html( $this->is_en ? 'from' : 'von' ) . '</span> <input class="lcs-input" type="date" lang="' . esc_attr( $this->is_en ? 'en-GB' : 'de-DE' ) . '" name="' . esc_attr( $name('from') ) . '" value="' . esc_attr( $from ) . '">';
-        $html .= '<span class="lcs-help-inline">' . esc_html( $this->is_en ? 'to' : 'bis' ) . '</span> <input class="lcs-input" type="date" lang="' . esc_attr( $this->is_en ? 'en-GB' : 'de-DE' ) . '" name="' . esc_attr( $name('to') ) . '" value="' . esc_attr( $to ) . '">';
-        $html .= '</span>';
-        $html .= '</td>';
-
-        // Action
-        $html .= '<td><div class="lcs-row-actions">';
-        $html .= '<a class="lcs-copy-btn lcs-button-secondary lcs-btn-icon" href="#" data-lcs-remove title="' . esc_attr( $this->is_en ? 'Remove row' : 'Zeile entfernen' ) . '"><span class="dashicons dashicons-trash"></span></a>';
-        $html .= '</div></td>';
-
-        $html .= '</tr>';
+        $html .= '</div>';
+
+        $html .= '<div class="lcs-card__field lcs-rec-common" data-rec-time style="' . ( $type !== '' ? '' : 'display: none;' ) . '">';
+        $html .= '<label>' . esc_html( $this->is_en ? 'Prefix 2' : 'Präfix 2' ) . '</label>';
+        $html .= $this->prefix2_select( $name('prefix2'), $prefix2 );
+        $html .= '</div>';
+
+        $html .= '<div class="lcs-card__field lcs-rec-common" data-rec-time style="' . ( $type !== '' ? '' : 'display: none;' ) . '">';
+        $html .= '<label>' . esc_html( $this->is_en ? 'Time to' : 'Zeit bis' ) . '</label>';
+        $html .= '<input class="lcs-input" type="time" name="' . esc_attr( $name('time_to') ) . '" value="' . esc_attr( $time_to ) . '">';
+        $html .= '</div>';
+
+        $html .= '</div>'; // End Row 1
+
+        // Row 2: Event text, Valid from, Valid to, Action
+        $html .= '<div class="lcs-card__row lcs-rec-common" style="' . ( $type !== '' ? '' : 'display: none;' ) . '">';
+
+        $html .= '<div class="lcs-card__field lcs-card__field--wide">';
+        $html .= '<label>' . esc_html( $this->is_en ? 'Event text' : 'Eventtext' ) . '</label>';
+        $html .= '<input class="lcs-input" type="text" name="' . esc_attr( $name('text') ) . '" value="' . esc_attr( $text ) . '" placeholder="' . esc_attr( $this->is_en ? 'Optional' : 'Optional' ) . '">';
+        $html .= '</div>';
+
+        $html .= '<div class="lcs-card__field">';
+        $html .= '<label>' . esc_html( $this->is_en ? 'Valid from' : 'Gültig von' ) . '</label>';
+        $html .= '<input class="lcs-input" type="date" name="' . esc_attr( $name('from') ) . '" value="' . esc_attr( $from ) . '">';
+        $html .= '</div>';
+
+        $html .= '<div class="lcs-card__field">';
+        $html .= '<label>' . esc_html( $this->is_en ? 'Valid to' : 'Gültig bis' ) . '</label>';
+        $html .= '<input class="lcs-input" type="date" name="' . esc_attr( $name('to') ) . '" value="' . esc_attr( $to ) . '">';
+        $html .= '</div>';
+
+        $html .= '<div class="lcs-card__actions">';
+        $html .= '<a class="lcs-button-secondary lcs-btn-icon" href="#" data-lcs-remove title="' . esc_attr( $this->is_en ? 'Remove' : 'Entfernen' ) . '"><span class="dashicons dashicons-trash"></span></a>';
+        $html .= '</div>';
+
+        $html .= '</div>'; // End Row 2
+
+        $html .= '</div>'; // End Card
 
         return $html;
@@ -1348 +1422 @@
     }
     private function render_panel_event_offset( $entry, $is_new ) {
-        $offset = isset( $entry['event_offset'] ) && is_array( $entry['event_offset'] ) ? $entry['event_offset'] : [ 'enabled' => 0, 'days_before' => 0, 'start_time' => '00:01', 'days_after' => 0, 'end_time' => '' ];
-        $enabled = ! empty( $offset['enabled'] );
-        $days_before = (int) ( $offset['days_before'] ?? ( $offset['days'] ?? 0 ) ); // backward compat
-        $days_before = max( 0, $days_before );
-        $start_time = (string) ( $offset['start_time'] ?? '00:01' );
-        $days_after = (int) ( $offset['days_after'] ?? 0 );
-        $days_after = max( 0, $days_after );
-        $end_time = (string) ( $offset['end_time'] ?? '' );
+        $event_classes = isset( $entry['event_classes'] ) && is_array( $entry['event_classes'] ) ? $entry['event_classes'] : [];
+        $slug = (string) ( $entry['slug'] ?? '' );
+        
+        if ( empty( $event_classes ) ) {
+            $event_classes = [[ 'name' => 'standard', 'days_before' => 0, 'start_time' => '', 'days_after' => 0, 'end_time' => '' ]];
+        }
 
         $next = $this->compute_next_event( $entry, time() );
@@ -1361 +1433 @@
         echo '<div class="lcs-tab-content" data-panel="event-offset">';
         $this->render_panel_title( $this->panel_title_text( 'event-offset', $entry, $is_new ) );
-        echo '<p class="lcs-paragraph lcs-text">' . ( $this->is_en ? 'Show content X days <strong>before</strong> the calculated event – starting at a fixed start time. The offset affects only the visibility window, not the text output of the shortcode.' : 'Zeige Content X Tage <strong>vor</strong> dem berechneten Event – ab einer festen Startzeit. Der Offset beeinflusst nur das Sichtbarkeitsfenster, nicht die Text-Ausgabe im Shortcode.' ) . '</p>';
-
-        echo '<table class="lcs-form-table">';
-
-        echo '<tr><th>' . esc_html( $this->is_en ? 'Enable event offset' : 'Event-Offset aktivieren' ) . '</th><td>';
-        echo '<div class="lcs-checkbox-wrapper"><input type="checkbox" name="luzid_cs_offset_enabled" value="1" ' . checked( $enabled, true, false ) . '><span>aktiv</span></div>';
-        echo '</td></tr>';
-
-        echo '<tr><th>' . esc_html( $this->is_en ? 'Days before / start time' : 'Tage vorher / Startzeit' ) . '</th><td>';
-        echo '<div class="lcs-inline-inputs">';
-        echo '<input type="number" min="0" max="365" name="luzid_cs_offset_days_before" value="' . esc_attr( (string) $days_before ) . '" style="max-width:120px;">';
-        echo '<input type="time" name="luzid_cs_offset_start_time" value="' . esc_attr( $start_time ) . '" style="max-width:160px;">';
+        
+        $desc_de = 'Definiere über Klassen die Sichtbarkeit von Content | Popups | Alerts | Menüeinträgen. Bestimme das Zeitfenster der Sichtbarkeit vor und nach dem Event über Offsets. Die Klassen beeinflussen nur das Sichtbarkeitsfenster, nicht die Text-Ausgabe im Shortcode.';
+        $desc_en = 'Define classes to control visibility of Content | Popups | Alerts | Menu items. Set the visibility time window before and after the event using offsets. Classes only affect the visibility window, not the text output of the shortcode.';
+        echo '<p class="lcs-paragraph lcs-text">' . esc_html( $this->is_en ? $desc_en : $desc_de ) . '</p>';
+
+        echo '<div class="lcs-repeater" data-lcs-repeater="event_classes">';
+        
+        foreach ( $event_classes as $i => $cls ) {
+            echo $this->render_event_class_card( $i, $cls, $slug, $next, false ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
+        }
+        
+        echo '<template data-lcs-template>';
+        echo $this->render_event_class_card( '__i__', [ 'name' => '', 'days_before' => 0, 'start_time' => '', 'days_after' => 0, 'end_time' => '' ], $slug, $next, true ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
+        echo '</template>';
+
+        echo '<div class="lcs-actions">';
+        echo '<button type="button" class="lcs-button-small lcs-btn-icon" data-lcs-add><span class="dashicons dashicons-plus-alt2" aria-hidden="true"></span><span>' . esc_html( $this->is_en ? 'Add class' : 'Klasse hinzufügen' ) . '</span></button>';
         echo '</div>';
-        echo '<div class="lcs-description">' . ( $this->is_en ? 'Start of visibility: <strong>(event date minus days before)</strong> from start time.' : 'Start der Sichtbarkeit: <strong>(Event-Datum minus Tage vorher)</strong> ab Startzeit.' ) . '</div>';
-        echo '</td></tr>';
-
-        echo '<tr><th>' . esc_html( $this->is_en ? 'Days after / end time' : 'Tage nachher / Endzeit' ) . '</th><td>';
-        echo '<div class="lcs-inline-inputs">';
-        echo '<input type="number" min="0" max="365" name="luzid_cs_offset_days_after" value="' . esc_attr( (string) $days_after ) . '" style="max-width:120px;">';
-        echo '<input type="time" name="luzid_cs_offset_end_time" value="' . esc_attr( $end_time ) . '" style="max-width:160px;" placeholder="">';
+
         echo '</div>';
-        echo '<div class="lcs-description">' . ( $this->is_en ? 'End of visibility: <strong>(event date plus days after)</strong> at end time. If empty, visibility ends at the event time (for event ranges: the last day).' : 'Ende der Sichtbarkeit: <strong>(Event-Datum plus Tage nachher)</strong> zur Endzeit. Wenn Endzeit leer ist, gilt der Event-Zeitpunkt (bei Zeiträumen: der letzte Tag).' ) . '</div>';
-        echo '</td></tr>';
-
-        echo '<tr><th>' . esc_html( $this->is_en ? 'Next event preview' : 'Vorschau nächster Event' ) . '</th><td>';
-        if ( $next && ! empty( $next['ts'] ) ) {
-            echo '<strong>' . esc_html( $this->format_event_datetime( $next['ts'], $next['prefix'], $next['time'], 'long', $next ) ) . '</strong>';
-
-            $use_offset = $enabled && ( $days_before > 0 || $days_after > 0 || $end_time !== '' );
-            if ( $use_offset ) {
-                $window = $this->compute_offset_window( $entry, $next );
-                if ( $window ) {
-                    $tz = wp_timezone();
-                    echo '<div class="lcs-description">' . esc_html( $this->is_en ? 'Visible from:' : 'Sichtbar von:' ) . ' ' . esc_html( $this->wp_date_lang( 'd.m.Y H:i', (int) $window['start'], $tz ) ) . ' – ' . esc_html( $this->is_en ? 'until:' : 'bis:' ) . ' ' . esc_html( $this->wp_date_lang( 'd.m.Y H:i', (int) $window['end'], $tz ) ) . '</div>';
-                }
-            }
+        
+        echo '<div class="lcs-callout" style="margin-top: 20px;">';
+        echo '<p><strong>' . esc_html( $this->is_en ? 'Start of visibility:' : 'Start der Sichtbarkeit:' ) . '</strong> ';
+        echo esc_html( $this->is_en ? '(Event date minus days before) from start time. If start time is empty, visibility starts at 00:00.' : '(Event-Datum minus Tage vorher) ab Startzeit. Wenn Startzeit leer ist, beginnt die Sichtbarkeit um 00:00 Uhr.' ) . '</p>';
+        echo '<p><strong>' . esc_html( $this->is_en ? 'End of visibility:' : 'Ende der Sichtbarkeit:' ) . '</strong> ';
+        echo esc_html( $this->is_en ? '(Event date plus days after) at end time. If end time is empty, visibility ends at the event time (for date ranges: the last day).' : '(Event-Datum plus Tage nachher) zur Endzeit. Wenn Endzeit leer ist, gilt der Event-Zeitpunkt (bei Zeiträumen: der letzte Tag).' ) . '</p>';
+        echo '</div>';
+
+        echo '</div>';
+    }
+
+    private function render_event_class_card( $i, $cls, $scheduler_slug, $next_event, $is_template = false ) {
+        $idx = $i;
+        $name = function( $field ) use ( $idx ) { return 'luzid_cs_event_classes[' . $idx . '][' . $field . ']'; };
+
+        $class_name = (string) ( $cls['name'] ?? '' );
+        $days_before = (int) ( $cls['days_before'] ?? 0 );
+        $start_time = (string) ( $cls['start_time'] ?? '' );
+        $days_after = (int) ( $cls['days_after'] ?? 0 );
+        $end_time = (string) ( $cls['end_time'] ?? '' );
+        
+        $is_standard = ( $class_name === 'standard' || ( $i === 0 && ! $is_template ) );
+        $css_class = $is_standard ? 'luzid-cs-' . $scheduler_slug : 'luzid-cs-' . $scheduler_slug . '-' . $class_name;
+
+        $html = '<div class="lcs-card" data-lcs-row>';
+        $html .= '<div class="lcs-card__row">';
+        
+        // Name field
+        $html .= '<div class="lcs-card__field lcs-card__field--grow">';
+        $html .= '<label>' . esc_html( $this->is_en ? 'Name' : 'Name' ) . '</label>';
+        if ( $is_standard && ! $is_template ) {
+            $html .= '<input type="text" class="lcs-input" value="Standard" disabled style="background: #f0f0f0;">';
+            $html .= '<input type="hidden" name="' . esc_attr( $name('name') ) . '" value="standard">';
+            $html .= '<input type="hidden" name="' . esc_attr( $name('is_standard') ) . '" value="1">';
         } else {
-            echo '<span class="lcs-description">' . esc_html( $this->tr( 'no_date_available' ) ) . '</span>';
-        }
-        echo '</td></tr>';
-
-        echo '</table>';
-
-        echo '</div>';
+            $html .= '<input type="text" class="lcs-input lcs-event-class-name" name="' . esc_attr( $name('name') ) . '" value="' . esc_attr( $class_name ) . '" placeholder="' . esc_attr( $this->is_en ? 'e.g. popup, banner, menu' : 'z.B. popup, banner, menu' ) . '">';
+        }
+        $html .= '</div>';
+        
+        // CSS Class preview
+        $html .= '<div class="lcs-card__field lcs-card__field--grow">';
+        $html .= '<label>' . esc_html( $this->is_en ? 'CSS Class' : 'CSS-Klasse' ) . '</label>';
+        $html .= '<code class="lcs-event-class-preview" style="display: inline-block; padding: 6px 10px; background: #f5f5f5; border-radius: 4px;">.' . esc_html( $css_class ) . '</code>';
+        $html .= '</div>';
+        
+        // Action buttons: Copy + Delete
+        $html .= '<div class="lcs-card__field lcs-card__field--actions">';
+        $html .= '<div class="lcs-row-actions">';
+        // Copy button (always visible)
+        $html .= '<button type="button" class="lcs-button-secondary lcs-copy-btn lcs-btn-icon" data-lcs-copy="' . esc_attr( $css_class ) . '" title="' . esc_attr( $this->is_en ? 'Copy CSS class' : 'CSS-Klasse kopieren' ) . '"><span class="dashicons dashicons-admin-page"></span></button>';
+        // Delete button (not for standard, unless template)
+        if ( ! $is_standard || $is_template ) {
+            $html .= '<a class="lcs-button-secondary lcs-btn-icon" href="#" data-lcs-remove title="' . esc_attr( $this->is_en ? 'Remove' : 'Entfernen' ) . '"><span class="dashicons dashicons-trash"></span></a>';
+        }
+        $html .= '</div>';
+        $html .= '</div>';
+        
+        $html .= '</div>';
+
+        // Row 2: Days before + Start time + Days after + End time
+        $html .= '<div class="lcs-card__row">';
+        
+        $html .= '<div class="lcs-card__field">';
+        $html .= '<label>' . esc_html( $this->is_en ? 'Days before' : 'Tage vorher' ) . '</label>';
+        $html .= '<input type="number" class="lcs-input" name="' . esc_attr( $name('days_before') ) . '" value="' . esc_attr( (string) $days_before ) . '" min="0" max="365" style="max-width: 80px;">';
+        $html .= '</div>';
+        
+        $html .= '<div class="lcs-card__field">';
+        $html .= '<label>' . esc_html( $this->is_en ? 'Start time' : 'Startzeit' ) . '</label>';
+        $html .= '<input type="time" class="lcs-input" name="' . esc_attr( $name('start_time') ) . '" value="' . esc_attr( $start_time ) . '" style="max-width: 120px;">';
+        $html .= '</div>';
+        
+        $html .= '<div class="lcs-card__field">';
+        $html .= '<label>' . esc_html( $this->is_en ? 'Days after' : 'Tage nachher' ) . '</label>';
+        $html .= '<input type="number" class="lcs-input" name="' . esc_attr( $name('days_after') ) . '" value="' . esc_attr( (string) $days_after ) . '" min="0" max="365" style="max-width: 80px;">';
+        $html .= '</div>';
+        
+        $html .= '<div class="lcs-card__field">';
+        $html .= '<label>' . esc_html( $this->is_en ? 'End time' : 'Endzeit' ) . '</label>';
+        $html .= '<input type="time" class="lcs-input" name="' . esc_attr( $name('end_time') ) . '" value="' . esc_attr( $end_time ) . '" style="max-width: 120px;">';
+        $html .= '</div>';
+        
+        $html .= '</div>';
+
+        // Row 3: Preview
+        if ( $next_event && ! empty( $next_event['ts'] ) && ! $is_template ) {
+            $window = $this->compute_class_offset_window( $cls, $next_event );
+            if ( $window ) {
+                $tz = wp_timezone();
+                $html .= '<div class="lcs-card__row lcs-card__row--preview">';
+                $html .= '<div class="lcs-card__field lcs-card__field--full">';
+                $html .= '<span class="lcs-preview-label">' . esc_html( $this->is_en ? 'Preview:' : 'Vorschau:' ) . '</span> ';
+                $html .= '<span class="lcs-preview-text">';
+                $html .= esc_html( $this->is_en ? 'Visible from' : 'Sichtbar von' ) . ' ';
+                $html .= '<strong>' . esc_html( $this->wp_date_lang( 'd.m.Y H:i', (int) $window['start'], $tz ) ) . '</strong>';
+                $html .= ' ' . esc_html( $this->is_en ? 'until' : 'bis' ) . ' ';
+                $html .= '<strong>' . esc_html( $this->wp_date_lang( 'd.m.Y H:i', (int) $window['end'], $tz ) ) . '</strong>';
+                $html .= '</span>';
+                $html .= '</div>';
+                $html .= '</div>';
+            }
+        }
+
+        $html .= '</div>';
+
+        return $html;
+    }
+
+    private function compute_class_offset_window( $cls, $next_event ) {
+        if ( empty( $next_event['ts'] ) ) return null;
+
+        $days_before = max( 0, (int) ( $cls['days_before'] ?? 0 ) );
+        $start_time = (string) ( $cls['start_time'] ?? '' );
+        if ( $start_time !== '' && ! preg_match( '/^\d{2}:\d{2}$/', $start_time ) ) $start_time = '';
+
+        $days_after = max( 0, (int) ( $cls['days_after'] ?? 0 ) );
+        $end_time = (string) ( $cls['end_time'] ?? '' );
+        if ( $end_time !== '' && ! preg_match( '/^\d{2}:\d{2}$/', $end_time ) ) { $end_time = ''; }
+
+        $tz = wp_timezone();
+        $event_dt = (new DateTime('@' . (int) $next_event['ts']))->setTimezone( $tz );
+
+        if ( $days_before > 0 ) {
+            $start_dt = clone $event_dt;
+            $start_dt->modify( '-' . $days_before . ' days' );
+            if ( $start_time !== '' ) {
+                $start_dt->setTime( (int) substr( $start_time, 0, 2 ), (int) substr( $start_time, 3, 2 ), 0 );
+            } else {
+                $start_dt->setTime( 0, 0, 0 );
+            }
+            $start_ts = $start_dt->getTimestamp();
+        } else {
+            if ( $start_time !== '' ) {
+                $start_dt = clone $event_dt;
+                $start_dt->setTime( (int) substr( $start_time, 0, 2 ), (int) substr( $start_time, 3, 2 ), 0 );
+                $start_ts = $start_dt->getTimestamp();
+            } else {
+                $start_ts = (int) $next_event['ts'];
+            }
+        }
+
+        $base_end_ts = ! empty( $next_event['end_ts'] ) ? (int) $next_event['end_ts'] : (int) $next_event['ts'];
+        $end_ts = $base_end_ts;
+
+        if ( $days_after > 0 ) {
+            $end_ts = $base_end_ts + ( $days_after * DAY_IN_SECONDS );
+        }
+
+        if ( $end_time !== '' ) {
+            $base_end_dt = (new DateTime('@' . (int) $base_end_ts ))->setTimezone( $tz );
+            if ( $days_after > 0 ) {
+                $base_end_dt->modify( '+' . $days_after . ' days' );
+            }
+            $base_end_dt->setTime( (int) substr( $end_time, 0, 2 ), (int) substr( $end_time, 3, 2 ), 0 );
+            $end_ts = $base_end_dt->getTimestamp();
+        }
+
+        return [ 'start' => (int) $start_ts, 'end' => (int) $end_ts ];
     }
 
@@ -1430 +1636 @@
             echo '<div style="margin-top:15px;">';
             echo '<table class="lcs-table lcs-table--compact">';
-            echo '<thead><tr><th>' . esc_html( $this->is_en ? 'Day or period' : 'Tag oder Zeitraum' ) . '</th><th>' . esc_html( $this->is_en ? 'Show from' : 'Einblenden am' ) . '</th><th>' . esc_html( $this->is_en ? 'Text (long)' : 'Text (long)' ) . '</th><th>' . esc_html( $this->is_en ? 'Source' : 'Quelle' ) . '</th></tr></thead>';
+            echo '<thead><tr><th>' . esc_html( $this->is_en ? 'Day or period' : 'Tag oder Zeitraum' ) . '</th><th>' . esc_html( $this->is_en ? 'Show from' : 'Einblenden am' ) . '</th><th>' . esc_html( $this->is_en ? 'Text (long)' : 'Text (long)' ) . '</th><th>' . esc_html( $this->is_en ? 'Event text (opt)' : 'Eventtext (opt)' ) . '</th></tr></thead>';
             echo '<tbody>';
 
@@ -1492 +1698 @@
                             $long_txt = $this->format_event_datetime( $ts, $prefix, $time, 'long', $ev );
 
-$src = (string) ( $ev['source'] ?? ( $ev['type'] ?? '' ) );
-$rule_type = (string) ( $ev['rule_type'] ?? '' );
-if ( $src === 'recurring' ) {
-    $src_txt = $this->is_en ? 'Recurring' : 'Wiederholung';
-    if ( $rule_type !== '' ) {
-        $src_txt .= ' (' . $rule_type . ')';
-    }
-} else {
-    $src_txt = $this->is_en ? 'Single' : 'Termin';
-}
+// Eventtext (optional) - aus dem Event-Datensatz
+$event_text = (string) ( $ev['text'] ?? '' );
 
 
@@ -1509 +1707 @@
                 echo '<td>' . esc_html( $show_txt ) . '</td>';
                 echo '<td>' . esc_html( $long_txt ) . '</td>';
-                echo '<td>' . esc_html( $src_txt ) . '</td>';
+                echo '<td>' . esc_html( $event_text ) . '</td>';
                 echo '</tr>';
             }
@@ -1539 +1737 @@
     private function prefix_select( $name, $current ) {
         $current = (string) $current;
+        // Präfix 1: keins | ab | bis | um | von | Ab | Bis | Um | Von
         $opts = [
-            '' => '—',
-            'ab' => ( $this->is_en ? 'from' : 'ab' ),
-            'bis' => ( $this->is_en ? 'until' : 'bis' ),
-            'um' => ( $this->is_en ? 'at' : 'um' ),
+            '' => ( $this->is_en ? 'none' : 'keins' ),
+            'ab' => 'ab',
+            'bis' => 'bis',
+            'um' => 'um',
+            'von' => 'von',
+            'Ab' => 'Ab',
+            'Bis' => 'Bis',
+            'Um' => 'Um',
+            'Von' => 'Von',
         ];
+        if ( $this->is_en ) {
+            $opts = [
+                '' => 'none',
+                'from' => 'from',
+                'until' => 'until',
+                'at' => 'at',
+                'From' => 'From',
+                'Until' => 'Until',
+                'At' => 'At',
+            ];
+        }
+        $html = '<select class="lcs-select" name="' . esc_attr( $name ) . '">';
+        foreach ( $opts as $val => $label ) {
+            $html .= '<option value="' . esc_attr( $val ) . '" ' . selected( $current, $val, false ) . '>' . esc_html( $label ) . '</option>';
+        }
+        $html .= '</select>';
+        return $html;
+    }
+
+    private function prefix2_select( $name, $current ) {
+        $current = (string) $current;
+        // Präfix 2: keins | bis | Bis | – (Bindestrich)
+        $opts = [
+            '' => ( $this->is_en ? 'none' : 'keins' ),
+            'bis' => 'bis',
+            'Bis' => 'Bis',
+            'dash' => '– (' . ( $this->is_en ? 'dash' : 'Strich' ) . ')',
+        ];
+        if ( $this->is_en ) {
+            $opts = [
+                '' => 'none',
+                'to' => 'to',
+                'To' => 'To',
+                'dash' => '– (dash)',
+            ];
+        }
         $html = '<select class="lcs-select" name="' . esc_attr( $name ) . '">';
         foreach ( $opts as $val => $label ) {
@@ -1638 +1878 @@
 
             $cls_new = 'luzid-cs-' . $slug;
+            $cls_old = 'luzid-cs-' . $slug; // legacy support (pre-1.2.2)
             $is_active = $this->is_entry_active_now( $e, $now );
 
             // Set element visibility directly (independent of body_class()).
-                $css .= '.' . $cls_new . '{display:' . ( $is_active ? 'block' : 'none' ) . '!important;}' . "\n";
+                $css .= '.' . $cls_new . ',.' . $cls_old . '{display:' . ( $is_active ? 'block' : 'none' ) . '!important;}' . "\n";
 
             // Provide a body class hint for themes/custom CSS (optional).
@@ -1668 +1909 @@
             if ( $this->is_entry_active_now( $e, $now ) ) {
                 $classes[] = 'luzid-cs-active-' . $slug;
+                $classes[] = 'luzid-cs-active-' . $slug; // legacy support
             }
         }
@@ -1965 +2207 @@
             $prefix = isset( $r['prefix'] ) ? (string) $r['prefix'] : '';
             $time = isset( $r['time'] ) ? (string) $r['time'] : '';
+            $prefix2 = isset( $r['prefix2'] ) ? (string) $r['prefix2'] : '';
+            $time_to = isset( $r['time_to'] ) ? (string) $r['time_to'] : '';
             $text = isset( $r['text'] ) ? (string) $r['text'] : '';
 
@@ -1976 +2220 @@
 
             $cand = [
-                'ts'     => (int) $ts,
-                'type'   => 'single',
-                'source' => 'single',
-                'prefix' => $prefix,
-                'time'   => $time,
-                'text'   => $text,
-                'from'   => $from,
+                'ts'      => (int) $ts,
+                'type'    => 'single',
+                'source'  => 'single',
+                'prefix'  => $prefix,
+                'time'    => $time,
+                'prefix2' => $prefix2,
+                'time_to' => $time_to,
+                'text'    => $text,
+                'from'    => $from,
             ];
 
@@ -2025 +2271 @@
                     $time = isset( $row['time'] ) ? (string) $row['time'] : '';
                     $prefix = isset( $row['prefix'] ) ? (string) $row['prefix'] : '';
+                    $prefix2 = isset( $row['prefix2'] ) ? (string) $row['prefix2'] : '';
+                    $time_to = isset( $row['time_to'] ) ? (string) $row['time_to'] : '';
                     $text = isset( $row['text'] ) ? (string) $row['text'] : '';
 
@@ -2030 +2278 @@
                     if ( $ts !== null ) {
                         $cand = [
-                            'ts'     => (int) $ts,
-                            'type'   => 'single',
-                'source' => 'single',
-                            'prefix' => $prefix,
-                            'time'   => $time,
-                            'text'   => $text,
+                            'ts'      => (int) $ts,
+                            'type'    => 'single',
+                'source'  => 'single',
+                            'prefix'  => $prefix,
+                            'time'    => $time,
+                            'prefix2' => $prefix2,
+                            'time_to' => $time_to,
+                            'text'    => $text,
                         ];
 
@@ -2218 +2468 @@
                 if ( $ts === null ) continue;
                 if ( $ts < $after_ts ) continue;
-                return [ 'ts' => $ts, 'type' => 'recurring', 'source' => 'recurring', 'rule_type' => $type, 'prefix' => $prefix, 'time' => $time, 'text' => $text ];
+                return [ 'ts' => $ts, 'type' => 'recurring', 'source' => 'recurring', 'rule_type' => $type, 'prefix' => $prefix, 'time' => $time, 'text' => $text, 'prefix2' => (string) ( $rule['prefix2'] ?? '' ), 'time_to' => (string) ( $rule['time_to'] ?? '' ) ];
             }
             return null;
@@ -2238 +2488 @@
                 if ( $ts === null ) continue;
                 if ( $ts < $after_ts ) continue;
-                return [ 'ts' => $ts, 'type' => 'recurring', 'source' => 'recurring', 'rule_type' => $type, 'prefix' => $prefix, 'time' => $time, 'text' => $text ];
+                return [ 'ts' => $ts, 'type' => 'recurring', 'source' => 'recurring', 'rule_type' => $type, 'prefix' => $prefix, 'time' => $time, 'text' => $text, 'prefix2' => (string) ( $rule['prefix2'] ?? '' ), 'time_to' => (string) ( $rule['time_to'] ?? '' ) ];
             }
             return null;
@@ -2258 +2508 @@
                 if ( $ts === null ) continue;
                 if ( $ts < $after_ts ) continue;
-                return [ 'ts' => $ts, 'type' => 'recurring', 'source' => 'recurring', 'rule_type' => $type, 'prefix' => $prefix, 'time' => $time, 'text' => $text ];
+                return [ 'ts' => $ts, 'type' => 'recurring', 'source' => 'recurring', 'rule_type' => $type, 'prefix' => $prefix, 'time' => $time, 'text' => $text, 'prefix2' => (string) ( $rule['prefix2'] ?? '' ), 'time_to' => (string) ( $rule['time_to'] ?? '' ) ];
+            }
+            return null;
+        }
+
+        if ( $type === 'yearly' ) {
+            $yearly_day = (int) ( $rule['yearly_day'] ?? 0 );
+            $yearly_month = (int) ( $rule['yearly_month'] ?? 0 );
+            if ( $yearly_day < 1 || $yearly_day > 31 ) return null;
+            if ( $yearly_month < 1 || $yearly_month > 12 ) return null;
+            
+            $start_year = (int) $after->format('Y');
+            for ( $y = 0; $y < 10; $y++ ) {
+                $year = $start_year + $y;
+                $month_str = str_pad( (string) $yearly_month, 2, '0', STR_PAD_LEFT );
+                $day_str = str_pad( (string) $yearly_day, 2, '0', STR_PAD_LEFT );
+                $date = $year . '-' . $month_str . '-' . $day_str;
+                
+                // Validate date (e.g., Feb 30 doesn't exist)
+                if ( ! checkdate( $yearly_month, $yearly_day, $year ) ) continue;
+                if ( ! $this->rule_period_allows( $rule, $date ) ) continue;
+                $ts = $this->ts_from_date_time( $date, $time );
+                if ( $ts === null ) continue;
+                if ( $ts < $after_ts ) continue;
+                return [ 'ts' => $ts, 'type' => 'recurring', 'source' => 'recurring', 'rule_type' => $type, 'prefix' => $prefix, 'time' => $time, 'text' => $text, 'prefix2' => (string) ( $rule['prefix2'] ?? '' ), 'time_to' => (string) ( $rule['time_to'] ?? '' ) ];
             }
             return null;
@@ -2315 +2589 @@
         $atts = shortcode_atts(
             [
-                'slug' => '',
-                'opt' => 'long',
-                'count' => 10,
+                'slug'       => '',
+                'date'       => '',        // leer=kein Datum | short|medium|long|full
+                'time'       => '',        // leer=keine Zeit | auto|raw|prefix|range|range_long
+                'count'      => 10,
                 'timeoffset' => 0,
-                'lang' => '',
-                'list' => 'false',
-                'text' => 'false',
-                'sep'  => '-',
+                'lang'       => '',
+                'list'       => 'false',
+                'text'       => 'false',
+                'sep1'       => ' ',       // zwischen Datum und Zeit
+                'sep2'       => ' ',       // zwischen Zeit und Text (oder Datum und Text wenn keine Zeit)
+                'sep3'       => '',        // zwischen Listenelementen (nur bei list="true")
             ],
             $atts,
@@ -2329 +2606 @@
 
         $slug = sanitize_title( (string) $atts['slug'] );
-        $opt = sanitize_text_field( (string) $atts['opt'] );
+        $date_format = sanitize_text_field( (string) $atts['date'] );
+        $time_format = sanitize_text_field( (string) $atts['time'] );
         $count = (int) $atts['count'];
         $timeoffset = (int) $atts['timeoffset'];
         $lang = strtolower( sanitize_text_field( (string) $atts['lang'] ) );
 
-        $list = strtolower( sanitize_text_field( (string) $atts['list'] ) );
-        $with_text = strtolower( sanitize_text_field( (string) $atts['text'] ) );
-        $sep = (string) $atts['sep'];
-        // Separator should preserve intentional leading/trailing spaces (e.g. " | ").
-        // So we only strip tags/control chars but do NOT trim.
-        $sep = html_entity_decode( $sep, ENT_QUOTES, 'UTF-8' );
-
-        // Allow line breaks for separator if user passes <br> (or a newline char).
-        $sep_is_br = ( preg_match( '/<\s*br\s*\/?\s*>/i', $sep ) === 1 ) || ( strpos( $sep, "\n" ) !== false ) || ( strpos( $sep, "\r" ) !== false );
-        if ( $sep_is_br ) {
-            $sep = '<br />';
-        } else {
-            // Strip tags/control chars, but do NOT trim.
-            $sep = wp_strip_all_tags( $sep, true );
-            $sep = str_replace( ["\n", "\r", "\t"], ' ', $sep );
-            if ( $sep === '' ) { $sep = '-'; }
-        }
-
-// WordPress shortcode parsing trims leading/trailing spaces inside quoted attributes.
-        // To still support sep=" | " we pad separators with single spaces by default,
-        // unless the separator already has edge whitespace or uses &nbsp; explicitly.
-        $sep_has_edge_ws = ( preg_match( '/^\s|\s$/u', $sep ) === 1 );
-        $sep_has_nbsp    = ( strpos( $sep, '&nbsp;' ) !== false );
-        if ( ! $sep_is_br && ! $sep_has_edge_ws && ! $sep_has_nbsp ) {
-            $sep = ' ' . $sep . ' ';
-        }
-
-
-        // Build safe HTML for separator (allow only <br> as HTML)
-        $sep_html = esc_html( $sep );
-        if ( preg_match( '/<\s*br\s*\/?\s*>/i', $sep ) || strpos( $sep, "\n" ) !== false || strpos( $sep, "\r" ) !== false ) {
-            $sep_html = '<br />';
-        }
-        $is_list = in_array( $list, [ '1', 'true', 'yes', 'on' ], true );
-        $show_text = in_array( $with_text, [ '1', 'true', 'yes', 'on' ], true );
-
-        // Backward-compat: opt="list" behaves like list="true" + opt="long"
-        if ( $opt === 'list' ) {
-            $opt = 'long';
-            $is_list = true;
-        }
-
-
-        // Optional language override for shortcode output (de|en). Empty = current.
+        // If neither date nor time is set, default to date="long"
+        if ( $date_format === '' && $time_format === '' ) {
+            $date_format = 'long';
+        }
+
+        $is_list = in_array( strtolower( (string) $atts['list'] ), [ '1', 'true', 'yes', 'on' ], true );
+        $show_text = in_array( strtolower( (string) $atts['text'] ), [ '1', 'true', 'yes', 'on' ], true );
+        
+        // Process separators
+        $sep1_html = $this->process_separator( (string) $atts['sep1'] );
+        $sep2_html = $this->process_separator( (string) $atts['sep2'] );
+        $sep3_html = $this->process_separator( (string) $atts['sep3'], '' );
+
+        // Optional language override for shortcode output (de|en)
         $old_lang = $this->lang;
         $old_is_en = $this->is_en;
@@ -2393 +2641 @@
         $now = time();
 
-        // List output: next N events in the selected format, separated by <br />
+        // List output: next N events
         if ( $is_list ) {
             $count = max( 1, min( 200, $count ) );
@@ -2403 +2651 @@
             }
 
-            $lines = [];
+            $items = [];
             foreach ( $events as $ev ) {
                 if ( empty( $ev['ts'] ) ) {
@@ -2409 +2657 @@
                 }
                 $ts = (int) $ev['ts'] + ( $timeoffset * 60 );
-
-                $opt_html  = esc_html( $this->format_event_datetime( $ts, $ev['prefix'] ?? '', $ev['time'] ?? '', $opt, $ev ) );
-                $item_html = '<div class="luzid-cs-item"><span class="luzid-cs-opt">' . $opt_html . '</span>';
-
-                if ( $show_text && ! empty( $ev['text'] ) ) {
-                    $item_html .= '<span class="luzid-cs-sep">' . $sep_html . '</span><span class="luzid-cs-text">' . esc_html( (string) $ev['text'] ) . '</span>';
-                }
-
-                $item_html .= '</div>';
-                $lines[] = $item_html;
-            }
-$this->lang = $old_lang;
+                $item_html = $this->build_event_output( $ts, $ev, $date_format, $time_format, $show_text, $sep1_html, $sep2_html );
+                $items[] = '<div class="luzid-cs-item">' . $item_html . '</div>';
+            }
+            
+            $this->lang = $old_lang;
             $this->is_en = $old_is_en;
-            return '<div class="luzid-cs luzid-cs--list">' . implode( "\n", $lines ) . '</div>';
-        }
-
-$next = $this->compute_next_event( $entry, $now );
+            
+            // Join items with sep3
+            $glue = $sep3_html !== '' ? $sep3_html : "\n";
+            return '<div class="luzid-cs luzid-cs--list">' . implode( $glue, $items ) . '</div>';
+        }
+
+        // Single event output
+        $next = $this->compute_next_event( $entry, $now );
         if ( ! $next || empty( $next['ts'] ) ) {
             $this->lang = $old_lang;
@@ -2433 +2678 @@
 
         $ts = (int) $next['ts'] + ( $timeoffset * 60 );
-        $opt_html = esc_html( $this->format_event_datetime( $ts, $next['prefix'] ?? '', $next['time'] ?? '', $opt, $next ) );
-        $out = '<span class="luzid-cs luzid-cs--single"><span class="luzid-cs-opt">' . $opt_html . '</span>';
-
-        if ( $show_text && ! empty( $next['text'] ) ) {
-            $out .= '<span class="luzid-cs-sep">' . $sep_html . '</span><span class="luzid-cs-text">' . esc_html( (string) $next['text'] ) . '</span>';
-        }
-
-        $out .= '</span>';
+        $out = '<span class="luzid-cs luzid-cs--single">' . $this->build_event_output( $ts, $next, $date_format, $time_format, $show_text, $sep1_html, $sep2_html ) . '</span>';
 
         $this->lang = $old_lang;
         $this->is_en = $old_is_en;
         return $out;
+    }
+
+    /**
+     * Process a separator value - handle <br>, spaces, etc.
+     * User gets exactly what they input - no auto-padding.
+     */
+    private function process_separator( $sep, $default = ' ' ) {
+        $sep = html_entity_decode( $sep, ENT_QUOTES, 'UTF-8' );
+        
+        // Check for <br> variants
+        if ( preg_match( '/<\s*br\s*\/?\s*>/i', $sep ) || strpos( $sep, "\n" ) !== false || strpos( $sep, "\r" ) !== false ) {
+            return '<br />';
+        }
+        
+        // Strip tags but preserve content
+        $sep = wp_strip_all_tags( $sep, true );
+        $sep = str_replace( ["\n", "\r", "\t"], ' ', $sep );
+        
+        // WordPress trims spaces from shortcode attributes.
+        // If the result is empty, use the default (typically a space).
+        if ( $sep === '' ) {
+            return esc_html( $default );
+        }
+        
+        return esc_html( $sep );
+    }
+
+    /**
+     * Build the HTML output for a single event.
+     */
+    private function build_event_output( $ts, $ev, $date_format, $time_format, $show_text, $sep1_html, $sep2_html ) {
+        $tz = wp_timezone();
+        
+        // Date part (only if date_format is set)
+        $date_out = '';
+        if ( $date_format !== '' ) {
+            $date_out = $this->format_date_part( $ts, $date_format, $tz );
+        }
+        
+        // Time part (only if time_format is set)
+        $time_out = '';
+        if ( $time_format !== '' ) {
+            $time_out = $this->format_time_part( $ts, $ev, $time_format, $tz );
+        }
+        
+        // Text part
+        $text_out = '';
+        if ( $show_text && ! empty( $ev['text'] ) ) {
+            $text_out = (string) $ev['text'];
+        }
+        
+        // Build output - only include parts that are set
+        $parts = [];
+        
+        // Date (if present)
+        if ( $date_out !== '' ) {
+            $parts[] = '<span class="luzid-cs-date">' . esc_html( $date_out ) . '</span>';
+        }
+        
+        // Time (if present)
+        if ( $time_out !== '' ) {
+            // Only add sep1 if we have both date and time
+            if ( $date_out !== '' ) {
+                $parts[] = '<span class="luzid-cs-sep luzid-cs-sep1">' . $sep1_html . '</span>';
+            }
+            $parts[] = '<span class="luzid-cs-time">' . esc_html( $time_out ) . '</span>';
+        }
+        
+        // Text (if present)
+        if ( $text_out !== '' ) {
+            // Only add sep2 if we have something before it
+            if ( ! empty( $parts ) ) {
+                $parts[] = '<span class="luzid-cs-sep luzid-cs-sep2">' . $sep2_html . '</span>';
+            }
+            $parts[] = '<span class="luzid-cs-text">' . esc_html( $text_out ) . '</span>';
+        }
+        
+        return implode( '', $parts );
+    }
+
+    /**
+     * Format just the date part.
+     */
+    private function format_date_part( $ts, $date_format, $tz ) {
+        switch ( $date_format ) {
+            case 'short':
+                return $this->wp_date_lang( 'd.m.Y', $ts, $tz );
+            case 'medium':
+                return $this->wp_date_lang( 'D, d.m.Y', $ts, $tz );
+            case 'long':
+                return $this->wp_date_lang( 'l, d.m.Y', $ts, $tz );
+            case 'full':
+                if ( $this->is_en ) {
+                    return $this->wp_date_lang( 'l, d F Y', $ts, $tz );
+                } else {
+                    return $this->wp_date_lang( 'l, d. F Y', $ts, $tz );
+                }
+            default:
+                return $this->wp_date_lang( 'l, d.m.Y', $ts, $tz );
+        }
+    }
+
+    /**
+     * Format just the time part.
+     */
+    private function format_time_part( $ts, $ev, $time_format, $tz ) {
+        $prefix = (string) ( $ev['prefix'] ?? '' );
+        $prefix2 = (string) ( $ev['prefix2'] ?? '' );
+        $time_hm = (string) ( $ev['time'] ?? '' );
+        $time_to_hm = (string) ( $ev['time_to'] ?? '' );
+        
+        $has_time = ( $time_hm !== '' && preg_match( '/^\d{2}:\d{2}$/', $time_hm ) );
+        $has_time_to = ( $time_to_hm !== '' && preg_match( '/^\d{2}:\d{2}$/', $time_to_hm ) );
+        
+        if ( ! $has_time ) {
+            return '';
+        }
+        
+        $time_from = $this->wp_date_lang( 'H:i', $ts, $tz );
+        
+        switch ( $time_format ) {
+            case 'raw':
+                return $time_from;
+                
+            case 'prefix':
+                $p = $this->format_prefix_output( $prefix );
+                $out = trim( $p . ' ' . $time_from );
+                if ( ! $this->is_en ) {
+                    $out .= ' Uhr';
+                }
+                return $out;
+                
+            case 'range':
+                if ( $has_time_to ) {
+                    $p2 = $this->format_prefix2_output( $prefix2 );
+                    return $time_from . ' ' . $p2 . ' ' . $time_to_hm;
+                }
+                return $time_from;
+                
+            case 'range_long':
+                $p = $this->format_prefix_output( $prefix );
+                if ( $has_time_to ) {
+                    $p2 = $this->format_prefix2_output( $prefix2 );
+                    $out = trim( $p . ' ' . $time_from . ' ' . $p2 . ' ' . $time_to_hm );
+                } else {
+                    $out = trim( $p . ' ' . $time_from );
+                }
+                if ( ! $this->is_en ) {
+                    $out .= ' Uhr';
+                }
+                return $out;
+                
+            case 'auto':
+            default:
+                $p = $this->format_prefix_output( $prefix );
+                if ( $has_time_to ) {
+                    $p2 = $this->format_prefix2_output( $prefix2 );
+                    $out = trim( $p . ' ' . $time_from . ' ' . $p2 . ' ' . $time_to_hm );
+                } else {
+                    $out = trim( $p . ' ' . $time_from );
+                }
+                if ( ! $this->is_en ) {
+                    $out .= ' Uhr';
+                }
+                return $out;
+        }
+    }
+
+    /**
+     * Format event with new parameter structure.
+     * 
+     * @param int    $ts          Timestamp
+     * @param array  $event       Event data (prefix, prefix2, time, time_to)
+     * @param string $date_format short|medium|long|full
+     * @param string $time_format auto|raw|prefix|range|range_long
+     * @param string $sep_html    Separator between date and time
+     * @return string Formatted output
+     */
+    private function format_event_new( $ts, $event, $date_format, $time_format, $sep_html ) {
+        $tz = wp_timezone();
+        
+        $prefix = (string) ( $event['prefix'] ?? '' );
+        $prefix2 = (string) ( $event['prefix2'] ?? '' );
+        $time_hm = (string) ( $event['time'] ?? '' );
+        $time_to_hm = (string) ( $event['time_to'] ?? '' );
+        
+        // Date formatting
+        $date_out = '';
+        switch ( $date_format ) {
+            case 'short':
+                $date_out = $this->wp_date_lang( 'd.m.Y', $ts, $tz );
+                break;
+            case 'medium':
+                $date_out = $this->wp_date_lang( 'D, d.m.Y', $ts, $tz );
+                break;
+            case 'long':
+                $date_out = $this->wp_date_lang( 'l, d.m.Y', $ts, $tz );
+                break;
+            case 'full':
+                if ( $this->is_en ) {
+                    $date_out = $this->wp_date_lang( 'l, d F Y', $ts, $tz );
+                } else {
+                    $date_out = $this->wp_date_lang( 'l, d. F Y', $ts, $tz );
+                }
+                break;
+            default:
+                $date_out = $this->wp_date_lang( 'l, d.m.Y', $ts, $tz );
+        }
+        
+        // Time formatting
+        $time_out = '';
+        $has_time = ( $time_hm !== '' && preg_match( '/^\d{2}:\d{2}$/', $time_hm ) );
+        $has_time_to = ( $time_to_hm !== '' && preg_match( '/^\d{2}:\d{2}$/', $time_to_hm ) );
+        
+        if ( $has_time && $time_format !== '' ) {
+            $time_from = $this->wp_date_lang( 'H:i', $ts, $tz );
+            $time_to = '';
+            if ( $has_time_to ) {
+                $time_to = $time_to_hm;
+            }
+            
+            switch ( $time_format ) {
+                case 'raw':
+                    $time_out = $time_from;
+                    break;
+                    
+                case 'prefix':
+                    $p = $this->format_prefix_output( $prefix );
+                    $time_out = trim( $p . ' ' . $time_from );
+                    if ( ! $this->is_en ) {
+                        $time_out .= ' Uhr';
+                    }
+                    break;
+                    
+                case 'range':
+                    if ( $has_time_to ) {
+                        $p2 = $this->format_prefix2_output( $prefix2 );
+                        $time_out = $time_from . ' ' . $p2 . ' ' . $time_to;
+                    } else {
+                        $time_out = $time_from;
+                    }
+                    break;
+                    
+                case 'range_long':
+                    $p = $this->format_prefix_output( $prefix );
+                    if ( $has_time_to ) {
+                        $p2 = $this->format_prefix2_output( $prefix2 );
+                        $time_out = trim( $p . ' ' . $time_from . ' ' . $p2 . ' ' . $time_to );
+                    } else {
+                        $time_out = trim( $p . ' ' . $time_from );
+                    }
+                    if ( ! $this->is_en ) {
+                        $time_out .= ' Uhr';
+                    }
+                    break;
+                    
+                case 'auto':
+                default:
+                    $p = $this->format_prefix_output( $prefix );
+                    if ( $has_time_to ) {
+                        $p2 = $this->format_prefix2_output( $prefix2 );
+                        $time_out = trim( $p . ' ' . $time_from . ' ' . $p2 . ' ' . $time_to );
+                    } else {
+                        $time_out = trim( $p . ' ' . $time_from );
+                    }
+                    if ( ! $this->is_en ) {
+                        $time_out .= ' Uhr';
+                    }
+                    break;
+            }
+        }
+        
+        // Combine date and time
+        if ( $time_out !== '' ) {
+            return $date_out . $sep_html . $time_out;
+        }
+        return $date_out;
+    }
+    
+    /**
+     * Format prefix1 for output (handles case as stored).
+     */
+    private function format_prefix_output( $prefix ) {
+        if ( $prefix === '' ) {
+            return '';
+        }
+        // The prefix is stored exactly as the user chose (ab, Ab, von, Von, etc.)
+        return $prefix;
+    }
+    
+    /**
+     * Format prefix2 for output (handles dash conversion).
+     */
+    private function format_prefix2_output( $prefix2 ) {
+        if ( $prefix2 === '' ) {
+            return '';
+        }
+        if ( $prefix2 === 'dash' ) {
+            return '–'; // Em dash
+        }
+        // The prefix is stored exactly as the user chose (bis, Bis, to, To, etc.)
+        return $prefix2;
     }
 
@@ -2502 +3042 @@
 }
 
+/**
+ * Shortcode: [luzid_cs_eventtable]
+ * 
+ * Outputs a table of upcoming events from all schedulers with include_in_eventtable=1.
+ * 
+ * Parameters:
+ * - cols: Comma-separated column types (default: date_medium,time_auto,text)
+ * - count: Max number of events (default: 30)
+ * - headers: Comma-separated custom headers (default: auto-generated)
+ * - noheaders: Hide table headers (default: false)
+ * - class: Additional CSS class for the table
+ * - empty: Text when no events (default: "Keine Termine" / "No events")
+ * - order: Sort order asc|desc (default: asc)
+ * - lang: Language override de|en
+ */
+public function shortcode_eventtable( $atts ) {
+    $atts = shortcode_atts(
+        [
+            'cols'      => 'date_medium,time_auto,text',
+            'count'     => 30,
+            'headers'   => '',
+            'noheaders' => 'false',
+            'class'     => '',
+            'empty'     => '',
+            'order'     => 'asc',
+            'lang'      => '',
+        ],
+        $atts,
+        'luzid_cs_eventtable'
+    );
+
+    $cols = array_map( 'trim', explode( ',', (string) $atts['cols'] ) );
+    $cols = array_filter( $cols );
+    if ( empty( $cols ) ) {
+        $cols = [ 'date_medium', 'time_auto', 'text' ];
+    }
+
+    $count = max( 1, min( 200, (int) $atts['count'] ) );
+    $custom_headers = array_map( 'trim', explode( ',', (string) $atts['headers'] ) );
+    $noheaders = in_array( strtolower( (string) $atts['noheaders'] ), [ '1', 'true', 'yes', 'on' ], true );
+    $custom_class = sanitize_html_class( (string) $atts['class'] );
+    $empty_text = sanitize_text_field( (string) $atts['empty'] );
+    $order = strtolower( (string) $atts['order'] ) === 'desc' ? 'desc' : 'asc';
+    $lang = strtolower( sanitize_text_field( (string) $atts['lang'] ) );
+
+    // Language override
+    $old_lang = $this->lang;
+    $old_is_en = $this->is_en;
+    if ( $lang === 'en' ) {
+        $this->lang = 'en';
+        $this->is_en = true;
+    } elseif ( $lang === 'de' ) {
+        $this->lang = 'de';
+        $this->is_en = false;
+    }
+
+    // Default empty text
+    if ( $empty_text === '' ) {
+        $empty_text = $this->is_en ? 'No events' : 'Keine Termine';
+    }
+
+    // Collect events from all schedulers with include_in_eventtable=1
+    $entries = $this->get_entries();
+    $all_events = [];
+    $now = time();
+
+    foreach ( $entries as $entry ) {
+        if ( empty( $entry['include_in_eventtable'] ) ) {
+            continue;
+        }
+
+        $events = $this->compute_next_events( $entry, $now, $count );
+        if ( ! is_array( $events ) ) {
+            continue;
+        }
+
+        foreach ( $events as $ev ) {
+            if ( empty( $ev['ts'] ) ) {
+                continue;
+            }
+            $ev['_scheduler_slug'] = (string) ( $entry['slug'] ?? '' );
+            $ev['_scheduler_name'] = (string) ( $entry['name'] ?? '' );
+            $all_events[] = $ev;
+        }
+    }
+
+    // Sort by timestamp
+    usort( $all_events, function( $a, $b ) use ( $order ) {
+        $cmp = (int) $a['ts'] - (int) $b['ts'];
+        return $order === 'desc' ? -$cmp : $cmp;
+    } );
+
+    // Limit to count
+    $all_events = array_slice( $all_events, 0, $count );
+
+    // No events?
+    if ( empty( $all_events ) ) {
+        $this->lang = $old_lang;
+        $this->is_en = $old_is_en;
+        return '<p class="luzid-cs-eventtable-empty">' . esc_html( $empty_text ) . '</p>';
+    }
+
+    // Build table
+    $table_class = 'luzid-cs-eventtable';
+    if ( $custom_class !== '' ) {
+        $table_class .= ' ' . $custom_class;
+    }
+
+    $html = '<table class="' . esc_attr( $table_class ) . '">';
+
+    // Headers
+    if ( ! $noheaders ) {
+        $html .= '<thead class="luzid-cs-eventtable__head"><tr class="luzid-cs-eventtable__row luzid-cs-eventtable__row--header">';
+        foreach ( $cols as $i => $col ) {
+            $header = isset( $custom_headers[ $i ] ) && $custom_headers[ $i ] !== '' 
+                ? $custom_headers[ $i ] 
+                : $this->eventtable_default_header( $col );
+            $html .= '<th class="luzid-cs-eventtable__cell luzid-cs-eventtable__cell--' . esc_attr( $col ) . '">' . esc_html( $header ) . '</th>';
+        }
+        $html .= '</tr></thead>';
+    }
+
+    // Body
+    $html .= '<tbody class="luzid-cs-eventtable__body">';
+    $row_num = 0;
+    foreach ( $all_events as $ev ) {
+        $row_num++;
+        $row_class = 'luzid-cs-eventtable__row luzid-cs-eventtable__row--' . ( $row_num % 2 === 0 ? 'even' : 'odd' );
+        $slug = esc_attr( $ev['_scheduler_slug'] ?? '' );
+        
+        $html .= '<tr class="' . esc_attr( $row_class ) . '" data-scheduler="' . $slug . '">';
+        foreach ( $cols as $col ) {
+            $cell_value = $this->eventtable_cell_value( $ev, $col );
+            $html .= '<td class="luzid-cs-eventtable__cell luzid-cs-eventtable__cell--' . esc_attr( $col ) . '">' . esc_html( $cell_value ) . '</td>';
+        }
+        $html .= '</tr>';
+    }
+    $html .= '</tbody>';
+
+    $html .= '</table>';
+
+    $this->lang = $old_lang;
+    $this->is_en = $old_is_en;
+    return $html;
 }
 
+/**
+ * Get default header text for a column type.
+ */
+private function eventtable_default_header( $col ) {
+    $headers_de = [
+        'date_short'    => 'Datum',
+        'date_medium'   => 'Datum',
+        'date_long'     => 'Datum',
+        'date_full'     => 'Datum',
+        'weekday_short' => 'Tag',
+        'weekday_long'  => 'Wochentag',
+        'time_raw'      => 'Uhrzeit',
+        'time_auto'     => 'Uhrzeit',
+        'time_prefix'   => 'Uhrzeit',
+        'time_range'    => 'Uhrzeit',
+        'time_range_long' => 'Uhrzeit',
+        'text'          => 'Event',
+        'scheduler'     => 'Scheduler',
+    ];
+    $headers_en = [
+        'date_short'    => 'Date',
+        'date_medium'   => 'Date',
+        'date_long'     => 'Date',
+        'date_full'     => 'Date',
+        'weekday_short' => 'Day',
+        'weekday_long'  => 'Weekday',
+        'time_raw'      => 'Time',
+        'time_auto'     => 'Time',
+        'time_prefix'   => 'Time',
+        'time_range'    => 'Time',
+        'time_range_long' => 'Time',
+        'text'          => 'Event',
+        'scheduler'     => 'Scheduler',
+    ];
+
+    $headers = $this->is_en ? $headers_en : $headers_de;
+    return $headers[ $col ] ?? $col;
+}
+
+/**
+ * Get cell value for a column type.
+ */
+private function eventtable_cell_value( $ev, $col ) {
+    $ts = (int) ( $ev['ts'] ?? 0 );
+    $tz = wp_timezone();
+
+    $prefix = (string) ( $ev['prefix'] ?? '' );
+    $prefix2 = (string) ( $ev['prefix2'] ?? '' );
+    $time_hm = (string) ( $ev['time'] ?? '' );
+    $time_to_hm = (string) ( $ev['time_to'] ?? '' );
+    $text = (string) ( $ev['text'] ?? '' );
+
+    $has_time = ( $time_hm !== '' && preg_match( '/^\d{2}:\d{2}$/', $time_hm ) );
+    $has_time_to = ( $time_to_hm !== '' && preg_match( '/^\d{2}:\d{2}$/', $time_to_hm ) );
+
+    switch ( $col ) {
+        // Date columns
+        case 'date_short':
+            return $this->wp_date_lang( 'd.m.Y', $ts, $tz );
+        case 'date_medium':
+            return $this->wp_date_lang( 'D, d.m.Y', $ts, $tz );
+        case 'date_long':
+            return $this->wp_date_lang( 'l, d.m.Y', $ts, $tz );
+        case 'date_full':
+            return $this->is_en 
+                ? $this->wp_date_lang( 'l, d F Y', $ts, $tz )
+                : $this->wp_date_lang( 'l, d. F Y', $ts, $tz );
+
+        // Weekday columns
+        case 'weekday_short':
+            return $this->wp_date_lang( 'D', $ts, $tz );
+        case 'weekday_long':
+            return $this->wp_date_lang( 'l', $ts, $tz );
+
+        // Time columns
+        case 'time_raw':
+            return $has_time ? $this->wp_date_lang( 'H:i', $ts, $tz ) : '';
+            
+        case 'time_auto':
+            if ( ! $has_time ) return '';
+            $time_from = $this->wp_date_lang( 'H:i', $ts, $tz );
+            $p = $this->format_prefix_output( $prefix );
+            if ( $has_time_to ) {
+                $p2 = $this->format_prefix2_output( $prefix2 );
+                $out = trim( $p . ' ' . $time_from . ' ' . $p2 . ' ' . $time_to_hm );
+            } else {
+                $out = trim( $p . ' ' . $time_from );
+            }
+            if ( ! $this->is_en ) {
+                $out .= ' Uhr';
+            }
+            return $out;
+
+        case 'time_prefix':
+            if ( ! $has_time ) return '';
+            $time_from = $this->wp_date_lang( 'H:i', $ts, $tz );
+            $p = $this->format_prefix_output( $prefix );
+            $out = trim( $p . ' ' . $time_from );
+            if ( ! $this->is_en ) {
+                $out .= ' Uhr';
+            }
+            return $out;
+
+        case 'time_range':
+            if ( ! $has_time ) return '';
+            $time_from = $this->wp_date_lang( 'H:i', $ts, $tz );
+            if ( $has_time_to ) {
+                $p2 = $this->format_prefix2_output( $prefix2 );
+                return $time_from . ' ' . $p2 . ' ' . $time_to_hm;
+            }
+            return $time_from;
+
+        case 'time_range_long':
+            if ( ! $has_time ) return '';
+            $time_from = $this->wp_date_lang( 'H:i', $ts, $tz );
+            $p = $this->format_prefix_output( $prefix );
+            if ( $has_time_to ) {
+                $p2 = $this->format_prefix2_output( $prefix2 );
+                $out = trim( $p . ' ' . $time_from . ' ' . $p2 . ' ' . $time_to_hm );
+            } else {
+                $out = trim( $p . ' ' . $time_from );
+            }
+            if ( ! $this->is_en ) {
+                $out .= ' Uhr';
+            }
+            return $out;
+
+        // Content columns
+        case 'text':
+            return $text;
+
+        case 'scheduler':
+            return (string) ( $ev['_scheduler_name'] ?? '' );
+
+        default:
+            return '';
+    }
+}
+
+}
+
 new Luzid_Content_Scheduler();

luzid-content-scheduler/trunk/readme.txt

@@ -5 +5 @@
 Tested up to: 6.9
 Requires PHP: 7.4
-Stable tag: 1.2.2
+Stable tag: 1.4.2
 License: GPLv2 or later
 License URI: https://www.gnu.org/licenses/gpl-2.0.html
@@ -17 +17 @@
 This gives you two complementary ways to use a scheduler:
 
-1) **Show / hide a block** (banner, alert, section, popup wrapper, …)  
+1. **Show / hide a block** (banner, alert, section, popup wrapper, …)  
    Add the generated CSS class `luzid-cs-<slug>` to the element. The plugin adds body classes and a tiny frontend helper so the block is only displayed while the schedule is active.
 
-2) **Display dates in the frontend**  
+2. **Display dates in the frontend**  
    Use the shortcode to print the next event (or a list of upcoming events) anywhere in your content.
 
-Typical use cases:
-
-* **Visibility scheduling**: show a maintenance banner only during a defined window, or show a seasonal notice with exceptions.
-* **Event announcements**: print "Next event: …" on a page, including weekday + time.
-* **Lists of upcoming dates**: output the next N dates of a program/club/course using `list="true"` + `count="N"`.
-
-Core concepts:
+= Typical Use Cases =
+
+* **Maintenance banners**: Show a "We're updating our systems" notice only during scheduled maintenance windows.
+* **Seasonal content**: Display holiday greetings, special offers, or seasonal menus during specific date ranges.
+* **Event announcements**: Print "Next event: Saturday, March 15th at 7 PM" dynamically on any page.
+* **Recurring schedules**: Show "Happy Hour specials" every Friday from 5 PM to 8 PM.
+* **Multi-stage visibility**: Use Event Classes to show a popup 4 days before an event, the full content 2 weeks before, and a menu item 11 days before — all independently controlled.
+* **Event calendars**: Generate a table of all upcoming events across multiple schedulers.
+
+= Core Concepts =
 
 * A scheduler becomes **active** when **at least one** rule matches (single dates/ranges *or* recurring rules).
 * **Exceptions override everything**: if "now" is inside an exception range, the block is hidden even if other rules match.
-* **Event offset** can shift the *visibility window* relative to the next computed event (e.g. show the block 4 days before the event, starting at a chosen time).
-* The shortcode reads the same event logic and can output:
-  * `opt="long"` (default): weekday + date + time (e.g. "Mittwoch, 25.03.2026 ab 09:00 Uhr")
-  * `opt="short"`: date only (e.g. "25.03.2026")
-  * `opt="date"`: weekday + date (no time)
-  * `opt="time"`: time only
-  * `list="true"` + `count="N"`: outputs the next N events (one per line, separated by `<br />`)
-  * `text="true"` optionally appends the event text (from the new "Event text (optional)" fields)
-  * `sep="…"` sets the separator between opt output and event text (use `sep="<br>"` for a line break)
-* `timeoffset` (minutes, can be negative) shifts the **printed time** without changing the schedule itself (useful for timezone-like adjustments or "doors open 30 min earlier").
-* Optional `lang="de|en"` forces the output language for the shortcode (empty = current UI language).
+* **Event Classes** (new in 1.4) allow multiple independent visibility windows with different offsets — each generating its own CSS class.
+* The shortcode reads the same event logic and outputs formatted dates with full control over separators and formatting.
 
 == Features ==
 
-* **Setup**: Name → automatic slug + CSS class.
-* **Single dates / date ranges ("Termine")**
-  * From/To fields
-  * Optional time + prefix `ab` / `bis` / `um`
-* **Recurring rules ("Wiederholungen")**
-  * Weekly (weekday)
-  * Monthly (day of month)
-  * Weekday in month (e.g. 2nd Thursday)
-  * Each recurring rule can have its own valid-from/to range
-* **Exceptions ("Ausnahmen")**
-  * Date or date range
-  * Overrides all other rules
-* **Event offset**
-  * Show the block X days before the computed event (from a fixed start time)
-  * Hide the block X days after the computed event (to a fixed end time)
-* **Preview tab**: generate a table of upcoming events including show time and shortcode output.
-* **Shortcode**
-  * Base output: `[luzid_cs slug="my-scheduler" opt="short|date|time|long"]`
-  * List output: add `list="true"` + `count="N"` (N > 0) to output the next N events (one per line, separated by `<br>`).
-  * Optional event text: add `text="true"` to append the event's **optional Event text**. Use `sep=" | "` to define the separator between date/time and text.
-  * Optional `timeoffset` (minutes; can be negative) to shift the output time.
-* **Languages**: German + English UI (flag switcher in the header).
+= Scheduling =
+
+* **Single dates & date ranges**: Define specific days or periods when content should be visible.
+* **Recurring rules**: Weekly (every Monday), Monthly (every 15th), Weekday in month (2nd Thursday), Yearly (February 14th).
+* **Exceptions**: Override all rules — content stays hidden during exception periods.
+* **Event Classes**: Create multiple CSS classes per scheduler, each with independent visibility offsets.
+
+= Shortcode Output =
+
+* **Flexible date/time formatting**: Choose from short, medium, long, or full date formats.
+* **Separators**: Control exactly what appears between date, time, and text parts.
+* **Lists**: Output multiple upcoming events with customizable separators.
+* **Event Table**: Generate a sortable table of all upcoming events from multiple schedulers.
+* **Time offset**: Shift the displayed time (e.g., "doors open 30 minutes before").
+
+= Administration =
+
+* **Card-based UI**: Clean, modern interface for managing rules.
+* **Live preview**: See upcoming events and visibility windows instantly.
+* **Bilingual**: Full German and English support with one-click language switching.
 
 == Installation ==
 
-1. Upload the plugin folder to `/wp-content/plugins/` or install it via the WordPress Plugins screen.
+1. Upload the plugin folder to `/wp-content/plugins/` or install via the WordPress Plugins screen.
 2. Activate **Luzid Content Scheduler**.
 3. Go to **WP Admin → Luzid Content Scheduler**.
@@ -80 +72 @@
 == Usage ==
 
-= Add the CSS class to your block =
-
-* **Gutenberg**: select block → "Advanced" → "Additional CSS class(es)" → `luzid-cs-<slug>`
-* **Elementor**: widget → "Advanced" → "CSS Classes" → `luzid-cs-<slug>`
-* **Divi/others**: module settings → "CSS Class" → `luzid-cs-<slug>`
-
-= Shortcode output =
-
-Examples:
-
-* Long (default): `[luzid_cs slug="wartung" opt="long"]`
-* Date only: `[luzid_cs slug="wartung" opt="date"]`
-* Time only: `[luzid_cs slug="wartung" opt="time"]`
-* List (next 7): `[luzid_cs slug="wartung" opt="short" list="true" count="7"]`
-* List + event text: `[luzid_cs slug="krimidinner" opt="short" list="true" count="5" text="true" sep=" | "]`
-* Event text on new line: `[luzid_cs slug="krimidinner" opt="date" text="true" sep="<br>"]`
-
-CSS hooks (no default styling – add your own CSS if you want):
-
-* `.luzid-cs` (wrapper, plus `.luzid-cs--single` / `.luzid-cs--list`)
-* `.luzid-cs-item` (one event in list output)
-* `.luzid-cs-opt` (date/time part)
-* `.luzid-cs-sep` (separator)
-* `.luzid-cs-text` (optional event text)
+= Adding CSS Classes to Blocks =
+
+* **Gutenberg**: Select block → "Advanced" → "Additional CSS class(es)" → `luzid-cs-<slug>`
+* **Elementor**: Widget → "Advanced" → "CSS Classes" → `luzid-cs-<slug>`
+* **Divi/others**: Module settings → "CSS Class" → `luzid-cs-<slug>`
+
+= Basic Shortcode =
+
+`[luzid_cs slug="your-scheduler"]`
+
+Outputs: The next event date in the default format.
+
+= Shortcode Parameters =
+
+| Parameter | Default | Description |
+|-----------|---------|-------------|
+| `slug` | (required) | Scheduler slug |
+| `date` | (empty) | Date format: `short`, `medium`, `long`, `full` |
+| `time` | (empty) | Time format: `auto`, `raw`, `prefix`, `range`, `range_long` |
+| `list` | `false` | Output as list: `true` or `false` |
+| `count` | `10` | Number of events for lists (max 200) |
+| `text` | `false` | Include event text: `true` or `false` |
+| `sep1` | (space) | Separator between date and time |
+| `sep2` | (space) | Separator between time and text |
+| `sep3` | (empty) | Separator between list items |
+| `timeoffset` | `0` | Time offset in minutes (can be negative) |
+| `lang` | (current) | Force language: `de` or `en` |
+
+= Date Formats =
+
+| Value | Output Example |
+|-------|----------------|
+| `short` | 14.02.2026 |
+| `medium` | Sat, 14.02.2026 |
+| `long` | Saturday, 14.02.2026 |
+| `full` | Saturday, 14 February 2026 |
+
+= Time Formats =
+
+| Value | Output Example |
+|-------|----------------|
+| (empty) | No time output |
+| `raw` | 18:00 |
+| `prefix` | from 18:00 |
+| `range` | 18:00 to 20:00 |
+| `range_long` | from 18:00 to 20:00 |
+| `auto` | Intelligent format based on data |
+
+= Shortcode Examples =
+
+**Simple date output:**
+`[luzid_cs slug="maintenance" date="long"]`
+→ Saturday, 15.03.2026
+
+**Date with time:**
+`[luzid_cs slug="event" date="long" time="auto"]`
+→ Saturday, 15.03.2026 from 18:00 to 20:00
+
+**Only time output:**
+`[luzid_cs slug="event" time="raw"]`
+→ 18:00
+
+**Multi-line output:**
+`[luzid_cs slug="event" date="long" time="auto" text="true" sep1="<br>" sep2="<br>"]`
+→ Saturday, 15.03.2026
+   from 18:00 to 20:00
+   Valentine's Dinner
+
+**List of next 5 events:**
+`[luzid_cs slug="concert" date="long" text="true" list="true" count="5" sep2="<br>" sep3="<br><br>"]`
+
+**With custom separators:**
+`[luzid_cs slug="event" date="long" time="raw" text="true" sep1=" | " sep2=" – "]`
+→ Saturday, 15.03.2026 | 18:00 – Valentine's Dinner
+
+= Event Table Shortcode =
+
+`[luzid_cs_eventtable]`
+
+Outputs a table of all upcoming events from schedulers with "Include in Event Table" enabled.
+
+| Parameter | Default | Description |
+|-----------|---------|-------------|
+| `cols` | `date_medium,time_auto,text` | Columns (comma-separated) |
+| `count` | `30` | Maximum number of events |
+| `headers` | (automatic) | Custom column headers |
+| `noheaders` | `false` | Hide table headers |
+| `class` | (empty) | Additional CSS class |
+| `empty` | "No events" | Text when no events found |
+| `order` | `asc` | Sort order: `asc` or `desc` |
+
+**Available columns:**
+`date_short`, `date_medium`, `date_long`, `date_full`, `weekday_short`, `weekday_long`, `time_raw`, `time_auto`, `time_prefix`, `time_range`, `time_range_long`, `text`, `scheduler`
+
+**Example with custom columns:**
+`[luzid_cs_eventtable cols="weekday_short,date_short,time_range,text" count="10" headers="Day,Date,Time,Event"]`
+
+= Event Classes (New in 1.4) =
+
+Event Classes allow you to create multiple independent visibility windows for a single scheduler. Each class has its own CSS class and offset settings.
+
+**Example setup:**
+
+| Class | CSS Class | Days Before | Use Case |
+|-------|-----------|-------------|----------|
+| Standard | `.luzid-cs-dinner` | 14 | Main content |
+| popup | `.luzid-cs-dinner-popup` | 4 | Announcement popup |
+| menu | `.luzid-cs-dinner-menu` | 11 | Navigation menu item |
+
+This allows you to control when different elements appear, all based on the same event schedule.
+
+= CSS Hooks =
+
+**Shortcode output:**
+* `.luzid-cs` — Wrapper (plus `.luzid-cs--single` / `.luzid-cs--list`)
+* `.luzid-cs-item` — Single event in list
+* `.luzid-cs-date` — Date part
+* `.luzid-cs-time` — Time part
+* `.luzid-cs-text` — Event text
+* `.luzid-cs-sep` / `.luzid-cs-sep1` / `.luzid-cs-sep2` — Separators
+
+**Event table:**
+* `.luzid-cs-eventtable` — Table wrapper
+* `.luzid-cs-eventtable__head` / `__body` / `__row` / `__cell`
+
+**Body classes (for conditional CSS):**
+* `.luzid-cs-active-<slug>` — Added when scheduler is active
+* `.luzid-cs-active-<slug>-<classname>` — Added when specific event class is active
 
 == Frequently Asked Questions ==
@@ -115 +211 @@
 Exceptions affect **everything** (frontend visibility, next event calculation, and preview). If "now" is inside an exception range, the block stays hidden.
 
+= What's the difference between Event Offset (old) and Event Classes (new)? =
+
+Event Classes replaced the old Event Offset feature in version 1.4. The key difference: you can now create **multiple classes** with independent offsets, allowing different content to appear at different times before/after an event.
+
+= Can I use multiple Event Classes for one block? =
+
+Each Event Class generates a separate CSS class. You can only apply one class per block, but you can have multiple blocks, each with a different Event Class.
+
 = Does the plugin require a specific theme? =
 
 No. It works with any theme/page builder that lets you set a custom CSS class on a block/element.
 
+= Can I output only the time without the date? =
+
+Yes! Use `[luzid_cs slug="your-slug" time="raw"]` to output only the time. Leave out the `date` parameter.
+
+= How do I create a line break between date and text? =
+
+Use `sep2="<br>"`: `[luzid_cs slug="event" date="long" text="true" sep2="<br>"]`
+
 == Screenshots ==
 
-1. Setup tab: create a scheduler and copy the CSS class / shortcode.
-2. Add single dates or date ranges.
-3. Recurring rules with weekday/month options.
-4. Exceptions override all other rules.
-5. Preview of upcoming events.
+1. Setup tab: Create a scheduler and copy the CSS class / shortcode.
+2. Dates tab: Add single dates or date ranges with times and event text.
+3. Recurring tab: Define weekly, monthly, or yearly patterns.
+4. Exceptions tab: Block specific dates from showing content.
+5. Event Classes tab: Create multiple CSS classes with independent visibility windows.
+6. Preview tab: See all upcoming events at a glance.
 
 == License ==
@@ -134 +247 @@
 
 Assets:
-
-* Luzid Logo and Flag icons are SVG assets shipped with the plugin (assets/img/luzid-media-logo-plugins.svg | assets/img/ger.svg | assets/img/uk.svg).
+* Luzid Logo and Flag icons are SVG assets shipped with the plugin (assets/img/).
 
 == Changelog ==
 
-= 1.2.2 =
-* Initial WordPress.org release.
-* Shortcode: `[luzid_cs slug="..." opt="long"]`
-* CSS class: `luzid-cs-<slug>`
-* Body class: `luzid-cs-active-<slug>`
-* Full WordPress coding standards compliance.
+= 1.4.2 =
+* Fixed: Version number display in admin header.
+* Improved: Event Classes UI with copy button for CSS classes and consistent icon styling.
+
+= 1.4.1 =
+* Fixed: WordPress Plugin Check escaping warnings for Event Classes panel.
+
+= 1.4.0 =
+* **New: Event Classes** — Replace single Event Offset with unlimited named classes, each with independent visibility offsets.
+* New: Each Event Class generates its own CSS class (`luzid-cs-<slug>-<classname>`).
+* New: Live preview of visibility windows per class.
+* New: Standard class (non-deletable) maintains backward compatibility.
+* Changed: Tab renamed from "Event-Offset" to "Event-Klassen".
+* Improved: Card-based UI consistent with other tabs.
+* Migration: Existing Event Offset settings are automatically converted to the new Event Classes structure.
+
+= 1.3.12 =
+* Fixed: Shortcode now outputs exactly what is specified — no hidden defaults.
+* Fixed: `date` parameter defaults to empty (not "long"). Only when neither `date` nor `time` is set, `date="long"` is used as fallback.
+* Fixed: Using only `time="raw"` now correctly outputs only the time, not date + time.
+
+= 1.3.11 =
+* Fixed: Auto-padding removed from separators. `&nbsp;` now outputs exactly one non-breaking space.
+
+= 1.3.10 =
+* Fixed: Single space separator handling — WordPress trims `sep1=" "`, now uses default fallback.
+
+= 1.3.9 =
+* **New: Separator system refactored** — `sep` replaced by `sep1`, `sep2`, `sep3` for precise control.
+* New: `sep1` controls separator between date and time.
+* New: `sep2` controls separator between time and text (or date and text if no time).
+* New: `sep3` controls separator between list items.
+* Changed: `time` parameter now defaults to empty (no time output unless explicitly requested).
+* Breaking: Old `sep` parameter removed. Use `sep1`/`sep2`/`sep3` instead.
+
+= 1.3.8 =
+* Fixed: Preview table now shows actual saved event text per date.
+
+= 1.3.7 =
+* Fixed: Yearly recurrence calculation for events spanning year boundaries.
+
+= 1.3.6 =
+* New: `[luzid_cs_eventtable]` shortcode for tabular event output.
+* New: "Include in Event Table" checkbox per scheduler.
+* New: Customizable columns, headers, and sorting for event tables.
+
+= 1.3.5 =
+* Improved: Card-based layout unified across all tabs.
+
+= 1.3.4 =
+* New: Dual-prefix system for Termine tab (CSS class prefix options).
+
+= 1.3.0 =
+* New: "Time to" field for time ranges (e.g., 18:00 – 20:00) in single dates and recurring rules.
+* New: Yearly recurring rule type (e.g., every February 14th at 16:00).
+* New: Card-based layout for Termine and Wiederholungen tabs.
+* Changed: Shortcode renamed from `[lz-cs]` to `[luzid_cs]` for WordPress.org compliance.
+* Changed: CSS classes renamed from `lz-cs-*` to `luzid-cs-*`.
+
+= 1.2.9 =
+* Changed: List wrapper from `<span>` to `<div>` for better HTML structure.
+
+= 1.2.7 =
+* Fix: Prevent "phantom" events from incomplete recurring rules.
+* New: Preview table shows event source (Single vs Recurring).
+
+= 1.2.6 =
+* New: Shortcode output wrapped in styled span classes.
+* Improved: `sep` parameter can output `<br>` for line breaks.
+
+= 1.2.5 =
+* Fix: Separator spacing preserved correctly.
+* Improvement: Single dates sorted chronologically.
+* New: Optional event text for recurring rules.
+
+= 1.2.3 =
+* Added: Optional event text field for single dates.
+* Changed: Shortcode supports `list`, `count`, `text` and `sep` parameters.
+
+= 1.2.0 =
+* Initial release.