/* CSS Custom Properties (Variablen) */
:root {
  /* Kategorie-Farben */
  --color-personen: #ff6f2c;    /* Orange für Personen */
  --color-orte: #e3ff73;        /* Neon Gelb für Orte */
  --color-projekte: #9890ff;    /* Lila für Projekte */

  /* Gradient-Variablen */
  --gradient-personen: linear-gradient(90deg, rgba(255, 111, 44, 1) 0%, rgba(255, 111, 44, 1) 50%, rgba(255, 111, 44, 0.25) 100%);
  --gradient-orte: linear-gradient(90deg, rgba(227, 255, 115, 1) 0%, rgba(227, 255, 115, 1) 50%, rgba(227, 255, 115, 0.25) 100%);
  --gradient-projekte: linear-gradient(90deg, rgba(152, 144, 255, 1) 0%, rgba(152, 144, 255, 1) 50%, rgba(152, 144, 255, 0.25) 100%);
  

  --gradient-personen:  rgba(255, 111, 44, 1);
  --gradient-orte: rgba(227, 255, 115, 1);
  --gradient-projekte:  rgba(152, 144, 255, 1);
  
  /* Interface-Farben */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-gray-light: #f5f5f5;
  --color-gray-medium: #ccc;
  --color-gray-dark: #999;
  --color-gray-darker: #bababa;
  --color-gray-darkest: #777777;
  --color-gray-text: #b9b9b9;
  --color-gray-border: #eee;
  --color-gray-hover: #f0f0f0;
  --color-gray-light-bg: #ddd;
  
  /* Dropdown/Filter-Farben */
  --color-dropdown-bg: #f8f9fa;
  --color-dropdown-border: #e9ecef;
  --color-dropdown-text: #495057;
  --color-dropdown-arrow: #6c757d;
  --color-dropdown-item-border: #dee2e6;
  
  /* Timeline-Farben */
  --color-timeline-line: #cacaca;
  --color-timeline-year: #a0a0a0;
  
  /* Slider-Farben */
  --color-slider-inactive: #B8B8B8;
}

a, a:visited{
  text-decoration-thickness: 1px;
    text-underline-offset: 0.25vw;
    color: black;
    word-break: break-all;
}
a:hover{
  text-decoration: none;
}
/* ABC Walter Fonts */
@font-face {
  font-family: "ABCWalter";
  src: url("../fonts/ABCWalterNeue-Fett.woff2") format("woff2");
  font-weight: 900;
  font-style: bold;
  font-display: swap;
}

