/*
Theme Name:   Esslinger Herzen
Theme URI:    https://esslinger-herzen.de
Description:  Child-Theme für Esslingens Flammende Herzen e.V.
Author:       Website-Team
Template:     kadence
Version:      6.10.0
Text Domain:  efh
*/

/* ============================================================
   1. TOKENS
   Ein Satz Werte für alles. Keine Zufallszahlen im Code.
   ============================================================ */

:root {
  /* Marke */
  --efh-rot:       #9C241F;
  --efh-rot-dark:  #7D1C18;
  --efh-ant:       #3A3738;
  --efh-pink:      #D4125A;
  --efh-gruen:     #6FB424;
  --efh-orange:    #F09215;
  --efh-blau:      #4FA8C4;
  /* Zwei zusätzliche Töne für die Kennzahlen (ab 6.7.0):
     Pink und Grün lagen zu nah an Rot bzw. Orange der Marke. */
  --efh-violett:   #8E44AD;
  --efh-tuerkis:   #17A398;

  /* Flächen */
  --efh-text:      #2B2829;
  --efh-text-2:    #6E6867;
  --efh-linie:     #E8E2DE;
  --efh-creme:     #FCF8F5;
  --efh-weiss:     #FFFFFF;

  /* Abstände – Achterschritte */
  --s-1: 8px;   --s-2: 16px;  --s-3: 24px;
  --s-4: 40px;  --s-5: 64px;  --s-6: 96px;  --s-7: 128px;

  /* Radien – zwei, mehr nicht */
  --r-s: 12px;
  --r-m: 20px;

  /* Schatten – einer, in zwei Stärken */
  --sh-1: 0 1px 2px rgba(43,40,41,.04), 0 4px 14px rgba(43,40,41,.05);
  --sh-2: 0 2px 4px rgba(43,40,41,.05), 0 12px 32px rgba(43,40,41,.09);

  /* Bewegung */
  --d-1: 160ms;   /* Rückmeldung  */
  --d-2: 240ms;   /* Zustandswechsel */
  --d-3: 420ms;   /* Eingang */
  --d-4: 1100ms;  /* Werte, Balken */

  --e-out:    cubic-bezier(.2, .8, .2, 1);
  --e-in-out: cubic-bezier(.4, 0, .2, 1);
  --e-feder:  cubic-bezier(.34, 1.3, .5, 1);
}

/* ============================================================
   2. GRUNDLAGEN
   ============================================================ */

body { color: var(--efh-text); background: var(--efh-weiss); }

h1, h2, h3, h4 {
  color: var(--efh-ant);
  letter-spacing: -.022em;
  line-height: 1.14;
  text-wrap: balance;
}

h1 { font-size: clamp(2.15rem, 4.6vw, 3.5rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 3vw, 2.35rem); font-weight: 800; }
h3 { font-size: clamp(1.12rem, 1.7vw, 1.35rem); font-weight: 700; }

p  { line-height: 1.68; }

.entry-content > p,
.efh-mass { max-width: 62ch; }

/* Startseiten-Titel weg */
.home .entry-hero,
.home .page-title,
.home .entry-header,
.home .kadence-breadcrumbs { display: none !important; }

/* ============================================================
   3. LESE-FORTSCHRITT
   ============================================================ */

.efh-progress {
  position: fixed;
  inset: 0 auto auto 0;
  height: 3px;
  width: 0;
  background: var(--efh-rot);
  z-index: 9999;
  transition: width 90ms linear;
  pointer-events: none;
}

/* ============================================================
   4. KOPFBEREICH
   ============================================================ */

/* Ein- und Ausblenden beim Scrollen */
#masthead,
.site-header {
  transition: transform var(--d-2) var(--e-out),
              box-shadow var(--d-2) var(--e-out),
              background-color var(--d-2) var(--e-out);
  will-change: transform;
}

body.efh-gescrollt #masthead,
body.efh-gescrollt .site-header {
  box-shadow: var(--sh-1);
  background-color: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(12px);
}

/* Logo schrumpft leicht */
.site-header .site-branding img,
.site-header .custom-logo {
  transition: max-height var(--d-2) var(--e-out), transform var(--d-2) var(--e-out);
}
body.efh-gescrollt .site-header .custom-logo { transform: scale(.88); }

/* Menüpunkte mit wachsender Unterlinie */
.site-header .menu-item > a {
  position: relative;
  font-weight: 600;
}

.site-header .menu-item > a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: .25em;
  height: 2px;
  background: var(--efh-rot);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--d-2) var(--e-out);
}

.site-header .menu-item > a:hover::after,
.site-header .current-menu-item > a::after { transform: scaleX(1); }

/* Spenden-Punkt im Menü als Button */
.site-header .menu-item.efh-menu-spenden > a {
  background: var(--efh-rot);
  color: var(--efh-weiss) !important;
  border-radius: 999px;
  padding: .55em 1.25em !important;
  transition: background-color var(--d-1) var(--e-out), transform var(--d-1) var(--e-out);
}
.site-header .menu-item.efh-menu-spenden > a::after { display: none; }
.site-header .menu-item.efh-menu-spenden > a:hover {
  background: var(--efh-rot-dark);
  transform: translateY(-1px);
}

/* ============================================================
   5. BUTTONS
   ============================================================ */

.wp-block-button__link {
  border-radius: 999px;
  font-weight: 700;
  padding: .92em 1.9em;
  transition: transform var(--d-1) var(--e-out),
              background-color var(--d-1) var(--e-out),
              box-shadow var(--d-1) var(--e-out),
              color var(--d-1) var(--e-out);
}

.wp-block-button__link:hover  { transform: translateY(-2px); }
.wp-block-button__link:active { transform: translateY(0) scale(.975); transition-duration: 90ms; }

.efh-btn-primaer .wp-block-button__link {
  background-color: var(--efh-rot);
  color: var(--efh-weiss);
  box-shadow: 0 4px 14px rgba(156,36,31,.24);
}
.efh-btn-primaer .wp-block-button__link:hover {
  background-color: var(--efh-rot-dark);
  box-shadow: 0 8px 22px rgba(156,36,31,.30);
}

.wp-block-button.is-style-outline .wp-block-button__link {
  border: 2px solid var(--efh-linie);
  color: var(--efh-ant);
  background: transparent;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  border-color: var(--efh-rot);
  color: var(--efh-rot);
}

/* Textlinks */
.entry-content a:not(.wp-block-button__link) {
  color: var(--efh-rot);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 2px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--d-2) var(--e-out);
  padding-bottom: 1px;
}
.entry-content a:not(.wp-block-button__link):hover { background-size: 100% 2px; }

/* ============================================================
   6. HERO
   ============================================================ */

.efh-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-m);
  padding: clamp(var(--s-4), 5vw, var(--s-6)) clamp(var(--s-3), 4vw, var(--s-5));
  background:
    radial-gradient(70% 100% at 85% 25%, rgba(240,146,21,.13) 0%, transparent 65%),
    var(--efh-creme);
}

.efh-hero .wp-block-columns { align-items: center; gap: clamp(var(--s-3), 4vw, var(--s-5)); }

.efh-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--efh-rot);
  margin-bottom: var(--s-2) !important;
}

.efh-eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: currentColor;
  display: inline-block;
}

.efh-lead {
  font-size: clamp(1.05rem, 1.55vw, 1.22rem);
  color: var(--efh-text-2);
  max-width: 46ch;
  margin-bottom: var(--s-3) !important;
}

.efh-logoherz {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  margin-inline: auto;
  filter: drop-shadow(0 16px 34px rgba(43,40,41,.13));
  animation: efh-float 9s var(--e-in-out) infinite;
}

@keyframes efh-float {
  0%, 100% { transform: translateY(0)    rotate(0deg); }
  50%      { transform: translateY(-9px) rotate(-.8deg); }
}

/* ============================================================
   7. KENNZAHLEN – ein Band statt vier Kästen
   ============================================================ */

.efh-zahlen-reihe { gap: 0 !important; }

.efh-zahlen-reihe .wp-block-column {
  padding: var(--s-3) var(--s-2);
  text-align: center;
  border-left: 1px solid var(--efh-linie);
}
.efh-zahlen-reihe .wp-block-column:first-child { border-left: 0; }

