/* =====================================================================
   Kirchengemeinde Barthelmesaurach – custom.css für Helix Ultimate
   Ablage: /templates/shaper_helixultimate/css/custom.css
   Stand: November 2026
   ===================================================================== */

/* ---------- 1. Schrift (lokal, DSGVO-konform) ------------------------
   Variable Schrift (eine Datei für alle Stärken 200–800) nach
   /templates/shaper_helixultimate/fonts/ hochladen:
   PlusJakartaSans-VariableFont_wght.ttf                                 */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/PlusJakartaSans-VariableFont_wght.ttf") format("truetype");
}

/* ---------- 2. Farben & Grundwerte ---------------------------------- */
:root {
  --kg-gruen: #369D7A;        /* Original-Grün: Flächen, große Überschriften */
  --kg-gruen-dunkel: #2A7A5F; /* Links, Buttons, kleiner Text (gut lesbar)   */
  --kg-violett: #5C2483;      /* Akzente                                     */
  --kg-violett-dunkel: #2B1240; /* Fußbereich                                */
  --kg-hellgruen: #97C139;    /* Schmuckfarbe aus dem Logo                   */
  --kg-hauch: #F3F8F5;        /* helle Hintergründe                          */
  --kg-linie: #E3ECE7;
  --kg-text: #1F2A26;
  --kg-text-2: #3E4C46;
  --kg-radius: 22px;
  --kg-schrift: "Plus Jakarta Sans", Arial, Helvetica, sans-serif;
}

body {
  font-family: var(--kg-schrift);
  font-size: 17px;
  line-height: 1.6;
  color: var(--kg-text);
  background: #fff;
}
h1, h2, h3, h4, h5, h6,
.sppb-addon-title {
  font-family: var(--kg-schrift);
  font-weight: 800;
  color: var(--kg-text);
  letter-spacing: -0.02em;
  line-height: 1.15;
}
a { color: var(--kg-gruen-dunkel); }
a:hover, a:focus { color: var(--kg-violett); }
::selection { background: var(--kg-hellgruen); color: var(--kg-text); }

/* ---------- 3. Buttons --------------------------------------------- */
.btn, .sppb-btn {
  font-family: var(--kg-schrift);
  font-weight: 700;
  border-radius: 999px;
  padding: 0.8em 1.6em;
  transition: background .2s, color .2s, border-color .2s;
}
.btn-primary, .sppb-btn-primary {
  background: var(--kg-gruen-dunkel);
  border-color: var(--kg-gruen-dunkel);
  color: #fff;
}
.btn-primary:hover, .btn-primary:focus,
.sppb-btn-primary:hover, .sppb-btn-primary:focus {
  background: var(--kg-violett);
  border-color: var(--kg-violett);
  color: #fff;
}
.btn-outline-primary, .sppb-btn-default {
  background: #fff;
  border: 2px solid var(--kg-violett);
  color: var(--kg-violett);
}
.btn-outline-primary:hover, .sppb-btn-default:hover {
  background: var(--kg-violett);
  color: #fff;
}

/* ---------- 4. Topbar ---------------------------------------------- */
#sp-top-bar {
  background: var(--kg-violett);
  color: #fff;
  font-size: 14px;
  padding: 8px 0;
}
#sp-top-bar a { color: #fff; }
#sp-top-bar a:hover { color: var(--kg-hellgruen); }
#sp-top-bar .sp-contact-info li,
#sp-top-bar .social-icons li { margin-right: 18px; }

/* ---------- 5. Header & Menü --------------------------------------- */
#sp-header {
  background: #fff;
  border-bottom: 1px solid var(--kg-linie);
  box-shadow: none;
}
#sp-header.header-sticky {
  box-shadow: 0 8px 24px rgba(31, 42, 38, .08);
}
#sp-header .logo img { max-height: 64px; width: auto; }