@font-face {
  font-family: "ABCWalter Italic";
  src: url("../fonts/ABCWalterNeue-FettKursiv.woff2") format("woff2");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

/* OT Scholar Fonts */
@font-face {
  font-family: "OTScholar";
  src: url("../fonts/OTScholar-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "OTScholar Italic";
  src: url("../fonts/OTScholar-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
      -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html, body {
  font-family: "ABCWalter", sans-serif;
  font-weight: 900;
  overflow: hidden;
  background: var(--color-gray-border);
  height: 100vh;
  filter: saturate(1.1);
  /* Entferne overflow: hidden */
}
img{
    filter: saturate(1) !important;
}
em{
  font-family: "ABCWalter Italic";
  font-style: normal;
}
.event-quote-content em, .filter-content em{
  font-family: "OTScholar Italic";
  font-style: normal;
}

/* Container Layout für draggable Resize */
.container-layout {
  display: flex;
  width: 100%;
  height: calc(100vh - 2vw);
  position: relative;
  font-family: "ABCWalter", sans-serif;
  font-weight: 900;
}

/* Welcome Popup Overlay */
.welcome-overlay {
position: fixed;
    top: 0;
    left: 0;
    width: 50%;
    height: 100vh;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(0.5vw);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    z-index: 1000;
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}

.welcome-overlay.hidden {
  opacity: 0;
  visibility: hidden;
}

.welcome-content {
  text-align: center;
  color: var(--color-black);
}

.welcome-title {
  font-family: "ABCWalter", sans-serif;
  font-weight: 900;
  font-size: 5.25vw;
  line-height: 1.1 
}

.enter-btn {
  background: var(--color-black);
  color: var(--color-white);
  border: none;
  font-family: "ABCWalter", sans-serif;
  font-weight: 900;
  font-size: 1vw;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 60vw;
  padding: 0.35vw 1vw;
}

.enter-btn:hover {
  opacity: 0.5;
}

.wrapper {
  width: 50%;
  min-width: 50%;
  max-width: calc(75% + 1vw + 3px);
  background: var(--color-gray-light);
  position: relative;
  transition: width 0.3s ease;
  display: flex;
  flex-direction: column;
  height: 100vh;
  z-index: 0;
}

.wrapper.expanded {
  width: calc(75% + 1vw + 3px);
}

.medienbox {
  width: 50%;
  min-width: 25%; /* Ändere von aktuellen Wert zu 25% */
  max-width: 50%; /* Stelle sicher dass max 50% ist */
  background-color: #E4E4E0;
  border-left: 1px solid var(--color-gray-medium);
  position: relative;
  height: 100vh;
  transition: width 0.3s ease;
  overflow-x: hidden;
  border-left: 1px solid #000000;
}

.medienbox.collapsed {
  width: 25%;
}

.medienbox-content {
  height: calc(100%); /* Subtract bottom bar height */
  overflow-y: auto;
  border-left: 1px solid var(--color-black);
  padding-bottom: 3vw;
}

/* Fixed Bottom Bar in Medienbox */
.medienbox-bottom-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  background: rgba(194, 194, 188, 0.9);
  border-top: 1px solid var(--color-black);
  padding: 0.5vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 100;
  backdrop-filter: blur(0.25vw);
}
.bottom-bar-left, .bottom-bar-right {
  display: flex;
  gap: 0.5vw;
}

/* Event Details in Medienbox */
.event-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--color-black);
}

.event-header .event-title-display {
  font-size: 1.75vw !important;
  padding-left: 0.5vw;
  padding-right: 0.5vw;
  line-height: 1;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.event-category-indicator {
  background: var(--color-white);
  color: var(--color-black);
  padding: 0.85vw;
  font-family: "ABCWalter", sans-serif;
  font-weight: 900;
  font-size: 1vw;
  min-width: 5vw;
  text-align: center;
  align-self: stretch; /* Füllt die komplette Höhe des Flex-Containers */
  display: flex;
  align-items: center;
  justify-content: center;
}

.event-category-indicator.red:after {
  content: "Person";
}

.event-category-indicator.green:after {
  content: "Ort";
}

.event-category-indicator.blue:after {
  content: "Projekt";
}

.event-category-indicator.red {
  background: var(--color-personen);
}

.event-category-indicator.green {
  background: var(--color-orte);
}

.event-category-indicator.blue {
  background: var(--color-projekte);
}

.close-event-btn {
  background: none;
  border: none;
  font-size: 1.5vw;
  cursor: pointer;
  color: var(--color-gray-dark);
  padding: 0;
  width: 2.5vw;
  height: 2.5vw;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s ease;
}

.close-event-btn:hover {
  background: var(--color-gray-hover);
  color: var(--color-gray-darker);
}

/* Event Details Container */
.event-details-table {
  display: flex;
  flex-direction: column;
  font-size: 1vw !important;
}

/* Querverweise Row - OBEN nach Header */
.event-cross-references-row {
  border-bottom: 1px solid var(--color-black);
}

.event-cross-references-list {
  display: flex;
  flex-direction: row;

    flex-wrap: wrap;
  gap: 0.5vw;
    padding: 0 0.5vw 0.65vw 0.5vw;

  width: 100%;
}

.event-cross-reference-item {
  padding: 0.325vw 0.5vw;
  font-weight: 400;
  font-size: 1vw;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.event-cross-reference-item:hover {
  opacity: 0.5;
}

.event-cross-reference-item.red {
  background: var(--gradient-personen);
  color: var(--color-black);
}

.event-cross-reference-item.green {
  background: var(--gradient-orte);
  color: var(--color-black);
}

.event-cross-reference-item.blue {
  background: var(--gradient-projekte);
  color: var(--color-black);
}

/* Allgemeine Row-Struktur */
.event-row {
  display: flex;
  border-bottom: 1px solid var(--color-black);
  min-height: 2.5vw;
}

.event-label-column {
  width: 30%;
  padding: 0.5vw;
  color: var(--color-black);
  display: flex;
  align-items: flex-start;
}

.event-content-column {
  width: 70%;
  padding: 0.5vw;
  font-family: 'ABCWalter', sans;
  font-weight: 400;
  line-height: 1.1;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
}

/* Info Row */
.event-description {
  color: var(--color-black);
  width: 100%;
  line-height: 1.1 
}

/* Link Row */
.event-link-content {
  color: var(--color-gray-darker);
}

/* Themenfilter Row */
.event-themenfilter-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5vw;
  width: 100%;
}

.event-themenfilter-tag {
  background: var(--color-white);
  color: var(--color-black);
  border-radius: 25vw;
  padding: 0.5vw 1vw;
  font-family: 'OTScholar', serif;
  font-weight: 400;
}

#event-themenfilter-row, #event-quote-row, #event-images-row{
  flex-direction: column;
}


#event-themenfilter-row .event-label-column, 
#event-themenfilter-row .event-content-column, 
#event-quote-row .event-label-column,
#event-quote-row .event-content-column,
#event-images-row .event-label-column,
#event-images-row .event-content-column
{
  width: 100%;
}

#event-themenfilter-row .event-content-column, #event-quote-row .event-content-column {
  padding: 0vw 0.5vw 0.65vw 0.5vw;
}

