:root {}

.mwd-vti-post-accordion{ 
  --mwd-text: var(--e-global-color-text, #152536);
  --mwd-cta-bg: var(--e-global-color-primary, #0a4d6d);
  --mwd-cta-bg-hover: var(--e-global-color-primary, #0a4d6d);
  --mwd-gap-item: 16px;
  --mwd-gap-mt: 24px;
  --mwd-radius-img: 8px;
  --mwd-radius-cta: 8px;
  --mwd-icon-align: center;
  --mwd-media-max-w: 100%; /* max. Breite des Bildes innerhalb der rechten Spalte */
  --mwd-pa-open-max: 1000px; /* max-height für Öffnen-Animation */
  --mwd-pa-dur: .2s; /* Animationsdauer (Panel + Icon) */
  /* Tab-Border Variablen */
  --mwd-pa-bt: 0px; /* top */
  --mwd-pa-br: 0px; /* right */
  --mwd-pa-bb: 0px; /* bottom */
  --mwd-pa-bl: 0px; /* left */
  --mwd-pa-bc: rgba(0,0,0,.15);
  --mwd-pa-bs: none;
  /* Einzel-Farben */
  --mwd-title: var(--mwd-text);
  --mwd-date: var(--mwd-text);
  --mwd-excerpt: var(--mwd-text);
  --mwd-cta-text: #fff;
  --mwd-cta-text-hover: #fff;
  /* Content-Padding Variablen */
  --mwd-pa-pad-t: 0px;
  --mwd-pa-pad-r: 0px;
  --mwd-pa-pad-b: 16px;
  --mwd-pa-pad-l: 0px;
  /* Header-Padding Variablen */
  --mwd-ph-pad-t: 16px;
  --mwd-ph-pad-r: 0px;
  --mwd-ph-pad-b: 16px;
  --mwd-ph-pad-l: 0px;
  color: var(--mwd-text);
  display:block;
}

.mwd-vti-post-accordion > .mwd-pa-item{ 
  margin-top: var(--mwd-gap-item); 
  border-radius: 0; 
  border-top: var(--mwd-pa-bt) var(--mwd-pa-bs) var(--mwd-pa-bc);
  border-right: var(--mwd-pa-br) var(--mwd-pa-bs) var(--mwd-pa-bc);
  border-bottom: var(--mwd-pa-bb) var(--mwd-pa-bs) var(--mwd-pa-bc);
  border-left: var(--mwd-pa-bl) var(--mwd-pa-bs) var(--mwd-pa-bc);
}
.mwd-vti-post-accordion > .mwd-pa-item:first-child{ margin-top: 0; }

.mwd-pa-header{ 
  width:100%;
  text-align:left;
  background:none;
  border:0;
  display:grid;
  grid-template-columns: 1fr auto;
  grid-auto-rows: min-content;
  column-gap: 16px;
  row-gap: 4px;
  padding: var(--mwd-ph-pad-t) var(--mwd-ph-pad-r) var(--mwd-ph-pad-b) var(--mwd-ph-pad-l);
  cursor:pointer;
}
/* Keine Fokus-Umrandung bei Maus: nur bei Tastaturfokus anzeigen */
.mwd-pa-header:focus{ outline: none; }
.mwd-pa-header:focus-visible{ outline: 2px solid currentColor; outline-offset:2px; }
.mwd-pa-title{ font-weight:700; grid-column:1; grid-row:2; color: var(--mwd-title, var(--mwd-text)); }
.mwd-pa-date{ grid-column:1; grid-row:1; margin:0 0 2px 0; white-space:nowrap; color: var(--mwd-date, var(--mwd-text)); }
.mwd-pa-icon{ grid-column:2; grid-row:1 / span 2; align-self:center; display:block; }
.mwd-pa-caret{ grid-column:2; grid-row:1 / span 2; width:16px; height:16px; position:relative; align-self:center; }
.mwd-pa-caret::before, .mwd-pa-caret::after{
  content:""; position:absolute; left:0; right:0; top:50%; height:2px; background: currentColor; transform:translateY(-50%);
}
.mwd-pa-header[aria-expanded="true"] .mwd-pa-caret::after{ display:none; }
/* Icon Rotation bei geöffnetem Tab */
.mwd-pa-icon, .mwd-pa-caret{ transition: transform var(--mwd-pa-dur, .2s) ease; }
.mwd-pa-header[aria-expanded="true"] .mwd-pa-icon,
.mwd-pa-header[aria-expanded="true"] .mwd-pa-caret{ transform: rotate(180deg); }

/* Panel Animation: sanft über Höhe (JS steuert inline height) */
.mwd-pa-panel{ 
  /* Padding wandert in .mwd-pa-inner, damit die Höhe sauber animiert werden kann */
  padding: 0;
  height: 0;
  overflow: hidden;
  box-sizing: border-box;
  transition: height var(--mwd-pa-dur, .2s) ease;
  will-change: height;
}
.mwd-pa-panel[hidden]{ display:none; }

@media (prefers-reduced-motion: reduce){
  .mwd-pa-panel{ transition: none !important; }
  .mwd-pa-icon, .mwd-pa-caret{ transition: none !important; }
}
/* Härtung: Zwei Spalten, je 1fr; minmax verhindert Überlauf/Zeilenwechsel */
.mwd-vti-post-accordion > .mwd-pa-item > .mwd-pa-panel > .mwd-pa-inner{
  display:grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  align-items:start;
  gap: var(--mwd-gap-mt);
  padding: var(--mwd-pa-pad-t) var(--mwd-pa-pad-r) var(--mwd-pa-pad-b) var(--mwd-pa-pad-l);
  box-sizing: border-box;
}

/* Text links, Bild rechts; auf Tablet+ Smartphone zuerst Text, dann Bild */
.mwd-vti-post-accordion > .mwd-pa-item > .mwd-pa-panel > .mwd-pa-inner > .mwd-pa-text{ grid-column:1; grid-row:1; }
.mwd-vti-post-accordion > .mwd-pa-item > .mwd-pa-panel > .mwd-pa-inner > .mwd-pa-media{ grid-column:2; grid-row:1; justify-self:stretch; width:100%; display:flex; justify-content:flex-start; }
.mwd-vti-post-accordion > .mwd-pa-item > .mwd-pa-panel > .mwd-pa-inner > .mwd-pa-media > .mwd-pa-media-inner{ display:block; width:100%; max-width: var(--mwd-media-max-w, 100%); aspect-ratio: 556 / 313; background-size:cover; background-position:center; border-radius: var(--mwd-radius-img); }

@media (max-width: 1024px){
  .mwd-vti-post-accordion > .mwd-pa-item > .mwd-pa-panel > .mwd-pa-inner{ grid-template-columns: 1fr; }
  .mwd-vti-post-accordion > .mwd-pa-item > .mwd-pa-panel > .mwd-pa-inner > .mwd-pa-text{ grid-column:1; grid-row:1; }
  .mwd-vti-post-accordion > .mwd-pa-item > .mwd-pa-panel > .mwd-pa-inner > .mwd-pa-media{ grid-column:1; grid-row:2; }
}

.mwd-pa-excerpt{ margin: 0 0 16px 0; color: var(--mwd-excerpt, var(--mwd-text)); }

/* CTA (.bg-ani) übernimmt Farben via Variablen */
.mwd-pa-cta-wrap .bg-ani .elementor-button{ position:relative; z-index:1; color: var(--mwd-cta-text, #fff); }
.mwd-pa-cta-wrap .bg-ani .elementor-button:hover {color: #003b5b;}
.mwd-pa-cta-wrap .bg-ani .mwd-btn-bg{ 
  background: var(--mwd-cta-bg); 
}
.mwd-pa-cta-wrap .bg-ani:hover .mwd-btn-bg{ background: var(--mwd-cta-bg-hover); }

/* Mehr laden */
.mwd-pa-more-wrap{ display:flex; justify-content:center; padding-top: 24px; }
.mwd-pa-more{ background: var(--mwd-cta-bg); color:#fff; border:0; border-radius: var(--mwd-radius-cta); padding: 12px 20px; cursor:pointer; }
.mwd-pa-more:hover{ background: var(--mwd-cta-bg-hover); }
.mwd-pa-more.is-loading{ opacity:.7; }