Startseite Homepage kirche-waldbach.de 2015

Alles neu im Netz: Unsere Homepage zieht um!

Erinnern Sie sich noch an den ersten digitalen Fußabdruck unserer Kirchengemeinde Waldbach? Anfang 2013 fiel der Startschuss: Wir wollten einen modernen, lebendigen Internetauftritt gestalten. Da die Standard-Baukästen der Landeskirche damals noch sehr eingeschränkt waren, haben wir selbst Initiative ergriffen. Inspiriert von internationalen Großprojekten haben wir ein maßgeschneidertes System entwickelt. Bereits 2015 wuchs unsere Seite auf über 200 Einzelseiten an – eine Größe, die eine ganz besondere, professionelle Menüführung brauchte.

Jetzt gehen wir den nächsten großen Schritt. Um Ihnen technisch, optisch und beim Datenschutz immer die beste Qualität zu bieten, ziehen wir in den neuen, modernen Gemeindebaukasten der Landeskirche um. Freuen Sie sich auf ein frisches Design und eine gewohnt einfache Orientierung!

Unsere digitale Reise: Wie aus Meilensteinen „Gemeinsam Gemeinde“ wurde

Bleiben wir noch ein wenig bei der Geschichte unseres Internetauftritts. Auch wenn die Jahreslosung 2026 lautet: „Gott spricht: Siehe, ich mache alles neu!“, wollen wir das Erreichte nicht vergessen. Wir blicken mit Stolz auf die Meilensteine zurück, die uns zu dem gemacht haben, was wir heute sind.

2018 – Der Startschuss: Wir spendierten der Waldbacher Homepage im Bereich „Aktuelles“ das Content-Management-System CMS-Made Simple. Damit konnte das Pfarrbüro Termine endlich flexibel und zeitnah selbst einpflegen.
2019 – Mehr Durchblick: Ein kostenloser Webkalender wurde integriert, um anstehende Veranstaltungen übersichtlich darzustellen – lange bevor Plattformen wie Amosweb überhaupt auf den Markt kamen.
2020 – Der Impuls zur Gemeinschaft: Als Agnes von Tils als Jugendreferentin für alle Gemeinden nach Adolzfurt kam, wollte sie ihre Inhalte selbst ins Netz bringen. Das war der Startschuss für etwas Großes! Adolzfurt verließ den Internetauftritt von Öhringen, Unterheimbach ging ganz neu online, und gemeinsam legten wir den Grundstein für unsere gemeinsame Plattform: Gemeinsam-Gemeinde.de.

Flexibel in der Krise: Digitale Pionierarbeit während Corona

Erinnern Sie sich noch an die Zeit der Lockdowns und Abstandsregeln? Als Gottesdienste im Jahr 2020 unter strengen Auflagen wieder erlaubt wurden, standen wir vor einer riesigen Herausforderung: Sitzplätze in der Kirche mussten wie im Kino im Voraus gebucht werden.

Doch wie setzt man das um? Wir fackelten nicht lange und suchten nach professioneller Buchungssoftware. Als eine der allerersten Kirchengemeinden überhaupt konnten wir dank Church Seat von Gordon Fornacon ein digitales Sitzplatz-Buchungssystem anbieten. So blieb unsere Gemeinde auch in Distanz sicher verbunden.

Unser digitaler Kirchenschatz: Bilder, die Geschichte schreiben

Ein Thema, das uns vom allerersten Tag unserer allerersten Homepage kirche-waldbach.de an intensiv begleitet hat, ist der Umgang mit unseren Bildern. Fotos von Gottesdiensten, Festen, Gruppen und Veranstaltungen sind schließlich weit mehr als nur reine Erinnerungen – sie sind lebendige Identität und das Herzstück unserer Kirchengemeinden. Manchmal fragen wir uns wehmütig, wie wohl eine Konfirmation oder ein Kirchenfest bei uns im vorletzten Jahrhundert aussah. Wie spannend wäre es, davon heute digitale Schnappschüsse zu haben!

Umso stolzer sind wir auf unseren modernen, digitalen Kirchenschatz:

Der Grundstein (2014): Weil wir damals nicht an den klassischen Gemeindebaukasten gebunden waren, konnten wir die Galeriesoftware Gallery3 installieren. Stolze 3.000 Bilder wanderten so in unsere erste Online-Datenbank.
Das Wachstum: Mit dem Zusammenschluss unserer Gemeinden wuchs auch das Fotoarchiv. Nach dem Umzug auf die leistungsstarke Piwigo-Plattform zählen wir heute sage und schreibe 6.870 Bilder, die alle online frei einsehbar sind.

Der Blick nach vorn:

Mit unserem anstehenden Wechsel in den offiziellen Gemeindebaukasten stehen wir nun vor einer spannenden Aufgabe: Wo bringen wir diesen riesigen Schatz in Zukunft unter? Da leider keine andere Möglichkeit besteht, wird unsere Bildergalerie künftig in einem zweiten Hostingvertrag unter https://gemeinde-gemeinsam.de betrieben oder erreichbar sein.

Die Testphase: Zwischen Pragmatismus und Designpreis

Momentan fühlen wir dem neuen Gemeindebaukasten in einer Testversion gründlich auf den Zahn, um das „Look and Feel“ auszuprobieren. Machen wir uns nichts vor: Es ist ein schlankes, bewusst reduziertes System. Als semiprofessioneller Webentwickler stößt man da schnell an kreative Grenzen. Aber man muss auch neidlos anerkennen: Dieses System ist dafür gemacht, dass Pfarrbüros und Seelsorger es im oft stressigen Alltag ohne IT-Studium fehlerfrei bedienen können. Und wer weiß – wenn wir nicht gerade den Design- und Webprojektpreis 2027 anstreben (was wir natürlich heimlich tun, um die Konkurrenz klein zu halten), reicht ein solides Fundament völlig aus.

