/* ============================================================
   EMMA & PAUL VENTURES — Komponenten · v1.0 (Juli 2026)
   Setzt brand/tokens.css voraus. Alle Selektoren sind mit
   .ep- gepräfixt und greifen nicht in fremdes Markup ein.
   ============================================================ */

/* ---------- Grundgerüst ---------- */
.ep-wrap{
  max-width:var(--ep-max-width);
  margin:0 auto;
  padding-left:var(--ep-page-pad);
  padding-right:var(--ep-page-pad);
}
.ep-section{
  padding-top:var(--ep-section-y);
  padding-bottom:var(--ep-section-y);
}
.ep-section--hairline{border-top:1px solid var(--hairline);}
.ep-hairline{border:0;height:1px;background:var(--hairline);}

/* ---------- Fokus (Tastatur) ---------- */
.ep-btn:focus-visible,
.ep-link-xl:focus-visible,
.ep-nav-link:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}

/* ---------- Typografie-Bausteine ---------- */
.ep-eyebrow{
  font-family:var(--ep-font-sans);
  font-size:var(--ep-text-eyebrow);
  font-weight:400;
  letter-spacing:var(--ep-tracking-eyebrow);
  text-transform:uppercase;
  color:var(--muted);
}
.ep-index{ /* Sektionsnummer im Journal-Stil: „01" */
  font-family:var(--ep-font-sans);
  font-size:var(--ep-text-eyebrow);
  letter-spacing:var(--ep-tracking-eyebrow);
  color:var(--accent);
}
.ep-light .ep-index{color:var(--ink);}

.ep-display-xl,
.ep-display-l,
.ep-display-m{
  font-family:var(--ep-font-display);
  font-weight:300;
  letter-spacing:var(--ep-tracking-tight);
  color:var(--ink);
}
.ep-display-xl{font-size:var(--ep-text-display-xl);line-height:var(--ep-leading-display);}
.ep-display-l{font-size:var(--ep-text-display-l);line-height:1.15;}
.ep-display-m{font-size:var(--ep-text-display-m);font-weight:400;line-height:var(--ep-leading-tight);}

/* Der eine betonte Begriff: kursiv, auf Dunkel in Lime. */
.ep-display-xl em,.ep-display-l em,.ep-display-m em,.ep-quote em{
  font-style:italic;
  color:var(--accent);
}
.ep-light .ep-display-xl em,.ep-light .ep-display-l em,
.ep-light .ep-display-m em,.ep-light .ep-quote em{
  color:var(--ink); /* Lime versagt als Text auf Hell → kursiv genügt */
}

.ep-lead{
  font-family:var(--ep-font-sans);
  font-size:var(--ep-text-lead);
  line-height:var(--ep-leading-body);
  color:var(--muted);
  max-width:var(--ep-measure);
}
.ep-body{
  font-family:var(--ep-font-sans);
  font-size:var(--ep-text-body);
  line-height:var(--ep-leading-body);
  color:var(--ink);
  max-width:var(--ep-measure);
}
.ep-muted{color:var(--muted);}

.ep-quote{
  font-family:var(--ep-font-display);
  font-weight:300;
  font-style:italic;
  font-size:var(--ep-text-quote);
  line-height:var(--ep-leading-quote);
  color:var(--ink);
  max-width:24ch;
  margin:0;
}

/* ---------- Marker: der Lime-Textmarker (LinkedIn-Banner-Stil) ---------- */
.ep-highlight{
  background:var(--ep-color-lime);
  color:var(--ep-color-true-black);
  padding:0 .14em;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}

