/* ==================================================================
   Every Penny Travels — Stylesheet
   Version 2.0 · eigenständig, für eigenes HTML in Elementor-Widgets
   ------------------------------------------------------------------
   EINBAU
   Datei liegt in:  /wp-content/themes/<theme>/css/ept-custom.css
   Eingebunden über functions.php (wp_enqueue_style), nicht über
   einen relativen <link> — sonst 404 auf allen Unterseiten.

   GRUNDPRINZIP
   Alles Eigene ist unter ".ept" gekapselt. Das Stylesheet greift
   also nur dort, wo du es ausdrücklich haben willst, und lässt
   Elementor-Widgets, Backend und Admin-Bar in Ruhe.

   Jeder HTML-Block bekommt deshalb aussen:
       <section class="ept ept-hero"> … </section>

   ELEMENTOR-EINSTELLUNG JE CONTAINER
   Damit Breite und Abstände aus diesem Stylesheet kommen und sich
   nicht mit Elementor beissen:
       Container → Layout → Breite:  Full Width
       Container → Layout → Padding: 0
       HTML-Widget → Erweitert → Margin/Padding: 0

   FARBEN
   Der :root-Block ist ein Vorschlag. Echte Markenfarben eintragen
   und identisch unter Elementor → Website-Einstellungen →
   Globale Farben hinterlegen.
   ================================================================== */


/* ==================================================================
   1 — Design-Tokens
   ================================================================== */

:root {
  /* --- Marke (direkt aus dem Logo entnommen) ------------------------
     #EC663F  Brust des Rotkehlchens
     #9A6855  Fluegel
     #F8A900  der Penny im Schnabel
     #5A443D  dunkle Zeichnung
     Dazu aus dem Typo-Blatt: #111729 Schrift, #FEFBEF Flaeche.
     ------------------------------------------------------------------ */

  /* Signalfarbe fuer grosse Flaechen — nur als Hintergrund,
     fuer Text darauf immer --ept-ink verwenden (5,6:1). */
  --ept-brand:         #EC663F;

  /* Abgedunkelte Variante fuer Text, Links und Buttons.
     Weisser Text darauf: 4,6:1 — erfuellt WCAG AA. */
  --ept-primary:       #C94D26;
  --ept-primary-dark:  #A83D1A;
  --ept-primary-soft:  rgba(201, 77, 38, .10);

  /* Akzent: Icons, Rahmen, Badges. Textvariante ist --ept-accent-dark. */
  --ept-accent:        #EC663F;
  --ept-accent-dark:   #C94D26;
  --ept-accent-soft:   rgba(236, 102, 63, .15);

  /* Der Penny. Leuchtet nur auf dunklem Grund oder mit dunklem Text —
     weisse Schrift auf Gold waere mit 2:1 unlesbar. */
  --ept-gold:          #F8A900;
  /* Hover: heller als die Grundfarbe, damit der Button beim
     Ueberfahren nach vorn kommt statt zurueckzutreten.
     Rund 17 % mehr Leuchtdichte — sichtbar, aber nicht grell.
     Mit #191514 darauf: 10,6:1. */
  --ept-gold-light:    #FFBA27;
  /* dunklere Variante bleibt fuer aktive/gedrueckte Zustaende */
  --ept-gold-dark:     #D18E00;
  --ept-gold-soft:     rgba(248, 169, 0, .16);
  /* Schriftfarbe auf dem Spenden-Button (die "1" auf der Muenze).
     Bewusst dunkler als das Logo-Braun #5A443D: auf dem Hover-Gold
     #D18E00 kaeme #5A443D nur auf 3,3:1 und faellt damit durch.
     #191514 haelt 9,2:1 im Ruhezustand und 6,5:1 beim Hover. */
  --ept-penny-ink:     #191514;

  /* Fluegelbraun — zweite Ebene, abgeschlossene Projekte, Rahmen */
  --ept-brown:         #9A6855;
  --ept-brown-soft:    rgba(154, 104, 85, .14);

  /* Dunkle Flaechen: warmes Braunschwarz statt neutralem Grau,
     damit Orange und Gold darauf sauber sitzen. */
  --ept-deep:          #2A1D18;

  /* --- Neutral ------------------------------------------------------ */
  --ept-ink:           #111729;
  --ept-ink-soft:      #525A69;
  --ept-ink-mute:      #677389;
  --ept-line:          #E8E0CD;
  --ept-surface:       #FFFFFF;
  --ept-surface-alt:   #FEFBEF;
  --ept-inverse:       #FFFFFF;

  /* --- Typografie --------------------------------------------------- */
  --ept-font:          "Inter", system-ui, -apple-system, "Segoe UI",
                       Roboto, "Helvetica Neue", Arial, sans-serif;
  --ept-font-heading:  var(--ept-font);
  --ept-text:          clamp(1.0625rem, .25vw + 1rem, 1.1875rem);
  --ept-lh:            1.7;
  --ept-measure:       68ch;

  /* --- Raster ------------------------------------------------------- */
  --ept-max:           1140px;
  --ept-gutter:        clamp(1rem, 4vw, 2rem);
  --ept-gap:           clamp(1.25rem, 3vw, 2.5rem);
  --ept-section-y:     clamp(3rem, 8vw, 6rem);

  /* --- Form --------------------------------------------------------- */
  --ept-radius:        10px;
  --ept-radius-sm:     6px;
  --ept-shadow:        0 2px 4px rgba(42, 29, 24, .06),
                       0 12px 28px rgba(42, 29, 24, .09);
  --ept-ease:          .2s ease;
}


/* ==================================================================
   2 — Basis-Layer (nur innerhalb von .ept)
   Ersetzt das, was sonst vom Theme käme.
   ================================================================== */

.ept,
.ept *,
.ept *::before,
.ept *::after { box-sizing: border-box; }

