/* ===========================================================================
   HdKD — Bausteine aus den Schreibfeldern (v6.49.0)
   ---------------------------------------------------------------------------
   Seit v6.49.0 koennen Beschreibungstexte Tabellen enthalten (Werkzeugleiste
   im Event- und Organisations-Editor). Eine Tabelle ohne Regeln erscheint als
   nackte Zeilenfolge ohne Linien — und auf dem Handy schiebt sie das ganze
   Layout zur Seite. Diese Datei haelt beides in Ordnung.

   Sie liegt bewusst getrennt und wird ueberall dort eingebunden, wo
   Beschreibungs-HTML sichtbar wird:
     · Buero        — Live-Vorschau + Umfeld der Editoren (hdkd-events-complete.php)
     · Portal       — Event-Ansicht und Vereinsprofil (portal-render.php)
     · Oeffentlich  — Veranstaltungs-Detailseite (frontend-4dd/event-single.php)

   Der Editor selbst traegt dieselben Regeln als `content_style`
   (assets/js/rich-editor.js) — beim Schreiben sieht die Tabelle also schon so
   aus wie spaeter oeffentlich. Beide Stellen bitte gemeinsam pflegen.
   =========================================================================== */

/* Tabellen aus der Werkzeugleiste tragen immer diese Klasse
   (table_default_attributes in rich-editor.js). Alles wird ueber die Klasse
   gesteuert und nicht ueber Stilangaben im HTML — so kann wp_kses_post beim
   Speichern nichts wegfiltern, und eine Aenderung hier wirkt rueckwirkend auf
   alle bereits geschriebenen Texte. */
.hdkd-tabelle {
    border-collapse: collapse;
    width: 100%;
    margin: 0 0 14px;
    font-size: .95em;
}

.hdkd-tabelle th,
.hdkd-tabelle td {
    border: 1px solid var(--hdkd-line-strong,#d8dde3);
    padding: 7px 10px;
    text-align: left;
    vertical-align: top;
}

.hdkd-tabelle th {
    background: var(--hdkd-surface-2,#f4f6f8);
    font-weight: 600;
}

.hdkd-tabelle caption {
    caption-side: top;
    text-align: left;
    font-weight: 600;
    padding: 0 0 6px;
}

/* Schmale Schirme: die Tabelle wird zum scrollbaren Block, statt die Seite
   breiter zu machen. Auf dem Telefon schiebt eine 5-spaltige Programmtabelle
   sonst den gesamten Text nach rechts aus dem Bild. */
@media (max-width: 640px) {
    .hdkd-tabelle {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Bilder aus der Mediathek: in unseren eigenen Textcontainern begrenzen.
   Auf der oeffentlichen Detailseite erledigt das bereits das Theme. */
.p-prose img,
.hjm-bpv-article img {
    max-width: 100%;
    height: auto;
}