Unsere Kernkompetenz: Performance schlägt Design

Über Design lässt sich bekanntlich streiten, über Ladegeschwindigkeit nicht. Deshalb lautet unser oberstes, unumstößliches Ziel: Unser neuer Internetauftritt muss pfeilschnell bleiben! Gerade für die vielen Nutzer, die uns von unterwegs auf dem Smartphone besuchen, optimieren wir jede Ladezeit. Dabei hilft uns unser digitaler Schatz: Die Bilder aus der Piwigo-Datenbank werden exakt in der Größe serviert, die das Netz braucht. Denn am Ende des Tages gilt: Performance ist durch nichts zu ersetzen – außer durch noch bessere Performance.

Standards? Nicht mit uns!

Mit dem reinen Standard geben wir uns wie gewohnt nicht zufrieden. Wir lieben das Besondere: Alleinstellungsmerkmale, clevere Features und eine intuitive Bedienung, die sich an den Wünschen unserer Besucher orientiert. Wir sind Evangelisch und wir folgen den 1o Geboten und dem Weg Luthers, alles zu hinterfragen. Verzicht auf verstaubtes "Kirchen-Deutsch" (Theologen-Jargon). Stattdessen sind barrierefreie Websites, Leichte Sprache, Podcasts, Social-Media-Präsenzen und responsive Designs die moderne Übersetzung von Luthers Bibelarbeit.

Ein echter Quantensprung im neuen System ist schon jetzt spürbar: Der gesamte Inhalt liegt nun in einer einzigen, zentralen Datenbank. Das bedeutet für Sie: Eine blitzschnelle, gezielte Volltextsuche! Und für alle, die es klassisch mögen, wird auch unser bewährtes „A–Z“-Register wieder seinen wohlverdienten Platz finden.

Ein Blick in die Zukunft (Und ein kleiner Appetithappen...)

Es gibt also viel zu tun. Wir packen es an und machen es richtig gut! Und falls wir mal an eine Grenze stoßen, bei der der Gemeindebaukasten streikt? Keine Sorge, wir haben ein Ass im Ärmel. Als moderner Sparringspartner steht uns im Hintergrund Google Gemini als persönlicher digitaler Berater zur Seite, um auch die vertracktesten Web-Knoten elegant zu lösen.

Freuen Sie sich schon jetzt auf das, was kommt: Ein digitaler Treffpunkt, der das Beste aus zwei Welten vereint – die Leichtigkeit der modernen Technik und die tiefe Verbundenheit unserer Gemeinden.

10 Gebote für jeden evangelischen Webentwickler

Repository unserer Anpassungen des Gemeindebaukastens

Startseite: Gerade Ecken, Bild an Menü andocken, Fixed Header überschreiben

Baukasten Standard Bild mit Abstand zum Menü Fixed Header noch Standard

Wird auf der Startseite unter dem Menü ein Bild als Bannerbild eingefügt, wird dieses mit einem Abstand zum Menü dargestellt. Der Fix entfernt den weissen Abstand.
Zudem enthäkt der Fix die Änderung der Eckendarstellung für ausgewählte Inhaltselemente.
Hauptänderung ist das Überschreiben des Fixed Headers mit eigenen Menüpunkten.

Einsatz: Nur auf der Startseite (da sonst auch der Breadcrumb in das Menü verschoben wird)

Entwicklungsstand 01.07.2026

FIX1-Startseite

Fix1

<link rel="preconnect" href="https://googleapis.com">
<link rel="preconnect" href="https://gstatic.com" crossorigin>
<link href="https://googleapis.com/css2?family=Sarabun:ital,wght@0,300;0,400;0,600;0,700;1,400&display=swap" rel="stylesheet">

<style>
/* 1. Schriftart global erzwingen (Größe bleibt im Content auf Standard) */
body, html, p, a, li, span, .ce-bodytext {
font-family: 'Sarabun', sans-serif !important;
}

/* 2. Nur die Schrift im Menü/Header vergrößern */
.navbar,
.navbar-nav,
.nav-link,
.dropdown-item,
#mainnavigation a,
#toolbar-navigation-secton a {
font-family: 'Sarabun', sans-serif !important;
font-size: 20px !important;
line-height: 1.4 !important;
}

/* =========================================================================
DER FINALE 3-PIXEL-KILLER (Bündiges Andocken an das Menü)
========================================================================= */
body,
#page,
.page-wrapper,
.body-bg,
main,
#page-content,
#content,
.wbg-content-wrapper,
.container-main {
padding-top: 0px !important;
margin-top: 0px !important;
}

/* Erhöhter Schubs nach oben, um den letzten Rest-Abstand zu schlucken */
.wbg-content-wrapper,
main,
#page-content {
margin-top: -35px !important;
}

/* Löscht Abstände des ersten Elements und bändigt das erste Bild (inline-gap Fix) */
main .ce-container:first-child,
main > div:first-child,
main > section:first-of-type,
#page-content .ce-row:first-child,
.wbg-content-wrapper > div:first-child,
.frame-default:first-of-type,
.frame:first-of-type {
margin-top: 0px !important;
padding-top: 0px !important;
}

/* Verhindert den automatischen 3px-Browser-Abstand bei Bildern im Hero-Bereich */
.frame:first-of-type img,
.wbg-content-wrapper img:first-of-type,
main img:first-of-type {
display: block !important;
margin-top: 0px !important;
margin-bottom: 0px !important;
}

/* =========================================================================
RADIKALER ECKEN-STOPP (Speziell für das Medienhaus-Framework)
========================================================================= */
*,
.card,
.wbg-card,
.wbg-teaser,
.teaser-tiles,
.teaser-tile,
.teaser-card,
.news-item,
.news-article,
.thumbnail,
.img-thumbnail,
.ce-gallery img,
.img-fluid,
.btn,
.btn-primary,
.btn-secondary,
input,
.form-control,
.well,
.alert {
border-radius: 0px !important;
}
</style>

