/* volt_aktuelles – Frontend (Volt-Stil) – v1.18
   Eigene va-Klassen (kollisionsfrei zum Template).
   Prinzip (Volt-RLP-Klon): Hintergrund = gerades, diagonal lila/rot geteiltes
   Rechteck, per translate nach rechts-unten versetzt. Das Foto liegt in voller
   Größe (inset:0) leicht gekippt darüber -> es ragt links/oben über den
   Hintergrund hinaus, rechts/unten schaut der Hintergrund heraus.
   Hover: Foto rutscht nach links-unten, Kippung bleibt. */

/* ============ Teaser-Grid: 2 Feature-Cards + Liste ============ */
.volt-aktuelles .va-grid {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr) 300px;
  gap: 36px;
  align-items: start;
  margin-top: 20px;
}
@media (max-width: 1100px) { .volt-aktuelles .va-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }
@media (max-width: 760px)  { .volt-aktuelles .va-grid { grid-template-columns: minmax(0,1fr); } }

/* ganze Karte als Link; Pfeil wandert beim Hover, keine Farbaenderung */
.volt-aktuelles .va-cardlink { display: block; text-decoration: none; color: inherit; }
.volt-aktuelles .va-arrow { display: inline-block; transition: transform .2s ease; }
/* alle Pfeile im Aktuelles-Bereich doppelt so gross und fett */
.volt-aktuelles .va-arrow,
.volt-aktuelles .va-list-arrow,
.volt-aktuelles .va-more-arrow {
  font-size: 2em;
  font-weight: 700;
  line-height: 1;
  vertical-align: -0.12em;
}
.volt-aktuelles .va-cardlink:hover .va-arrow { transform: translateX(5px); }

/* ---------- Feature-Card ---------- */
.volt-aktuelles .va-feature { margin-bottom: 8px; }

