/* ========================================
   1. Base
   ======================================== */

/* 1.1 Font Faces – Lora (Fließtext)
   ---------------------------------------- */

/* lora-regular - latin_latin-ext */
@font-face {
  font-display: swap;
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/lora-v37-latin_latin-ext-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* lora-italic - latin_latin-ext */
@font-face {
  font-display: swap;
  font-family: 'Lora';
  font-style: italic;
  font-weight: 400;
  src: url('/fonts/lora-v37-latin_latin-ext-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* lora-500 - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lora';
  font-style: normal;
  font-weight: 500;
  src: url('/fonts/lora-v37-latin_latin-ext-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* lora-500italic - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lora';
  font-style: italic;
  font-weight: 500;
  src: url('/fonts/lora-v37-latin_latin-ext-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* 1.2 Font Faces – Nunito Sans (Überschriften) & Font Awesome
   ---------------------------------------- */

/* nunito-sans-regular - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/nunito-sans-v19-latin_latin-ext-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* nunito-sans-500 - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 500;
  src: url('/fonts/nunito-sans-v19-latin_latin-ext-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* nunito-sans-600 - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 600;
  src: url('/fonts/nunito-sans-v19-latin_latin-ext-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* font-display: swap verhindert CLS durch spätes Laden */
@font-face {
    font-family: 'Font Awesome 6 Free';
    font-display: swap;
}
@font-face {
    font-family: 'Font Awesome 6 Brands';
    font-display: swap;
}

/* 1.3 Farbsystem (abgeleitet aus Jahresplanung 26-27 / Gemeindebrief)
   ---------------------------------------- */

:root {
  /* Anker-/Primärfarbe (Markenblau, sparsam & prägnant: Headings, Links, Primary-Button) */
  --color-anchor: #017CC1;

  /* Eyecatcher-Orange für Hover/Akzente, auf AAA-Kontrast (≥7:1) abgedunkelt */
  --color-orange-text: #833A07;

  /* Typografie-Skala (Major Second, Faktor 1,125, Basis 16px) */
  --fs-sm:  0.889rem;
  --fs-base: 1rem;
  --fs-md:  1.125rem;
  --fs-lg:  1.266rem;
  --fs-xl:  1.602rem;
  --fs-2xl: 2.027rem;
  --fs-3xl: 2.566rem;
  --lh-tight: 1.25;
  --lh-snug: 1.4;
  --lh-base: 1.6;

  /* Blau-Familie */
  --blau-50:  #E2F1F9;
  --blau-100: #D3E8F5;
  --blau-300: #7DBBE3;
  --blau-400: #3197DA;
  --blau-500: #1970AA;
  --blau-600: #136092;
  --blau-700: #0F4D76;
  --blau-800: #0B3857;

  /* Rot-Familie */
  --rot-50:  #F8ECEC;
  --rot-300: #D59B9B;
  --rot-400: #BA6868;
  --rot-500: #974949;

  /* Petrol-Familie (deckt auch die frühere Grün-Familie mit ab) */
  --petrol-50:  #E2F2F5;
  --petrol-300: #84C8D1;
  --petrol-500: #307E8B;

  /* Neutrale Text-/Hintergrundfarben */
  --color-text: #25546D;
  --color-text-dark: #223642;
  --color-footer-bg: #D3DDE2;

  /* Bildstil (löst den Polaroid-Rahmen ab) */
  --image-radius: 0.75rem;
  --image-shadow: 0 10px 24px rgba(11, 56, 87, 0.16);

  /* Einheitlicher Karten-Radius – Bild-Ecken (per overflow:hidden geclippt)
     und Karten-Ecken laufen dadurch überall gleich rund, keine Stilbrüche mehr. */
  --card-radius: var(--image-radius);
}

/* 1.4 Body & Typografie
   ---------------------------------------- */

body {
  font-family: 'Lora', serif;
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--color-text);
  font-weight: 400;
  background-color: #fffffc;
}

p {
  line-height: var(--lh-base);
}

/* Serifen-italic bleibt bewusst der Stil-Charakter der Heilandskirche (h1–h3);
   alle Ebenen teilen sich dieselbe Major-Second-Skala für konsistente Sprünge. */
h1 {
    font-family: 'Lora';
    font-size: var(--fs-3xl);
    font-style: italic;
    line-height: var(--lh-tight);
    letter-spacing: 0;
    font-weight: 500;
    color: var(--color-anchor);
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}

h2 {
    font-family: 'Lora' !important;
    font-size: var(--fs-2xl);
    line-height: var(--lh-tight);
    letter-spacing: 0;
    font-weight: 500;
    color: var(--color-anchor);
    margin-top: 1.25rem;
    margin-bottom: 0.75rem;
    font-style: italic;
}

h3 {
    font-family: 'Lora' !important;
    font-weight: 500;
    font-size: var(--fs-xl);
    line-height: var(--lh-snug);
    margin-top: 1rem;
    margin-bottom: 0.625rem;
    color: var(--color-anchor);
    font-style: italic;
}

h4 {
    font-family: 'Nunito Sans' !important;
    font-weight: 600;
    font-size: var(--fs-lg);
    line-height: var(--lh-snug);
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    color: var(--color-text);
}

h5, h6 {
    font-family: 'Nunito Sans' !important;
    font-weight: 600;
    line-height: var(--lh-snug);
    margin-top: 0.75rem;
    margin-bottom: 0.4rem;
    color: var(--color-text);
}

h5 {
    font-size: var(--fs-md);
}

h6 {
    font-size: var(--fs-base);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

a {
  color: var(--color-text);
  text-decoration: none !important;
}

a:hover {
  color: var(--color-orange-text);
}

/* 1.5 Bilder & Media
   ---------------------------------------- */

.img, a img, img {
    border-radius: var(--image-radius);
    box-shadow: var(--image-shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: block;
    max-width: 100%;
    height: auto;
}

/* Ausnahmen: kein Bild-Stil für Footer-Logo, spezielle Module */
.footer-logo-copyright img,
.eventbestpresentation img,
#belowtopbarmiddle img {
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: none !important;
  display: unset;
}


/* ========================================
   2. Layout
   ======================================== */

/* 2.1 Topbar (unterhalb Header)
   ---------------------------------------- */

#belowtopbarleft,
#belowtopbarmiddle,
#belowtopbarright {
  display: flex;
  align-items: center;
}

#belowtopbarmiddle {
  justify-content: center;
}

#belowtopbarleft .moduletable,
#belowtopbarright .moduletable {
  width: 100%;
}

/* Kontakt-Infos */

.contact-info {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1.5rem;
  align-items: center;
}

.contact-info a {
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.2s ease;
}

.contact-mobile a::before {
  content: "\f095";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-right: 0.4rem;
}

.contact-email a::before {
  content: "\f0e0";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-right: 0.4rem;
}

/* Social Icons */

.social-icons {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1rem;
  align-items: center;
}

.social-icons a {
  font-size: 1.2rem;
  line-height: 1;
  text-decoration: none;
  transition: color 0.2s ease;
}

.social-icons a:hover {
  color: var(--color-orange-text);
}

.social-icons a[aria-label="Facebook"]::before {
  content: "\f39e";
  font-family: "Font Awesome 6 Brands";
  font-weight: 400;
}

.social-icons a[aria-label="YouTube"]::before {
  content: "\f167";
  font-family: "Font Awesome 6 Brands";
  font-weight: 400;
}

.social-icons a[aria-label="Instagram"]::before {
  content: "\f16d";
  font-family: "Font Awesome 6 Brands";
  font-weight: 400;
}

/* 2.2 Navigation
   ---------------------------------------- */

#header {
  background: var(--blau-50);
}

.container-header .mod-menu {
  justify-content: center;
}

.hauptmenu .nav-item > a,
.hauptmenu .nav-item > a [class^="icon-"],
.hauptmenu .nav-item > a [class*=" icon-"],
.hauptmenu .mod-menu__toggle-sub {
  font-size: 1.1rem;
  color: var(--color-text) !important;
}

.hauptmenu .nav-item > a:hover,
.hauptmenu .nav-item > a:hover [class^="icon-"],
.hauptmenu .nav-item > a:hover [class*=" icon-"],
.hauptmenu .mod-menu__toggle-sub:hover,
.hauptmenu .nav-item.active > a,
.hauptmenu .nav-item.current > a {
  color: var(--color-orange-text) !important;
}

.hauptmenu .mod-menu__sub a,
.hauptmenu .mod-menu__sub a [class^="icon-"],
.hauptmenu .mod-menu__sub a [class*=" icon-"] {
  font-size: 1.1rem;
  color: var(--color-text-dark);
}

.hauptmenu .mod-menu__sub a:hover,
.hauptmenu .mod-menu__sub a:hover [class^="icon-"],
.hauptmenu .mod-menu__sub a:hover [class*=" icon-"],
.hauptmenu .mod-menu__sub .nav-item.active > a,
.hauptmenu .mod-menu__sub .nav-item.current > a {
  color: var(--color-orange-text);
}

.container-header .mod-menu .parent>ul {
  padding:1rem;
}

.container-header .navbar-toggler {
  color: var(--color-text-dark);
  border-color: var(--color-text-dark);
}

.container-header .navbar-toggler:hover {
  color: var(--color-orange-text);
  border-color: var(--color-orange-text);
}

/* Offcanvas brand-logo: gleiche Formatierung wie h3 */
.offcanvas .brand-logo span {
    font-family: 'Lora', serif;
    font-weight: 500;
    font-size: 1.5rem;
    line-height: 1.4;
    color: var(--color-anchor);
    font-style: italic;
}

/* 2.3 Zeilen / Sections
   ---------------------------------------- */

/* Abstände */
.zeile-margin {
    margin-top:2rem;
}

.zeile-padding {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.zeile-padding-bottom {
  padding-bottom: 2rem;
}

/* Hintergrundfarben */
.zeile-color-1 {
    background-color: var(--blau-50);
    border-top: 1px solid var(--color-anchor);
    border-bottom: 1px solid var(--color-anchor);
}

/* Hintergrundbild */
.zeile-background-2 {
  background-image: url(/images/website-grafics/belief-background.webp);
  background-size: cover;
}

/* Gleiche Höhe für Spalten innerhalb [id^="zeile-"] */
[id^="zeile-"] .container > .row {
  display: flex;
  align-items: stretch;
}

[id^="zeile-"] .container > .row > [class*="col-"] {
  display: flex;
  flex-direction: column;
}

[id^="zeile-"] .container > .row > [class*="col-"] .moduletable.card {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* 2.4 Cards
   ---------------------------------------- */

.card {
  border: 1px solid var(--blau-300);
  border-radius: var(--card-radius);
  overflow: hidden;
  box-shadow: 0 0.5rem 0.5rem rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  padding: 1.5rem;
  color: var(--color-text);
}

/* Kachel-Farben: aus den drei Web-Farbfamilien, kein Zufalls-Pastell mehr */
.card-color-1 {
  background-color: var(--blau-50);
  border-color: var(--blau-300);
}

.card-color-2 {
  background-color: var(--petrol-50);
  border-color: var(--petrol-300);
}
.card-color-3 {
  background-color: var(--rot-50);
  border-color: var(--rot-300);
}
.card-color-4 {
  background-color: var(--blau-100);
  border-color: var(--blau-300);
}

/* Überschriften-Balken über volle Kartenbreite: negativer Margin bis zur
   Kartenkante, .card overflow:hidden clippt exakt auf den Karten-Radius. */
.card h2,
.card h3 {
  color: #ffffff;
  background-color: var(--blau-500);
  margin: -1.5rem -1.5rem 1rem -1.5rem;
  padding: 0.75rem 1.5rem;
}

.card-color-2 h2, .card-color-2 h3 { background-color: var(--petrol-500); }
.card-color-3 h2, .card-color-3 h3 { background-color: var(--rot-500); }
.card-color-4 h2, .card-color-4 h3 { background-color: var(--blau-600); }

/* Titel-Link in Teaser-Karten (Joomla verlinkt <a> innerhalb von h2/h3) erbt
   sonst die globale a-Farbe statt des weißen Textes auf dem Farbbalken. */
.card h2 a, .card h3 a,
.blog-item .item-content h2 a,
#bottom2 .mod-articles-title a {
  color: inherit;
}

.card h2 a:hover, .card h3 a:hover,
.blog-item .item-content h2 a:hover,
#bottom2 .mod-articles-title a:hover {
  color: inherit;
  text-decoration: underline !important;
}

/* 404-Fehlerseite (Abschnitt 16 Schritt 22 Punkt 2) */
.error-404-card {
  background-color: #ffffff;
  text-align: center;
  margin-top: 3rem;
  margin-bottom: 2rem;
}

.error-404-card .error-404-trennstrich {
  border: 0;
  border-top: 1px solid var(--blau-50);
  margin: 1.5rem 0;
}

.error-404-card .error-404-aktionen {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

/* Wartungsmodus-Seite (templates/cassiopeia_heilandskirche2026/offline.php) */
.offline-card {
  background-color: #ffffff;
  text-align: center;
  max-width: 400px;
  margin: 3rem auto 2rem auto;
}

.offline-card .offline-titel {
  font-family: "Nunito Sans", sans-serif;
  font-style: normal;
}

.offline-card .offline-bild img {
  max-width: 100%;
  height: auto;
}

.offline-card .offline-trennstrich {
  border: 0;
  border-top: 1px solid var(--blau-50);
  margin: 1.5rem 0;
}

.offline-card .offline-login {
  max-width: 24rem;
  margin: 0 auto;
  text-align: left;
}

.offline-card .offline-login .form-group {
  margin-bottom: 1rem;
}

.offline-card .offline-aktionen {
  display: flex;
  justify-content: center;
  margin-top: 1.5rem;
}

/* Startseite-Kacheln: Text zuerst, Bild/Video darunter (Layout aus CSS) */
.startseite-card .row {
  display: flex;
  flex-direction: column;
}

.startseite-card .kachel-text,
.startseite-card .kachel-media {
  width: 100%;
}

.startseite-card .kachel-media {
  margin-top: 1.25rem;
}

/* Link um h2+Text ist sonst inline und zu schmal für den vollen Farbbalken */
.kachel-text > a {
  display: block;
}

/* Bild/Video als quadratische Kacheln; auto-fit/minmax passt die
   Spaltenzahl stufenlos an die verfügbare Breite an. */
.startseite-card .kachel-media {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
}

.startseite-card .kachel-media img,
.startseite-card .kachel-media .video-lazy-wrapper {
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: cover;
  margin-top: 0rem !important;
}

/* 2.5 Hero Startseite
   ---------------------------------------- */

.hero-startseite {
  background-image: url(/images/website-grafics/hero-background-v3.webp);
  min-height: 350px;
  padding: 3rem;
  background-position: bottom;
  background-size: cover;
}

.hero-text {
  width: min(90%, 800px);
  margin: 0 auto;
  text-align: center;
}

/* clamp() skaliert stufenlos mit der Viewportbreite, ohne eigene Breakpoints */
.hero-startseite h1 {
  font-style: normal;
  font-family: 'Nunito sans';
  font-size: clamp(1.5rem, 0.9rem + 4vw, var(--fs-3xl));
  color: #ffffff;
  background-color: var(--blau-500);
  border-radius: var(--card-radius);
  padding: 0.75rem 1.5rem;
}

.hero-startseite h2 {
  font-size: clamp(1.25rem, 0.7rem + 3vw, var(--fs-2xl));
}

.hero-startseite h3 {
  font-size: clamp(1.125rem, 0.65rem + 2.5vw, var(--fs-xl));
}


.page-header {
  padding-top: 1rem;
}

/* 2.6 Main Body
   ---------------------------------------- */

#main-body {
  margin-top: 1rem;
  padding: 0 0;
}

#main-body h1 {
    text-align: center;
}