.efh-zahl {
  font-size: clamp(1.85rem, 3vw, 2.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.035em;
  color: var(--efh-rot);
  margin: 0 0 var(--s-1);
  font-variant-numeric: tabular-nums;
}

.efh-zahl-label {
  font-size: .9rem;
  color: var(--efh-text-2);
  line-height: 1.45;
  margin: 0;
  max-width: 20ch;
  margin-inline: auto;
}

/* ============================================================
   8. ABSCHNITTS-KOPF
   ============================================================ */

.efh-kopf { max-width: 46rem; }
.efh-kopf.has-text-align-center,
.efh-kopf { margin-inline: auto; }
.efh-kopf p:not(.efh-eyebrow) { color: var(--efh-text-2); max-width: 56ch; margin-inline: auto; }

/* ============================================================
   9. ZITAT – ohne Kasten, mit Luft
   ============================================================ */

.efh-zitat {
  max-width: 40rem;
  margin-inline: auto;
  text-align: center;
  padding: 0 var(--s-2);
}

.efh-zitat-text {
  font-size: clamp(1.3rem, 2.6vw, 1.8rem);
  font-weight: 600;
  line-height: 1.36;
  color: var(--efh-ant);
  letter-spacing: -.015em;
  margin-bottom: var(--s-2);
}

.efh-zitat-quelle {
  font-size: .9rem;
  color: var(--efh-text-2);
  margin: 0;
}

.efh-zitat-quelle::before {
  content: "";
  display: block;
  width: 36px;
  height: 2px;
  background: var(--efh-pink);
  margin: 0 auto var(--s-2);
}

/* ============================================================
   10. KACHELN
   ============================================================ */

.efh-kacheln { gap: var(--s-3) !important; margin-bottom: var(--s-3); }

.efh-kachel {
  --akzent: var(--efh-pink);
  border: 1px solid var(--efh-linie);
  border-radius: var(--r-m);
  padding: clamp(var(--s-3), 3vw, var(--s-4)) !important;
  background: var(--efh-weiss);
  transition: transform var(--d-2) var(--e-out),
              box-shadow var(--d-2) var(--e-out),
              border-color var(--d-2) var(--e-out);
}

.efh-kachel:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-2);
  border-color: color-mix(in srgb, var(--akzent) 45%, var(--efh-linie));
}

.efh-kachel--pink  { --akzent: var(--efh-pink); }
.efh-kachel--gruen { --akzent: var(--efh-gruen); }
.efh-kachel--orange{ --akzent: var(--efh-orange); }
.efh-kachel--blau  { --akzent: var(--efh-blau); }

.efh-kachel-label {
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--akzent);
  margin: 0 0 var(--s-1) !important;
}

.efh-kachel h3 { margin: 0 0 var(--s-2); }
.efh-kachel p  { color: var(--efh-text-2); }

.efh-kachel .efh-mehr {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  font-weight: 700;
  color: var(--efh-rot) !important;
  background-image: none !important;
}

.efh-kachel .efh-mehr::after {
  content: "→";
  transition: transform var(--d-1) var(--e-out);
}
.efh-kachel:hover .efh-mehr::after { transform: translateX(4px); }

/* ============================================================
   11. FORTSCHRITT
   ============================================================ */

.efh-fortschritt-block {
  background: var(--efh-creme);
  border-radius: var(--r-m);
  padding: clamp(var(--s-4), 4vw, var(--s-5)) clamp(var(--s-3), 4vw, var(--s-5));
}

.efh-fortschritt { --bal: var(--efh-pink); max-width: 36rem; margin-inline: auto; }
.efh-fortschritt--gruen  { --bal: var(--efh-gruen); }
.efh-fortschritt--orange { --bal: var(--efh-orange); }
.efh-fortschritt--rot    { --bal: var(--efh-rot); }

.efh-fortschritt-kopf { display: flex; align-items: baseline; gap: .5rem; margin-bottom: var(--s-1); }

.efh-fortschritt-kopf strong {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1;
  color: var(--bal);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.efh-fortschritt-kopf span { color: var(--efh-text-2); font-size: .95rem; }

.efh-fortschritt-spur {
  height: 10px;
  border-radius: 999px;
  background: rgba(43,40,41,.08);
  overflow: hidden;
}

.efh-fortschritt-balken {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--bal);
  transition: width var(--d-4) var(--e-out);
}

/* ============================================================
   12. BEITRÄGE
   ============================================================ */

.efh-news { list-style: none; padding-left: 0; gap: var(--s-3); }

.efh-news li {
  background: var(--efh-weiss);
  border: 1px solid var(--efh-linie);
  border-radius: var(--r-m);
  padding: var(--s-3);
  transition: transform var(--d-2) var(--e-out), box-shadow var(--d-2) var(--e-out);
}
.efh-news li:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }
.efh-news img { border-radius: var(--r-s); margin-bottom: var(--s-2); }

/* ============================================================
   13. ABSCHLUSS
   ============================================================ */

.efh-cta {
  border-radius: var(--r-m);
  padding: clamp(var(--s-4), 5vw, var(--s-6)) clamp(var(--s-3), 4vw, var(--s-5));
  background: var(--efh-rot);
  color: var(--efh-weiss);
  text-align: center;
}

.efh-cta h2 { color: var(--efh-weiss); }
.efh-cta p  { color: rgba(255,255,255,.88); max-width: 46ch; margin-inline: auto; }
.efh-cta .efh-eyebrow { color: rgba(255,255,255,.8); }

.efh-cta .wp-block-button.is-style-outline .wp-block-button__link {
  border-color: rgba(255,255,255,.55);
  color: var(--efh-weiss);
}
.efh-cta .wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--efh-weiss);
  border-color: var(--efh-weiss);
  color: var(--efh-rot);
}

/* ============================================================
   14. EINGÄNGE – kurze Wege, gestaffelt
   ============================================================ */

[data-efh-reveal] {
  opacity: 0;
  transform: translateY(14px);
}

[data-efh-reveal].efh-in {
  opacity: 1;
  transform: none;
  transition: opacity var(--d-3) var(--e-out) var(--efh-delay, 0ms),
              transform var(--d-3) var(--e-out) var(--efh-delay, 0ms);
}

/* ============================================================
   15. BARRIEREFREIHEIT
   ============================================================ */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
.wp-block-button__link:focus-visible {
  outline: 3px solid var(--efh-rot);
  outline-offset: 3px;
  border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  [data-efh-reveal] { opacity: 1; transform: none; }
  .efh-logoherz { animation: none; }
  .efh-progress { display: none; }
}

/* ============================================================
   16. MOBIL
   ============================================================ */

@media (max-width: 781px) {
  :root { --d-3: 320ms; }   /* kürzere Wege, kürzere Zeiten */

  .efh-hero { padding: var(--s-4) var(--s-3); text-align: center; }
  .efh-eyebrow { justify-content: center; }
  .efh-lead { margin-inline: auto; }
  .efh-logoherz { max-width: 260px; margin-top: var(--s-3); }

  .efh-zahlen-reihe .wp-block-column {
    border-left: 0;
    border-top: 1px solid var(--efh-linie);
    padding: var(--s-3) var(--s-2);
  }
  .efh-zahlen-reihe .wp-block-column:first-child { border-top: 0; }
}

/* ============================================================
   17. MITGLIED WERDEN
   ============================================================ */

.efh-mitglied {
  border: 1px solid var(--efh-linie);
  border-radius: var(--r-m);
  padding: clamp(var(--s-4), 4vw, var(--s-5)) clamp(var(--s-3), 4vw, var(--s-5));
  background: var(--efh-weiss);
}

.efh-mitglied .wp-block-columns { gap: clamp(var(--s-3), 4vw, var(--s-5)); align-items: center; }

/* ============================================================
   18. DOWNLOADS
   ============================================================ */

.efh-download {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--efh-linie);
  border-radius: var(--r-s);
  background: var(--efh-weiss);
  text-decoration: none !important;
  background-image: none !important;
  color: var(--efh-text) !important;
  margin-bottom: var(--s-1);
  transition: border-color var(--d-2) var(--e-out),
              box-shadow var(--d-2) var(--e-out),
              transform var(--d-2) var(--e-out);
}

.efh-download:hover {
  border-color: var(--efh-rot);
  box-shadow: var(--sh-1);
  transform: translateY(-2px);
}

.efh-download-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--efh-creme);
  color: var(--efh-rot);
}

.efh-download-text { flex: 1 1 auto; display: flex; flex-direction: column; line-height: 1.35; }
.efh-download-text strong { font-weight: 700; font-size: 1rem; }
.efh-download-text small  { color: var(--efh-text-2); font-size: .82rem; }

.efh-download-pfeil {
  flex: 0 0 auto;
  color: var(--efh-text-2);
  font-size: 1.15rem;
  transition: transform var(--d-1) var(--e-out), color var(--d-1) var(--e-out);
}

.efh-download:hover .efh-download-pfeil { transform: translateY(3px); color: var(--efh-rot); }

/* ============================================================
   19. SOCIAL MEDIA
   ============================================================ */

.efh-social { display: flex; flex-wrap: wrap; gap: var(--s-2); }

.efh-social-link {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  padding: .6em 1.15em;
  border: 1px solid var(--efh-linie);
  border-radius: 999px;
  font-weight: 600;
  font-size: .95rem;
  color: var(--efh-ant) !important;
  text-decoration: none !important;
  background-image: none !important;
  transition: border-color var(--d-1) var(--e-out),
              color var(--d-1) var(--e-out),
              background-color var(--d-1) var(--e-out),
              transform var(--d-1) var(--e-out);
}