.sp-megamenu-parent > li > a,
.sp-megamenu-parent > li > span {
  font-family: var(--kg-schrift);
  font-size: 16px;
  font-weight: 600;
  color: var(--kg-text);
  padding: 0 14px;
  border-radius: 10px;
}
.sp-megamenu-parent > li:hover > a,
.sp-megamenu-parent > li.active > a {
  color: var(--kg-gruen-dunkel);
}
.sp-megamenu-parent > li.active > a {
  background: var(--kg-hauch);
}
/* Dropdown */
.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(31, 42, 38, .14);
  padding: 10px;
}
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a {
  color: var(--kg-text);
  font-weight: 500;
  border-radius: 10px;
  padding: 8px 12px;
}
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a:hover,
.sp-megamenu-parent .sp-dropdown li.sp-menu-item.active > a {
  background: var(--kg-hauch);
  color: var(--kg-gruen-dunkel);
}
/* Menüpunkt als Button (Menüeintrag > Link-Typ > CSS-Klasse: kg-menu-button) */
.sp-megamenu-parent > li > a.kg-menu-button,
.sp-megamenu-parent > li.kg-menu-button > a {
  background: var(--kg-gruen-dunkel);
  color: #fff !important;
  border-radius: 999px;
  padding: 0 20px;
  margin-left: 8px;
  line-height: 44px;
  display: inline-block;
}
.sp-megamenu-parent > li > a.kg-menu-button:hover,
.sp-megamenu-parent > li.kg-menu-button > a:hover { background: var(--kg-violett); color: #fff !important; }
.sp-megamenu-parent > li > .sp-menu-heading { cursor: default; }

/* Mobiles Menü (Offcanvas) */
.offcanvas-menu { background: #fff; }
.offcanvas-menu .offcanvas-inner ul.menu > li > a {
  font-family: var(--kg-schrift);
  font-weight: 600;
  color: var(--kg-text);
}
.offcanvas-menu .offcanvas-inner ul.menu > li.active > a,
.offcanvas-menu .offcanvas-inner ul.menu > li > a:hover { color: var(--kg-gruen-dunkel); }
.burger-icon > span { background-color: var(--kg-text); }

/* ---------- 6. Seitentitel ----------------------------------------- */
.sp-page-title {
  background: var(--kg-hauch) !important;
  padding: 56px 0;
}
.sp-page-title .sp-page-title-heading,
.sp-page-title h2 { color: var(--kg-text); font-size: 44px; }
.sp-page-title .breadcrumb a { color: var(--kg-gruen-dunkel); }

/* ---------- 7. Beiträge / Blog-Ansicht ----------------------------- */
.article-list .article,
.blog .article {
  background: #fff;
  border: 1px solid var(--kg-linie);
  border-radius: var(--kg-radius);
  overflow: hidden;
  padding: 0 0 24px;
  margin-bottom: 24px;
}
.article-list .article .article-intro-image img,
.blog .article .article-intro-image img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 0;
}
.article-list .article .article-header,
.article-list .article .article-info,
.article-list .article .article-introtext,
.article-list .article .readmore { padding: 0 24px; }
.article-list .article .article-header h2 { font-size: 22px; margin-top: 20px; }
.article-list .article .article-header h2 a { color: var(--kg-text); }
.article-list .article .article-header h2 a:hover { color: var(--kg-gruen-dunkel); }
.article-info { color: #5C6B64; font-size: 14px; }
.readmore a { font-weight: 700; }

/* Einzelner Beitrag */
.article-details .article-full-image img { border-radius: var(--kg-radius); }
.article-details .article-header h1 { font-size: 44px; }

/* ---------- 8. Module allgemein ------------------------------------ */
.sp-module .sp-module-title {
  font-family: var(--kg-schrift);
  font-weight: 800;
  font-size: 22px;
}

/* ---------- 9. Bausteine für die Startseite (SP Page Builder) -------
   In SP Page Builder bei Abschnitt / Spalte / Addon unter
   „Erweitert > CSS-Klasse“ eintragen.                                   */

/* Kleine Überzeile: Text-Addon mit Klasse kg-ueberzeile */
.kg-ueberzeile {
  font-size: 14px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--kg-violett);
}

/* Hero-Abschnitt: Abschnitt mit Klasse kg-hero */
.kg-hero { background: var(--kg-hauch); }
.kg-hero h1, .kg-hero .sppb-addon-title {
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.08;
}
.kg-hero img { border-radius: 28px; width: 100%; object-fit: cover; }

/* Karte / Kachel: Spalte oder Addon mit Klasse kg-karte */
.kg-karte {
  background: #fff;
  border: 1px solid var(--kg-linie);
  border-radius: var(--kg-radius);
  padding: 28px;
  height: 100%;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.kg-karte:hover {
  border-color: #B9D3C6;
  box-shadow: 0 14px 32px rgba(31, 42, 38, .08);
  transform: translateY(-2px);
}
.kg-karte i, .kg-karte .sppb-icon { color: var(--kg-gruen-dunkel); }

/* Heller Kasten (Termine, Öffnungszeiten): Klasse kg-kasten */
.kg-kasten {
  background: var(--kg-hauch);
  border-radius: 26px;
  padding: 36px;
}

/* Violetter Kasten (Pfarramt): Klasse kg-kasten-violett */
.kg-kasten-violett {
  background: var(--kg-violett);
  color: #fff;
  border-radius: 26px;
  padding: 36px;
}
.kg-kasten-violett h1, .kg-kasten-violett h2, .kg-kasten-violett h3,
.kg-kasten-violett .sppb-addon-title,
.kg-kasten-violett a { color: #fff; }

/* Hellgrüner Button (z. B. „Kontakt aufnehmen“): Button-Addon mit Klasse kg-btn-hell */
.kg-btn-hell .sppb-btn {
  background: var(--kg-hellgruen);
  border-color: var(--kg-hellgruen);
  color: var(--kg-text);
  font-weight: 800;
}
.kg-btn-hell .sppb-btn:hover { background: #fff; border-color: #fff; color: var(--kg-violett); }

/* Termin-Liste: Text-Addon mit Klasse kg-termine, Inhalt als Liste
   <ul><li><span class="kg-datum"><b>29</b>Nov</span>
   <strong>Titel</strong><br>14:00 Uhr · Gemeindehaus</li></ul>       */
.kg-termine ul { list-style: none; margin: 0; padding: 0; }
.kg-termine li {
  display: grid; grid-template-columns: 64px 1fr; gap: 0 20px;
  align-items: center; padding: 16px 0; border-bottom: 1px solid #D6E6DD;
}
.kg-termine li:last-child { border-bottom: 0; }
.kg-datum { grid-row: span 2; text-align: center; line-height: 1.1;
  font-size: 13px; font-weight: 700; text-transform: uppercase; color: #5C6B64; }
.kg-datum b { display: block; font-size: 26px; font-weight: 800; color: var(--kg-gruen-dunkel); }

/* Personen-Raster (z. B. Kirchenvorstand): <ul class="kg-personen"><li><img><strong>Name</strong><span>Aufgabe</span></li></ul> */
.kg-personen {
  list-style: none; margin: 32px 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 28px;
}
.kg-personen li { display: flex; flex-direction: column; gap: 4px; }
.kg-personen img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: var(--kg-radius); margin-bottom: 10px; background: var(--kg-hauch);
}
.kg-personen strong { font-size: 18px; }
.kg-personen span { color: var(--kg-text-2); font-size: 15px; }

/* Bilder in Beiträgen */
.article-details .article-body img,
.com-content-article__body img { border-radius: 18px; max-width: 100%; height: auto; }

/* Bilder mit runden Ecken: Klasse kg-bild-rund */
.kg-bild-rund img { border-radius: var(--kg-radius); }

/* ---------- 10. Bottom & Footer ------------------------------------ */
#sp-bottom {
  background: var(--kg-violett-dunkel);
  color: #EDE5F3;
  padding: 64px 0 24px;
  font-size: 15px;
}
#sp-bottom .sp-module .sp-module-title { color: #fff; font-size: 17px; }
#sp-bottom a { color: #EDE5F3; }
#sp-bottom a:hover { color: var(--kg-hellgruen); }
#sp-bottom ul { list-style: none; padding: 0; }
#sp-bottom ul li { padding: 3px 0; }

#sp-footer {
  background: var(--kg-violett-dunkel);
  color: #EDE5F3;
  border-top: 1px solid rgba(255, 255, 255, .15);
  font-size: 14px;
}
#sp-footer a { color: #EDE5F3; }
#sp-footer a:hover { color: var(--kg-hellgruen); }

/* ---------- 11. Formulare ------------------------------------------ */
.form-control, .form-select {
  border-radius: 12px;
  border-color: #CFE3D8;
}
.form-control:focus, .form-select:focus {
  border-color: var(--kg-gruen-dunkel);
  box-shadow: 0 0 0 3px rgba(42, 122, 95, .2);
}

/* ---------- 12. Barrierefreiheit ----------------------------------- */
a:focus-visible, .btn:focus-visible, .sppb-btn:focus-visible {
  outline: 3px solid var(--kg-hellgruen);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .kg-karte, .kg-karte:hover { transition: none; transform: none; }
}

/* ---------- 13. Termine-Widget (evangelische-termine.de) ------------ */
#et_widget { font-family: var(--kg-schrift); }
#et_widget .et_filter_container {
  background: var(--kg-hauch);
  border: 0;
  border-radius: var(--kg-radius);
  padding: 20px 24px;
  margin-bottom: 24px;
}
#et_widget .et_filter_label { font-weight: 700; margin-bottom: 6px; }
#et_widget input[type="text"] {
  border: 1px solid #CFE3D8;
  border-radius: 12px;
  padding: 10px 14px;
  font-family: var(--kg-schrift);
}
#et_widget input[type="text"]:focus {
  outline: none;
  border-color: var(--kg-gruen-dunkel);
  box-shadow: 0 0 0 3px rgba(42, 122, 95, .2);
}
#et_widget button {
  font-family: var(--kg-schrift);
  font-weight: 700;
  border: 0;
  border-radius: 999px;
  padding: 9px 18px;
  margin-top: 8px;
  background: var(--kg-gruen-dunkel);
  color: #fff;
  cursor: pointer;
}
#et_widget button:hover { background: var(--kg-violett); }
#et_widget .et_resetbutton button {
  background: #fff;
  color: var(--kg-violett);
  border: 2px solid var(--kg-violett);
}
#et_widget .et_resetbutton button:hover { background: var(--kg-violett); color: #fff; }
#et_widget .et_eventsgrid_date,
#et_widget .et_eventsgrid_event {
  padding: 16px 0;
  border-bottom: 1px solid var(--kg-linie);
}
#et_widget .et_event_date { font-weight: 700; color: var(--kg-gruen-dunkel); }
#et_widget .et_event_title { font-size: 19px; font-weight: 700; color: var(--kg-text); }
#et_widget .et_event_personname,
#et_widget .et_event_cityAndPlace { color: var(--kg-text-2); font-size: 15px; }

