{"id":174,"date":"2026-11-01T22:32:34","date_gmt":"2026-11-01T21:32:34","guid":{"rendered":"https:\/\/wptele.teleskopeffekt.de\/?page_id=174"},"modified":"2026-11-04T01:22:43","modified_gmt":"2026-11-04T00:22:43","slug":"test-bit-archiv-2","status":"publish","type":"page","link":"https:\/\/wptele.teleskopeffekt.de\/et\/test-bit-archiv-2\/","title":{"rendered":"BIT arhiiv"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"174\" class=\"elementor elementor-174\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d225f35 e-flex e-con-boxed e-con e-parent\" data-id=\"d225f35\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-438cf5c e-flex e-con-boxed e-con e-parent\" data-id=\"438cf5c\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f2408c1 elementor-widget elementor-widget-shortcode\" data-id=\"f2408c1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"><script type=\"application\/json\" id=\"bit-archiv-daten\">[{\"id\":133,\"title\":\"2026\",\"year\":\"2026\",\"description\":\"Neugier trifft Mut #BeInnovativeToday\",\"tileImage\":{\"url\":\"https:\\\/\\\/wptele.teleskopeffekt.de\\\/wp-content\\\/uploads\\\/2026\\\/10\\\/BIT2026-253-1.jpg\",\"alt\":\"\"},\"groupImage\":{\"url\":\"https:\\\/\\\/wptele.teleskopeffekt.de\\\/wp-content\\\/uploads\\\/2026\\\/10\\\/image00043-scaled.jpeg\",\"alt\":\"\"},\"aftermovie\":\"https:\\\/\\\/www.youtube.com\\\/watch?v=PfmKfIZM0f0\",\"photos\":[{\"url\":\"https:\\\/\\\/wptele.teleskopeffekt.de\\\/wp-content\\\/uploads\\\/2026\\\/10\\\/BIT2026-12-1.jpg\",\"alt\":\"\"},{\"url\":\"https:\\\/\\\/wptele.teleskopeffekt.de\\\/wp-content\\\/uploads\\\/2026\\\/10\\\/BIT2026-106-1.jpg\",\"alt\":\"\"},{\"url\":\"https:\\\/\\\/wptele.teleskopeffekt.de\\\/wp-content\\\/uploads\\\/2026\\\/10\\\/BIT2026-253-1.jpg\",\"alt\":\"\"},{\"url\":\"https:\\\/\\\/wptele.teleskopeffekt.de\\\/wp-content\\\/uploads\\\/2026\\\/10\\\/image00043-scaled.jpeg\",\"alt\":\"\"},{\"url\":\"https:\\\/\\\/wptele.teleskopeffekt.de\\\/wp-content\\\/uploads\\\/2026\\\/10\\\/Dominik_2-1.png\",\"alt\":\"\"}],\"program1\":{\"url\":\"https:\\\/\\\/wptele.teleskopeffekt.de\\\/wp-content\\\/uploads\\\/2026\\\/10\\\/Agenda_BIT_2026-Webseite-scaled.png\",\"alt\":\"\"},\"program2\":{\"url\":\"https:\\\/\\\/wptele.teleskopeffekt.de\\\/wp-content\\\/uploads\\\/2026\\\/10\\\/Agenda_BIT_2026-Webseite-1-scaled.png\",\"alt\":\"\"}},{\"id\":154,\"title\":\"Hallo\",\"year\":\"2025\",\"description\":\"Auch wieder ein toller ag mit viel Innovation\",\"tileImage\":{\"url\":\"https:\\\/\\\/wptele.teleskopeffekt.de\\\/wp-content\\\/uploads\\\/2026\\\/10\\\/werkbankheader.jpg\",\"alt\":\"\"},\"groupImage\":{\"url\":\"https:\\\/\\\/wptele.teleskopeffekt.de\\\/wp-content\\\/uploads\\\/2026\\\/10\\\/BIT2026-253-1.jpg\",\"alt\":\"\"},\"aftermovie\":\"\",\"photos\":[{\"url\":\"https:\\\/\\\/wptele.teleskopeffekt.de\\\/wp-content\\\/uploads\\\/2026\\\/10\\\/Dominik_2-1.png\",\"alt\":\"\"}],\"program1\":null,\"program2\":null}]<\/script><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5273b92 elementor-widget elementor-widget-html\" data-id=\"5273b92\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div id=\"bit-archiv\">\r\n  <div class=\"bit-archive-top\">\r\n    <div class=\"bit-archive-inner\">\r\n      <div class=\"bit-archive-header\">\r\n        <h2>Bank Innovativ Tag<\/h2>\r\n        <p>Ideen, Begegnungen und Eindr\u00fccke aus vergangenen Veranstaltungen.<\/p>\r\n      <\/div>\r\n      <div class=\"bit-tile-wrap\">\r\n        <div class=\"bit-tiles\" id=\"bit-tiles\" aria-label=\"Jahrgang ausw\u00e4hlen\"><\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <div class=\"bit-archive-inner bit-detail-inner\">\r\n    <div id=\"bit-detail\" aria-live=\"polite\">\r\n      <p class=\"bit-empty\">Das Archiv wird geladen \u2026<\/p>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <div class=\"bit-lightbox\" id=\"bit-lightbox\" aria-hidden=\"true\">\r\n    <button type=\"button\" class=\"bit-lightbox-close\" aria-label=\"Schlie\u00dfen\">\u00d7<\/button>\r\n    <div class=\"bit-lightbox-content\"><\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<style>\r\n#bit-archiv {\r\n  --bit-blue: #132644;\r\n  --bit-cream: #EBEBE0;\r\n  --bit-lime: #DDE466;\r\n  --bit-white: #FFFFFF;\r\n  --bit-text: #132644;\r\n  --bit-eyebrow: #132644; \/* Farbe der Dachzeile (Text + Strich) *\/\r\n  color: var(--bit-text);\r\n  font-family: inherit;\r\n  width: 100%;\r\n  position: relative;\r\n}\r\n\r\n#bit-archiv *,\r\n#bit-archiv *::before,\r\n#bit-archiv *::after {\r\n  box-sizing: border-box;\r\n}\r\n\r\n\/* Full-bleed navy background; content itself stays in a centered 1200px column. *\/\r\n#bit-archiv .bit-archive-top {\r\n  position: relative;\r\n  isolation: isolate;\r\n  padding: 0 0 30px;\r\n  color: var(--bit-cream);\r\n}\r\n\r\n#bit-archiv .bit-archive-top::before {\r\n  content: \"\";\r\n  position: absolute;\r\n  z-index: -1;\r\n  top: 0;\r\n  bottom: 0;\r\n  left: 50%;\r\n  width: 100vw;\r\n  transform: translateX(-50%);\r\n  background: var(--bit-blue);\r\n}\r\n\r\n#bit-archiv .bit-archive-inner {\r\n  width: min(1200px, 100%);\r\n  margin-inline: auto;\r\n  padding-inline: 24px;\r\n}\r\n\r\n#bit-archiv .bit-archive-header {\r\n  display: block;\r\n  padding: 36px 0 28px;\r\n}\r\n\r\n#bit-archiv .bit-archive-header h2 {\r\n  margin: 0;\r\n  color: var(--bit-cream);\r\n  font-size: clamp(30px, 4vw, 48px);\r\n  font-weight: 700;\r\n  line-height: 1.05;\r\n}\r\n\r\n#bit-archiv .bit-archive-header p {\r\n  max-width: 560px;\r\n  margin: 12px 0 0;\r\n  color: var(--bit-cream);\r\n  font-size: 15px;\r\n  line-height: 1.6;\r\n}\r\n\r\n#bit-archiv .bit-tile-wrap {\r\n  padding: 0;\r\n  background: transparent;\r\n}\r\n\r\n#bit-archiv .bit-tiles {\r\n  display: flex;\r\n  gap: 16px;\r\n  overflow-x: auto;\r\n  padding: 3px 2px 8px;\r\n  scroll-snap-type: x mandatory;\r\n  scrollbar-color: var(--bit-lime) var(--bit-blue);\r\n}\r\n\r\n#bit-archiv .bit-tile {\r\n  flex: 0 0 220px;\r\n  width: 220px;\r\n  min-width: 0;\r\n  aspect-ratio: 1 \/ 1;\r\n  position: relative;\r\n  padding: 0;\r\n  border: 2px solid transparent;\r\n  border-radius: 3px;\r\n  overflow: hidden;\r\n  background: var(--bit-blue);\r\n  color: var(--bit-cream);\r\n  cursor: pointer;\r\n  text-align: left;\r\n  scroll-snap-align: start;\r\n  transition: border-color .2s, transform .2s;\r\n  display: block;\r\n}\r\n\r\n#bit-archiv .bit-tile:hover {\r\n  transform: translateY(-3px);\r\n}\r\n\r\n#bit-archiv .bit-tile:focus-visible {\r\n  outline: 3px solid var(--bit-white);\r\n  outline-offset: 3px;\r\n}\r\n\r\n#bit-archiv .bit-tile.is-active {\r\n  border-color: var(--bit-lime);\r\n}\r\n\r\n#bit-archiv .bit-tile img {\r\n  display: block;\r\n  position: absolute;\r\n  inset: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  object-fit: cover;\r\n}\r\n\r\n#bit-archiv .bit-tile::after {\r\n  content: \"\";\r\n  position: absolute;\r\n  inset: 0;\r\n  background: linear-gradient(\r\n    to bottom,\r\n    rgba(0, 0, 0, 0) 35%,\r\n    rgba(0, 0, 0, .25) 55%,\r\n    rgba(0, 0, 0, .88) 100%\r\n  );\r\n  pointer-events: none;\r\n}\r\n\r\n#bit-archiv .bit-tile-copy {\r\n  position: absolute;\r\n  z-index: 1;\r\n  left: 0;\r\n  right: 0;\r\n  bottom: 0;\r\n  padding: 12px 14px;\r\n  background: transparent;\r\n}\r\n\r\n#bit-archiv .bit-tile-year {\r\n  display: block;\r\n  color: var(--bit-cream);\r\n  font-size: 24px;\r\n  font-weight: 700;\r\n  line-height: 1.1;\r\n  margin: 0;\r\n  transition: color .2s;\r\n}\r\n\r\n#bit-archiv .bit-tile.is-active .bit-tile-year {\r\n  color: var(--bit-lime);\r\n}\r\n\r\n\/* Event details *\/\r\n#bit-archiv .bit-detail-inner {\r\n  padding-top: 28px;\r\n}\r\n\r\n#bit-archiv .bit-detail {\r\n  padding: clamp(20px, 4vw, 48px);\r\n  background: var(--bit-cream);\r\n  border-radius: 4px;\r\n}\r\n\r\n#bit-archiv .bit-detail-top {\r\n  display: grid;\r\n  grid-template-columns: minmax(0, 1.5fr) minmax(280px, .8fr);\r\n  gap: clamp(28px, 5vw, 64px);\r\n  align-items: start;\r\n}\r\n\r\n#bit-archiv .bit-description,\r\n#bit-archiv .bit-side {\r\n  min-width: 0;\r\n}\r\n\r\n#bit-archiv .bit-detail h3 {\r\n  margin: 0 0 16px;\r\n  color: var(--bit-blue);\r\n  font-size: clamp(30px, 4vw, 48px);\r\n  font-weight: 700;\r\n  line-height: 1.08;\r\n}\r\n\r\n#bit-archiv .bit-eyebrow {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 10px;\r\n  margin: 0 0 14px;\r\n  color: var(--bit-eyebrow) !important;\r\n  font-size: 13px;\r\n  font-weight: 700;\r\n  letter-spacing: .14em;\r\n  text-transform: uppercase;\r\n  line-height: 1.3;\r\n}\r\n\r\n#bit-archiv .bit-eyebrow::before {\r\n  content: \"\";\r\n  flex: 0 0 28px;\r\n  height: 3px;\r\n  background: var(--bit-eyebrow);\r\n}\r\n\r\n#bit-archiv .bit-description-text {\r\n  color: var(--bit-blue);\r\n  font-size: 16px;\r\n  line-height: 1.75;\r\n  white-space: pre-line;\r\n}\r\n\r\n\/* Programm: \u00dcberschrift \u00fcber beide Spalten, Thumbnails darunter *\/\r\n#bit-archiv .bit-programs {\r\n  display: grid;\r\n  grid-template-columns: repeat(2, minmax(0, 1fr));\r\n  gap: 16px;\r\n  align-items: start;\r\n  margin-top: 32px;\r\n  width: 100%;\r\n}\r\n\r\n#bit-archiv .bit-programs h4 {\r\n  grid-column: 1 \/ -1;\r\n  display: block;\r\n  float: none;\r\n  clear: both;\r\n  width: 100%;\r\n  margin: 0;\r\n  color: var(--bit-blue);\r\n  font-size: 22px;\r\n  font-weight: 700;\r\n}\r\n\r\n\/* Wrapper wird \"aufgel\u00f6st\", die Links sind direkt Grid-Items *\/\r\n#bit-archiv .bit-program-list {\r\n  display: contents;\r\n}\r\n\r\n#bit-archiv .bit-program-link {\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: stretch;\r\n  gap: 10px;\r\n  min-width: 0;\r\n  padding: 12px;\r\n  color: var(--bit-blue);\r\n  text-decoration: none;\r\n  border: 1px solid rgba(19, 38, 68, .2);\r\n  border-radius: 4px;\r\n  background: rgba(255, 255, 255, .35);\r\n  transition: background .2s, border-color .2s;\r\n}\r\n\r\n#bit-archiv .bit-program-link:hover {\r\n  background: var(--bit-white);\r\n  border-color: var(--bit-blue);\r\n}\r\n\r\n#bit-archiv .bit-program-link img {\r\n  display: block;\r\n  width: 100%;\r\n  height: 260px;\r\n  object-fit: contain;\r\n  object-position: center;\r\n  padding: 5px;\r\n  background: var(--bit-white);\r\n}\r\n\r\n#bit-archiv .bit-program-link span {\r\n  display: block;\r\n  font-size: 14px;\r\n  font-weight: 700;\r\n  line-height: 1.4;\r\n}\r\n\r\n#bit-archiv .bit-program-link b {\r\n  display: block;\r\n  margin-top: 5px;\r\n  font-size: 12px;\r\n  font-weight: 500;\r\n}\r\n\r\n\/* Group photo and aftermovie *\/\r\n#bit-archiv .bit-group-photo {\r\n  display: block;\r\n  width: 100%;\r\n  height: auto;\r\n  max-height: 440px;\r\n  object-fit: contain;\r\n  background: var(--bit-white);\r\n  border-radius: 3px;\r\n}\r\n\r\n#bit-archiv .bit-image-open {\r\n  display: block;\r\n  position: relative;\r\n  width: 100%;\r\n  padding: 0;\r\n  border: 0;\r\n  background: transparent;\r\n  cursor: zoom-in;\r\n  text-align: left;\r\n}\r\n\r\n#bit-archiv .bit-image-hint {\r\n  position: absolute;\r\n  right: 10px;\r\n  bottom: 10px;\r\n  padding: 7px 10px;\r\n  background: var(--bit-blue);\r\n  color: var(--bit-cream);\r\n  font-size: 12px;\r\n  opacity: 0;\r\n  transition: opacity .2s;\r\n}\r\n\r\n#bit-archiv .bit-image-open:hover .bit-image-hint,\r\n#bit-archiv .bit-image-open:focus-visible .bit-image-hint {\r\n  opacity: 1;\r\n}\r\n\r\n#bit-archiv .bit-side-label {\r\n  margin: 10px 0 24px;\r\n  color: var(--bit-blue);\r\n  font-size: 11px;\r\n  font-weight: 700;\r\n  letter-spacing: .12em;\r\n}\r\n\r\n#bit-archiv .bit-movie {\r\n  display: block;\r\n  position: relative;\r\n  overflow: hidden;\r\n  width: 100%;\r\n  min-height: 170px;\r\n  padding: 0;\r\n  border: 0;\r\n  background: var(--bit-blue);\r\n  color: var(--bit-white);\r\n  text-align: left;\r\n  text-decoration: none;\r\n  border-radius: 3px;\r\n  cursor: pointer;\r\n}\r\n\r\n#bit-archiv .bit-movie img {\r\n  position: absolute;\r\n  inset: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  object-fit: cover;\r\n  opacity: .72;\r\n  transition: transform .3s, opacity .3s;\r\n}\r\n\r\n#bit-archiv .bit-movie:hover img {\r\n  transform: scale(1.04);\r\n  opacity: .55;\r\n}\r\n\r\n#bit-archiv .bit-movie::after {\r\n  content: \"\";\r\n  position: absolute;\r\n  inset: 0;\r\n  background: linear-gradient(0deg, rgba(19,38,68,.9), transparent 90%);\r\n}\r\n\r\n#bit-archiv .bit-movie-copy {\r\n  position: absolute;\r\n  z-index: 1;\r\n  inset: auto 18px 18px;\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 12px;\r\n  color: var(--bit-white);\r\n}\r\n\r\n#bit-archiv .bit-play {\r\n  display: grid;\r\n  place-items: center;\r\n  width: 44px;\r\n  height: 44px;\r\n  flex: 0 0 44px;\r\n  border-radius: 50%;\r\n  background: var(--bit-lime);\r\n  color: var(--bit-blue);\r\n  font-size: 18px;\r\n}\r\n\r\n#bit-archiv .bit-movie-title {\r\n  font-size: 18px;\r\n  font-weight: 700;\r\n}\r\n\r\n\/* Fotogalerie: Reihen mit gleicher Bildh\u00f6he, keine L\u00fccken *\/\r\n#bit-archiv .bit-gallery {\r\n  margin-top: 40px;\r\n  padding: 12px 4px 24px;\r\n}\r\n\r\n#bit-archiv .bit-gallery-wall {\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  padding: 16px 12px 20px;\r\n}\r\n\r\n#bit-archiv .bit-photo-row {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: flex-start;\r\n  width: 100%;\r\n}\r\n\r\n#bit-archiv .bit-photo-row + .bit-photo-row {\r\n  margin-top: -8px; \/* leichte \u00dcberlappung zwischen den Reihen *\/\r\n}\r\n\r\n\/* flex-grow = Seitenverh\u00e4ltnis \u2192 alle Bilder einer Reihe gleich hoch *\/\r\n#bit-archiv .bit-photo {\r\n  position: relative;\r\n  flex: var(--ar, 1.5) 1 0px;\r\n  min-width: 0;\r\n  margin-inline: -5px; \/* leichte \u00dcberlappung nebeneinander *\/\r\n  padding: 10px;\r\n  background: var(--bit-white);\r\n  border: 1px solid rgba(19, 38, 68, .12);\r\n  border-radius: 2px;\r\n  box-shadow: 0 7px 20px rgba(19, 38, 68, .16);\r\n  \/* Einzel-Properties: Drehung, Versatz und Zoom sind unabh\u00e4ngig voneinander,\r\n     dadurch wirkt der Zoom bei jedem Foto \u2013 auch bei kaum gedrehten. *\/\r\n  rotate: var(--rot, 0deg);\r\n  translate: 0 var(--dy, 0px);\r\n  scale: 1;\r\n  transition: rotate .25s, scale .25s, box-shadow .25s;\r\n}\r\n\r\n\/* Hover: Foto dreht sich gerade, wird etwas gr\u00f6\u00dfer und r\u00fcckt in den Vordergrund *\/\r\n#bit-archiv .bit-photo {\r\n  cursor: zoom-in;\r\n}\r\n\r\n#bit-archiv .bit-photo:focus-visible {\r\n  outline: 3px solid var(--bit-blue);\r\n  outline-offset: 4px;\r\n  z-index: 5;\r\n}\r\n\r\n#bit-archiv .bit-photo:hover {\r\n  z-index: 5;\r\n  rotate: 0deg;\r\n  scale: 1.07;\r\n  box-shadow: 0 12px 28px rgba(19, 38, 68, .28);\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  #bit-archiv .bit-photo {\r\n    transition: none;\r\n  }\r\n}\r\n\r\n#bit-archiv .bit-photo img {\r\n  display: block;\r\n  width: 100%;\r\n  height: auto;\r\n}\r\n\r\n\/* Lightbox *\/\r\n#bit-archiv .bit-lightbox {\r\n  display: none;\r\n  position: fixed;\r\n  inset: 0;\r\n  z-index: 999999;\r\n  align-items: center;\r\n  justify-content: center;\r\n  padding: 60px 24px 24px;\r\n  background: rgba(10, 18, 31, .94);\r\n}\r\n\r\n#bit-archiv .bit-lightbox.is-open {\r\n  display: flex;\r\n}\r\n\r\n#bit-archiv .bit-lightbox-content {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 100%;\r\n  height: 100%;\r\n}\r\n\r\n#bit-archiv .bit-lightbox-content img {\r\n  display: block;\r\n  max-width: 100%;\r\n  max-height: 100%;\r\n  width: auto;\r\n  height: auto;\r\n  object-fit: contain;\r\n  box-shadow: 0 12px 50px rgba(0, 0, 0, .35);\r\n}\r\n\r\n#bit-archiv .bit-lightbox-content iframe {\r\n  width: min(1100px, 100%);\r\n  aspect-ratio: 16 \/ 9;\r\n  height: auto;\r\n  max-height: 85vh;\r\n  border: 0;\r\n}\r\n\r\n#bit-archiv .bit-lightbox-close {\r\n  position: absolute;\r\n  top: 14px;\r\n  right: 22px;\r\n  z-index: 2;\r\n  width: 44px;\r\n  height: 44px;\r\n  padding: 0;\r\n  border: 1px solid rgba(255,255,255,.6);\r\n  border-radius: 50%;\r\n  background: transparent;\r\n  color: white;\r\n  font-size: 32px;\r\n  line-height: 1;\r\n  cursor: pointer;\r\n}\r\n\r\n\/* Page-specific navy backdrop behind the transparent Blocksy header.\r\n   The page scope prevents changes to headers on other pages. *\/\r\nbody:has(#bit-archiv) .ct-header,\r\nbody:has(#bit-archiv) .ct-header [data-row],\r\nbody:has(#bit-archiv) .elementor-widget-shortcode:has(#bit-archiv-daten),\r\nbody:has(#bit-archiv) .elementor-widget-shortcode:has(#bit-archiv-daten) > .elementor-widget-container {\r\n  background-color: #132644 !important;\r\n}\r\n\r\n#bit-archiv .bit-empty {\r\n  padding: 24px;\r\n  color: var(--bit-blue);\r\n  background: var(--bit-cream);\r\n  border-radius: 4px;\r\n}\r\n\r\n@media (max-width: 760px) {\r\n  #bit-archiv .bit-archive-inner {\r\n    padding-inline: 18px;\r\n  }\r\n\r\n  #bit-archiv .bit-archive-header {\r\n    padding: 28px 0 22px;\r\n  }\r\n\r\n  #bit-archiv .bit-tile {\r\n    flex-basis: 165px;\r\n    width: 165px;\r\n  }\r\n\r\n  #bit-archiv .bit-tile-year {\r\n    font-size: 21px;\r\n  }\r\n\r\n  #bit-archiv .bit-detail-inner {\r\n    padding-top: 18px;\r\n  }\r\n\r\n  #bit-archiv .bit-detail {\r\n    padding: 20px;\r\n  }\r\n\r\n  #bit-archiv .bit-detail-top {\r\n    grid-template-columns: 1fr;\r\n    gap: 32px;\r\n  }\r\n\r\n  #bit-archiv .bit-programs {\r\n    grid-template-columns: 1fr;\r\n  }\r\n\r\n  #bit-archiv .bit-program-link img {\r\n    height: auto;\r\n    max-height: 360px;\r\n  }\r\n\r\n  #bit-archiv .bit-gallery {\r\n    margin-top: 28px;\r\n  }\r\n\r\n  #bit-archiv .bit-photo {\r\n    padding: 7px;\r\n  }\r\n}\r\n<\/style>\r\n\r\n<script>\r\n(function () {\r\n  const root = document.getElementById('bit-archiv');\r\n  if (!root || root.dataset.initialized === 'true') return;\r\n  root.dataset.initialized = 'true';\r\n\r\n  const dataNode = document.getElementById('bit-archiv-daten');\r\n  const tilesNode = document.getElementById('bit-tiles');\r\n  const detailNode = document.getElementById('bit-detail');\r\n\r\n  if (!dataNode) {\r\n    detailNode.innerHTML = '<p class=\"bit-empty\">Daten nicht gefunden.<\/p>';\r\n    return;\r\n  }\r\n\r\n  let events;\r\n  try {\r\n    events = JSON.parse(dataNode.textContent || '[]');\r\n  } catch (error) {\r\n    detailNode.innerHTML = '<p class=\"bit-empty\">Die Eventdaten konnten nicht gelesen werden.<\/p>';\r\n    return;\r\n  }\r\n\r\n  if (!Array.isArray(events) || !events.length) {\r\n    detailNode.innerHTML = '<p class=\"bit-empty\">Aktuell sind keine ver\u00f6ffentlichten Events im Archiv vorhanden.<\/p>';\r\n    return;\r\n  }\r\n\r\n  events.sort((a, b) => Number(b.year || 0) - Number(a.year || 0));\r\n\r\n  const mq = window.matchMedia('(max-width: 760px)');\r\n  let currentIndex = 0;\r\n\r\n  \/\/ Drehwinkel (Grad) und vertikaler Versatz (px) pro Foto \u2013 hier anpassbar\r\n  const ROT = [-2.2, 1.6, 1.8, -1.5, 2.4];\r\n  const DY  = [0, 10, -6, 8, -4];\r\n\r\n  function esc(value) {\r\n    return String(value == null ? '' : value).replace(\/[&<>\"']\/g, function (char) {\r\n      return {\r\n        '&': '&amp;',\r\n        '<': '&lt;',\r\n        '>': '&gt;',\r\n        '\"': '&quot;',\r\n        \"'\": '&#39;'\r\n      }[char];\r\n    });\r\n  }\r\n\r\n  function imageUrl(image) {\r\n    if (!image) return '';\r\n    if (typeof image === 'string') return image;\r\n    return image.url || '';\r\n  }\r\n\r\n  function imageAlt(image) {\r\n    if (!image || typeof image !== 'object') return '';\r\n    return image.alt || '';\r\n  }\r\n\r\n  function imageMarkup(image, className, fallback, loading) {\r\n    const url = imageUrl(image);\r\n    if (!url) return '';\r\n    return '<img decoding=\"async\" class=\"' + className + '\" src=\"' + esc(url) +\r\n      '\" alt=\"' + esc(imageAlt(image) || fallback || '') +\r\n      '\" loading=\"' + (loading || 'lazy') + '\">';\r\n  }\r\n\r\n  function youtubeId(url) {\r\n    if (!url) return '';\r\n    try {\r\n      const parsed = new URL(url);\r\n      if (parsed.hostname.indexOf('youtu.be') !== -1) {\r\n        return parsed.pathname.slice(1);\r\n      }\r\n      if (parsed.hostname.indexOf('youtube.com') !== -1) {\r\n        if (parsed.pathname === '\/watch') return parsed.searchParams.get('v') || '';\r\n        const parts = parsed.pathname.split('\/');\r\n        const marker = parts.findIndex(part => part === 'embed' || part === 'shorts');\r\n        if (marker >= 0) return parts[marker + 1] || '';\r\n      }\r\n    } catch (error) {}\r\n    return '';\r\n  }\r\n\r\n  function programMarkup(image, label) {\r\n    const url = imageUrl(image);\r\n    if (!url) return '';\r\n    return '<a class=\"bit-program-link\" href=\"' + esc(url) +\r\n      '\" target=\"_blank\" rel=\"noopener\">' +\r\n      imageMarkup(image, 'bit-program-thumb', label) +\r\n      '<span>' + esc(label) + '<b>Bild \u00f6ffnen<\/b><\/span><\/a>';\r\n  }\r\n\r\n  function tileMarkup(event, index) {\r\n    const image = imageUrl(event.tileImage);\r\n    return '<button type=\"button\" class=\"bit-tile\" data-index=\"' + index +\r\n      '\" aria-pressed=\"false\" aria-label=\"Bank Innovativ Tag ' + esc(event.year) + ' ausw\u00e4hlen\">' +\r\n      (image ? '<img decoding=\"async\" src=\"' + esc(image) + '\" alt=\"\" loading=\"lazy\">' : '') +\r\n      '<span class=\"bit-tile-copy\"><span class=\"bit-tile-year\">' +\r\n      esc(event.year || event.title || '') +\r\n      '<\/span><\/span><\/button>';\r\n  }\r\n\r\n  \/* ---------- Galerie ---------- *\/\r\n\r\n  \/\/ Aufteilung in Reihen: 5 \u2192 3+2, 4 \u2192 2+2, 3 \u2192 3, mobil immer 2 pro Reihe\r\n  function splitRows(n, mobile) {\r\n    if (mobile) {\r\n      const rows = [];\r\n      for (let left = n; left > 0; left -= 2) rows.push(Math.min(2, left));\r\n      return rows;\r\n    }\r\n    if (n <= 3) return [n];\r\n    return [Math.ceil(n \/ 2), Math.floor(n \/ 2)];\r\n  }\r\n\r\n  function galleryMarkup(photos, mobile) {\r\n    const counts = splitRows(photos.length, mobile);\r\n    let i = 0;\r\n    return '<section class=\"bit-gallery\"><div class=\"bit-gallery-wall\" data-h=\"' +\r\n      (mobile ? 220 : 380) + '\">' +\r\n      counts.map(function (count) {\r\n        let row = '<div class=\"bit-photo-row\">';\r\n        for (let k = 0; k < count; k++, i++) {\r\n          const p = photos[i];\r\n          const ar = (p && p.width && p.height) ? p.width \/ p.height : 1.5;\r\n          const full = imageUrl(p);\r\n          const alt = imageAlt(p) || 'Eventfoto ' + (i + 1);\r\n          row += '<div class=\"bit-photo\" role=\"button\" tabindex=\"0\"' +\r\n            ' aria-label=\"' + esc(alt) + ' vergr\u00f6\u00dfern\"' +\r\n            ' data-lightbox-image=\"' + esc(full) + '\" data-lightbox-alt=\"' + esc(alt) + '\"' +\r\n            ' style=\"--ar:' + ar.toFixed(4) +\r\n            ';--rot:' + ROT[i % 5] + 'deg;--dy:' + DY[i % 5] + 'px\">' +\r\n            imageMarkup(p, 'bit-gallery-image', 'Eventfoto ' + (i + 1), 'eager') +\r\n            '<\/div>';\r\n        }\r\n        return row + '<\/div>';\r\n      }).join('') + '<\/div><\/section>';\r\n  }\r\n\r\n  \/\/ Begrenzt die Reihenbreite, damit Bilder nicht riesig werden\r\n  function fitGallery(scope) {\r\n    const wall = scope.querySelector('.bit-gallery-wall');\r\n    if (!wall) return;\r\n    const H = Number(wall.dataset.h) || 380;\r\n    wall.querySelectorAll('.bit-photo-row').forEach(function (row) {\r\n      let sum = 0;\r\n      row.querySelectorAll('.bit-photo').forEach(function (ph) {\r\n        const ar = parseFloat(ph.style.getPropertyValue('--ar')) || 1.5;\r\n        sum += ar * H + 10; \/\/ 20px Rahmen \u2212 10px \u00dcberlappung\r\n      });\r\n      row.style.maxWidth = Math.round(sum) + 'px';\r\n    });\r\n  }\r\n\r\n  \/\/ Liest das echte Seitenverh\u00e4ltnis aus, sobald ein Bild geladen ist\r\n  function bindGallery(scope) {\r\n    scope.querySelectorAll('.bit-photo img').forEach(function (img) {\r\n      const apply = function () {\r\n        if (!img.naturalWidth || !img.naturalHeight) return;\r\n        img.closest('.bit-photo').style.setProperty('--ar', (img.naturalWidth \/ img.naturalHeight).toFixed(4));\r\n        fitGallery(scope);\r\n      };\r\n      if (img.complete) apply();\r\n      else img.addEventListener('load', apply);\r\n    });\r\n    fitGallery(scope);\r\n  }\r\n\r\n  \/* ---------- Render ---------- *\/\r\n\r\n  function render(index) {\r\n    const event = events[index];\r\n    if (!event) return;\r\n    currentIndex = index;\r\n\r\n    tilesNode.querySelectorAll('.bit-tile').forEach(function (tile) {\r\n      const active = Number(tile.dataset.index) === index;\r\n      tile.classList.toggle('is-active', active);\r\n      tile.setAttribute('aria-pressed', active ? 'true' : 'false');\r\n    });\r\n\r\n    const photos = Array.isArray(event.photos)\r\n      ? event.photos.filter(photo => imageUrl(photo))\r\n      : [];\r\n\r\n    const gallery = photos.length ? galleryMarkup(photos, mq.matches) : '';\r\n\r\n    const groupUrl = imageUrl(event.groupImage);\r\n    const groupPhoto = groupUrl\r\n      ? '<button type=\"button\" class=\"bit-image-open\" data-lightbox-image=\"' +\r\n          esc(groupUrl) + '\" data-lightbox-alt=\"' +\r\n          esc(imageAlt(event.groupImage) || 'Gruppenfoto Bank Innovativ Tag ' + event.year) +\r\n          '\" aria-label=\"Gruppenfoto vergr\u00f6\u00dfern\">' +\r\n          imageMarkup(event.groupImage, 'bit-group-photo', 'Gruppenfoto Bank Innovativ Tag ' + event.year) +\r\n          '<span class=\"bit-image-hint\">Bild vergr\u00f6\u00dfern \u2197<\/span><\/button>' +\r\n          '<p class=\"bit-side-label\">GRUPPENFOTO \u00b7 ' + esc(event.year) + '<\/p>'\r\n      : '';\r\n\r\n    const videoId = youtubeId(event.aftermovie);\r\n    const movie = videoId\r\n      ? '<button type=\"button\" class=\"bit-movie\" data-lightbox-video=\"' +\r\n          esc(videoId) + '\" aria-label=\"Aftermovie \u00f6ffnen\">' +\r\n          '<img decoding=\"async\" src=\"' + esc('https:\/\/img.youtube.com\/vi\/' + videoId + '\/hqdefault.jpg') +\r\n          '\" alt=\"\" loading=\"lazy\">' +\r\n          '<span class=\"bit-movie-copy\"><span class=\"bit-play\"><\/span>' +\r\n          '<span class=\"bit-movie-title\"><br><small>Aftermovie ansehen<\/small><\/span><\/span><\/button>'\r\n      : '';\r\n\r\n    const programs = [\r\n      programMarkup(event.program1, 'Programmplan \u00b7 Teil 1'),\r\n      programMarkup(event.program2, 'Programmplan \u00b7 Teil 2')\r\n    ].filter(Boolean);\r\n\r\n    const programSection = programs.length\r\n      ? '<section class=\"bit-programs\"><h4>Programm<\/h4><div class=\"bit-program-list\">' +\r\n        programs.join('') + '<\/div><\/section>'\r\n      : '';\r\n\r\n    detailNode.innerHTML =\r\n      '<article class=\"bit-detail\">' +\r\n        '<div class=\"bit-detail-top\">' +\r\n          '<div class=\"bit-description\">' +\r\n            '<p class=\"bit-eyebrow\">Bank Innovativ Tag ' + esc(event.year || '') + '<\/p>' +\r\n            '<h3>' + esc(event.description || event.year || event.title || 'Bank Innovativ Tag') + '<\/h3>' +\r\n            programSection +\r\n          '<\/div>' +\r\n          '<aside class=\"bit-side\">' + groupPhoto + movie + '<\/aside>' +\r\n        '<\/div>' +\r\n        gallery +\r\n      '<\/article>';\r\n\r\n    bindGallery(detailNode);\r\n\r\n    \/\/ Farbe der Dachzeile direkt am Element setzen (schl\u00e4gt Theme-\/Elementor-Regeln)\r\n    detailNode.querySelectorAll('.bit-eyebrow').forEach(function (el) {\r\n      el.style.setProperty('color', 'var(--bit-eyebrow)', 'important');\r\n    });\r\n\r\n    const url = new URL(window.location.href);\r\n    if (event.year) url.searchParams.set('jahr', event.year);\r\n    else url.searchParams.delete('jahr');\r\n    window.history.replaceState({}, '', url.toString());\r\n  }\r\n\r\n  tilesNode.innerHTML = events.map(tileMarkup).join('');\r\n\r\n  tilesNode.addEventListener('click', function (event) {\r\n    const tile = event.target.closest('.bit-tile');\r\n    if (!tile) return;\r\n    render(Number(tile.dataset.index));\r\n  });\r\n\r\n  const params = new URLSearchParams(window.location.search);\r\n  const requestedYear = params.get('jahr');\r\n  const requestedIndex = requestedYear\r\n    ? events.findIndex(event => String(event.year) === requestedYear)\r\n    : 0;\r\n\r\n  render(requestedIndex >= 0 ? requestedIndex : 0);\r\n\r\n  \/\/ Bei Wechsel zwischen Desktop und Mobil Galerie neu aufbauen\r\n  mq.addEventListener('change', function () { render(currentIndex); });\r\n\r\n  \/* ---------- Lightbox ---------- *\/\r\n\r\n  const lightbox = root.querySelector('#bit-lightbox');\r\n  const lightboxContent = lightbox.querySelector('.bit-lightbox-content');\r\n  const lightboxClose = lightbox.querySelector('.bit-lightbox-close');\r\n\r\n  function closeLightbox() {\r\n    lightbox.classList.remove('is-open');\r\n    lightbox.setAttribute('aria-hidden', 'true');\r\n    lightboxContent.innerHTML = '';\r\n    document.body.style.overflow = '';\r\n  }\r\n\r\n  function openLightbox(content) {\r\n    lightboxContent.innerHTML = content;\r\n    lightbox.classList.add('is-open');\r\n    lightbox.setAttribute('aria-hidden', 'false');\r\n    document.body.style.overflow = 'hidden';\r\n    lightboxClose.focus();\r\n  }\r\n\r\n  root.addEventListener('click', function (event) {\r\n    const imageButton = event.target.closest('[data-lightbox-image]');\r\n    const videoButton = event.target.closest('[data-lightbox-video]');\r\n\r\n    if (imageButton) {\r\n      const url = imageButton.dataset.lightboxImage;\r\n      const alt = imageButton.dataset.lightboxAlt || '';\r\n      openLightbox(\r\n        '<img decoding=\"async\" src=\"' + esc(url) + '\" alt=\"' + esc(alt) + '\">'\r\n      );\r\n      return;\r\n    }\r\n\r\n    if (videoButton) {\r\n      const id = videoButton.dataset.lightboxVideo;\r\n      openLightbox(\r\n        '<iframe src=\"https:\/\/www.youtube-nocookie.com\/embed\/' +\r\n        esc(id) +\r\n        '?autoplay=1&rel=0\" title=\"Bank Innovativ Tag Aftermovie\" ' +\r\n        'allow=\"autoplay; encrypted-media; picture-in-picture\" ' +\r\n        'allowfullscreen><\/iframe>'\r\n      );\r\n    }\r\n  });\r\n\r\n  \/\/ Tastatur: Enter\/Leertaste \u00f6ffnet das fokussierte Galeriefoto\r\n  root.addEventListener('keydown', function (event) {\r\n    if (event.key !== 'Enter' && event.key !== ' ') return;\r\n    const photo = event.target.closest('.bit-photo[data-lightbox-image]');\r\n    if (!photo) return;\r\n    event.preventDefault();\r\n    photo.click();\r\n  });\r\n\r\n  lightboxClose.addEventListener('click', closeLightbox);\r\n\r\n  lightbox.addEventListener('click', function (event) {\r\n    if (event.target === lightbox) closeLightbox();\r\n  });\r\n\r\n  document.addEventListener('keydown', function (event) {\r\n    if (event.key === 'Escape' && lightbox.classList.contains('is-open')) {\r\n      closeLightbox();\r\n    }\r\n  });\r\n\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-519eaaf e-flex e-con-boxed e-con e-parent\" data-id=\"519eaaf\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a0dd097 elementor-widget elementor-widget-html\" data-id=\"a0dd097\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\r\n<div id=\"bit-archiv\" class=\"bit-archiv\">\r\n  <div class=\"bit-loading\">Bank Innovativ Tag Archiv wird geladen \u2026<\/div>\r\n<\/div>\r\n\r\n<style>\r\n#bit-archiv {\r\n  --bit-blue: #132644;\r\n  --bit-cream: #EBEBE0;\r\n  --bit-lime: #DDE466;\r\n  --bit-white: #FFFFFF;\r\n  color: var(--bit-blue);\r\n  font-family: inherit;\r\n  width: 100%;\r\n}\r\n#bit-archiv * { box-sizing: border-box; }\r\n#bit-archiv .bit-loading { padding: 40px 0; text-align: center; }\r\n#bit-archiv .bit-selector {\r\n  display: flex;\r\n  gap: 16px;\r\n  overflow-x: auto;\r\n  padding: 8px 2px 24px;\r\n  scroll-snap-type: x mandatory;\r\n  scrollbar-width: thin;\r\n}\r\n\r\n#bit-archiv .bit-tile {\r\n  flex: 0 0 220px;\r\n  width: 220px;\r\n  min-width: 0;\r\n  aspect-ratio: 1 \/ 1;\r\n  position: relative;\r\n  padding: 0;\r\n  border: 2px solid transparent;\r\n  border-radius: 3px;\r\n  overflow: hidden;\r\n  background: var(--bit-blue);\r\n  color: var(--bit-cream);\r\n  cursor: pointer;\r\n  text-align: left;\r\n  scroll-snap-align: start;\r\n  transition: border-color .2s, transform .2s;\r\n  display: block;\r\n}\r\n\r\n#bit-archiv .bit-tile:hover {\r\n  transform: translateY(-3px);\r\n}\r\n\r\n#bit-archiv .bit-tile.is-active {\r\n  border-color: var(--bit-lime);\r\n}\r\n\r\n#bit-archiv .bit-tile img {\r\n  display: block;\r\n  position: absolute;\r\n  inset: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  object-fit: cover;\r\n}\r\n\r\n#bit-archiv .bit-tile::after {\r\n  content: \"\";\r\n  position: absolute;\r\n  inset: 0;\r\n  background: linear-gradient(\r\n    to bottom,\r\n    rgba(0, 0, 0, 0) 35%,\r\n    rgba(0, 0, 0, 0.25) 55%,\r\n    rgba(0, 0, 0, 0.88) 100%\r\n  );\r\n  pointer-events: none;\r\n}\r\n\r\n#bit-archiv .bit-tile-copy {\r\n  position: absolute;\r\n  z-index: 1;\r\n  left: 0;\r\n  right: 0;\r\n  bottom: 0;\r\n  padding: 12px 14px;\r\n  background: transparent;\r\n  text-align: left;\r\n}\r\n\r\n#bit-archiv .bit-tile-year {\r\n  display: block;\r\n  font-size: 24px;\r\n  font-weight: 700;\r\n  line-height: 1.1;\r\n  letter-spacing: .01em;\r\n  margin: 0;\r\n  color: var(--bit-cream);\r\n  transition: color .2s;\r\n}\r\n\r\n#bit-archiv .bit-tile-title {\r\n  display: none;\r\n}\r\n\r\n#bit-archiv .bit-tile.is-active .bit-tile-year {\r\n  color: var(--bit-lime);\r\n}\r\n\r\n#bit-archiv .bit-detail { margin-top: 28px; }\r\n#bit-archiv .bit-intro {\r\n  background: var(--bit-blue);\r\n  color: var(--bit-white);\r\n  padding: clamp(26px, 5vw, 60px);\r\n  border-radius: 5px;\r\n}\r\n#bit-archiv .bit-eyebrow {\r\n  text-transform: uppercase;\r\n  letter-spacing: .12em;\r\n  font-size: 12px;\r\n  font-weight: 700;\r\n  color: var(--bit-lime);\r\n  margin: 0 0 12px;\r\n}\r\n#bit-archiv .bit-intro h2 {\r\n  color: var(--bit-white);\r\n  font-size: clamp(32px, 5vw, 56px);\r\n  line-height: 1.05;\r\n  margin: 0 0 22px;\r\n}\r\n#bit-archiv .bit-description {\r\n  max-width: 820px;\r\n  font-size: 17px;\r\n  line-height: 1.7;\r\n  margin: 0;\r\n  white-space: pre-line;\r\n}\r\n#bit-archiv .bit-section { margin-top: 54px; }\r\n#bit-archiv .bit-section h3 {\r\n  color: var(--bit-blue);\r\n  font-size: clamp(24px, 3vw, 34px);\r\n  line-height: 1.2;\r\n  margin: 0 0 22px;\r\n}\r\n#bit-archiv .bit-group-photo {\r\n  display: block;\r\n  width: 100%;\r\n  max-height: 620px;\r\n  object-fit: cover;\r\n  border-radius: 4px;\r\n}\r\n#bit-archiv .bit-photo-wall {\r\n  display: grid;\r\n  grid-template-columns: 1.15fr .85fr 1fr;\r\n  grid-template-rows: 220px 260px;\r\n  gap: 14px;\r\n}\r\n#bit-archiv .bit-photo {\r\n  margin: 0;\r\n  overflow: hidden;\r\n  border-radius: 4px;\r\n  background: var(--bit-cream);\r\n}\r\n#bit-archiv .bit-photo:nth-child(1) { grid-row: span 2; }\r\n#bit-archiv .bit-photo:nth-child(2) { transform: translateY(14px); }\r\n#bit-archiv .bit-photo:nth-child(3) { grid-row: span 2; }\r\n#bit-archiv .bit-photo:nth-child(4) { transform: translateY(-8px); }\r\n#bit-archiv .bit-photo:nth-child(5) { transform: translateY(8px); }\r\n#bit-archiv .bit-photo img {\r\n  display: block;\r\n  width: 100%;\r\n  height: 100%;\r\n  min-height: 180px;\r\n  object-fit: cover;\r\n}\r\n#bit-archiv .bit-video {\r\n  position: relative;\r\n  width: 100%;\r\n  aspect-ratio: 16 \/ 9;\r\n  overflow: hidden;\r\n  background: var(--bit-blue);\r\n  border-radius: 4px;\r\n}\r\n#bit-archiv .bit-video > img,\r\n#bit-archiv .bit-video > iframe {\r\n  position: absolute;\r\n  inset: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  border: 0;\r\n  object-fit: cover;\r\n}\r\n#bit-archiv .bit-play {\r\n  position: absolute;\r\n  inset: 0;\r\n  display: grid;\r\n  place-items: center;\r\n  width: 100%;\r\n  border: 0;\r\n  background: rgba(19,38,68,.18);\r\n  cursor: pointer;\r\n}\r\n#bit-archiv .bit-play span {\r\n  display: grid;\r\n  place-items: center;\r\n  width: 76px;\r\n  height: 76px;\r\n  border-radius: 50%;\r\n  background: var(--bit-lime);\r\n  color: var(--bit-blue);\r\n  font-size: 30px;\r\n  padding-left: 4px;\r\n}\r\n#bit-archiv .bit-video-note {\r\n  font-size: 13px;\r\n  margin-top: 10px;\r\n  opacity: .8;\r\n}\r\n#bit-archiv .bit-programs {\r\n  display: grid;\r\n  grid-template-columns: repeat(2, minmax(0, 1fr));\r\n  gap: 18px;\r\n}\r\n#bit-archiv .bit-programs img {\r\n  display: block;\r\n  width: 100%;\r\n  height: auto;\r\n  border: 1px solid rgba(19,38,68,.12);\r\n  border-radius: 4px;\r\n}\r\n#bit-archiv .bit-empty {\r\n  padding: 28px;\r\n  background: var(--bit-cream);\r\n  border-radius: 4px;\r\n}\r\n#bit-archiv button:focus-visible {\r\n  outline: 3px solid var(--bit-lime);\r\n  outline-offset: 3px;\r\n}\r\n@media (max-width: 700px) {\r\n  #bit-archiv .bit-tile { flex-basis: 185px; }\r\n  #bit-archiv .bit-tile img { height: 115px; }\r\n  #bit-archiv .bit-photo-wall {\r\n    grid-template-columns: 1fr 1fr;\r\n    grid-template-rows: 200px 180px;\r\n    gap: 10px;\r\n  }\r\n  #bit-archiv .bit-photo:nth-child(n) {\r\n    grid-row: auto;\r\n    transform: none;\r\n  }\r\n  #bit-archiv .bit-photo:nth-child(1) { grid-row: span 2; }\r\n  #bit-archiv .bit-photo img { min-height: 0; }\r\n  #bit-archiv .bit-programs { grid-template-columns: 1fr; }\r\n  #bit-archiv .bit-section { margin-top: 38px; }\r\n}\r\n<\/style>\r\n\r\n<script>\r\n(function () {\r\n  const root = document.getElementById('bit-archiv');\r\n  if (!root || root.dataset.initialized === 'true') return;\r\n  root.dataset.initialized = 'true';\r\n\r\n  const dataNode = document.getElementById('bit-archiv-daten');\r\n\r\nif (!dataNode) {\r\n  root.innerHTML = '<div class=\"bit-empty\">Die Eventdaten wurden nicht gefunden.<\/div>';\r\n  return;\r\n}\r\n\r\n  let events;\r\n  try {\r\n    events = JSON.parse(dataNode.textContent || '[]');\r\n  } catch (e) {\r\n    root.innerHTML = '<div class=\"bit-empty\">Die Eventdaten konnten nicht gelesen werden.<\/div>';\r\n    return;\r\n  }\r\n\r\n  if (!Array.isArray(events) || !events.length) {\r\n    root.innerHTML = '<div class=\"bit-empty\">Aktuell sind noch keine ver\u00f6ffentlichten Events im Archiv vorhanden.<\/div>';\r\n    return;\r\n  }\r\n\r\n  const esc = (value) => String(value ?? '').replace(\/[&<>\"']\/g, ch => ({\r\n    '&':'&amp;', '<':'&lt;', '>':'&gt;', '\"':'&quot;', \"'\":'&#39;'\r\n  }[ch]));\r\n\r\n  const imageUrl = image => image && image.url ? image.url : '';\r\n  const imageAlt = image => image && image.alt ? image.alt : '';\r\n\r\n  function imageMarkup(image, className, altFallback) {\r\n    const url = imageUrl(image);\r\n    if (!url) return '';\r\n    return '<img decoding=\"async\" class=\"' + className + '\" src=\"' + esc(url) +\r\n      '\" alt=\"' + esc(imageAlt(image) || altFallback || '') +\r\n      '\" loading=\"lazy\">';\r\n  }\r\n\r\n  function youtubeId(url) {\r\n    try {\r\n      const parsed = new URL(url);\r\n      let id = '';\r\n      if (parsed.hostname.includes('youtu.be')) {\r\n        id = parsed.pathname.split('\/').filter(Boolean)[0] || '';\r\n      } else if (parsed.hostname.includes('youtube.com') ||\r\n                 parsed.hostname.includes('youtube-nocookie.com')) {\r\n        if (parsed.pathname === '\/watch') id = parsed.searchParams.get('v') || '';\r\n        else if (\/\\\/(embed|shorts|live)\\\/\/.test(parsed.pathname)) {\r\n          id = parsed.pathname.split('\/').filter(Boolean).pop() || '';\r\n        }\r\n      }\r\n      return \/^[a-zA-Z0-9_-]{11}$\/.test(id) ? id : '';\r\n    } catch (e) {\r\n      return '';\r\n    }\r\n  }\r\n\r\n  function videoMarkup(url) {\r\n    const id = youtubeId(url);\r\n    if (!id) return '';\r\n    return '<div class=\"bit-video\" data-video-id=\"' + esc(id) + '\">' +\r\n      '<img decoding=\"async\" src=\"https:\/\/i.ytimg.com\/vi\/' + esc(id) + '\/hqdefault.jpg\" alt=\"Vorschaubild des Aftermovies\" loading=\"lazy\">' +\r\n      '<button type=\"button\" class=\"bit-play\" aria-label=\"Aftermovie abspielen\"><span aria-hidden=\"true\">\u25b6<\/span><\/button>' +\r\n      '<\/div><p class=\"bit-video-note\">Beim Abspielen wird eine Verbindung zu YouTube hergestellt.<\/p>';\r\n  }\r\n\r\n  function render(index) {\r\n    const event = events[index];\r\n    if (!event) return;\r\n\r\n    const tileImage = imageUrl(event.tileImage)\r\n      ? event.tileImage\r\n      : event.groupImage;\r\n\r\n    const tiles = events.map((item, i) => {\r\n      const img = imageUrl(item.tileImage) ? item.tileImage : item.groupImage;\r\n      const picture = imageUrl(img)\r\n        ? imageMarkup(img, '', 'Bank Innovativ Tag ' + (item.year || ''))\r\n        : '';\r\n      return '<button type=\"button\" class=\"bit-tile ' + (i === index ? 'is-active' : '') +\r\n        '\" data-index=\"' + i + '\" aria-pressed=\"' + (i === index ? 'true' : 'false') + '\">' +\r\n        picture + '<span class=\"bit-tile-copy\"><span class=\"bit-tile-year\">' +\r\n        esc(item.year || '') + '<\/span><span class=\"bit-tile-title\">' +\r\n        esc(item.title || ('Bank Innovativ Tag ' + (item.year || ''))) +\r\n        '<\/span><\/span><\/button>';\r\n    }).join('');\r\n\r\n    const photos = (event.photos || []).filter(p => imageUrl(p)).slice(0, 5);\r\n    const photoWall = photos.length\r\n      ? '<div class=\"bit-photo-wall\">' + photos.map((photo, i) =>\r\n          '<figure class=\"bit-photo\">' +\r\n          imageMarkup(photo, '', 'Impression vom Bank Innovativ Tag') +\r\n          '<\/figure>'\r\n        ).join('') + '<\/div>'\r\n      : '';\r\n\r\n    const programs = [event.program1, event.program2].filter(p => imageUrl(p));\r\n    const programMarkup = programs.length\r\n      ? '<div class=\"bit-programs\">' + programs.map(p =>\r\n          imageMarkup(p, '', 'Programm\u00fcbersicht des Events')\r\n        ).join('') + '<\/div>'\r\n      : '';\r\n\r\n    const groupMarkup = imageUrl(event.groupImage)\r\n      ? imageMarkup(event.groupImage, 'bit-group-photo', 'Gruppenfoto des Bank Innovativ Tags')\r\n      : '';\r\n\r\n    const movieMarkup = event.aftermovie\r\n      ? videoMarkup(event.aftermovie)\r\n      : '';\r\n\r\n    root.innerHTML =\r\n      '<div class=\"bit-selector\" aria-label=\"Bank Innovativ Tag ausw\u00e4hlen\">' + tiles + '<\/div>' +\r\n      '<article class=\"bit-detail\">' +\r\n        '<header class=\"bit-intro\">' +\r\n          '<p class=\"bit-eyebrow\">Bank Innovativ Tag \u00b7 ' + esc(event.year || '') + '<\/p>' +\r\n          '<h2>' + esc(event.title || ('Bank Innovativ Tag ' + (event.year || ''))) + '<\/h2>' +\r\n          (event.description ? '<p class=\"bit-description\">' + esc(event.description) + '<\/p>' : '') +\r\n        '<\/header>' +\r\n        (groupMarkup ? '<section class=\"bit-section\"><h3>Gemeinsam Innovation gestalten<\/h3>' + groupMarkup + '<\/section>' : '') +\r\n        (movieMarkup ? '<section class=\"bit-section\"><h3>Der Eventfilm<\/h3>' + movieMarkup + '<\/section>' : '') +\r\n        (photoWall ? '<section class=\"bit-section\"><h3>Einblicke und Impressionen<\/h3>' + photoWall + '<\/section>' : '') +\r\n        (programMarkup ? '<section class=\"bit-section\"><h3>Das Programm<\/h3>' + programMarkup + '<\/section>' : '') +\r\n      '<\/article>';\r\n\r\n    root.querySelectorAll('.bit-tile').forEach(button => {\r\n      button.addEventListener('click', () => render(Number(button.dataset.index)));\r\n    });\r\n\r\n    root.querySelectorAll('.bit-play').forEach(button => {\r\n      button.addEventListener('click', () => {\r\n        const video = button.closest('.bit-video');\r\n        const id = video && video.dataset.videoId;\r\n        if (!id) return;\r\n\r\n        const iframe = document.createElement('iframe');\r\n        iframe.src = 'https:\/\/www.youtube-nocookie.com\/embed\/' +\r\n          encodeURIComponent(id) + '?autoplay=1&rel=0';\r\n        iframe.title = 'Bank Innovativ Tag Aftermovie';\r\n        iframe.allow = 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share';\r\n        iframe.allowFullscreen = true;\r\n        iframe.referrerPolicy = 'strict-origin-when-cross-origin';\r\n        video.replaceChildren(iframe);\r\n      });\r\n    });\r\n  }\r\n\r\n  events.sort((a, b) => Number(b.year || 0) - Number(a.year || 0));\r\n  render(0);\r\n})();\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Bank Innovativ Tag Ideen, Begegnungen und Eindr\u00fccke aus vergangenen Veranstaltungen. Das Archiv wird geladen \u2026 \u00d7 Bank Innovativ Tag Archiv wird geladen \u2026<\/p>","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-174","page","type-page","status-publish","hentry"],"blocksy_meta":{"has_hero_section":"disabled","styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":8}},"acf":[],"_links":{"self":[{"href":"https:\/\/wptele.teleskopeffekt.de\/et\/wp-json\/wp\/v2\/pages\/174","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wptele.teleskopeffekt.de\/et\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wptele.teleskopeffekt.de\/et\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wptele.teleskopeffekt.de\/et\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/wptele.teleskopeffekt.de\/et\/wp-json\/wp\/v2\/comments?post=174"}],"version-history":[{"count":26,"href":"https:\/\/wptele.teleskopeffekt.de\/et\/wp-json\/wp\/v2\/pages\/174\/revisions"}],"predecessor-version":[{"id":211,"href":"https:\/\/wptele.teleskopeffekt.de\/et\/wp-json\/wp\/v2\/pages\/174\/revisions\/211"}],"wp:attachment":[{"href":"https:\/\/wptele.teleskopeffekt.de\/et\/wp-json\/wp\/v2\/media?parent=174"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}