.ept {
  font-family: var(--ept-font);
  font-size: var(--ept-text);
  line-height: var(--ept-lh);
  color: var(--ept-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.ept p,
.ept ul,
.ept ol,
.ept figure,
.ept table { margin: 0 0 1.25em; }

.ept > *:last-child,
.ept p:last-child { margin-bottom: 0; }

.ept h1, .ept h2, .ept h3, .ept h4 {
  font-family: var(--ept-font-heading);
  line-height: 1.18;
  margin: 0 0 .6em;
  color: inherit;
  text-wrap: balance;
  font-weight: 700;
}

.ept h1 { font-size: clamp(2.25rem, 5vw + .5rem, 4rem); letter-spacing: -.02em; }
.ept h2 { font-size: clamp(1.75rem, 2.4vw + 1rem, 2.5rem); letter-spacing: -.01em; }
.ept h3 { font-size: clamp(1.25rem, 1vw + 1rem, 1.5rem); }
.ept h4 { font-size: 1.125rem; }

.ept a {
  color: var(--ept-primary);
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  transition: color var(--ept-ease);
}
.ept a:hover { color: var(--ept-primary-dark); }

.ept img,
.ept svg,
.ept video { max-width: 100%; height: auto; display: block; }

.ept ul, .ept ol { padding-left: 1.4em; }
.ept li + li { margin-top: .4em; }

.ept strong { font-weight: 700; }

.ept hr {
  border: 0;
  border-top: 1px solid var(--ept-line);
  margin: var(--ept-gap) 0;
}

/* Sichtbarer Fokusring — Barrierefreiheit, wird fast immer vergessen */
.ept a:focus-visible,
.ept button:focus-visible,
.ept input:focus-visible,
.ept textarea:focus-visible,
.ept summary:focus-visible {
  outline: 3px solid var(--ept-accent);
  outline-offset: 2px;
  border-radius: var(--ept-radius-sm);
}

/* Nur für Screenreader */
.ept-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}


/* ==================================================================
   3 — Layout
   ================================================================== */

/* Jede Sektion bringt ihren eigenen vertikalen Rhythmus mit */
.ept {
  padding-block: var(--ept-section-y);
  padding-inline: var(--ept-gutter);
}

/* Zentrierte Inhaltsbreite */
.ept-inner {
  width: 100%;
  max-width: var(--ept-max);
  margin-inline: auto;
}

/* Schmale Variante für Fliesstext */
.ept-inner--narrow { max-width: 780px; }

/* Lesebreite für Absätze im Fliesstext */
.ept-prose p { max-width: var(--ept-measure); }
.ept-prose.ept-prose--center p { margin-inline: auto; }

/* Flächen */
.ept--alt     { background: var(--ept-surface-alt); }
.ept--ink     { background: var(--ept-deep); color: var(--ept-inverse); }
.ept--tight   { padding-block: clamp(2rem, 5vw, 3.25rem); }
.ept--flush   { padding-block: 0; }

.ept--ink h1, .ept--ink h2, .ept--ink h3 { color: var(--ept-inverse); }
.ept--ink p  { color: rgba(255,255,255,.9); }
.ept--ink a:not(.ept-btn) { color: #fff; }

/* Zentrierter Text */
.ept-center { text-align: center; }
.ept-center .ept-prose p { margin-inline: auto; }

/* Abschnittskopf */
.ept-head { margin-bottom: clamp(2rem, 5vw, 3rem); }
.ept-head p { color: var(--ept-ink-soft); max-width: var(--ept-measure); }
.ept-center .ept-head p { margin-inline: auto; }

/* Kicker über einer Überschrift */
.ept-kicker {
  display: block;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ept-primary);
  margin-bottom: .6rem;
}
.ept--ink .ept-kicker { color: var(--ept-accent); }

/* Auto-Raster */
.ept-grid {
  display: grid;
  gap: var(--ept-gap);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.ept-grid--2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.ept-grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* Zwei Spalten Text/Bild */
.ept-split {
  display: grid;
  gap: var(--ept-gap);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items: center;
}


/* ==================================================================
   4 — Buttons
   ================================================================== */

.ept-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: .95em 1.9em;
  border: 0;
  border-radius: var(--ept-radius);
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--ept-ease),
              color var(--ept-ease),
              transform var(--ept-ease),
              box-shadow var(--ept-ease);
}
.ept-btn:hover { transform: translateY(-1px); box-shadow: var(--ept-shadow); }
.ept-btn:active { transform: none; }

.ept-btn--primary { background: var(--ept-primary); color: #fff; }
.ept-btn--primary:hover { background: var(--ept-primary-dark); color: #fff; }

/* Der Spenden-Button ist der Penny aus dem Logo.
   Dunkle Schrift darauf, weil Weiss auf Gold nur 2:1 erreicht. */
.ept-btn--accent { background: var(--ept-gold); color: var(--ept-ink); }
.ept-btn--accent:hover { background: var(--ept-gold-light); color: var(--ept-penny-ink); }

.ept-btn--outline {
  background: transparent;
  color: var(--ept-primary);
  box-shadow: inset 0 0 0 2px var(--ept-primary);
}
.ept-btn--outline:hover { background: var(--ept-primary); color: #fff; }

/* Auf dunklem Grund */
.ept-btn--ghost {
  background: transparent;
  color: #fff;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.75);
}
.ept-btn--ghost:hover { background: #fff; color: var(--ept-primary); }

.ept-btn--light { background: #fff; color: var(--ept-primary); }
.ept-btn--light:hover { background: var(--ept-surface-alt); color: var(--ept-primary-dark); }

/* Buttonreihe */
.ept-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  margin-top: 1.75rem;
}
.ept-center .ept-actions { justify-content: center; }

/* Textlink mit Pfeil */
.ept-link {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  font-weight: 600;
  text-decoration: none;
}
.ept-link:hover { text-decoration: underline; }
.ept-link::after { content: "→"; transition: transform var(--ept-ease); }
.ept-link:hover::after { transform: translateX(3px); }


/* ==================================================================
   5 — Hero
   ================================================================== */

.ept-hero {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: center;
  color: var(--ept-inverse);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

/* Overlay, damit Text auf jedem Foto lesbar bleibt */
.ept-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
              rgba(30,21,18,.30) 0%,
              rgba(30,21,18,.64) 100%);
}
.ept-hero > * { position: relative; z-index: 1; }

.ept-hero h1 {
  color: #fff;
  text-shadow: 0 2px 18px rgba(0,0,0,.35);
}
.ept-hero p {
  color: rgba(255,255,255,.94);
  max-width: 48ch;
  font-size: clamp(1.0625rem, .6vw + 1rem, 1.3125rem);
}


/* ==================================================================
   6 — Wirkungszahlen
   ================================================================== */

.ept-stats { border-block: 1px solid var(--ept-line); }

.ept-stats .ept-grid { gap: clamp(1.5rem, 4vw, 3rem); }

.ept-stat { text-align: center; }

.ept-stat__value {
  display: block;
  font-size: clamp(2.5rem, 5vw, 3.75rem);
  font-weight: 800;
  line-height: 1;
  color: var(--ept-primary);
  font-variant-numeric: tabular-nums;
}

.ept-stat__label {
  display: block;
  margin-top: .55rem;
  font-size: .9375rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ept-ink-soft);
}

.ept-stats__note {
  margin-top: 1.75rem;
  text-align: center;
  font-size: .875rem;
  color: var(--ept-ink-mute);
}


/* ==================================================================
   7 — Säulen und Werteblöcke
   ================================================================== */

.ept-pillar__icon {
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 1rem;
  color: var(--ept-accent);
}
.ept-pillar h3 { margin-bottom: .45em; }
.ept-pillar p  { color: var(--ept-ink-soft); }

/* Werteblöcke mit farbiger Linie links */
.ept-value {
  border-left: 3px solid var(--ept-accent);
  padding-left: 1.25rem;
}
.ept-value + .ept-value { margin-top: 1.75rem; }
.ept-value h3 { margin-bottom: .35em; }
.ept-value p  { color: var(--ept-ink-soft); }


/* ==================================================================
   8 — Karten (Projekte)
   ================================================================== */

.ept-card {
  display: flex;
  flex-direction: column;
  background: var(--ept-surface);
  border: 1px solid var(--ept-line);
  border-radius: var(--ept-radius);
  overflow: hidden;
  transition: transform var(--ept-ease), box-shadow var(--ept-ease);
}
.ept-card:hover { transform: translateY(-3px); box-shadow: var(--ept-shadow); }

.ept-card__media {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--ept-surface-alt);
}
.ept-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.ept-card:hover .ept-card__media img { transform: scale(1.04); }

.ept-card__body {
  display: flex;
  flex-direction: column;
  gap: .65rem;
  padding: 1.5rem;
  flex: 1;
}

.ept-card__country {
  font-size: .8125rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ept-ink-mute);
}