<template id="gba-custom-toolbar-template">

<li class="icon-home">
<a href="/">Startseite <span class="icon-home"></span></a>
</li>

<li class="icon-phone">
<a href="/ueber-uns/adressen">
Alle Adressen <span class="icon-phone"></span>
</a>
</li>

<li class="icon-phone">
<a href="/gemeindeleben/gemeindebrief">
Gemeindebrief <span class="icon-phone"></span>
</a>
</li>

<li class="icon-images">
<a href="https://gemeinsam-gemeinde.de/piwigo/" target="_blank" rel="noopener" aria-label="Bildergalerie (öffnet in neuem Fenster)">
Bildergalerie <span class="icon-images"></span>
</a>
</li>

<li class="icon-phone">
<a href="/meta/sitemap" >
Inhalt-Sitemap <span class="icon-images"></span>
</a>
</li>

<li class="icon-human">
<a class="accessibility" href="#">Barrierefreiheit <span class="only-desktops">(A)</span> <span class="icon-human"></span></a>
</li>

<li class="icon-magnifier">
<a href="#top-nav-search" class="top-nav-search-trigger">Suche <span class="icon-magnifier"></span></a>
<dialog id="top-nav-search">
<div class="search-wrapper">
<form action="/meta/suche" method="get">
<input aria-label="Nach Stichworten suchen" type="search" class="tx-solr-q js-solr-q form-control" id="s-1" name="tx_solr[q]" value="" />
<button aria-label="Suchergebnisse anzeigen" class="btn btn-primary tx-solr-submit" type="submit">Suchen</button>
</form>
<button class="close-search-dialog" aria-label="Suche schließen" style="margin-top: 10px; cursor: pointer;">Schließen</button>
</div>
</dialog>
</li>
</template>

<script>
document.addEventListener("DOMContentLoaded", function() {
var originalToolbarList = document.querySelector("#toolbar-navigation-secton ul");
var template = document.getElementById("gba-custom-toolbar-template");

if (originalToolbarList && template) {
// 1. SCHRITT: Sichere den funktionierenden Original-Link aus dem TYPO3-Header, BEVOR wir löschen
var originalAccessibilityLink = originalToolbarList.querySelector(".accessibility");

// 2. SCHRITT: Erzeuge eine echte DOM-Kopie aus deinem HTML-Template
var clone = template.content.cloneNode(true);

// 3. SCHRITT: Finde den Platzhalter-Link im Template-Klon
var templateAccessibilityLink = clone.querySelector(".accessibility");

// 4. SCHRITT: Tausche den Dummy gegen das funktionierende Original aus
if (originalAccessibilityLink && templateAccessibilityLink) {
// Behalte den Text und die Icons aus dem Template, übertragen auf das Original
originalAccessibilityLink.innerHTML = templateAccessibilityLink.innerHTML;
// Ersetze den unbrauchbaren Template-Link durch das lebendige TYPO3-Original
templateAccessibilityLink.parentNode.replaceChild(originalAccessibilityLink, templateAccessibilityLink);
}

// 5. SCHRITT: Jetzt die Toolbar leeren und das neu zusammengesetzte Template einfügen
originalToolbarList.innerHTML = "";
originalToolbarList.appendChild(clone);

// --- Logik für das Such-Overlay (Öffnen und Schließen) ---
var searchTrigger = originalToolbarList.querySelector(".top-nav-search-trigger");
var searchDialog = originalToolbarList.querySelector("#top-nav-search");
var searchCloseBtn = originalToolbarList.querySelector(".close-search-dialog");

if (searchTrigger && searchDialog) {
searchTrigger.addEventListener("click", function(e) {
e.preventDefault();
searchDialog.showModal(); // Öffnet die Suche als echtes Overlay
});
}

if (searchCloseBtn && searchDialog) {
searchCloseBtn.addEventListener("click", function(e) {
e.preventDefault();
searchDialog.close(); // Schließt das Suchfeld wieder
});
}
}
});
</script>

Eigener Footer - Design Gemeinsam-Gemeinde

Footer in Gemeinsam-Gemeinde.de

Gestaltung des Footers im Gemeindebaukasten analog unserer Bestandsinternetseite mit neuen social Medialinks und mehreren Logos.
Der Standard-Footer wird dabei unsichtbar geschaltet

Fix 3 - Footer

<link href="https://cloudflare.com" rel="stylesheet">

}

.gemeinsam-footer {
background-color: #591855 !important;
color: #ffffff !important;
padding: 40px 20px 30px;
font-family: sans-serif;
font-size: 14px;
line-height: 1.35 !important;

/* NEU: Aus dem Container ausbrechen für volle Breite */
width: 100vw !important;
position: relative !important;
left: 50% !important;
right: 50% !important;
margin-left: -50vw !important;
margin-right: -50vw !important;
box-sizing: border-box !important;
}
/* 3. Kompaktierung der Textabsätze & FIX für fette Texte */
.gemeinsam-footer p {
margin-top: 0;
margin-bottom: 14px;
}

.gemeinsam-footer strong {
color: #ffffff !important;
}

/* 4. Alle Überschriften im Footer mit Weiss überschreiben */
.gemeinsam-footer h1,
.gemeinsam-footer h2,
.gemeinsam-footer h3,
.gemeinsam-footer h4 {
color: #ffffff !important;
margin-top: 0;
margin-bottom: 12px;
font-weight: bold;
}

.gemeinsam-footer h3 {
font-size: 17px;
border-bottom: 2px solid rgba(255, 255, 255, 0.2);
padding-bottom: 6px;
}