/* 2.7 Footer
   ---------------------------------------- */

#footer {
  padding-top: 3rem;
  padding-bottom: 2rem;
  background: var(--color-footer-bg);
  color: var(--color-text-dark);
}

#footer a {
  color: var(--color-text-dark);
  text-decoration: none;
}

#footer a:hover {
  color: var(--color-orange-text);
}

.footer-logo-copyright {
  text-align: center;
}

.footer-logo-copyright img {
  height: 50px;
  width: 50px;
  margin-bottom: 1rem;
}


/* ========================================
   3. Buttons
   ======================================== */

/* 3.1 Primary Button */
.btn-primary {
  background-color: var(--color-anchor);
  border: 1px solid var(--color-anchor);
  color: #ffffff;
  border-radius: 4px;
  padding: 0.5rem 1rem;
  font-size: 1.125rem;
  font-weight: 500;
  transition: all 0.2s ease-in-out;
  font-family: "Nunito Sans", sans-serif;
}

.btn-primary:hover {
  background-color: #ffffff;
  border: 1px solid var(--color-anchor);
  color: var(--color-anchor);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 3.2 Secondary Button – dezentes Outline statt Gold/Beige */
.btn-secondary {
    background: #ffffff;
    border: 1px solid var(--blau-400);
    color: var(--blau-700);
    font-family: "Nunito Sans", sans-serif;
    border-radius: 4px;
    font-size: 1rem;
    padding: 0.5rem 1rem;
    transition: all 0.2s ease;
    font-weight: 600;
    margin-right: 1rem;
    margin-bottom: 1rem;
}

.btn-secondary:hover {
  background: var(--blau-50);
  border: 1px solid var(--blau-700);
  color: var(--blau-800);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}


/* ========================================
   4. Seitenübergreifende Komponenten
   ======================================== */

/* 4.1 Pagination
   ---------------------------------------- */

.pagination>.active>a, .pagination>.active>span {
  border-color: var(--color-text);
  background-color: var(--color-text);
}

.com-content-category-blog__navigation,
 .ebp-tiles-pagination {
  justify-content: right;
  display: flex;
}

/* 4.2 FAQ
   ---------------------------------------- */

.faq-module {
max-width: 1150px;
margin: 0 auto;
border-top: 1px solid var(--color-anchor);
}
.faq-item {
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: var(--bs-border-radius, 0.375rem);
  margin-bottom: 0.5rem;
}

.faq-title {
  text-align: center;
  padding: 2rem 0;
}

.faq-summary {
  cursor: pointer;
  list-style: none;
  padding: 0.75rem 1rem;
  background-color: var(--blau-50);
  border-radius: inherit;
  font-size: 1.2rem;
  }

.faq-summary::-webkit-details-marker {
  display: none;
}

.faq-item[open] .faq-summary {
  border-bottom: 1px solid var(--bs-border-color, #dee2e6);
  border-radius:
    var(--bs-border-radius, 0.375rem)
    var(--bs-border-radius, 0.375rem)
    0 0;
}

.faq-answer {
padding-left: 1rem;
background-color: #ffffff;
padding-top: 1rem;
padding-bottom: 1rem;
}

.faq-answer h4 {
  font-size: 1.4rem;
  border-bottom: 1px solid var(--color-text);
  margin-right: 1rem;
}


/* ========================================
   5. Seitenspezifische Module
   ======================================== */

/* 5.1 Blog-Artikel-Liste
   ---------------------------------------- */

.blog-item {
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: var(--blau-50);
  border-radius: var(--card-radius);
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(37, 84, 109, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid var(--blau-300);
  padding-top: 0px;
}

.blog-item .item-image {
  padding: 1.25rem 1.25rem 0;
}

.blog-item .item-image a img {
  width: 100%;
  height: auto;
}

.blog-item .item-content {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Farbbalken-Titel wie bei .card – für Konsistenz über die ganze Website */
.blog-item .item-content h2 {
  color: #ffffff;
  background-color: var(--blau-500);
  margin: -1.5rem -1.5rem 1rem -1.5rem;
  padding: 0.6rem 1.5rem;
}

.blog-item .published {
  font-size: 0.8rem;
}

.blog-item .readmore {
  margin-top: auto;
}

/* 5.2 Impulse-Modul Startseite (#bottom2)
   ---------------------------------------- */

#bottom2 .mod-articles-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 100px;
  list-style: none;
  padding: 0;
  margin: 0 auto;
  justify-content: center;
}

#bottom2 .mod-articles-grid li {
  flex: 0 0 350px;
  max-width: 350px;
  display: flex;
}

#bottom2 .mod-articles-item {
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: var(--blau-50);
  border-radius: var(--card-radius);
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(37, 84, 109, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid var(--blau-300);
}

#bottom2 .mod-articles-item-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.5rem;
}

#bottom2 .mod-articles-image {
  order: -1;
  margin: 0 0 1rem 0;
}