.ept-card h3 { margin: 0; }

.ept-card p {
  margin: 0;
  color: var(--ept-ink-soft);
  font-size: 1rem;
}

.ept-card .ept-link { margin-top: auto; padding-top: .5rem; }

/* Status-Badge */
.ept-badge {
  align-self: flex-start;
  display: inline-block;
  padding: .3em .8em;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.ept-badge--live { background: var(--ept-accent-soft); color: var(--ept-accent-dark); }
.ept-badge--done { background: var(--ept-brown-soft); color: #6F483A; }


/* ==================================================================
   9 — Hinweiskasten
   ================================================================== */

.ept-note {
  border: 1px solid var(--ept-line);
  border-radius: var(--ept-radius);
  padding: clamp(1.5rem, 4vw, 2.25rem);
  text-align: center;
  background: var(--ept-surface);
}
.ept-note h3 { margin-bottom: .5em; }
.ept-note p  { color: var(--ept-ink-soft); }


/* ==================================================================
   10 — Nummerierte Schritte
   ================================================================== */

.ept-steps { counter-reset: ept-step; }

.ept-step {
  counter-increment: ept-step;
  position: relative;
  padding-top: 3.5rem;
}
.ept-step::before {
  content: counter(ept-step);
  position: absolute;
  top: 0;
  left: 0;
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ept-primary);
  color: #fff;
  font-weight: 700;
  font-size: 1.0625rem;
}
.ept-step h3 { margin-bottom: .4em; }
.ept-step p  { color: var(--ept-ink-soft); }


/* ==================================================================
   11 — Bankverbindung
   ================================================================== */

.ept-bank {
  background: var(--ept-surface-alt);
  border: 1px solid var(--ept-line);
  border-radius: var(--ept-radius);
  padding: clamp(1.5rem, 4vw, 2.5rem);
}
.ept-bank dl {
  display: grid;
  grid-template-columns: minmax(8rem, 12rem) 1fr;
  gap: 0;
  margin: 0;
}
.ept-bank dt,
.ept-bank dd {
  padding: .75rem .5rem;
  margin: 0;
  border-bottom: 1px solid var(--ept-line);
}
.ept-bank dt { color: var(--ept-ink-soft); font-size: .9375rem; }
.ept-bank dd { font-weight: 600; }
.ept-bank dl > :nth-last-child(-n+2) { border-bottom: 0; }

.ept-iban {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.0625rem;
  letter-spacing: .04em;
  word-break: break-all;
}

.ept-bank__note {
  margin-top: 1.25rem;
  font-size: .9375rem;
  color: var(--ept-ink-soft);
}


/* ==================================================================
   12 — Wirkungsbeispiele
   ================================================================== */

.ept-impact__item {
  border: 1px solid var(--ept-line);
  border-radius: var(--ept-radius);
  padding: 1.35rem;
  background: var(--ept-surface);
}
.ept-impact__amount {
  display: block;
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--ept-accent-dark);
  font-variant-numeric: tabular-nums;
  margin-bottom: .35rem;
}
.ept-impact__item p { margin: 0; font-size: 1rem; color: var(--ept-ink-soft); }


/* ==================================================================
   13 — FAQ (natives <details>, kein JavaScript nötig)
   ================================================================== */

.ept-faq { max-width: 820px; margin-inline: auto; }

.ept-faq details {
  border-bottom: 1px solid var(--ept-line);
}
.ept-faq details:first-of-type { border-top: 1px solid var(--ept-line); }

.ept-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 0;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  transition: color var(--ept-ease);
}
.ept-faq summary::-webkit-details-marker { display: none; }
.ept-faq summary:hover { color: var(--ept-primary); }

.ept-faq summary::after {
  content: "";
  flex: none;
  width: .65rem;
  height: .65rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--ept-ease);
}
.ept-faq details[open] summary::after {
  transform: rotate(225deg) translate(-2px, -2px);
}

.ept-faq details > *:not(summary) {
  padding-bottom: 1.35rem;
  color: var(--ept-ink-soft);
  max-width: var(--ept-measure);
}


/* ==================================================================
   14 — Formulare (eigenes Markup)
   ================================================================== */

.ept-form { max-width: 620px; }

.ept-field { margin-bottom: 1.15rem; }