/* Zitat Row */
.event-quote-content {
  font-family: 'OTScholar', serif;
  font-weight: 400;
  color: black;
  background: white;
  padding: 0.5vw 1vw;
  border-radius: 1.25vw;
}

.event-quote-source-column {
  padding: 0 0.5vw 0.5vw 0.5vw;
  font-size: 1vw;
  display: flex;
}
.event-quote-source-column .event-label-column {
  width: 30% !important;
   font-size: 0.7vw !important;
   padding: 0;
}

.event-quote-source-column .event-quote-source-content {
  width: 70% !important;
   font-size: 0.7vw !important;
   line-height: 1.1;
}

.event-quote-source-content a{
  word-break: break-all;
}

/* Bilder Row */
.event-images-container {
  width: 100%;
}

.event-main-image {
  width: 100%;
  height: auto;
  border-radius: 0.4vw;
}

/* Slick Slider Customization */
.event-images-slider {
  width: 100% !important;
  margin: 0;
}

.event-images-slider .slick-list {
  width: 100% !important;
  overflow: hidden;
}

.event-images-slider .slick-track {
  width: 100% !important;
  display: flex !important;
}

.event-images-slider .slick-slide {
  width: 100% !important;
  flex: 0 0 100% !important;
  max-width: 100% !important;
  display: flex !important;
  justify-content: center;
  align-items: center;
}

.event-images-slider .slick-slide > div,
.event-images-slider .slide-item {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.event-images-slider img {
  width: 100%;
  max-height: 30vw;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

.event-images-slider .slick-dots {
  bottom: -2vw;
}

/* Image Caption unter dem Slider */
.event-image-caption {
text-align: center;
    font-family: "ABCWalter", sans-serif;
    font-weight: 400;
    font-size: 0.7vw;
    color: var(--color-black);
    margin-top: 0.5vw;
    padding: 0.25vw 0;
    line-height: 1.2;
}
.slick-dotted.slick-slider {
    margin-bottom: 1.5vw;
}
.slick-dots {
  height: 2vw;
}
.slick-dots li {
    position: relative;
    display: inline-block;
    /* width: 2vw;
    height: 2vw; */
    margin: 0 0.1vw;
    padding: 0;
    cursor: pointer;
    height: unset;
    width: unset;
}

.event-images-slider .slick-dots li button:before {
    font-size: 1.25vw;
    color: black;
        line-height: 2vw;
}

.event-images-slider .slick-dots li.slick-active button:before {
}

.no-event-selected {
  text-align: center;
  color: black;
  padding: 0.5vw;
  text-align: left;
}

.utility p, .utility ol, .utility ul, .utility li,  .utility h1, .utility h2, .utility h3, .utility h4, .utility h5, .utility h6 {
  font-size: 1vw !important;
  font-weight: normal !important;
}

#no-event-selected p {
  font-size: 1.5vw;
  line-height: 1.1;
  margin-bottom: 1.5vw;
}

#no-event-selected ol, #no-event-selected ul {
  margin-bottom: 1.5vw;
    font-size: 1.5vw;
  line-height: 1.1;
}
/* About Page Images */

.about-image {
  width: 100%;
  height: auto;
  display: block;
  margin-top: 0.5vw;
}

.resizer {
    width: calc(1vw + 3px);
    background-color: rgba(154, 155, 144, 0.8);
    cursor: ew-resize;
    position: relative;
    transition: background-color 0.2s ease;
    height: 100vh;
    pointer-events: none; /* Initially disabled */
    display: flex;
    align-items: center;
    justify-content: center;
      backdrop-filter: blur(0.5vw);

}

.resizer.enabled {
    pointer-events: auto; /* Enable after welcome overlay */
}

.resizer::after {
    content: '';
    width: 1vw;
    height: 2vw;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 24"><rect x="2" y="4" width="1" height="16" fill="%23000"/><rect x="5.5" y="4" width="1" height="16" fill="%23000"/><rect x="9" y="4" width="1" height="16" fill="%23000"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.resizer:hover {
  background-color: #9a9b906e;
}

.resizer:active {
  background-color: var(--color-gray-darker);
}

.slick-initialized .slick-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
    flex-direction: column;
}
.slick-dots li.slick-active button:before {
    opacity: 1;
    color: black;
}
/* Filter Container */
#filter-container {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 2;
    display: flex;
    flex-direction: column;
    padding: 0.5vw;
}

.filter-buttons {
  display: flex;
  gap: 0.5vw;
  flex-wrap: wrap;
  width: 100%;
  justify-content: flex-start;
}