/* Links im Footer */
.gemeinsam-footer a {
color: #ffffff !important;
text-decoration: underline;
}

.gemeinsam-footer a:hover {
color: rgba(255, 255, 255, 0.8) !important;
}

/* Layout-Strukturen (Oberer Bereich) */
.gf-oberer-bereich, .gf-mittlerer-bereich, .gf-unterer-bereich {
max-width: 1200px;
margin: 0 auto 30px;
}

.gf-oberer-bereich {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
}

/* Mittlerer Bereich (Haupt-Zweispalter: 25% / 75%) */
.gf-mittlerer-bereich {
display: grid;
grid-template-columns: 1fr 3fr;
gap: 30px;
border-top: 1px solid rgba(255, 255, 255, 0.2);
padding-top: 20px;
}

/* Design für Social-Media-Kacheln */
.gf-social-wrapper {
display: flex;
gap: 12px;
margin-top: 15px;
}

.gf-social-card {
display: flex;
align-items: center;
justify-content: center;
width: 45px;
height: 45px;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 8px;
transition: all 0.3s ease;
text-decoration: none !important;
color: #ffffff !important;
}

.gf-social-card i {
font-size: 20px;
transition: transform 0.3s ease;
}

.gf-social-card:hover i {
transform: scale(1.15);
}