.ept-field label {
  display: block;
  margin-bottom: .4rem;
  font-size: .9375rem;
  font-weight: 600;
}

.ept-field input[type="text"],
.ept-field input[type="email"],
.ept-field input[type="tel"],
.ept-field textarea {
  width: 100%;
  padding: .85em 1em;
  font: inherit;
  color: var(--ept-ink);
  background: var(--ept-surface);
  border: 1px solid var(--ept-line);
  border-radius: var(--ept-radius);
  transition: border-color var(--ept-ease), box-shadow var(--ept-ease);
}
.ept-field textarea { min-height: 9rem; resize: vertical; }

.ept-field input:focus,
.ept-field textarea:focus {
  border-color: var(--ept-primary);
  box-shadow: 0 0 0 3px var(--ept-primary-soft);
  outline: none;
}

/* Datenschutz-Checkbox */
.ept-consent {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  margin: 1.35rem 0;
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--ept-ink-soft);
}
.ept-consent input { margin-top: .25rem; flex: none; }

.ept-required { color: var(--ept-accent-dark); }


/* ==================================================================
   15 — Hilfsklassen
   ================================================================== */

.ept-mt-0  { margin-top: 0 !important; }
.ept-mb-0  { margin-bottom: 0 !important; }
.ept-small { font-size: .875rem; color: var(--ept-ink-mute); }
.ept-lead  { font-size: clamp(1.125rem, .6vw + 1rem, 1.3125rem); color: var(--ept-ink-soft); }


/* ==================================================================
   16 — Mobil
   ================================================================== */

@media (max-width: 767px) {
  .ept-hero { min-height: 60vh; text-align: center; }
  .ept-hero p { margin-inline: auto; }
  .ept-hero .ept-actions { justify-content: center; }

  .ept-bank dl { grid-template-columns: 1fr; }
  .ept-bank dt {
    border-bottom: 0;
    padding-bottom: 0;
    font-size: .8125rem;
    text-transform: uppercase;
    letter-spacing: .05em;
  }
  .ept-bank dd { padding-top: .25rem; }

  .ept-step { padding-top: 3rem; }
  .ept-actions .ept-btn { flex: 1 1 100%; }
}


/* ==================================================================
   17 — Nutzereinstellungen respektieren
   ================================================================== */

@media (prefers-reduced-motion: reduce) {
  .ept *,
  .ept *::before,
  .ept *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .ept-card:hover,
  .ept-btn:hover { transform: none; }
  .ept-card:hover .ept-card__media img { transform: none; }
}

@media print {
  .ept-hero::before { display: none; }
  .ept-btn, .ept-actions { display: none !important; }
  .ept { padding-block: 1rem; color: #000; }
  .ept--ink { background: none !important; color: #000 !important; }
  .ept-faq details { open: open; }
}


/* ==================================================================
   18 — Elementor-Korrekturen
   ------------------------------------------------------------------
   Nur nötig, solange HTML-Widgets in Elementor-Containern stecken.
   Wenn deine Container bereits auf Full Width / Padding 0 stehen,
   kann dieser Block ersatzlos weg.
   ================================================================== */

/* HTML-Widget soll die volle Breite seines Containers nutzen */
.elementor-widget-html > .elementor-widget-container { padding: 0; }

/* Elementor setzt manchmal eine Grundschrift, die unsere Tokens
   überschreibt — hier gewinnt wieder unser Stylesheet */
.elementor-widget-html .ept { font-family: var(--ept-font); }


/* ==================================================================
   19 — Astra Header & Footer
   ------------------------------------------------------------------
   Header, Menü und Footer kommen vom Theme, nicht aus deinen
   HTML-Blöcken. Sie liegen damit ausserhalb von .ept und brauchen
   eigene Regeln. Alles hier ist bewusst zurückhaltend gehalten —
   den Rest macht Astra im Customizer.
   ================================================================== */

/* --- Spenden-Button im Hauptmenü ---------------------------------
   Einrichten unter: Design → Menüs → oben rechts "Ansicht anpassen"
   → Haken bei "CSS-Klassen" → beim Menüpunkt "Spenden" die Klasse
   ept-menu-donate eintragen.
   ------------------------------------------------------------------ */

.main-header-menu .ept-menu-donate > a,
.ast-header-break-point .main-header-menu .ept-menu-donate > a {
  background: var(--ept-gold);
  color: var(--ept-ink) !important;
  border-radius: var(--ept-radius);
  padding-inline: 1.25em !important;
  margin-inline-start: .75rem;
  transition: background-color var(--ept-ease);
}
.main-header-menu .ept-menu-donate > a:hover { background: var(--ept-gold-light); }

/* Auf dem Handy klappt das Menü auf — dort kein abgesetzter Button,
   sondern ein normaler Eintrag, sonst bricht die Liste auf. */
@media (max-width: 921px) {
  .ast-header-break-point .main-header-menu .ept-menu-donate > a {
    margin-inline-start: 0;
    border-radius: 0;
  }
}

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

.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

/* Rechtszeile im Footer absetzen */
.ept-footer-legal {
  border-top: 1px solid rgba(255,255,255,.15);
  margin-top: 2rem;
  padding-top: 1.25rem;
  font-size: .875rem;
}

/* --- Fokusring auch ausserhalb von .ept --------------------------- */

.site-header a:focus-visible,
.site-footer a:focus-visible,
.main-header-menu a:focus-visible {
  outline: 3px solid var(--ept-accent);
  outline-offset: 2px;
  border-radius: var(--ept-radius-sm);
}

/* --- Druckansicht der Rechtsseiten -------------------------------- */

@media print {
  .site-header,
  .site-footer,
  .ast-scroll-top-icon { display: none !important; }
}


/* ==================================================================
   20 — Landingpage-Bausteine
   ------------------------------------------------------------------
   Zusätzliche Komponenten für die ausgebaute Startseite.
   Alle liegen innerhalb von .ept.
   ================================================================== */

/* --- Trust-Bar direkt unter dem Hero ------------------------------ */

.ept-trustbar {
  background: var(--ept-brand);
  color: var(--ept-ink);
  padding-block: 1.35rem;
}
.ept-trustbar ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem clamp(1.5rem, 5vw, 3.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ept-trustbar li {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: 0;
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: .01em;
}
.ept-trustbar svg {
  width: 1.15rem;
  height: 1.15rem;
  flex: none;
  /* Haken in derselben dunklen Farbe wie der Text — Gold auf Orange
     waere zu kontrastarm, Weiss zu blass. */
  color: currentColor;
  opacity: .85;
}


/* --- Video mit Einwilligung (2-Klick) ----------------------------- */

.ept-video {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--ept-radius);
  overflow: hidden;
  background: #0E1519;
  cursor: pointer;
}
.ept-video img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .72;
  transition: opacity var(--ept-ease), transform .5s ease;
}
.ept-video:hover img { opacity: .6; transform: scale(1.02); }

.ept-video iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}

