/* =====================================================================
   WIR. GEMEINSAM ERFOLGREICH!  —  Folgen-Karten (Posttype "folge")
   ---------------------------------------------------------------------
   Scope:  Alles ist auf .wge-folgen begrenzt (= die CSS-Klasse, die du
           dem Themify-Post-Modul gibst). So bleibt der Rest der Seite
           unberührt.
   Einbau: Themify > Theme Settings > Custom CSS  (oder Child-Theme
           style.css). Fonts Poppins/Mulish lädt das Theme bereits.
   ===================================================================== */

.wge-folgen{
  /* --- Marken-Tokens (aus dem Styleguide) --- */
  --navy:#012B5D;
  --navy-deep:#011C3C;
  --ink:#14213A;
  --grey:#6B7280;
  --pink:#F80E7D;
  --pink-deep:#BA0A5E;
  --pink-08:#FEE7F2;
  --line:#D9DFE7;
  --paper:#FBFAF8;
  --surface:#F2EFEA;
  --display:'Poppins',system-ui,sans-serif;
  --body:'Mulish',system-ui,sans-serif;
  --radius:18px;
}

/* --- Raster: gleichmäßige Karten, automatisch umbrechend --- */
.wge-folgen .loops-wrapper{
  display:grid !important;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:26px;
  margin:0;
  float:none;            /* Themify-Float-Layout abschalten */
}

/* =====================================================================
   KARTE
   Markup kommt aus loops-folge.php  (article.folge-card)
   ===================================================================== */
.wge-folgen .folge-card{
  position:relative;
  display:flex;
  flex-direction:column;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:26px 26px 22px;
  margin:0;
  overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* Pinker Akzentstreifen oben — das Markenmotiv */
.wge-folgen .folge-card::before{
  content:"";
  position:absolute; inset:0 0 auto 0;
  height:4px;
  background:linear-gradient(90deg,var(--navy) 0 60%,var(--pink) 60% 100%);
  opacity:.0;
  transition:opacity .18s ease;
}

.wge-folgen .folge-card:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 34px rgba(1,28,60,.12);
  border-color:var(--navy-10,#D9DFE7);
}
.wge-folgen .folge-card:hover::before{opacity:1;}

/* --- Kopfzeile: Folgennummer + Säule --- */
.wge-folgen .folge-card__head{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:14px;
}
.wge-folgen .folge-eyebrow{
  font-family:var(--display);
  font-weight:700;
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--pink);
}
.wge-folgen .folge-pillar{
  font-family:var(--display);
  font-weight:600;
  font-size:.74rem;
  color:var(--navy);
  background:var(--surface);
  border-radius:999px;
  padding:4px 12px;
  white-space:nowrap;
}

/* --- Titel --- */
.wge-folgen .folge-card__title{
  font-family:var(--display);
  font-weight:700;
  font-size:1.32rem;
  line-height:1.2;
  color:var(--navy);
  margin:0 0 6px;
}
.wge-folgen .folge-card__title a{
  color:inherit;
  text-decoration:none;
  background-image:linear-gradient(var(--pink),var(--pink));
  background-size:0% 2px;
  background-position:0 100%;
  background-repeat:no-repeat;
  transition:background-size .25s ease;
}
.wge-folgen .folge-card__title a:hover{background-size:100% 2px;}

/* --- Subheadline (Audio-Titel) – klein unter dem Folgentitel --- */
.wge-folgen .folge-card__subtitle{
  font-family:var(--body);
  font-weight:600;
  font-size:.82rem;
  line-height:1.35;
  color:var(--grey);
  margin:0 0 14px;
}

/* --- Beschreibung --- */
.wge-folgen .folge-card__excerpt{
  font-family:var(--body);
  font-size:.96rem;
  line-height:1.6;
  color:var(--grey);
  margin:0 0 20px;
}
.wge-folgen .folge-card__excerpt p{margin:0;}

/* --- Fußzeile: Label/Badge + Dauer --- */
.wge-folgen .folge-card__foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:auto;
  padding-top:16px;
  border-top:1px solid var(--line);
}
.wge-folgen .folge-badge{
  font-family:var(--display);
  font-weight:700;
  font-size:.72rem;
  letter-spacing:.04em;
  color:var(--pink-deep);
  background:var(--pink-08);
  border-radius:999px;
  padding:5px 12px;
}
.wge-folgen .folge-duration{
  font-family:var(--body);
  font-size:.84rem;
  font-weight:600;
  color:var(--grey);
}

/* --- Säulen: als Tag-Reihe ganz unten in der Kachel --- */
.wge-folgen .folge-card__saeulen{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:14px;
}

/* =====================================================================
   STATUS „BALD / IN VORBEREITUNG"  (article.folge-card.is-soon)
   ===================================================================== */
.wge-folgen .folge-card.is-soon{
  background:var(--paper);
  border-style:dashed;
}
.wge-folgen .folge-card.is-soon .folge-card__title{color:var(--navy-deep);}
.wge-folgen .folge-card.is-soon .folge-eyebrow{color:var(--navy);opacity:.7;}
.wge-folgen .folge-card.is-soon:hover{
  transform:none;
  box-shadow:none;
  border-color:var(--line);
}
.wge-folgen .folge-card.is-soon:hover::before{opacity:0;}
.wge-folgen .folge-badge--soon{
  color:var(--navy);
  background:var(--surface);
}

/* =====================================================================
   RESPONSIV
   ===================================================================== */
@media (max-width:600px){
  .wge-folgen .loops-wrapper{grid-template-columns:1fr; gap:18px;}
  .wge-folgen .folge-card{padding:22px 20px 18px;}
  .wge-folgen .folge-card__title{font-size:1.2rem;}
}

/* =====================================================================
   FALLBACK  ohne loops-folge.php
   Falls du (noch) nur das Standard-Themify-Post-Modul nutzt, räumt das
   hier den Default-Loop auf: Autor „admin", Kommentarzahl & Logo-Bild
   ausblenden, Kategorie als pinke Pille, Titel in Markenoptik.
   (Folgennummer / Dauer / Badge erscheinen erst mit dem Loop-Template.)
   ===================================================================== */
.wge-folgen .post{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:26px;
  margin:0;
}
.wge-folgen .post .post-author,
.wge-folgen .post .comments,
.wge-folgen .post .post-date,
.wge-folgen .post .post-image{display:none;}     /* Logo-Bild & Meta-Müll raus */
.wge-folgen .post .post-title{
  font-family:var(--display);
  font-weight:700;
  font-size:1.3rem;
  line-height:1.2;
}
.wge-folgen .post .post-title a{color:var(--navy);text-decoration:none;}
.wge-folgen .post .post-category a{
  display:inline-block;
  font-family:var(--display);
  font-weight:600;
  font-size:.74rem;
  color:var(--navy);
  background:var(--surface);
  border-radius:999px;
  padding:4px 12px;
  text-decoration:none;
}
.wge-folgen .post .post-content,
.wge-folgen .post .post-excerpt{
  font-family:var(--body);
  font-size:.96rem;
  line-height:1.6;
  color:var(--grey);
}