/* === Layout === */
.mcwAcc4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 1280px;
  margin: 0 auto;
}
.mcwAcc-col { display: flex; flex-direction: column; gap: 12px; }
.mcwAcc-item { border: 1px solid #e3e6ec; border-radius: 10px; overflow: clip; background:#fff; }

/* === Trigger (Titel) === */
.mcwAcc-trigger {
  position: relative;           /* for chevron */
  width: 100%;
  text-align: left;
  padding: 12px 36px 12px 14px; /* space on right for chevron */
  font: 600 15px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: #f7f9fc;
  border: 0;
  cursor: pointer;
  white-space: normal;
  color: #eb4947; /* Titel rot */
  transition: background-color 0.3s ease, color 0.3s ease; /* Animation */
}
.mcwAcc-titleLine1 { display:block; }
.mcwAcc-titleLine2 { display:block; font-weight:500; opacity:.9; }
.mcwAcc-trigger:focus { outline: 2px solid #0596de; outline-offset: 2px; }
.mcwAcc-trigger[aria-expanded="true"] { background: #eb4947; color: #111111; }

/* Chevron icon via pseudo */
.mcwAcc-trigger::after {
  content: "›";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%) rotate(0deg);
  transition: transform 0.3s ease;
  font-size: 16px;
}
.mcwAcc-trigger[aria-expanded="true"]::after {
  transform: translateY(-50%) rotate(90deg);
}

/* === Panel (Inhalt) mit Animation === */
.mcwAcc-panel {
  padding: 12px 14px;
  font: 400 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.35s ease, opacity 0.35s ease;
    background-color: #F6B5B5;
}
.mcwAcc-panel.open { opacity: 1; max-height: 1000px; }

/* === Inhaltstypografie === */
.mcwAcc-panel ul { margin: 4px 0 0 0; padding-left: 0; list-style: none; }
.mcwAcc-panel li, .mcwAcc-panel p, .mcwAcc-panel a { margin-left: 0; }
.mcwAcc-panel a { color: #eb4947; text-decoration: none; font-size: 1.1em; }
.mcwAcc-panel a:hover { text-decoration: underline; }

/* === Responsive === */
@media (max-width: 1200px) { .mcwAcc4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .mcwAcc4 { grid-template-columns: 1fr; } }