.ept-video__play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 4.75rem; height: 4.75rem;
  display: grid; place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.95);
  color: var(--ept-primary);
  cursor: pointer;
  transition: transform var(--ept-ease), background-color var(--ept-ease);
}
.ept-video__play svg { width: 1.6rem; height: 1.6rem; margin-left: .18rem; }
.ept-video:hover .ept-video__play { transform: translate(-50%,-50%) scale(1.07); }

.ept-video__hint {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  margin: 0;
  padding: .85rem 1.1rem;
  background: linear-gradient(180deg, transparent, rgba(30,21,18,.82));
  color: rgba(255,255,255,.92);
  font-size: .8125rem;
  line-height: 1.45;
}
.ept-video.is-playing .ept-video__play,
.ept-video.is-playing .ept-video__hint { display: none; }

.ept-video__caption {
  margin-top: .85rem;
  font-size: .875rem;
  color: var(--ept-ink-mute);
}


/* --- Ablauf in vier Schritten ------------------------------------- */

.ept-flow { counter-reset: ept-flow; }
.ept-flow__item {
  counter-increment: ept-flow;
  position: relative;
  padding-top: 3.25rem;
}
.ept-flow__item::before {
  content: counter(ept-flow, decimal-leading-zero);
  position: absolute;
  top: 0; left: 0;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--ept-accent);
  font-variant-numeric: tabular-nums;
}
.ept-flow__item::after {
  content: "";
  position: absolute;
  top: 1.9rem; left: 2.6rem; right: -1rem;
  height: 1px;
  background: var(--ept-line);
}
.ept-flow__item:last-child::after { display: none; }
.ept-flow__item h3 { margin-bottom: .4em; }
.ept-flow__item p  { color: var(--ept-ink-soft); font-size: 1rem; }

@media (max-width: 900px) {
  .ept-flow__item::after { display: none; }
}


/* --- Mittelverwendung --------------------------------------------- */

.ept-alloc { max-width: 720px; }
.ept-alloc__bar {
  display: flex;
  height: 2.25rem;
  border-radius: var(--ept-radius-sm);
  overflow: hidden;
  margin-bottom: 1.25rem;
}
.ept-alloc__seg {
  display: grid;
  place-items: center;
  font-size: .8125rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}
.ept-alloc__seg--project { background: var(--ept-primary); }
.ept-alloc__seg--admin   { background: var(--ept-brown); color: #fff; }

.ept-alloc__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: .9375rem;
  color: var(--ept-ink-soft);
}
.ept-alloc__legend li { display: flex; align-items: center; gap: .5rem; margin: 0; }
.ept-alloc__dot {
  width: .75rem; height: .75rem;
  border-radius: 3px;
  flex: none;
}


/* --- Partner-Leiste ------------------------------------------------ */

.ept-partners {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1.75rem, 5vw, 3.5rem);
}
.ept-partners img {
  max-height: 3.25rem;
  width: auto;
  filter: grayscale(1);
  opacity: .62;
  transition: filter var(--ept-ease), opacity var(--ept-ease);
}
.ept-partners a:hover img { filter: none; opacity: 1; }


/* --- Zitat ---------------------------------------------------------- */

.ept-quote {
  border-left: 3px solid var(--ept-accent);
  padding-left: clamp(1.25rem, 3vw, 2rem);
}
.ept-quote blockquote {
  margin: 0 0 1rem;
  font-size: clamp(1.25rem, 1.2vw + 1rem, 1.625rem);
  line-height: 1.45;
  font-weight: 500;
  text-wrap: balance;
}
.ept-quote figcaption {
  font-size: .9375rem;
  color: var(--ept-ink-mute);
}


/* --- Personen-Split -------------------------------------------------- */

.ept-person__photo {
  border-radius: var(--ept-radius);
  box-shadow: var(--ept-shadow);
  aspect-ratio: 4 / 5;
  object-fit: cover;
  width: 100%;
}


/* --- Galerie ---------------------------------------------------------- */

.ept-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: .75rem;
}
.ept-gallery figure { margin: 0; }
.ept-gallery img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--ept-radius-sm);
  transition: transform .4s ease;
}
.ept-gallery a:hover img { transform: scale(1.03); }

/* Erstes Bild grösser ausspielen */
.ept-gallery--feature > *:first-child { grid-column: span 2; grid-row: span 2; }
.ept-gallery--feature > *:first-child img { aspect-ratio: 1 / 1; }

@media (max-width: 600px) {
  .ept-gallery--feature > *:first-child { grid-column: auto; grid-row: auto; }
}


/* --- Bedarfs-Pills ---------------------------------------------------- */

.ept-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ept-tags li {
  margin: 0;
  padding: .4em .9em;
  border: 1px solid var(--ept-line);
  border-radius: 999px;
  font-size: .875rem;
  color: var(--ept-ink-soft);
  background: var(--ept-surface);
}


/* --- Sticky Spenden-Leiste auf dem Handy ------------------------------
   Optional. Wenn nicht gewünscht, diesen Block löschen und den
   zugehörigen HTML-Baustein weglassen.
   --------------------------------------------------------------------- */

.ept-sticky {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 998;
  display: none;
  padding: .7rem var(--ept-gutter);
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--ept-line);
  box-shadow: 0 -4px 18px rgba(27,31,35,.08);
}
.ept-sticky .ept-btn { width: 100%; }

@media (max-width: 767px) {
  .ept-sticky { display: block; }
  body { padding-bottom: 4.5rem; }
}


/* ==================================================================
   21 — Hero-Ausrichtung und Icon-Absicherung
   ================================================================== */