.efh-social-link:hover {
  border-color: var(--efh-rot);
  background: var(--efh-rot);
  color: var(--efh-weiss) !important;
  transform: translateY(-2px);
}

.efh-social-icon { display: inline-flex; }

/* Im roten Abschlussbereich hell darstellen */
.efh-cta .efh-social { justify-content: center; }

.efh-cta .efh-social-link {
  border-color: rgba(255,255,255,.45);
  color: var(--efh-weiss) !important;
}
.efh-cta .efh-social-link:hover {
  background: var(--efh-weiss);
  border-color: var(--efh-weiss);
  color: var(--efh-rot) !important;
}

/* ============================================================
   20. SPENDENKONTO
   ============================================================ */

.efh-spenden-block {
  background: var(--efh-creme);
  border-radius: var(--r-m);
  padding: clamp(var(--s-4), 4.5vw, var(--s-5)) clamp(var(--s-3), 4vw, var(--s-5));
  scroll-margin-top: 120px;
}

.efh-konto {
  max-width: 34rem;
  margin-inline: auto;
  background: var(--efh-weiss);
  border: 1px solid var(--efh-linie);
  border-radius: var(--r-s);
  padding: var(--s-3);
}

.efh-konto-liste { margin: 0; }

.efh-konto-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-1) var(--s-2);
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--efh-linie);
}

.efh-konto-zeile:last-child { border-bottom: 0; padding-bottom: 0; }
.efh-konto-zeile:first-child { padding-top: 0; }

.efh-konto-zeile dt {
  flex: 0 0 8.5rem;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--efh-text-2);
  margin: 0;
}

.efh-konto-zeile dd {
  flex: 1 1 12rem;
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}

.efh-iban {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--efh-ant);
}

.efh-kopieren {
  border: 1px solid var(--efh-linie);
  background: var(--efh-weiss);
  color: var(--efh-rot);
  font: inherit;
  font-size: .82rem;
  font-weight: 700;
  padding: .35em 1em;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color var(--d-1) var(--e-out),
              background-color var(--d-1) var(--e-out),
              color var(--d-1) var(--e-out);
}

.efh-kopieren:hover {
  border-color: var(--efh-rot);
  background: var(--efh-rot);
  color: var(--efh-weiss);
}

.efh-kopieren.efh-fertig {
  border-color: var(--efh-gruen);
  background: var(--efh-gruen);
  color: var(--efh-weiss);
}

.efh-konto-hinweis {
  margin: var(--s-2) 0 0;
  font-size: .86rem;
  color: var(--efh-text-2);
  font-style: italic;
}

/* Buttons im Abschlussbereich mittig */
.efh-cta .wp-block-buttons { justify-content: center; }

/* ============================================================
   21. EIGENE KOPFLEISTE
   Kadence-Header wird ausgeblendet, unsere übernimmt.
   ============================================================ */

#masthead,
.site-header:not(.efh-kopfleiste) { display: none !important; }

body { padding-top: 84px; }

@media (max-width: 900px) {
  body { padding-top: 68px; }
}

.efh-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--efh-rot);
  color: #fff;
  padding: var(--s-2) var(--s-3);
  z-index: 10001;
  border-radius: 0 0 var(--r-s) 0;
}
.efh-skip:focus { left: 0; }

.efh-kopfleiste {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 9000;
  background: rgba(255,255,255,.72);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: transform var(--d-2) var(--e-out),
              background-color var(--d-2) var(--e-out),
              border-color var(--d-2) var(--e-out),
              box-shadow var(--d-2) var(--e-out);
  will-change: transform;
}

.efh-kopfleiste-innen {
  max-width: 1200px;
  margin-inline: auto;
  padding: var(--s-2) var(--s-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}

/* Zustand: gescrollt */
body.efh-gescrollt .efh-kopfleiste {
  background: rgba(255,255,255,.92);
  border-color: var(--efh-linie);
  box-shadow: var(--sh-1);
}

/* Die Leiste bleibt beim Scrollen immer sichtbar. */

/* ---- Marke ---- */

.efh-marke {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  line-height: 0;
}

.efh-marke img {
  display: block;
  width: auto;
  transition: height var(--d-2) var(--e-out),
              opacity var(--d-2) var(--e-out),
              transform var(--d-2) var(--e-out);
}

.efh-marke-voll  { height: 52px; }
.efh-marke-klein { height: 44px; position: absolute; opacity: 0; transform: scale(.6); pointer-events: none; }

/* Beim Scrollen tauscht die volle Marke gegen das Herz */
body.efh-gescrollt .efh-marke-voll  { height: 40px; opacity: 0; transform: scale(.9); position: absolute; }
body.efh-gescrollt .efh-marke-klein { opacity: 1; transform: scale(1); position: static; height: 40px; }

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

.efh-nav { position: relative; }

.efh-nav-liste {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

.efh-nav-liste > li > a {
  display: block;
  padding: .55em 0;
  font-size: .97rem;
  font-weight: 600;
  color: var(--efh-ant);
  text-decoration: none;
  transition: color var(--d-1) var(--e-out);
}

.efh-nav-liste > li > a:hover,
.efh-nav-liste > .current-menu-item > a { color: var(--efh-rot); }

/* Die gleitende Unterlinie */
.efh-nav-linie {
  position: absolute;
  bottom: 2px;
  left: 0;
  height: 2px;
  width: 0;
  background: var(--efh-rot);
  border-radius: 2px;
  opacity: 0;
  transform: translateX(0);
  transition: transform var(--d-2) var(--e-out),
              width var(--d-2) var(--e-out),
              opacity var(--d-1) var(--e-out);
  pointer-events: none;
}

/* ---- Spendenknopf ---- */

.efh-kopf-rechts { display: flex; align-items: center; gap: var(--s-2); flex: 0 0 auto; }

.efh-spendenknopf {
  display: inline-block;
  background: var(--efh-rot);
  color: #fff !important;
  text-decoration: none;
  font-weight: 700;
  font-size: .93rem;
  padding: .62em 1.4em;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(156,36,31,.22);
  transition: background-color var(--d-1) var(--e-out),
              transform var(--d-1) var(--e-out),
              box-shadow var(--d-1) var(--e-out);
}

.efh-spendenknopf:hover {
  background: var(--efh-rot-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(156,36,31,.28);
}
.efh-spendenknopf:active { transform: translateY(0) scale(.97); }

/* ---- Burger ---- */

.efh-burger {
  display: none;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 10px;
  flex-direction: column;
  justify-content: space-between;
}

.efh-burger span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--efh-ant);
  border-radius: 2px;
  transition: transform var(--d-2) var(--e-out),
              opacity var(--d-1) var(--e-out);
}

body.efh-menue-offen .efh-burger span:nth-child(1) { transform: translateY(11px) rotate(45deg); }
body.efh-menue-offen .efh-burger span:nth-child(2) { opacity: 0; }
body.efh-menue-offen .efh-burger span:nth-child(3) { transform: translateY(-11px) rotate(-45deg); }

/* ---- Mobiles Vollbildmenü ---- */

.efh-mobilmenue {
  position: fixed;
  inset: 0;
  z-index: 8900;
  background: var(--efh-creme);
  padding: 120px var(--s-4) var(--s-5);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s-4);
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity var(--d-2) var(--e-out), transform var(--d-2) var(--e-out);
}

body.efh-menue-offen { overflow: hidden; }
body.efh-menue-offen .efh-mobilmenue { opacity: 1; transform: none; }

/*
 * WICHTIG – Fehlerbehebung 6.6.0:
 *
 * Das Menü liegt als bildschirmfüllende Fläche über der Seite (position: fixed,
 * inset: 0, z-index 8900) und wird über das hidden-Attribut aus- und eingeblendet.
 * Genau das hat aber nicht funktioniert: Die Regel display:flex weiter oben ist eine
 * Klassenregel und schlägt damit die eingebaute Browser-Regel [hidden]{display:none}.
 *
 * Folge: Auf dem Handy lag über JEDER Seite eine unsichtbare Fläche und hat sämtliche
 * Berührungen abgefangen. Man sah alles, konnte aber nichts antippen – kein Link,
 * kein Knopf, kein Eingabefeld. Am Rechner fiel es nicht auf, weil das Menü dort
 * ohnehin per display:none abgeschaltet ist.
 *
 * Die folgende Zeile stellt das hidden-Attribut wieder scharf.
 */
.efh-mobilmenue[hidden] { display: none !important; }

.efh-mobil-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.efh-mobil-liste > li {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--d-3) var(--e-out), transform var(--d-3) var(--e-out);
}

body.efh-menue-offen .efh-mobil-liste > li { opacity: 1; transform: none; }