/* Farbige Hover-Effekte */
.gf-social-card.instagram:hover { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important; box-shadow: 0 4px 12px rgba(220, 39, 67, 0.4); }
.gf-social-card.facebook:hover { background-color: #1877f2 !important; box-shadow: 0 4px 12px rgba(24, 119, 242, 0.4); }
.gf-social-card.youtube:hover { background-color: #ff0000 !important; box-shadow: 0 4px 12px rgba(255, 0, 0, 0.4); }
.gf-social-card.whatsapp:hover { background-color: #25d366 !important; box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4); }

/* KORREKTUR: Perfekte Zentrierung (horizontal + vertikal) für die Logos */
.gf-logo-subgrid {
display: flex !important;
flex-direction: row !important;
justify-content: center !important;
align-items: center !important;
gap: 40px !important;
width: 100% !important;
}

.gf-logo-item {
text-align: center;
}

.gf-logo-item img {
max-width: 200px;
height: auto;
display: block;
margin: 0 auto;
}

/* Zusammenhängende Infotext-Zelle unter den Logos */
.gf-logo-infotext {
margin-top: 25px;
font-size: 13px;
line-height: 1.4;
border-top: 1px dashed rgba(255, 255, 255, 0.2);
padding-top: 12px;
text-align: center; /* Zentriert den Text passend zu den Logos */
}

/* Unterer Bereich: Service-Links & Back-To-Top */
.gf-unterer-bereich {
border-top: 1px solid rgba(255, 255, 255, 0.3);
padding-top: 20px;
display: flex;
justify-content: space-between;
align-items: center;
}

.gf-links-wrapper {
display: flex;
align-items: center;
gap: 20px;
}

/* Styling für den pfiffigen Nach-Oben-Button */
.gf-back-to-top {
display: flex;
align-items: center;
justify-content: center;
width: 35px;
height: 35px;
background-color: rgba(255, 255, 255, 0.1);
color: #ffffff !important;
border-radius: 50%;
text-decoration: none !important;
transition: all 0.3s ease;
}

.gf-back-to-top:hover {
background-color: #cf8cb6 !important; /* Leuchtet im hellen Rosa auf */
transform: translateY(-3px); /* Hüpft dezent nach oben */
}

/* Responsive Anpassungen (Tablet & Mobile) */
@media (max-width: 1024px) {
.gf-oberer-bereich { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
.gf-oberer-bereich, .gf-mittlerer-bereich {
grid-template-columns: 1fr;
text-align: center;
}
.gf-logo-subgrid {
flex-direction: column !important;
gap: 30px !important;
}
.gf-social-wrapper {
justify-content: center;
margin-bottom: 20px;
}
.gf-unterer-bereich {
flex-direction: column;
gap: 15px;
text-align: center;
}
.gf-links-wrapper {
flex-direction: column;
gap: 10px;
}
}
</style>

<div class="gemeinsam-footer">

<div class="gf-oberer-bereich">
<div>
<h3>Geschäftsführendes Pfarramt</h3>
<p><strong>Pfarramt West (Waldbach - Dimbach - Rappach)</strong><br>
Pfarrerin Petra Schautt<br>
Römerstraße 1, 74626 Bretzfeld<br>
Tel: <a href="tel:079468985">07946/8985</a><br>
Mail: <a href="mailto:petra.schautt@elkw.de">Petra Schautt</a><br><br>

<div>
<h3>Pfarrämter (Ost & Süd)</h3>
<p><strong>Pfarramt Ost (Bretzfeld)</strong><br>
Pfarrer Christof Weiss-Schautt<br>
Adolzfurter Str. 8, 74626 Bretzfeld<br>
Tel: <a href="tel:079468985">07946/8985</a><br>
Mail: <a href="mailto:Christof-Weiss-Schautt@elkw.de">Christof Weiss-Schautt</a></p>

<p><strong>Pfarramt Süd (Adolzfurt und Unterheimbach)</strong><br>
Pfarrer Armin Boger<br>
Kirchplatz 9, 74626 Bretzfeld-Unterheimbach<br>
Tel: <a href="tel:079461319">07946/1319</a><br>
Mail: <a href="mailto:Armin.Boger@elkw.de">Armin Boger</a></p>
</div>

<div>
<h3>Pfarramt Nord</h3>
<p><strong>Pfarramt Nord (Bitzfeld, Schwabbach, Siebeneich)</strong><br>
Pfarrstelle derzeit vakant<br>
Schwöllbronner Str. 9, 74626 Bretzfeld-Bitzfeld<br><br>
<strong>Kasualvertretung:</strong><br>
Bitzfeld: Pfarrer Dr. Jörg Armbruster<br>
Tel: <a href="tel:079469439332">07946/9439332</a><br>
Mail: <a href="mailto:Joerg.Armbruster@elkw.de">Joerg Armbruster</a><br><br>

</div>

<div>
<h3>Gemeinsames Pfarrbüro</h3>
<p><strong>Sekretariat & Verwaltung</strong><br>
Zentrale Mail: <a href="mailto:Gemeindebuero.Bretzfeld@elkw.de">Gemeindebuero.Bretzfeld@elkw.de</a></p>

<p><strong>Unterstützen Sie uns mit Spenden</strong><br>
Evang. Gesamtkirchengemeinde Bretzfeld<br>
Raiffeisenbank Hohenloherland eG<br>
IBAN: DE26 6006 9714 0488 1530 00</p>
</div>
</div>

<div class="gf-mittlerer-bereich">
<div>
<strong>Folgen Sie uns in sozialen Medien</strong>

<div class="gf-social-wrapper">
<a href="https://www.instagram.com/bretzfeld_ev_kirchengemeinde/" target="_blank" rel="noreferrer" class="gf-social-card instagram" title="Instagram"><i class="fa-brands fa-instagram"></i></a>
<a href="https://www.facebook.com/evangelische.Jugendarbeit.Bretzfeld" target="_blank" rel="noreferrer" class="gf-social-card facebook" title="Facebook"><i class="fa-brands fa-facebook-f"></i></a>
<a href="https://www.youtube.com/channel/UCJ8e404qYPWEvQkBcWGpgPg/videos" target="_blank" rel="noreferrer" class="gf-social-card youtube" title="YouTube"><i class="fa-brands fa-youtube"></i></a>

<a href="https://whatsapp.com/channel/0029VbB1IN1Fcovzoafxyy0F " target="_blank" rel="noreferrer" class="gf-social-card whatsapp" title="WhatsApp"><i class="fa-brands fa-whatsapp"></i></a>
</div>
</div>

<div class="gf-logo-item">
<br><br> <a href="https://www.kirchenbezirk-weinsberg-neuenstadt.de/"><img src="/fileadmin/sites/kg-bretzfeld/Bilder-Bretzfeld/Startseite/Logo/csm_06_Logo_weiss_quer_Kirchenbezirk_Weinsberg_Neuenstadt_2020__1__fed338d7e0.png" alt="Logo Weinsberg-Neuenstadt"> </a>
<div class="gf-logo-text"></div>
</div>

</div>

<div class="gf-logo-infotext">
<center>Die Kirchengemeinde Bretzfeld ist Mitglied des Kirchenbezirks Weinsberg-Neuenstadt und gehört der Evangelischen Landeskirche Württemberg an. </center>
</div>
</div>
</div>

<div class="gf-unterer-bereich">
<div class="gf-copyright">
© 2026 Evang. Kirchengemeinde Bretzfeld
</div>
<div class="gf-links">
<a href="/ueber-uns/adressen">Alle Adressen</a> |
<a href="/meta/sitemap">Sitemap</a> |
<a href="/meta/kontakt">Kontakt</a> |
<a href="/meta/impressum">Impressum</a> |
<a href="/meta/datenschutz">Datenschutz</a> |
<a href="#ekdcm_showBanner">Cookie-Einstellungen</a>
</div>
</div>
</div>
</div>

Fix 5 - Breite der Menüs, Ebene 2 breiter - Ebene 3 Autospitt

Standardnsicht offenes Menü Ebene 2 und Ebene 3 mit unschönen Namensumbrüchen

Das Erscheinungsbild des offenen Menüs für Ebene 3 ist unschön, bei geteilter Ansicht (mit Trenner) komt es zum harten Bezeichnerumbruch. Der Linkbutton zum Zugang zu Ebene 3 ist klein und ist mit der Maus nur schwer bedienbar.
Fix5 verbreitert das offene Menü auf 550 px (analok elk-wue.de), Ebene 3 wird dann automatisch in zwei Hälften geteilt, egal ob ein Trenner definiert wurde oder nicht (Autosplitt) und der Zugangsbutton zu Ebene 3 wird durch ein anderes Zeichen ersetzt, das leichter zu bedienen ist.

Fix 5 - Menüdarstellung

Fix 5

<style id="gba-menu-master-final-3">
@media (min-width: 992px) {
/* 1. Hauptnavigation (Ebene 1) geordnet ausrichten & Anker setzen */
.main-navigation-toolbar .main-navigation > ul {
display: flex !important;
justify-content: flex-end !important;
}
.main-navigation-toolbar .main-navigation > ul > li {
position: relative !important;
}

/* 2. HOVER-SICHERUNG: Menü-Boxen sind standardmäßig absolut unsichtbar */
.main-navigation-toolbar .main-navigation > ul > li > ul.menu-with-columns-1,
.main-navigation-toolbar .main-navigation > ul > li > ul.menu-with-columns-2,
#main-nav-section > ul > li > ul {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
}

/* 3. HOVER-TRIGGER: Nur die Box öffnen, über der die Maus wirklich steht */
.main-navigation-toolbar .main-navigation > ul > li:hover > ul.menu-with-columns-1,
.main-navigation-toolbar .main-navigation > ul > li:hover > ul.menu-with-columns-2,
#main-nav-section > ul > li:hover > ul {
display: block !important;
opacity: 1 !important;
visibility: visible !important;

/* Positions- und Maße-Anpassung (Kompakte 500px) */
position: absolute !important;
top: 100% !important;
left: 50% !important;
transform: translateX(-50%) !important;
width: 600px !important;
min-width: 600px !important;
height: auto !important;
max-height: 85vh !important;
overflow-y: auto !important;

/* Design & Corporate Identity */
padding: 25px !important;
box-sizing: border-box !important;
background: #591855 !important;
box-shadow: 0px 5px 15px rgba(0,0,0,0.2) !important;
z-index: 99999 !important;
}

/* 4. STRUKTUR-BEREINIGUNG EBENE 2 */
.main-navigation-toolbar .main-navigation > ul > li > ul.menu-with-columns-1 div.menu-column {
display: block !important;
width: 100% !important;
background: transparent !important;
margin: 0 !important;
padding: 0 !important;
}

/* Listenpunkte Ebene 2 */
.main-navigation-toolbar .main-navigation > ul > li > ul.menu-with-columns-1 li.isLevel2Item {
display: block !important;
width: 100% !important;
position: relative !important;
margin-bottom: 12px !important;
background: transparent !important;
border: none !important;
padding: 5px 50px 5px 0 !important;
box-sizing: border-box !important;
}

/* =========================================================================
5. DER ZEITUNGS-SPALTEN-TRICK (ABSTANDS-OPTIMIERUNG)
========================================================================= */

/* Die umschließende Liste der Ebene 3 vorbereiten */
.main-navigation-toolbar .main-navigation ul li.open ul.level-3,
.main-navigation-toolbar .main-navigation ul li.active ul.level-3,
.main-navigation-toolbar .main-navigation ul li ul ul.level-3[aria-expanded="true"],
.main-navigation-toolbar .main-navigation ul li ul ul.level-3[style*="display: block"],
.main-navigation-toolbar .main-navigation ul li ul ul.level-3[style*="display:block"] {
display: block !important;
width: 100% !important;
margin: 10px 0 !important;
padding: 5px 0 5px 15px !important;
box-sizing: border-box !important;
}

/* NEU: Erhöhter Gap und Padding schützt den Text vor der Trennlinie */
.main-navigation-toolbar .main-navigation ul li ul ul.level-3 div.menu-column {
display: block !important;
width: 100% !important;
max-width: 100% !important;
background: transparent !important;
margin: 0 !important;

/* Zeilen-Spalten-Fluss */
column-count: 2 !important;
column-gap: 40px !important; /* Mehr Platz zwischen linker und rechter Hälfte */
padding-left: 5px !important; /* Schiebt die linke Spalte minimal ein */
box-sizing: border-box !important;
}

/* Behebt das Kleben der rechten Spalten-Elemente an der Linie */
.main-navigation-toolbar .main-navigation ul li ul ul.level-3 li.isLevel3Item {
display: block !important;
width: 100% !important;
margin-bottom: 8px !important;
background: transparent !important;
padding-left: 15px !important; /* NEU: Drückt den Text der rechten Spalte weg von der Trennlinie */
box-sizing: border-box !important;
break-inside: avoid !important;
page-break-inside: avoid !important;
}

/* 6. SCHRIFTBILD & TYPOGRAFIE */
.main-navigation-toolbar .main-navigation a {
white-space: normal !important;
display: inline-block !important;
width: auto !important;
color: #FFFFFF !important;
text-decoration: none !important;
}
.main-navigation-toolbar .main-navigation a:hover {
text-decoration: underline !important;
}

.main-navigation-toolbar .main-navigation ul li ul ul.level-3 a {
font-size: 16px !important;
opacity: 0.9 !important;
}

/* =========================================================================
7. BARRIEREFREIHEIT: PFEIL-ICON (DREHUNG-KORREKTUR)
========================================================================= */
.main-navigation-toolbar .main-navigation ul li ul.menu-with-columns-1 button.open-3-level {
width: 44px !important;
height: 44px !important;
position: absolute !important;
top: -6px !important;
right: 15px !important;
background: rgba(255, 255, 255, 0.1) !important;
border: 2px solid rgba(255, 255, 255, 0.4) !important; /* Macht den Button tastbar sichtbar */
cursor: pointer !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
z-index: 10 !important;
font-size: 0 !important;
border-radius: 4px !important;
}

.main-navigation-toolbar .main-navigation ul li ul.menu-with-columns-1 button.open-3-level:hover {
background: rgba(255, 255, 255, 0.25) !important;
}

/* Das Standard-Dreieck */
.main-navigation-toolbar .main-navigation ul li ul.menu-with-columns-1 button.open-3-level::before {
content: "" !important;
display: block !important;
width: 0 !important;
height: 0 !important;
border-left: 6px solid transparent !important;
border-right: 6px solid transparent !important;
border-top: 7px solid #FFFFFF !important;
transform: rotate(0deg) !important; /* Startet sauber nach unten zeigend */
transition: transform 0.2s ease !important;
}

/* KORREKTUR: Saubere Drehung nach oben bei geöffnetem Menü (Zustand .open / .active) */
.main-navigation-toolbar .main-navigation ul li ul.menu-with-columns-1 li.isLevel2Item.open button.open-3-level::before,
.main-navigation-toolbar .main-navigation ul li ul.menu-with-columns-1 li.isLevel2Item.active button.open-3-level::before,
.main-navigation-toolbar .main-navigation ul li ul.menu-with-columns-1 li.isLevel2Item[class*="open"] button.open-3-level::before {
transform: rotate(180deg) !important; /* Dreht das Dreieck exakt auf den Kopf (nach oben) */
}
}
</style>

Standardseite Gerade Ecken, Fixed Header überschreiben, Spezialmenüeintrag

Der Fixed Header im Gemeindebaukasten wird überschrieben

Fix 2 basiert auf Fix 1 für alle weiteren Seiten. Der Fixed Header wird mit eigenen Seiten ergänzt,
Zudem Elemente auf grade Ecken gesetzt, ein spezieller Menüpunkt im Desktop-Menü wird ausgeblendet und in der mobilen Version hervorgehoben dargestellt (Unsere Adressen)

Fix 2

<link rel="preconnect" href="https://googleapis.com">
<link rel="preconnect" href="https://gstatic.com" crossorigin>
<link href="https://googleapis.com" rel="stylesheet">

<style>
/* Schriftart global erzwingen */
body, html, p, a, li, span, .ce-bodytext {
font-family: 'Sarabun', sans-serif !important;
}

/* Radikaler Ecken-Stopp für das Medienhaus-Framework */
*, .card, .wbg-card, .wbg-teaser, .teaser-tiles, .teaser-tile, .teaser-card, .news-item, .news-article, .thumbnail, .img-thumbnail, .ce-gallery img, .img-fluid, .btn, .btn-primary, .btn-secondary, input, .form-control, .well, .alert {
border-radius: 0px !important;
}

/* DESKTOP-STYLING (Ab 992px Breite) */
@media (min-width: 992px) {
.navbar, .navbar-nav, .nav-link, .dropdown-item, #mainnavigation a, #toolbar-navigation-secton a {
font-size: 20px !important;
line-height: 1.4 !important;
}
}

/* MOBILE ANPASSUNGEN (Unter 991px Bildschirmbreite) */
@media (max-width: 991px) {
/* Platz oben für die Icons schaffen */
.mm-listview {
padding-top: 60px !important;
}

/* Obere Icons starr fixieren (Haus, Männchen, Lupe) */
.mm-listview li.icon-home,
.mm-listview li.icon-human,
.mm-listview li.icon-magnifier {
display: inline-block !important;
width: auto !important;
float: left !important;
position: absolute !important;
top: 0 !important;
border: none !important;
background: transparent !important;
margin: 10px 5px 15px 15px !important;
z-index: 999 !important;
}

.mm-listview li.icon-home { left: 10px !important; }
.mm-listview li.icon-human { left: 70px !important; }
.mm-listview li.icon-magnifier { left: 130px !important; }

.mm-listview li.icon-home a, .mm-listview li.icon-human a, .mm-listview li.icon-magnifier a {
font-size: 0 !important;
padding: 10px !important;
}
.mm-listview li.icon-home a span, .mm-listview li.icon-human a span, .mm-listview li.icon-magnifier a span {
font-size: 26px !important;
color: #000 !important;
display: inline-block !important;
}

/* Versteckt die Desktop-Links im lila Hauptbereich, falls das Framework sie klont */
.mm-panel li.gba-desktop-only {
display: none !important;
}

/* STYLING FÜR DIE GRAUEN TEXTLINKS AM ENDE DER LISTE */
li.gba-mobile-bischof-links {
background: #e9ecef !important; /* Grauer Kasten-Hintergrund */
border-top: 1px solid #dee2e6 !important;
padding: 5px 0 !important;
}

.gba-mobile-bischof-links a {
color: #333333 !important; /* Edles Dunkelgrau */
font-size: 16px !important;
font-weight: 600 !important;
font-family: 'Sarabun', sans-serif !important;
padding: 12px 20px !important;
display: block !important;
border-bottom: 1px solid #dee2e6 !important;
background: transparent !important;
}

li.gba-mobile-bischof-links a:last-child {
border-bottom: none !important;
}
}

/* Absicherung für das Such-Overlay */
#top-nav-search {
z-index: 999999 !important;
position: fixed !important;
top: 15% !important;
left: 5% !important;
width: 90% !important;
max-width: 500px !important;
background: #fff !important;
padding: 20px !important;
border: 1px solid #ccc !important;
}