#bottom2 .mod-articles-image img {
  width: 100%;
  height: auto;
  display: block;
}

/* Farbbalken-Titel wie bei .card – für Konsistenz über die ganze Website */
#bottom2 .mod-articles-title {
  order: 0;
  color: #ffffff;
  background-color: var(--blau-500);
  margin: 0 -1.5rem 0.75rem -1.5rem;
  padding: 0.6rem 1.5rem;
}

#bottom2 .mod-articles-item-content p {
  flex: 1;
  font-size: 0.95rem;
}

#bottom2 .readmore {
  margin-top: auto;
}

/* Icon selbst entfernt via Template-Override
   templates/cassiopeia_heilandskirche2026/html/layouts/joomla/content/readmore.php
   (kein Core-Edit, wirkt jetzt site-weit statt nur hier) */
#bottom2 .readmore .btn-secondary {
  width: 100%;
}

#bottom2 > .mod-custom {
  text-align: center;
  margin-top: 2rem;
}

/* 5.3 Event Best Presentation
   ---------------------------------------- */

.eventbestpresentation h1 {
  padding-top: 1.2rem;
}

.mod-eventbestpresentation-upcoming-inner-container {
  text-align: center;
}

/* 5.3 Event Best Presentation
   ---------------------------------------- */
.mod-sebp-status {
  text-align: center;
}


