/* ====== Couch & Agora – Start-Hero (sicher, ohne Layout-Override) ======
   
   BEREINIGT: Dark Mode wurde in zentrales Snippet ausgelagert
   
   ====================================================================== */

.ca-hero{
  background: var(--ca-panel, #ECE6DC);
  border: 1px solid var(--ca-panel-border, #D9D2C9);
  border-radius: 14px;
  padding: clamp(16px, 2.8vw, 28px);
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
}

/* spacing oberhalb/unterhalb enger, damit „weniger verschenkter Platz" */
.ca-hero{ margin-block: clamp(12px, 2.4vw, 28px); }

/* H1 & Unterzeile im Hero */
.ca-hero h1{ margin:.1rem 0 .35rem; letter-spacing:.2px; }
.ca-hero p em{ font-style: italic; }

/* Schriftgrößen vereinheitlichen – überschreibt WordPress-Klassen */
.ca-hero h2 {
  font-size: clamp(20px, 2.4vw, 24px) !important;
  font-weight: 600;
}

.ca-hero p {
  font-size: clamp(15px, 1.8vw, 17px) !important;
}

/* Extra-small Klasse neutralisieren (falls WordPress sie generiert) */
.ca-hero .has-extra-small-font-size {
  font-size: inherit !important;
}

/* Trenner im Hero dezent */
.ca-hero .wp-block-separator{
  border:0; height:1px;
  background:linear-gradient(to right, transparent, rgba(0,0,0,.28) 20%, rgba(0,0,0,.28) 80%, transparent);
  margin:.8rem 0 1rem;
}

/* Spalten INNEN nur kosmetisch anpassen – kein neues Layout! */
.ca-hero .wp-block-columns{
  gap: clamp(18px, 2.4vw, 32px);
  align-items: start;
}

/* rechte Spalte leicht absetzen */
.ca-hero .wp-block-column:nth-child(2){
  border-left:1px solid var(--ca-panel-border,#D9D2C9);
  padding-left: clamp(14px, 2vw, 24px);
}

/* „So geht's" als kurzer Satz unter Mitreden (falls Liste entfällt) */
.ca-hero .mitreden-steps{
  margin-top:.6rem; color:var(--ca-text-secondary,#4a463f);
}

/* Abschnittsüberschrift „Themen" dichter an die Karten */
.ca-section{ margin-top: clamp(24px, 4.6vw, 48px); }
.ca-section h2{ margin:0 0 .35rem; }
.ca-section p{ margin:0 0 .8rem; color:var(--ca-text-secondary,#4a463f); }

/* Hero: Titel/Unterzeile mittig und kompakter */
.ca-hero > .wp-block-heading{
  text-align:center;
  margin-top:.1rem;
  margin-bottom:.25rem;
}

.ca-hero > p:first-of-type{
  text-align:center;
  max-width: 58ch;        /* Unterzeile angenehm schmal führen */
  margin: .2rem auto .6rem;
  color: var(--ca-text-secondary,#4a463f);
}

/* Spaltenabstand im Hero in Ordnung halten */
.ca-hero .wp-block-columns{
  gap: clamp(18px, 2.4vw, 32px);
  align-items: start;
}

/* Rechte Spalte mit feiner Trennung */
.ca-hero .wp-block-columns > .wp-block-column:nth-child(2){
  border-left:1px solid var(--ca-panel-border,#D9D2C9);
  padding-left: clamp(14px, 2vw, 24px);
}

/* Mobil: statt linker Linie eine Oberkante, damit es beim Stapeln stimmig aussieht */
@media (max-width: 820px){
  .ca-hero .wp-block-columns > .wp-block-column:nth-child(2){
    border-left:0;
    border-top:1px solid var(--ca-panel-border,#D9D2C9);
    padding-left:0;
    padding-top: clamp(12px, 2vw, 18px);
  }
}

/* === HERO: Lesbarkeit der Spalten im Light-Mode === */

/* Grundfarbe für alle Textelemente in den zwei Spalten */
.ca-hero .wp-block-columns,
.ca-hero .wp-block-columns p,
.ca-hero .wp-block-columns li,
.ca-hero .wp-block-columns h2,
.ca-hero .wp-block-columns h3,
.ca-hero .wp-block-columns strong,
.ca-hero .wp-block-columns em{
  color: var(--ca-text-primary) !important;
  opacity: 1 !important;        /* eventuelle „blasse" Vorlage neutralisieren */
}

/* Links in den Spalten: gut sichtbar und zugänglich */
.ca-hero .wp-block-columns a{
  color: var(--ca-accent) !important;
  text-decoration-color: color-mix(in srgb, var(--ca-accent) 50%, transparent);
}

/* Optional: falls einzelne Absätze aus der Vorlage eine „Alt"-Textfarbe tragen */
.ca-hero .wp-block-columns .has-text-color,
.ca-hero .wp-block-columns .has-ti-fg-alt-color{
  color: var(--ca-text-primary) !important;
}

/* ===== Hero-Lesbarkeit (Spalten immer dunkler Text im Light Mode) ===== */

/* Text in den zwei Spalten immer dunkel */
.ca-hero .wp-block-columns,
.ca-hero .wp-block-columns :is(p, li, h2, h3, strong, em){
  color: #1B1B1B !important;   /* klar dunkler Text */
  opacity: 1 !important;
  text-shadow: none !important;
}

/* Theme-/Inline-Farben neutralisieren, falls gesetzt */
.ca-hero .wp-block-columns .has-text-color,
.ca-hero .wp-block-columns .has-ti-fg-alt-color,
.ca-hero .wp-block-columns [style*="color:"],
.ca-hero .wp-block-columns [class*="has-"]{
  color: #1B1B1B !important;
}

/* Links in den Spalten gut sichtbar lassen */
.ca-hero .wp-block-columns a{
  color: var(--ca-accent, #0F766E) !important;
  text-decoration-thickness: .08em;
}