</style>

nav li:has(a[title="Unsere Adressen"]), header li:has(a[title="Unsere Adressen"]),
.navigation li:has(a[title="Unsere Adressen"]), div[class*="menu"] li:has(a[title="Unsere Adressen"]),
div[class*="nav"] li:has(a[title="Unsere Adressen"]) { display: none !important; }
}

/* =========================================================================
2. MOBIL-REGELN (Aktiv auf Smartphones & Tablets)
========================================================================= */
@media (max-width: 991px) {

/* ---------------------------------------------------------------------
A) DAS MENÜ NACH UNTEN VOLLSTÄNDIG LILA AUSFÜLLEN
--------------------------------------------------------------------- */
.sidebar,
nav[class*="menu"],
div[class*="menu-container"],
.mobile-menu,
#mobile-navigation {
background-color: #551A57 !important; /* Das lila der Gemeinde Bretzfeld */
background: #c4cccf !important;
min-height: 100vh !important; /* Streckt das Menü auf 100% Bildschirmhöhe */
height: 100% !important;
margin-bottom: 0 !important;
padding-bottom: 50px !important; /* Puffer für lange Displays */
}

/* Entfernt eventuelle weiße/graue Hintergründe der inneren Listenstrukturen */
.sidebar ul, nav[class*="menu"] ul, .navbar-nav {
background: transparent !important;
background-color: transparent !important;
}

