/* ========== Couch & Agora – Plenum v3.1 (animated, colored, connected) ==========
   
   BEREINIGT: Dark Mode wurde in zentrales Snippet ausgelagert
   
   ================================================================================ */

/* Grundfarben/Variablen */
.plenum, .ca-plenum{
  --pl-bg:#fff;
  --pl-soft:var(--ca-bg-subtle,#f5f3ef);
  --pl-border:var(--ca-border-light,#e6e3dd);
  --pl-text:var(--ca-text-primary,#222);
  --pl-line:var(--ca-border-light,#e6e3dd);
  display:grid; gap:1rem; margin:1.2rem 0 2rem;
  position: relative;
}

/* Verbindungslinie */
.plenum .pl-wrap, .ca-plenum .pl-wrap{
  position: relative;
}
.plenum .pl-wrap::before, .ca-plenum .pl-wrap::before{
  content: '';
  position: absolute;
  left: 210px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, transparent 0%, var(--pl-line) 5%, var(--pl-line) 95%, transparent 100%);
  opacity: 0.5;
  z-index: 0;
}
@media (max-width:820px){
  .plenum .pl-wrap::before, .ca-plenum .pl-wrap::before{
    left: 20px;
  }
}

/* Topic-Pill */
.plenum .pl-topic, .ca-plenum .pl-topic{
  display:inline-block; background:#fff; color:var(--pl-text);
  border:1px solid var(--pl-border); border-radius:999px;
  padding:.55rem .85rem; font-weight:700;
  box-shadow:0 3px 12px rgba(0,0,0,.06);
  position: relative; z-index: 1;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.plenum .pl-topic.pl-visible, .ca-plenum .pl-topic.pl-visible{
  opacity: 1;
  transform: translateY(0);
}

/* Szene: kein Box-Styling, nur kursiver Text */
.plenum .pl-scene, .ca-plenum .pl-scene{
  background:transparent; color:inherit;
  border:none; border-radius:0;
  padding:0; font-style:italic; box-shadow:none;
  position: relative; z-index: 1;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.plenum .pl-scene.pl-visible, .ca-plenum .pl-scene.pl-visible{
  opacity: 1;
  transform: translateY(0);
}

/* Note: kein Box-Styling, normaler Text */
.plenum .pl-note, .ca-plenum .pl-note{
  background:transparent; color:inherit;
  border:none; border-radius:0; padding:0;
  box-shadow:none;
  position: relative; z-index: 1;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.plenum .pl-note.pl-visible, .ca-plenum .pl-note.pl-visible{
  opacity: 1;
  transform: translateY(0);
}

/* Zeile: links Name/Rolle, rechts Sprechblase */
.plenum .pl-row, .ca-plenum .pl-row{
  display:grid; grid-template-columns:minmax(180px,240px) 1fr;
  gap:18px; align-items:flex-start; margin:.9rem 0 1.1rem;
  position: relative; z-index: 1;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.plenum .pl-row.pl-visible, .ca-plenum .pl-row.pl-visible{
  opacity: 1;
  transform: translateY(0);
}

@media (max-width:820px){
  .plenum .pl-row, .ca-plenum .pl-row{ grid-template-columns:1fr; }
  .plenum .pl-side, .ca-plenum .pl-side{ order:-1; }
}

/* Sidebar: Name & Rolle */
.plenum .pl-side, .ca-plenum .pl-side{ padding-top:.3rem; }
.plenum .pl-name, .ca-plenum .pl-name{ 
  font-weight:800; 
  letter-spacing:.1px; 
  font-size:1.12rem; 
  color: var(--speaker-color, inherit);
}
.plenum .pl-role, .ca-plenum .pl-role{
  display:inline-block; margin-top:.35rem;
  background:#fff; color:#6a655f;
  border:1px solid var(--pl-border); border-radius:999px;
  padding:.14rem .55rem; font-size:.9em;
}

/* Sprechblase mit farbiger Linie */
.plenum .pl-bubble, .ca-plenum .pl-bubble{
  background:#fff; color:var(--pl-text);
  border:1px solid var(--pl-border); 
  border-left: 3px solid var(--speaker-color, var(--pl-border));
  border-radius:14px;
  box-shadow:0 10px 26px rgba(0,0,0,.07);
  padding:1rem 1.25rem;
  position: relative;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

/* Hover-Effekt */
.plenum .pl-bubble:hover, .ca-plenum .pl-bubble:hover{
  box-shadow: 0 14px 32px rgba(0,0,0,.12);
  transform: scale(1.008);
}

.plenum .pl-bubble p, .ca-plenum .pl-bubble p{
  margin:.6rem 0; line-height:1.65; text-wrap:pretty;
}
.plenum .pl-bubble p:first-child, .ca-plenum .pl-bubble p:first-child{ margin-top:0; }
.plenum .pl-bubble p:last-child,  .ca-plenum .pl-bubble p:last-child{ margin-bottom:0; }