/* ===========================================================================
 * Europe for Jesus | Grunddesign der neuen Standardseiten | Designsystem v2.6 (kompatibel zu den bisherigen Standardseiten)
 * /public/css/e4j.css
 *
 * Nur dieses Stylesheet gestaltet die neue Seite. Kein Style-Attribut in den
 * Inhaltsdateien; kein JavaScript für dekorative Effekte. Die bestehende
 * Builder-Navigation liefert das Verhalten, dieses CSS das Erscheinungsbild.
 *
 * Die Regeln sind auf .e4j-site begrenzt. Booklet-/WellS-/Legacy-Seiten
 * werden nicht beeinflusst. Seitenspezifische Overrides können im Builder
 * über custom_properties gesetzt werden (builder/page.php). Die Schriften werden von /public/fonts/ lokal geladen.
 * =========================================================================== */

@font-face {
  font-family: "E4J Fira Sans";
  src: url("/fonts/FiraSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "E4J Fira Sans";
  src: url("/fonts/FiraSans-SemiBold.ttf") format("truetype");
  font-weight: 600 800;
  font-style: normal;
  font-display: swap;
}
/* Selbst gehostete Libre Baskerville; die vier Dateien legt die Redaktion
 * unter public/fonts/ ab (Lizenz: SIL OFL 1.1). Kein externer Font-Abruf. */
@font-face {
  font-family: "E4J Libre Baskerville";
  src: url("/fonts/LibreBaskerville-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "E4J Libre Baskerville";
  src: url("/fonts/LibreBaskerville-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "E4J Libre Baskerville";
  src: url("/fonts/LibreBaskerville-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "E4J Libre Baskerville";
  src: url("/fonts/LibreBaskerville-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Identität */
  --e4j-navy: #00256d;
  --e4j-deep: #001d3e;
  --e4j-blue: #286bbb;
  --e4j-ice: #c2d2ec;
  --e4j-light: #eaf3fd;
  --e4j-white: #f7fbff;
  --e4j-ink: #11325b;
  /* Muted-Farbwert bleibt auf 70-%-Glas noch gut lesbar. */
  --e4j-ink-muted: #163e65;
  --e4j-focus: #ffe0a0;
  /* Layout */
  --e4j-max-width: 1520px;
  --e4j-gutter: clamp(18px, 3.2vw, 58px);
  --e4j-header-height: 78px;
  --e4j-logo-size: calc(var(--e4j-header-height) * .90); /* 90 % der Menüzeile */
  --e4j-iframe-height: 850px;
  --e4j-iframe-height-mobile: 900px;
  --e4j-radius: 22px;
  --e4j-card-padding: clamp(25px, 2.35vw, 40px);
  /* Oberflächen: abgestimmte Designvariante D „Tief und ruhig“ (Designlabor v4). */
  /* Pro Seite weiterhin über custom_properties überschreibbar. */
  --e4j-page-glow-1: rgba(208,230,255,.18);
  --e4j-page-glow-2: rgba(173,207,255,.17);
  --e4j-page-glow-3: rgba(171,210,255,.14);
  --e4j-page-glow-4: rgba(85,151,230,.14);
  --e4j-page-base-angle: 133deg;
  --e4j-page-base-start: #0c2c66;
  --e4j-page-base-mid1: #19488b;
  --e4j-page-base-mid2: #2d66b3;
  --e4j-page-base-end: #1e4789;

  /* Helle Glaskarten: überall einheitlich 70 % Deckkraft und dunkle Schrift.
   * Dunkle Hinweisflächen verwenden weiterhin ihre eigenen Variablen. */
  --e4j-card-angle: 143deg;
  --e4j-card-opacity-top: .70;
  --e4j-card-opacity-bottom: .70;
  --e4j-card-top-rgb: 248 252 255;
  --e4j-card-bottom-rgb: 214 231 249;
  --e4j-card-top: rgb(var(--e4j-card-top-rgb) / var(--e4j-card-opacity-top));
  --e4j-card-bottom: rgb(var(--e4j-card-bottom-rgb) / var(--e4j-card-opacity-bottom));
  --e4j-card-border: rgba(250, 253, 255, .69);
  --e4j-card-shadow: 0 16px 37px rgba(0, 24, 78, .13);
  --e4j-grid-gap: clamp(15px,1.7vw,27px);
  --e4j-document-grid-gap: clamp(13px,1.5vw,22px);
  --e4j-document-preview-max: 175px;
  /* Dunkle Panels bleiben unabhängig von der hellen Standardkarte. */
  --e4j-panel-dark-angle: 150deg;
  --e4j-panel-dark-top: rgba(9,54,118,.23);
  --e4j-panel-dark-bottom: rgba(2,31,81,.10);
  --e4j-dark-panel-bg: rgba(5,39,92,.45);
  /* Typografie: 20 px Desktop / 18 px mobil für normalen Fließtext. */
  --e4j-body-font-size: 20px;
  /* Serif für große Titel, Fira Sans für alles Übrige. */
  --e4j-sans: "E4J Fira Sans", "Fira Sans", system-ui, sans-serif;
  --e4j-serif: "E4J Libre Baskerville", Baskerville, Georgia, serif;
}

html {scroll-behavior: smooth;scroll-padding-top: calc(var(--e4j-header-height) + 16px);}
body.e4j-site, .e4j-site *, .e4j-site *::before, .e4j-site *::after {box-sizing:border-box;}
body.e4j-site {
  margin:0;min-height:100vh;color:var(--e4j-white);
  font:400 var(--e4j-body-font-size)/1.68 var(--e4j-sans);
  background:
    radial-gradient(ellipse 64% 33% at 13% 4%, var(--e4j-page-glow-1),transparent 81%),
    radial-gradient(ellipse 58% 36% at 98% 27%, var(--e4j-page-glow-2),transparent 80%),
    radial-gradient(ellipse 70% 37% at 47% 66%, var(--e4j-page-glow-3),transparent 83%),
    radial-gradient(ellipse 50% 39% at 12% 98%, var(--e4j-page-glow-4),transparent 81%),
    linear-gradient(var(--e4j-page-base-angle),var(--e4j-page-base-start) 0%,var(--e4j-page-base-mid1) 36%,var(--e4j-page-base-mid2) 67%,var(--e4j-page-base-end) 100%);
}
.e4j-site img {max-width:100%;}
.e4j-site a {color:inherit;}
.e4j-site :focus-visible, .e4j-skip-link:focus-visible {outline:3px solid var(--e4j-focus);outline-offset:3px;}
.e4j-wrap {width:min(calc(100% - 2 * var(--e4j-gutter)),var(--e4j-max-width));margin-inline:auto;}
.e4j-skip-link {position:fixed;z-index:1200;top:-90px;left:15px;padding:10px 17px;border-radius:8px;background:white;color:var(--e4j-deep)!important;}
.e4j-skip-link:focus {top:11px;}

/* ========= Wiederverwendeter Builder-Block navigation.php ================ */
.e4j-site .site-header {
  position:sticky;top:0;z-index:1000;min-height:var(--e4j-header-height);
  color:var(--e4j-white);
  background:linear-gradient(105deg,rgba(0,23,55,.985),rgba(0,37,109,.975) 60%,rgba(9,54,116,.975));
  border-bottom:1px solid rgba(220,239,255,.25);
  box-shadow:0 10px 25px rgba(0,20,57,.22);
}
.e4j-site .nav-wrapper {
  width:100%;min-height:var(--e4j-header-height);padding-inline:var(--e4j-gutter);
  display:flex;align-items:center;gap:clamp(11px,1.5vw,28px);
}
.e4j-site .brand {display:flex;align-items:center;flex:0 0 auto;gap:13px;min-width:0;color:white;text-decoration:none;}
.e4j-site .brand-logo {display:grid;place-items:center;width:var(--e4j-logo-size);height:var(--e4j-logo-size);flex:0 0 var(--e4j-logo-size);}
.e4j-site .brand-logo img {display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 2px 3px rgba(0,0,0,.23));}
.e4j-site .brand-copy {display:flex;flex-direction:column;white-space:nowrap;}
.e4j-site .brand-title {font-weight:600;font-size:clamp(18px,1.5vw,23px);line-height:1.2;}
.e4j-site .brand-meta:empty {display:none;}
.e4j-site .main-nav {display:flex;align-items:center;gap:clamp(2px,.36vw,7px);margin-left:auto;}
.e4j-site .main-nav>a:not(.nav-close) {
  display:inline-flex;align-items:center;justify-content:center;
  min-height:45px;padding:9px clamp(10px,.95vw,17px);
  color:var(--e4j-white);text-decoration:none;white-space:nowrap;
  font-size:clamp(14px,.98vw,16px);font-weight:600;line-height:1.15;
  border-radius:10px;transition:background-color .18s ease;
}
.e4j-site .main-nav>a:hover,.e4j-site .main-nav>a:focus-visible {background:rgba(237,248,255,.14);}
.e4j-site .main-nav>a[aria-current="page"] {background:rgba(207,231,255,.19);box-shadow:inset 0 -2px 0 #d5eaff;}
/* Frei einsetzbare Hervorhebung; aktuell hat kein Hauptmenüpunkt diese Klasse. */
.e4j-site .main-nav>a.nav-highlight,
.e4j-site .main-nav>a.nav-donate {border:1px solid rgba(221,238,255,.50);}
.e4j-site .nav-close {display:none;}
.e4j-site .nav-toggle {display:none;}
.e4j-site .language-switcher {
  flex:0 0 auto;display:flex;align-items:center;gap:3px;
  padding:4px;border-radius:12px;
  background:rgba(0,25,66,.46);border:1px solid rgba(214,237,255,.37);
  font-size:13px;line-height:1.4;font-weight:600;white-space:nowrap;
}
.e4j-site .language-switcher a,
.e4j-site .language-switcher span {
  min-width:42px;min-height:31px;padding:5px 9px;border-radius:8px;
  display:grid;place-items:center;text-decoration:none;
}
.e4j-site .language-switcher span[aria-current="page"] {background:#e1effe;color:var(--e4j-navy);box-shadow:0 2px 6px rgba(0,15,40,.25);}
.e4j-site .language-switcher a {color:#d9eaff;}
.e4j-site .language-switcher a:hover {background:rgba(233,245,255,.16);}
.e4j-site .language-switcher--mobile {display:none;}
/* Opt-in Sprach-Slider: Gesamte Schalterfläche = EIN Link zur anderen Sprache.
 * Der helle Indikator zeigt die aktuelle Sprache; keinerlei JS erforderlich.
 * Andere Navigationsvarianten bleiben unverändert.
 */
.e4j-site .language-switcher--slider {
  position:relative;isolation:isolate;gap:0;padding:4px;
  border-radius:999px;background:rgba(0,17,48,.55);
  border-color:rgba(224,242,255,.48);box-shadow:inset 0 1px 3px rgba(0,0,0,.2);
}
.e4j-site .language-switcher--slider::before {
  content:"";position:absolute;z-index:0;top:4px;bottom:4px;left:4px;
  width:calc((100% - 8px)/2);border-radius:999px;
  background:linear-gradient(130deg,#fff,#cfe6ff);
  box-shadow:0 2px 8px rgba(0,9,30,.38);
  transform:translateX(0);transition:transform .3s ease;
  pointer-events:none;
}
.e4j-site .language-switcher--slider[data-active-language="en"]::before {transform:translateX(100%);}
.e4j-site .language-switcher--slider>a.language-switcher__toggle {
  position:relative;z-index:1;display:grid;grid-template-columns:repeat(2,minmax(47px,1fr));
  align-items:stretch;justify-content:stretch;gap:0;min-height:34px;
  min-width:94px;padding:0;border-radius:999px;background:transparent;
  color:#cbe2ff;text-decoration:none;
}
.e4j-site .language-switcher--slider .language-switcher__toggle>span {
  display:grid;place-items:center;min-height:34px;min-width:47px;padding-inline:11px;
  font-size:13px;font-weight:600;line-height:1.4;color:#cbe2ff;
  pointer-events:none;
}
.e4j-site .language-switcher--slider .language-switcher__toggle>span.is-current {
  color:#00256d;font-weight:800;
}
.e4j-site .language-switcher--slider>a.language-switcher__toggle:hover {background:transparent;}
.e4j-site .language-switcher--slider>a.language-switcher__toggle:focus-visible {
  outline:3px solid var(--e4j-focus);outline-offset:5px;
}
/* Unsegmentierte Spracheinstellung bleibt für bestehende Navigationen erhalten;
 * dieses CSS wird nur von den neuen Standardseiten eingebunden. */
.e4j-site .language-link {text-decoration:none;}

/* ========= Bereichs-Navigation als Tabs, oben wie unten (nicht sticky) ====
 * Rechtsbündig solange genug Platz vorhanden ist; safe flex-end sorgt bei
 * Überlauf für einen erreichbaren ersten Tab. Horizontal scrollbar, kein Wrap.
 */
.e4j-subnav-shell {padding-top:15px;}
.e4j-subnav {
  display:flex;justify-content:var(--e4j-subnav-justify,safe flex-end);
  gap:clamp(11px,2.1vw,27px);overflow-x:auto;overflow-y:hidden;
  flex-wrap:nowrap;white-space:nowrap;scrollbar-width:thin;
  padding-block:2px 10px;
}
.e4j-subnav a {
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:8px 3px 9px;
  border:0;border-bottom:2px solid transparent;border-radius:0;background:transparent;
  color:#edf6ff;text-decoration:none;font-size:15px;font-weight:600;
}
.e4j-subnav a:hover {border-bottom-color:rgba(237,246,255,.65);background:transparent;}

/* ========= Hero: bestehender Builder-Block hero-split ==================== */
.e4j-about-main {display:block;}
.e4j-intro {display:grid;grid-template-columns:minmax(0,var(--e4j-hero-text-width,3fr)) minmax(0,var(--e4j-hero-image-width,2fr));gap:clamp(35px,6vw,100px);align-items:center;padding-block:clamp(50px,5.5vw,93px) clamp(55px,6.6vw,112px);}
.e4j-intro-copy,.e4j-intro-copy-inner {min-width:0;}
.e4j-eyebrow,.e4j-section-kicker {font-size:12px;letter-spacing:.17em;text-transform:uppercase;font-weight:600;color:#d4eaff;}
.e4j-intro h1 {font:normal clamp(53px,6.3vw,99px)/.99 var(--e4j-serif);letter-spacing:-.03em;margin:0 0 22px;text-wrap:balance;}
.e4j-intro-lead {font:normal clamp(26px,2.45vw,40px)/1.21 var(--e4j-serif);margin:0 0 25px;color:#fff;}
.e4j-intro-copy-inner>p:not(.e4j-eyebrow):not(.e4j-intro-lead) {max-width:850px;font-size:var(--e4j-body-font-size);line-height:1.68;margin:0 0 16px;color:#f0f6ff;}
.e4j-intro-motif {position:relative;min-height:0;display:grid;place-items:center;}
.e4j-intro-logo {filter:drop-shadow(0 9px 17px rgba(0,15,48,.39));}
.e4j-intro-vision {position:absolute;z-index:2;right:-10px;bottom:-29px;max-width:245px;padding:17px 20px;border-radius:15px;background:rgba(7,47,109,.92);border:1px solid rgba(223,239,255,.38);font:normal 19px/1.27 var(--e4j-serif);box-shadow:0 13px 28px rgba(0,24,68,.18);}

/* ========= Flexibles Kartenraster: Struktur aus elements[], Design nur CSS == */
.e4j-themes {padding-bottom:clamp(65px,6vw,105px);}
.e4j-section-heading {max-width:960px;margin-bottom:33px;}
.e4j-section-heading h2 {font:normal clamp(31px,3.2vw,51px)/1.2 var(--e4j-serif);letter-spacing:-.016em;margin:4px 0 0;}
/* Kurzer Abstand, wenn nach der Überschrift ein separater Hinweis folgt. */
.e4j-section-heading--with-note {margin-bottom:12px;}
/* Wiederverwendbarer, dezenter Hinweis über volle Containerbreite.
 * Auf Wunsch pro Seite via --e4j-section-note-max-width begrenzbar. */
.e4j-section-note {max-width:var(--e4j-section-note-max-width,none);margin:0 0 clamp(18px,2.2vw,30px);color:#e6f0ff;font-size:clamp(16px,1.05vw,18px);line-height:1.6;}
.e4j-section-note a {color:inherit;text-decoration:underline;text-underline-offset:.2em;}
.e4j-section-note a:hover,.e4j-section-note a:focus-visible {color:#fff;text-decoration-thickness:2px;}
/* Generische, wahlweise zwei-/dreispaltige Raster statt Seiten-Selektoren. */
.e4j-theme-grid,.e4j-grid--three {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--e4j-grid-gap);align-items:stretch;}
.e4j-grid--two {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--e4j-document-grid-gap);align-items:stretch;}
.e4j-theme-card {display:flex;flex-direction:column;min-width:0;border:1px solid var(--e4j-card-border);border-radius:var(--e4j-radius);color:var(--e4j-ink);background:linear-gradient(var(--e4j-card-angle),var(--e4j-card-top),var(--e4j-card-bottom));box-shadow:var(--e4j-card-shadow);transition:transform .18s ease,box-shadow .18s ease;scroll-margin-top:95px;overflow:hidden;}
.e4j-theme-card--clickable:hover {transform:translateY(-3px);box-shadow:0 23px 45px rgba(0,24,78,.16);}
.e4j-theme-card--clickable {cursor:pointer;}
/* Die Linkfläche füllt die gesamte Karte – auch Zwischenräume und Ränder. */
.e4j-card-surface,.e4j-card-content {display:flex;flex:1;flex-direction:column;min-width:0;padding:var(--e4j-card-padding);color:inherit;text-decoration:none;}
.e4j-card-surface:hover {color:inherit;text-decoration:none;}
.e4j-card-surface:focus-visible {outline:3px solid var(--e4j-navy);outline-offset:-5px;border-radius:var(--e4j-radius);}
.e4j-theme-kicker {align-self:flex-start;margin:0 0 28px!important;color:var(--e4j-ink-muted)!important;letter-spacing:.10em;text-transform:uppercase;font-size:12px!important;font-weight:600;}
.e4j-theme-card h3 {font:normal clamp(30px,2.4vw,40px)/1.13 var(--e4j-serif);letter-spacing:-.025em;color:var(--e4j-deep);margin:0 0 18px;}
.e4j-theme-subtitle {margin:-5px 0 18px!important;color:var(--e4j-ink-muted)!important;font-weight:600;font-size:13px!important;}
.e4j-theme-body {margin:0 0 25px!important;flex:1;color:var(--e4j-ink)!important;font-size:var(--e4j-body-font-size);line-height:1.68;}
.e4j-card-link {display:inline-flex;align-items:center;gap:10px;align-self:flex-start;margin-top:auto;padding:12px 0 5px;color:var(--e4j-navy)!important;text-decoration:none;font-size:15px;font-weight:600;border-bottom:2px solid rgba(40,107,187,.31);}
a.e4j-card-link:hover,.e4j-card-surface:hover .e4j-card-link {border-color:var(--e4j-navy);}
.e4j-card-link::after {content:"→";font-size:21px;line-height:1;}

/* ========= Action-Panel: wiederverwendbare Text-/Aktionssektion ========= */
/* e4j-wrap begrenzt die Breite auf den gemeinsamen Inhaltscontainer.
 * Bei Bedarf kann ein einzelnes Panel über .e4j-discover {max-width:...}
 * schmaler gesetzt werden, ohne das Block-Markup zu ändern.
 */
.e4j-discover {
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(225px,.7fr);
  align-items:center;
  gap:clamp(27px,5vw,80px);
  margin-bottom:clamp(55px,6vw,97px);
  padding:clamp(30px,4.5vw,64px);
  background:linear-gradient(128deg,rgba(0,37,95,.77),rgba(25,87,155,.59));
  border:1px solid rgba(228,244,255,.39);
  border-radius:var(--e4j-radius);
  box-shadow:0 15px 36px rgba(0,23,64,.10);
}
.e4j-discover h2 {font:normal clamp(34px,3vw,50px)/1.12 var(--e4j-serif);margin:4px 0 17px;}
.e4j-discover p:not(.e4j-section-kicker) {margin:0;max-width:840px;color:#ebf5ff;}
/* Neben dem Text: Buttons untereinander, rechtsbündig und gleich breit. */
.e4j-discover-actions {
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-self:end;
  gap:11px;
  width:min(100%,260px);
  min-width:0;
}
/* Gleiche Farbe für alle Aktionen: der bisherige optionale primary-Marker
 * hat auf diesen Standardseiten bewusst keine optische Sonderstellung. */
.e4j-discover .e4j-button,
.e4j-discover .e4j-button--primary {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  min-width:0;
  min-height:51px;
  padding:10px 16px;
  background:rgba(244,250,255,.96);
  color:var(--e4j-navy)!important;
  border:1px solid rgba(245,251,255,.82);
  border-radius:11px;
  text-decoration:none;
  font-size:15px;
  font-weight:600;
  line-height:1.2;
  text-align:center;
  transition:background-color .18s ease,box-shadow .18s ease;
}
.e4j-discover .e4j-button:hover,
.e4j-discover .e4j-button--primary:hover {
  background:#fff;
  box-shadow:0 4px 14px rgba(0,22,68,.16);
}
.e4j-discover .e4j-button::after {content:"→";font-size:20px;line-height:1;}

/* ========= Footer (vorhandener Block footer.php) ========================= */
.e4j-site>footer.wrapper {width:100%;min-height:77px;padding:25px var(--e4j-gutter);border-top:1px solid rgba(224,241,255,.26);background:rgba(0,23,54,.63);text-align:center;}
.e4j-site>footer .footer-meta {margin:0;color:#d4e8fd;font-size:13px;}
.e4j-site>footer a {text-decoration:underline;text-underline-offset:3px;background:transparent;color:inherit;}
.e4j-site>footer a:hover,.e4j-site>footer a:focus-visible {background:transparent;color:#fff;text-decoration-thickness:2px;}

/* ========= Responsive Kopfzeile ==========================================
 * Wortmarke immer neben dem Logo, auch bei kompakter Desktop-Navigation.
 * Hauptnavigation ab 971 px sichtbar, darunter als Burger-Menü.
 */
@media (max-width:1370px) {
  .e4j-site .nav-wrapper {gap:13px;}
}
/* Burger-Modus: Logo + Wortmarke + Sprachsegment (wenn Platz) + Menü. */
@media (max-width:970px) {
  .e4j-site .site-header {position:sticky;}
  .e4j-site .main-nav {
    position:absolute;top:calc(100% + 1px);left:var(--e4j-gutter);right:var(--e4j-gutter);
    display:flex;flex-direction:column;align-items:stretch;gap:4px;margin:0;
    max-height:0;opacity:0;visibility:hidden;pointer-events:none;overflow:hidden;
    transform:translateY(-7px) scale(.98);transform-origin:top center;
    padding:0 14px;border:0 solid rgba(220,237,255,.27);border-radius:0 0 17px 17px;
    background:linear-gradient(145deg,rgba(0,24,60,.992),rgba(0,39,96,.992));
    box-shadow:0 21px 37px rgba(0,17,46,.28);
    transition:max-height .43s ease,opacity .25s ease,transform .35s ease,visibility 0s linear .43s,padding .35s ease,border-width .35s ease;
  }
  .e4j-site .main-nav:target,
  .e4j-site .main-nav[style*="display: flex"] {
    max-height:560px;opacity:1;visibility:visible;pointer-events:auto;
    padding:13px 14px 17px;border-width:1px;transform:translateY(0) scale(1);
    transition:max-height .43s ease,opacity .25s ease,transform .35s ease,visibility 0s,padding .35s ease,border-width .35s ease;
  }
  .e4j-site .main-nav>a:not(.nav-close) {justify-content:flex-start;padding:12px 17px;min-height:47px;font-size:16px;}
  .e4j-site .main-nav>.nav-close {display:flex;align-items:center;gap:10px;align-self:flex-end;padding:6px 10px;font-size:13px;text-decoration:none;color:#dcefff;}
  .e4j-site .main-nav>.nav-close>span:first-child {font-size:25px;line-height:1;}
  .e4j-site .language-switcher--header {margin-left:auto;}
  .e4j-site .nav-toggle {display:flex;align-items:center;justify-content:center;gap:10px;min-width:47px;min-height:45px;border-radius:11px;border:1px solid rgba(225,240,255,.42);padding:8px 11px;color:#f0f7ff;text-decoration:none;font-size:13px;}
  .e4j-site .nav-toggle .burger {display:block;position:relative;width:20px;height:2px;border-radius:3px;background:currentColor;box-shadow:0 -6px currentColor,0 6px currentColor;}
  .e4j-site .nav-toggle[aria-expanded="true"] {background:rgba(255,255,255,.14);}
  .e4j-theme-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
  .e4j-theme-grid>.e4j-theme-card:last-child {grid-column:1/-1;}
  .e4j-intro {grid-template-columns:minmax(0,var(--e4j-hero-text-width,3fr)) minmax(0,var(--e4j-hero-image-width,2fr));gap:28px;}
  .e4j-intro-vision {right:0;bottom:-29px;font-size:16px;}
}
@media (max-width:700px) {
  .e4j-intro {grid-template-columns:1fr;padding-top:42px;padding-bottom:66px;}
  .e4j-intro-motif {display:grid;}
  .e4j-theme-grid {grid-template-columns:1fr;}
  .e4j-theme-grid>.e4j-theme-card:last-child {grid-column:auto;}
  .e4j-discover {grid-template-columns:1fr;}
  /* Unter dem Text: nebeneinander, gleich breit; weitere Aktionen in Folgereihen. */
  .e4j-discover-actions {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    justify-self:stretch;
    width:100%;
  }
}
/* 4 Sehr schmal: Logo + Burger, DE/EN-Segment im geöffneten Menü */
@media (max-width:720px) {
  :root {--e4j-body-font-size:18px;}
}
@media (max-width:520px) {
  :root {--e4j-header-height:68px;--e4j-gutter:18px;}

  .e4j-site .nav-toggle {margin-left:auto;}
  .e4j-site .language-switcher--header {display:none;}
  .e4j-site .language-switcher--mobile {display:flex;margin:9px 12px 5px;align-self:flex-start;}
  .e4j-intro h1 {font-size:clamp(47px,11vw,61px);}
  .e4j-intro-lead {font-size:clamp(26px,7vw,34px);}
  .e4j-card-surface, .e4j-card-content {padding:26px 25px;}
  .e4j-discover {padding:28px 24px;}
  /* Auch auf sehr schmalen Geräten bleiben zwei Buttons nebeneinander. */
  .e4j-discover .e4j-button {width:100%;font-size:clamp(11px,3.2vw,14px);padding-inline:6px;gap:5px;}
  .e4j-discover .e4j-button::after {font-size:17px;}
}
/* Auf sehr schmalen Smartphones bleibt die Wortmarke sichtbar.
 * Nur die redundante Menü-Beschriftung entfällt; aria-label bleibt erhalten. */
@media (max-width:375px) {
  .e4j-site .nav-toggle {flex-shrink:0;}
  .e4j-site .nav-toggle-text {display:none;}
}
@media (max-width:320px) {
  .e4j-site .brand {gap:9px;}
  .e4j-site .nav-wrapper {gap:9px;}
}
@media (max-width:400px) {
  /* Lange Wörter (z. B. Veranstaltungen) ohne horizontales Überlaufen. */
  .e4j-discover .e4j-button::after {display:none;}
}
@media (prefers-reduced-motion:reduce) {
  html {scroll-behavior:auto;}
  .e4j-site *, .e4j-site *::before, .e4j-site *::after {transition:none!important;animation:none!important;}
}

/* ========= Leere Standardseiten: hero-split im Überschriftenmodus =========
 * Gleicher Builder-Block, eigenes Layout über eine Klassenwahl in Content.
 * Die echten Seiteninhalte werden später über main-Blöcke ergänzt.
 */
.e4j-standard-main {display:block;min-height:clamp(420px,58vh,760px);}
.e4j-placeholder-hero {
  display:block;
  padding-block:clamp(70px,9vw,145px) clamp(90px,13vw,190px);
}
.e4j-placeholder-hero .hero-aside {display:none;}
.e4j-placeholder-hero .e4j-placeholder-title {
  font:normal clamp(48px,7vw,100px)/1.08 var(--e4j-serif);
  letter-spacing:-.025em;
  margin:0;
  overflow-wrap:break-word;
}
.e4j-subnav a[aria-current="page"] {
  background:transparent;
  color:#fff;
  border-bottom-color:#fff;
}

/* ========= Wiederverwendbarer iframe-Block / Impressum ===================
 * Nur Darstellung. Quelle, Titel und Beschriftung liegen in content/iframe.
 * Wegen Same-Origin-Schutz keine automatische Höhenmessung des Fremdinhalts.
 */
.e4j-legal-page .e4j-standard-main {min-height:0;}
.e4j-legal-page .e4j-legal-hero {
  padding-block:clamp(38px,5vw,72px) clamp(25px,3.5vw,49px);
}
.e4j-legal-page .e4j-legal-hero .e4j-placeholder-title {
  font-size:clamp(41px,5.5vw,74px);
}
.e4j-iframe-section {
  margin-bottom:clamp(58px,6vw,95px);
}
.e4j-iframe-shell {
  overflow:hidden;
  background:rgba(246,251,255,.97);
  border:1px solid rgba(236,246,255,.76);
  border-radius:var(--e4j-radius);
  box-shadow:0 15px 35px rgba(0,24,67,.12);
}
.e4j-iframe {
  display:block;
  width:100%;
  height:var(--e4j-iframe-height);
  border:0;
  background:#fff;
}
.e4j-iframe-direct {margin:15px 0 0;}
.e4j-iframe-direct a {color:#f0f8ff;text-decoration:underline;text-underline-offset:3px;}
.e4j-iframe-direct a:hover {color:#fff;}
.e4j-iframe-note {max-width:72ch;color:#d9eafb;margin:10px 0 0;font-size:14px;line-height:1.6;}
@media (max-width:700px) {
  .e4j-iframe {height:var(--e4j-iframe-height-mobile);}
}

/* ========= Spenden: zweispaltiger Hero und flexible Textspalten ===========
 * Der bestehende Hero-Block stellt Bild und Text nebeneinander dar.
 * Bilder mit der generischen Klasse .hero-aside-image nutzen die gesamte
 * verfügbare Breite ihrer Spalte, ohne bildspezifische Größenvariablen.
 * Unter dem Hero: zwei gleiche Spalten; links Text und PDF, rechts das Konto.
 * Bei wenig Platz stehen die drei Bereiche nacheinander.
 */
.e4j-donation-page .e4j-standard-main {min-height:0;}
.e4j-donation-hero {
  display:grid;
  grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);
  gap:clamp(24px,4.2vw,72px);
  align-items:center;
  padding-block:clamp(43px,5vw,80px) clamp(44px,5vw,78px);
}
.e4j-donation-hero .hero-copy,
.e4j-donation-hero .hero-copy-inner,
.e4j-donation-hero .hero-aside {min-width:0;}
.e4j-donation-hero h1 {font:normal clamp(54px,6.6vw,95px)/1.04 var(--e4j-serif);letter-spacing:-.025em;margin:0 0 18px;}
.e4j-donation-lead {font:normal clamp(26px,2.8vw,41px)/1.18 var(--e4j-serif);margin:0 0 24px;}
.e4j-donation-hero .hero-copy-inner>p:not(.e4j-eyebrow) {max-width:75ch;margin:0 0 17px;color:#ecf5ff;font-size:var(--e4j-body-font-size);line-height:1.72;}
.e4j-donation-illustration {display:grid;place-items:center;}
/* Allgemeine Hero-Bildregel: Breite der vorhandenen Spalte statt pro Bild
 * definierter width-/height-Variablen. Die Originalproportion bleibt erhalten. */
.e4j-site .hero-split .hero-aside-image {
  display:block;width:100%;max-width:100%;height:auto;max-height:none;
  object-fit:contain;
}
.e4j-donation-thanks-image {filter:drop-shadow(0 15px 28px rgba(0,22,66,.18));}

.e4j-donation-details {padding-bottom:clamp(65px,7vw,112px);}
.e4j-donation-details .e4j-section-heading {margin-bottom:29px;}
/* Breite Ansicht: zwei gleich breite Spalten. Links das Spendenkonto
 * mit Banking-QR über beide Zeilen, rechts Bescheinigung und PDF-Kachel.
 * Die DOM-Reihenfolge bleibt für schmale Ansichten bewusst
 * Konto -> Hinweise -> Download.
 * Keine neuen Blöcke, kein JavaScript. */
.e4j-donation-details-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-areas:
    "account receipt"
    "account document";
  gap:clamp(20px,2.7vw,38px) clamp(24px,3.6vw,56px);
  align-items:start;
}
/* Die spezifischen Kartenselektoren setzen auch die generische theme-grid-
 * Regel zurück, die sonst bei mittleren Breiten die letzte Karte spannt. */
.e4j-donation-details-grid>.e4j-theme-card.e4j-donation-account-card {grid-area:account;}
.e4j-donation-details-grid>.e4j-theme-card.e4j-donation-receipt-card {grid-area:receipt;}
.e4j-donation-details-grid>.e4j-theme-card.e4j-donation-document-card {grid-area:document;}
@media (max-width:780px) {
  .e4j-donation-details-grid {
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"account" "receipt" "document";
  }
}
/* Grundlayout: neutrale Textspalten ohne Karteneffekt; Konto und Dokument
 * bekommen gezielt eigene Oberflächen, unabhängig vom generischen Kartenstil. */
.e4j-donation-details-grid>.e4j-theme-card,
.e4j-donation-details-grid>.e4j-theme-card:nth-child(n) {
  display:block;min-width:0;overflow:visible;
  border:0;border-radius:0;background:none;box-shadow:none;
  color:var(--e4j-white);transform:none;transition:none;
}
.e4j-donation-details-grid>.e4j-theme-card--clickable:hover {
  transform:none;box-shadow:none;
}
.e4j-donation-details-grid .e4j-card-content,
.e4j-donation-details-grid .e4j-card-surface {
  display:block;padding:0;color:inherit;background:none;border-radius:0;
  text-decoration:none;
}
/* Konto: dezenter, klarer Rahmen statt bloßer linker Linie. */
.e4j-donation-details-grid>.e4j-theme-card.e4j-donation-account-card {
  padding:clamp(17px,1.8vw,27px);
  border:1px solid rgba(233,245,255,.56);
  border-radius:15px;
  background:linear-gradient(var(--e4j-panel-dark-angle),var(--e4j-panel-dark-top),var(--e4j-panel-dark-bottom));
  box-shadow:0 10px 24px rgba(0,22,69,.10);
}
.e4j-donation-card-kicker {
  display:block;color:#d3eaff;letter-spacing:.11em;text-transform:uppercase;
  font-size:12px;font-weight:700;line-height:1.35;margin:0 0 12px;
}
.e4j-donation-details-grid h3.e4j-donation-card-title {
  font:normal clamp(25px,2.15vw,34px)/1.15 var(--e4j-serif);
  color:#fff;margin:0 0 19px;overflow-wrap:break-word;hyphens:auto;
}
.e4j-donation-details .e4j-bank-list {list-style:none;padding:0;margin:0;display:grid;gap:0;}
.e4j-donation-details .e4j-bank-list li {display:grid;grid-template-columns:1fr;gap:2px;padding:9px 0;border-bottom:1px solid rgba(221,239,255,.21);}
.e4j-donation-details .e4j-bank-label {font-size:12px;font-weight:650;color:#c9e4ff;}
.e4j-donation-details .e4j-bank-value {
  font:600 clamp(15px,1.18vw,18px)/1.45 var(--e4j-sans);
  color:#fff;overflow-wrap:anywhere;
}
.e4j-donation-details .e4j-bank-iban {font-variant-numeric:tabular-nums;letter-spacing:0;}

/* EPC-GiroCode unter der Kontoverbindung. Das QR-Bild ist ein lokales, statisches
 * Asset; der Scan findet ausschließlich in einer Banking-App statt. */
.e4j-donation-details .e4j-bank-qr {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:clamp(12px,1.3vw,18px);
  margin:19px 0 16px;
  padding:15px 0;
  border-block:1px solid rgba(221,239,255,.21);
}
.e4j-donation-details .e4j-bank-qr-image {
  display:block;
  width:clamp(128px,42%,168px);
  height:auto;
  max-width:100%;
  aspect-ratio:1;
  object-fit:contain;
  background:#fff;
  border-radius:4px;
  flex:0 0 auto;
}
.e4j-donation-details .e4j-bank-qr-copy {
  flex:1 1 130px;
  min-width:0;
}
.e4j-donation-details .e4j-bank-qr-title {
  display:block;
  color:#fff;
  font-size:clamp(14px,1.08vw,16px);
  line-height:1.4;
  margin-bottom:6px;
}
.e4j-donation-details .e4j-bank-qr-hint {
  color:#dbeaff;
  font-size:16px;
  line-height:1.6;
  margin:0;
}

.e4j-donation-details .e4j-donation-card-copy,
.e4j-donation-details .e4j-donation-card-emphasis {
  font-size:var(--e4j-body-font-size);line-height:1.63;color:#edf5ff;margin:0 0 15px;
}
.e4j-donation-details .e4j-donation-card-emphasis {font-weight:650;color:#fff;}
.e4j-donation-details .e4j-donation-fine-print {
  font-size:13px;line-height:1.62;color:#d0e4fa;margin:12px 0 0;
}
/* Datenschutzlink immer als eigener Absatz, statt am Ende des Fliesstexts. */
.e4j-donation-details .e4j-donation-privacy-row {margin:0;}
.e4j-donation-privacy-link {color:#fff!important;text-decoration:underline;text-underline-offset:3px;}
/* PDF: eigenständige, durchgängig klickbare Download-Kachel.
 * Titel oben, Vorschaubild rechts neben dem erklärenden Text. */
.e4j-donation-details-grid>.e4j-theme-card.e4j-donation-document-card,
.e4j-donation-details-grid>.e4j-theme-card.e4j-donation-document-card:nth-child(n) {
  display:flex;
  flex-direction:column;
  align-self:stretch;
  border:1px solid rgba(245,250,255,.91);
  border-radius:15px;
  overflow:hidden;
  background:linear-gradient(var(--e4j-card-angle),var(--e4j-card-top),var(--e4j-card-bottom));
  box-shadow:0 13px 30px rgba(0,28,74,.14);
  transition:transform .18s ease,box-shadow .18s ease;
}
.e4j-donation-details-grid>.e4j-donation-document-card.e4j-theme-card--clickable:hover {
  transform:translateY(-3px);
  box-shadow:0 18px 35px rgba(0,28,74,.23);
}
.e4j-donation-details-grid .e4j-donation-document-card .e4j-card-surface {
  display:flex;
  flex:1;
  flex-direction:column;
  padding:clamp(17px,1.8vw,27px);
  color:#173c68;
  background:transparent;
  text-decoration:none;
}
.e4j-donation-details-grid .e4j-donation-document-card .e4j-donation-card-kicker {
  color:#416c9a;
}
.e4j-donation-details-grid .e4j-donation-document-card h3.e4j-donation-card-title {
  color:#082b55;
}
.e4j-document-body {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,42%);
  align-items:center;
  gap:clamp(10px,1.1vw,17px);
  margin:0 0 15px;
}
.e4j-document-copy {min-width:0;}
.e4j-donation-details-grid .e4j-donation-document-card .e4j-donation-card-copy {
  font-size:clamp(14px,1vw,16px);
  line-height:1.6;
  color:#244768;
  margin:0 0 13px;
}
.e4j-donation-details-grid .e4j-document-preview {
  display:block;
  width:100%;
  height:auto;
  max-width:175px;
  max-height:none;
  justify-self:end;
  margin:0;
  object-fit:contain;
  border:1px solid rgba(37,84,135,.22);
  border-radius:3px;
  background:white;
  box-shadow:0 5px 12px rgba(0,28,67,.14);
}
.e4j-donation-details-grid .e4j-donation-document-card .e4j-card-link {
  display:inline-flex;
  margin-top:auto;
  align-self:flex-start;
  color:#124e8d!important;
  border-bottom-color:rgba(18,78,141,.37);
}
.e4j-donation-document-card .e4j-card-surface:hover .e4j-card-link {
  border-bottom-color:#124e8d;
}
.e4j-donation-document-card .e4j-card-surface:focus-visible {
  outline:3px solid var(--e4j-focus);outline-offset:-5px;
}
@media (max-width:760px) {
  .e4j-donation-hero {grid-template-columns:minmax(0,1fr);gap:20px;padding-block:38px 45px;}
  .e4j-donation-illustration {width:100%;}
}

/* ========================================================================
   Textlinks – sichtbar, auch ohne Hover und ohne JavaScript (v1.3)
   Normale Links im Fließtext bleiben Fließtext und erhalten eine deutliche
   Unterstreichung. Für kurze, besonders wichtige Einzel-Links steht eine
   touchfreundliche Variante als .e4j-text-action zur Verfügung.
   Ausgenommen sind Navigation, Buttons und vollständig anklickbare Karten.
   ======================================================================== */
.e4j-site :is(p, li, dd, figcaption) a:not([class]) {
  font-weight:700;
  text-decoration-line:underline;
  text-decoration-style:solid;
  text-decoration-thickness:2px;
  text-underline-offset:.22em;
  border-radius:3px;
  background:rgba(211,236,255,.14);
  padding:2px 3px;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
  transition:background-color .16s ease,text-decoration-color .16s ease;
}
.e4j-site :is(p, li, dd, figcaption) a:not([class]):hover {
  background:rgba(211,236,255,.28);
  text-decoration-thickness:3px;
}
/* Opt-in: eigenständiger Link im laufenden Text als gut greifbare Aktion.
   Auch bei 320px voll nutzbar; Inline-Links in langen Sätzen dagegen nicht
   pauschal zu 44px hohen Buttons aufblasen. */
.e4j-site a.e4j-text-action,
.e4j-site a.e4j-donation-privacy-link {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55em;
  width:auto;
  max-width:100%;
  min-height:44px;
  margin:5px 0 2px;
  padding:9px 14px;
  border:1px solid rgba(225,243,255,.65);
  border-radius:10px;
  background:rgba(238,249,255,.15);
  color:#fff!important;
  font-weight:650;
  line-height:1.35;
  text-decoration:underline;
  text-decoration-thickness:1.5px;
  text-underline-offset:3px;
  overflow-wrap:anywhere;
  transition:background-color .16s ease,border-color .16s ease;
}
.e4j-site a.e4j-text-action:hover,
.e4j-site a.e4j-donation-privacy-link:hover {
  background:rgba(238,249,255,.29);
  border-color:rgba(255,255,255,.95);
  color:#fff!important;
}
.e4j-site a.e4j-text-action:active,
.e4j-site a.e4j-donation-privacy-link:active {
  background:rgba(238,249,255,.35);
}
/* Bei eigenständigen Aktionen immer die bestehende sichtbare Fokusmarkierung
   nutzen; gilt auch für Tastaturbedienung ohne JS. */
.e4j-site a.e4j-text-action:focus-visible,
.e4j-site a.e4j-donation-privacy-link:focus-visible {
  outline:3px solid var(--e4j-focus);
  outline-offset:3px;
}
@media (prefers-reduced-motion:reduce) {
  .e4j-site a.e4j-text-action,
  .e4j-site a.e4j-donation-privacy-link,
  .e4j-site :is(p,li,dd,figcaption) a:not([class]) {transition:none;}
}

/* ========================================================================
   Kontakt – E4J Standardseite /de/contact/ und /en/contact/
   Keine Inline-Styles oder JS. Bestehende Blocks: hero-split, card-grid,
   action-panel. Alle fünf Mail-Adressen in DE/EN-Inhaltsdaten.
   ======================================================================== */
.e4j-contact-page .e4j-standard-main {min-height:0;}
.e4j-contact-hero {display:block;padding-block:clamp(38px,5vw,76px) clamp(35px,4vw,55px);}
.e4j-contact-hero .hero-aside {display:none;}
.e4j-contact-hero .hero-copy-inner {max-width:1060px;}
.e4j-contact-hero h1 {font:normal clamp(51px,6.5vw,94px)/1.05 var(--e4j-serif);letter-spacing:-.026em;margin:0 0 13px;}
.e4j-contact-lead {font:normal clamp(27px,2.8vw,41px)/1.2 var(--e4j-serif);margin:0 0 19px;}
.e4j-contact-hero .hero-copy-inner>p:not(.e4j-eyebrow) {max-width:85ch;color:#eaf5ff;font-size:var(--e4j-body-font-size);line-height:1.7;}
.e4j-contact-options {padding-bottom:clamp(30px,4vw,60px);}
.e4j-contact-options .e4j-section-heading {margin-bottom:25px;}
.e4j-contact-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(15px,1.7vw,24px);align-items:stretch;}
.e4j-contact-grid>.e4j-contact-card:nth-child(n) {grid-column:auto;background:linear-gradient(var(--e4j-card-angle),var(--e4j-card-top),var(--e4j-card-bottom));}
.e4j-contact-grid>.e4j-contact-card.e4j-contact-card--featured {grid-column:1/-1;}
.e4j-contact-grid .e4j-card-surface {padding:clamp(24px,2.1vw,35px);}
.e4j-contact-grid .e4j-contact-kicker {margin:0 0 9px;color:var(--e4j-ink-muted);font-size:12px;font-weight:650;letter-spacing:.075em;text-transform:uppercase;}
.e4j-contact-grid h3.e4j-contact-title {margin:0 0 10px;font:normal clamp(28px,2.4vw,37px)/1.18 var(--e4j-serif);color:#001d3e;}
.e4j-contact-grid .e4j-contact-description {margin:0 0 19px;color:var(--e4j-ink);font-size:var(--e4j-body-font-size);line-height:1.6;flex:1;}
.e4j-contact-grid .e4j-contact-address {display:block;max-width:100%;overflow-wrap:anywhere;color:#003b80;font-size:clamp(15px,1.1vw,18px);line-height:1.4;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px;}
.e4j-contact-grid .e4j-contact-link-label {display:inline-flex;align-items:center;min-height:44px;margin-top:10px;align-self:flex-start;color:#003b80;font-size:14px;font-weight:650;}
.e4j-contact-grid .e4j-contact-link-label::after {content:"→";margin-left:8px;font-size:20px;}
.e4j-contact-grid .e4j-card-surface:hover .e4j-contact-address {text-decoration-thickness:2.5px;}
.e4j-contact-grid .e4j-card-surface:focus-visible {outline:3px solid var(--e4j-navy);outline-offset:-5px;}
/* Gleicher vorhandener Action-Panel-Block, für einen Rechtshinweis kompakt. */
.e4j-contact-privacy-panel {grid-template-columns:minmax(0,1fr) auto;gap:clamp(16px,3vw,40px);padding:clamp(25px,3.5vw,42px);margin-bottom:clamp(55px,6vw,93px);}
.e4j-contact-privacy-panel h2 {font-size:clamp(27px,2.7vw,38px);margin-bottom:9px;}
.e4j-contact-privacy-panel .e4j-discover-actions {width:auto;min-width:205px;}
@media (max-width:760px) {
  .e4j-contact-grid {grid-template-columns:minmax(0,1fr);}
  .e4j-contact-grid>.e4j-contact-card.e4j-contact-card--featured {grid-column:auto;}
  .e4j-contact-privacy-panel {grid-template-columns:minmax(0,1fr);}
  .e4j-contact-privacy-panel .e4j-discover-actions {justify-self:stretch;width:100%;min-width:0;}
}
@media (max-width:520px) {
  .e4j-contact-hero {padding-block:35px 30px;}
  .e4j-contact-grid .e4j-card-surface {padding:24px;}
  .e4j-contact-privacy-panel .e4j-discover-actions {grid-template-columns:minmax(0,1fr);}
}


/* ========= Datenschutz: Website-Erklärung und ergänzende Hinweise =========
 * Die rechtlichen Originaltexte bleiben beim Anbieter beziehungsweise unter
 * den unveränderten Legacy-URLs. Nur Layout, niemals Rechtstext im CSS.
 */
.e4j-privacy-hero {display:block;padding-bottom:clamp(22px,3vw,44px);}
.e4j-privacy-hero .hero-aside {display:none;}
.e4j-privacy-hero .hero-copy-inner {max-width:980px;}
.e4j-privacy-hero .e4j-privacy-lead {
  margin:10px 0 12px;
  font:normal clamp(25px,2.7vw,37px)/1.2 var(--e4j-serif);
  letter-spacing:-.01em;
}
.e4j-privacy-hero .e4j-privacy-intro-text {margin:0;max-width:85ch;color:#e4f2ff;line-height:1.7;}
.e4j-privacy-embed {margin-bottom:clamp(45px,5vw,75px);}
.e4j-privacy-notices {padding-bottom:clamp(55px,7vw,110px);}
.e4j-privacy-notices .e4j-section-heading {margin-bottom:clamp(20px,2.5vw,33px);}
.e4j-privacy-notices-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.7vw,25px);align-items:stretch;}
.e4j-privacy-notices-grid>.e4j-privacy-notice-card:nth-child(n) {grid-column:auto;}
.e4j-privacy-notices-grid .e4j-card-surface {padding:clamp(22px,2.2vw,34px);}
.e4j-privacy-notices-grid .e4j-privacy-card-kicker {margin:0 0 9px;color:var(--e4j-ink-muted);font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:650;}
.e4j-privacy-notices-grid .e4j-privacy-card-title {font:normal clamp(25px,2vw,33px)/1.18 var(--e4j-serif);margin:0 0 13px;}
.e4j-privacy-notices-grid .e4j-privacy-card-body {font-size:var(--e4j-body-font-size);line-height:1.64;color:var(--e4j-ink);margin:0 0 17px;flex:1;}
.e4j-privacy-notices-grid .e4j-card-link {min-height:44px;align-items:center;padding-block:8px;}
@media (max-width:970px) {
  .e4j-privacy-notices-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
  .e4j-privacy-notices-grid>.e4j-privacy-notice-card:last-child {grid-column:1/-1;}
}
@media (max-width:700px) {
  .e4j-privacy-notices-grid {grid-template-columns:minmax(0,1fr);}
  .e4j-privacy-notices-grid>.e4j-privacy-notice-card:last-child {grid-column:auto;}
}

/* ================================================================
   Allgemeine Langtext-Typografie (HTML-Block): Datenschutz, Über uns usw.
   Die vorhandenen Datenschutzseiten behalten ihre Klasse, neue Textseiten
   nutzen die generische .e4j-prose. Keine seitenspezifischen Varianten.
   ================================================================ */
.e4j-site :is(.e4j-privacy-article, .e4j-prose) {
    max-width: 920px;
    padding-block: clamp(1rem, 2.5vw, 2.2rem) clamp(2.5rem, 6vw, 5rem);
}
.e4j-site :is(.e4j-privacy-article, .e4j-prose) section { margin-block: 1.6rem 2rem; }
.e4j-site :is(.e4j-privacy-article, .e4j-prose) h2 {
    font-family: var(--e4j-font-head, Georgia, serif);
    font-size: clamp(1.26rem, 2vw, 1.62rem);
    line-height: 1.24;
    margin: 0 0 .8rem;
}
.e4j-site :is(.e4j-privacy-article, .e4j-prose) h3 {
    font-size: clamp(1.03rem, 1.65vw, 1.22rem);
    line-height: 1.3;
    margin: 1.3rem 0 .7rem;
}
.e4j-site :is(.e4j-privacy-article, .e4j-prose) p,
.e4j-site :is(.e4j-privacy-article, .e4j-prose) li { line-height: 1.65; }
.e4j-site :is(.e4j-privacy-article, .e4j-prose) ul { padding-left: 1.5rem; margin: .6rem 0 1.2rem; }
.e4j-site :is(.e4j-privacy-article, .e4j-prose) li { margin-bottom: .38rem; }
.e4j-site :is(.e4j-privacy-article, .e4j-prose) a { overflow-wrap: anywhere; }
.e4j-site .e4j-privacy-notice-page .e4j-legal-hero { margin-bottom: 0; }
/* Lange Rechtsbegriffe dürfen schmale Smartphonebreiten nicht sprengen. */
.e4j-privacy-notice-page .hero-split .hero-copy,
.e4j-privacy-notice-page .hero-split .hero-copy-inner { min-width: 0; }
.e4j-privacy-notice-page .hero-split h1 { overflow-wrap: anywhere; hyphens: auto; }

/* ==========================================================================
   Designsystem: allgemeine Text-Heros und Dokumentkataloge (v2.6)
   Neue Standardseiten sollen diese Varianten statt weiterer Seitenselektoren
   verwenden. Farben/Transparenzen kommen aus :root oder Page-Custom-Properties.
   ========================================================================= */
.e4j-hero--text {
  display:block;
  padding-block:clamp(38px,4.8vw,72px) clamp(24px,3.3vw,44px);
}
.e4j-hero--text .hero-aside {display:none;}
.e4j-hero--text .hero-copy-inner {max-width:990px;}
.e4j-hero--text h1 {font:normal clamp(51px,6.3vw,93px)/1.04 var(--e4j-serif);letter-spacing:-.026em;margin:0 0 14px;}
.e4j-hero--text .e4j-hero--text-lead {font:normal clamp(25px,2.9vw,40px)/1.22 var(--e4j-serif);margin:0 0 19px;}
.e4j-hero--text .hero-copy-inner>p:not(.e4j-eyebrow) {max-width:84ch;font-size:var(--e4j-body-font-size);line-height:1.67;color:var(--e4j-hero-body,#eaf4ff);margin:0 0 12px;}
.e4j-hero--text .hero-copy-inner>p.e4j-hero--text-note {font-size:15px;color:var(--e4j-hero-note,#cfdef4);}

/* Wiederverwendbare Dokumentkarten – ebenso nutzbar für PDF-Downloads auf
 * weiteren Ressourcenseiten. Höhe/Breite responsiv, Bilder nur optional. */
.e4j-document-catalogue {padding-bottom:clamp(36px,5vw,70px);}
.e4j-document-catalogue .e4j-section-heading {margin-bottom:clamp(18px,2.2vw,29px);}
.e4j-document-grid {gap:var(--e4j-document-grid-gap);}
.e4j-document-grid>.e4j-document-card {
  /* Einheitliche Fläche auch bei n-ter Karte: nur die globalen Tokens variieren. */
  background:linear-gradient(var(--e4j-card-angle),var(--e4j-card-top),var(--e4j-card-bottom));
}
.e4j-document-grid>.e4j-document-card:nth-child(n) {grid-column:auto;}
.e4j-document-grid .e4j-card-surface {padding:var(--e4j-document-padding,clamp(21px,2.1vw,31px));}
.e4j-document-type {color:var(--e4j-document-eyebrow,var(--e4j-ink-muted));text-transform:uppercase;font-size:12px;letter-spacing:.045em;font-weight:700;margin:0 0 9px;}
.e4j-document-grid h3.e4j-document-title {font:normal clamp(23px,2.0vw,31px)/1.2 var(--e4j-serif);letter-spacing:-.018em;color:var(--e4j-deep);margin:0 0 9px;hyphens:auto;overflow-wrap:break-word;}
.e4j-document-byline {font-size:14px;color:var(--e4j-document-byline,var(--e4j-ink-muted));font-weight:700;margin:0 0 10px;}
.e4j-document-description {font-size:var(--e4j-body-font-size);line-height:1.56;color:var(--e4j-document-copy,var(--e4j-ink));margin:0 0 14px;flex:1;}
.e4j-document-action {display:inline-flex;align-items:center;align-self:flex-start;margin-top:auto;min-height:44px;color:var(--e4j-document-link,#003e88);font-size:14px;font-weight:700;text-decoration:underline;text-decoration-thickness:1.4px;text-underline-offset:4px;}
.e4j-document-action::after {content:"↗";display:inline-block;margin-left:9px;font-size:19px;text-decoration:none;}
.e4j-document-grid .e4j-card-surface:hover .e4j-document-action {text-decoration-thickness:2px;}
/* Allgemeine Bild-/Text-Vorschau fuer beliebige Karten. Wenn ein optionales
 * Bild noch fehlt, bleibt der Text ohne leere Bildspalte in voller Breite. */
/* Generischer Medien-Einsatz in einer Karte: Bild bleibt im vorhandenen
 * Textbereich, erhoeht dessen Hoehe nicht und wird NIE beschnitten.
 * Bei nicht vorhandenen optionalen Bildern bleibt die Textbreite erhalten.
 * Die Standardwerte lassen sich per Builder-Custom-Property ueberschreiben. */
.e4j-media-inset {position:relative;min-width:0;}
.e4j-media-inset:has(>img) {padding-inline-end:var(--e4j-media-inset-space,34%);}
.e4j-media-inset>img {position:absolute;inset-block:0;inset-inline-end:0;width:var(--e4j-media-inset-image-width,31%);height:100%;max-width:var(--e4j-media-inset-image-max,175px);object-fit:contain;object-position:center;border-radius:var(--e4j-media-inset-radius,4px);}
/* Allgemeine Variante: der Textbereich nutzt die verfuegbare Resthoehe
 * einer Karte (z. B. Autor, Datum, Beschreibung und Dokumentlink). */
.e4j-media-inset--grow {display:flex;flex:1;flex-direction:column;}
/* Optionale generische Variante fuer breite Karten mit kurzer Beschreibung:
 * Das Bild orientiert sich an der gesamten Kartenhoehe, nicht nur am Absatz.
 * Es bleibt absolut positioniert und veraendert deshalb die Kartenhoehe nicht.
 * Unter 1100 px greift weiterhin das unveraenderte Standard-Inset. */
@media (min-width:1100px) {
  .e4j-card-surface:has(.e4j-media-inset--card-height) {position:relative;}
  .e4j-media-inset--card-height {position:static;}
  .e4j-media-inset--card-height:has(>img) {
    padding-inline-end:var(--e4j-media-inset-card-space,min(36%,320px));
  }
  .e4j-media-inset--card-height>img {
    position:absolute;
    inset-block:50% auto;
    inset-inline-end:var(--e4j-media-inset-card-gutter,24px);
    transform:translateY(-50%);
    width:var(--e4j-media-inset-card-width,min(32%,300px));
    height:calc(100% - 48px);
    max-width:none;
    object-fit:contain;
  }
}
/* Keine Schatten um das Bild-Element: bei object-fit:contain waere sonst
 * der unsichtbare Rest des Elementrahmens als helle Flaeche sichtbar. */
.e4j-document-preview {display:block;box-shadow:none;}


/* Allgemeiner Metadatenfilter für Dokumente, Videos und weitere Kartenlisten.
 * Ohne JavaScript bleibt die Leiste verborgen, alle Inhalte sind im HTML. */
.e4j-site [hidden] {display:none!important;}
.e4j-filter-tools {margin-bottom:clamp(12px,1.7vw,24px);}
.e4j-filter-form {display:flex;flex-wrap:wrap;gap:12px;align-items:end;}
.e4j-filter-form label {display:flex;flex-direction:column;gap:5px;flex:1 1 160px;max-width:300px;color:var(--e4j-white);font-size:13px;font-weight:600;}
.e4j-filter-form select {width:100%;min-height:45px;padding:9px 30px 9px 12px;border:1px solid var(--e4j-card-border);border-radius:10px;background:var(--e4j-white);color:var(--e4j-deep);font:inherit;font-size:15px;}
.e4j-filter-form button {min-height:45px;padding:9px 16px;border:1px solid var(--e4j-card-border);border-radius:10px;background:rgb(244 250 255 / .2);color:var(--e4j-white);font:600 14px var(--e4j-sans);cursor:pointer;}
.e4j-filter-form button:hover {background:rgb(244 250 255 / .3);}
.e4j-filter-count {min-height:1.5em;margin:9px 0 0;color:var(--e4j-white);font-size:14px;}

/* Lizenzfeld ist ein wiederverwendbarer dunkler Infoblock. */
.e4j-panel--dark {max-width:1100px;margin-bottom:clamp(56px,7vw,104px);padding:clamp(25px,3vw,42px);border:1px solid rgb(231 241 255 / .36);border-radius:var(--e4j-radius);background:var(--e4j-dark-panel-bg,rgba(5,39,92,.45));}
.e4j-panel--dark h2 {font:normal clamp(26px,2.6vw,37px)/1.2 var(--e4j-serif);margin:0 0 17px;color:var(--e4j-white);}
.e4j-panel--dark p {font-size:var(--e4j-body-font-size);line-height:1.7;color:#e5f0fc;max-width:92ch;margin:0 0 14px;}
.e4j-panel--dark p:last-child {margin-bottom:0;}
.e4j-panel--dark a {color:#e5f2ff;text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere;}
.e4j-panel--dark a:hover,.e4j-panel--dark a:focus-visible {color:#fff;text-decoration-thickness:2.5px;}
@media(max-width:800px) {
  .e4j-grid--two {grid-template-columns:minmax(0,1fr);}
  .e4j-document-grid>.e4j-document-card:nth-child(n) {grid-column:auto;}
}
@media(max-width:520px) {
  .e4j-hero--text {padding-block:33px 26px;}
  .e4j-document-grid .e4j-card-surface {padding:var(--e4j-document-padding-mobile,22px);}
  .e4j-filter-form label {flex-basis:100%;max-width:none;}
}

/* ========= Allgemeine Beitragsdarstellung (featured-content) ============
 * Wiederverwendbar für einen aktuellen Artikel und seinen Startseiten-Teaser.
 * Inhalte und Umschaltzeitpunkte liegen in content/scheduled; alle hier
 * verwendeten Maße/Farben können per Page-custom_properties angepasst werden.
 * Keinerlei eigene CSS-Regeln für einzelne Impulse oder Seitennamen.
 */
.e4j-feature {
  --e4j-feature-max-width: 1030px;
  --e4j-feature-media-width: 34%;
  --e4j-feature-media-max-height: 330px;
  --e4j-feature-gap: clamp(18px,3vw,44px);
  width:min(calc(100% - 2 * var(--e4j-gutter)),var(--e4j-feature-max-width));
  margin-block:clamp(24px,3.5vw,55px);
}
.e4j-feature--teaser {
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,var(--e4j-feature-media-width));
  align-items:center;gap:var(--e4j-feature-gap);
  padding:var(--e4j-card-padding);border-radius:var(--e4j-radius);
  border:1px solid var(--e4j-card-border);
  background:linear-gradient(var(--e4j-card-angle),var(--e4j-card-top),var(--e4j-card-bottom));
  box-shadow:var(--e4j-card-shadow);color:var(--e4j-ink);
}
.e4j-feature h2 {font:normal clamp(29px,3.2vw,46px)/1.19 var(--e4j-serif);margin:.25em 0 .45em;}
.e4j-feature-kicker {font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;}
.e4j-feature-meta {font-size:14px;opacity:.88;}
.e4j-feature-link {display:inline-block;margin-top:10px;font-weight:700;text-underline-offset:.2em;}
.e4j-feature-media {margin:0;min-width:0;text-align:center;}
.e4j-feature-media img {display:block;width:100%;height:auto;max-height:var(--e4j-feature-media-max-height);object-fit:contain;border-radius:calc(var(--e4j-radius) * .6);}
.e4j-feature-media figcaption {margin-top:6px;font-size:12px;opacity:.8;}
.e4j-feature--article {max-width:var(--e4j-feature-max-width);}
.e4j-feature--article .e4j-feature-summary {font-size:clamp(17px,1.55vw,21px);line-height:1.55;max-width:850px;opacity:.94;}
.e4j-feature--article > .e4j-feature-media {float:right;width:var(--e4j-feature-media-width);margin:5px 0 17px var(--e4j-feature-gap);}
.e4j-feature-body {font-size:var(--e4j-body-font-size);line-height:1.75;overflow-wrap:break-word;}
.e4j-feature-body p {margin:0 0 1.12em;}
.e4j-feature-body ol,.e4j-feature-body ul {padding-left:1.45em;margin:0 0 1.4em;}
.e4j-feature-body li {padding-left:.18em;margin-bottom:.85em;}
.e4j-feature-body a,.e4j-feature-footer a {text-decoration:underline;text-underline-offset:.18em;}
.e4j-feature-footer {clear:both;margin-top:32px;border-top:1px solid rgba(238,246,255,.35);padding-top:18px;font-size:14px;}
@media(max-width:650px) {
  .e4j-feature--teaser {grid-template-columns:minmax(0,1fr);}
  .e4j-feature--teaser .e4j-feature-media {max-width:240px;margin-inline:auto;}
  .e4j-feature--article > .e4j-feature-media {float:none;width:min(100%,330px);margin:15px auto 27px;}
}


/* ========= Allgemeiner Hero mit einer lokalen Illustration rechts ========
 * Alternative zum reinen Text-Hero; Maße/Farben über Properties variierbar.
 * Ohne JavaScript, kein externer Bildabruf. Auch für andere Seiten nutzbar.
 */
.e4j-hero--media {
  display:grid;
  /* Standard 60:40 (Text : Bild); Seiten-Overrides als fr-Werte möglich.
   * minmax(0,...) hält das Verhältnis auch bei wenig horizontalem Platz. */
  grid-template-columns:
    minmax(0,var(--e4j-hero-text-width,3fr))
    minmax(0,var(--e4j-hero-image-width,2fr));
  gap:var(--e4j-hero-media-gap,clamp(25px,4vw,72px));align-items:center;
  padding-block:var(--e4j-hero-media-top,clamp(36px,4vw,68px)) var(--e4j-hero-media-bottom,clamp(28px,3vw,54px));
}
.e4j-hero--media .hero-copy,.e4j-hero--media .hero-copy-inner,.e4j-hero--media .hero-aside {min-width:0;}
.e4j-hero--media h1 {font:normal clamp(52px,6vw,88px)/1.06 var(--e4j-serif);margin:0 0 20px;}
.e4j-hero--media .hero-copy-inner>p:not(.e4j-eyebrow) {font-size:var(--e4j-body-font-size);line-height:1.65;margin:0 0 14px;color:var(--e4j-hero-body,#eaf4ff);}
.e4j-hero--media .hero-aside {display:grid;place-items:center;}
.e4j-hero--media .e4j-button {display:inline-flex;align-items:center;min-height:45px;padding:10px 16px;border:1px solid var(--e4j-card-border);border-radius:10px;background:var(--e4j-white);color:var(--e4j-navy);text-decoration:none;font-weight:600;font-size:15px;}
.e4j-hero--media .e4j-button:hover {background:white;}
@media(max-width:720px) {
  .e4j-hero--media {grid-template-columns:minmax(0,1fr);}
  .e4j-hero--media .hero-aside {justify-items:center;}

}

/* ========= Allgemeine Videokarten mit optionaler Einbettung ==============
 * Text + lokale Posterbilder sind auch ohne JS sichtbar. Einwilligungsbutton
 * und Filter werden erst durch lokales JS aktiviert. Keine Player auf Home.
 * Gestaltung nutzt die vorhandenen Tokens; wenige Video-spezifische Größen.
 */
.e4j-video-section {margin-block:var(--e4j-video-section-space,clamp(24px,3vw,46px));}
.e4j-video-grid {
  display:grid;
  /* Vollbreites Raster mit höchstens drei Spalten; Varianten bleiben über
   * Custom Properties steuerbar. Kein von der Elementanzahl abhängiges auto-fill. */
  grid-template-columns:repeat(var(--e4j-video-grid-columns-wide,3),minmax(0,1fr));
  width:100%;
  max-width:var(--e4j-video-grid-max-width,var(--e4j-max-width));
  gap:var(--e4j-grid-gap);
}
/* Bei weniger Platz werden die Karten größer statt schmaler. Die einspaltige
 * Startseitenvariante behält unabhängig davon ihre eigene Maximalbreite. */
@media(max-width:1180px) {
  .e4j-video-grid:not(.e4j-video-grid--single) {
    grid-template-columns:repeat(var(--e4j-video-grid-columns-medium,2),minmax(0,1fr));
  }
}
@media(max-width:720px) {
  .e4j-video-grid:not(.e4j-video-grid--single) {
    grid-template-columns:repeat(var(--e4j-video-grid-columns-small,1),minmax(0,1fr));
  }
}
.e4j-video-grid--single {grid-template-columns:minmax(0,1fr);max-width:var(--e4j-video-teaser-width,820px);--e4j-video-card-max-width:560px;}
.e4j-video-card {padding:var(--e4j-video-card-padding,clamp(15px,1.4vw,23px));gap:var(--e4j-video-card-gap,16px);max-width:var(--e4j-video-card-max-width,none);}
.e4j-video-copy h3 {margin:0 0 8px;font:normal clamp(21px,1.55vw,28px)/1.22 var(--e4j-serif);}
.e4j-video-copy p {margin:.45em 0;}
.e4j-video-meta {font-size:var(--e4j-video-meta-size,13px);color:var(--e4j-ink-muted);}
.e4j-video-type {font-size:12px!important;letter-spacing:.05em;text-transform:uppercase;font-weight:700;color:var(--e4j-ink-muted);}
.e4j-video-stage {position:relative;aspect-ratio:var(--e4j-video-aspect-ratio,16/9);overflow:hidden;border-radius:var(--e4j-video-radius,12px);background:linear-gradient(135deg,var(--e4j-page-base-mid2),var(--e4j-deep));}
.e4j-video-stage>img,.e4j-video-poster {display:block;width:100%;aspect-ratio:var(--e4j-video-aspect-ratio,16/9);height:auto;object-fit:contain;border-radius:var(--e4j-video-radius,12px);}
.e4j-video-stage>img {height:100%;}
.e4j-video-no-poster {display:grid;place-items:center;margin:0;height:100%;padding:16px;text-align:center;color:#e7f3ff;font-size:14px;}
.e4j-video-stage--active>img,.e4j-video-stage--active>.e4j-video-no-poster {display:none;}
.e4j-video-stage iframe {display:block;position:absolute;inset:0;width:100%;height:100%;border:0;}
.e4j-video-actions {display:flex;flex-direction:column;align-items:flex-start;gap:11px;margin-top:auto;}
.e4j-video-disclosure {font-size:var(--e4j-video-disclosure-size,13px);line-height:1.55;margin:0;color:var(--e4j-ink-muted);}
.e4j-video-disclosure a,.e4j-video-external {text-underline-offset:.18em;text-decoration:underline;}
.e4j-video-controls {display:flex;flex-wrap:wrap;align-items:center;gap:10px 17px;}
.e4j-video-card button {border:0;border-radius:var(--e4j-video-button-radius,9px);background:var(--e4j-navy);color:var(--e4j-white);padding:10px 13px;min-height:44px;font:600 var(--e4j-video-button-size,14px) var(--e4j-sans);cursor:pointer;}
.e4j-video-card button:hover {background:var(--e4j-blue);}
.e4j-video-card [hidden] {display:none!important;}
.e4j-video-fallback {font-size:13px;margin:0;color:var(--e4j-ink-muted);}
.e4j-video-external {font-size:14px;font-weight:600;display:inline-flex;align-items:center;min-height:44px;}

/* Generische horizontale Kartenliste: volle Inhaltsbreite, responsiv.
 * Dieselben card-grid-Elemente sind auch im dreispaltigen Home-Raster nutzbar. */
.e4j-grid--list {display:grid;grid-template-columns:minmax(0,1fr);gap:var(--e4j-grid-gap);}
.e4j-grid--list>.e4j-theme-card:nth-child(n) {grid-column:auto;}
.e4j-card--row .e4j-card-content {display:grid;grid-template-columns:minmax(0,1fr);gap:var(--e4j-grid-gap);align-items:center;}
.e4j-card--row.e4j-card--has-media .e4j-card-content {grid-template-columns:minmax(180px,var(--e4j-row-media-width,30%)) minmax(0,1fr);}
.e4j-card--row .e4j-card-media {display:block;width:100%;max-height:var(--e4j-row-media-max-height,280px);height:auto;object-fit:cover;border-radius:calc(var(--e4j-radius) * .55);}
.e4j-card-row-body {display:flex;flex-direction:column;min-width:0;}
.e4j-card-row-body .e4j-theme-kicker {margin-bottom:12px!important;}
.e4j-card-row-body .e4j-theme-body {margin-bottom:16px!important;flex:none;}
.e4j-card-date {font-size:14px;color:var(--e4j-deep);margin:0 0 10px;}
.e4j-current-card .e4j-card-media {display:block;width:100%;height:auto;max-height:var(--e4j-current-image-max-height,180px);object-fit:contain;margin-bottom:20px;}
.e4j-current-card .e4j-card-row-body {flex:1;}
.e4j-current-card .e4j-card-link {margin-top:auto;}
@media(max-width:700px) {
  .e4j-card--row.e4j-card--has-media .e4j-card-content {grid-template-columns:minmax(0,1fr);}
  .e4j-card--row .e4j-card-media {max-height:240px;object-fit:contain;}
}
.e4j-card-details {margin:4px 0 15px;font-size:var(--e4j-body-font-size);line-height:1.6;}
.e4j-card-details summary {color:var(--e4j-navy);font-weight:600;cursor:pointer;}
.e4j-card-details p {margin:10px 0 0;}
/* Wiederverwendbare, touchfreundliche Kartenaktionen (auch für Listen).
 * Kein eigener Veranstaltungsblock und keine Änderung bestehender Links. */
.e4j-card-actions {display:flex;flex-wrap:wrap;align-items:stretch;gap:12px;margin-top:9px;}
.e4j-site .e4j-card-actions>.e4j-card-action {
  display:inline-flex;align-items:center;justify-content:center;min-height:48px;
  padding:10px 17px;border:1px solid var(--e4j-navy);border-radius:10px;
  background:rgba(255,255,255,.65);color:var(--e4j-navy)!important;
  text-align:center;text-decoration:none;font:600 15px/1.35 var(--e4j-sans);
  transition:background-color .16s ease;
}
.e4j-site .e4j-card-actions>.e4j-card-action:hover {background:rgba(255,255,255,.98);}
.e4j-site .e4j-card-actions>.e4j-card-action--primary {background:var(--e4j-navy);color:var(--e4j-white)!important;}
.e4j-site .e4j-card-actions>.e4j-card-action--primary:hover {background:var(--e4j-blue);}
/* Auch der native Aufklapper bleibt mit dem Finger gut bedienbar. */
.e4j-card-details summary {padding:10px 0;min-height:44px;}
@media (max-width:520px) {
  .e4j-card-actions {flex-direction:column;align-items:stretch;}
  .e4j-site .e4j-card-actions>.e4j-card-action {width:100%;}
}

/* ========= Hero mit/ohne Bild: gemeinsame, wiederverwendbare Regeln =======
 * Die Zeilenhöhe wird ausschliesslich von der Textspalte bestimmt. Das Bild
 * wird in die dadurch vorhandene Fläche eingepasst, niemals umgekehrt.
 * Kein Bild: kein reservierter rechter Bereich (auch keine leere aside-Zeile).
 */
.e4j-site .hero-split:not(.e4j-hero--has-image) {grid-template-columns:minmax(0,1fr);}
.e4j-site .hero-split:not(.e4j-hero--has-image) .hero-aside {display:none;}
.e4j-site .hero-split:not(.e4j-hero--has-image) .hero-copy-inner {max-width:none;}
/* Auch der vormals auf 84ch begrenzte Fliesstext darf die volle Herobreite nutzen. */
.e4j-site .hero-split:not(.e4j-hero--has-image) .hero-copy-inner > p {max-width:none;}
/* Die alte Text-Hero-Variante blendete das Aside immer aus. Ein eingebundenes
 * Bild hat Vorrang vor dieser reinen Typografie-Variante: der Builder versieht
 * den Hero automatisch mit e4j-hero--has-image. Bestehende Ueberschriften-
 * und Textstile bleiben erhalten; das Layout wechselt auf 60:40. */
.e4j-site .hero-split.e4j-hero--text.e4j-hero--has-image {
  display:grid;
  grid-template-columns:
    minmax(0,var(--e4j-hero-text-width,3fr))
    minmax(0,var(--e4j-hero-image-width,2fr));
  gap:var(--e4j-hero-media-gap,clamp(25px,4vw,72px));
  align-items:center;
}
.e4j-site .hero-split.e4j-hero--has-image > .hero-aside {display:grid;}
@media(min-width:721px) {
  .e4j-site .hero-split.e4j-hero--has-image > .hero-aside {
    position:relative;align-self:stretch;min-height:0;
  }
  .e4j-site .hero-split.e4j-hero--has-image > .hero-aside > .hero-aside-image {
    position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;
    object-fit:contain;object-position:center;
  }
}
@media(max-width:720px) {
  .e4j-site .hero-split.e4j-hero--has-image {grid-template-columns:minmax(0,1fr);}
  .e4j-site .hero-split.e4j-hero--text.e4j-hero--has-image {grid-template-columns:minmax(0,1fr);}
  .e4j-site .hero-split.e4j-hero--has-image > .hero-aside {position:relative;display:grid;min-height:0;justify-items:center;}
  .e4j-site .hero-split.e4j-hero--has-image > .hero-aside > .hero-aside-image {
    position:static;display:block;width:100%;height:auto;
    max-height:var(--e4j-hero-mobile-media-max-height,290px);object-fit:contain;
  }
  /* Auf Mobilgeraeten Logo und Textkasten anzeigen, nicht ausblenden. */
  .e4j-intro .e4j-intro-motif {display:grid;}
  .e4j-intro .e4j-intro-vision {position:relative;right:auto;bottom:auto;margin:12px auto 0;}
}

/* ========= Hervorhebung in grossen Serifentiteln (wahlweise animiert) ==== */
.e4j-fire-heading {color:#ffd48c;}
@supports (-webkit-background-clip:text) or (background-clip:text) {
  .e4j-fire-heading {
    background:linear-gradient(110deg,#ffdf96 6%,#ffb74e 24%,#fff1c8 40%,#ff853f 57%,#ffcc72 74%,#ffdf96 94%);
    background-size:225% 100%;background-clip:text;-webkit-background-clip:text;
    color:transparent;-webkit-text-fill-color:transparent;
    animation:e4j-fire-shimmer 15s ease-in-out infinite alternate;
  }
}
@keyframes e4j-fire-shimmer {0%{background-position:0% 50%;}100%{background-position:100% 50%;}}
@media(prefers-reduced-motion:reduce) {.e4j-fire-heading {animation:none;}}
.e4j-site .e4j-hero--media .e4j-fire-heading {
  font-size:clamp(34px,3.8vw,64px);line-height:1.2;letter-spacing:-.018em;
}

/* ========= Frei gestaltete Highlight-Paare (HTML-Block, auch anderweitig) = */
.e4j-feature-pair {
  display:grid;grid-template-columns:minmax(0,3fr) minmax(270px,1.4fr);
  gap:var(--e4j-grid-gap);align-items:stretch;
  margin-block:clamp(24px,3vw,44px) clamp(26px,3.6vw,56px);
}
.e4j-feature-pair > * {min-width:0;}
.e4j-feature-pair__media {display:flex;align-items:center;min-width:0;}
/* Das Video fuellt die Spalte. Bei abweichendem Quellformat wird ohne seitliche
 * CSS-Balken gefuellt (Randbereiche duerfen abgeschnitten werden).
 * Enthält die Videodatei selbst schwarze Bildspalten, muss sie ggf. neu
 * zugeschnitten werden – CSS kann sie nicht zuverlaessig erkennen. */
.e4j-feature-pair__media video {
  display:block;width:100%;height:auto;
  aspect-ratio:var(--e4j-highlight-video-aspect-ratio,16/9);
  max-height:var(--e4j-highlight-video-max-height,560px);
  object-fit:cover;border-radius:0;background:transparent;
  box-shadow:var(--e4j-card-shadow);
}
.e4j-feature-panel {
  display:flex;flex-direction:column;justify-content:center;gap:14px;
  padding:clamp(23px,3vw,44px);border-radius:var(--e4j-radius);
  background:var(--e4j-highlight-panel-bg,#3b0758);
  color:#fff;text-align:center;border:1px solid rgba(247,233,255,.34);
}
.e4j-feature-panel--image {
  /* Gleicher Grundton wie WellS26, deutlich weniger Abdunkelung des Logos.
   * Die zwei Overlayfarben sind fuer andere Highlights ueberschreibbar. */
  background-image:linear-gradient(
    var(--e4j-highlight-overlay-top,rgba(22,0,45,.38)),
    var(--e4j-highlight-overlay-bottom,rgba(22,0,45,.48))
  ),var(--e4j-highlight-panel-image,url('/img/wells26_logo.png'));
  background-position:center;background-size:cover,contain;background-repeat:no-repeat;
}
.e4j-feature-panel h2 {font:700 clamp(23px,2.3vw,38px)/1.2 var(--e4j-serif);margin:0;}
.e4j-feature-panel p {font-size:var(--e4j-body-font-size);line-height:1.55;margin:0;}
.e4j-feature-panel__actions {display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:6px;}
.e4j-feature-panel__actions a {
  display:inline-flex;justify-content:center;align-items:center;min-height:48px;
  padding:10px 15px;border-radius:9px;background:#fff;color:#271448!important;
  border:1px solid #fff;text-decoration:none;font-weight:600;text-align:center;
}
.e4j-feature-panel__actions a:hover {background:#ede6ff;}
@media(max-width:850px) {
  .e4j-feature-pair {grid-template-columns:minmax(0,1fr);}
  .e4j-feature-panel__actions a {flex:1 1 160px;}
}
@media(max-width:450px) {
  .e4j-feature-panel__actions {flex-direction:column;}
  .e4j-feature-panel__actions a {flex:0 0 auto;width:100%;}
}

/* Aktuelle Kacheln: Metadatum optional am unteren Ende. */
.e4j-current-card .e4j-card-row-body {display:flex;flex-direction:column;}
.e4j-current-card .e4j-card-date--foot {margin-top:auto;padding-top:12px;}