/* 5.4 Artikel-Details (Impulse-Seite)
   ---------------------------------------- */

/* Joomla hängt den Page-Class-Suffix ohne Leerzeichen an: "item-page" +
   "impulse-page" ergibt "item-pageimpulse-page" als EIN Klassenname. */
.item-pageimpulse-page {
  max-width: 1200px;
  margin: 0 auto 3rem;
}

.item-pageimpulse-page > .page-header:first-of-type {
  text-align: center;
  margin-bottom: 1rem;
}

/* Artikeltitel, volle Breite, im Balken-Schema wie überall sonst */
.item-pageimpulse-page > .page-header:nth-of-type(2) {
  margin: 0 0 0.25rem 0;
}

.item-pageimpulse-page > .page-header:nth-of-type(2) h2 {
  color: #ffffff;
  background-color: var(--blau-500);
  padding: 0.75rem 1.5rem;
  margin-bottom: 3rem;
  border-radius: var(--card-radius);
}

.item-pageimpulse-page .p1 {
  font-weight: bold;
  margin-top: 0;
  margin-bottom: 1rem;
}

/* Artikeltext: responsive mehrspaltig statt einer langen Zeile */
.item-pageimpulse-page > .com-content-article__body {
  column-count: 3;
  column-gap: 2rem;
}

