:root{
--ink: #262626;
--ink-muted: #5f5f5f;
--accent: #ee7202; /* Website-Akzent, fuer Links im Fliesstext */
--lila: #392144; /* Lila aus dem Header der Website */
--lila-dunkel: #55336a; /* Hover, heller, weil das Lila schon sehr dunkel ist */
--bg-seite: #ffffff;
--bg-karte: #ffffff;
--font: 'Arial', Helvetica, Arial, Lucida, sans-serif;
}
*{ box-sizing:border-box; }
body{
margin:0;
background:var(--bg-seite);
color:var(--ink);
font-family:var(--font);
-webkit-font-smoothing:antialiased;
}
.kgfm-termine-widget{
max-width:none;
width:100%;
margin:0;
text-align:left;
padding:2.5rem 1.25rem 3rem;
}
.kgfm-termine-intro h1{
font-family:var(--font);
font-weight:700;
font-size:clamp(1.5rem, 3vw, 1.9rem);
margin:0 0 0.4rem;
color:var(--ink);
}
.kgfm-termine-intro p{
font-size:0.95rem;
color:var(--ink-muted);
line-height:1.6;
margin:0 0 0.9rem;
}
.kgfm-termine-intro p:last-of-type{
margin-bottom:2.5rem;
}
.kgfm-termine-intro a{
color:var(--accent);
}
.termine-liste{
display:grid;
grid-template-columns:repeat(2, 1fr);
gap:2.25rem 1.75rem;
}
.termin-karte-wrapper{
position:relative;
}
.termin-datum-badge{
position:absolute;
top:-1.5rem;
left:-0.6rem;
z-index:2;
background:var(--lila);
color:#ffffff;
border-radius:0;
padding:0.5rem 0.9rem 0.55rem;
text-align:center;
box-shadow:0 6px 14px rgba(57,33,68,0.3);
}
.termin-datum-badge .tag{
display:block;
font-family:var(--font);
font-weight:700;
font-size:1.5rem;
line-height:1;
}
.termin-datum-badge .monat{
display:block;
font-family:var(--font);
font-weight:700;
font-size:0.68rem;
letter-spacing:0.03em;
margin-top:0.2rem;
}
.termin-karte{
display:block;
background:var(--bg-karte);
border-radius:0;
padding:2.75rem 1.6rem 1.6rem 2rem;
text-decoration:none;
color:inherit;
box-shadow:0 1px 3px rgba(0,0,0,.07), 0 8px 20px rgba(0,0,0,.05);
transition:box-shadow 0.2s ease, transform 0.2s ease;
}
.termin-karte:hover,
.termin-karte:focus-visible{
box-shadow:0 2px 6px rgba(0,0,0,.08), 0 14px 26px rgba(0,0,0,.09);
transform:translateY(-2px);
}
.termin-karte:focus-visible{
outline:2px solid var(--lila);
outline-offset:2px;
}
.termin-inhalt .mit{
font-size:1.05rem;
font-weight:700;
line-height:1.4;
color:var(--ink);
margin:0 0 0.4rem;
}
.termin-inhalt .wann-wo{
font-size:0.85rem;
color:var(--ink-muted);
margin:0 0 0.6rem;
}
.termin-inhalt h2{
font-family:var(--font);
font-weight:700;
font-size:1.2rem;
line-height:1.35;
margin:0 0 0.2rem;
color:var(--ink);
}
.termin-inhalt .untertitel{
font-size:0.95rem;
color:var(--ink-muted);
margin:0;
line-height:1.5;
}
.termin-button{
display:inline-block;
margin-top:1.2rem;
background:var(--lila);
color:#ffffff;
font-family:var(--font);
font-weight:700;
font-size:0.85rem;
border-radius:0;
padding:0.7em 1.6em;
box-shadow:0 4px 10px rgba(57,33,68,.25);
transition:background-color 0.2s ease;
}
.termin-karte:hover .termin-button,
.termin-karte:focus-visible .termin-button{
background:var(--lila-dunkel);
}
.termine-leer,
.termine-laden{
padding:2rem 0;
color:var(--ink-muted);
font-size:0.95rem;
}
@media (max-width:680px){
.termine-liste{ grid-template-columns:1fr; }
}
@media (max-width:480px){
.termin-karte{ padding:2.3rem 1.25rem 1.4rem 1.75rem; }
.termin-datum-badge{ top:-1.3rem; left:-0.4rem; padding:0.45rem 0.75rem 0.5rem; }
.termin-datum-badge .tag{ font-size:1.3rem; }
}
Hier finden Sie eine Übersicht unseres digitalen Fortbildungsangebots. Unsere Webinare richten sich an Fachkräfte aus dem Bereich Gewaltschutz und -prävention, an pädagogisches Personal und alle Interessierten. Die Teilnahme ist kostenfrei. Unter „Mehr zum Termin" erhalten Sie weitere Informationen und Details zum jeweiligen Webinar.
Zu den Sitzungsterminen des Runden Tisches gegen Gewalt an Frauen geht es hier.
Aktuell sind keine Termine geplant. Schauen Sie gerne später wieder vorbei.
// ============================================================
// Datenquelle: die Beiträge selbst, über die WordPress-eigene
// REST-API. Jeder Termin-Beitrag traegt Start und (optional) Ende
// als ACF Date-Time-Felder, plus Ort/Mit/Untertitel, gepflegt
// direkt im Beitrags-Editor. Keine separate CSV-Datei noetig.
//
// Erwartete ACF-Feldnamen (Feldgruppe "Termin-Details"):
// termin_start (Date Time Picker, Pflicht, Rueckgabeformat Y-m-d H:i:s)
// termin_ende (Date Time Picker, optional, gleiches Format,
// fuer Uhrzeit-Ende am selben Tag oder ein anderes Enddatum)
// termin_ort, referent_in, termin_untertitel (Text, optional)
// "Show in REST API" muss fuer die Feldgruppe aktiviert sein.
//
// Nur Beitraege, bei denen termin_start tatsaechlich ausgefuellt
// ist, werden als Termin gewertet.
const API_URL = "https://gewaltschutz-kreis-re.de/wp-json/wp/v2/posts?per_page=100";
const MONATE = ["Jan", "Feb", "März", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dez"];
function dekodiereHtml(text){
const el = document.createElement("textarea");
el.innerHTML = text;
return el.value;
}
// Erwartet "Y-m-d H:i:s" oder "Y-m-d H:i" aus ACF, liefert ein Date-Objekt.
function parseDatumZeit(text){
if (!text) return null;
const [datumTeil, zeitTeil] = text.trim().split(" ");
if (!datumTeil) return null;
const [jahr, monat, tag] = datumTeil.split("-").map(Number);
let stunde = 0, minute = 0;
if (zeitTeil){
const teile = zeitTeil.split(":").map(Number);
stunde = teile[0] || 0;
minute = teile[1] || 0;
}
return new Date(jahr, monat - 1, tag, stunde, minute);
}
function formatDatumLang(d){
return String(d.getDate()).padStart(2, "0") + "." + String(d.getMonth() + 1).padStart(2, "0") + "." + d.getFullYear();
}
function formatUhrzeit(d){
return String(d.getHours()).padStart(2, "0") + ":" + String(d.getMinutes()).padStart(2, "0");
}
function istGleicherTag(a, b){
return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
}
function formatiereZeitraum(start, ende){
if (!ende){
return formatDatumLang(start) + ", " + formatUhrzeit(start) + " Uhr";
}
if (istGleicherTag(start, ende)){
return formatDatumLang(start) + ", " + formatUhrzeit(start) + " bis " + formatUhrzeit(ende) + " Uhr";
}
return formatDatumLang(start) + " " + formatUhrzeit(start) + " Uhr bis " + formatDatumLang(ende) + " " + formatUhrzeit(ende) + " Uhr";
}
function endeDesTages(d){
const kopie = new Date(d);
kopie.setHours(23, 59, 59, 999);
return kopie;
}
function istVorbei(termin){
const stichtag = termin.ende || endeDesTages(termin.start);
return stichtag < new Date();
}
function beitraegeZuTerminen(beitraege){
return beitraege
.map(beitrag => {
const acf = beitrag.acf || {};
return {
titel: dekodiereHtml((beitrag.title && beitrag.title.rendered) || ""),
untertitel: acf.termin_untertitel || "",
start: parseDatumZeit(acf.termin_start || ""),
ende: parseDatumZeit(acf.termin_ende || ""),
ort: acf.termin_ort || "",
mit: acf.referent_in || "",
link: beitrag.link || ""
};
})
// Nur Beitraege mit gueltigem Start-Zeitpunkt werden als Termin gewertet.
.filter(t => t.titel && t.start && t.link);
}
function render(termine){
const liste = document.getElementById("termineListe");
const leerHinweis = document.getElementById("termineLeer");
const kommendeTermine = termine
.filter(t => !istVorbei(t))
.sort((a, b) => a.start - b.start);
if (kommendeTermine.length === 0){
liste.hidden = true;
leerHinweis.hidden = false;
leerHinweis.textContent = "Aktuell sind keine Termine geplant. Schauen Sie gerne später wieder vorbei.";
return;
}
liste.hidden = false;
leerHinweis.hidden = true;
liste.innerHTML = "";
kommendeTermine.forEach(termin => {
const wrapper = document.createElement("div");
wrapper.className = "termin-karte-wrapper";
wrapper.innerHTML = `
${String(termin.start.getDate()).padStart(2, "0")}
${MONATE[termin.start.getMonth()]}
${termin.mit ? `
`;
liste.appendChild(wrapper);
});
}
async function ladeUndRendere(){
const liste = document.getElementById("termineListe");
const leerHinweis = document.getElementById("termineLeer");
liste.hidden = false;
leerHinweis.hidden = true;
liste.innerHTML = 'mit ${termin.mit}
` : ""}${formatiereZeitraum(termin.start, termin.ende)}${termin.ort ? ", " + termin.ort : ""}
${termin.titel}
${termin.untertitel ? `${termin.untertitel}
` : ""}Termine werden geladen …
'; try { const trenner = API_URL.indexOf("?") === -1 ? "?" : "&"; const antwort = await fetch(API_URL + trenner + "_=" + Date.now()); if (!antwort.ok) throw new Error("HTTP " + antwort.status); const beitraege = await antwort.json(); const termine = beitraegeZuTerminen(beitraege); render(termine); } catch (fehler){ console.error("Termine konnten nicht geladen werden:", fehler); liste.hidden = true; leerHinweis.hidden = false; leerHinweis.textContent = "Die Termine konnten gerade nicht geladen werden. Bitte laden Sie die Seite neu oder versuchen Sie es später erneut."; } } ladeUndRendere();Anmeldung und Kontakt
Sie wollen an einem unserer Webinare teilnehmen? Die Anmeldung läuft über dieses Anmeldeformular.
Bitte beachten Sie den Anmeldestart. Genaue Infos finden Sie jeweils unter dem Termin.
Noch Fragen?
Anmeldeformular
Nähere Informationen zur Verarbeitung personenbezogener Daten finden Sie in unserer Datenschutzerklärung.