.efh-mobil-liste > li:nth-child(1) { transition-delay:  60ms; }
.efh-mobil-liste > li:nth-child(2) { transition-delay: 120ms; }
.efh-mobil-liste > li:nth-child(3) { transition-delay: 180ms; }
.efh-mobil-liste > li:nth-child(4) { transition-delay: 240ms; }
.efh-mobil-liste > li:nth-child(5) { transition-delay: 300ms; }
.efh-mobil-liste > li:nth-child(n+6) { transition-delay: 340ms; }

.efh-mobil-liste > li > a {
  display: block;
  font-size: clamp(1.6rem, 7vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--efh-ant);
  text-decoration: none;
  padding: .18em 0;
  transition: color var(--d-1) var(--e-out), transform var(--d-1) var(--e-out);
}

.efh-mobil-liste > li > a:hover,
.efh-mobil-liste > .current-menu-item > a { color: var(--efh-rot); transform: translateX(6px); }

.efh-spendenknopf--gross {
  align-self: flex-start;
  font-size: 1.05rem;
  padding: .85em 2em;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--d-3) var(--e-out) 380ms, transform var(--d-3) var(--e-out) 380ms;
}

body.efh-menue-offen .efh-spendenknopf--gross { opacity: 1; transform: none; }

/* ---- Umschaltpunkt ---- */

@media (max-width: 900px) {
  .efh-nav { display: none; }
  .efh-burger { display: flex; }
  .efh-kopfleiste-innen { padding: var(--s-2); }
  .efh-marke-voll { height: 42px; }
  body.efh-gescrollt .efh-marke-voll { height: 36px; }
  body.efh-gescrollt .efh-marke-klein { height: 36px; }
  .efh-kopf-rechts .efh-spendenknopf { display: none; }
}

@media (min-width: 901px) {
  .efh-mobilmenue { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .efh-kopfleiste,
  .efh-marke img,
  .efh-nav-linie,
  .efh-mobil-liste > li,
  .efh-spendenknopf--gross { transition: none !important; }
}

/* ============================================================
   22. ZEITLEISTE (Seite „Über uns")
   ============================================================ */

.efh-zeitleiste {
  position: relative;
  max-width: 44rem;
  margin-inline: auto;
  padding-left: var(--s-4);
}

.efh-zeitleiste::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--efh-linie);
}

.efh-zeit-punkt {
  position: relative;
  padding-bottom: var(--s-4);
}

.efh-zeit-punkt:last-child { padding-bottom: 0; }

.efh-zeit-punkt::before {
  content: "";
  position: absolute;
  left: calc(var(--s-4) * -1 + 2px);
  top: 6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--efh-weiss);
  border: 3px solid var(--efh-pink);
  transition: transform var(--d-2) var(--e-out), border-color var(--d-2) var(--e-out);
}

.efh-zeit-punkt:nth-child(2)::before { border-color: var(--efh-orange); }
.efh-zeit-punkt:nth-child(3)::before { border-color: var(--efh-gruen); }
.efh-zeit-punkt:nth-child(4)::before { border-color: var(--efh-blau); }
.efh-zeit-punkt:nth-child(5)::before { border-color: var(--efh-rot); }

.efh-zeit-punkt:hover::before { transform: scale(1.35); }

.efh-zeit-jahr {
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--efh-rot);
  margin: 0 0 var(--s-1) !important;
}

.efh-zeit-punkt p:not(.efh-zeit-jahr) {
  color: var(--efh-text-2);
  margin: 0;
}

/* ============================================================
   23. KOPFLEISTE – kräftiger, Version 4.2
   ============================================================ */

/* WordPress-Adminleiste berücksichtigen, sonst steckt die
   Kopfleiste dahinter. */
body.admin-bar .efh-kopfleiste { top: 32px; }
body.admin-bar { padding-top: 96px; }

@media (max-width: 782px) {
  body.admin-bar .efh-kopfleiste { top: 46px; }
  body.admin-bar { padding-top: 114px; }
  body.admin-bar.efh-menue-offen .efh-mobilmenue { top: 46px; }
}

/* Dreiteilige Aufteilung: Marke links, Menü mittig, Aktionen rechts */
.efh-kopfleiste-innen {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-2) var(--s-3);
  max-width: 1240px;
}

.efh-nav { justify-self: center; }

/* Menüpunkte deutlicher */
.efh-nav-liste { gap: var(--s-1); }

.efh-nav-liste > li > a {
  position: relative;
  padding: .62em .95em;
  border-radius: 999px;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--efh-ant);
  transition: color var(--d-1) var(--e-out),
              background-color var(--d-1) var(--e-out);
}

.efh-nav-liste > li > a:hover {
  color: var(--efh-rot);
  background: rgba(156, 36, 31, .07);
}

.efh-nav-liste > .current-menu-item > a,
.efh-nav-liste > .current_page_item > a {
  color: var(--efh-rot);
  font-weight: 700;
}

/* Unterlinie tiefer legen, damit sie zur Pille passt */
.efh-nav-linie { bottom: -2px; height: 3px; }

/* Marke etwas größer, Leiste luftiger */
.efh-marke-voll { height: 58px; }
body.efh-gescrollt .efh-marke-voll  { height: 46px; }
body.efh-gescrollt .efh-marke-klein { height: 46px; }

/* Spendenknopf kräftiger */
.efh-spendenknopf {
  font-size: .97rem;
  padding: .7em 1.6em;
}

/* Feine Trennlinie von Anfang an, damit die Leiste greifbar wirkt */
.efh-kopfleiste { border-bottom: 1px solid rgba(232,226,222,.7); }

@media (max-width: 900px) {
  .efh-kopfleiste-innen {
    grid-template-columns: auto auto;
    justify-content: space-between;
    gap: var(--s-2);
    padding: var(--s-2);
  }
  .efh-marke-voll { height: 46px; }
  body.efh-gescrollt .efh-marke-voll  { height: 40px; }
  body.efh-gescrollt .efh-marke-klein { height: 40px; }
}

/* ============================================================
   24. ABSCHNITTS-KÖPFE ZENTRIEREN – Version 5.0
   Vorher stand der Text links in einem mittigen Kasten.
   ============================================================ */

.efh-kopf {
  text-align: center;
  max-width: 46rem;
  margin-inline: auto;
}

.efh-kopf .efh-eyebrow { justify-content: center; }
.efh-kopf h2 { margin-inline: auto; }
.efh-kopf p:not(.efh-eyebrow) {
  color: var(--efh-text-2);
  max-width: 54ch;
  margin-inline: auto;
}

/* Spendenblock: mehr Luft zwischen Text und Karte */
.efh-spenden-block .efh-kopf { margin-bottom: var(--s-2); }
.efh-konto { margin-top: var(--s-3); }

/* ============================================================
   25. SEITENKOPF DER UNTERSEITEN UND ARCHIVE
   ============================================================ */

.entry-hero-container,
.entry-hero,
.page-hero-section {
  background: var(--efh-creme) !important;
  border-bottom: 1px solid var(--efh-linie);
}

.entry-hero-container .entry-header,
.entry-hero .entry-header {
  padding-block: clamp(var(--s-4), 6vw, var(--s-6)) !important;
  text-align: center;
}

.entry-hero-container .entry-title,
.entry-hero .entry-title,
.page-title .entry-title {
  font-size: clamp(2rem, 4.4vw, 3.1rem);
  font-weight: 800;
  letter-spacing: -.025em;
  color: var(--efh-ant);
}

/* ============================================================
   26. BEITRAGSÜBERSICHT (Seite „Aktuelles")
   ============================================================ */

.loop-entry,
.efh-news li {
  position: relative;
  background: var(--efh-weiss);
  border: 1px solid var(--efh-linie);
  border-radius: var(--r-m);
  overflow: hidden;
  box-shadow: var(--sh-1);
  transition: transform var(--d-2) var(--e-out),
              box-shadow var(--d-2) var(--e-out),
              border-color var(--d-2) var(--e-out);
}

.loop-entry:hover,
.efh-news li:hover {
  transform: translateY(-5px);
  box-shadow: var(--sh-2);
  border-color: color-mix(in srgb, var(--efh-rot) 30%, var(--efh-linie));
}

/* Bild oben, ohne Innenabstand, mit sanftem Zoom */
.loop-entry .post-thumbnail,
.loop-entry .post-thumbnail-inner {
  margin: 0;
  overflow: hidden;
  border-radius: 0;
}

.loop-entry .post-thumbnail img,
.efh-news img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 0;
  display: block;
  transition: transform 600ms var(--e-out);
}

.loop-entry:hover .post-thumbnail img,
.efh-news li:hover img { transform: scale(1.04); }

.loop-entry .entry-content-wrap {
  padding: var(--s-3) !important;
}

/* Kategorie als kleines Etikett */
.loop-entry .entry-taxonomies,
.loop-entry .category-links {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: var(--s-1);
}

.loop-entry .entry-taxonomies a,
.loop-entry .category-links a {
  color: var(--efh-pink) !important;
  text-decoration: none !important;
  background-image: none !important;
}

.loop-entry .entry-title {
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  font-weight: 700;
  line-height: 1.22;
  margin: 0 0 var(--s-1);
}