/* Bild als erstes Element im Fließtext: float hält es in der ersten Spalte */
.item-pageimpulse-page .com-content-article__body > .item-image {
  float: left;
  width: 50%;
  margin: 0 1.5rem 1rem 0;
}

.item-pageimpulse-page .com-content-article__body > .item-image img {
  width: 100%;
  height: auto;
  display: block;
}

.item-pageimpulse-page .article-info {
  clear: both;
  padding-top: 0.75rem;
  border-top: 0.5px solid var(--bs-border-color, #dee2e6);
  font-size: var(--fs-sm);
  color: var(--color-text);
}

/* 5.5 JE-Cards
   ---------------------------------------- */

.je-cards {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.je-card {
  padding: 1.5rem;
}

.je-card-inner {
  display: grid;
  grid-template-columns: 2fr 10fr;
  gap: 2rem;
}

/* Video links */
.je-video video {
  width: 100%;
  height: auto;
  border-radius: 0.5rem;
}

/* Text rechts */
.je-text {
  width: 100%;
}

/* Erste Card (ohne Video) automatisch einspaltig */
.je-card:first-child .je-card-inner {
  grid-template-columns: 1fr;
}

/* 5.6 Kontakt / Ansprechpersonen
   ---------------------------------------- */

.ansprechperson-titel {
  margin-bottom: 1.5rem;
}

.ansprechperson-eintrag {
  display: grid;
  grid-template-columns: 4fr 8fr;
  gap: 1.5rem;
  align-items: start;
  margin-bottom: 2rem;
}

.ansprechperson-foto img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--image-radius);
}
.ansprechperson-text {
  margin-left: 1rem;
}

