/* =====================================================================
   INGEAR – altes Design auf Cassiopeia (Übergangslösung)
   Datei: media/templates/site/cassiopeia_extended/css/user.css
   Version 16 · 20.09.2026
   Farben und Schriften nach "INGEAR Corporate Identity 2020",
   Aufbau nach Screenshots der alten Seite.
   ===================================================================== */

/* ---------- 1. Schrift: Open Sans vom eigenen Server ----------------
   Laut CI von Google Fonts – aber aus Datenschutzgründen NICHT direkt
   von Google laden, sondern die Dateien auf den eigenen Server legen:
   Ordner  media/templates/site/cassiopeia_extended/fonts/
   Dateien open-sans-400.woff2, open-sans-700.woff2, open-sans-800.woff2
   Fehlen die Dateien, nimmt der Browser einfach die Ersatzschrift.      */
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/open-sans-400.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/open-sans-700.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/open-sans-800.woff2") format("woff2"); }

/* ---------- Farben aus der CI (Seite 4) – nur hier ändern ------------ */
:root {
  --ing-rot:        #a92229;   /* Primärfarbe Rot                      */
  --ing-orange:     #f47b20;   /* Primärfarbe Orange                   */
  --ing-rot-hell:   #cb2931;   /* Sekundärfarbe Rot (Verlauf links)    */
  --ing-orange-hell:#f3a54d;   /* Sekundärfarbe Orange                 */
  --ing-rot-dunkel: #86191f;   /* Verlauf rechts (dunkleres Primärrot) */
  --ing-schwarz:    #3c3c3c;   /* "90 % Schwarz": Überschriften, Text  */
  --ing-text:       #3c3c3c;
  --ing-grau-hell:  #dadada;
  --ing-grau:       #bcbcbc;
  --ing-grau-dunkel:#6f6f6f;
  --ing-grund:      #fafafa;   /* Seitenhintergrund der alten Seite    */
  --ing-footer:     #3c3c3c;
  --ing-footer-unten: #2b2b2b;
  --ing-schrift: "Open Sans", "Segoe UI", Arial, sans-serif;

  /* Cassiopeias eigene Stellschrauben auf INGEAR umstellen */
  --cassiopeia-color-primary: var(--ing-rot);
  --cassiopeia-color-link: var(--ing-orange);
  --cassiopeia-color-hover: var(--ing-rot);
  --cassiopeia-font-family-body: var(--ing-schrift);
  --cassiopeia-font-family-headings: var(--ing-schrift);
  --cassiopeia-font-weight-headings: 800;
  --link-color: var(--ing-orange);
  --link-hover-color: var(--ing-rot);
}

/* ---------- 2. Grundlayout ------------------------------------------- */
body {
  background: var(--ing-grund);
  color: var(--ing-text);
  font-family: var(--ing-schrift);
  font-weight: 400;
  line-height: 1.75;
}
a { color: var(--ing-orange); text-decoration: none; }
.com-content-article__body a:hover, .item-page a:hover { text-decoration: underline; }
/* CI: Links im Text orange und fett */
.com-content-article__body a, .item-page a, .moduletable p a { font-weight: 700; }
a:hover, a:focus { color: var(--ing-rot); }

/* ---------- 3. Kopfbereich: weiß statt Cassiopeia-Blau ---------------- */
.container-header {
  background: #fff;
  background-image: none;
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
  color: var(--ing-schwarz);
  position: relative;
}
.container-header .grid-child { max-width: 1170px; }

/* Logo mittig */
.container-header .navbar-brand {
  margin-inline: auto;
  padding-block: 1rem .5rem;
  text-align: center;
}
.container-header .navbar-brand img { max-height: 170px; width: auto; }
.container-header .site-description { display: none; }

/* Obere Leiste rechts: Sprache, Suche, "zum Shop" */
.container-topbar {
  background: transparent;
  color: var(--ing-text);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .5rem;
  max-width: 1170px;
  margin-inline: auto;
  padding: .75rem 1rem 0;
  text-align: right;
}
.container-topbar a { color: var(--ing-schwarz); }
.container-topbar a:hover { color: var(--ing-orange); }

/* ---------- 4. Hauptmenü --------------------------------------------- */
.container-nav { justify-content: flex-end; padding-bottom: 1rem; }

.container-header .mod-menu > li > a,
.container-header .mod-menu > li > span,
.container-header .metismenu > li > a,
.container-header .metismenu > li > button {
  color: var(--ing-schwarz);
  font-size: .95rem;
  font-weight: 400;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .5rem .9rem;
  text-decoration: none;
}
.container-header .mod-menu > li.active > a,
.container-header .mod-menu > li.current > a,
.container-header .metismenu > li.active > a,
.container-header .metismenu > li > a:hover,
.container-header .mod-menu > li > a:hover {
  color: var(--ing-rot);
  background: transparent;
}

/* Punkte zwischen den Menüpunkten */
.container-header .metismenu > li + li::before,
.container-header .mod-menu > li + li::before {
  content: "•";
  color: var(--ing-schwarz);
  font-size: .7rem;
  margin-inline: .6rem;
  align-self: center;
}

/* Aufklappmenü: weiße Box mit Schatten */
.container-header .metismenu .mm-collapse,
.container-header .metismenu ul {
  background: #fff;
  border: 0;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
  padding: 1rem 0;
  min-width: 16rem;
}
.container-header .metismenu .mm-collapse a,
.container-header .metismenu ul a {
  color: var(--ing-text);
  text-transform: none;
  letter-spacing: 0;
  padding: .55rem 2.2rem;
  display: block;
}
.container-header .metismenu .mm-collapse a:hover,
.container-header .metismenu ul a:hover { color: var(--ing-rot); background: #f6f6f6; }

/* Oranger "JETZT SPENDEN"-Knopf im Menü.
   Beim Menüpunkt unter "Linktyp" > "CSS-Klasse für Link" eintragen: ing-cta */
.container-header a.ing-cta,
a.ing-cta {
  background: var(--ing-orange);
  color: #fff !important;
  padding: .75rem 2.2rem !important;
  text-transform: uppercase;
  letter-spacing: .03em;
  font-weight: 800;            /* CI: CTA Open Sans Extrabold */
}
.container-header a.ing-cta:hover { background: var(--ing-rot); }

/* ---------- 5. Spendenstand-Banner links oben ------------------------
   Eigenes Modul, Position "below-top" oder "topbar",
   Modulklasse: ing-spendenstand                                         */
.ing-spendenstand {
  position: absolute;
  top: 0;
  left: max(1rem, calc(50% - 585px));
  width: 270px;
  padding: 1rem 1rem 3.2rem;
  color: #fff;
  background: linear-gradient(160deg, var(--ing-rot-hell), var(--ing-rot-dunkel));
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%);
  z-index: 3;
  text-align: left;
}
.ing-spendenstand p { margin: 0; line-height: 1.2; font-weight: 400; font-size: 1.15rem; }
.ing-spendenstand strong,
.ing-spendenstand .betrag { display: block; font-size: 2.1rem; font-weight: 300; }

/* ---------- 6. Überschriften mit kurzem roten Strich ------------------ */
h1, h2, .page-header h1, .page-header h2,
.moduletable > h3, .card-header {
  color: var(--ing-schwarz);
  font-weight: 800;            /* CI: Überschriften Open Sans Extrabold */
  text-transform: uppercase;
  letter-spacing: .01em;
}
h3, h4 { font-weight: 700; }   /* CI: Unterüberschriften Open Sans Bold */
.page-header h1::after, .page-header h2::after,
.com-content-article h1::after, .item-page h2::after,
.moduletable > h3::after, .ing-titel::after {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  background: var(--ing-rot);
  margin-top: .8rem;
}
/* Zwischenüberschriften im Text: rot, normal */
.com-content-article__body h3,
.item-page h3 { color: var(--ing-rot); font-weight: 400; text-transform: none; }
.com-content-article__body, .item-page { text-align: justify; hyphens: auto; }