.loop-entry .entry-title a {
  color: var(--efh-ant) !important;
  text-decoration: none !important;
  background-image: none !important;
  transition: color var(--d-1) var(--e-out);
}

.loop-entry:hover .entry-title a { color: var(--efh-rot) !important; }

.loop-entry .entry-meta,
.loop-entry .posted-on {
  font-size: .85rem;
  color: var(--efh-text-2);
  margin-bottom: var(--s-2);
}

.loop-entry .entry-summary p {
  color: var(--efh-text-2);
  font-size: .96rem;
  margin: 0;
}

/* „Weiterlesen" als Pfeil-Link */
.loop-entry .post-more-link,
.loop-entry .more-link-wrap { margin-top: var(--s-2); }

.loop-entry .post-more-link a,
.loop-entry .more-link {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  font-weight: 700;
  color: var(--efh-rot) !important;
  text-decoration: none !important;
  background-image: none !important;
}

.loop-entry .post-more-link a::after,
.loop-entry .more-link::after {
  content: "→";
  transition: transform var(--d-1) var(--e-out);
}

.loop-entry:hover .post-more-link a::after,
.loop-entry:hover .more-link::after { transform: translateX(4px); }

/* Ganze Karte anklickbar */
.efh-klickbar { cursor: pointer; }

/* Abstand im Raster */
.archive .site-main .content-wrap,
.blog .site-main .content-wrap { gap: var(--s-3); }

/* Beitragsnavigation */
.navigation.pagination { margin-top: var(--s-5); }

.navigation.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid var(--efh-linie);
  color: var(--efh-ant);
  text-decoration: none;
  font-weight: 600;
  margin: 0 .2rem;
  transition: border-color var(--d-1) var(--e-out),
              background-color var(--d-1) var(--e-out),
              color var(--d-1) var(--e-out);
}

.navigation.pagination .page-numbers:hover,
.navigation.pagination .page-numbers.current {
  background: var(--efh-rot);
  border-color: var(--efh-rot);
  color: var(--efh-weiss);
}

/* ============================================================
   27. EINZELNER BEITRAG
   ============================================================ */

.single-post .entry-content > * { margin-inline: auto; }
.single-post .entry-content p,
.single-post .entry-content h2,
.single-post .entry-content h3,
.single-post .entry-content ul,
.single-post .entry-content ol { max-width: 62ch; }

.single-post .entry-content h2 { margin-top: var(--s-5); }
.single-post .entry-content h3 { margin-top: var(--s-4); }

.single-post .post-thumbnail img { border-radius: var(--r-m); }

/* ============================================================
   28. SPENDENBLOCK – zweispaltig über echte Spalten
   Kein CSS-Raster mehr: das Layout kommt aus dem
   Spalten-Block von WordPress, damit nichts kollabiert.
   ============================================================ */

.efh-spendentext { text-align: left; }
.efh-spendentext .efh-eyebrow { justify-content: flex-start; }

.efh-spendentext h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.1;
  margin: 0 0 var(--s-2);
}

.efh-spendentext p:not(.efh-eyebrow) {
  color: var(--efh-text-2);
  max-width: 46ch;
  margin: 0;
}

.efh-spenden-block .efh-konto { margin: 0; }

/* ============================================================
   29. DANKE-ANIMATION BEIM KOPIEREN
   ============================================================ */

.efh-konto { position: relative; overflow: visible; }

.efh-kopieren {
  position: relative;
  overflow: visible;
  transition: background-color var(--d-2) var(--e-out),
              border-color var(--d-2) var(--e-out),
              color var(--d-2) var(--e-out),
              transform var(--d-1) var(--e-feder);
}

.efh-kopieren:active { transform: scale(.94); }

.efh-kopieren.efh-fertig {
  background: var(--efh-rot);
  border-color: var(--efh-rot);
  color: var(--efh-weiss) !important;
  animation: efh-puls 420ms var(--e-feder);
}

@keyframes efh-puls {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.14); }
  100% { transform: scale(1); }
}

/* Ring, der nach außen läuft */
.efh-kopieren.efh-fertig::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 999px;
  border: 2px solid var(--efh-rot);
  animation: efh-ring 700ms var(--e-out) forwards;
  pointer-events: none;
}

@keyframes efh-ring {
  0%   { transform: scale(1);   opacity: .7; }
  100% { transform: scale(1.9); opacity: 0;  }
}

/* Fliegende Herzen aus dem Vereinslogo */
.efh-flugherz {
  position: absolute;
  left: var(--efh-x);
  top: var(--efh-y);
  width: var(--efh-g);
  height: var(--efh-g);
  margin: calc( var(--efh-g) / -2 );
  background: var(--efh-herz) center / contain no-repeat;
  pointer-events: none;
  opacity: 0;
  z-index: 3;
  animation: efh-flug var(--efh-dauer) cubic-bezier(.15,.6,.3,1) var(--efh-verzug) forwards;
}

@keyframes efh-flug {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(.3) rotate(0deg);
  }
  12% { opacity: 1; }
  70% { opacity: 1; }
  100% {
    opacity: 0;
    transform: translate(var(--efh-dx), var(--efh-dy)) scale(var(--efh-skala)) rotate(var(--efh-dreh));
  }
}

/* Dankeschön-Streifen */
.efh-danke {
  position: absolute;
  left: 50%;
  bottom: calc( 100% - 8px );
  transform: translate(-50%, 8px) scale(.94);
  display: inline-flex;
  align-items: center;
  gap: .55em;
  white-space: nowrap;
  padding: .7em 1.2em;
  border-radius: 999px;
  background: var(--efh-rot);
  color: var(--efh-weiss);
  font-weight: 700;
  font-size: .96rem;
  box-shadow: var(--sh-2);
  opacity: 0;
  pointer-events: none;
  z-index: 4;
  transition: opacity var(--d-2) var(--e-out),
              transform var(--d-3) var(--e-feder);
}

.efh-danke.efh-danke-an {
  opacity: 1;
  transform: translate(-50%, -10px) scale(1);
}

.efh-danke::before {
  content: "";
  width: 1.15em;
  height: 1.15em;
  flex: none;
  background: var(--efh-herz) center / contain no-repeat;
  filter: brightness(0) invert(1);
  animation: efh-schlag 900ms var(--e-feder) 2;
}

@keyframes efh-schlag {
  0%, 100% { transform: scale(1); }
  25%      { transform: scale(1.25); }
  45%      { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .efh-flugherz { display: none; }
  .efh-danke::before { animation: none; }
  .efh-kopieren.efh-fertig { animation: none; }
  .efh-kopieren.efh-fertig::after { display: none; }
}

/* ============================================================
   30. EIGENER SEITENKOPF FÜR ARCHIVE UND BEITRÄGE
   Der graue Standard-Kopf von Kadence wird ausgeblendet.
   ============================================================ */

.archive .entry-hero-container,
.blog .entry-hero-container,
.single .entry-hero-container,
.archive .entry-hero,
.blog .entry-hero,
.single .entry-hero { display: none !important; }

.efh-seitenkopf {
  position: relative;
  overflow: hidden;
  padding-block: clamp(var(--s-5), 8vw, var(--s-7));
  background:
    radial-gradient( 60rem 30rem at 15% 0%,  color-mix(in srgb, var(--efh-pink) 12%, transparent), transparent 70% ),
    radial-gradient( 50rem 28rem at 90% 100%, color-mix(in srgb, var(--efh-orange) 14%, transparent), transparent 70% ),
    var(--efh-creme);
  border-bottom: 1px solid var(--efh-linie);
  text-align: center;
}

.efh-seitenkopf-innen {
  position: relative;
  z-index: 2;
  max-width: 44rem;
  margin-inline: auto;
  padding-inline: var(--s-3);
}

.efh-seitenkopf .efh-eyebrow { justify-content: center; }

.efh-seitenkopf h1 {
  font-size: clamp(2.2rem, 5.2vw, 3.6rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.05;
  margin: 0 0 var(--s-2);
  color: var(--efh-ant);
}

.efh-seitenkopf p {
  color: var(--efh-text-2);
  font-size: 1.08rem;
  margin: 0;
}

/* Ruhig schwebende Herzen im Hintergrund */
.efh-seitenkopf-herz {
  position: absolute;
  background: var(--efh-herz) center / contain no-repeat;
  opacity: .1;
  pointer-events: none;
  animation: efh-schweben var(--efh-dauer, 9s) ease-in-out infinite alternate;
}

.efh-seitenkopf-herz:nth-child(1) { width: 70px;  height: 70px;  top: 18%; left: 7%;   --efh-dauer: 8s;  }
.efh-seitenkopf-herz:nth-child(2) { width: 110px; height: 110px; top: 52%; left: 88%;  --efh-dauer: 11s; }
.efh-seitenkopf-herz:nth-child(3) { width: 46px;  height: 46px;  top: 72%; left: 20%;  --efh-dauer: 9.5s;}
.efh-seitenkopf-herz:nth-child(4) { width: 58px;  height: 58px;  top: 12%; left: 78%;  --efh-dauer: 10s; }

@keyframes efh-schweben {
  from { transform: translateY(-10px) rotate(-6deg); }
  to   { transform: translateY(12px)  rotate(6deg);  }
}

@media (prefers-reduced-motion: reduce) {
  .efh-seitenkopf-herz { animation: none; }
}

/* ============================================================
   31. AUTOR AUSBLENDEN, DATUM UND KATEGORIE AUFWERTEN
   ============================================================ */

.posted-by,
.entry-meta .posted-by,
.entry-author,
.author-name,
.byline,
.entry-meta-divider { display: none !important; }

.loop-entry .entry-taxonomies a,
.single .entry-taxonomies a {
  display: inline-block;
  padding: .3em .8em;
  border-radius: 999px;
  background: color-mix(in srgb, var(--efh-pink) 12%, transparent);
  font-size: .7rem;
  transition: background-color var(--d-1) var(--e-out);
}

.loop-entry:hover .entry-taxonomies a {
  background: color-mix(in srgb, var(--efh-pink) 20%, transparent);
}

.loop-entry .entry-meta,
.loop-entry .posted-on {
  display: block;
  font-size: .84rem;
  letter-spacing: .01em;
  color: var(--efh-text-2);
  margin: 0 0 var(--s-2);
}

/* Farbige Oberkante, die beim Überfahren wächst */
.loop-entry::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient( 90deg, var(--efh-pink), var(--efh-orange), var(--efh-gruen) );
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--d-3) var(--e-out);
  z-index: 2;
}