.ansprechperson-text h3 {
  margin-top: 0;
  margin-bottom: 0.75rem;
}

.ansprechperson-text a {
  font-size: 0.9rem;
  word-break: break-all;
}

/* 5.7 Adresse
   ---------------------------------------- */

.adresse iframe {
  display: block;
  margin-top: 1rem;
  width: 100%;
  margin-bottom: 1rem;
}

.adresse a {
  word-break: break-all;
}

/* 5.8 Ehrenamt
   ---------------------------------------- */

.ehrenamt-team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  align-items: start;
}

.ehrenamt-team-col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ehrenamt-team-grid .btn {
  width: min-content;
}

/* 5.9 Spenden
   ---------------------------------------- */

.spenden-infos {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.5rem;
    align-items: center;
}

.spenden-zahlen-mit-code img {
    width: 100%;
    height: auto;
}

.spenden-zeit {
font-weight: bold;
padding-left: 3rem;
background: rgba(0, 0, 0, 0.03);
padding-bottom: 0.5rem;
}

.spenden-zeit::before {
  content: "\f004";
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome;
  font-weight: 400;
  position: relative;
  left: -1.5rem;
  top: 1.3rem;
  font-size: 1.1em;
  color: var(--rot-400);
}

/* 5.10 Downloads
   ---------------------------------------- */
   .download-links h2 {
    margin-bottom: 2rem
   }

