.c2-timeline {
	/* CSS Variablen (werden via Block gesetzt) */
	--c2-line: #d0d0d0;
	--c2-accent: #111111;
	--c2-card-bg: #ffffff;

	position: relative;
	width: 100%;
	padding: 1rem 0;
}

.c2-timeline__inner {
	position: relative;
	width: 100%;
    z-index: 1;
}

/* ZENTRALE LINIE - immer relativ zum Parent-Container */
.c2-timeline::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 2px;
	background: var(--c2-line);
	transform: translateX(-1px);
}

/* ITEM */
.c2-timeline__item {
	position: relative;
	display: flex;
	margin: 2.25rem 0;
	min-height: 2.25rem;

	/* Animation Basis */
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 600ms ease, transform 600ms ease;
	will-change: opacity, transform;
}

/* Alternierend (ohne Attribute) */
.c2-timeline__item:nth-child(odd) { justify-content: flex-end; }
.c2-timeline__item:nth-child(even) { justify-content: flex-start; }

/* Marker sitzt auf der Linie */
.c2-timeline__marker {
	position: absolute;
	left: 50%;
	top: 1.1rem;
	width: 14px;
	height: 14px;
	border-radius: 999px;
	background: var(--c2-card-bg);
	border: 2px solid var(--c2-accent);
	transform: translateX(-50%);
	box-sizing: border-box;
}

/* Content-Karte */
.c2-timeline__content {
	width: min(520px, calc(50% - 56px));
	background: var(--c2-card-bg);
	border: 1px solid color-mix(in srgb, var(--c2-line) 55%, transparent);
	border-left: 4px solid var(--c2-accent);
	border-radius: 0px;
	padding: 1rem 1.1rem;
	box-shadow: 0 10px 24px rgba(0,0,0,0.08);
	box-sizing: border-box;
}

.c2-timeline__item:nth-child(odd) .c2-timeline__content {
	margin-right: 56px;
	text-align: right;
	transform: translateX(-14px);
}
.c2-timeline__item:nth-child(even) .c2-timeline__content {
	margin-left: 56px;
	transform: translateX(14px);
}

/* In-View */
.c2-timeline__item.is-inview {
	opacity: 1;
	transform: none;
}
.c2-timeline__item.is-inview .c2-timeline__content {
	transform: none;
}