/* ---------- Buttons ---------- */
.ep-btn{
  display:inline-block;
  font-family:var(--ep-font-sans);
  font-size:var(--ep-text-label);
  font-weight:500;
  letter-spacing:var(--ep-tracking-label);
  text-transform:uppercase;
  line-height:1;
  color:var(--ep-color-true-black);
  background:var(--ep-color-lime);
  border:1px solid var(--ep-color-lime);
  border-radius:var(--ep-radius);
  padding:15px 24px;
  cursor:pointer;
  text-decoration:none;
  transition:background var(--ep-dur-fast) var(--ep-ease),
             color var(--ep-dur-fast) var(--ep-ease),
             border-color var(--ep-dur-fast) var(--ep-ease);
}
.ep-btn:hover{background:transparent;color:var(--accent);}
.ep-light .ep-btn:hover{color:var(--ink);border-color:var(--ink);}

.ep-btn--ghost{
  background:transparent;
  color:var(--ink);
  border-color:var(--hairline);
}
.ep-btn--ghost:hover{border-color:var(--accent);color:var(--accent);}
.ep-light .ep-btn--ghost:hover{border-color:var(--ink);color:var(--ink);}

/* ---------- Tag (Kategorie-Vorzeile in Lime) ---------- */
.ep-tag{
  display:inline-block;
  font-family:var(--ep-font-sans);
  font-size:var(--ep-text-eyebrow);
  letter-spacing:var(--ep-tracking-eyebrow);
  text-transform:uppercase;
  color:var(--accent);
}
.ep-light .ep-tag{
  background:var(--ep-color-lime);
  color:var(--ep-color-true-black);
  padding:2px 8px;
}

/* ---------- Entity (Aufzählung mit Lime-Kante) ---------- */
.ep-entity{border-left:1px solid var(--accent);padding-left:20px;}
.ep-entity h3,.ep-entity .ep-entity-title{
  font-family:var(--ep-font-sans);
  font-size:var(--ep-text-body);
  font-weight:500;
  color:var(--ink);
  margin:0 0 4px;
}
.ep-entity p{
  font-family:var(--ep-font-sans);
  font-size:var(--ep-text-small);
  line-height:var(--ep-leading-body);
  color:var(--muted);
  margin:0;
}

/* ---------- Großer editorialer Link (Kontakt) ---------- */
.ep-link-xl{
  font-family:var(--ep-font-display);
  font-weight:300;
  font-size:var(--ep-text-quote);
  line-height:var(--ep-leading-quote);
  color:var(--ink);
  text-decoration:none;
  border-bottom:1px solid var(--hairline);
  transition:border-color var(--ep-dur-fast) var(--ep-ease),
             color var(--ep-dur-fast) var(--ep-ease);
}
.ep-link-xl:hover{border-color:var(--accent);color:var(--accent);}
.ep-light .ep-link-xl:hover{border-color:var(--ink);color:var(--ink);}

/* ---------- Navigations-/Fußzeilen-Link ---------- */
.ep-nav-link{
  font-family:var(--ep-font-sans);
  font-size:var(--ep-text-label);
  letter-spacing:var(--ep-tracking-label);
  text-transform:uppercase;
  color:var(--muted);
  text-decoration:none;
  transition:color var(--ep-dur-fast) var(--ep-ease);
}
.ep-nav-link:hover{color:var(--ink);}

/* ---------- Die Lime-Linie (zeichnet sich beim Laden) ---------- */
.ep-rule{
  height:1px;
  background:var(--accent);
  border:0;
  transform-origin:left center;
  animation:ep-draw var(--ep-dur-draw) var(--ep-ease) .2s both;
}
@keyframes ep-draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---------- Punktraster (Bühne für Banner & Hero-Flächen) ---------- */
.ep-dots{
  background-color:var(--ep-color-true-black);
  background-image:radial-gradient(rgba(244,244,239,.13) 1px, transparent 1.4px);
  background-size:14px 14px;
}
.ep-dots--glow{
  background-image:
    radial-gradient(ellipse 60% 50% at 70% 40%, var(--ep-color-lime-tint), transparent 70%),
    radial-gradient(rgba(244,244,239,.13) 1px, transparent 1.4px);
  background-size:100% 100%, 14px 14px;
}

/* ---------- Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion: reduce){
  .ep-rule{animation:none;}
  .ep-btn,.ep-link-xl,.ep-nav-link{transition:none;}
}