/* 5.11 Media Links
   ---------------------------------------- */

.media-links {
  text-align: center;
}

/* 5.12 Begleitung
   ---------------------------------------- */

/* Modul-Wrapper */
.mod-begleitung {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* Karten-Innenlayout: 8 + 4 von 12 Spalten */
.mod-begleitung .card-row {
  display: grid;
  grid-template-columns: 8fr 4fr;
  gap: 2rem;
  align-items: start;
}

.mod-begleitung .card-col-media {
display: flex;
flex-direction: column;
gap: 1rem;
margin-top: -1.5rem;
margin-right: -1.5rem;
}

/* Bild */
.mod-begleitung .card-image {
  width: 100%;
  height: auto;
  display: block;

  object-fit: cover;

}

/* Hinweis-Absatz mit Herz-Icon */
.mod-begleitung .card-hint {
  position: relative;
  padding-left: 2rem;
  margin-top: 1rem;
  line-height: 1.6;
  background: rgba(0, 0, 0, 0.03);
  padding-top: 1rem;
padding-bottom: 1rem;
}

.mod-begleitung .card-hint::before {
  content: "\f004";
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome;
  font-weight: 400;
  position: absolute;
  left: 0.5rem;
  top: 0.8em;
  font-size: 1.1em;
  color: var(--rot-400);
}

/* Testimonial */
.mod-begleitung .card-testimonial {
  margin: 0;
  padding: 1rem 1.25rem;
  border-left: 3px solid var(--rot-400);
  background: rgba(0, 0, 0, 0.03);
  border-radius: 0 0.4rem 0.4rem 0;
}

.mod-begleitung .card-testimonial p {
  margin: 0 0 0.5rem;
  font-style: italic;
}

.mod-begleitung .card-testimonial cite {
  display: block;
  font-style: normal;
  font-weight: 600;
  font-size: 0.88em;
  opacity: 0.75;
  margin-top: 0.25rem;
}

/* Buttons */
.mod-begleitung .card-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

/* 5.13 Miete / Saal
   ---------------------------------------- */

.mietesaal-images {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 2rem;
}

.mietesaal-images img {
  width: 100%;
  height: auto;
  display: block;
}

.mietesaal-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 2rem;
}

.mietesaal-button {
  text-align: center;
}

.miete-kirche {
  margin-top: 1rem;
  margin-bottom: 2rem;
}


/* =============================================================
   6. Acymailing
   ============================================================= */

#acym_wrapper h1 {
    font-family: 'Lora' !important;
    font-size: 2rem  !important;
    line-height: 2.5rem  !important;
    letter-spacing: 0  !important;
    font-weight: 500  !important;
    color: #ffffff !important;
    background-color: var(--blau-500);
    margin-bottom: 0.75rem !important;
    font-style: italic !important;
    padding: 1.5rem !important;
}

/* Newsletter-Intro (mod_custom, #user1) und Anmeldeformular gleich hoch: die
   Spalte wird per align-items-stretch in index.php gestreckt, die Karte füllt sie aus. */
#zeile-3-fluid .row > [id^="user"] > .card {
  height: 100%;
}