/* Mobile: Stacking links, Linie/Marker bleiben im Container */
@media (max-width: 700px) {
	.c2-timeline::before {
		left: 20px;
		transform: translateX(0);
	}
	.c2-timeline__marker {
		left: 20px;
		transform: translateX(0);
	}
	.c2-timeline__item {
		justify-content: flex-start !important;
	}
	.c2-timeline__content {
		width: 100%;
		margin-left: 52px !important;
		margin-right: 0 !important;
		text-align: left !important;
	}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.c2-timeline__item {
		transition: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
	.c2-timeline__content {
		transform: none !important;
	}
}

/* Captions in der Timeline immer anzeigen (Core Image / Gallery / Figure) */
.c2-timeline__content figure {
	margin: 0; /* verhindert extra Abstand, je nach Theme */
}

.c2-timeline__content figcaption,
.c2-timeline__content .wp-element-caption {
	display: block !important; /* überschreibt Themes, die Captions verstecken */
	font-size: 0.7em;
	line-height: 1.35;
	opacity: 0.85;
	margin-top: 0rem;
}

/* Bilder sauber responsiv im Panel */
.c2-timeline__content img {
	max-width: 100%;
	height: auto;
}

.c2-timeline__item:nth-child(odd) .c2-timeline__content figcaption,
.c2-timeline__item:nth-child(odd) .c2-timeline__content .wp-element-caption {
	text-align: left;
}

.wp-lightbox-container button {
    opacity: 1;
    /*display: none;*/
}

/* Core Lightbox: Caption unter dem Bild anzeigen */
.wp-lightbox-overlay.active .wp-block-image {
	flex-direction: column;
	gap: 12px;
}

/* Core-Caption im Overlay aus (sonst doppelt / WP versteckt sie ohnehin) */
.wp-lightbox-overlay.active .wp-block-image figcaption,
.wp-lightbox-overlay.active .wp-block-image .wp-element-caption {
  display: none !important;
}

/* Drawer */
.wp-lightbox-overlay.active details.c2-lightbox-caption {
  position: fixed;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  width: min(980px, calc(100vw - 24px));
  z-index: 10000000;
  background: rgba(0,0,0,.78);
  color: #fff;
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.wp-lightbox-overlay.active details.c2-lightbox-caption > summary {
  cursor: pointer;
  list-style: none;
  padding: 10px 14px;
  font-weight: 600;
  line-height: 1.25;
}
.wp-lightbox-overlay.active details.c2-lightbox-caption > summary::-webkit-details-marker { display: none; }
.wp-lightbox-overlay.active details.c2-lightbox-caption > summary::after {
  content: "▲";
  float: right;
  opacity: .9;
}
.wp-lightbox-overlay.active details.c2-lightbox-caption[open] > summary::after { content: "▴"; }

.wp-lightbox-overlay.active .c2-lightbox-caption__body {
  padding: 0 14px 14px;
  max-height: min(45vh, 460px);
  overflow: auto;
  font-size: 14px;
  line-height: 1.45;
  opacity: .95;
}

/* Mobil “gestackt”: volle Breite, besser lesbar */
@media (max-width: 600px) {
  .wp-lightbox-overlay.active details.c2-lightbox-caption {
    width: calc(100vw - 16px);
    bottom: 10px;
    border-radius: 10px;
  }
  .wp-lightbox-overlay.active .c2-lightbox-caption__body {
    max-height: 50vh;
    font-size: 13px;
  }
}

/* Caption-Accordion (normal unter dem Bild) */
.c2-cap-caption { margin-top: .5rem; }
.c2-cap {
	border: 1px solid rgba(0,0,0,.15);
	border-radius: 10px;
	overflow: hidden;
	background: rgba(0,0,0,.04);
}
.c2-cap__head {
	width: 100%;
	border: 0;
	background: transparent;
	padding: 10px 12px;
	display: flex;
	align-items: center;
	/*justify-content: space-between;*/
	gap: 12px;
	cursor: pointer;
	font-weight: 700;
	text-align: left;
}
.c2-cap__head span.c2-cap__chev{
  -webkit-transition: -webkit-transform 200ms ease;
  transition: transform 200ms ease;
  -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
          transform: rotate(0deg);
}

.c2-cap__head[aria-expanded="true"] span.c2-cap__chev{
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
}
.c2-cap__prefix {
    display: none;
    font-size: 1rem;
    letter-spacing: 1px;
    /*color: white;*/
    } /* nur in Lightbox sichtbar */
.c2-cap__chev { transition: transform 240ms ease; opacity: .85}

.c2-cap__body{
	max-height: 0;
	overflow: hidden;
	padding: 0 12px;
	opacity: 0;
	transform: translateY(6px);
	transition: max-height 320ms ease, opacity 220ms ease, transform 320ms ease, padding 320ms ease;
}
.c2-cap.is-open .c2-cap__body{
	opacity: 1;
	transform: translateY(0);
	padding: 10px 12px 12px;
}

/* WP Lightbox blendet figcaption oft aus -> wieder einblenden */
.wp-lightbox-overlay.active ~ figcaption.wp-element-caption,
.wp-lightbox-overlay.active figcaption.wp-element-caption {
	display: block !important;
}

/* In der Lightbox als Drawer unten, klappt nach oben auf */
.wp-lightbox-overlay.active ~ figcaption.c2-cap-caption,
.wp-lightbox-overlay.active figcaption.c2-cap-caption {
	position: fixed;
	left: 50%;
	bottom: 12px;
	transform: translateX(-50%);
	width: min(980px, calc(100vw - 24px));
	margin: 0;
	z-index: 1000000;
}

.wp-lightbox-overlay.active ~ figcaption.c2-cap-caption .c2-cap,
.wp-lightbox-overlay.active figcaption.c2-cap-caption .c2-cap {
	background: rgba(0,0,0,.78);
	color: #fff;
	border-color: rgba(255,255,255,.22);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	box-shadow: 0 18px 40px rgba(0,0,0,.45);
}

.wp-lightbox-overlay.active ~ figcaption.c2-cap-caption .c2-cap__prefix,
.wp-lightbox-overlay.active figcaption.c2-cap-caption .c2-cap__prefix {
	display: inline;
}

/* Body in Lightbox: begrenzen + scrollen */
.wp-lightbox-overlay.active ~ figcaption.c2-cap-caption .c2-cap__body,
.wp-lightbox-overlay.active figcaption.c2-cap-caption .c2-cap__body {
	max-height: 0; /* wird per JS gesetzt */
}

/* Mobil */
@media (max-width: 600px) {
	.wp-lightbox-overlay.active ~ figcaption.c2-cap-caption,
	.wp-lightbox-overlay.active figcaption.c2-cap-caption {
		width: calc(100vw - 16px);
		bottom: 10px;
	}
}

/* Standard: nur "Details" zeigen */
.c2-cap__prefix { display: none; }

/* Lightbox: Prefix sichtbar => "Bildbeschreibung Details" */
.wp-lightbox-overlay.active .c2-cap__prefix { display: inline; }

/* Drawer in der Lightbox (unten fix) */
.wp-lightbox-overlay.active .c2-lightbox-caption-drawer {
  position: fixed;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  /*width: min(980px, calc(100vw - 24px));*/
  width: calc(100% - 24px);
  z-index: 900000009999;
  pointer-events: auto;
}

/* Drawer-Design + Up-Accordion (Body oben, Head unten) */
.wp-lightbox-overlay.active .c2-lightbox-caption-drawer .c2-cap {
  display: flex;
  flex-direction: column-reverse; /* <- klappt nach oben auf */
  /*
  background: #008c33;
  color: #fff;
  */
  border: 0px solid rgba(255,255,255,.22);
  border-radius: 0px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.wp-lightbox-overlay.active .c2-lightbox-caption-drawer .c2-cap__head {
  background: transparent;
}

.wp-lightbox-overlay.active .c2-lightbox-caption-drawer .c2-cap__body {
  /* in Lightbox: Body darf scrollen (lange Texte) */
  overflow: auto;
}

/* Mobil: volle Breite */
@media (max-width: 600px) {
  .wp-lightbox-overlay.active .c2-lightbox-caption-drawer {
    width: calc(100vw - 16px);
    bottom: 10px;
  }
}

/* =========================
   Versetztes Spaltenlayout
   ========================= */
.c2-timeline[data-stack="columns"]{
  --c2-gap: 120px;         /* Abstand zwischen den Spalten (Linie liegt in der Mitte) */
  --c2-col-offset: 120px;  /* Vertikaler Versatz der rechten Spalte */
}

/* Container für die zwei Spalten (wird via JS erzeugt) */
.c2-timeline[data-stack="columns"] .c2-timeline__cols{
  display: flex;
  gap: var(--c2-gap);
  align-items: flex-start;
}

.c2-timeline[data-stack="columns"] .c2-timeline__col{
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
}

/* rechte Spalte startet tiefer */
.c2-timeline[data-stack="columns"] .c2-timeline__col--right{
  padding-top: var(--c2-col-offset);
}

/* Items in Columns: keine odd/even justify-Regeln mehr */
.c2-timeline[data-stack="columns"] .c2-timeline__item{
  justify-content: flex-start !important;
  margin: 0 0 2.25rem;
}

/* Content: volle Spaltenbreite, keine translateX aus dem alten Alternating */
.c2-timeline[data-stack="columns"] .c2-timeline__content{
  width: 100%;
  transform: none !important;
}

/* Nähe zur Mittellinie wie bisher: links nach rechts "andocken", rechts nach links */
.c2-timeline[data-stack="columns"] .c2-timeline__item.is-left .c2-timeline__content{
  margin-right: 56px;
  margin-left: 0;
  text-align: right;
}

.c2-timeline[data-stack="columns"] .c2-timeline__item.is-right .c2-timeline__content{
  margin-left: 56px;
  margin-right: 0;
  text-align: left;
}

/* Marker in Columns: in die Mitte des Spaltengaps (also auf die rote Linie) */
.c2-timeline[data-stack="columns"] .c2-timeline__marker{
  top: 1.1rem;
}

/* Linke Spalte: Marker rechts außerhalb des Items */
.c2-timeline[data-stack="columns"] .c2-timeline__col--left .c2-timeline__marker{
  left: calc(100% + (var(--c2-gap) / 2));
  transform: translateX(-50%);
}

/* Rechte Spalte: Marker links außerhalb des Items */
.c2-timeline[data-stack="columns"] .c2-timeline__col--right .c2-timeline__marker{
  left: calc(0% - (var(--c2-gap) / 2));
  transform: translateX(-50%);
}

/* Mobil: Columns nicht erzwingen (wir lassen JS gar nicht erst umsortieren),
   aber falls jemand resizet, bleibt’s trotzdem lesbar */
@media (max-width: 700px){
  .c2-timeline[data-stack="columns"] .c2-timeline__cols{
    display: block;
    gap: 0;
  }
  .c2-timeline[data-stack="columns"] .c2-timeline__col--right{
    padding-top: 0;
  }
}

button.lightbox-trigger {
    background-color: #008c33 !important;
}

button.lightbox-trigger:hover {
    background-color: #000 !important;
}

/* Subtiler Hover-Scale (nur Desktop / Maus) */
@media (hover: hover) and (pointer: fine) {

  /* optional: damit nichts “rausläuft”, wenn das Bild skaliert */
  .wp-block-c2-image-panel figure.wp-block-image,
  .c2-timeline__content figure.wp-block-image {
    overflow: hidden;
    border-radius: 10px; /* wenn du Theme-Radius nicht überschreiben willst: rausnehmen */
  }

  .wp-block-c2-image-panel figure.wp-block-image img,
  .c2-timeline__content figure.wp-block-image img {
    transition: transform 280ms cubic-bezier(.2,.8,.2,1);
    transform-origin: center center;
    will-change: transform;
  }

  .wp-block-c2-image-panel figure.wp-block-image:hover img,
  .c2-timeline__content figure.wp-block-image:hover img {
    transform: scale(1.035);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .wp-block-c2-image-panel figure.wp-block-image img,
  .c2-timeline__content figure.wp-block-image img {
    transition: none !important;
  }
}

/* Wenn Caption in der Lightbox aufgeklappt ist: Bild-Container nach oben schieben */
.wp-lightbox-overlay.c2-cap-open .lightbox-image-container {
  top: 0 !important;
  transform: translate(-50%, 0%) !important;
}