/* ---------------------------------------------------------------------
B) HIGHLIGHT-BUTTON: "UNSERE ADRESSEN" IN TIEFSCHWARZ & WEISS
--------------------------------------------------------------------- */
/* Färbt die komplette Zelle tiefschwarz */
li:has(a[title="Unsere Adressen"]),
div[class*="menu"] li:has(a[title="Unsere Adressen"]) {
background: #c4cccf !important;
background-color: #c4cccf !important;
margin: 12px 0 !important; /* Abstand im Menübaum */
padding: 0 !important;
border: none !important;
}

/* Zwingt den inneren Link und alle eventuellen Unter-Boxen auf Schwarz mit weißer Schrift */
li:has(a[title="Unsere Adressen"]) *,
div[class*="menu"] li:has(a[title="Unsere Adressen"]) * {
background: #c4cccf !important;
background-color: #c4cccf !important;
color: #FFFFFF !important; /* Kristallweiße Schrift auf Schwarz */
box-shadow: none !important;
border: none !important;
}

/* Den eigentlichen Linktext formatieren (Weiß, Fett, Mittig) */
li a[title="Unsere Adressen"],
div[class*="menu"] a[title="Unsere Adressen"] {
color: #000000 !important;
font-weight: bold !important;
padding: 16px 20px !important;
display: block !important;
text-decoration: none !important;
}