/* --- Inhalt nach rechts -------------------------------------------
   Für Hero-Bilder, deren Motiv links oder mittig sitzt.
   Im HTML: <section class="ept ept-hero ept-hero--right">
   und der Inhalt in <div class="ept-hero__content">.
   ------------------------------------------------------------------ */

.ept-hero__content { max-width: 36rem; }

.ept-hero--right .ept-inner {
  display: flex;
  justify-content: flex-end;
}
.ept-hero--right .ept-hero__content { text-align: right; }
.ept-hero--right .ept-hero__content p { margin-left: auto; }
.ept-hero--right .ept-actions { justify-content: flex-end; }

/* Overlay von links nach rechts statt von oben nach unten:
   die linke Bildhälfte bleibt frei, abgedunkelt wird nur dort,
   wo der Text steht. */
.ept-hero--right::before {
  background: linear-gradient(90deg,
              rgba(30,21,18,.12) 0%,
              rgba(30,21,18,.34) 38%,
              rgba(30,21,18,.78) 100%);
}

/* Spiegelbildlich, falls das Motiv mal rechts sitzt */
.ept-hero--left .ept-inner { display: flex; justify-content: flex-start; }
.ept-hero--left::before {
  background: linear-gradient(270deg,
              rgba(30,21,18,.12) 0%,
              rgba(30,21,18,.34) 38%,
              rgba(30,21,18,.78) 100%);
}

/* Auf dem Handy passt kein Nebeneinander: zurück auf mittig,
   Overlay wieder von oben nach unten. */
@media (max-width: 767px) {
  .ept-hero--right .ept-inner,
  .ept-hero--left  .ept-inner { justify-content: center; }

  .ept-hero--right .ept-hero__content,
  .ept-hero--left  .ept-hero__content { text-align: center; max-width: none; }

  .ept-hero--right .ept-hero__content p,
  .ept-hero--left  .ept-hero__content p { margin-inline: auto; }

  .ept-hero--right .ept-actions,
  .ept-hero--left  .ept-actions { justify-content: center; }

  .ept-hero--right::before,
  .ept-hero--left::before {
    background: linear-gradient(180deg,
                rgba(30,21,18,.30) 0%,
                rgba(30,21,18,.70) 100%);
  }
}

/* Bildausschnitt feinjustieren, falls das Motiv beschnitten wird.
   Werte anpassen, bis es sitzt — z. B. "30% center". */
.ept-hero { background-position: center; }


/* --- Icon-Absicherung ---------------------------------------------
   Ein inline-SVG ohne Breitenangabe füllt sonst seinen ganzen
   Container. Diese Regel gibt jedem SVG ohne eigene Klasse eine
   vernünftige Grundgrösse. Dank :where() hat sie minimale
   Spezifität und wird von jeder Komponentenregel geschlagen.
   ------------------------------------------------------------------ */

.ept :where(svg:not([class])) {
  width: 1.25em;
  height: 1.25em;
  flex: none;
}


/* ==================================================================
   22 — Buttons absichern
   ------------------------------------------------------------------
   Warum es diesen Abschnitt braucht:

   In Abschnitt 2 steht  .ept a { color: var(--ept-primary); }
   Das ist Spezifitaet 0-1-1 (eine Klasse + ein Element).
   Die Button-Regeln stehen als  .ept-btn--accent  da — nur 0-1-0.
   Ein Button ist aber ein <a>, also gewinnt die allgemeine
   Linkregel gegen die speziellere Absicht. Genau deshalb war die
   Schrift auf dem goldenen Spenden-Button orange statt dunkel.

   Loesung: die Button-Regeln als .ept a.ept-btn--… schreiben
   (0-2-1). Das schlaegt die eigene Linkregel und gleichzeitig die
   meisten Theme-Regeln, ohne dass irgendwo !important noetig ist.

   Ausserdem: Rahmen laufen jetzt ueber border statt box-shadow.
   Ein box-shadow wird von Themes gern global zurueckgesetzt, ein
   border nicht. Damit die Buttons trotz Rahmen alle gleich hoch
   bleiben, bekommt jeder Button einen transparenten 2px-Rahmen.
   ================================================================== */

.ept .ept-btn,
.ept a.ept-btn {
  border: 2px solid transparent;
  text-decoration: none;
}

/* --- Gefuellt ------------------------------------------------------ */