.filter-btn {
  padding: .5vw .75vw;
  border: none;
  cursor: pointer;
  font-size: 1vw;
  transition: all 0.2s ease;
  background: var(--color-white);
  color: var(--color-black);
  font-family: "ABCWalter", sans-serif;
  position: relative;
    font-family: "ABCWalter", sans-serif;
  font-weight: 900;
}
/* Alle Button */
.filter-btn[data-color="all"] {
  background: var(--color-white);
}

.filter-btn[data-color="all"].active {
  background: var(--color-black);
}

/* Kategorien mit neuen Farben */
.filter-btn.red {
  background: var(--color-personen);
  opacity: 1; /* Initially active */
}

.filter-btn.red.active {
  background: var(--color-personen);
  color: var(--color-black);
  opacity: 1; /* Full opacity when active */
}

.filter-btn.red:not(.active) {
  opacity: 0.5; /* Inactive state */
}

.filter-btn.green {
  background: var(--color-orte);
  color: var(--color-black);
  opacity: 1; /* Initially active */
}

.filter-btn.green.active {
  background: var(--color-orte);
  color: var(--color-black);
  opacity: 1; /* Full opacity when active */
}

.filter-btn.green:not(.active) {
  opacity: 0.5; /* Inactive state */
}

.filter-btn.blue {
  background: var(--color-projekte);
  color: var(--color-black);
  opacity: 1; /* Initially active */
}

.filter-btn.blue.active {
  background: var(--color-projekte);
  color: var(--color-black);
  opacity: 1; /* Full opacity when active */
}

.filter-btn.blue:not(.active) {
  opacity: 0.5; /* Inactive state */
}

/* Themenfilter */
.filter-btn[data-color="theme"] {
  background: var(--color-white);
  color: var(--color-black);
  border-radius: 25vw;
  padding: 0.5vw;
  font-family: 'OTScholar', serif;
  font-weight: 100;
}

.filter-btn[data-color="theme"].active {
  background: var(--color-black);
  color: var(--color-white);
  padding-right: 2.25vw;
}

/* Toggle Button für alle Themenfilter */
#toggle-all-themes {
  background: var(--color-white);
  color: var(--color-black);
  border-radius: 25vw;
  padding: .5vw .75vw;
  font-family: 'OTScholar', serif;
  font-weight: 100;
}

#toggle-all-themes.active {
  background: var(--color-black);
  color: var(--color-white);
  padding-right: 2vw;
}

#toggle-all-themes.active::after {
    content: "×";
    position: absolute;
    right: 0.35vw;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.25vw;
    font-weight: 100;
    color: var(--color-white);
    background: #2e2e2e;
    border-radius: 25vw;
    width: 1.5vw;
    height: 1.5vw;
    display: flex;
    -webkit-font-smoothing: antialiased;
    align-content: center;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: column-reverse;
}

/* Theme Filters Container */
#theme-filters-container {
  display: flex;
  gap: 0.5vw;
  flex-wrap: wrap;
  width: 100%;
  margin-top: 0.5vw;
}

/* Close X für aktive individuelle Themenfilter */
.filter-btn[data-color="theme"].active::after {
    content: "×";
    position: absolute;
    right: 0.35vw;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.25vw;
    font-weight: 100;
    color: var(--color-white);
    background: #2e2e2e;
    border-radius: 25vw;
    width: 1.5vw;
    height: 1.5vw;
    display: flex;
    -webkit-font-smoothing: antialiased;
    align-content: center;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: column-reverse;
}
.filter-btn:hover {
  opacity: 0.5 !important;
}

#slider-container {
  max-width: calc(100%);
  cursor: grab;
  padding: 0 0.5vw;
  position: relative;
      z-index: 7;
}

#slider-container:active {
  cursor: grabbing;
}

.timeline-wrapper {
    height: 100vh;
    flex: 1;
    z-index: 0;
    top: 0;
    overflow: hidden;
    width: 75%;
    position: fixed;
}
.timeline-bg, .timeline-fg {
    width: 75%;
    height: 100vh;
    position: fixed;
    background: var(--color-gray-light);
    flex: 1;
    z-index: 0;
    top: 0;
    overflow: hidden;
}
.timeline-fg {
    pointer-events: none !important;
    background-attachment: unset !important;
}
.timeline {
  position: absolute;
  width: 100%;
  height: 100%;
  min-height: 400px;
  cursor: grab;
  user-select: none;
  overflow-y: auto;
  overflow-x: hidden;
}

/* noUi-Slider Touch Area Handles */
.noUi-touch-area::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1vw;
    height: 2vw;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 24"><rect x="2" y="4" width="1" height="16" fill="%23000"/><rect x="5.5" y="4" width="1" height="16" fill="%23000"/><rect x="9" y="4" width="1" height="16" fill="%23000"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    pointer-events: none;
}
/* Year background sections */
.year-section-bg {
  position: fixed;
  top: 0;
  height: 100%;
  z-index: -1;
  transition: left 0.3s ease-out, width 0.3s ease-out;
}