.loop-entry:hover::before { transform: scaleX(1); }

/* ============================================================
   32. FEINSCHLIFF – Version 5.2
   ============================================================ */

/* --- Kleine Überschriften kräftiger --------------------- */

.efh-eyebrow {
  font-size: .92rem;
  letter-spacing: .12em;
  font-weight: 800;
}

.efh-eyebrow::before { width: 32px; height: 3px; border-radius: 2px; }

/* --- Spendenkonto: Beschriftung über dem Wert ------------ */

.efh-konto-zeile {
  display: block;
  padding: var(--s-2) 0;
}

.efh-konto-zeile dt {
  display: block;
  flex: none;
  font-size: .7rem;
  letter-spacing: .12em;
  margin-bottom: .4em;
}

.efh-konto-zeile dd {
  display: block;
  flex: none;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--efh-ant);
  line-height: 1.35;
}

.efh-iban {
  display: block;
  white-space: nowrap;
  font-size: clamp(.86rem, 1.3vw, 1.04rem);
}

.efh-konto .efh-kopieren { margin-top: var(--s-2); }

.efh-konto-hinweis { margin-top: var(--s-2); }

/* --- Kopieren-Knopf verwandelt sich ---------------------- */

.efh-kopieren {
  white-space: nowrap;
  overflow: hidden;
  will-change: width;
  transition: width var(--d-3) var(--e-out),
              background-color var(--d-2) var(--e-out),
              border-color var(--d-2) var(--e-out),
              color var(--d-2) var(--e-out);
}

.efh-kopieren-text {
  display: inline-block;
  transition: opacity 140ms linear;
}

.efh-kopieren.efh-wechselt .efh-kopieren-text { opacity: 0; }

.efh-kopieren.efh-fertig {
  background: var(--efh-rot);
  border-color: var(--efh-rot);
  color: var(--efh-weiss) !important;
  animation: none;
}

.efh-kopieren.efh-fertig::after { display: none; }

/* --- Downloads gleichmäßig ------------------------------- */

.efh-download {
  min-height: 78px;
  margin-bottom: var(--s-2);
  padding: var(--s-2) var(--s-2) var(--s-2) var(--s-2);
  gap: var(--s-2);
}

.efh-download:last-child { margin-bottom: 0; }

.efh-download-text { gap: .15em; }

.efh-download-text strong {
  font-size: .98rem;
  line-height: 1.28;
}

.efh-download-text small {
  font-size: .8rem;
  letter-spacing: .01em;
}

.efh-download-pfeil {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--efh-linie);
  font-size: 1rem;
  line-height: 1;
  transition: transform var(--d-2) var(--e-out),
              color var(--d-2) var(--e-out),
              border-color var(--d-2) var(--e-out),
              background-color var(--d-2) var(--e-out);
}

.efh-download:hover .efh-download-pfeil {
  transform: translateY(3px);
  color: var(--efh-weiss);
  background: var(--efh-rot);
  border-color: var(--efh-rot);
}

/* --- Ein Wort hervorheben: Farbverlauf in der Schrift ----
   Kein Balken, keine Linie. Das Wort selbst trägt den
   Verlauf von Rot nach Pink, der beim Laden einmal
   durchwandert. ------------------------------------------- */

.efh-hervor {
  background-image: linear-gradient(
    100deg,
    var(--efh-rot)    0%,
    var(--efh-pink)   38%,
    var(--efh-orange) 62%,
    var(--efh-rot)    100%
  );
  background-size: 260% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: efh-verlauf 1400ms var(--e-out) 300ms forwards;
}

@keyframes efh-verlauf {
  to { background-position: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .efh-hervor { animation: none; background-position: 0 0; }
}

/* ============================================================
   33. HERZEN AUS DER KONTOKARTE – Version 5.3
   Sie steigen jetzt vom unteren Rand der Karte auf, hinter
   dem Text, und wandern über die Karte hinaus.
   ============================================================ */

.efh-konto > *:not(.efh-flugherz) { position: relative; z-index: 1; }

.efh-flugherz { z-index: 0; }

/* ============================================================
   34. SEITENKOPF AUF UNTERSEITEN
   Alle Seiten bringen ihren eigenen Kopf im Inhalt mit,
   der graue Standardkopf wird überall ausgeblendet.
   ============================================================ */

.page .entry-hero-container,
.page .entry-hero { display: none !important; }

/* ============================================================
   35. KONTAKTKARTEN
   ============================================================ */

.efh-kontaktkarte {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  height: 100%;
  padding: var(--s-3);
  border: 1px solid var(--efh-linie);
  border-radius: var(--r-m);
  background: var(--efh-weiss);
  box-shadow: var(--sh-1);
  transition: transform var(--d-2) var(--e-out),
              box-shadow var(--d-2) var(--e-out),
              border-color var(--d-2) var(--e-out);
}

.efh-kontaktkarte:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-2);
  border-color: color-mix(in srgb, var(--efh-rot) 32%, var(--efh-linie));
}

.efh-kontaktkarte-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: var(--s-1);
  border-radius: 12px;
  background: var(--efh-creme);
  color: var(--efh-rot);
}

.efh-kontaktkarte h3 {
  font-size: 1.12rem;
  font-weight: 700;
  margin: 0;
}

.efh-kontaktkarte p {
  color: var(--efh-text-2);
  font-size: .95rem;
  margin: 0;
  line-height: 1.5;
}

.efh-kontaktkarte-link {
  margin-top: auto;
  padding-top: var(--s-2);
  display: inline-flex;
  align-items: center;
  gap: .4em;
  font-weight: 700;
  color: var(--efh-rot) !important;
  text-decoration: none !important;
  background-image: none !important;
}

.efh-kontaktkarte-link::after {
  content: "\2192";
  transition: transform var(--d-1) var(--e-out);
}

.efh-kontaktkarte:hover .efh-kontaktkarte-link::after { transform: translateX(4px); }

/* Hinweiskasten */
.efh-hinweis {
  border-left: 4px solid var(--efh-orange);
  background: var(--efh-creme);
  border-radius: 0 var(--r-s) var(--r-s) 0;
  padding: var(--s-3);
}

.efh-hinweis p { margin: 0; }
.efh-hinweis p + p { margin-top: var(--s-2); }

/* ============================================================
   36. AUSRICHTUNG UND SPRUNGZIELE – Version 5.4
   ============================================================ */

/* --- Sprungziele nicht unter die Kopfleiste schieben ----- */

html { scroll-behavior: smooth; }

[id] { scroll-margin-top: 100px; }

@media (max-width: 780px) {
  [id] { scroll-margin-top: 84px; }
}

/* --- Downloads sauber zentriert --------------------------
   Raster statt Flexbox: die drei Teile liegen in einer Zeile,
   die genau so hoch ist wie ihr größter Inhalt. Damit sitzen
   Symbol, Text und Pfeil zwangsläufig auf einer Mittellinie. */

.efh-download {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--s-2);
  min-height: 0;
  padding: var(--s-2) var(--s-3);
  line-height: 1.35;
}

.efh-download-icon { align-self: center; }

.efh-download-text {
  display: block;
  align-self: center;
}

.efh-download-text strong,
.efh-download-text small { display: block; }

.efh-download-text strong { margin-bottom: .12em; }

.efh-download-pfeil { align-self: center; }