.ept a.ept-btn--primary,
.ept .ept-btn--primary { background: var(--ept-primary); color: #fff; }
.ept a.ept-btn--primary:hover { background: var(--ept-primary-dark); color: #fff; }

/* Der Penny. Dunkle Schrift, 9:1 — der kontrastreichste Punkt der Seite. */
.ept a.ept-btn--accent,
.ept .ept-btn--accent { background: var(--ept-gold); color: var(--ept-ink); }
.ept a.ept-btn--accent:hover { background: var(--ept-gold-light); color: var(--ept-penny-ink); }

.ept a.ept-btn--light,
.ept .ept-btn--light { background: #fff; color: var(--ept-primary); }
.ept a.ept-btn--light:hover { background: var(--ept-surface-alt); color: var(--ept-primary-dark); }

/* --- Umrandet auf hellem Grund ------------------------------------- */

.ept a.ept-btn--outline,
.ept .ept-btn--outline {
  background: transparent;
  color: var(--ept-primary);
  border-color: var(--ept-primary);
  box-shadow: none;
}
.ept a.ept-btn--outline:hover {
  background: var(--ept-primary);
  border-color: var(--ept-primary);
  color: #fff;
}

/* --- Umrandet auf Bild oder dunklem Grund ---------------------------
   Rahmen plus leichte Fuellung: auf einem unruhigen Foto reicht ein
   Rahmen allein oft nicht, damit etwas als Button gelesen wird.
   Die Fuellung ist milchig genug, um sich abzuheben, und hell genug,
   dass das Bild dahinter sichtbar bleibt.
   -------------------------------------------------------------------- */

.ept a.ept-btn--ghost,
.ept .ept-btn--ghost {
  background: rgba(255, 255, 255, .16);
  border-color: rgba(255, 255, 255, .85);
  color: #fff;
  box-shadow: none;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.ept a.ept-btn--ghost:hover {
  background: #fff;
  border-color: #fff;
  color: var(--ept-primary);
}

/* Fokus bleibt auf jedem Untergrund sichtbar */
.ept a.ept-btn:focus-visible {
  outline: 3px solid var(--ept-gold);
  outline-offset: 3px;
}


/* ==================================================================
   23 — Feinschliff Hero-Buttons
   ================================================================== */

/* --- Spenden-Button ------------------------------------------------
   Der Button ist die Muenze aus dem Logo, also traegt er auch deren
   Schriftfarbe: das Braun der "1" (#5A443D). Damit schliesst sich
   der Kreis zum Logo, und mit 4,6:1 bleibt es sauber lesbar.
   -------------------------------------------------------------------- */

.ept a.ept-btn--accent,
.ept .ept-btn--accent {
  background: var(--ept-gold);
  color: var(--ept-penny-ink);
}
.ept a.ept-btn--accent:hover,
.ept a.ept-btn--accent:focus-visible {
  background: var(--ept-gold-light);
  color: var(--ept-penny-ink);
}

/* Beim Klick kurz abdunkeln — gibt dem Druck eine Rueckmeldung,
   ohne die Hover-Aufhellung zu stoeren. */
.ept a.ept-btn--accent:active {
  background: var(--ept-gold-dark);
  color: var(--ept-penny-ink);
  transform: translateY(0);
  box-shadow: none;
}

/* --- Zweiter Button auf dem Hero ------------------------------------
   Duenner weisser Rahmen im Ruhezustand. Die Rahmenstaerke faellt
   von 2px auf 1px, deshalb bekommt das Padding 1px dazu — sonst
   waere dieser Button 2px flacher als der Spenden-Button daneben.
   -------------------------------------------------------------------- */

.ept a.ept-btn--ghost,
.ept .ept-btn--ghost {
  border-width: 1px;
  border-color: #fff;
  padding: calc(.95em + 1px) calc(1.9em + 1px);
  background: rgba(255, 255, 255, .12);
  color: #fff;
  box-shadow: none;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.ept a.ept-btn--ghost:hover,
.ept a.ept-btn--ghost:focus-visible {
  background: #fff;
  border-color: #fff;
  color: var(--ept-primary);
}


/* ==================================================================
   24 — Dynamische Projektdaten und Listen-Korrektur
   ================================================================== */

/* --- Listen mit eigener Klasse ------------------------------------
   Der Basis-Layer gibt Fliesstext-Listen Einzug und Abstand zwischen
   den Punkten (.ept ul, .ept li + li). Das ist richtig für Text, aber
   falsch für Komponenten wie Trust-Bar, Legende oder Kennzahlen —
   dort verschob es den zweiten und dritten Eintrag um einige Pixel
   nach unten. Jede Liste mit eigener Klasse ist eine Komponente und
   wird hier zurückgesetzt.
   ------------------------------------------------------------------ */

.ept ul[class],
.ept ol[class] { padding-left: 0; }

.ept ul[class] > li,
.ept ol[class] > li { margin-top: 0; }


/* --- Shortcode-Widget ---------------------------------------------- */

.elementor-widget-shortcode > .elementor-widget-container,
.elementor-widget-shortcode .elementor-shortcode { padding: 0; margin: 0; }


/* --- Kennzahlen unten auf jeder Projektkarte ----------------------- */

.ept .ept-card__facts {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .3rem 1rem;
  margin: auto 0 0;          /* schiebt die Zeile an den Kartenboden */
  padding: .85rem 0 0;
  list-style: none;
  border-top: 1px solid var(--ept-line);
  font-size: .875rem;
  color: var(--ept-ink-soft);
}
.ept .ept-card__facts strong {
  color: var(--ept-ink);
  font-variant-numeric: tabular-nums;
}
/* Mit Kennzahlen sitzt der Link direkt darunter statt ganz unten */
.ept .ept-card .ept-card__facts + .ept-link { margin-top: .5rem; padding-top: 0; }


/* --- Legende der Mittelverwendung ---------------------------------- */

.ept .ept-alloc__legend { margin: 0; gap: .6rem 1.5rem; }


/* ==================================================================
   25 — Projektseiten, Verlauf, Berichte
   (mu-plugin "EPT Projekte" ab Version 2)
   ================================================================== */

/* --- Projektseite: Astra-Rahmen neutralisieren ---------------------
   Die Projektseite läuft über Astras normale Einzelansicht. Damit die
   Sektionen wie auf der Startseite über die volle Breite gehen, egal
   welches Container-Layout im Customizer eingestellt ist, brechen sie
   aus dem Inhaltsbereich aus (Full-Bleed).
   ------------------------------------------------------------------ */

body.single-ept_projekt { overflow-x: clip; }

.single-ept_projekt #primary,
.single-ept_projekt .site-main { margin-top: 0; margin-bottom: 0; }

.single-ept_projekt .ast-article-single,
.single-ept_projekt .ast-separate-container .ast-article-single {
  padding: 0 !important;
  background: transparent;
  box-shadow: none;
  border: 0;
}

.single-ept_projekt .entry-content > .ept {
  width: 100vw;
  max-width: 100vw;
  margin: 0 calc(50% - 50vw);
}

/* Der Kopf der Projektseite */
.ept-hero--projekt { min-height: 56vh; }
.ept-hero--projekt .ept-hero__content { max-width: 46rem; }
.ept-hero--ohne-bild { background: var(--ept-deep); }

.ept-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .9rem;
  margin-bottom: 1rem;
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.9);
}
.ept-hero .ept-badge--live { background: var(--ept-brand); color: var(--ept-ink); }
.ept-hero .ept-badge--done { background: rgba(255,255,255,.18); color: #fff; }

/* Verwendungszweck im Spendenaufruf */
.ept .ept-purpose {
  display: inline-block;
  margin: .25rem 0 0;
  padding: .55em 1.1em;
  border: 1px dashed rgba(255,255,255,.55);
  border-radius: var(--ept-radius);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.125rem;
  letter-spacing: .04em;
  color: var(--ept-gold);
}


/* --- Der ausführliche Text aus dem Block-Editor ------------------- */

.ept .ept-content > * { margin-top: 0; margin-bottom: 0; }
.ept .ept-content > * + * { margin-top: 1.25em; }
.ept .ept-content p,
.ept .ept-content ul,
.ept .ept-content ol { max-width: var(--ept-measure); }
.ept .ept-content > h2 { font-size: clamp(1.5rem, 1.6vw + 1rem, 2rem); margin-top: 2em; }
.ept .ept-content > h3 { margin-top: 1.75em; }
.ept .ept-content > figure { margin-top: 2em; margin-bottom: 2em; }
.ept-content img { border-radius: var(--ept-radius-sm); }
.ept-content figcaption,
.ept-content .wp-element-caption {
  margin-top: .6rem;
  font-size: .875rem;
  color: var(--ept-ink-mute);
  text-align: left;
}
.ept .ept-content > blockquote {
  margin: 2em 0;
  padding-left: 1.25rem;
  border-left: 3px solid var(--ept-brand);
  font-size: 1.15em;
  font-weight: 500;
}
.ept-content .wp-block-gallery { gap: .6rem; }


/* --- YouTube-Zwei-Klick in Beiträgen und Projekttexten -------------
   WordPress legt um eingebettete Videos einen Rahmen mit festem
   Seitenverhältnis. Unser Platzhalter füllt diesen Rahmen aus.
   ------------------------------------------------------------------ */

/* Unser Platzhalter bringt sein Seitenverhältnis selbst mit. Den
   Abstandshalter, den WordPress für Iframes einsetzt, blenden wir aus —
   sonst stünde das Video doppelt so hoch bzw. säße verschoben. */
.wp-block-embed .ept-video { margin: 0; }
.wp-block-embed__wrapper:has(> .ept-video)::before { content: none; display: none; }
.ept-video:not(:has(img)) { background: linear-gradient(135deg, var(--ept-deep), #4A342B); }


/* --- Verlauf ------------------------------------------------------- */

.ept ol.ept-timeline {
  position: relative;
  margin: 0;
  padding: 0 0 0 1.9rem;
  list-style: none;
}
.ept ol.ept-timeline::before {
  content: "";
  position: absolute;
  top: .5rem;
  bottom: .5rem;
  left: .45rem;
  width: 2px;
  background: var(--ept-line);
}
.ept ol.ept-timeline > li {
  position: relative;
  margin: 0 0 2rem;
}
.ept ol.ept-timeline > li:last-child { margin-bottom: 0; }
.ept ol.ept-timeline > li::before {
  content: "";
  position: absolute;
  top: .4rem;
  left: calc(-1.9rem + .45rem - 5px);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--ept-brand);
  box-shadow: 0 0 0 4px var(--ept-surface-alt);
}

.ept-timeline__date {
  display: block;
  margin-bottom: .6rem;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ept-primary);
}

.ept-timeline__card {
  display: flex;
  gap: 1.25rem;
  background: var(--ept-surface);
  border: 1px solid var(--ept-line);
  border-radius: var(--ept-radius);
  padding: 1.1rem;
  transition: box-shadow var(--ept-ease);
}
.ept-timeline__card:hover { box-shadow: var(--ept-shadow); }

.ept-timeline__media {
  flex: 0 0 180px;
  border-radius: var(--ept-radius-sm);
  overflow: hidden;
  align-self: flex-start;
}
.ept-timeline__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.ept-timeline__body h3 { font-size: 1.25rem; margin: 0 0 .4rem; }
.ept-timeline__body p  { margin: 0 0 .6rem; font-size: 1rem; color: var(--ept-ink-soft); }

@media (max-width: 640px) {
  .ept-timeline__card { flex-direction: column; }
  .ept-timeline__media { flex-basis: auto; width: 100%; }
}


/* --- Karten: Titel als Link ---------------------------------------- */

.ept .ept-card h3 a,
.ept .ept-timeline__body h3 a {
  color: inherit;
  text-decoration: none;
}
.ept .ept-card h3 a:hover,
.ept .ept-timeline__body h3 a:hover {
  color: var(--ept-primary);
  text-decoration: underline;
}
.ept-report .ept-card__media { display: block; }


/* --- Projekt-Kasten unter Berichten -------------------------------- */

.ept.ept-postbox {
  margin: 3rem 0 1rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--ept-surface-alt);
  border: 1px solid var(--ept-line);
  border-left: 4px solid var(--ept-brand);
  border-radius: var(--ept-radius);
}
.ept-postbox .ept-kicker { margin-bottom: .35rem; }
.ept .ept-postbox__title {
  margin: 0 0 .6rem;
  font-size: clamp(1.35rem, 1vw + 1rem, 1.6rem);
  font-weight: 700;
  line-height: 1.2;
}
.ept-postbox__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .9rem;
}
.ept .ept-postbox .ept-card__facts { margin-top: 1rem; }
.ept-postbox .ept-actions { margin-top: 1.25rem; }
.ept .ept-postbox__zweck { margin: 1rem 0 0; }


/* --- Beitragsansicht (Astra) --------------------------------------- */

.single-post .entry-content img { border-radius: var(--ept-radius-sm); }
.single-post .entry-content .wp-element-caption { font-size: .875rem; color: var(--ept-ink-mute); }

/* Nachträge Abschnitt 25 */
.ept .ept-video__hint { max-width: none; }         /* nicht von der Lesebreite im Projekttext erfasst */
@media (max-width: 767px) {
  .ept-hero__meta { justify-content: center; }      /* Etikett mittig wie der Rest des Kopfs */
}

/* Stand-Zeile unter den Wirkungszahlen: mehr Luft nach oben.
   Die alte Regel (.ept-stats__note) wurde vom Basis-Layer
   (.ept p { margin: 0 0 1.25em }) überstimmt — daher hier mit .ept davor. */
.ept .ept-stats__note {
  margin-top: 2.5rem;
  margin-bottom: 0;
}


/* ==================================================================
   26 — Einzelne Projektkarte
   Steht nur eine Karte im Raster (z. B. ein einziges laufendes
   Projekt), wird sie quer gelegt: Bild links, Text rechts. Sonst
   würde sie über die volle Breite gezogen, mit riesigem Bild.
   ================================================================== */

@media (min-width: 768px) {
  .ept-grid > .ept-card:only-child { flex-direction: row; }
  .ept-grid > .ept-card:only-child .ept-card__media {
    flex: 0 0 48%;
    aspect-ratio: auto;
    min-height: 320px;
  }
  .ept-grid > .ept-card:only-child .ept-card__body {
    padding: clamp(1.5rem, 3vw, 2.5rem);
    justify-content: center;
  }
  .ept-grid > .ept-card:only-child h3 { font-size: clamp(1.5rem, 1.2vw + 1rem, 1.875rem); }
}