/* ---------- 14. Startseite ------------------------------------------ */
.kg-badge {
  display: inline-block; padding: 6px 14px; border-radius: 999px;
  background: #fff; border: 1px solid #CFE3D8;
  color: var(--kg-violett); font-size: 14px; font-weight: 700; margin-bottom: 18px;
}
.kg-hero h1 { font-size: clamp(36px, 5vw, 56px); line-height: 1.08; margin: 0 0 20px; }
.kg-lead { font-size: 19px; color: var(--kg-text-2); max-width: 560px; }
.kg-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.kg-buttons .btn { padding: 14px 26px; }
.kg-hero-bild { width: 100%; height: 460px; object-fit: cover; object-position: 60% 50%; border-radius: 28px; display: block; }
@media (max-width: 767px) { .kg-hero-bild { height: 280px; margin-top: 32px; } }

/* Schnellzugriff-Kacheln */
.kg-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; }
.kg-kacheln a.kg-karte { display: flex; flex-direction: column; gap: 10px; color: var(--kg-text); text-decoration: none; }
.kg-kacheln a.kg-karte strong { font-size: 20px; }
.kg-kacheln a.kg-karte span { color: var(--kg-text-2); font-size: 16px; }
.kg-kacheln svg { width: 40px; height: 40px; stroke: var(--kg-gruen-dunkel); }