/* Year markers at top */
.year-marker {
  position: absolute;
  top: 0;
  width: 1px;
  height: 100%;
  background: var(--color-gray-medium);
  transition: left 0.3s ease-out;
  z-index: 2;
}

/* 5-year marker wrapper - niedrigerer z-index */
.five-wrapper {
  z-index: 9999999999999;
}

.year-label-top {
  position: absolute;
  top: var(--year-label-offset, 6.25vw);
  left: 0;
  font-size: 0.65vw;
  font-weight: normal;
  padding: 0.1vw 0.3vw;
  border-radius: 1px;
  white-space: nowrap;
  margin-top: 0;
  z-index: 10000; /* Hoher z-index */
}

/* Regular year labels */
.year-label-top.regular-year {
  background: transparent;
  color: var(--color-timeline-year);
  font-size: 0.65vw;
  margin-top: 0;
  z-index: 10000;
}

/* 5-year marker labels - höchster z-index */
.year-label-top.five-year {
  color: var(--color-black);
  font-size: 0.65vw;
  margin-top: 0vw;
  position: sticky;
  z-index: 999999; /* Extrem hoher z-index - über allem */
}

.timeline-bg .year-label-top{
  display: none;
}
.timeline-fg{
  z-index: 1;
  background-color: transparent !important;
  pointer-events: none !important;
}
.timeline-fg .year-marker{
      width: 0px;
}

/* Event bars */
.event-bar-container {
  position: absolute;
  height: 2vw;
  min-height: 2vw;
  z-index: 10;
  margin-top: calc(7.5vw + var(--event-margin-top, 0vw));
  cursor: pointer;
}
.event-bar-container:hover{
  opacity: 0.5;
}

.event-bar-container:hover {
  /* transform: scale(1.05); */
  z-index: 15;
}

.event-bar-container.active {
  /* transform: scale(1.1); */
  z-index: 20;
}

.event-bar-container.active .event-bar-background {
}

.event-bar-background {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% + 1px);
  height: 100%;
  transition: all 0.3s ease-out;
}

.event-title-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0;
  opacity: 1;
  transition: all 0.3s ease-out;
  max-width: var(--dynamic-max-width, 7vw); /* Dynamische Breite oder Fallback */
  overflow: hidden;
  cursor: pointer;
  z-index: 11;
}

.event-title-wrapper:hover {
  max-width: none !important; /* Unbegrenzte Breite beim Hover - wichtig für Überschreibung */
  z-index: 12; /* Über andere Events legen */
}

.event-title {
  font-size: 1vw;
  font-weight: normal;
  white-space: nowrap;
  pointer-events: none;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: "ABCWalter", sans-serif;
  font-weight: 900;
  padding: 1vw 0.5vw 1vw 0.5vw;
}

.hide > *:not(#no-event-selected){
  display: none;
}

/* Hide/Show für Medienbox Content */
.medienbox-content.hide {
  /* Wenn .hide aktiv ist: nur About-Content anzeigen, alle Event-Details verstecken */
}

.medienbox-content.hide > *:not(#no-event-selected) {
  display: none;
}

.medienbox-content.hide #no-event-selected {
  display: block;
}

/* Verstecke About-Content wenn Events angezeigt werden */
.medienbox-content:not(.hide) #no-event-selected {
  display: none;
}

.event-title-wrapper:hover .event-title {
  overflow: visible;
  text-overflow: unset;
}

/* Color classes for backgrounds - Kategorien */
.event-bar-background.red {
  background: var(--gradient-personen);
  border-right: 1px solid var(--color-personen);
}

.event-bar-background.green {
  background: var(--gradient-orte);
  border-right: 1px solid var(--color-orte);
}

.event-bar-background.blue {
  background: var(--gradient-projekte);
  border-right: 1px solid var(--color-projekte);
}

.ereignis .event-bar-background.red, .ereignis .event-bar-background.green, .ereignis .event-bar-background.blue {
  background: unset;
  border-right: unset;
}

.ereignis .event-title-wrapper.red, .ereignis .event-title-wrapper.green, .ereignis .event-title-wrapper.blue {
  background: unset;
}

/* Color classes for title wrappers - Kategorien */
.event-title-wrapper.red {
  background: var(--gradient-personen);
}

.event-title-wrapper.green {
  background: var(--gradient-orte);
}

.event-title-wrapper.blue {
  background: var(--gradient-projekte);
}