/* Effekt beim Draufdrücken (Wird anthrazit) */
li:has(a[title="Unsere Adressen"]):active,
li:has(a[title="Unsere Adressen"]):active * {
background: #222222 !important;
background-color: #222222 !important;
}
}
</style>

<template id="gba-custom-toolbar-template">
<li class="icon-home gba-desktop-only"><a href="/">Startseite <span class="icon-home"></span></a></li>
<li class="icon-phone gba-desktop-only"><a href="/ueber-uns/adressen">Alle Adressen <span class="icon-phone"></span></a></li>
<li class="icon-phone gba-desktop-only"><a href="/gemeindeleben/gemeindebrief">Gemeindebrief <span class="icon-phone"></span></a></li>
<li class="icon-images gba-desktop-only"><a href="https://gemeinsam-gemeinde.de" target="_blank" rel="noopener">Bildergalerie <span class="icon-images"></span></a></li>
<li class="icon-phone gba-desktop-only"><a href="/meta/sitemap">Inhalt-Sitemap <span class="icon-images"></span></a></li>
<li class="icon-human"><a class="accessibility" href="#">Barrierefreiheit <span class="only-desktops">(A)</span> <span class="icon-human"></span></a></li>
<li class="icon-magnifier">
<a href="#top-nav-search" class="top-nav-search-trigger">Suche <span class="icon-magnifier"></span></a>
<dialog id="top-nav-search">
<div class="search-wrapper">
<form action="/meta/suche" method="get">
<input aria-label="Nach Stichworten suchen" type="search" class="tx-solr-q js-solr-q form-control" id="s-1" name="tx_solr[q]" value="" />
<button aria-label="Suchergebnisse anzeigen" class="btn btn-primary tx-solr-submit" type="submit">Suchen</button>
</form>
<button class="close-search-dialog" aria-label="Suche schließen" style="margin-top: 10px; cursor: pointer;">Schließen</button>
</div>
</dialog>
</li>
</template>

<script>
document.addEventListener("DOMContentLoaded", function() {
var originalToolbarList = document.querySelector("#toolbar-navigation-secton ul");
var template = document.getElementById("gba-custom-toolbar-template");

if (originalToolbarList && template) {
var originalAccessibilityLink = originalToolbarList.querySelector(".accessibility");
var clone = template.content.cloneNode(true);
var templateAccessibilityLink = clone.querySelector(".accessibility");

if (originalAccessibilityLink && templateAccessibilityLink) {
originalAccessibilityLink.innerHTML = templateAccessibilityLink.innerHTML;
templateAccessibilityLink.parentNode.replaceChild(originalAccessibilityLink, templateAccessibilityLink);
}

originalToolbarList.innerHTML = "";
originalToolbarList.appendChild(clone);

var searchTrigger = originalToolbarList.querySelector(".top-nav-search-trigger");
var searchDialog = originalToolbarList.querySelector("#top-nav-search");
var searchCloseBtn = originalToolbarList.querySelector(".close-search-dialog");

if (searchTrigger && searchDialog) {
searchTrigger.addEventListener("click", function(e) { e.preventDefault(); searchDialog.showModal(); });
}
if (searchCloseBtn && searchDialog) {
searchCloseBtn.addEventListener("click", function(e) { e.preventDefault(); searchDialog.close(); });
}
}

// =====================================================================
// DER BULLETPROOF-FIX: Injiziert die Links unabhängig vom Framework-Timing
// =====================================================================
function injectBischofLinks() {
// Findet die mobile Hauptliste im DOM
var mobileListView = document.querySelector("#mainnavigation-mmenu .mm-listview") || document.querySelector(".mm-listview");

if (mobileListView && !document.querySelector(".gba-mobile-bischof-links")) {
// Erzeuge einen echten Listenpunkt
var footerLi = document.createElement("li");
footerLi.className = "gba-mobile-bischof-links";

// Befülle ihn mit den sauberen Textlinks
footerLi.innerHTML = `
<a href="/ueber-uns/adressen">Alle Adressen</a>
<a href="/gemeindeleben/gemeindebrief">Gemeindebrief</a>
<a href="/meta/sitemap">Inhalt-Sitemap</a>
<a href="https://gemeinsam-gemeinde.de" target="_blank" rel="noopener">Bildergalerie</a>
`;

// Hänge ihn ans absolute Ende der Liste an
mobileListView.appendChild(footerLi);
}
}

// Führe die Injektion mehrfach zeitversetzt aus, um das träge Framework sicher zu erwischen
setTimeout(injectBischofLinks, 200);
setTimeout(injectBischofLinks, 600);
setTimeout(injectBischofLinks, 1200);
});
</script>

Versteckter Menüeintrag / Hervorgehoben im mobilen Menü

Menüeintrag im Desktopmenü ausblenden und im mobilen Menü hervorheben

Das Fassungsvermögen des Desktop-Menüs in der Breite ist endlich, ein zusätzlicher Menüeintrag führt zum Zeilenumbruch im Menü und sieht unschön und unprofessionel aus. Der Menüeintrag soll gedoch im mobilen Menü den FixedHeader ersetzen bzw. die hervorgehobenen Menüeinträge bilden.

Fix 4 - versteckter Menüeintrag

Fix