/* --- Social-Buttons: Symbol und Wort auf einer Linie ----- */

.efh-social { align-items: center; justify-content: center; }

.efh-social-link {
  line-height: 1;
  padding: .72em 1.2em;
}

.efh-social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.efh-social-icon svg { display: block; }

.efh-social-name { display: inline-block; line-height: 1; }

/* ============================================================
   37. DOWNLOADS – Leerzeile über dem Inhalt entfernen
   Über dem Symbol saß eine leere Zeilenbox in Texthöhe und hat
   alles nach unten gedrückt. Schriftgröße 0 auf der Hülle löscht
   jede anonyme Zeilenbox, die Kinder bekommen ihre Größe zurück.
   ============================================================ */

.efh-download {
  display: flex !important;
  align-items: center !important;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3) !important;
  min-height: 0 !important;
  font-size: 0;            /* löscht Leerzeilen zwischen den Teilen */
  line-height: 0;
}

.efh-download br { display: none; }

.efh-download > * {
  align-self: center !important;
  margin: 0 !important;
  line-height: 1.35;
}

.efh-download-icon {
  font-size: 1rem;
  flex: 0 0 42px;
  line-height: 0;
}

.efh-download-icon svg { display: block; }

.efh-download-text {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
}

.efh-download-text strong {
  display: block;
  font-size: .98rem;
  line-height: 1.28;
  margin: 0 0 .14em !important;
}

.efh-download-text small {
  display: block;
  font-size: .8rem;
  line-height: 1.35;
  margin: 0 !important;
}

.efh-download-pfeil {
  font-size: 1rem;
  line-height: 1;
  flex: 0 0 34px;
}

/* ============================================================
   38. HANDY-FEINSCHLIFF – Version 5.5
   ============================================================ */

/* --- Zweiter Knopf: Vereinsfarben statt Kadence-Blau ------ */

.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color),
.wp-block-button.is-style-outline .wp-element-button {
  border: 2px solid var(--efh-rot) !important;
  color: var(--efh-rot) !important;
  background: transparent !important;
  background-image: none !important;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-element-button:hover {
  background: var(--efh-rot) !important;
  color: var(--efh-weiss) !important;
}

/* Im roten Abschlussbereich weiterhin hell */
.efh-cta .wp-block-button.is-style-outline .wp-block-button__link,
.efh-cta .wp-block-button.is-style-outline .wp-element-button {
  border-color: rgba(255,255,255,.55) !important;
  color: var(--efh-weiss) !important;
}
.efh-cta .wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--efh-weiss) !important;
  color: var(--efh-rot) !important;
}

@media (max-width: 781px) {

  /* --- Logo bleibt lesbar -------------------------------
     Das Herz allein ist auf dem Handy nur noch Konfetti.
     Deshalb hier immer die volle Wortmarke, auch beim
     Scrollen. Der Wechsel bleibt dem Desktop vorbehalten. */

  .efh-marke-voll,
  body.efh-gescrollt .efh-marke-voll {
    height: 38px !important;
    opacity: 1 !important;
    transform: none !important;
    position: static !important;
  }

  .efh-marke-klein,
  body.efh-gescrollt .efh-marke-klein {
    display: none !important;
  }

  /* --- Knöpfe: volle Breite, gleiche Größe --------------- */

  .efh-hero .wp-block-buttons,
  .efh-cta .wp-block-buttons {
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-2);
    max-width: 22rem;
    margin-inline: auto;
  }

  .efh-hero .wp-block-button,
  .efh-cta .wp-block-button { width: 100%; }

  .efh-hero .wp-block-button__link,
  .efh-cta .wp-block-button__link {
    display: block;
    width: 100%;
    text-align: center;
    padding-block: .95em;
  }

  /* --- Downloads: Wörter sauber trennen ------------------ */

  .efh-download {
    padding: var(--s-2) !important;
    gap: 12px;
  }

  .efh-download-icon {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
  }

  .efh-download-icon svg { width: 18px; height: 18px; }

  .efh-download-pfeil {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
  }

  .efh-download-text strong,
  .efh-download-text small {
    -webkit-hyphens: auto;
    hyphens: auto;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .efh-download-text strong { font-size: .94rem; }
  .efh-download-text small  { font-size: .78rem; }

  /* --- Überschriften nicht zu eng ------------------------ */

  h1, h2, h3 {
    -webkit-hyphens: auto;
    hyphens: auto;
  }

  /* --- Kontokarte und Kacheln etwas luftiger ------------- */

  .efh-konto { padding: var(--s-3) var(--s-2); }
  .efh-mitglied { padding: var(--s-4) var(--s-2); }
}

@keyframes efh-wippe {
  from { transform: translateY(-4px) rotate(-6deg); }
  to   { transform: translateY(4px)  rotate(6deg); }
}

@media (prefers-reduced-motion: reduce) {
}

@media (max-width: 781px) {
}

/* ============================================================
   40. SOCIAL – die echten Markenzeichen, Version 6.5.0
   Die Abzeichen bringen ihre Farben im SVG selbst mit. Deshalb
   färbt die Seite hier nichts mehr um – weder im roten Bereich
   noch beim Überfahren. So bleiben sie überall die offiziellen
   Zeichen, wie es die Markenvorgaben verlangen.
   ============================================================ */

.efh-social-icon svg {
  border-radius: 6px;
  transition: transform var(--d-1) var(--e-out);
}

.efh-social-link--facebook .efh-social-icon svg { border-radius: 50%; }

/* Beim Überfahren wächst das Zeichen leicht, statt die Farbe zu verlieren. */
.efh-social-link:hover .efh-social-icon svg { transform: scale(1.12); }

/* ============================================================
   46. SOCIAL – Zeichen sauber in der Mitte, Version 6.5.0

   Zwei Dinge saßen schief:

   a) Ein Wort wie „Facebook" hat keine Unterlängen. Sein sicht-
      barer Schwerpunkt liegt deshalb über der Mitte der Zeilen-
      box. Ein exakt mittig gesetztes Zeichen wirkt daneben zu
      tief. Der Ausgleich nach oben ist winzig, aber genau das
      ist der Unterschied zwischen „passt" und „krumm".

   b) Ein Quadrat wirkt bei gleicher Kantenlänge größer als ein
      Kreis, weil es in den Ecken mehr Fläche hat. Instagram wird
      darum eine Spur kleiner gezeichnet als Facebook – beide
      sehen dann gleich groß aus.
   ============================================================ */

.efh-social-link {
  align-items: center;
  padding: .66em 1.25em;
}

.efh-social-icon {
  width: 22px;
  height: 22px;
  align-self: center;
  transform: translateY(-1px);   /* Ausgleich (a) */
}

.efh-social-link--facebook .efh-social-icon svg { width: 22px; height: 22px; }

.efh-social-link--instagram .efh-social-icon svg { width: 20px; height: 20px; }  /* Ausgleich (b) */

.efh-social-name {
  display: block;
  align-self: center;
  line-height: 1;
}

/* ============================================================
   41. SPONSOREN
   ============================================================ */

.efh-sponsoren {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--s-3);
  align-items: center;
}

.efh-sponsor {
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 2;
  padding: var(--s-3);
  border: 1px solid var(--efh-linie);
  border-radius: var(--r-m);
  background: var(--efh-weiss);
  transition: transform var(--d-2) var(--e-out),
              box-shadow var(--d-2) var(--e-out),
              border-color var(--d-2) var(--e-out);
}

.efh-sponsor:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-1);
  border-color: color-mix(in srgb, var(--efh-rot) 28%, var(--efh-linie));
}

.efh-sponsor img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .72;
  transition: filter var(--d-3) var(--e-out), opacity var(--d-3) var(--e-out);
}

.efh-sponsor:hover img { filter: none; opacity: 1; }

/* ============================================================
   42. FUSSNOTE
   ============================================================ */

.efh-fussnote {
  font-size: .86rem;
  color: var(--efh-text-2);
  border-top: 1px solid var(--efh-linie);
  padding-top: var(--s-2);
  margin-top: var(--s-3) !important;
}

.efh-fussnote sup { color: var(--efh-rot); font-weight: 700; }

@media (max-width: 781px) {
}

/* ============================================================
   44. KENNZAHLEN auf der Startseite (efh-zahlen-c2)

   Farbstreifen über der Zahl, die Zahl selbst in der Akzentfarbe,
   dahinter ein weicher Schimmer. In 6.8.0 wurden fünf nie benutzte
   Entwurfsvarianten (a, b, c, d, c1) entfernt – rund 8 KB, die auf
   jeder Seite mitgeladen wurden, ohne irgendetwas zu bewirken.
   ============================================================ */