/* Artikel-Datum grau, Großbuchstaben */
.article-info, .article-info dd { color: #777; text-transform: uppercase; font-size: .95rem; }

/* ---------- 7. Buttons: dunkelrot, eckig ------------------------------ */
.btn, .btn-primary, button.btn-primary, a.btn {
  background: var(--ing-rot);
  border: 0;
  border-radius: 0;
  color: #fff;
  font-weight: 700;            /* CI: Buttons Open Sans Bold */
  padding: .9rem 2.2rem;
}
.btn:hover, .btn-primary:hover { background: var(--ing-rot-dunkel); color: #fff; }
.btn-orange { background: var(--ing-orange); text-transform: uppercase; }

/* ---------- 8. Bausteine für die Startseite ---------------------------
   Diese Klassen trägst du im jeweiligen Modul unter
   "Erweitert" > "Modulklasse" ein.                                      */

/* Roter Verlaufsstreifen (z. B. "Transparenz"): Modulklasse ing-band */
.ing-band {
  background: linear-gradient(90deg, var(--ing-rot-hell), var(--ing-rot-dunkel));
  color: #fff;
  padding: 3.5rem max(1rem, calc(50% - 585px));
  margin-inline: calc(50% - 50vw);
}
.ing-band h2, .ing-band h3, .ing-band > h3 { color: #fff; }
.ing-band h2::after, .ing-band > h3::after { background: var(--ing-orange); }

/* Runde Projektbilder mit orangem Titel.
   Jedes Projekt ist ein eigenes Modul: bei JEDEM Projekt-Modul
   Modulklasse ing-projekte eintragen und alle auf dieselbe Position
   (z. B. bottom-a) legen – dann stehen sie nebeneinander.              */
.ing-projekte,
.ing-projekte.card,
.moduletable.ing-projekte {
  background: transparent;
  border: 0;
  box-shadow: none;
  text-align: center;
}
.ing-projekte .card-body { padding: 0; }
.ing-projekte img {
  width: 140px; height: 140px;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  margin: 0 auto 1.5rem;
}
.ing-projekte a { color: var(--ing-text); text-decoration: none; font-weight: 400; }
.ing-projekte h3, .ing-projekte h4,
.ing-projekte h3 a, .ing-projekte h4 a {
  color: var(--ing-orange);
  font-weight: 400;
  text-transform: none;
  font-size: 1.9rem;
  margin-bottom: 1rem;
}
.ing-projekte h3::after { display: none; }
.ing-projekte p { line-height: 2; }

/* Überschrift-Modul ohne Kasten (z. B. "Projekte, die wir unterstützen"):
   Modulklasse ing-ohne-kasten                                            */
.ing-ohne-kasten, .ing-ohne-kasten.card {
  background: transparent; border: 0; box-shadow: none;
}

/* Zahlen im weißen Kreis (96,0 % usw.): Modulklasse ing-zahlen */
.ing-zahlen .zahl {
  display: grid; place-items: center;
  width: 135px; height: 135px;
  margin: 0 auto 1.5rem;
  border-radius: 50%;
  background: #fff;
  color: var(--ing-rot);
  font-size: 2.2rem;
  font-weight: 300;
}
.ing-zahlen h3, .ing-zahlen h4 { color: var(--ing-orange); font-weight: 400; text-transform: none; }

/* Neuigkeiten-Karten */
.blog-item, .card, .ing-karte {
  background: #fff;
  border: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

/* ---------- 9. Fußbereich: dunkelgrau, 3 Spalten ---------------------- */
.container-footer {
  background: var(--ing-footer);
  background-image: none;
  border-top: 5px solid var(--ing-rot);
  color: #eee;
  font-weight: 400;
}
.container-footer .grid-child {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.5rem;
  max-width: 1170px;
  padding-block: 3rem;
}
.container-footer .moduletable > h3,
.container-footer h3 {
  color: var(--ing-rot);
  font-size: 1.15rem;
  letter-spacing: .04em;
  margin-bottom: 1.4rem;
}
.container-footer h3::after { display: none; }
.container-footer a { color: #fff; }
.container-footer a:hover { color: var(--ing-orange); }
.container-footer ul { list-style: none; padding: 0; }
.container-footer ul li { border-bottom: 1px solid #444; padding: .8rem 0 .8rem 1.5rem; }

/* Copyright-Zeile: Modulklasse ing-copyright */
.ing-copyright {
  grid-column: 1 / -1;
  background: var(--ing-footer-unten);
  margin-inline: calc(50% - 50vw);
  padding: 1.2rem;
  text-align: center;
  color: #ccc;
}

/* Zitate in "Permanent Marker" (CI Seite 3) – optional, Modulklasse ing-zitat.
   Schriftdatei permanent-marker.woff2 ebenfalls in den fonts-Ordner.   */
@font-face { font-family: "Permanent Marker"; font-display: swap; src: url("../fonts/permanent-marker.woff2") format("woff2"); }
.ing-zitat, blockquote.ing-zitat { font-family: "Permanent Marker", var(--ing-schrift); color: var(--ing-grau-dunkel); font-size: 1.6rem; }

/* Nach-oben-Knopf */
.back-to-top-link { background: var(--ing-rot); border-radius: 0; }

/* ---------- 9b. Version 4: Kopfbereich wie früher --------------------- */
/* Sprachauswahl + Shop oben rechts NEBEN das Logo statt darüber */
@media (min-width: 992px) {
  .container-header { padding-top: 0; }
  .container-header .container-topbar {
    position: absolute;
    top: 0;
    right: max(1rem, calc(50% - 585px));
    width: auto;
    margin: 0;
    padding: .6rem 0 0;
    z-index: 4;
  }
  .container-header .container-topbar .mod-languages ul { display: flex; gap: .8rem; margin: 0; }
}
/* Sprachauswahl schlicht */
.mod-languages a { color: var(--ing-schwarz); }
.mod-languages li.lang-active a { color: var(--ing-orange); background: transparent; }

/* Shop-Knopf oben: nur roter Link wie früher, kein Kasten */
.container-topbar .btn, .container-topbar a.btn {
  background: transparent;
  color: var(--ing-rot) !important;
  padding: .2rem 0;
  font-weight: 400;
}

/* Menü: Aufklapp-Pfeile klein */
.container-header .metismenu .mm-toggler {
  padding: 0 .1rem;
  margin-left: .15rem;
  font-size: .6rem;
  color: var(--ing-schwarz);
}
.container-header .metismenu .mm-toggler::after { transform: scale(.7); }
.container-header .container-nav { justify-content: center; }

/* Startseite & Beiträge: keine weißen Kästen, mehr Luft */
.blog-featured .blog-item, .blog .blog-item, .com-content-category-blog .blog-item,
.item-page, .blog-item.card {
  background: transparent;
  border: 0;
  box-shadow: none;
}
.blog-featured .blog-item, .blog .blog-item { margin-bottom: 3rem; }
.blog-featured .item-content, .blog .item-content { padding: 0; }

/* Titel der Fußzeilen-Module (NAVIGATION, NEWSLETTER …) */
.container-footer .moduletable > h3,
.container-footer .card-header,
.container-footer h3 {
  color: var(--ing-rot);
  font-size: 1.15rem;
  text-transform: uppercase;
  background: transparent;
  border: 0;
  padding: 0;
}
.container-footer .card, .container-footer .moduletable { background: transparent; border: 0; box-shadow: none; }

/* ---------- 10. Handy und Tablet -------------------------------------- */
@media (max-width: 991.98px) {
  .ing-spendenstand {
    position: static;
    width: auto;
    clip-path: none;
    padding: .8rem 1rem;
    text-align: center;
  }
  .ing-spendenstand strong, .ing-spendenstand .betrag { font-size: 1.6rem; }
  .container-topbar { align-items: center; text-align: center; }
  .container-header .metismenu > li + li::before,
  .container-header .mod-menu > li + li::before { display: none; }
  .container-footer .grid-child { grid-template-columns: 1fr; }
  .com-content-article__body, .item-page { text-align: left; }
}

/* =====================================================================
   VERSION 5 – passend zum echten Aufbau der Startseite
   ===================================================================== */

/* Cassiopeia Extended schreibt eigene Farben (Türkis/Graublau) NACH
   dieser Datei in die Seite. "html:root" ist stärker und gewinnt.      */
html:root {
  --body-bg: var(--ing-grund);
  --body-color: var(--ing-text);
  --btnbg: var(--ing-rot);
  --btnbgh: var(--ing-rot-dunkel);
  --btncolor: #fff;
  --btncolorh: #fff;
  --footerbg: var(--ing-footer);
  --footercolor: #fff;
  --headerbg: #fff;
  --headercolor: var(--ing-schwarz);
  --link-color: var(--ing-orange);
  --link-hover-color: var(--ing-rot);
  --template-link-color: var(--ing-orange);
  --template-special-color: var(--ing-rot);
}
body { overflow-x: hidden; }

/* ---------- Kopf: Spendenstand-Banner links oben (Modul 94) ---------- */
#mod-custom94 {
  position: absolute;
  top: 0;
  left: max(1rem, calc(50% - 585px));
  width: 270px;
  padding: .9rem 1rem 3rem;
  color: #fff;
  background: linear-gradient(160deg, var(--ing-rot-hell), var(--ing-rot-dunkel));
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%);
  z-index: 3;
}
#mod-custom94::before {
  content: "aktueller Spendenstand";
  display: block;
  font-size: 1.15rem;
  line-height: 1.2;
}
html[lang^="en"] #mod-custom94::before { content: "current donations"; }
#mod-custom94 p { margin: 0; font-size: 2.1rem; font-weight: 300; line-height: 1.2; white-space: nowrap; }
.container-below-top { min-height: 0; padding: 0; }

/* ---------- Kopf: Sprache + Shop oben rechts --------------------------- */
#mod-custom234 > div { float: none !important; margin-top: .4rem !important; }
#mod-custom234 .btn,
#mod-custom234 .btn-light {
  background: transparent;
  border: 0;
  color: var(--ing-rot) !important;
  padding: .2rem 0;
  font-weight: 400;
}
.mod-languages__list li a { color: var(--ing-schwarz); padding: 0 .3rem; }
.mod-languages__list li.lang-active a { color: var(--ing-orange); background: transparent; }

/* ---------- Hauptmenü (Joomla-"mod-menu") ------------------------------ */
.container-nav { justify-content: center; }
.container-nav .mod-menu { align-items: center; flex-wrap: wrap; gap: 0; }
.container-nav .mod-menu > li { display: flex; align-items: center; position: relative; }
.container-nav .mod-menu > li > a {
  color: var(--ing-schwarz);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .95rem;
  padding: .5rem .2rem .5rem .6rem;
}
.container-nav .mod-menu > li.active > a,
.container-nav .mod-menu > li > a:hover { color: var(--ing-rot); }
.container-nav .mod-menu__toggle-sub {
  background: none; border: 0; padding: 0 .4rem 0 .1rem;
  color: var(--ing-schwarz); font-size: .55rem; line-height: 1;
}
.container-nav .mod-menu > li + li::before {
  content: "•"; font-size: .7rem; color: var(--ing-schwarz); margin: 0 .5rem;
}
/* Aufklappmenü */
.container-nav .mod-menu__sub {
  background: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
  padding: 1rem 0;
  min-width: 16rem;
  z-index: 20;
}
.container-nav .mod-menu__sub a {
  display: block;
  padding: .5rem 2rem;
  color: var(--ing-text);
  text-transform: none;
  letter-spacing: 0;
  font-size: 1rem;
}
.container-nav .mod-menu__sub a:hover { color: var(--ing-rot); background: #f6f6f6; }
.container-nav .mod-menu__sub .mod-menu__sub { box-shadow: none; padding: 0 0 0 1rem; }

/* "Jetzt spenden"-Knopf, falls ein Modul auf Position "menu" liegt */
.container-nav .mod-custom a .btn,
.container-nav .mod-custom .btn,
.container-nav .ing-spenden a {
  background: var(--ing-orange);
  color: #fff;
  border: 0;
  border-radius: 0;
  text-transform: uppercase;
  font-weight: 800;
  padding: .75rem 2rem;
  margin-left: 1rem;
}

/* ---------- Startseite: Beiträge im Raster ----------------------------- */
.blog-featured .items-leading {
  display: grid;
  grid-template-columns: repeat(30, minmax(0, 1fr));
  column-gap: 1.5rem;
}
.blog-featured .blog-item { grid-column: 1 / -1; margin-bottom: 2.5rem; }
.blog-featured .item-content { position: relative; }
.blog-featured .icons { position: absolute; top: 0; right: 0; font-size: .8rem; z-index: 2; }

/* Überschriften der Abschnitte mit rotem Strich */
.blog-featured .item-title { font-size: 2rem; margin-bottom: 1rem; }
.blog-featured .item-title::after {
  content: ""; display: block; width: 48px; height: 3px;
  background: var(--ing-rot); margin-top: .8rem;
}
.blog-featured .item-content > p { font-size: 1.1rem; }
p.justify { text-align: justify; hyphens: auto; }
p.center, div.center { text-align: center; }

/* Projekte: 5 nebeneinander, runde Bilder, oranger Titel */
.blog-featured .blog-item:has(.service-item.scale) {
  grid-column: span 6;
  text-align: center;
  margin-bottom: 3rem;
}
.service-item.scale .fa-stack { display: block; width: auto; height: auto; line-height: 1; margin-bottom: 1.5rem; }
.service-item.scale img {
  width: 140px; height: 140px;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  margin: 0 auto;
  transition: transform .2s;
}
.blog-featured a:has(.service-item) { text-decoration: none; }
.blog-featured a:hover .service-item.scale img { transform: scale(1.05); }
.service-item.scale h3 {
  color: var(--ing-orange);
  font-weight: 400;
  font-size: 1.9rem;
  text-transform: none;
  margin-bottom: 1rem;
}
.service-item.scale p { color: var(--ing-text); line-height: 2; font-weight: 400; }
@media (prefers-reduced-motion: reduce) { .service-item.scale img { transition: none; } }

/* Transparenz-Text als roter Streifen über die ganze Breite */
.blog-featured .blog-item:has(+ .blog-item .service-item.transparenz):not(:has(.service-item)) {
  background: linear-gradient(90deg, var(--ing-rot-hell), var(--ing-rot-dunkel));
  color: #fff;
  margin-inline: calc(50% - 50vw);
  padding: 3.5rem max(1rem, calc(50vw - 585px));
  margin-bottom: 3rem;
}
.blog-featured .blog-item:has(+ .blog-item .service-item.transparenz):not(:has(.service-item)) .item-title { color: #fff; }
.blog-featured .blog-item:has(+ .blog-item .service-item.transparenz):not(:has(.service-item)) .item-title::after { background: var(--ing-orange); }

/* Zahlen im weißen Kreis */
.service-item.transparenz .numbers {
  display: grid; place-items: center;
  width: 135px; height: 135px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 6px rgba(0,0,0,.06);
  color: var(--ing-rot);
  font-size: 2.3rem !important;
  font-weight: 300;
  margin-bottom: 1.5rem;
}
.service-item.transparenz .numbers[style*="23px"] { font-size: 1.6rem !important; }
.service-item.transparenz h3 { color: var(--ing-orange); font-weight: 400; font-size: 1.9rem; text-transform: none; }
.service-item.transparenz p { font-size: 1rem; }
/* die drei kleinen Zahlen nebeneinander, mittig */
.blog-featured .blog-item:has(.service-item.transparenz):not(:has(.item-title)) {
  grid-column: span 10;
  text-align: center;
}
.blog-featured .blog-item:has(.service-item.transparenz):not(:has(.item-title)) .numbers { margin-inline: auto; }

/* leerer Beitrag "Parallax Home Bottom" ausblenden */
.blog-featured .blog-item:not(:has(p, h2, h3, img, iframe, ul, ol, form, .service-item, .item-content > a)) { display: none; }

/* Buttons in Beiträgen */
.btn-colored, .btn-edgy, .btn-home, .btn-donate {
  background: var(--ing-rot); color: #fff; border: 0; border-radius: 0;
  font-weight: 700; padding: .9rem 2.2rem;
}
.btn-colored:hover, .btn-edgy:hover, .btn-home:hover, .btn-donate:hover { background: var(--ing-rot-dunkel); color: #fff; }

/* ---------- "Hilf uns zu helfen": Bild über die ganze Breite ----------- */
.container-bottom-a { grid-column: full-start / full-end; }
.container-bottom-a .card { background: none; border: 0; box-shadow: none; padding: 0; margin: 0; }
.container-bottom-a .card-body { padding: 0; }
.parallax500 .mod-custom { position: relative; }
.parallax500 img { display: block; width: 100%; height: 450px; object-fit: cover; }
.parallax500 p { margin: 0; }
.parallaxOverlay {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  margin: 0;
  color: #fff;
  font-size: clamp(2rem, 5vw, 3.5rem);
  text-shadow: 0 2px 12px rgba(0,0,0,.5);
  background: rgba(0,0,0,.25);
}
.parallaxOverlay::after { display: none; }

/* ---------- Fußzeile: 3 Spalten wie früher ----------------------------- */
.container-footer { background: var(--ing-footer); border-top: 5px solid var(--ing-rot); }
.container-footer .grid-child {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 3rem;
  align-items: start;
  padding-block: 3.5rem 0;
}
.container-footer .grid-child > * { margin-bottom: 1.8rem; }
/* Spalte 1: Navigation | Spalte 2: Adresse | Spalte 3: Newsletter, Social, Blogs */
#mod-menu90, #mod-menu91 { grid-column: 1; grid-row: 1 / span 3; }
#mod-custom92, #mod-custom93 { grid-column: 2; grid-row: 1 / span 3; }
#mod-custom102, #mod-custom186 { grid-column: 3; grid-row: 1; }
#mod-custom167, #mod-custom95 { grid-column: 3; grid-row: 2; }
#mod-custom173, #mod-custom182 { grid-column: 3; grid-row: 3; }
/* Copyright als dunkle Zeile ganz unten */
#mod-custom286 {
  grid-column: 1 / -1; grid-row: 4;
  background: var(--ing-footer-unten);
  margin: 1rem calc(50% - 50vw) 0;
  padding: 1.2rem;
  text-align: center;
  color: #ccc;
}
/* Überschriften der Spalten (kommen per CSS, im Modul muss nichts geändert werden) */
#mod-menu90::before, #mod-custom92::before, #mod-custom102::before, #mod-custom167::before, #mod-custom173::before,
#mod-menu91::before, #mod-custom93::before, #mod-custom186::before, #mod-custom95::before, #mod-custom182::before {
  display: block;
  color: var(--ing-rot);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 1.2rem;
}
#mod-menu90::before  { content: "Navigation"; }
#mod-custom92::before { content: "INGEAR - INitiative GEgen ARmut e.V."; }
#mod-custom102::before { content: "Newsletter"; }
#mod-custom167::before { content: "Soziale Medien"; }
#mod-custom173::before { content: "Unsere Blogs"; }
#mod-menu91::before  { content: "Navigation"; }
#mod-custom93::before { content: "INGEAR - INitiative GEgen ARmut e.V."; }
#mod-custom186::before { content: "Newsletter"; }
#mod-custom95::before { content: "Social Media"; }
#mod-custom182::before { content: "Our Blogs"; }

.container-footer .mod-menu { flex-direction: column; display: flex; }
.container-footer .mod-menu li { border-bottom: 1px solid #4a4a4a; padding: .8rem 0 .8rem 1.5rem; }
.container-footer a { color: #fff; text-decoration: none; }
.container-footer a:hover { color: var(--ing-orange); }
.iban-space { margin-right: .35em; }
.footer-newsletter { display: flex; }
.footer-newsletter input[type="text"] { flex: 1; border: 0; padding: .6rem .8rem; min-width: 0; }
.btn-footer-newsletter { background: #666; color: #fff; border: 0; border-radius: 0; padding: .6rem 1rem; }
.socialMedia {
  display: inline-grid; place-items: center;
  width: 52px; height: 52px; border-radius: 50%;
  background: #666; color: #ddd; margin: 0 .6rem .6rem 0; font-size: 1.3rem;
}
.container-footer .mod-custom > a { display: inline-block; }
.btn-donate { background: var(--ing-orange); text-transform: uppercase; }

/* ---------- Handy / Tablet (Version 5) ---------------------------------- */
@media (max-width: 991.98px) {
  #mod-custom94 { position: static; width: auto; clip-path: none; padding: .8rem 1rem; text-align: center; }
  #mod-custom94 p { font-size: 1.6rem; }
  .blog-featured .blog-item:has(.service-item.scale) { grid-column: span 15; }
  .blog-featured .blog-item:has(.service-item.transparenz):not(:has(.item-title)) { grid-column: 1 / -1; }
  .container-nav .mod-menu > li + li::before { display: none; }
  .container-footer .grid-child { grid-template-columns: 1fr; }
  .container-footer .grid-child > * { grid-column: 1 !important; grid-row: auto !important; }
  .parallax500 img { height: 260px; }
}

/* =====================================================================
   VERSION 6 – Abgleich mit der alten Seite
   ===================================================================== */

/* Rote Verlaufs-Streifen: "Spendenkriterien" (Beitrag mit Download-Knopf)
   und "Transparenz" – wie früher über die ganze Breite                   */
.blog-featured .blog-item:has(.btn-home) {
  background: linear-gradient(90deg, var(--ing-rot-hell), var(--ing-rot-dunkel));
  color: #fff;
  margin-inline: calc(50% - 50vw);
  padding: 3.5rem max(1rem, calc(50vw - 585px));
  margin-bottom: 3rem;
}
.blog-featured .blog-item:has(.btn-home) .item-title { color: #fff; }
.blog-featured .blog-item:has(.btn-home) .item-title::after { background: var(--ing-orange); }
.blog-featured .blog-item:has(.btn-home) .btn-home { background: #fff; color: var(--ing-rot); }
.blog-featured .blog-item:has(.btn-home) .btn-home:hover { background: var(--ing-orange); color: #fff; }
.blog-featured .blog-item:has(.btn-home) a, 
.blog-featured .blog-item:has(+ .blog-item .service-item.transparenz):not(:has(.service-item)) a { color: #fff; }

/* "Hilf uns zu helfen": Bild mit Text, wenn das Modul wieder im Beitrag steckt
   (Position additionalLoadPosition) – über die ganze Breite                */
.blog-featured .blog-item:has(.parallaxOverlay) {
  margin-inline: calc(50% - 50vw);
  margin-bottom: 3rem;
}
.blog-featured .blog-item:has(.parallaxOverlay) .mod-custom,
.blog-featured .blog-item:has(.parallaxOverlay) .item-content { position: relative; }
.blog-featured .blog-item:has(.parallaxOverlay) img {
  display: block; width: 100%; height: 450px; object-fit: cover;
}
.blog-featured .blog-item:has(.parallaxOverlay) p { margin: 0; }

/* ---------- Neuigkeiten (neues Modul "Beiträge", CSS-Klasse ing-news) ---- */
.ing-news, .ing-news.card { background: transparent; border: 0; box-shadow: none; margin-bottom: 3rem; }
.ing-news .card-header, .ing-news > h3 {
  background: transparent; border: 0; padding: 0;
  font-size: 2rem; font-weight: 800; text-transform: uppercase; color: var(--ing-schwarz);
}
.ing-news .card-header::after, .ing-news > h3::after {
  content: ""; display: block; width: 48px; height: 3px; background: var(--ing-rot); margin-top: .8rem;
}
.ing-news .card-body { padding: 1.5rem 0 0; }
.ing-news ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.8rem;
  list-style: none;
  margin: 0; padding: 0;
}
.ing-news li { margin: 0; }
.ing-news li, .ing-news .mod-articles-item {
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  display: flex; flex-direction: column;
}
.ing-news .mod-articles-item { box-shadow: none; height: 100%; }
.ing-news figure, .ing-news .mod-articles-image, .ing-news .item-image { margin: 0; }
.ing-news img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.ing-news .mod-articles-title, .ing-news h4, .ing-news li h3 {
  font-size: 1.25rem; font-weight: 700; text-transform: none; color: var(--ing-schwarz);
  margin: 1rem 1.2rem .5rem; line-height: 1.35;
}
.ing-news .mod-articles-title a, .ing-news li h3 a, .ing-news h4 a { color: var(--ing-schwarz); }
.ing-news .article-info, .ing-news time, .ing-news .mod-articles-date {
  color: #888; font-size: .9rem; margin: 0 1.2rem; text-transform: none;
}
.ing-news p, .ing-news .mod-articles-introtext { margin: .5rem 1.2rem 1rem; font-size: .98rem; }
.ing-news .readmore, .ing-news .mod-articles-readmore { margin: auto 1.2rem 1.2rem; }
.ing-news .readmore a, .ing-news .mod-articles-readmore a, .ing-news .btn {
  display: inline-block;
  background: var(--ing-rot); color: #fff; border: 0; border-radius: 0;
  font-weight: 700; padding: .6rem 1.4rem; font-size: .95rem;
}
.ing-news .readmore a:hover, .ing-news .btn:hover { background: var(--ing-rot-dunkel); color: #fff; }

@media (max-width: 991.98px) {
  .ing-news ul { grid-template-columns: 1fr; }
  .blog-featured .blog-item:has(.parallaxOverlay) img { height: 260px; }
}

/* =====================================================================
   VERSION 7 – Zahlen als moderne Kennzahl-Karten
   ===================================================================== */
/* feineres Raster: 60 Spalten -> 5 Projekte (je 12) bzw. 4 Zahlen (je 15) */
.blog-featured .items-leading { grid-template-columns: repeat(60, minmax(0, 1fr)); }
.blog-featured .blog-item:has(.service-item.scale) { grid-column: span 12; }

/* alle vier Zahlen-Beiträge nebeneinander */
.blog-featured .blog-item:has(.service-item.transparenz),
.blog-featured .blog-item:has(.service-item.transparenz):not(:has(.item-title)) {
  grid-column: span 15;
  text-align: left;
  margin-bottom: 3rem;
}
/* doppelte Überschrift "Transparenz - Hoher Spendenanteil" ausblenden */
.blog-featured .blog-item:has(.service-item.transparenz) .item-title { display: none; }

.service-item.transparenz {
  height: 100%;
  background: #fff;
  border-top: 4px solid var(--ing-rot);
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  padding: 1.6rem 1.5rem 1.4rem;
}
.service-item.transparenz .numbers,
.service-item.transparenz .numbers[style] {
  display: flex;
  align-items: baseline;
  gap: .15em;
  width: auto; height: auto;
  margin: 0 0 .9rem;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--ing-rot);
  font-size: 2.8rem !important;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.service-item.transparenz h3 {
  color: var(--ing-orange);
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 .5rem;
}
.service-item.transparenz p { font-size: .95rem; color: var(--ing-grau-dunkel); margin: 0; line-height: 1.6; }
.blog-featured .blog-item:has(.service-item.transparenz) .icons { top: -1.4rem; }

@media (max-width: 991.98px) {
  .blog-featured .blog-item:has(.service-item.scale) { grid-column: span 30; }
  .blog-featured .blog-item:has(.service-item.transparenz),
  .blog-featured .blog-item:has(.service-item.transparenz):not(:has(.item-title)) { grid-column: span 30; }
}
@media (max-width: 575.98px) {
  .blog-featured .blog-item:has(.service-item.transparenz),
  .blog-featured .blog-item:has(.service-item.transparenz):not(:has(.item-title)) { grid-column: 1 / -1; }
}

/* =====================================================================
   VERSION 8 – Projekte als weiße Karten
   ===================================================================== */
/* Abstand zwischen 60 Spalten war zu groß (59 Lücken) -> Lücke 0,
   den Abstand machen jetzt die Karten selbst                             */
.blog-featured .items-leading { column-gap: 0; }
.service-item.transparenz { margin: 0 .6rem; }
.blog-featured .blog-item:has(.service-item.scale) { margin-bottom: 1.5rem; }
.blog-featured .blog-item:has(.service-item.scale) .item-content,
.blog-featured a:has(.service-item.scale) { display: block; height: 100%; }

.service-item.scale {
  height: 100%;
  margin: 0 .6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  padding: 2rem 1.2rem 1.6rem;
  transition: transform .2s, box-shadow .2s;
}
.blog-featured a:hover .service-item.scale {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
}
.service-item.scale .fa-stack { margin-bottom: 1.2rem; }
.service-item.scale img {
  width: 150px; height: 150px;
  border: 4px solid #fff;
  box-shadow: 0 0 0 3px var(--ing-orange);
}
.service-item.scale h3 {
  color: var(--ing-schwarz);
  font-size: 1.45rem;
  font-weight: 700;
  margin: .4rem 0 .6rem;
}
.service-item.scale h3::after {
  content: ""; display: block; width: 32px; height: 3px;
  background: var(--ing-orange); margin: .6rem auto 0;
}
.service-item.scale p {
  font-size: .95rem;
  line-height: 1.6;
  color: var(--ing-grau-dunkel);
  margin: 0;
}
.service-item.scale p br { display: none; }
.service-item.scale::after {
  content: "Mehr erfahren \2192";
  margin-top: auto;
  padding-top: 1.2rem;
  color: var(--ing-orange);
  font-weight: 700;
  font-size: .9rem;
}
.blog-featured a:hover .service-item.scale::after { color: var(--ing-rot); }
@media (prefers-reduced-motion: reduce) {
  .service-item.scale, .blog-featured a:hover .service-item.scale { transition: none; transform: none; }
}
@media (max-width: 575.98px) {
  .blog-featured .blog-item:has(.service-item.scale) { grid-column: 1 / -1; }
}

/* =====================================================================
   VERSION 9 – Unterseiten: Projekte, Projektseiten, Unterstützer, Spenden
   ===================================================================== */

/* ---------- Projekte-Übersicht: Karte oben ------------------------------ */
#map { width: 100%; height: 420px; }

/* ---------- Projekte-Übersicht: Projekt-Karten, 3 pro Reihe ------------ */
.blog-featured .blog-item:has(.teaserImg) { grid-column: span 20; margin-bottom: 1.5rem; }
.blog-featured .blog-item:has(.teaserImg) .item-content {
  height: 100%;
  margin: 0 .6rem;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  transition: transform .2s, box-shadow .2s;
}
.blog-featured .blog-item:has(.teaserImg) .item-content:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
}
.teaserImg img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.teaserDesc {
  padding: 1.3rem 1.4rem .3rem;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ing-schwarz);
}
/* erste Zeile = Land (KENIA, SRI LANKA ...) klein und orange */
.teaserDesc::first-line { color: var(--ing-orange); font-size: .85rem; letter-spacing: .12em; }
.teaserExt {
  margin-top: auto;
  padding: 1rem 1.4rem 1.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}
.teaserExt a {
  display: inline-block;
  padding: .55rem 1.1rem;
  font-size: .9rem;
  font-weight: 700;
  border: 2px solid var(--ing-rot);
  color: var(--ing-rot);
  text-decoration: none;
}
.teaserExt a:first-child { background: var(--ing-rot); color: #fff; }
.teaserExt a:hover { background: var(--ing-rot-dunkel); border-color: var(--ing-rot-dunkel); color: #fff; }

/* ---------- Projektseite: Foto als Polaroid ----------------------------- */
.polaroid { position: relative; max-width: 620px; margin: .5rem auto 3rem; transform: rotate(-1.5deg); }
.polaroidInner { background: #fff; padding: 14px 14px 0; box-shadow: 0 8px 24px rgba(0,0,0,.15); }
.polaroidInner img { display: block; width: 100%; height: auto; }
.polaroid .glossy { display: none; }
.polaroid .desc {
  font-family: "Permanent Marker", var(--ing-schrift);
  font-size: 1.7rem;
  color: var(--ing-schwarz);
  text-align: center;
  padding: .7rem 0 .9rem;
}
/* statt Büroklammer ein Streifen Klebeband */
.polaroid .paperclip {
  position: absolute; top: -14px; left: 50%;
  width: 130px; height: 30px;
  transform: translateX(-50%) rotate(3deg);
  background: rgba(244,123,32,.4);
}

/* ---------- Projektseite: Blog-Hinweis als rotes Band ------------------- */
.main-bottom.card.bgMainColor {
  background: linear-gradient(90deg, var(--ing-rot-hell), var(--ing-rot-dunkel));
  color: #fff;
  border: 0;
  border-radius: 6px;
  box-shadow: none;
  margin: 0 0 2.5rem;
}
.main-bottom.card.bgMainColor .card-body { padding: 1.6rem 1.5rem; }
.blogBlock p { margin: 0; font-size: 1.15rem; text-align: center; }
.blogBlock p::before { content: "\270E"; margin-right: .6rem; font-size: 1.3rem; }
.blogBlock a, .blogBlock a:hover { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Aufklapp-Bereiche (alte "Accordions") ------------------------
   Die alten Aufklapp-Knöpfe funktionieren unter Joomla 6 nicht mehr und
   der Inhalt war versteckt. Jetzt: jeder Bereich als weiße Karte, offen.   */
.accordion-group {
  position: relative;
  background: #fff;
  border-left: 4px solid var(--ing-rot);
  border-radius: 0 6px 6px 0;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  padding: 1.8rem 2rem;
  margin-bottom: 1.5rem;
}
.accordion-group > .accordion-heading { display: none; }
.accordion-group .accordion-body,
.accordion-group .accordion-body.collapse { display: block !important; height: auto !important; }
.accordion-inner::after { content: ""; display: block; clear: both; }
.accordion-inner p { line-height: 1.75; }
.accordion-inner p:last-child { margin-bottom: 0; }
.accordion-inner img {
  float: left;
  width: min(38%, 340px);
  height: auto;
  margin: .3rem 1.8rem 1rem 0;
  border-radius: 4px;
}
.accordion-inner img.pushRight { float: right; margin: .3rem 0 1rem 1.8rem; }

/* ---------- Unterstützer: Listen als kleine Kacheln --------------------- */
ul.gear {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.5rem;
}
ul.gear li {
  margin: 0;
  background: var(--ing-grund);
  border-radius: 4px;
  padding: 1rem 1.2rem;
  color: var(--ing-grau-dunkel);
  font-size: .95rem;
  line-height: 1.55;
}
ul.gear li > a:first-child { color: var(--ing-rot); font-weight: 700; font-size: 1.05rem; }
ul.gear li br + br { display: none; }

.pIcons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 1.5rem;
}
.pIcons p {
  position: relative;
  margin: 0;
  padding: .55rem 0 .55rem 1.6rem;
  border-bottom: 1px solid var(--ing-grau-hell);
  font-size: .95rem;
  line-height: 1.5;
}
.pIcons p::before { position: absolute; left: 0; top: .5rem; color: var(--ing-orange); font-weight: 700; }
.pIcons p.melody::before { content: "\266A"; }
.pIcons p.link::before { content: "\2197"; }
.pIcons em { color: var(--ing-grau-dunkel); }
.pIcons a { font-weight: 700; }

/* ---------- Direktspende: Formular in einer Karte ----------------------- */
.securitypolicyviolation { display: none; }
.blog-featured:has(#fbIframeDiv) .blog-item:first-child {
  max-width: 820px;
  margin-inline: auto;
  text-align: center;
}
.blog-featured:has(#fbIframeDiv) .blog-item:first-child .item-title::after { margin-inline: auto; }
.blog-featured .blog-item:has(#fbIframeDiv) .item-content {
  width: 100%;
  box-sizing: border-box;
  max-width: 1170px;
  margin: 0 auto;
  background: #fff;
  border-top: 4px solid var(--ing-rot);
  border-radius: 0 0 6px 6px;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  padding: 2rem 2.5rem;
}
@media (max-width: 767.98px) {
  .blog-featured .blog-item:has(#fbIframeDiv) .item-content { padding: 1rem .6rem; border-radius: 0; }
}
/* Das Formular-Fenster war nur 300 Pixel breit (Browser-Standard) */
#fbIframeDiv { width: 100%; }
#fbIframe { display: block; border: 0; width: 100% !important; min-width: 100%; }
.fundraisingboxLogo { text-align: center; margin-top: 1rem; opacity: .7; }
.fundraisingboxLogo img { display: inline-block; max-width: 160px; height: auto; }

/* ---------- Spenden: großer Spendenstand oben --------------------------- */
#mod-custom169 {
  background: linear-gradient(90deg, var(--ing-rot-hell), var(--ing-rot-dunkel));
  color: #fff;
  text-align: center;
  padding: 3.5rem 1rem 3rem;
}
#mod-custom169 br { display: none; }
#mod-custom169 .ing-spendenstand,
#mod-custom169 #mod-custom94 {
  position: static;
  width: auto;
  clip-path: none;
  background: none;
  padding: 0;
  margin: 0;
  text-align: center;
}
#mod-custom169 #mod-custom94::before { display: none; }
#mod-custom169 #mod-custom94 p {
  font-size: clamp(2.4rem, 7vw, 4.5rem);
  font-weight: 800;
  line-height: 1.1;
  white-space: nowrap;
}
#mod-custom169 .subtext { font-size: 1.3rem; margin: .6rem 0 0; }

/* ---------- Spenden: drei Wege als nummerierte Karten ------------------- */
.blog-item:has(.unstyledListV1) .item-content > ol {
  list-style: none;
  counter-reset: ing-weg;
  margin: 2rem 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}
.blog-item:has(.unstyledListV1) .item-content > ol > li {
  counter-increment: ing-weg;
  position: relative;
  margin: 0;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  padding: 4rem 1.5rem 1.5rem;
  line-height: 1.65;
  font-size: .98rem;
}
.blog-item:has(.unstyledListV1) .item-content > ol > li::before {
  content: counter(ing-weg);
  position: absolute; top: 1.3rem; left: 1.5rem;
  width: 2.2rem; height: 2.2rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--ing-orange);
  color: #fff;
  font-weight: 800;
}
.blog-item:has(.unstyledListV1) .item-content > ol > li > strong:first-child {
  font-size: 1.1rem;
  color: var(--ing-schwarz);
  margin-bottom: .4rem;
}

/* Bankverbindung als Karte */
.unstyledListV1 {
  list-style: none;
  display: inline-block;
  text-align: left;
  background: #fff;
  border-left: 4px solid var(--ing-rot);
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  padding: 1.4rem 2rem;
  margin: 1rem 0 2rem;
}
.unstyledListV1::before {
  content: "Spendenkonto";
  display: block;
  margin-bottom: .6rem;
  color: var(--ing-rot);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
}
html[lang^="en"] .unstyledListV1::before { content: "Bank details"; }
.unstyledListV1 li { padding: .15rem 0; }
.unstyledListV1 li:first-child { font-size: 1.25rem; font-weight: 700; }

/* ---------- Handy und Tablet (Version 9) -------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .blog-featured .blog-item:has(.teaserImg) .item-content,
  .blog-featured .blog-item:has(.teaserImg) .item-content:hover { transition: none; transform: none; }
}
@media (max-width: 991.98px) {
  .blog-featured .blog-item:has(.teaserImg) { grid-column: span 30; }
  .pIcons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blog-item:has(.unstyledListV1) .item-content > ol { grid-template-columns: 1fr; }
  #map { height: 300px; }
}
@media (max-width: 575.98px) {
  .blog-featured .blog-item:has(.teaserImg) { grid-column: 1 / -1; }
  ul.gear, .pIcons { grid-template-columns: 1fr; }
  .accordion-group { padding: 1.4rem 1.2rem; }
  .accordion-inner img, .accordion-inner img.pushRight { float: none; width: 100%; margin: 0 0 1rem; }
  .polaroid { transform: none; }
}

/* =====================================================================
   VERSION 12 – Mitmachen, Aktive Mitgliedschaft, Freiwillige, Kontakt,
                Newsletter
   ===================================================================== */

/* ---------- Bilder-Leiste oben (alte Slideshows) -------------------------
   Die Slideshow-Technik gibt es nicht mehr, alle Bilder standen
   untereinander. Jetzt: eine Bilderleiste, die man seitlich wischen kann. */
.container-banner .mod-custom:has(> img + img) {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.container-banner .mod-custom:has(> img + img) > img {
  flex: none;
  height: 360px;
  width: auto;
  max-width: none;
  object-fit: cover;
  scroll-snap-align: start;
}

/* ---------- Titelbild mit Schrift (z. B. "Mach' mit!") ------------------ */
.container-banner .mod-custom:has(.parallaxOverlay) { position: relative; }
.container-banner .mod-custom:has(.parallaxOverlay) p { margin: 0; }
.container-banner .mod-custom:has(.parallaxOverlay) img {
  display: block; width: 100%; height: 420px; object-fit: cover;
}
.container-banner .parallaxOverlay { text-transform: uppercase; font-weight: 800; }

/* ---------- Texte auf Unterseiten --------------------------------------- */
.blog-featured .item-content > h3 {
  color: var(--ing-rot);
  font-size: 1.35rem;
  font-weight: 700;
  text-transform: none;
  margin: 2.2rem 0 .6rem;
}
.blog-featured .item-content > h3:first-child { margin-top: 0; }
.blog-featured .item-content > h4 {
  color: var(--ing-orange);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .1em;
  margin: 0 0 .4rem;
}
.blog-featured .item-content > p:empty { display: none; }
.blog-featured .item-content > p:first-of-type > strong:only-child { font-size: 1.2rem; line-height: 1.6; }

/* ---------- Mitmachen: die drei Wege als Karten -------------------------- */
ul.gear.additionalMarginBottom { grid-template-columns: 1fr; margin: 1.5rem 0 2rem; }
ul.gear.additionalMarginBottom > li {
  background: #fff;
  border-left: 4px solid var(--ing-orange);
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  color: var(--ing-text);
  font-size: 1rem;
  padding: 1.2rem 1.5rem;
}
ul.gear.additionalMarginBottom > li > span a,
ul.gear.additionalMarginBottom > li > a { color: var(--ing-rot); font-weight: 700; }
ul.gear li ul { margin: .6rem 0 0; padding-left: 1.2rem; list-style: disc; }
ul.gear li li {
  background: none;
  padding: .25rem 0;
  font-size: .95rem;
  color: var(--ing-grau-dunkel);
  box-shadow: none;
  border: 0;
}
ul.gear li li::marker { color: var(--ing-orange); }

/* Kasten "Melde dich einfach bei uns" */
.blog-featured .blog-item:has(> .item-content > br):not(:has(.item-title)) .item-content {
  background: linear-gradient(90deg, var(--ing-rot-hell), var(--ing-rot-dunkel));
  color: #fff;
  text-align: center;
  padding: 2rem 1.5rem;
  border-radius: 6px;
  font-size: 1.2rem;
}
.blog-featured .blog-item:has(> .item-content > br):not(:has(.item-title)) .item-content > br { display: none; }
.blog-featured .blog-item:has(> .item-content > br):not(:has(.item-title)) .item-content p { margin: 0; }
.blog-featured .blog-item:has(> .item-content > br):not(:has(.item-title)) a { color: #fff; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Freiwillige: Link-Zeilen (Downloads, Infos) ------------------ */
.blog-featured .blog-item:has(> .item-content > a > span) { margin-bottom: .6rem; }
.blog-featured .item-content > a:has(> span) {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  background: #fff;
  border-left: 4px solid var(--ing-orange);
  box-shadow: 0 1px 6px rgba(0,0,0,.05);
  padding: .9rem 1.2rem;
  color: var(--ing-text);
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none;
  transition: background .15s;
}
.blog-featured .item-content > a:has(> span):hover { background: #fff6ef; color: var(--ing-rot); }
.blog-featured .item-content > a:has(> span) > i { display: none; }
.blog-featured .item-content > a:has(> span)::before {
  content: "\2192";
  flex: none;
  width: 1.6rem; height: 1.6rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--ing-orange);
  color: #fff;
  font-size: .85rem;
  font-weight: 800;
}
.blog-featured .item-content > a[href$=".pdf"]:has(> span)::before { content: "\2193"; background: var(--ing-rot); }
.blog-featured .item-content > a[href^="javascript"]:has(> span) {
  pointer-events: none;
  border-left-color: var(--ing-grau);
  font-weight: 400;
}
.blog-featured .item-content > a[href^="javascript"]:has(> span)::before { content: "i"; background: var(--ing-grau-dunkel); font-style: italic; }
.blog-featured .item-content > a[href$=".pdf"]:has(> span) > span::after {
  content: " \00B7 Download";
  color: var(--ing-grau-dunkel);
  font-weight: 400;
  font-size: .85em;
}

/* Projekt-Überschrift (Ruanda, Sri Lanka ...) etwas abgesetzt */
.blog-featured .blog-item:has(> .item-content > h4) { margin-top: 2rem; margin-bottom: 1rem; }
.blog-featured .blog-item:has(> .item-content > h4) .item-content > h3 { font-size: 1.6rem; color: var(--ing-schwarz); }

/* "Schreib uns"-Kasten */
.serviceBlock:not(.kontakt) {
  background: #fff;
  border-left: 4px solid var(--ing-rot);
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  padding: 1.2rem 1.5rem;
  margin: 1.5rem 0;
}
.serviceBlock:not(.kontakt) i { display: none; }
.serviceBlock:not(.kontakt) a { color: var(--ing-text); text-decoration: none; }
.serviceBlock:not(.kontakt) joomla-hidden-mail a { display: block; color: var(--ing-rot); font-weight: 700; margin-top: .3rem; }

/* ---------- Kontakt: vier Karten nebeneinander ---------------------------- */
.container-component:has(.serviceBlock.kontakt) {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
  align-items: stretch;
}
.container-component:has(.serviceBlock.kontakt) > * { grid-column: 1 / -1; }
.container-component:has(.serviceBlock.kontakt) > div:has(> .serviceBlock.kontakt) { grid-column: auto; }
.container-component .entry-header h2 { margin-bottom: 1rem; }
.container-component .entry-header h2::after {
  content: ""; display: block; width: 48px; height: 3px;
  background: var(--ing-rot); margin-top: .8rem;
}
.serviceBlock.kontakt { height: 100%; }
.serviceBlock.kontakt a {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .7rem;
  padding: 2rem 1.2rem 1.6rem;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  color: var(--ing-text);
  text-align: center;
  text-decoration: none;
  transition: transform .2s, box-shadow .2s;
}
.serviceBlock.kontakt a:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(0,0,0,.12); }
.serviceBlock.kontakt a > div:first-child { display: none; }
.serviceBlock.kontakt a::before {
  content: "\2709";
  width: 3.2rem; height: 3.2rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--ing-orange);
  color: #fff;
  font-size: 1.4rem;
}
.serviceBlock.kontakt .textMainColor {
  color: var(--ing-rot);
  font-weight: 700;
  font-size: .95rem;
  overflow-wrap: anywhere;
}
.serviceBlock.kontakt small { font-size: .9rem; color: var(--ing-grau-dunkel); line-height: 1.5; }

/* ---------- Newsletter-Formular ----------------------------------------- */
#newsletter-form form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  max-width: 680px;
  background: #fff;
  border-top: 4px solid var(--ing-rot);
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  padding: 1.8rem;
  border-radius: 0 0 6px 6px;
}
#newsletter-form form > div { padding: 0; max-width: none; width: auto; flex: none; }
#newsletter-form .col-md-12,
#newsletter-form .control-group { grid-column: 1 / -1; }
#newsletter-form input[type="text"],
#newsletter-form input[type="email"] {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--ing-grau);
  border-radius: 4px;
  padding: .8rem 1rem;
  font: inherit;
  background: #fff;
}
#newsletter-form input:focus { outline: 2px solid var(--ing-orange); outline-offset: 1px; border-color: var(--ing-orange); }
#newsletter-form button { width: 100%; padding: .9rem; font-size: 1.05rem; }
.blog-featured .blog-item:has(#newsletter-form) + .blog-item .item-title { font-size: 1.2rem; }
.blog-featured .blog-item:has(#newsletter-form) + .blog-item { color: var(--ing-grau-dunkel); }

/* ---------- Handy und Tablet (Version 12) -------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .serviceBlock.kontakt a, .serviceBlock.kontakt a:hover { transition: none; transform: none; }
}
@media (max-width: 991.98px) {
  .container-component:has(.serviceBlock.kontakt) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .container-banner .mod-custom:has(> img + img) > img { height: 240px; }
  .container-banner .mod-custom:has(.parallaxOverlay) img { height: 260px; }
}
@media (max-width: 575.98px) {
  .container-component:has(.serviceBlock.kontakt) { grid-template-columns: 1fr; }
  #newsletter-form form { grid-template-columns: 1fr; padding: 1.2rem; }
}

/* =====================================================================
   VERSION 13 – Suche oben rechts als kleines, rundes Suchfeld
   (Modul "Suchindex" auf Position topbar)
   ===================================================================== */
.mod-finder { margin: 0; }
.mod-finder label {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.mod-finder .mod-finder__search,
.mod-finder .input-group { display: flex; flex-wrap: nowrap; align-items: stretch; width: auto; }
.mod-finder input[name="q"] {
  width: 190px;
  min-width: 0;
  border: 1px solid var(--ing-grau-hell);
  border-right: 0;
  border-radius: 20px 0 0 20px;
  padding: .35rem .9rem;
  font: inherit;
  font-size: .9rem;
  background: #fff;
  color: var(--ing-text);
  transition: width .2s, border-color .2s;
}
.mod-finder input[name="q"]:focus {
  width: 260px;
  outline: none;
  border-color: var(--ing-orange);
}
.mod-finder button,
.mod-finder .btn {
  flex: none;
  width: 2.6rem;
  padding: 0;
  border: 0;
  border-radius: 0 20px 20px 0;
  font-size: 0;          /* Text "Suchen" im Knopf ausblenden */
  background-color: var(--ing-rot);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1.05rem;
}
.mod-finder button:hover, .mod-finder .btn:hover { background-color: var(--ing-rot-dunkel); }
.mod-finder button span, .mod-finder .btn span { display: none; }
/* Vorschläge beim Tippen */
.mod-finder .awesomplete > ul { font-size: .9rem; text-align: left; z-index: 30; }

/* Oben rechts: Suche und Sprache in einer Zeile */
@media (min-width: 992px) {
  .container-header .container-topbar {
    flex-direction: row;
    align-items: center;
    gap: 1.2rem;
  }
}
@media (prefers-reduced-motion: reduce) { .mod-finder input[name="q"] { transition: none; } }
@media (max-width: 991.98px) {
  .container-topbar .mod-finder { width: 100%; display: flex; justify-content: center; }
  .mod-finder input[name="q"], .mod-finder input[name="q"]:focus { width: min(70vw, 320px); }
}

/* =====================================================================
   VERSION 14 – Projektseiten (Kenia, Sri Lanka, Ruanda, Südafrika,
   Bolivien). Erkennbar daran, dass sie Aufklapp-Bereiche haben.
   ===================================================================== */

/* ---------- Kopf: Titel links, Polaroid rechts auf rotem Feld ---------- */
.container-component:has(.accordion-group) .blog-featured .items-leading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: center;
  gap: 2rem;
  background: linear-gradient(120deg, var(--ing-rot-hell), var(--ing-rot-dunkel));
  border-radius: 10px;
  padding: 2.5rem 3rem;
  margin: 1rem 0 2rem;
  overflow: hidden;
}
.container-component:has(.accordion-group) .blog-featured .blog-item {
  grid-column: auto;
  margin: 0;
}
.container-component:has(.accordion-group) .blog-featured .item-title {
  color: #fff;
  font-size: clamp(1.8rem, 3.2vw, 2.8rem);
  line-height: 1.15;
  text-transform: none;
  margin: 0;
}
.container-component:has(.accordion-group) .blog-featured .item-title::before {
  content: "Unser Partnerprojekt";
  display: block;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ing-orange-hell);
  margin-bottom: .8rem;
}
.container-component:has(.accordion-group) .blog-featured .item-title::after {
  background: #fff;
  opacity: .6;
}
.container-component:has(.accordion-group) .polaroid {
  margin: .8rem auto;
  max-width: 520px;
  transform: rotate(2deg);
}
.container-component:has(.accordion-group) .polaroidInner {
  box-shadow: 0 14px 34px rgba(0,0,0,.35);
}

/* ---------- Blog-Hinweis: helles Band statt zweitem roten Block ------- */
.container-component:has(.accordion-group) .main-bottom.card.bgMainColor {
  background: #fff;
  color: var(--ing-text);
  border: 1px solid var(--ing-grau-hell);
  border-radius: 10px;
}
.container-component:has(.accordion-group) .blogBlock a,
.container-component:has(.accordion-group) .blogBlock a:hover { color: var(--ing-rot); }
.container-component:has(.accordion-group) .blogBlock p::before { color: var(--ing-orange); }

/* ---------- Abschnitte: nummerierte Karten mit größeren Fotos --------- */
.container-component:has(.accordion-group) { counter-reset: kapitel; }
.container-component .accordion-group {
  counter-increment: kapitel;
  border-left: 0;
  border-top: 4px solid var(--ing-orange);
  border-radius: 10px;
  padding: 2.4rem 2.6rem 2.2rem;
  margin-bottom: 2rem;
  box-shadow: 0 6px 22px rgba(0,0,0,.07);
}
.container-component .accordion-group::before {
  content: counter(kapitel, decimal-leading-zero);
  position: absolute;
  top: -1.4rem;
  left: 2.2rem;
  width: 2.8rem; height: 2.8rem;
  display: grid; place-items: center;
  background: var(--ing-rot);
  color: #fff;
  font-weight: 800;
  font-size: 1rem;
  border-radius: 50%;
  box-shadow: 0 3px 8px rgba(0,0,0,.2);
}
.container-component .accordion-inner img {
  width: min(44%, 420px);
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,.14);
}
.container-component .accordion-inner p { font-size: 1.05rem; }

/* erster Abschnitt (die persönliche Geschichte) leicht hervorgehoben */
.container-component .main-bottom + .accordion-group {
  background: #fff8f1;
  border-top-color: var(--ing-rot);
}

/* ---------- Handy und Tablet (Version 14) ------------------------------- */
@media (max-width: 767.98px) {
  .container-component:has(.accordion-group) .blog-featured .items-leading {
    grid-template-columns: 1fr;
    padding: 2rem 1.3rem;
    gap: 1rem;
  }
  .container-component:has(.accordion-group) .polaroid { transform: rotate(1deg); }
  .container-component .accordion-group { padding: 2.2rem 1.2rem 1.4rem; }
  .container-component .accordion-group::before { left: 1.2rem; }
  .container-component .accordion-inner img,
  .container-component .accordion-inner img.pushRight { float: none; width: 100%; margin: 0 0 1rem; }
}


/* =====================================================================
   VERSION 15 – Geschichte (Zeitleiste), Vorstand, Benefizevents,
   1 Million Mal Hilfe
   ===================================================================== */

/* ---------- Geschichte: Jahre als Zeitleiste ---------------------------
   Die Jahres-Module stehen unter dem Text. Hier bekommen sie die richtige
   Reihenfolge (neueste oben), eine Jahreszahl und eine Linie links.
   Die Zahlen hinter "mod-custom" sind die Modul-IDs aus Joomla.         */
.container-component:has(#mod-custom128) { display: flex; flex-direction: column; }
.container-component:has(#mod-custom128) > main { order: 0; }
#mod-custom285 { order: 1; } #mod-custom285::after { content: "2022"; }
#mod-custom284 { order: 2; } #mod-custom284::after { content: "2021"; }
#mod-custom283 { order: 3; } #mod-custom283::after { content: "2020"; }
#mod-custom252 { order: 4; } #mod-custom252::after { content: "2019"; }
#mod-custom251 { order: 5; } #mod-custom251::after { content: "2018"; }
#mod-custom250 { order: 6; } #mod-custom250::after { content: "2017"; }
#mod-custom207 { order: 7; } #mod-custom207::after { content: "2016"; }
#mod-custom206 { order: 8; } #mod-custom206::after { content: "2015"; }
#mod-custom120 { order: 9; } #mod-custom120::after { content: "2014"; }
#mod-custom121 { order: 10; } #mod-custom121::after { content: "2013"; }
#mod-custom122 { order: 11; } #mod-custom122::after { content: "2012"; }
#mod-custom123 { order: 12; } #mod-custom123::after { content: "2011"; }
#mod-custom124 { order: 13; } #mod-custom124::after { content: "2010"; }
#mod-custom125 { order: 14; } #mod-custom125::after { content: "2009"; }
#mod-custom126 { order: 15; } #mod-custom126::after { content: "2008"; }
#mod-custom127 { order: 16; } #mod-custom127::after { content: "2007"; }
#mod-custom128 { order: 17; } #mod-custom128::after { content: "2006"; }

.container-component:has(#mod-custom128) > .mod-custom {
  position: relative;
  display: flow-root;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 6px 22px rgba(0,0,0,.07);
  padding: 2.6rem 2.4rem 2rem;
  margin: 0 0 2.6rem 3.2rem;
}
/* Linie + Punkt links */
.container-component:has(#mod-custom128) > .mod-custom::before {
  content: "";
  position: absolute;
  left: -2.6rem; top: 0; bottom: -2.6rem;
  width: 18px;
  background:
    radial-gradient(circle at 9px 2.1rem, var(--ing-rot) 0 7px, #fafafa 7.5px 10px, transparent 10.5px),
    linear-gradient(90deg, transparent 7.5px, var(--ing-grau-hell) 7.5px 10.5px, transparent 10.5px);
}
#mod-custom128::before { bottom: auto; height: 3rem; }
/* Jahreszahl als rotes Schild */
.container-component:has(#mod-custom128) > .mod-custom::after {
  position: absolute;
  top: -1.1rem; left: 2rem;
  background: var(--ing-rot);
  color: #fff;
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: .04em;
  padding: .35rem 1.1rem;
  border-radius: 99px;
  box-shadow: 0 3px 8px rgba(0,0,0,.18);
}
.container-component:has(#mod-custom128) > .mod-custom p { line-height: 1.75; }
.container-component:has(#mod-custom128) > .mod-custom p:empty { display: none; }
.container-component:has(#mod-custom128) > .mod-custom img {
  float: left;
  width: min(34%, 280px);
  height: auto;
  margin: .3rem 1.8rem 1rem 0;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,.14);
}
.container-component:has(#mod-custom128) > .mod-custom img.pushRight { float: right; margin: .3rem 0 1rem 1.8rem; }
/* lange Projekt-Adressen als kleiner Knopf "Zum Projekt" */
.container-component:has(#mod-custom128) > .mod-custom a[href*="/projekte/"] {
  display: inline-block;
  font-size: 0;
  vertical-align: middle;
  margin-left: .3rem;
}
.container-component:has(#mod-custom128) > .mod-custom a[href*="/projekte/"]::after {
  content: "Zum Projekt \2192";
  font-size: .85rem;
  font-weight: 700;
  color: var(--ing-orange);
  background: #fff3e8;
  padding: .2rem .75rem;
  border-radius: 99px;
}
.container-component:has(#mod-custom128) > .mod-custom a[href*="/projekte/"]:hover::after { background: var(--ing-orange); color: #fff; }
/* Einleitung oben etwas größer */
.container-component:has(#mod-custom128) .blog-featured .item-content > p { font-size: 1.12rem; line-height: 1.8; }

/* ---------- Vorstand ---------------------------------------------------- */
/* Namen unter dem Foto als schmale Bildunterschrift statt riesig darüber */
/* ganzes Gruppenfoto zeigen, nichts abschneiden */
.itemid-117 .container-banner .mod-custom:has(.parallaxOverlay) img {
  height: auto;
  max-width: 1320px;
  margin: 0 auto;
  object-fit: contain;
}
.itemid-117 .container-banner .mod-custom:has(.parallaxOverlay) p { background: var(--ing-schwarz); }
.itemid-117 .container-banner .parallaxOverlay {
  position: static;
  display: block;
  background: var(--ing-schwarz);
  color: #fff;
  font-size: .95rem;
  font-weight: 400;
  line-height: 1.7;
  text-transform: none;
  text-shadow: none;
  text-align: left;
  padding: .9rem max(1.5rem, calc((100% - 1290px) / 2));
}
.itemid-117 .container-banner .parallaxOverlay strong { color: var(--ing-orange-hell); }
.itemid-117 .blog-featured .item-content {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 6px 22px rgba(0,0,0,.07);
  padding: 2.4rem 2.6rem;
  max-width: 900px;
}
.itemid-117 .blog-featured .item-content > h4:empty { display: none; }
.itemid-117 .blog-featured .item-content > h4 { margin-top: 1.6rem !important; }
.itemid-117 .blog-featured .item-content > p { font-size: 1.08rem; line-height: 2; }
.itemid-117 .blog-featured .item-content > p strong { color: var(--ing-rot); }
.itemid-117 .blog-featured .item-content > ul {
  list-style: none;
  padding: 0;
  margin: .2rem 0 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}
.itemid-117 .blog-featured .item-content > ul > li {
  background: #fafafa;
  border: 1px solid var(--ing-grau-hell);
  border-radius: 99px;
  padding: .45rem 1.1rem;
}

/* ---------- Benefizevents ------------------------------------------------ */
.itemid-129 .blog-featured .item-content {
  display: flow-root;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 6px 22px rgba(0,0,0,.07);
  padding: 2.4rem 2.6rem;
}
.itemid-129 .blog-featured .item-content > p { line-height: 1.8; }
.itemid-129 .blog-featured .item-content > p:first-of-type { font-size: 1.3rem; font-weight: 700; color: var(--ing-rot); }
.itemid-129 img.text-img {
  float: left;
  width: min(36%, 300px);
  height: auto;
  margin: .4rem 2rem 1.2rem 0;
  background: #fff;
  padding: 8px 8px 28px;
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
  transform: rotate(-2deg);
}
.itemid-129 img.text-img.right { float: right; margin: .4rem 0 1.2rem 2rem; transform: rotate(2deg); }
.itemid-129 .blog-featured .item-content > p strong { color: var(--ing-rot); }
/* "Du bist ein Meister im Bierausschank …" als Mitmach-Kasten */
.itemid-129 .blog-featured .item-content > p:nth-last-of-type(2) {
  clear: both;
  background: #fff8f1;
  border-left: 4px solid var(--ing-orange);
  border-radius: 0 8px 8px 0;
  padding: 1.2rem 1.5rem;
  margin-top: 2rem;
}
.itemid-129 .blog-featured .item-content > p:nth-last-of-type(2) a { font-weight: 800; color: var(--ing-rot); text-decoration: underline; }
.itemid-129 .blog-featured .item-content > p:last-of-type { font-style: italic; color: var(--ing-grau-dunkel); text-align: center; margin: 1.5rem 0 0; }

/* ---------- 1 Million Mal Hilfe ----------------------------------------- */
.onemillion > h1 {
  margin: 1rem 0 0;
  padding: 3.2rem 1.5rem 1rem;
  background: linear-gradient(120deg, var(--ing-rot-hell), var(--ing-rot-dunkel));
  color: #fff;
  text-align: center;
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  font-weight: 800;
  line-height: 1.1;
  border-radius: 10px 10px 0 0;
}
.onemillion > h1 + h2 {
  margin: 0 0 2.5rem;
  padding: 0 1.5rem 3rem;
  background: linear-gradient(120deg, var(--ing-rot-hell), var(--ing-rot-dunkel));
  color: var(--ing-orange-hell);
  text-align: center;
  font-size: clamp(1rem, 2vw, 1.3rem);
  letter-spacing: .08em;
  border-radius: 0 0 10px 10px;
}
.onemillion > h1::after, .onemillion > h1 + h2::after { display: none; }
.onemillion > p { max-width: 820px; margin: 0 auto 1.2rem; font-size: 1.1rem; line-height: 1.8; }
.onemillion .video {
  max-width: 880px;
  aspect-ratio: 16 / 9;
  margin: 1.8rem auto 3rem;
  border-radius: 10px;
  overflow: hidden;
  background: #111;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}
.onemillion .video iframe { display: block; width: 100%; height: 100%; border: 0; }
.onemillion .one-mio-logo { display: block; width: 100%; max-width: 320px; height: auto; margin: 2rem auto; }
.onemillion .infografik {
  display: block;
  width: 100%; max-width: 900px; height: auto;
  margin: 3.5rem auto 1.5rem;
  border-radius: 10px;
  box-shadow: 0 6px 22px rgba(0,0,0,.1);
}
.onemillion > h3 {
  max-width: 820px;
  margin: 2rem auto .2rem;
  text-align: center;
  color: var(--ing-rot);
  font-size: 1.3rem;
}
.onemillion > h3::before { content: "\25B6"; color: var(--ing-orange); font-size: .9em; margin-right: .5rem; }
.onemillion > h2.headline-divider { max-width: 820px; margin: 3.5rem auto 1rem; text-align: center; }
.onemillion > div.headline-divider { width: 90px; height: 4px; background: var(--ing-orange); border-radius: 2px; margin: 3.5rem auto 2.5rem; }

/* ---------- Handy und Tablet (Version 15) ------------------------------- */
@media (max-width: 767.98px) {
  .container-component:has(#mod-custom128) > .mod-custom { margin-left: 1.6rem; padding: 2.4rem 1.2rem 1.4rem; }
  .container-component:has(#mod-custom128) > .mod-custom::before { left: -1.75rem; }
  .container-component:has(#mod-custom128) > .mod-custom::after { left: 1.2rem; }
  .container-component:has(#mod-custom128) > .mod-custom img,
  .container-component:has(#mod-custom128) > .mod-custom img.pushRight,
  .itemid-129 img.text-img,
  .itemid-129 img.text-img.right { float: none; width: 100%; margin: 0 0 1.2rem; transform: none; }
  .itemid-117 .blog-featured .item-content,
  .itemid-129 .blog-featured .item-content { padding: 1.6rem 1.2rem; }
  .itemid-117 .container-banner .mod-custom:has(.parallaxOverlay) img { height: auto; }
}