.ereignis .event-title-wrapper.red, .ereignis .event-title-wrapper.green, .ereignis .event-title-wrapper.blue {
  max-width: none !important;
  width: auto !important;
  --dynamic-max-width: none !important;
  background-color: #ff69b4 !important;
    border-radius: 25vw;

}
.ereignis .event-title{
  font-family: 'OTScholar', serif !important;
  font-weight: normal !important;
}
.ereignis{
  width: auto !important;
  opacity: 0.5;
  border-radius: 25vw;
}
.ereignis:hover{
  opacity: 1;
}
.ereignis-line{
  z-index: -1;
  position: absolute; /* Ändere von fixed zu absolute */
}
/* Hide event years */
.event-years {
  display: none;
}

/* Vertical lines from slider to events */
.event-start-line {
  position: absolute;
  width: 1px;
  background: var(--color-timeline-line);
  z-index: 1;
  transition: left 0.3s ease-out;

  display: none;
}

/* Smooth animations for appearing/disappearing elements */
.event-bar.fade-in {
  animation: fadeIn 0.4s ease-out;
}

.event-bar.fade-out {
  animation: fadeOut 0.3s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateX(-10px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateX(10px) scale(0.95);
  }
}

/* Themenfilter Info Bereich */
.active-filters-info {
  /* background: var(--color-white);
  border-bottom: 1px solid var(--color-gray-medium);
  padding: 0; */
}

.active-filters-info h3 {
  margin: 0 0 1vw 0;
  color: var(--color-dropdown-text);
  font-size: 1.1vw;
}

.filter-dropdown {
  border-bottom: 1px solid var(--color-black);
  margin-bottom: 0;
  overflow: hidden;
}
.filter-header{
  display: flex;
    justify-content: space-between;
}
.filter-header-btn {
    padding: .5vw .75vw;
    background: var(--color-black);
    color: var(--color-white);
    cursor: pointer;
    align-items: center;
    transition: background-color 0.2s;
    border-radius: 25vw;
    font-family: 'OTScholar', serif;
    font-weight: 400;
    margin: 0.5vw;
    width: fit-content;
}

.filter-header h4 {
  margin: 0;
  font-size: 1vw;
  color: var(--color-white);
  font-family: 'OTScholar', serif;
  font-weight: 400;
}

.dropdown-arrow {
  width: 2.5vw;
  height: 2.5vw;
  background: var(--color-black);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s;
      margin: 0.5vw;
      position: relative;
      aspect-ratio: 1 / 1;
}

.dropdown-arrow::before,
.dropdown-arrow::after {
  content: '';
  position: absolute;
  width: 0.8vw;
  height: 1px;
  margin-top: 0.25vw;
  background: var(--color-white);
}

.dropdown-arrow::before {
  transform: rotate(45deg) translateX(-0.1vw);
      margin-left: -0.4vw;
}

.dropdown-arrow::after {
  transform: rotate(-45deg) translateX(0.1vw);
      margin-left: 0.4vw;
}

.dropdown-arrow.rotated::before {
  transform: rotate(-45deg) translateX(-0.1vw);
    margin-top: -0.25vw;

}

.dropdown-arrow.rotated::after {
  transform: rotate(45deg) translateX(0.1vw);
  margin-top: -0.25vw;
}

.filter-content {
  padding: 0vw 0.5vw 0.5vw 0.5vw;
  display: flex;
  flex-direction: column;
  font-family: 'OTScholar', serif;
  font-weight: 400;
}

.filter-description {
  padding-bottom: 0.25vw;
}

hr {
    border-top: 1px solid black;
    margin: 0.25vw 0;
    height: 1px;
}
  
.filter-images {
  margin-top: 1vw;
  width: 100%;
}

.filter-image {
  width: 100%;
}

.filter-image-caption {
  padding: 0vw 0 0.5vw 0;
  font-family: 'OTScholar', serif;
  font-weight: 400;
  font-size: 0.7vw;
}

.active-filters-info h3 {
    font-size: 1.75vw;
}

.dropdown-arrow {
  font-size: 0.8vw;
  color: var(--color-dropdown-arrow);
  transition: transform 0.2s;
}


.bottom-bar-right {
  display: flex;
  gap: 0.5vw;
}

.bottom-bar-btn {
  background: var(--color-black);
  color: var(--color-white);
  border: none;
  padding: 0.25vw 0.5vw;
  border-radius: 25vw;
  font-family: 'ABCWalter', sans;
  font-weight: 400;
  font-size: 0.7vw;
  cursor: pointer;
  transition: all 0.2s ease;

  padding: .35vw .75vw;
font-size: 1vw
}

.bottom-bar-btn:hover {
  opacity: 0.5;
}

.bottom-bar-btn.active {
  background: var(--color-white);
  color: var(--color-black);
}
  .expand-text:hover{
    opacity: 0.5;
  }
  .slick-dots li {
            width: 1.25vw;
    height: 0;
  }