/* Abschnittskopf mit Link rechts */
.kg-kopf { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.kg-kopf h2 { margin: 0; font-size: 32px; }
.kg-kopf a { font-weight: 700; }
.kg-abschnitt h2 { font-size: 40px; margin: 4px 0 24px; }

/* Termine-Kasten Startseite: kurzes Widget */
.kg-kasten-termine { background: var(--kg-hauch); border-radius: 26px; padding: 36px; height: 100%; }
.kg-termine-kurz #et_container > div:first-child,
.kg-termine-kurz .et_filter_container,
.kg-termine-kurz button { display: none !important; }
.kg-termine-kurz .et_eventsgrid_date,
.kg-termine-kurz .et_eventsgrid_event { border-bottom-color: #D6E6DD; }

/* Pfarramt-Kasten */
.kg-kasten-violett p { margin: 0 0 14px; }
.kg-buerozeit { background: rgba(255,255,255,.12); border-radius: 14px; padding: 14px 16px; margin: 0 0 18px; }
a.kg-btn-hellgruen {
  display: inline-block; padding: 12px 22px; border-radius: 999px;
  background: var(--kg-hellgruen); color: var(--kg-text) !important; font-weight: 800; text-decoration: none;
}
a.kg-btn-hellgruen:hover { background: #fff; color: var(--kg-violett) !important; }

/* Gemeindeleben */
.kg-gruppen { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.kg-gruppen a {
  display: flex; flex-direction: column; gap: 4px; padding: 20px 22px;
  border: 1px solid var(--kg-linie); border-radius: 18px; color: var(--kg-text); text-decoration: none;
  transition: border-color .2s, background .2s;
}
.kg-gruppen a:hover { border-color: #B9D3C6; background: var(--kg-hauch); }
.kg-gruppen a span { font-size: 15px; color: var(--kg-text-2); }
.kg-gruppen a.kg-alle { background: var(--kg-hauch); color: var(--kg-gruen-dunkel); border-color: transparent; justify-content: center; }

/* Offene Kirche */
.kg-zeiten { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.kg-zeiten div { background: var(--kg-hauch); border-radius: 16px; padding: 16px 20px; }
.kg-bild-gross { width: 100%; height: 420px; object-fit: cover; border-radius: 26px; display: block; }
@media (max-width: 767px) { .kg-bild-gross { height: 260px; margin-top: 24px; } }

/* ---------- 15. Handy-Anpassungen ----------------------------------- */
@media (max-width: 991px) {
  #sp-header .logo img { max-height: 44px; }
  #sp-header { height: auto; min-height: 64px; }
}
@media (max-width: 575px) {
  #sp-top-bar { font-size: 13px; }
  .kg-kasten-termine, .kg-kasten-violett { padding: 24px; }
  .kg-abschnitt h2, .kg-kopf h2 { font-size: 28px; }
}
@media (max-width: 767px) {
  #et_widget .et_eventsgrid_date { border-bottom: 0; padding-bottom: 0; }
  #et_widget .et_eventsgrid_event { padding-top: 4px; }
}

/* ---------- 16. Aktuelles-Scrollbereich (Startseite) ---------------- */
.kg-news-kopf { align-items: flex-end; margin-bottom: 24px; }
.kg-news-kopf h2 { font-size: 40px; margin: 4px 0 0; }
.kg-news-nav { display: flex; align-items: center; gap: 10px; }
.kg-news-nav a { font-weight: 700; margin-left: 8px; }
.kg-pfeil {
  width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid var(--kg-gruen-dunkel); background: #fff; color: var(--kg-gruen-dunkel);
  font-size: 20px; line-height: 1; cursor: pointer; transition: background .2s, color .2s;
}
.kg-pfeil:hover, .kg-pfeil:focus-visible { background: var(--kg-gruen-dunkel); color: #fff; }

.kg-news .sppb-addon-articles .sppb-row {
  display: flex; flex-wrap: nowrap; gap: 24px; margin: 0;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 4px 2px 16px; scrollbar-width: thin; scrollbar-color: #B9D3C6 transparent;
}
.kg-news .sppb-addon-article-layout {
  flex: 0 0 calc((100% - 72px) / 4); max-width: none; width: auto; padding: 0;
  scroll-snap-align: start;
}
@media (max-width: 991px) { .kg-news .sppb-addon-article-layout { flex-basis: calc((100% - 24px) / 2.3); } }
@media (max-width: 575px) {
  .kg-news .sppb-addon-article-layout { flex-basis: 82%; }
  .kg-news-kopf h2 { font-size: 30px; }
  .kg-pfeil { display: none; }
}
.kg-news .sppb-addon-article {
  height: 100%; display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--kg-linie); border-radius: var(--kg-radius); overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}
.kg-news .sppb-addon-article:hover { border-color: #B9D3C6; box-shadow: 0 14px 32px rgba(31, 42, 38, .08); }
.kg-news .sppb-article-img-wrap img { width: 100%; height: 190px; object-fit: cover; border-radius: 0; display: block; }
.kg-news .sppb-article-info-wrap { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.kg-news .sppb-article-info-wrap h3 { font-size: 19px; line-height: 1.3; margin: 0; }
.kg-news .sppb-article-info-wrap h3 a { color: var(--kg-text); text-decoration: none; }
.kg-news .sppb-article-info-wrap h3 a:hover { color: var(--kg-gruen-dunkel); }
.kg-news .sppb-article-meta { font-size: 14px; color: #5C6B64; margin: 0; }
.kg-news .sppb-article-introtext { font-size: 15px; color: var(--kg-text-2); }
.kg-news .sppb-readmore { margin-top: auto; font-weight: 700; color: var(--kg-gruen-dunkel); }

/* Datum nur bei Berichten (Aktuelles) zeigen, nicht bei festen Seiten */
body.view-article:not(.itemid-472) .article-info,
body.itemid-471 .article-info { display: none; }
.kg-news .sppb-article-introtext img { display: none; }
.kg-news .sppb-article-introtext {
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---------- 17. Kopfbereich & Footer (Feinschliff) ------------------ */
/* Topbar: alles in einer Zeile (ab Tablet-Breite) */
@media (min-width: 992px) {
  #sp-top-bar .row { flex-wrap: nowrap; align-items: center; }
  #sp-top1 { flex: 0 0 auto; width: auto; }
  #sp-top2 { flex: 1 1 auto; width: auto; min-width: 0; }
  #sp-top2 .sp-contact-info {
    display: flex; flex-wrap: nowrap; justify-content: flex-end; align-items: center;
    gap: 28px; margin: 0; white-space: nowrap;
  }
  #sp-top2 .sp-contact-info li { margin: 0; }
  #sp-top-bar { padding: 10px 0; }
}

/* Header: mehr Luft oben/unten, Logo und Menü in einer Zeile */
@media (min-width: 992px) {
  #sp-header { height: 112px; }
  #sp-header .container, #sp-header .container-inner { height: 100%; }
  #sp-header .row { flex-wrap: nowrap; height: 100%; }
  #sp-header #sp-menu { flex: 1 1 auto; min-width: 0; width: auto; }
  #sp-header #offcanvas-toggler { display: none !important; }
  #sp-header .logo img { max-height: 72px; }
  #sp-header.header-sticky { height: 84px; }
  #sp-header.header-sticky .logo img { max-height: 56px; }
}
@media (max-width: 991px) {
  #sp-header { padding: 10px 0; }
}

/* Footer: etwas kleinere Schrift */
#sp-bottom { font-size: 14px; line-height: 1.6; }
#sp-bottom .sp-module .sp-module-title { font-size: 16px; }
#sp-footer { font-size: 13px; }
@media (min-width: 992px) {
  .sp-megamenu-parent { display: flex !important; align-items: center; height: 100%; }
  .sp-megamenu-parent > li > a,
  .sp-megamenu-parent > li > span { line-height: 44px; display: inline-block; }
}

/* Gruppen-Seite: Illustrationen vollstaendig zeigen (3:2) */
body.itemid-471 .article-list .article .article-intro-image img,
body.itemid-471 .blog .article .article-intro-image img { height: auto; aspect-ratio: 3 / 2; object-fit: cover; }

/* 18. Autoren-Formular (Menuepunkt "Bericht schreiben", itemid 478) */
body.itemid-478 #sp-main-body { padding: 24px 0 48px; }
body.itemid-478 .edit.item-page { max-width: 760px; margin: 0 auto; }
body.itemid-478 joomla-tab [aria-controls="publishing"],
body.itemid-478 joomla-tab [aria-controls="language"],
body.itemid-478 joomla-tab [aria-controls="metadata"],
body.itemid-478 joomla-tab button[aria-controls="publishing"],
body.itemid-478 joomla-tab button[aria-controls="language"],
body.itemid-478 joomla-tab button[aria-controls="metadata"] { display: none !important; }
body.itemid-478 #images .control-group:has([name^="jform[urls]"]),
body.itemid-478 #images .control-group:has([name*="float"]),
body.itemid-478 #images .control-group:has([name*="image_fulltext"]),
body.itemid-478 #images .control-group:has([name*="fulltext_alt"]),
body.itemid-478 #images .control-group:has([name*="fulltext_caption"]),
body.itemid-478 #images h3, body.itemid-478 #images legend { display: none !important; }
body.itemid-478 .control-group:has(#jform_tags), body.itemid-478 .control-group:has(#jform_note),
body.itemid-478 .control-group:has(#jform_version_note) { display: none !important; }
body.itemid-478 #jform_title { font-size: 18px; padding: 12px 14px; }
body.itemid-478 .btn-toolbar, body.itemid-478 .mb-2:has(> .btn-primary) { display: flex; flex-wrap: wrap; gap: 10px; }
body.itemid-478 .btn-toolbar .btn { min-height: 48px; padding: 0 22px; border-radius: 999px; font-size: 16px; }
@media (max-width: 767px) {
  body.itemid-478 #sp-top-bar, body.itemid-478 #sp-bottom, body.itemid-478 #sp-page-title { display: none; }
  body.itemid-478 #sp-header { height: 64px; }
  body.itemid-478 #sp-main-body { padding: 12px 0 32px; }
  body.itemid-478 .btn-toolbar { position: sticky; bottom: 0; background: #fff; padding: 10px 0; z-index: 5; border-top: 1px solid var(--kg-linie); }
}


/* 20. Footer: Bild Bartholomaeuskirche */
#sp-bottom .kg-footer-kirche { display: inline-block; margin-top: 4px; }
#sp-bottom .kg-footer-kirche img { width: 140px; height: auto; border-radius: 12px; transition: transform .2s ease; }
#sp-bottom .kg-footer-kirche:hover img { transform: translateY(-2px); }