#acym_wrapper a {
  font-size: 1.1rem;
  font-family: 'Nunito Sans' !important;
  padding-bottom: 0.3rem !important;
  color: var(--color-text-dark) !important;
}

#acym_wrapper .acym__front__archive .acym__front__archive__newsletter_sending-date {
  font-size: 0.75rem !important;
  font-family: 'Nunito Sans' !important;
  padding-bottom: 1rem !important;
  color: var(--color-text-dark) !important;
  text-align: center !important;
}

#acym_wrapper .grid-x {
  justify-content: center !important;
}
#acym_wrapper .acym__front__archive #acym__front__archive__search {
  padding-bottom: 2rem !important;
}

#acym_wrapper .acym__front__archive #acym__front__archive__search input {
  width: 40% !important;
  border: 1px solid var(--color-anchor) !important;
}

#acym_wrapper .acym__front__archive #acym__front__archive__search button,
#acym_wrapper .button {
    background: #ffffff !important;
    border: 1px solid var(--blau-400) !important;
    color: var(--blau-700) !important;
    font-family: "Nunito Sans", sans-serif !important;
    border-radius: 4px !important;
    font-size: 0.9rem !important;
    padding: 0.5rem 1rem !important;
    transition: all 0.2s ease !important;
    font-weight: 600 !important;
    margin-right: 1rem !important;
}

#acym_wrapper .acym__front__archive #acym__front__archive__search button:hover,
#acym_wrapper .button:hover {
  background: var(--blau-50);
  border: 1px solid var(--blau-700);
  color: var(--blau-800);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#acym_wrapper .acym__front__archive__title {
  display: none;
}

#acym_wrapper .acym__front__archive .acym__front__archive__raw, #acym_wrapper .acym__front__archive .acym__modal__handle {
text-align: center;
}
#acym_wrapper .acym_front_message_warning {
    display: none !important;
}

#archive_view h1.contentheading {
    display: none !important;
}
.acym_module_form .acyfield_text input {
  width: 100%;
}


/* ========================================
   7. Responsive Breakpoints
   ======================================== */

@media (max-width: 1199px) {

  /* Kontaktdaten zweizeilig ab unter xl */
  .contact-info {
    flex-direction: column;
    gap: 0.25rem;
    align-items: flex-end;
  }

}

 @media (max-width: 991px) {

  /* Topbar: alle drei Bereiche in einer Zeile */
  #belowtopbarleft,
  #belowtopbarmiddle,
  #belowtopbarright {
    flex: 1;
  }

  #belowtopbarleft .col-lg-4,
  #belowtopbarmiddle .col-lg-4,
  #belowtopbarright .col-lg-4 {
    width: auto;
  }

  .row.g-0 > #belowtopbarleft,
  .row.g-0 > #belowtopbarmiddle,
  .row.g-0 > #belowtopbarright {
    flex: 0 0 auto;
    width: 33.333%;
  }

  #position2, #position4 {
    padding-top: 2rem;
  }

  .ehrenamt-team-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .item-pageimpulse-page > .com-content-article__body {
    column-count: 2;
  }

 }

 @media (max-width: 767px) {

  #bottom2 .mod-articles-grid {
    gap: 1.5rem;
  }

  #bottom2 .mod-articles-grid li {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .mietesaal-images,
  .mietesaal-cols {
    grid-template-columns: 1fr;
  }

  .je-card-inner {
    grid-template-columns: 1fr;
  }

  .ansprechperson-eintrag {
    grid-template-columns: 1fr;
  }

  .ehrenamt-team-grid {
    grid-template-columns: 1fr;
  }

  .spenden-infos {
      grid-template-columns: 1fr;
  }

  .item-pageimpulse-page > .com-content-article__body {
    column-count: 1;
  }

  .item-pageimpulse-page .com-content-article__body > .item-image {
    width: 100%;
    float: none;
    margin: 0 0 1rem 0;
  }

  .zeile-background-2 {
    background-image: none;
  }

  .mod-begleitung .card-row {
  grid-template-columns: 1fr;
}

.mod-begleitung .card-col-media {
  order: -1;
}

.spenden-zahlen-mit-code {
  display: none;
}
footer .row>* {
  text-align: center;
}

#bottom2 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.acym_module form {
  text-align: center;
}

#belowtopbarmiddle img {
  display: none;
}

}