.efh-zahlen-c2 { gap: 0 !important; }
.efh-zahlen-c2 .wp-block-column {
  border-left: 1px solid var(--efh-linie);
  padding: var(--s-3) var(--s-3) !important;
  text-align: center;
  position: relative;
}
.efh-zahlen-c2 .wp-block-column:first-child { border-left: 0; }
.efh-zahlen-c2 .wp-block-column:nth-child(1) { --efh-akzent: var(--efh-violett); --efh-akzent-dunkel: #6C2E85; }
.efh-zahlen-c2 .wp-block-column:nth-child(2) { --efh-akzent: var(--efh-blau);   --efh-akzent-dunkel: #2E7E9B; }
.efh-zahlen-c2 .wp-block-column:nth-child(3) { --efh-akzent: var(--efh-orange); --efh-akzent-dunkel: #B36400; }
.efh-zahlen-c2 .wp-block-column:nth-child(4) { --efh-akzent: var(--efh-tuerkis); --efh-akzent-dunkel: #0F7A72; }
.efh-zahlen-c2 .wp-block-column::before {
  content: "";
  display: block;
  width: 38px;
  height: 4px;
  border-radius: 2px;
  margin: 0 auto var(--s-2);
  background: var(--efh-akzent);
  transition: width var(--d-3) var(--e-out);
}
.efh-zahlen-c2 .wp-block-column:hover::before { width: 60px; }
.efh-zahlen-c2 .efh-zahl {
  position: relative;
  z-index: 1;
  font-size: clamp(2.1rem, 3.7vw, 3.1rem);
  font-weight: 900;
  letter-spacing: -.04em;
  color: var(--efh-akzent-dunkel);
  margin-bottom: var(--s-1);
  transition: transform var(--d-2) var(--e-feder);
}
.efh-zahlen-c2 .wp-block-column:hover .efh-zahl { transform: translateY(-2px); }
.efh-zahlen-c2 .efh-zahl-label { color: var(--efh-text-2); }

/* Nur C2: weicher Schimmer hinter der Zahl, ohne Kante */
.efh-zahlen-c2 .wp-block-column::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 34%;
  width: 160px;
  height: 160px;
  margin: -80px 0 0 -80px;
  border-radius: 50%;
  background: radial-gradient(circle,
              color-mix(in srgb, var(--efh-akzent) 26%, transparent) 0%,
              transparent 68%);
  opacity: .55;
  pointer-events: none;
  transition: opacity var(--d-3) var(--e-out), transform var(--d-3) var(--e-out);
}

.efh-zahlen-c2 .wp-block-column:hover::after {
  opacity: .85;
  transform: scale(1.08);
}

@media (max-width: 781px) {
  .efh-zahlen-c2 .wp-block-column {
    border-left: 0;
    border-top: 1px solid var(--efh-linie);
  }
  .efh-zahlen-c2 .wp-block-column:first-child { border-top: 0; }
  .efh-zahlen-c2 .wp-block-column::after { width: 120px; height: 120px; margin: -60px 0 0 -60px; }
}

/* ============================================================
   45. SPONSORENLOGOS FARBIG – Version 6.3
   Der Graustufen-Effekt ist raus: Die Firmen sollen ihre
   Farben sehen.
   ============================================================ */

.efh-sponsor img {
  filter: none;
  opacity: 1;
  transition: transform var(--d-2) var(--e-out);
}

.efh-sponsor:hover img { transform: scale(1.04); }

/* ============================================================
   FUSSBEREICH (ab 6.9.2)

   Der Fuß hängt in einem Widget-Bereich von Kadence. Der ist
   schmal und mittig – gebaut für „Neueste Beiträge", nicht für
   einen ganzseitigen Abschluss. In 6.9.0 stand der Fuß deshalb
   als schmaler dunkler Klotz in der Seitenmitte, und die vierte
   Spalte lief rechts ins Weiße hinaus.

   Zwei Lehren daraus, die hier umgesetzt sind:

   1. Der Fuß bricht selbst aus seinem Behälter aus (100vw statt
      100%). Er ist damit nicht mehr davon abhängig, wie jemand
      die Footer-Reihe eingestellt hat.

   2. Die Spalten sind nicht mehr fest auf vier gesetzt, sondern
      umbrechen nach verfügbarem Platz. Vier Spalten in 300 Pixel
      kann kein Raster retten – es darf gar nicht erst dazu
      kommen.
   ============================================================ */

/*
 * Warum der Fuß nicht selbst ausbricht (Lehre aus 6.9.1):
 *
 * Ein Ausbruch über 100vw wird von jedem Elternelement mit
 * "overflow: hidden" wieder abgeschnitten – genau das passiert im
 * Footer von Kadence. Der Fuß war dann zwar bildschirmbreit
 * gebaut, zu sehen war aber nur der Ausschnitt.
 *
 * Deshalb jetzt andersherum: Die dunkle Fläche bekommt zusätzlich
 * Kadences eigener Reihen-Behälter, der ohnehin über die volle
 * Breite geht. Der Fuß selbst behält seine Farbe als Rückfall,
 * falls ein Browser :has() nicht kennt – dann steht er eben als
 * dunkler Block in der Mitte statt unsichtbar auf Weiß.
 */
.site-middle-footer-wrap:has(.efh-fuss),
.site-top-footer-wrap:has(.efh-fuss),
.site-bottom-footer-wrap:has(.efh-fuss),
.site-footer-row-container:has(.efh-fuss) {
  background: var(--efh-ant) !important;
}

.efh-fuss {
  background: var(--efh-ant);
  color: var(--efh-creme);
  padding: var(--s-5) var(--s-3) var(--s-3);
  font-size: .96rem;
  line-height: 1.7;
}

/* Kadence stellt den Footer-Widgets zentrierten Text voran. Für
   eine Adresse und drei Linklisten ist das falsch: Mittig
   gesetzte Listen haben keine gemeinsame Kante, das Auge findet
   beim Lesen keinen Anfang. */
.efh-fuss,
.efh-fuss p,
.efh-fuss h2,
.efh-fuss ul,
.efh-fuss li,
.efh-fuss .efh-fuss-spalte {
  text-align: left !important;
}

/* Kadences Polster um das Widget – sonst bleibt ein heller
   Streifen zwischen Seite und Fuß stehen. */
.site-footer .widget_block:has(.efh-fuss),
.footer-widget-area:has(.efh-fuss) {
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
}

.efh-fuss-raster {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;

  /* Umbruch nach Platz statt nach fester Spaltenzahl. */
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--s-4) var(--s-3);
  align-items: start;
}

.efh-fuss-spalte {
  /* Ohne das dürfen Rasterspalten breiter werden als ihr Anteil –
     und schieben den Inhalt aus der Fläche heraus. */
  min-width: 0;
}

.efh-fuss-spalte p { margin: 0 0 var(--s-1); }

.efh-fuss-name {
  font-weight: 700;
  font-size: 1.12rem;
  line-height: 1.35;
  margin-bottom: var(--s-2) !important;
}

.efh-fuss-adresse { color: #D8D1CC; }

.efh-fuss-titel {
  font-size: .78rem !important;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #C9C1BC;
  margin: 0 0 var(--s-2) !important;
  font-weight: 700;
}

.efh-fuss-liste {
  list-style: none;
  margin: 0;
  padding: 0;
}

.efh-fuss-liste li + li { margin-top: 6px; }

.efh-fuss a {
  color: var(--efh-creme);
  text-decoration: none;
  text-underline-offset: 4px;

  /* Lange Adressen brechen, statt aus der Spalte zu ragen. */
  overflow-wrap: anywhere;
}

.efh-fuss a:hover,
.efh-fuss a:focus-visible {
  text-decoration: underline;
  color: var(--efh-weiss);
}

.efh-fuss a:focus-visible {
  outline: 2px solid var(--efh-weiss);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Eine Pflichtseite fehlt. Bewusst auffällig – das soll nicht
   monatelang unbemerkt im Fuß stehen. */
.efh-fuss-fehlt {
  color: #FFB3B0;
  font-weight: 700;
}

.efh-fuss-iban {
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.efh-fuss-klein {
  font-size: .86rem;
  color: #C9C1BC;
}

.efh-fuss-schluss {
  max-width: 1100px;
  margin: var(--s-4) auto 0;
  padding-top: var(--s-3);
  border-top: 1px solid rgba(252, 248, 245, .18);

  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: center;
  justify-content: space-between;
}

.efh-fuss-schluss p {
  margin: 0;
  font-size: .88rem;
  color: #C9C1BC;
}

.efh-fuss .efh-social a {
  border-color: rgba(252, 248, 245, .3);
}

@media (max-width: 560px) {
  .efh-fuss {
    padding: var(--s-4) var(--s-2) var(--s-3);
  }

  .efh-fuss-schluss {
    justify-content: flex-start;
  }

  /* Auf dem Handy zählt jede Trefferfläche. */
  .efh-fuss-liste a {
    display: inline-block;
    padding: 6px 0;
  }
}

/* Hinweis anstelle eines Balkens, solange noch nichts zu zählen ist. */
.efh-fortschritt-leer {
  margin: 0;
  color: var(--efh-text-2);
  font-style: italic;
}