.slick-dots li button {
    width: 2vw;
    height: 2vw;
    padding: 0.5vw !important;
}
  .slick-dots li button:before {
    width: 2vw;
    height: 2vw;
}
.slick-arrow{
  display: none !important;
}
/* Responsive - Mobile First */
@media only screen and (max-width: 768px) and (orientation: portrait) { 
  /* Debug - roten Hintergrund für Mobile */
  html, body {
  }
  .utility p, .utility ol, .utility ul, .utility li,  .utility h1, .utility h2, .utility h3, .utility h4, .utility h5, .utility h6 {
  font-size: 4.5vw !important;
  font-weight: normal !important;
}
.event-details-table {
  font-size: 4.5vw !important;
}
  .enter-btn{
    font-size: 3vw;
    padding: 1.05vw 3vw;
  }
  
  .welcome-title {
    font-size: 10.25vw;
  }

  .container-layout {
  }
  
  .active-filters-info {
    padding: 2.25vw;
  }
  
  .filter-header {
    /* padding: 1.5vw 2.25vw; */
  }
  
  .filter-content {
    padding: 2.25vw;
  }
  
  .filter-image {
    /* max-width: 24vw;
    max-height: 18vw; */
  }

  /* Event Details - 3x Werte */
  .event-header .event-title-display {
    font-size: 6vw !important;
    padding-left: 1.5vw;
    line-height: 1.1;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    padding: 0.5rem;
  }

  .event-category-indicator {
    padding: 2.55vw;
    font-size: 3vw;
    min-width: 15vw;
  }

  .event-label-column {
    padding: 1.5vw;
  }

  .event-content-column {
    padding: 1.5vw;
  }

  #event-themenfilter-row .event-content-column, 
  #event-quote-row .event-content-column {
    padding: 0vw 1.5vw 1.5vw 1.5vw;
  }

  .event-description {
    font-size: 4.5vw;
    line-height: 1.1;
  }

  .event-themenfilter-tag {
    padding: 1.5vw 3vw;
    font-size: 4.2vw;
  }

  .event-quote-content {
    padding: 1.5vw 3vw;
    font-size: 4.2vw;
  }

  .event-quote-source-column {
    padding: 0 1.5vw 1.5vw 1.5vw;
    font-size: 3vw;

    .event-label-column {
      font-size: 2.1vw !important;
    }

    .event-quote-source-content {
      font-size: 2.1vw !important;
      word-break: break-all;
    }
  }

  .event-cross-references-list {
    gap: 1.5vw;
    padding: 0 1.5vw 1.5vw 1.5vw;
  }

  .event-cross-reference-item {
    padding: 1.5vw;
    font-size: 3vw;
  }

  .event-image-caption {
    font-size: 2.1vw;
    /* margin-top: 4.5vw;
    padding: 1.5em 0; */
  }

  /* No Event Selected */
  .no-event-selected {
    padding: 1.5vw;
  }

  #no-event-selected {
    p {
      font-size: 4.5vw;
      margin-bottom: 4.5vw;
    }

    ol, ul {
      margin-bottom: 4.5vw;
      font-size: 4.5vw;
    }
  }

  .about-image {
    margin-top: 1.5vw;
  }

  /* Filter Buttons */
  .filter-btn {
    padding: 1.5vw 2.25vw;
    font-size: 3vw;
  }

  .filter-btn[data-color="theme"] {
    padding: 1.5vw;
    font-size: 3vw;

    &.active {
      padding-right: 6.75vw;
    }
  }

  #toggle-all-themes {
    padding: 1.5vw 2.25vw;
    font-size: 3vw;

    &.active {
      padding-right: 6vw;

      &::after {
        right: 1.05vw;
        font-size: 3.75vw;
        width: 4.5vw;
        height: 4.5vw;
      }
    }
  }

  #filter-container {
    padding: 1.5vw;
  }

  .filter-buttons {
    gap: 1.5vw;
  }

  #theme-filters-container {
    gap: 1.5vw;
    margin-top: 1.5vw;
  }

  /* Slider */
  #slider-container {
    padding: 0 1.5vw;
    margin-bottom: 3vw;
  }

  /* Slider: Deaktiviere Drag auf Connect-Bar für Mobile */
  #slider-range .noUi-connect {
    pointer-events: none !important;
    cursor: default !important;
  }
  
  /* Handles bleiben interaktiv */
  #slider-range .noUi-handle {
    pointer-events: auto !important;
  }

  /* Timeline */
  .timeline {
  }

  /* Timeline für Mobile - mache sie scrollbar und 100% breit */
  .timeline-wrapper {
    position: relative; /* Ändere von fixed zu relative für Mobile */
    height: auto; /* Auto-Höhe statt feste Höhe */
    margin-top: 0; /* Entferne negativen Margin */
    overflow: visible; /* Erlaube Overflow */
    width: 100% !important; /* 100% Breite für Mobile */
  }

  .timeline-bg, .timeline-fg {
    width: 100% !important; /* 100% Breite für Mobile */
  }

  .timeline {
    position: relative; /* Ändere von fixed zu relative für Mobile */
    height: auto; /* Auto-Höhe für Inhalt */
    height: 100%; /* Mindesthöhe für Scrolling */
    overflow-y: auto; /* Scrollbar aktivieren */
    overflow-x: hidden;
  }

  /* Year-Sections für Mobile wieder absolute statt fixed */
  .year-section-bg {
    position: absolute;
    height: 100%; /* Relative zur Timeline-Höhe */
  }

  .year-marker {
    position: absolute;
    height: 100%; /* Relative zur Timeline-Höhe */
  }

  .year-label-top {
    font-size: 1.95vw;
    padding: 0.3vw 0.9vw;
    padding: 0.4vw 0.4vw;
    margin-top: var(--year-label-offset, 19.5vw);
  }
  .year-label-top.five-year, .year-label-top.regular-year{
  font-size: 1.95vw;
  }
  .year-label-top.regular-year{
  display: none !important;
  }
  .event-bar-container {
    height: 6vw;
    margin-top: 40.5vw; /* Angepasst für Mobile */
  }

  .event-title {
    font-size: 3vw;
    padding: 3vw 1.5vw 3vw 1.5vw;
  }

  /* Theme Filter Info */
  .active-filters-info h3 {
    margin: 0 0 3vw 0;
    font-size: 5.25vw;
  }

  .filter-dropdown {
    margin-bottom: 0;
  }

  .filter-header h4 {
    font-size: 3vw;
  }

  .filter-header-btn {
    padding: 1.5vw 2.25vw;
    margin: 1.5vw;
  }

  .dropdown-arrow {
    width: 7.5vw;
    height: 7.5vw;
    margin: 1.5vw;
    font-size: 2.4vw;

    &::before, &::after {
      width: 2.4vw;
      margin-top: 0.75vw;
    }

    &::before {
      margin-left: -1.2vw;
    }

    &::after {
      margin-left: 1.2vw;
    }

    &.rotated {
      &::before {
        margin-top: -0.75vw;
      }

      &::after {
        margin-top: -0.75vw;
      }
    }
  }

  .filter-btn[data-color="theme"].active::after {
      width: 4.5vw;
    height: 4.5vw;
        right: 1.05vw;
    font-size: 3.75vw;
  }

  .filter-content {
    padding: 0vw 1.5vw 0 1.5vw;
  }

  .filter-description {
    padding-bottom: 0.75vw;
    font-size: 4.2vw;
  }

  hr {
    margin: 0.75vw 0;
  }

  .filter-images {
    margin-top: 3vw;
  }

  .filter-image-caption {
    padding: 0vw 0 1.5vw 0;
    font-size: 2.1vw;
  }

  /* Bottom Bar */
  .medienbox-bottom-bar {
    padding: 1.5vw;
  }

  .bottom-bar-right {
    gap: 1.5vw;
  }

  .bottom-bar-btn {
    padding: 1.05vw 2.25vw;
    font-size: 3vw;
  }

  /* Slick Dots */
  .event-images-slider .slick-dots {
    li {
      margin: 0 0.3vw;

      button:before {
        font-size: 3.75vw;
      }
    }
  }

  /* Timeline adjustments */
  .timeline-wrapper {
    margin-top: -39vw;
  }

  .medienbox-content {
    padding-bottom: 9vw;
  }
  
  /* Mobile Layout: Stack vertical */
  .container-layout {
    flex-direction: column !important;
    height: 100dvh !important;
  }
  
  .wrapper {
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
    height: 50vh !important;
    transition: none !important;

    &.expanded {
      width: 100vw !important;
      height: 50vh !important;
    }
  }
  .expand-text:hover{
    opacity: 0.5;
  }
  .medienbox {
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
    height: 50vh !important;
    border-left: none !important;
    border-top: 1px solid var(--color-gray-medium) !important;
    transition: none !important;

    &.collapsed {
      width: 100vw !important;
      height: 50vh !important;
      overflow-x: hidden !important;
    }

    &-content {
      height: calc(50vh - calc(7.5vw - 1px)) !important;
    }
    
    .event-images-slider img {
      max-height: 150vw;
    }
  }
  
  .resizer {
    display: none !important;
  }
  
  .welcome-overlay {
    width: 100% !important;
  }
      
  .event-images-slider .slick-dots li{
    margin: 1vw !important;
  }

  .slick-dots li {
    width: unset !important;
    height: unset !important;
    margin: unset !important;
  }
.event-images-container {
  margin-bottom: 5vw;

}
.event-images-slider .slick-dots {
    bottom: -6vw;
}
}