.volt-aktuelles .va-feature .va-media {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  margin-bottom: 24px;
}
/* Hintergrund: gleiche Größe, nach rechts-unten versetzt */
.volt-aktuelles .va-feature .va-media::before {
  content: '';
  position: absolute;
  inset: 0;
  transform: translate(16px, -16px);
  background: linear-gradient(135deg, #502379 50%, #E63E12 50%);
  z-index: 0;
}
/* Foto: volle Größe, gekippt -> ragt links/oben über den Hintergrund */
.volt-aktuelles .va-feature .va-media .va-bg,
.volt-aktuelles .va-feature .va-media img,
.volt-aktuelles .va-feature .va-media video {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1;
  transform: rotate(1.5deg);
  transform-origin: center;
  transition: transform .35s ease;
}
.volt-aktuelles .va-feature:nth-of-type(2) .va-media .va-bg,
.volt-aktuelles .va-feature:nth-of-type(2) .va-media img,
.volt-aktuelles .va-feature:nth-of-type(2) .va-media video {
  transform: rotate(1.5deg);
}
.volt-aktuelles .va-feature .va-cardlink:hover .va-media .va-bg,
.volt-aktuelles .va-feature .va-cardlink:hover .va-media img,
.volt-aktuelles .va-feature .va-cardlink:hover .va-media video {
  transform: rotate(1.5deg) translate(-7px, 7px);
}
.volt-aktuelles .va-feature:nth-of-type(2) .va-cardlink:hover .va-media .va-bg,
.volt-aktuelles .va-feature:nth-of-type(2) .va-cardlink:hover .va-media img,
.volt-aktuelles .va-feature:nth-of-type(2) .va-cardlink:hover .va-media video {
  transform: rotate(1.5deg) translate(-7px, 7px);
}

.volt-aktuelles .va-feature h3 { margin-top: 4px; font-size: 1.5rem; line-height: 1.25; }
.volt-aktuelles .va-feature h3 { color: #502379; }
.volt-aktuelles .va-feature p { color: #3a2f47; margin-top: 8px; }

/* ============ Liste daneben ============ */
.volt-aktuelles .va-list { display: flex; flex-direction: column; gap: 22px; }
.volt-aktuelles .va-list-item { display: flex; gap: 16px; align-items: center; text-decoration: none; color: inherit; }
.volt-aktuelles .va-list-item.no-thumb { padding-left: 4px; }

/* rechteckiges Vorschaubild (4:3) */
.volt-aktuelles .va-list-thumb {
  position: relative;
  flex: 0 0 84px;
  width: 84px;
  aspect-ratio: 4/3;
  display: block;
}
.volt-aktuelles .va-list-thumb::before {
  content: '';
  position: absolute;
  inset: 0;
  transform: translate(6px, -6px);
  background: linear-gradient(135deg, #502379 50%, #E63E12 50%);
  z-index: 0;
}
.volt-aktuelles .va-list-thumb .va-bg,
.volt-aktuelles .va-list-thumb img,
.volt-aktuelles .va-list-thumb video {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1;
  transform: none;
  transition: transform .35s ease;
}
.volt-aktuelles .va-list-item:nth-of-type(even) .va-list-thumb .va-bg,
.volt-aktuelles .va-list-item:nth-of-type(even) .va-list-thumb img,
.volt-aktuelles .va-list-item:nth-of-type(even) .va-list-thumb video {
  transform: none;
}
.volt-aktuelles .va-list-thumb:hover .va-bg,
.volt-aktuelles .va-list-thumb:hover img,
.volt-aktuelles .va-list-thumb:hover video {
  transform: translate(-3px, 3px);
}
.volt-aktuelles .va-list-link {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #502379; text-decoration: none; font-weight: 600; line-height: 1.3;
  transition: color .2s ease;
}
.volt-aktuelles .va-list-arrow {
  flex: 0 0 auto;
  padding-left: 12px;
  color: #502379;
  font-weight: 700;
  opacity: 0;
  transition: opacity .2s ease;
}
.volt-aktuelles .va-list-item:hover .va-list-arrow { opacity: 1; }

/* "Weitere Neuigkeiten": grüner Unterstrich, der beim Hover länger wird */
.volt-aktuelles .va-more {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  position: relative;
  color: #502379;
  font-weight: 700;
  font-size: 1.15rem;
  text-decoration: none;
  padding-bottom: 8px;
}
.volt-aktuelles .va-more-arrow {
  display: inline-block;
  transition: transform .25s ease;
}
.volt-aktuelles .va-more::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 4px;
  background: #1BBE6F;
  transition: width .25s ease;
}
.volt-aktuelles .va-more:hover::after { width: calc(100% + 20px); }
.volt-aktuelles .va-more:hover .va-more-arrow { transform: translateX(20px); }

/* ============ Hauptseite: Archiv-Grid ============ */
.volt-aktuelles .va-cardgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 40px 36px;
  margin-top: 20px;
}
@media (max-width: 980px) { .volt-aktuelles .va-cardgrid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px) { .volt-aktuelles .va-cardgrid { grid-template-columns: minmax(0,1fr); } }

.volt-aktuelles .va-vcard { display: flex; flex-direction: column; }
.volt-aktuelles .va-vcard .va-media {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  margin-bottom: 18px;
}
.volt-aktuelles .va-vcard .va-media::before {
  content: '';
  position: absolute;
  inset: 0;
  transform: translate(14px, -14px);
  background: linear-gradient(135deg, #502379 50%, #E63E12 50%);
  z-index: 0;
}
.volt-aktuelles .va-vcard .va-media .va-bg,
.volt-aktuelles .va-vcard .va-media img,
.volt-aktuelles .va-vcard .va-media video {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1;
  transform: rotate(-1.2deg);
  transition: transform .35s ease;
}
.volt-aktuelles .va-vcard:nth-child(even) .va-media .va-bg,
.volt-aktuelles .va-vcard:nth-child(even) .va-media img,
.volt-aktuelles .va-vcard:nth-child(even) .va-media video {
  transform: rotate(1.2deg);
}
.volt-aktuelles .va-vcard .va-cardlink:hover .va-media .va-bg,
.volt-aktuelles .va-vcard .va-cardlink:hover .va-media img,
.volt-aktuelles .va-vcard .va-cardlink:hover .va-media video {
  transform: rotate(-1.2deg) translate(-5px, 5px);
}
.volt-aktuelles .va-vcard:nth-child(even) .va-cardlink:hover .va-media .va-bg,
.volt-aktuelles .va-vcard:nth-child(even) .va-cardlink:hover .va-media img,
.volt-aktuelles .va-vcard:nth-child(even) .va-cardlink:hover .va-media video {
  transform: rotate(1.2deg) translate(-5px, 5px);
}
.volt-aktuelles .va-vcard .va-meta { display: block; color: #5e5566; margin: 0 0 6px; }
.volt-aktuelles .va-vcard .va-cardtitle {
  color: #502379;
  margin: 0 0 10px;
  font-size: 1.2rem;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.volt-aktuelles .va-vcard .va-cardlink:hover .va-cardtitle {
  text-decoration: underline;
  text-decoration-color: #1BBE6F;
  text-decoration-thickness: 3px;
  text-underline-offset: 4px;
}
.volt-aktuelles .va-vcard .va-cardtext {
  color: #3a2f47;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============ Einzelansicht ============ */
.va-single {
  display: grid;
  grid-template-columns: minmax(0,1fr) 320px;
  gap: 48px;
  align-items: start;
  padding-top: 14px;
}
@media (max-width: 900px) { .va-single { grid-template-columns: minmax(0,1fr); } }
.va-single .va-aside-title { color: #502379; font-size: 1.4rem; margin: 0 0 22px; }
.va-single .va-aside-item { display: flex; gap: 14px; align-items: center; text-decoration: none; margin-bottom: 18px; }
.volt-aktuelles .va-aside-item .va-list-thumb { flex: 0 0 78px; width: 78px; }
.va-single .va-aside-text { display: flex; flex-direction: column; min-width: 0; }
.va-single .va-aside-headline {
  color: #502379; font-weight: 700; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.va-single .va-aside-item:hover .va-aside-headline {
  text-decoration: underline; text-decoration-color: #1BBE6F; text-decoration-thickness: 2px; text-underline-offset: 3px;
}
.va-single .va-aside-date { color: #5e5566; font-size: .85rem; margin-top: 3px; }
.va-single .va-media--single {
  position: relative;
  width: 100%;
  max-width: 640px;
  aspect-ratio: 4/3;
  margin: 0 0 20px;
}
.va-single .va-media--single::before {
  content: '';
  position: absolute;
  inset: 0;
  transform: translate(16px, -16px);
  background: linear-gradient(135deg, #502379 50%, #E63E12 50%);
  z-index: 0;
}
.va-single .va-media--single .va-bg,
.va-single .va-media--single img,
.va-single .va-media--single video {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1;
  transform: rotate(-1.2deg);
}
/* Hochformat-Variante: Medium im echten Format, kein 4:3-Beschnitt.
   Container schmiegt sich an das Medium (inline-block), Hoehe gedeckelt. */
.va-single .va-media--hoch {
  position: relative;
  display: inline-block;
  max-width: 100%;
  aspect-ratio: auto;
  margin: 0 0 20px;
}
.va-single .va-media--hoch::before {
  content: '';
  position: absolute;
  inset: 0;
  transform: translate(14px, -14px) rotate(-1.2deg);
  background: linear-gradient(135deg, #502379 50%, #E63E12 50%);
  z-index: 0;
}
.va-single .va-media--hoch .va-native {
  position: relative !important;
  inset: auto !important;
  z-index: 1;
  display: block;
  max-width: 100%;
  max-height: 78vh;
  width: auto !important;
  height: auto !important;
  transform: rotate(-1.2deg);
}
.va-single .va-meta { color: #5e5566; font-weight: 500; margin: 26px 0 4px; }
.va-single .va-lead { font-size: 1.2rem; font-weight: 600; color: #3a2f47; line-height: 1.5; margin: 4px 0 18px; }
.va-single .va-body { margin: 18px 0; line-height: 1.6; }
.va-single .va-body img, .va-single .va-body video { max-width: 100%; height: auto; }
/* Tabellen/iframes im Artikel duerfen den Container nicht aufblaehen.
   Tabelle bekommt bei Bedarf eigenen horizontalen Scroll statt die Seite zu sprengen. */
.va-single .va-body { overflow-wrap: anywhere; }
.va-single .va-body table { display: block; width: 100%; max-width: 100%; overflow-x: auto; }
.va-single .va-body iframe { max-width: 100%; }

/* Weitere Medien: automatische Galerie unter dem Volltext.
   Medien im echten Format (kein Beschnitt) -> Hochformat-Videos bleiben hochkant. */
.va-single .va-extras { margin: 30px 0 6px; }
.va-single .va-extras-title { color: #502379; font-size: 1.25rem; margin: 0 0 14px; }
.va-single .va-extras-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  align-items: start;
}
.va-single .va-extra {
  margin: 0;
  background: #ece6f3;
  border-radius: 8px;
  overflow: hidden;
}
.va-single .va-extra img,
.va-single .va-extra video {
  display: block;
  width: 100%;
  height: auto;
  max-height: 70vh;
  object-fit: contain;
  background: #ece6f3;
}

/* ============ Pager ============ */
.volt-pager { margin-top: 32px; display: flex; gap: 8px; flex-wrap: wrap; }
.volt-pager a {
  display: inline-block; min-width: 40px; text-align: center;
  padding: 8px 12px; border: 2px solid #502379; border-radius: 8px;
  color: #502379; font-weight: 700; text-decoration: none;
  transition: background .2s ease, color .2s ease;
}
.volt-pager a:hover, .volt-pager a.is-current { background: #502379; color: #fff; }