/* =========================================
   1) RESET & BASE STYLING
========================================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  font-family: "Helvetica Neue", "Open Sans", Arial, sans-serif; /* single consistent font */
  font-family: sans-serif;
  line-height: 1.2;
  color: #222;
  font-weight: 400;
}

button:focus,
input:focus,
select:focus,
textarea:focus,
a:focus {
  outline: none;
  /* sometimes also:
     box-shadow: none;
  */
}


/* =========================================
   2) TOGGLE LIGHT & DRAK MODE
========================================= */
:root {
  --bg-color: #fff;
  --bg-2-color: #f1f1f1;
  --bg-3-color: #ececec;
  --bg-mobile-nav-color: rgba(238, 238, 238, 0.98);
  --bg-more-color: linear-gradient(0deg, #fff 12%, hsla(0, 0%, 100%, 0) 95%);
  --text-primary: #000;
  --text-secondary: #333;
  --text-muted: #ccc;
}

body {
  background-color: var(--bg-color);
  color: var(--text-primary);
}

/* 1) Remove default margin and padding that browsers add */
html, body {
  margin: 0;
  padding: 0;
}

/* 2) Make body at least the full height of the viewport */
body {
  /* We use flex layout so the main can "push" the footer down if needed */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  position: relative;

  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}


body {
  font-family:
    "Segoe UI Variable Text", /* Win 11+ (variable thin weights) */
    "Segoe UI",               /* Win fallback (no 200 → ~300) */
    Roboto,                   /* Android/ChromeOS */
    sans-serif;               /* macOS/iOS and generic fallback */
  font-weight: 400;
  font-synthesis-weight: none;
}

body#home-page {
}

body#home-page .footer-container {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  transition: bottom 0.3s ease;
}

body#home-page .footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

/* Move footer up when cookie banner is visible (index page) - just above the banner */
body#home-page.cookie-banner-visible .footer-container {
  bottom: var(--cookie-banner-height, 80px);
}

#feed-page {
  overflow-x: hidden;
}

/* 3) Let main expand to fill leftover space between header & footer */
main {
  flex: 1;
}

.text-secondary {
  color: var(--text-secondary);
}

.text-muted {
  color: var(--text-muted);
}

.dark-mode {
  --bg-color: #000;
  --bg-2-color: #3e3e3e;
  --bg-3-color: #4b4b4b;
  --bg-mobile-nav-color: rgba(32, 32, 32, 0.98);
  --bg-more-color: linear-gradient(0deg, #000 12%, hsla(0, 0%, 100%, 0) 95%);
  --text-primary: #fff;
  --text-secondary: #999;
  --text-muted: #777;
}


/* =========================================
   2) HEADER & DESKTOP NAV
========================================= */
.header {
  background-color: var(--bg-color);
  padding: 0.5rem 1rem;
}
@media (max-width: 999px) {
  .header {
    background-color: var(--bg-color);
    padding: 0.3rem .5rem .6rem .5rem;
  }
}

/* Mobile-first approach: .desktop-nav hidden by default */
.desktop-nav {
  display: none;
  font-weight: 400;
  font-size: 14px;
}

.desktop-nav ul {
  display: flex;
  align-items: center;
  list-style: none;
  /* PERCENT-BASED spacing between items */
  gap: 3%;
}

#navi-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
}

/* Basic nav link styling */
.nav-item {
  text-decoration: none;
  color: var(--text-secondary);
  padding: 0;
}

.nav-item.active {
  border-bottom: 1px solid var(--text-secondary);
}

.desktop-nav .nav-item:hover {
  border-bottom: 1px solid var(--text-secondary);
}

.desktop-nav .nav-item.searchLink:hover {
  border-bottom: 1px solid transparent;
  color: #ababab;
}

/* "enjott" as the desktop logo (left) */
.logo {
  font-weight: 400;
  font-size: 14px;
}

/* "english" & "[Suche]" on far right */
.lang {
  margin-left: auto;
}
.search {
  margin-left: 10%; /* small gap from 'english' */
}

@media (max-width: 1059px) {
  .search {
    margin-left: 5%;
  }
}

/* =========================================
   3) MOBILE HEADER (small screens)
========================================= */
.header-mobile {
  display: flex;
  align-items: center;
  /*justify-content: center;*/
  position: relative;
  /*margin-top: 50px;*/
}

.mobile-logo {
  font-weight: 400;
  font-size: 14px;
  color: var(--text-secondary);
  text-decoration: none;
  margin-top: 9px;
  z-index: 9999;
}

/* =========================================
   4) 2-LINE HAMBURGER => "X"
========================================= */
.hamburger {
  position: absolute;
  top: 0.5rem;
  right: 0;
  width: 30px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2000; /* above .mobile-nav (999) */
}

/* For two lines (1px thick each), with a 7px total vertical space */
.hamburger-inner {
  position: relative;
  width: 25px;
  height: 10px; 
}

/* Each bar is absolutely positioned */
.hamburger-inner span {
  position: absolute;
  left: 0;
  width: 25px;
  height: 1px;
  background-color: var(--text-secondary);
  transition: 0.4s ease;
  transform-origin: center; 
}

.hamburger-inner span:nth-child(1) {
  top: 0;
}
.hamburger-inner span:nth-child(2) {
  top: 7px;
}

/* On .hamburger.active => rotate ±45deg & translateY(±4.5px). */
.hamburger.active .hamburger-inner span:nth-child(1) {
  transform: rotate(45deg) translateY(4.5px);
}
.hamburger.active .hamburger-inner span:nth-child(2) {
  transform: rotate(-45deg) translateY(-4.5px);
}

/* =========================================
   5) MOBILE NAV OVERLAY (FADE IN/OUT)
========================================= */
.mobile-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: var(--bg-mobile-nav-color);

  /* Use opacity + pointer-events for a real fade out */
  opacity: 0;
  pointer-events: none; /* can't click when hidden */
  transition: opacity 0.5s ease;
  z-index: 999;
  padding: 0.5rem;

  font-weight: 400;
  font-size: 14px;
}

/* Active => fade in with opacity 1, pointer-events enabled */
.mobile-nav.active {
  opacity: 1;
  pointer-events: auto;
}

.mobile-nav ul {
  list-style: none;
  margin-top: 3rem;
}
.mobile-nav li {
  margin: 30px 0;
}

.mobile-nav li.lang {
  font-style: italic;
}


/* =========================================
   6) CONTENT & FOOTER
========================================= */
.content {
  padding: 1rem;
  margin-top: 30px;
}
body.search-filter-active .content {
  margin-top: 130px;
}
.content::after {
  content: "";
  display: block;
  clear: both;
}
@media (max-width: 999px) {
  body.search-filter-active .content {
    margin-top: 40px;
  }
}


.footer-container {
  float: left;
  width: 100%;
  margin-top: auto; /* When content is short: stick to bottom; when content is long: stays below content */
}

#feed-page.feed-loading-active .footer-container {
  display: none;
}

.footer {
  text-align: left;
  padding: 1rem;
  background-color: var(--bg-color);
  font-size: 14px;
  position: relative;
  z-index: 1;
}
#project-page .footer {
  z-index: 0;
}


/* 4) Footer stays at the bottom if content is short, 
   and just follows the main content if the page is tall. */
footer {
  /* No special position needed */
  /* Just normal flow, but now with flex layout it ends up at the bottom
     if main content is short. */
  background-color: #eee;
  padding: 1rem;
  text-align: center;
}

.footer a {
  color: var(--text-secondary);
  margin: 0 5px;
  text-decoration: none;
}

/* =========================================
   7) MEDIA QUERY: DESKTOP (>=768px)
   (You used 1100px; keep if you prefer)
========================================= */
@media (min-width: 1000px) {
  .desktop-nav {
    display: block;
  }
  .header-mobile {
    display: none;
  }
  .mobile-nav {
    display: none; /* or keep it block, but pointer-events/opacity = 0 if not active */
  }
}


@media (max-width: 999px) {
    .content {
      margin-top: 40px;
      padding: 0 0.5rem;
  }
}


/* =========================================
   8) SEARCH
========================================= */

/* Fullscreen overlay, hidden by default with display:none */
.search-overlay {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  background: var(--bg-color);
  /* Example big padding & text style. Adjust as needed. */
  padding: 20px;
  /*font-size: 30px;*/
  
  opacity: 0;
  pointer-events: none;
  /* Fade transition */
  transition: opacity 0.5s ease;
  z-index: 9999; /* ensure on top of other content */
}

@media (max-width: 1100px) {
  .search-overlay {
    padding: 100px 20px;
  }
}

#search-overlay {
  /* allow scrolling within the overlay */
  overflow-y: auto;
  display: none; 
}

/* When "active", fade in */
.search-overlay.active {
  opacity: 0.98;
  pointer-events: auto; /* allow clicks */
  overflow-y: auto;
}

/* The text input styling */
#searchInput {
  outline: none;
  font-size: 36px;
  border: none;
  font-weight: 400;
  width: 100%;
  color: var(--text-primary);        /* text color */
  caret-color: var(--text-primary); /* blinking cursor color */
  background: var(--bg-color);
}
@media (max-width: 999px) {
  #searchInput {
    font-size: 20px;
  }
}

/* The small "x" button on top-right of the overlay */
.search-close {
  position: fixed;
  top: 6px;
  right: 12px;
  border: none;
  background: none;
  font-size: 20px;    /* bigger if you like */
  cursor: pointer;
  color: var(--text-primary);        /* text color for the x */
  outline: none;
}

/* This class hides the overflow in the body */
.body-no-scroll {
  overflow: hidden;
}

#searchResults {
  margin-top: 20px;
}

#searchResults section {
  margin: 0 0 20px 0;
}
#searchResults h1, #searchResults h2, #searchResults h3 {
  color: rgb(171, 171, 171);
  font-size: 14px;
  font-weight: 400;
  margin: 40px 0px 10px 0;
  text-transform: uppercase;
  /*border-bottom: 1px solid #999;
  padding-bottom: 10px;*/
}
#searchResults search__title, #searchResults h4 {
  font-weight: 400;
  font-size: 16px;
}
#searchResults .search__copy, #searchResults .news__copy, #searchResults .calendar__copy {
  color: #5e5e5e;
  color: rgb(153, 153, 153);
}
#searchResults ul {
  list-style: none;
  padding-left: 0;
}
#searchResults li {
  margin: 0 0 15px 0;
}
#searchResults a {
  text-decoration: none;
  color: var(--text-primary);
  font-size: 14px;
  display: block;
}
#searchResults a:hover {
  color: #1E0EFF;
  /*background: #f1f1f1;*/
}
#searchResults img {
  max-height: 400px;
  width: auto;
  display: none;
  margin-bottom: 5px;
  max-width: 100%
}

#searchResults .calendar__date {
  font-size: 14px;
  color: #5e5e5e;
}




#searchAndFilter {
  display: none; /* Hidden by default */
}

body.search-filter-active #searchAndFilter,
body#calendar-page #searchAndFilter {
  display: block; /* Show when body has active class or on calendar page */
}





/* Lightbox Modal */
.lightbox {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.lightbox-content {
display: flex;
flex-direction: column;
align-items: center;
max-width: 90%;
max-height: 90%;
}

.lightbox-item:hover {
  cursor: -webkit-zoom-in; /* Older Safari/WebKit browsers */
  cursor: -moz-zoom-in;    /* Older Firefox browsers */
  cursor: zoom-in;         /* Standard */
}

.lightbox img {
max-width: 100%;
max-height: 75vh; /* Ensures space for captions */
object-fit: contain;
}

.lightbox iframe {
width: 80vw;  /* Video takes up most of the screen */
height: 45vw; /* Maintain 16:9 aspect ratio */
max-width: 900px; /* Limits to prevent it from getting too large */
max-height: 506px; /* Keeps aspect ratio intact */
display: none; /* Hidden by default, shown only when a video is displayed */
}

.lightbox p {
max-width: 100%;
color: #fff;
text-align: center;
margin-top: 10px;
font-size: 16px;
padding: 10px;
width: 100%;
}


.lightbox .close {
  position: absolute;
  top: 20px;
  right: 40px;
  font-size: 30px;
  color: #fff;
  cursor: pointer;
  z-index: 1;
}

.lightbox .prev, .lightbox .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  color: white;
  cursor: pointer;
  padding: 10px;
  z-index: 1;
}

.lightbox .prev { left: 20px; }
.lightbox .next { right: 20px; }




.lightbox-content {
  transition: transform 0.3s ease, opacity 0.3s ease;
  will-change: transform, opacity;
}


.video-thumbnail {
position: relative;
cursor: default;
}

.video-thumbnail img {
width: 100%;
display: block;
}

.play-button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 40px;
color: white;
background: rgba(0, 0, 0, 0.6);
padding: 10px 20px;
border-radius: 50%;
cursor: default;
}








/* =========================================
  HOME
========================================= */

@media (min-width: 1000px) {
  section {
    font-size: 14px;
  }
  section a {
    color: var(--text-primary);
    text-decoration: none;
  }
  section a:hover {
    color: #666;
  }
  section img {
    width: 100%;
  }
  section p {
    margin-top: 3px;
  }
  .section p {
    padding: 10px;
  }

  .section-1 {
    width: 30%;
    max-width: 327px;
    position: absolute;
    top: 156px;
    left: 13%;
  }
  .section-2 {
    width: 40%;
    max-width: 556px;
    position: absolute;
    top: 260px;

    right: 10%;
    letter-spacing: 0;

    font-size: 20px;
  }
  .section-2 a {
    text-decoration: none;
  }
  .section-2 a p {
    text-decoration: underline;
    font-size: 14px;
    margin-top: 20px;
    padding-left: 20%;
  }

  .section-3 {
    max-width: 494px;
    max-width: 294px;
    width: 40%;
    position: absolute;
    /*top: 47%;*/
    top: 550px;
    right: 14%;
  }
  .section-4 {
    width: 30%;
    max-width: 279px;
    position: absolute;
    /*top: 70%;*/
    top: 850px;
    left: 17%;
  }
  .section-5 {
    max-width: 411px;
    width: 30%;
    position: absolute;
    /*top: 95%;*/
    top: 1200px;
    right: 14%;
  }
  .section-6 {
    max-width: 255px;
    width: 30%;
    position: absolute;
    /*top: 120%;*/
    top: 1500px;
    left: 25%;
  }
}
@media (max-width: 999px) {
  .section {
    font-size: 14px;
    margin: 80px auto;
  }
  section a {
    color: var(--text-primary);
  }
  section img {
    max-width: 100%;
  }
  section p {
    margin-top: 13x;
  }
  .section p {
    padding: 10px;
  }
  .section-1 img {
    width: 190px;
    width: 43%;
    margin-left: 6%;
  }
  .section-1 p {
    max-width: 270px;
    margin-left: 5%;
  }
  .section-2 {
    /*display: none;*/
    max-width: 280px;
  }
  .section-2 a {
    text-decoration: none;
  }
  .section-2 a p {
    text-decoration: underline;

    }
  .section-3 img {
    max-width: 280px;
    width: 40%;
    margin-left: 20%;
  }
  .section-3 p {
    max-width: 320px;
    margin-left: 18%;
  }
  .section-4 img {
    min-width: 190px;
    width: 45%;
    margin-left: 36%;
  }
  .section-4 p {
    max-width: 260px;
    margin-left: 33%;
  }
  .section-5 img {
    min-width: 260px;
    width: 70%;
    margin-left: 3%;
  }
  .section-5 p {
    max-width: 290px;
    margin-left: 2%;
  }
  .section-6 img {
    min-width: 180px;
    width: 45%;
    margin-left: 20%;
  }
  .section-6 p {
    margin-left: 20%    }

}







/* =========================================
  SELECTED WORKS
========================================= */

#selected-works-page .selected-works-top-section {
  opacity: 0;
}

#selected-works-page .selected-works-top-section.is-ready {
  opacity: 1;
  transition: opacity 0.2s ease;
}

@media (min-width: 1000px) {

  .selected-works-top-section {
position: relative;
min-height: 850px; /* Reserve space to prevent jump when images load */
/* We'll set the height via JS */
/*border: 1px solid #ccc; /* just to see the container boundary */
}

.selected-works-abs-item {
position: absolute;
}


.selected-works-image-container {
  transition: opacity 0.3s ease;
}


/* Example positions (yours may differ) */
.selected-works-list-container {
top: 100px;
left: 5%;
max-width: 25%;
}

.selected-works-img-1 {
top: 104px;
right: 32%;
max-width: 329px;
}
.selected-works-img-2 {
top: 270px;
right: 8%;
max-width: 211px;
}
.selected-works-img-3 {
top: 555px;
right: 16%;
max-width: 175px;
}


  .selected-works-list-container ul {
    list-style: none;
    font-size: 14px;
  }

  .selected-works-list-container ul li {
    margin: 30px auto;
    font-weight: 500;
    transition: background 0.2s ease;
  }

  .selected-works-list-container ul li a {
    display: block;
    color: var(--text-primary);
  }

  .selected-works-list-container ul li:hover {
    background: #f1f1f1;
  }

  .selected-works-list-container ul li a:hover,
  .selected-works-list-container ul li:hover a {
    color: var(--text-primary) !important;
  }



  .selected-works-top-section a,
  .selected-works-categories a {
    color: var(--text-primary);
    text-decoration: none;
  }
  .selected-works-top-section:hover,
  .selected-works-categories a:hover {
    color: #666;
  }



  .selected-works-divider {
    margin: 0px auto 60px auto;
    border: 0;
    border-top: 1px solid #ccc;
  }

  .selected-works-categories {
    font-size: 14px;

    display: flex;
flex-wrap: wrap;
  }
  .selected-works-categories h2 {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    /*margin-bottom: 15px;*/
  }
  .selected-works-categories a {
    text-decoration: none;
    max-width: 23.33333333333%;
    display: block;
    /*float: left;*/
    margin: 40px 5%;
  }
.selected-works-categories span {
    text-decoration: underline;
  }
  .selected-works-categories span {
    margin-top: 5px;
    display: block;
  }

}



@media (max-width: 999px) {

  .selected-works-top-section {
position: relative;
display: grid;
min-height: 750px; /* Reserve space to prevent jump when images load */
/* We'll set the height via JS */
/*border: 1px solid #ccc; /* just to see the container boundary */
}



/* Example positions (yours may differ) */
.selected-works-list-container {


order: 2;
margin-top: 50px;
}

.selected-works-image-container {
    position: relative;
    /*border: 1px solid #aaa; /* Just for visualization */
order: 1;
  }

.selected-works-img-1 {
top: 54px;
left: 0;
max-width: 48%;
position: absolute;
}
.selected-works-img-2 {
top: 110px;
left: 60%;
max-width: 38%;
position: absolute;
}
.selected-works-img-3 {
top: 320px;
left: 54%;
max-width: 26%;
position: absolute;
}


  .selected-works-list-container ul {
    list-style: none;
    font-size: 14px;
  }

  .selected-works-list-container ul li {
    margin: 30px auto;
  }



  .selected-works-top-section a,
  .selected-works-categories a {
    color: var(--text-primary);
    text-decoration: none;
  }
  .selected-works-top-section:hover,
  .selected-works-categories a:hover {
    color: #666;
  }



  .selected-works-divider {
    margin: 60px auto 60px auto;
    border: 0;
    border-top: 1px solid #ccc;
  }

  .selected-works-categories {
    font-size: 14px;

    display: flex;
flex-wrap: wrap;



  }
  .selected-works-categories h2 {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 5px;
  }
  .selected-works-categories a {
    text-decoration: none;
    margin: 20px auto;
  }
.selected-works-categories span {
    text-decoration: underline;
  }
  .selected-works-categories span {
    margin-top: 5px;
    display: block;
  }

}












/* =========================================
  WERKVERZEICHNIS
========================================= */

@media (min-width: 1000px) {

    #searchAndFilter {
      position: fixed;
      top: 0px;
      left: 15px;
      right: 15px;
      margin-bottom: 20px;
      background: none;
      padding-bottom: 0px;
      z-index: 1;
    }

    #searchBuffer {
      background: var(--bg-color);
      padding-top: 50px;
    }

    #filterContainer {
      background: var(--bg-color);
      padding-top: 10px;
    }
  }

#searchContainer {
  
/* top: 17px; */
border-bottom: 1px solid #ccc;
background-color: var(--bg-color);
box-sizing: border-box;
/* border-radius: 8px; */
z-index: 1;
display: flex;
align-items: center;
/*max-width: 800px;*/
}

#searchInput2 {
  width: calc(100% - 25px);
padding: 10px 10px 10px 10px;
padding: 10px 0;
font-size: 14px;
box-sizing: border-box;
border: none;
outline: none;
/* border-radius: 8px; */
position: relative;
background: var(--bg-color);
color: var(--text-primary);
}

#clearButton {
position: absolute;
right: 10px;
top: 20px;
transform: translateY(-50%);
background: none;
border: none;
font-size: 16px;
cursor: pointer;
display: none;
}

#filterContainer select {
  border: none;
  background: var(--bg-color);
  appearance: none; /* or initial, if desired */
  font-size: 13px;
  text-transform: uppercase;
  width: auto;           /* allow the JS to override as needed */
  display: inline-block; /* so auto width can shrink/expand */
  /* any padding or outline you want */
}



/******************************************************
 * Container for each custom "auto size" select
 ******************************************************/
 .auto-size-select {
  display: inline-block;
  position: relative;
  margin-right: 5px; /* spacing between the four selects */
  margin-right: 0; /* spacing between the four selects */
  font-family: sans-serif;
  font-size: 14px;
  margin-bottom: 8px;
}

/**********************************************************************
 * The "fakeLabel" text that user sees
 * auto-sizes to the length of the selected text
 **********************************************************************/
.auto-size-select .fakeLabel {
  display: inline-block; 
  position: relative;
  z-index: 1;
  pointer-events: none; /* clicks pass through to the <select> behind it */
  padding: 4px 10px 2px 10px;
  padding: 4px 0px 2px 0px;
  margin-right: 20px;
  margin-right: 0;
  /*border: 1px solid #ccc;*/
  background: var(--bg-3-color);
  background: #fff;
  white-space: nowrap; 
  /*text-transform: uppercase;*/
  font-size: 13px;
  letter-spacing: 0;
  background-color: #f1f1f1;
  padding: 5px;
}

/* When the user picks a value != "alle", we'll add 'selected' class. */
.auto-size-select .fakeLabel.selected {
  /* Example style for demonstration: green text + thicker border */
  text-decoration: underline;
  /*background: #f5f5;*/
  /*background-color: var(--bg-3-color);*/
}

/*************************************************************************************
 * The real <select>
 * absolutely positioned, fully transparent so the .fakeLabel text remains visible
 *************************************************************************************/
.auto-size-select select {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none; /* Or keep a border if you want a double border look */
  background: transparent;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  /* Hide text color so only .fakeLabel text is visible */
  color: transparent;
  text-shadow: 0 0 0 transparent;

  /* Remove focus outlines (mind accessibility) */
  outline: none;
}

.auto-size-select select:focus {
  outline: none;
  box-shadow: none;
}


#filterContainer select:focus {
  outline: none;
  box-shadow: none;
}

#filterContainer select:-moz-focusring,
#filterContainer select:-moz-focusring:focus {
  outline: none;
}

#filterContainer select::-moz-focus-inner {
  border: 0;
}

#filterContainer select:focus {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}



    .werkverzeichnis section {
      margin-bottom: 40px;
    }
    .werkverzeichnis h2 {
      color: #000;
      font-size: 14px;
      font-weight: 700;
    }
    .werkverzeichnis ul {
      list-style: none;
      padding-left: 0;
    }
    .werkverzeichnis li {
      margin: 2px 0;
    }
    .werkverzeichnis li a {
      text-decoration: none;
      color: #666;
      color: var(--text-primary);
      font-size: 14px;
      display: block;
    }
    .werkverzeichnis li:hover {
      /*color: #1E0EFF;
      color: #666;*/
      background: #f1f1f1;;
    }

    @media (max-width: 899px) {

      #searchAndFilter {
        margin-bottom: 20px;
      }
      .werkverzeichnis li {
        margin: 5px 0;
      }
    }









/* =========================================
  ABOUT
========================================= */
#about-page .contact-link a,
#about-page .pressekit-link a {
  color: var(--text-primary);
  text-decoration: none;
  border-bottom: 1px dotted var(--text-primary);
}

#about-page .contact-link a:hover,
#about-page .pressekit-link a:hover {
  color: #1E0EFF;
  border-bottom-color: #1E0EFF;
}


    @media (min-width: 900px) {
      
      .about-cover {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
      }
      
      .about-section {
        display: flex;
        margin-top: 60px;
        font-size: 14px;
      }
      .about-headline {
        margin-left: 10%;
      }
      .about-info {
        margin-left: 35%;
        width: 40%;
      }

      .about-info p {
        margin-bottom: 20px;
      }


    }

    @media (max-width: 899px) {
      
      .about-section {
        margin-top: 20px;
      }
      
      .about-cover {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
      }
      
      .about {
        margin-top: 20px;
        font-size: 14px;
      }
      .about-headline {
        display: none;
      }
      .about-info {
      }

      .about-info p {
        margin-bottom: 20px;
      }


  }

  .about-headline h1 {
    /*font-weight: 400;
    font-size: 14px;*/
  }


  .slideshow-container {
    position: relative;
    overflow: hidden;
    min-height: 50vh;
  }

  .slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    pointer-events: none; /* ensure the container receives clicks */
    object-fit: cover;
    object-position: center;
  }

  .slide.active {
    opacity: 1;
    z-index: 1;
    pointer-events: auto;
  }

  /* Your original about-cover styling, if needed */
  .about-cover {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
  }




/* =========================================
  PUBLICATIONS
========================================= */

    /* Basic styling for the accordion */
    .publications-list #accordion-list {
      list-style: none;
      padding: 0;
      margin: 0;
      font-size: 14px;
    }
    .publications-list .item {
      background-color: var(--bg-color);
      transition: background-color 2s ease;
    }
    .publications-list .item.active {

      margin: 20px 0;
    }
    .publications-list .item.active h4  {
      font-weight: 700;
      font-size: 20px;

    }

    /* Extended blink animation */
    .publications-list .item.blink {
      animation: blinkBackground 2s ease-out;
    }
    @keyframes blinkBackground {
      0%   { background-color: var(--text-primary) }  /* light yellow */
      100%  { background-color: var(--bg-1-color) }   /* active background */
    }


    .publications-list .accordion-header {
      cursor: pointer;
    }
    .publications-list .accordion-content {
      display: none;
      color: var(--text-secondary);
      font-size: 14px;
    }
    

    .publications-list .accordion-header {
      color: var(--text-primary);
    }
    .publications-list .accordion-header:hover {
      color: #666;
      background: #f1f1f1;
    }
    .publications-list .active .accordion-header:hover {
      color: var(--text-primary)
    }


    /* Hide image container by default; only show if parent .item is active */
    .publication-image {
      display: none;
      text-align: text;
      margin-bottom: 7px;
    }
    .item.active .publication-image {
      display: block;
    }
    .publication-image {
      max-width: 400px;
      width: 100%;
      height: auto;
    }

    
  .publications-list {
    line-height: 1.2;
  }

  .publications-list h2 {
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 400;
  }
  .publications-list ul {
    list-style: none;
    padding-left: 0;
  }
  .publications-list li {
    margin: 0 0;
    margin: 2px auto;
  }
  .publications-list a {
    text-decoration: none;
    color: #000;
    color: rgb(166, 166, 166);
    color: rgb(130, 130, 130);
    font-size: 14px;
    cursor: default;
  }


  .publications-list h4 {
    font-weight: 400;
    font-size: 14px;
    /* font-size: 14px; */
    
  }



.publications-info a {
  text-decoration: underline;
  cursor: pointer;
}


 /* Styling for the video intro */
 #publicationsVideoContainer {
  position: fixed;
  top: 80px;
  left: 30px;
  width: 80%;
  text-align: center;
  margin-bottom: 20px;
}
#publicationsVideoContainer video {
  max-width: 100%;
  height: auto;
}

  .publications-intro {
    font-size: 14px;
    margin-bottom: 20px;
  }
  .publications-intro h1 {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 3px;
  }

  .publications-intro a {
    color: var(--text-primary);
    /*border-bottom: 1px dotted var(--text-primary);
    text-decoration: none;*/
    font-weight: 400;
    text-decoration: none;
    color: rgb(0, 29, 166);
  }


  @media (max-width: 899px) {
    .publications-intro {
      font-size: 14px;
    }
  }




/* =========================================
  FOTOS
========================================= */
#photos-page .img-1 {
  max-width: 70%; margin-left: 2%; margin-top: 100px
}
#photos-page .img-2 {
  max-width: 40%; margin-left: 20%; margin-top: 15%
}
#photos-page .img-3 {
  max-width: 90%; margin-left: 5%; margin-top: 15%
}
#photos-page .img-4 {
  max-width: 60%; margin-left: 30%; margin-top: 15%;
}
#photos-page .img-5 {
  max-width: 80%; margin-left: 7%; margin-top: 15%;
}
#photos-page .img-6 {
  max-width: 70%; margin-left: 20%; margin-top: 15%
}
#photos-page .img-7 {
  max-width: 78%; margin-left: 11%; margin-top: 15%;
}
#photos-page .img-8 {
  max-width: 90%; margin-left: 5%; margin-top: 15%; margin-bottom: 15%
}
#photos-page .img-9 {
  max-width: 70%; margin-left: 20%; margin-top: 15%; margin-bottom: 15%;
}
#photos-page .img-10 {
  max-width: 40%; margin-left: 20%; margin-top: 15%; margin-bottom: 15%;
}
#photos-page .img-11 {
  max-width: 90%; margin-left: 5%; margin-top: 15%; margin-bottom: 15%;
}
#photos-page .img-12 {
  max-width: 60%; margin-left: 30%; margin-top: 15%; margin-bottom: 15%;
}
#photos-page .img-13 {
  max-width: 80%; margin-left: 7%; margin-top: 15%; margin-bottom: 15%;
}
#photos-page .img-14 {
  max-width: 70%; margin-left: 20%; margin-top: 15%; margin-bottom: 15%;
}
#photos-page .img-15 {
  max-width: 78%; margin-left: 11%; margin-top: 15%; margin-bottom: 15%;
}
#photos-page .img-16 {
  max-width: 90%; margin-left: 5%; margin-top: 15%; margin-bottom: 15%;
}
#photos-page .img-17 {
  max-width: 70%; margin-left: 2%; margin-top: 15%; margin-bottom: 15%;
}
#photos-page .img-18 {
  max-width: 40%; margin-left: 20%; margin-top: 15%; margin-bottom: 15%;
}
#photos-page .img-19 {
  max-width: 90%; margin-left: 5%; margin-top: 15%; margin-bottom: 15%;
}
#photos-page .img-20 {
  max-width: 60%; margin-left: 30%; margin-top: 15%; margin-bottom: 15%;
}
#photos-page .img-21 {
  max-width: 80%; margin-left: 7%; margin-top: 15%; margin-bottom: 15%;
}



  #photos-page .grid {
    text-align: center;
  }

  #photos-page .grid-item {
      line-height: 0;
  }
  #photos-page .grid-item figcaption {
      line-height: 1.4;
      font-size: 14px;
      -webkit-font-smoothing: antialiased;
      letter-spacing: .2px;
      color: #666;
      text-align: left;
      margin-top: 10px;
  }

  #photos-page .grid-item img {
  width: 100%;
  max-width: 100%;
  max-height: calc(100vh - 120px);
  object-fit: contain;
  object-position: left top;
}


#photos-page .grid-item {
  opacity: 0;
}

#photos-page .grid-item.visible {
  animation: photosFadeIn 1.5s ease-out forwards;
}

@keyframes photosFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}






#photos-page .video-container {
position: relative;
max-width: 1140px;
width: 100%;
margin: 0 auto;
}

#photos-page .video-container iframe {
width: 100%;
height: auto;
aspect-ratio: 16 / 9; /* Ensures proper aspect ratio */
}

/* Mobile: larger images, esp. portrait - override small max-widths */
@media (max-width: 599px) {
  #photos-page .img-1,
  #photos-page .img-2,
  #photos-page .img-3,
  #photos-page .img-4,
  #photos-page .img-5,
  #photos-page .img-6,
  #photos-page .img-7,
  #photos-page .img-8,
  #photos-page .img-9,
  #photos-page .img-10,
  #photos-page .img-11,
  #photos-page .img-12,
  #photos-page .img-13,
  #photos-page .img-14,
  #photos-page .img-15,
  #photos-page .img-16,
  #photos-page .img-17,
  #photos-page .img-18,
  #photos-page .img-19,
  #photos-page .img-20,
  #photos-page .img-21 {
    max-width: 95%;
    margin-left: 2.5%;
  }
  #photos-page .img-1 {
    margin-top: 60px;
  }
}






/* =========================================
  KALENDER
========================================= */

/* Filter above the ul, in normal flow (not fixed), aligned with section/ul */
body#calendar-page #searchAndFilter {
  position: static;
  margin-bottom: 20px;
  max-width: 100%;
  width: 100%;
}
body#calendar-page #filterContainer {
  width: 100%;
  margin-top: 0;
  padding-top: 0;
}
body#calendar-page .auto-size-select {
  width: 100%;
}
body#calendar-page .auto-size-select .fakeLabel {
  width: 100%;
  padding: 10px 10px 8px 10px;
}
body#calendar-page #selectYear,
body#calendar-page #filterContainer select {
  width: 100%;
}
body#calendar-page #searchBuffer {
  display: none;
}

.calendar-list {
  line-height: 1.2;
}

.calendar-list h2 {
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 400;
}
.calendar-list ul {
  list-style: none;
  padding-left: 0;
}
.calendar-list li {
  margin: 0 0;
  margin: 0 auto 30px auto;
}
.calendar-list a {
  text-decoration: none;
  
  color: rgb(166, 166, 166);
  color: rgb(130, 130, 130);
  color: var(--text-secondary);
  color: rgb(124, 124, 124);
  color: #000;
  font-size: 14px;
  cursor: default;
}
.calendar-list a:hover {
 
}

.calendar-list h4 {
  font-weight: 700;
  font-size: 14px;
  /* font-size: 14px; */
  color: #000;
  color: var(--text-primary);
  margin-top: 5px;

  font-weight: 700;
font-size: 18px;
color: var(--text-primary);
margin-top: 5px;

}

.calendar-list p {
  display: inline;
}

.calendar-list .calendar__time {
  display: none;
}

.calendar__date {
  font-size: 16px;
}

video {
  width: 100%;
}

.p-calendar section p {
  margin-top: 0;
}
.p-calendar section p strong {
  font-weight: normal;
}

@media (min-width: 1000px) {







  .calendar-list section, .publications-list section {
    margin-bottom: 40px;
    max-width: 500px;
    max-width: 40%;
    margin-left: 55%;
  }

  body#calendar-page #searchAndFilter {
    margin-left: 55%;
    max-width: 40%;
  }

  .calendar-posters, .publications-posters {
    width: 50%;
    position: fixed;
  }
  .calendar-posters a {
  }
  .calendar-posters img {
    width: 100%;
    margin-bottom: 30px;
  }
  .publications-posters img {
    max-width: 100%;
    margin-bottom: 30px;
  }
  .calendar-posters a img:first-of-type {
    
  }
}

@media (min-width: 600px) and (max-width: 999px) {



  .calendar-list section, .publications-list section {
    margin-bottom: 40px;
    max-width: 500px;
    margin-left: 40%;
  }

  body#calendar-page #searchAndFilter {
    margin-left: 40%;
    max-width: min(500px, 60%);
  }

  .calendar-posters, .publications-posters {
    width: 30%;
    position: fixed;
  }
  .calendar-posters a {
  }
  .calendar-posters a img, .publications-posters a img {
    width: 100%;
  }
  .calendar-posters a img:first-of-type {
    
  }
}

@media (max-width: 599px) {


  .calendar-list section, .publications-list section {
    margin-bottom: 20px;
    max-width: 100%;
  }

  body#calendar-page #searchAndFilter {
    margin-left: 0;
    max-width: 100%;
  }

  .calendar-posters {
   
  }
  .calendar-posters a {
  }
  .calendar-posters a img, .publications-posters a img {
    width: 100%;
  }
  .calendar-posters a img:first-of-type {
    
  }


}

#searchAndFilter {
  display: none; /* Hidden by default */
}

body.search-filter-active #searchAndFilter,
body#calendar-page #searchAndFilter {
  display: block; /* Show when body has active class or on calendar page */
}









/* =========================================
  NEWS
========================================= */

.is-hidden {
  display: none!important;
  }

    .news-list {
      line-height: 1.2;
      font-size: 14px;
    }
    }
    
    .news-title {
      color: var(--text-primary);
      font-size: 14px;
      font-weight: 400;
    }
    .news-list a {
      text-decoration: none;
      color: var(--text-secondary);
      font-size: 14px;
      
    }
    .news-list a:hover {
      color: var(--text-primary);
    }

    .news-title {
      font-weight: 700;
      font-size: 20px;
      margin-bottom: 10px;
    }

    .news-list ul {
      list-style: none;
    }

    

    @media (min-width: 1100px) {

      .news-list li {
        margin: 0 0 80px 0;
      }

      .news-list a {
        display: flex;
        align-items: top; /* vertically center the items */
        /* optional: add some padding or margin */
        margin: 20px 0;
        max-width: 100%;
      }

      .news-image-container {
        margin-right: 40px; /* spacing between image and text */
        /* optionally set a max-width or a fixed width for the image if desired */
      }

      .news-info-container {
        flex: 1; /* makes the text container grow to fill remaining space if needed */
        margin-bottom: 30px;
        max-width: 600px;
      }

      /* Optionally, ensure the image doesn't overflow if it's very large */
      .news-image-container img {
        width: 600px;
        max-width: 600px;
        height: auto;
        display: block;
      }
    }

    @media (min-width: 700px) and (max-width: 1099px) {

      .news-list li {
        margin: 0 0 40px 0;
      }


      .news-list a {
        display: flex;
        align-items: top; /* vertically center the items */
        /* optional: add some padding or margin */
        margin: 20px 0;
        max-width: 100%;
      }

      .news-image-container {
        margin-right: 20px; /* spacing between image and text */
        /* optionally set a max-width or a fixed width for the image if desired */
      }

      .news-info-container {
        flex: 1; /* makes the text container grow to fill remaining space if needed */
        margin-bottom: 30px;
        max-width: 600px;
      }

      /* Optionally, ensure the image doesn't overflow if it's very large */
      .news-image-container img {
        width: 320px;
        max-width: 320px;
        height: auto;
        display: block;
      }
    }

    @media (max-width: 699px) {
      
      .news-list section {
        margin: 40px auto 20px auto;
        max-width: 100%;
      }

      .news-list li {
        margin: 0 0 80px 0;
      }


      .news-image-container img {
        width: 100%;
        margin: 0 auto 0px auto;
      }




  }

  .news-list a.news__loadMore {
    text-align: center;
    background: var(--bg-2-color);
    padding: 20px;
    margin: auto;
    display: block;
    width: 100%;
  }

  .news-list-back-btn-container {
    margin-top: 30px;
  }



/* =========================================
  NEWS ARTICLE
========================================= */
.article .lightbox-item {
  margin: 30px auto 30px auto;
}
.article .lightbox-item:nth-child(1) {
  margin: 15px auto 30px auto;
}

.lightbox-item img {
  width: 100%;
}
.lightbox-item span {
  display: block;
  margin-top: 5px;
  color: var(--text-primary);
}

.lightbox-item.video span {
  background: var(--bg-color);
  padding-top: 8px;
}




.article .lightbox-item.video {
  background: #000;
  margin-left: 0;
}



.video-container {
    position: relative;
    max-width: 1140px;
    width: 100%;
    margin: 0 auto;
}

.video-container iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9; /* Ensures proper aspect ratio */
}

/* Video thumbnail overlay when cookies not accepted */
.video-cookie-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #000;
  color: #fff;
  cursor: pointer;
  gap: 8px;
  padding: 16px;
  text-align: center;
}
.video-cookie-overlay .video-cookie-overlay__play,
.video-cookie-overlay .video-cookie-overlay__label,
.video-cookie-overlay .video-cookie-overlay__hint {
  background: #000 !important;
  color: #fff !important;
}
.video-cookie-overlay__play {
  font-size: 48px;
  opacity: 0.9;
  line-height: 1;
}
.video-cookie-overlay__label {
  font-size: 16px;
  font-weight: 600;
}
.video-cookie-overlay__hint {
  font-size: 12px;
  line-height: 1.4;
  opacity: 0.85;
  max-width: 280px;
}



    .article {

font-size: 14px;

margin-top: 20px;

   
    }

    @media (max-width: 800px) {
      .p-news .article {
        margin-top: 0px;
      }
    }
    
    .article h2 {
      color: var(--text-primary);
      font-size: 24px;
      font-weight: 700;

    }
    .article a {
      text-decoration: underline;
      color: var(--text-primary);
      font-size: 14px;
      
    }

 



    
    .news-back-btn-container {
      margin-top: 60px;
      margin-top: 60px;
border-top: 1px solid #bdbdbd;
text-align: center;
    }


    @media (min-width: 600px) {






      .article p {
        margin: 40px 0;
        max-width: 840px;
      }


    }



    @media (max-width: 699px) {

   
      .lightbox .close {
        display: block;
      }
      





  }

  
  .news-back-btn-container a {
    padding: 20px;

    padding: 20px;
/* background: #f1f1f1; */
/* border: 1px solid #000; */
margin-top: 20px;
display: inline-block;

color: #666;

  }





















/* =========================================
  WERK
========================================= */


  .grid {
    /* text-align: center; */
box-sizing: border-box;
min-width: 0px;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-webkit-box-align: center;
/* align-items: center; */
column-gap: 15px;
row-gap: 80px;
display: grid;
  }

  .grid-item {
    box-sizing: border-box;
min-width: 0px;
flex-direction: column;
width: 100%;
row-gap: 5px;
column-gap: 16px;
display: flex;
  }
  .grid-item p {
      line-height: 1.4;
      font-size: 14px;
      -webkit-font-smoothing: antialiased;
      letter-spacing: 0;
      color: var(--text-primary);
      
  }

.grid-item img {
/* max-width: 100%; */
display: block;
max-inline-size: 100%;
block-size: auto;
/* -webkit-user-select: none; */
/* pointer-events: none; */
/* aspect-ratio: 1620 / 1080; */
opacity: 1;
background-color: transparent;
transition-duration: 0.2s;
transition-timing-function: linear;
transition-delay: 0s;
transition-behavior: normal;
transition-property: opacity;
width: 100%;
object-fit: cover;

}



.grid {
margin: auto 5px;
}






.video-thumbnail {
max-width: 840px;
margin: auto;
}

.video-container {
position: relative;
max-width: 1140px;
width: 100%;
margin: 0 auto;
}

.video-container iframe {
width: 100%;
height: auto;
aspect-ratio: 16 / 9; /* Ensures proper aspect ratio */
}




/* =========================================
  MP3 Player
========================================= */

/* MP3 Player */
.project-audio-player-container {
max-width: 6000px;
margin: 0 auto;
padding: 10px 0 10px 0;
background: var(--bg-color);
color: #000;
text-align: left;
}

.project-audio-player-container-inner {
  display: none;
}

.audio-player {
display: flex;
/*flex-direction: column;*/
align-items: center;
margin: 10px 0;
}

/* ✅ Hide controls by default (only visible when a track is active) */
.player-controls {
display: flex;
justify-content: center;
gap: 5px;
}

.control-button {
background: none;
border: none;
color: #000;
/*font-size: 20px;*/
cursor: pointer;
}

.control-button:hover {
color: #ddd;
}





.btn-play {
width: 40px;
height:40px
}

.btn-play .play-icon {
display: block;
margin:0 auto
}

.pause-icon, .playing .play-icon {
display:none
}

.playing .pause-icon {
display: block;
margin:0 auto
}


/* ✅ Progress bar container with time info (hidden by default) */
.seek-container {
display: none;
align-items: center;
justify-content: space-between;
width: calc(100% - 20px);
width: 100%;
margin: 0 30px;
}

#currentTime, #totalDuration {
font-size: 12px;
color: #000;
display: none; /* Initially hidden */
}

/* ✅ Progress bar */
.progress-bar {
position: relative;
flex-grow: 1;
height: 3px;
background: #ccc;
margin: 0;
cursor: pointer;
}

/* ✅ Seek progress */
.seek-bar {
position: absolute;
width: 0%;
height: 100%;
background: #000;
border-radius: 0;
transition: width 0.1s linear;
}

/* ✅ Knob (hidden by default) */
.seek-knob {
position: absolute;
left: 0%;
top: 50%;
transform: translate(-50%, -50%);
width: 12px;
height: 12px;
background: #000;
border-radius: 50%;
display: none;
}

/* ✅ Show knob on hover */
.seek-container:hover .seek-knob {
display: block;
}

/* ✅ Styled Volume Slider */
#volumeSlider {
width: 100px;
height: 3px;
appearance: none;
background: #ccc;

cursor: pointer;
position: relative;
outline: none;
overflow: hidden;
}

/* ✅ Volume Fill Effect */
#volumeSlider::-webkit-slider-runnable-track {
height: 6px;
background: #ccc;

}

#volumeSlider::-webkit-slider-thumb {
appearance: none;
width: 12px;
height: 12px;
background: #000;
border-radius: 50%;
position: relative;
cursor: pointer;
margin-top: -3px;
}

/* ✅ Volume Bar Progress Color */
#volumeSlider::-moz-range-progress {
background: #000;
height: 6px;
border-radius: 3px;
}

#volumeSlider::-webkit-slider-runnable-track {
background: linear-gradient(to right, #000 var(--progress), #ccc var(--progress));
}

#volumeSlider::-webkit-slider-thumb:hover {
background: #000;
}

/* Show volume slider only when controls are visible */
.player-controls:has(#volumeSlider) {
display: flex;
align-items: center;
}



#trackTitle {
display: none;
}

.project-playlist-title {
  display: none;
}

/* ✅ Playlist highlighting */
.project-playlist {
list-style: none;
padding: 0;
/* margin-top: 15px; */
/*border-bottom: 1px solid #cccccc;*/
}

.project-playlist li {
/* background: #fff; */
padding: 10px 0 8px 0;
padding: 8px 0px 6px 0px;
margin: 0;
cursor: default;
color: #000;
color: rgb(115, 115, 115);
/*border-top: 1px solid #d4d4d4;*/
font-size: 13px;
/*transition: all .1s ease;*/
border-top-width: 1px;
border-top-style: solid;
border-top-color: rgb(228, 228, 228);
color: rgb(33, 33, 33);
color: var(--text-primary);
}



.project-playlist li:nth-child(odd) {
/*background: #f9f9f9;*/
}

.project-playlist li:hover {
background: #ebebeb;
}

.project-playlist li.active {
color: #000;
font-weight: 500;
background: #f1f1f1;
}




.player-header {
  display: none;
}




@media (max-width: 9999px) {
  /* =========================================
  MP3 Player MOBILE
========================================= */

/* MP3 Player */
.project-audio-player-container {
  max-width: 6000px;
  margin: 0 auto;
  padding: 10px 0 10px 0;
  background: var(--bg-color);
  color: #000;
  text-align: left;
  }
  .project-audio-player-container-inner {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 600px;
    /* min-width: 90%; */
    background: rgba(255, 255, 255, 0.95);
    padding: 10px 20px;
    z-index: 1;
    display: none;
    border-radius: 10px;
    border: 1px solid #ccc;
    transition: bottom 0.3s ease;
  }
  body.cookie-banner-visible .project-audio-player-container-inner {
    bottom: calc(20px + var(--cookie-banner-height, 80px));
  }
  .audio-player {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  }
  
  /* ✅ Hide controls by default (only visible when a track is active) */
  .player-controls {
  display: flex;
  justify-content: center;
  gap: 5px;
  order: 2;
  }
  
  .control-button {
  background: none;
  border: none;
  color: #000;
  /*font-size: 20px;*/
  cursor: pointer;
  }
  
  .control-button:hover {
  color: #ddd;
  }
  
  
  
  
  
  .btn-play {
  width: 40px;
  height:40px
  }
  
  .btn-play .play-icon {
  display: block;
  margin:0 auto
  }
  
  .pause-icon, .playing .play-icon {
  display:none
  }
  
  .playing .pause-icon {
  display: block;
  margin:0 auto
  }
  
  
  /* ✅ Progress bar container with time info (hidden by default) */
  .seek-container {
  display: none;
  align-items: center;
  justify-content: space-between;
  width: calc(100% - 20px);
  width: 100%;
  margin: 20px 30px 10px 30px;
  }
  
  #currentTime, #totalDuration {
  font-size: 12px;
  color: #000;
  display: none; /* Initially hidden */
  }
  
  /* ✅ Progress bar */
  .progress-bar {
  position: relative;
  flex-grow: 1;
  height: 3px;
  background: #ccc;
  margin: 0;
  cursor: pointer;
  }
  
  /* ✅ Seek progress */
  .seek-bar {
  position: absolute;
  width: 0%;
  height: 100%;
  background: #000;
  border-radius: 0;
  transition: width 0.1s linear;
  }
  
  /* ✅ Knob (hidden by default) */
  .seek-knob {
  position: absolute;
  left: 0%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  background: #000;
  border-radius: 50%;
  display: none;
  }
  
  /* ✅ Show knob on hover */
  .seek-container:hover .seek-knob {
  display: block;
  }
  
  /* ✅ Styled Volume Slider */
  #volumeSlider {
  width: 100px;
  height: 3px;
  appearance: none;
  background: #ccc;
  
  cursor: pointer;
  position: relative;
  outline: none;
  overflow: hidden;
  }
  
  /* ✅ Volume Fill Effect */
  #volumeSlider::-webkit-slider-runnable-track {
  height: 6px;
  background: #ccc;
  
  }
  
  #volumeSlider::-webkit-slider-thumb {
  appearance: none;
  width: 12px;
  height: 12px;
  background: #000;
  border-radius: 50%;
  position: relative;
  cursor: pointer;
  margin-top: -3px;
  }
  
  /* ✅ Volume Bar Progress Color */
  #volumeSlider::-moz-range-progress {
  background: #000;
  height: 6px;
  border-radius: 3px;
  }
  
  #volumeSlider::-webkit-slider-runnable-track {
  background: linear-gradient(to right, #000 var(--progress), #ccc var(--progress));
  }
  
  #volumeSlider::-webkit-slider-thumb:hover {
  background: #000;
  }
  
  /* Show volume slider only when controls are visible */
  .player-controls:has(#volumeSlider) {
  display: flex;
  align-items: center;
  }
  
  
  
  #trackTitle {
    display: block;
    width: 100%;
    margin: 15px 0 5px 0;
    text-align: center;
    cursor: default
  }

  .project-playlist-title {
    font-weight: bold;
    margin-bottom: 10px;
    display: block;
  }
  
  /* ✅ Playlist highlighting */
  .project-playlist {
  list-style: none;
  padding: 0;
  /* margin-top: 15px; */
  /*border-bottom: 1px solid #cccccc;*/
  }
  
  .project-playlist li {
  /* background: #fff; */
  padding: 10px 0 8px 0;
  padding: 8px 0px 6px 0px;
  margin: 0;
  cursor: default;
  color: #000;
  color: rgb(115, 115, 115);
  /*border-top: 1px solid #d4d4d4;*/
  font-size: 13px;
  /*transition: all .1s ease;*/
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: rgb(228, 228, 228);
  color: rgb(33, 33, 33);
  color: var(--text-primary);
  }
  
  
  
  .project-playlist li:nth-child(odd) {
  /*background: #f9f9f9;*/
  }
  
  .project-playlist li:hover {
  background: #ebebeb;
  }
  
  .project-playlist li.active {
  color: #000;
  font-weight: 500;
  background: #f1f1f1;
  }
  
  
  
  
  .player-header {
    display: none;
  }
  
}






  #project-page .content {
    font-size: 14px;
  }
  .project-info p {
    margin-bottom: 20px;
width: 100%;
color: var(--text-primary);

  }

  .project-info .project-description-title {
    font-weight: 600;
  }

.project-headline h1 {
font-weight: 600;
font-size: 26px;
}
.project-headline h2 {
/*font-weight: 300;
font-size: 26px;*/
margin-top: 7px;
}

@media (min-width: 800px) {

#project-page .content {
  display: flex;
  flex-wrap: wrap;
  margin: auto;
}

.project-headline {
  order: 2;
margin: 20px 0px 50px;
margin: 20px 0px 20px;
/*letter-spacing: 1px;*/
text-align: left;
z-index: 1;
}
.project-cover {
  width: 45%;
/* margin-right: 70px; */
/* position: fixed; */
/* top: 150px; */
text-align: center;
margin-top: 30px;

}


.project-info {
  order: 2;
box-sizing: border-box;
white-space: normal;
overflow-wrap: break-word;
width: 50%;
max-width: 1000px;
color: var(--text-primary);
margin: 10px 0px 0px 40px;
}




.project-more {
display: none;
}

}









.gallery {
  order: 5;
width: calc(100% + 60px);
margin: 40px 0px 80px;
overflow-x: hidden;
}

.gallery .grid-container {
  /*margin: 0 -20px;*/
}










@media (max-width: 799px) {

#project-page .content {
  display: flex;
  flex-wrap: wrap;
  max-width: 100%;
  margin: auto;
}

.player {
  order: 4;
width: 100%;
margin: 40px 0;
}

.project-headline {
  /* display: none; */
order: 2;
/* width: 50%; */
margin: 50px 0;
/*letter-spacing: 1px;
/* position: fixed; */
text-align: left;
/* position: sticky; */
/* top: 40px; */
z-index: 1;
}
.project-cover {
  width: 100%;
/* margin-right: 70px; */
/* position: fixed; */
/* top: 150px; */
text-align: center;
margin-top: 40px;

}


.project-info {
  order: 2;
box-sizing: border-box;
white-space: normal;
overflow-wrap: break-word;
color: var(--text-primary);
max-width: 100%;
}



.gallery {
  order: 5;
  width: 100%;
  /*max-width: 1300px;*/

}









.project-description--expanded {
  position: relative;
  height: auto;
  max-height: 350px;
  min-height: 0;
  overflow: hidden;
  /*transition:max-height .75s*/
}

.project-description--expanded:after {
  content: "";
  display: block;
  z-index: 0;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
  transition: background .3s;
  background:linear-gradient(0deg, #fff 12%, hsla(0, 0%, 100%, 0) 95%);

  height: 30px;
  right: 0;
}

.project-description.visible {
  max-height:99999px
}

.project-description.visible:after, .project-more {
  background: none;
  display: none;
}

.project-more {
  text-decoration: none;
  outline: none;
  margin: 0 auto;
  padding: 0;
  cursor: pointer;
  border: none;
  display: inline-block;
  text-align: center;
  display: block;
  font-size: 14px;
  color: var(--text-primary);
  font-weight:400;
  text-decoration: underline;
}

.project-more:focus {
  outline:none
}

.project-more.is-hidden {
  display:none
}






.project-description--expanded {
  position: relative;
  height: auto;
  max-height: 350px;
  min-height: 0;
  overflow: hidden;
  /*transition:max-height .75s*/
}

.project-description--expanded:after {
  content: "";
  display: block;
  z-index: 0;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
  transition: background .3s;
  background: var(--bg-more-color);

  height: 30px;
  right: 0;
}

.project-description.visible {
  max-height:99999px
}

.project-description.visible:after, .project-more {
  background: none;
  display: none;
}

.project-more {
  text-decoration: none;
  outline: none;
  margin: 0 auto;
  padding: 0;
  cursor: pointer;
  border: none;
  display: inline-block;
  text-align: center;
  display: block;
  font-size: 14px;
  color: var(--text-primary);
  font-weight:600;
  text-decoration: underline;

  margin-right: 25px;
  letter-spacing: .2px;
}

.project-more:focus {
  outline:none
}

.project-more.is-hidden {
  display:none
}

}


ul {
list-style: none;
}

a {
color: var(--text-primary);
}


.grid-item img {
/*filter: grayscale(100%);
opacity: 0.3;*/
transition: filter 0.3s ease-in-out;
transition: opacity 0.3s ease;
}

.grid-item:hover img {
filter: grayscale(0%);
opacity: 1;
}


.grid-item .play-button {
background: none;
}

/*
.grid-item p {
display: none;
}
*/















/* Base Playlist Styling */
.project-playlist {
list-style: none;
margin: 0;
padding: 0;

border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: rgb(228, 228, 228);

counter-reset: item;

}

.project-playlist li {
position: relative; /* For positioning the indicator */
/*padding: 10px;*/
cursor: pointer;

counter-increment: item;
display: flex;
align-items: center;         /* vertical centering */
gap: 0.5em;  
}

.project-playlist li::before {
  content: counter(item) ".";
  display: flex;
  align-items: center;         /* vertical centering of number */
  justify-content: center;
}

/* Alternate row backgrounds */
.project-playlist li:nth-child(odd) {
/*background: #f9f9f9;*/
}

.project-playlist li:hover {
background: #d8d8d8;
}

/* Indicator container (equalizer or play icon) */
.project-playlist li .indicator {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
}

/* Play icon styling */
.project-playlist li .indicator.play-indicator {
font-size: 16px;
color: #000000;
}

/* Equalizer container styling */
.project-playlist li .indicator.equalizer {
display: inline-flex;
align-items: flex-end;
}

/* Equalizer bars styling */
.project-playlist li .indicator.equalizer .bar {
width: 3px;
height: 10px;              /* Base height for the bar */
margin: 0 1px;
background: #000000;
transform-origin: bottom; /* Keeps the base aligned */
animation: equalize 0.5s infinite ease-in-out; /* Faster animation */
}

/* Stagger animation delays */
.project-playlist li .indicator.equalizer .bar:nth-child(1) {
animation-delay: 0s;
}
.project-playlist li .indicator.equalizer .bar:nth-child(2) {
animation-delay: 0.1s;
}
.project-playlist li .indicator.equalizer .bar:nth-child(3) {
animation-delay: 0.2s;
}

/* Keyframes for equalizer animation */
@keyframes equalize {
0% {
  transform: scaleY(0.5);
}
50% {
  transform: scaleY(1);
}
100% {
  transform: scaleY(0.5);
}
}


/* IMPRESSUM */
body {
  font-size: 14px;
}


h1 {
font-weight: 400;
font-size: 20px;
}
h2 {
font-size: 14px;
}

a {
color: #666;
}


/* DATENSCHUTZ */
body {
  font-size: 14px;
}


h1 {
font-weight: 700;
font-size: 16px;
}
h2 {
font-size: 14px;
}

#privacy-page .content ul {
margin-left: 20px;
list-style: disc
}

a {
color: #666;
}

/* Image Tooltip Styles */
.werkverzeichnis {
  position: relative;
}

.werkverzeichnis .item {
  position: relative;
}

/* Selected Works hover image (similar to werkverzeichnis) */
.selected-works-image-tooltip {
  position: fixed;
  z-index: 1000;
  display: none;
  pointer-events: none;
  width: 700px;
  right: 0px;
  transform: none;
  border: 1px solid #ccc;
  background: var(--bg-color);
  /* Ensure tooltip doesn't affect layout - fixed position removes from flow */
}

.selected-works-image-tooltip img {
  max-width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 1099px) {
  .selected-works-image-tooltip {
    width: 200px;
  }
}
@media (min-width: 1100px) and (max-width: 1399px) {
  .selected-works-image-tooltip {
    width: 400px;
  }
}
@media (min-width: 1400px) and (max-width: 1599px) {
  .selected-works-image-tooltip {
    width: 500px;
  }
}

.werkverzeichnis .item .image-tooltip {
  position: fixed;
  z-index: 1000;
  display: none;
  pointer-events: none;
  /*background: white;
  padding: 5px;
  border-radius: 4px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);*/
  width: 700px;
  right: 0px;
  transform: none;
  top: 0px !important;
  border: 1px solid #ccc;
}

.werkverzeichnis .item .image-tooltip img {
  max-width: 100%;
  height: auto;
  display: block;
}

@media (min-width: 999px) {
  .werkverzeichnis .item:hover .image-tooltip {
    display: block;
  }
}
@media (max-width: 1099px) {
  .werkverzeichnis .item .image-tooltip {
    width: 200px;
  }
}
@media (min-width: 1100px) and (max-width: 1399px ) {
  .werkverzeichnis .item .image-tooltip {
    width: 400px;
  }
}
@media (min-width: 1400px) and (max-width: 1599px ) {
  .werkverzeichnis .item .image-tooltip {
    width: 500px;
  }
}









/* FEED */
#post {
  margin-top: -15px;
  display: grid;
}
#post .card {
  scroll-margin-top: 40px;
}
.card {
  /*border: 1px solid #000;
  border-radius: 5px;
  padding: 10px;*/
  margin-bottom: 10px;
  background: var(--bg-color);
}

.card-body p {
margin: 10px 0;
overflow-wrap: anywhere;
word-break: break-word;
}

.post-more {
  background: none;
  border: 0;
  padding: 0;
  color: #000;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: inline;
}

@media (min-width: 900px) {
  .feed-dot-nav {
    position: fixed;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 1;
  }

  .feed-dot-nav .feed-dot {
    font-size: 14px;
    line-height: 1;
    color: #000;
    opacity: 0.6;
    text-decoration: none;
    display: block;
  }

  .feed-dot-nav .feed-dot.is-active {
    opacity: 1;
    font-weight: 700;
  }

  .feed-dot-nav .feed-dot:hover {
    opacity: 1;
  }
}

.image-grid {
  display: grid;
  gap: 2px;
  width: 100%;
  line-height: 0;
  order: 1;
}

/* Layout for 1 image - Full width */
.grid-1 {
  grid-template-columns: 1fr;
}

/* Layout for 2 images - Two side by side */
.grid-2 {
  grid-template-columns: 1fr 1fr;
}

/* Layout for 3 images - One large, two smaller stacked images */
.grid-3 {
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas:
    "big small1"
    "big small2";
}

/* Layout for 4 images - One large, three smaller stacked images */
.grid-4 {
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas:
    "big small1"
    "big small2"
    "big small3";
}

/* Layout for 5 images - First row 2 images, second row 3 images */
.grid-5 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

/* Layout for 6 images - First row 2 images, second row 3 images */
.grid-6 {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

/* Image styling */
.image-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0px;
}

.image-grid img:hover {
  cursor: -webkit-zoom-in; /* Older Safari/WebKit browsers */
  cursor: -moz-zoom-in;    /* Older Firefox browsers */
  cursor: zoom-in;         /* Standard */
}

/* Large image class */
.big-image {
  grid-area: big;
}

/* Small image classes */
.small-image {
  object-fit: cover;
}

/* Special overlay for the last image in 6+ images */
.plus-overlay {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  font-size: 2rem;
  text-align: center;
}

.plus-overlay img {
  opacity: 0.5;
}

.plus-overlay span {
  position: absolute;
  z-index: 1;
}





.grid-1 {
  display: block;
}
.grid-2 {
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "big small";
}

.grid-3 {
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: "big small1"
  "big small2";
}

.grid-4 {
  grid-template-columns: 3fr 1fr;
  grid-template-areas: "big small1"
  "big small2"
  "big small3";
}

.grid-5 {
  display: block;
}

.grid-6 {
  display: block;
}


.grid-1 img {
  max-height: 6000px;
}


@media (min-width: 601px) {
  .grid-5 img:nth-child(1), .grid-6 img:nth-child(1)  {
    width: calc(50% - 1px);
    max-height: 330px;
    margin-right: 2px;
    margin-bottom: 2px;
    height: 330px;
}
.grid-5 img:nth-child(2), .grid-6 img:nth-child(2)  {
    width: calc(50% - 1px);;
    max-height: 330px;
    margin-bottom: 2px;
    height: 330px;
}


.grid-5 img:nth-child(3), .grid-6 img:nth-child(3) {
    width: calc((100% - 4px) / 3);
    max-height: 250px;
    height: 250px;
}
.grid-5 img:nth-child(4), .grid-6 img:nth-child(4) {
    width: calc((100% - 4px) / 3);
    max-height: 250px;
    margin: 0 2px;
    height: 250px;
}
.grid-5 img:nth-child(5), .grid-6 img:nth-child(5) {
    width: calc((100% - 4px) / 3);
    max-height: 250px;
    height: 250px;
}


.plus-overlay {
    width: calc((100% - 4px) / 3);
    max-height: 250px;
    border-radius: 0px;
    height: 250px;
}
.plus-overlay img {
    width: 100% !important;
    border-radius: 0px;
    margin: 0 !important;
    max-height: 250px !important;
    height: 250px;
}
}



@media (max-width: 600px) {

  .grid-5 img:nth-child(1), .grid-6 img:nth-child(1)  {
    width: calc(50% - 1px);
    max-height: 230px;
    margin-right: 2px;
    margin-bottom: 2px;
    height: 230px;
}
.grid-5 img:nth-child(2), .grid-6 img:nth-child(2)  {
    width: calc(50% - 1px);;
    max-height: 230px;
    margin-bottom: 2px;
    height: 230px;
}


.grid-5 img:nth-child(3), .grid-6 img:nth-child(3) {
    width: calc((100% - 4px) / 3);
    max-height: 150px;
    height: 150px;
}
.grid-5 img:nth-child(4), .grid-6 img:nth-child(4) {
    width: calc((100% - 4px) / 3);
    max-height: 150px;
    margin: 0 2px;
    height: 150px;
}
.grid-5 img:nth-child(5), .grid-6 img:nth-child(5) {
    width: calc((100% - 4px) / 3);
    max-height: 150px;
    height: 150px;
}


.plus-overlay {
    width: calc((100% - 4px) / 3);
    max-height: 150px;
    border-radius: 0px;
    height: 150px;
}
.plus-overlay img {
    width: 100% !important;
    border-radius: 0px;
    margin: 0 !important;
    max-height: 150px !important;
    height: 150px;
}

}





.card a {
  color: #0866FF;
}

.head {
  display: none;
}
.img-fluid {
  display: none;
}

.media-body p {
  display: none;
}



.feed-loading {
text-align: left;
padding: 10px 0 0;
font-size: 14px;
color: var(--text-secondary);
display: block; /* Visible by default */
animation: feed-loading-blink 0.4s step-end infinite;
}

.feed-loading.hidden {
display: none; /* Hidden when feed is loaded */
}

.feed-loading.feed-cookie-hint {
  animation: feed-cookie-hint-blink 3s step-end infinite;
}

.feed-cookie-datenschutz-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted #666;
}

.feed-cookie-accept-link {
  color: #0066cc;
  text-decoration: none;
}

@keyframes feed-loading-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@keyframes feed-cookie-hint-blink {
  0%, 82% { opacity: 1; }
  83%, 85% { opacity: 0; }
  86%, 88% { opacity: 1; }
  89%, 91% { opacity: 0; }
  92%, 100% { opacity: 1; }
}

            .grid-item {
        line-height: 0;
    }
    .grid-item p {
        line-height: 1.4;
        font-size: 14px;
        -webkit-font-smoothing: antialiased;
        letter-spacing: 0;
        color: #000;
    }

.grid-item img {
width: 100%;
max-width: 100%
}






.grid {
margin: 0 -20px;
}


@media (min-width: 1900px)  {
.card { margin: 20px; width: calc( 25% - 40px ); }
}
@media (min-width: 1300px) and (max-width: 1899px) {
.card { margin: 20px; width: calc( 33.3333333333% - 40px ); }
}
@media (min-width: 800px) and (max-width: 1299px) {
.card { margin: 15px; width: calc( 50% - 30px ); }
.grid {
margin: 0 -15px;
}
}
@media (max-width: 799px) {
.card { margin: 10px; width: calc( 100% - 20px ); }

#post {
  margin-top: 0;
}

.grid {
margin: 0;
}

}

.grid {
margin: 0;
}
.post {
max-width: 600px;
}
.card {
margin: 5px 0 50px 0;
width: 100%;
}

.card .media span {
font-size: 14px;
color: #000;
}
.card .media i {
display: none;
}

.card .card-body {
display: flex;
flex-direction: column;
}

@media (min-width: 1250px)  {
.card .card-body {
  width: 50%;
  max-width: 700px;
  display: flex;
  flex-direction: column;
  border: 1px solid #adadad;
  padding: 20px 20px;
  border-radius: 6px;
}
.card .media {
  position: static;
}
}
@media (min-width: 900px) and (max-width: 1249px)  {
.card .card-body {
  width: 70%;
  max-width: 700px;
  display: flex;
  flex-direction: column;
  border: 1px solid #adadad;
  padding: 20px 20px;
  border-radius: 6px;
}
.card .media {
  position: static;
}
}


.card-body p {
margin: 10px 0 0 0;
font-size: 14px;
order: 2;
}


.gallery-content {
will-change: transform, opacity;
transition: transform 0.3s ease, opacity 0.3s ease;
}


/* Cookie consent banner */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 9999;
  padding: 16px 20px 24px;
  background: #fff;
  color: #000;
  text-align: left;
  box-sizing: border-box;
  border-top: 1px solid #ccc;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.cookie-banner--hidden {
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
}
.cookie-banner__inner {
  width: 100%;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  box-sizing: border-box;
  text-align: left;
  justify-content: flex-start;
}
.cookie-banner__text {
  flex: 1;
  min-width: 200px;
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
}
.cookie-banner__text a {
  color: #0066cc;
  text-decoration: underline;
}
.cookie-banner__accept {
  flex-shrink: 0;
  padding: 10px 24px;
  background: rgb(210, 210, 210);
  color: rgb(0, 0, 0);
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
}
.cookie-banner__accept:hover {
  background: rgb(180, 180, 180);
}


/* Index page slideshow */
body.p-home .content {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 80px);
  padding: 24px 16px;
}

.slideshow-box {
  width: 100%;
  max-width: 800px;
  height: 100%;
  max-height: 700px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Hide img until first image loads (prevents alt text flash) */
.slideshow-box img[src=""],
.slideshow-box img:not([src]) {
  visibility: hidden;
}

.slideshow-box img {
  width: 100%;
  height: 100%;
  max-width: 800px;
  max-height: 700px;
  object-fit: contain;
  display: block;
}

@media (min-width: 1000px) and (max-width: 1600px) {
  body.p-home .content {
    display: flex;
    align-items: start;
    justify-content: center;
    padding: 24px 16px;
  }

  .slideshow-box {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 700px;
    max-width: 100%;
  }

  .slideshow-box img {
    width: auto;
    height: 100%;
    max-width: 800px;
    max-height: 700px;
    object-fit: contain;
    display: block;
  }
}

@media (min-width: 1601px) {
  .slideshow-box {
    width: 100%;
    height: 100%;
    max-height: 700px;
    max-width: 100%;
  }

  .slideshow-box img {
    max-height: 700px;
    object-fit: contain;
    display: block;
  }
}

@media (max-width: 599px) {
  body.p-home .content {
    padding-top: 0;
    margin-top: 0;
  }
}


/* ============================================
   Page-specific styles (moved from inline)
   ============================================ */

/* Search overlay & lightbox - initially hidden */
#searchResults {
  display: none;
}

#lightboxVideo,
#lightboxCaption {
  display: none;
}

/* Audio player - initially hidden */
#playerControls,
#seekContainer,
#volumeSlider {
  display: none;
}

/* Calendar/publikationen poster images */
.calendar-posters img {
  width: 100%;
  margin-bottom: 30px;
}


/* Termin page */
.termin {
  line-height: 1.2;
  font-size: 14px;
}

.termin h2 {
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 700;
}

.termin a {
  text-decoration: none;
  color: var(--text-primary);
  font-size: 14px;
}

.termin a:hover {
  color: #1E0EFF;
}

.termin h1 {
  font-weight: 700;
  font-size: 20px;
}

.termin-back-btn-container a {
  text-decoration: underline;
}

@media (min-width: 1000px) {
  .termin section {
    display: flex;
    align-items: center;
    margin: 20px 0;
    max-width: 78%;
  }

  .termin .image-container {
    margin-right: 40px;
  }

  .termin .info-container {
    flex: 1;
    margin-bottom: 30px;
    max-width: 800px;
  }

  .termin .image-container img {
    max-width: 320px;
    height: auto;
    display: block;
  }
}

@media (min-width: 600px) and (max-width: 999px) {
  .termin section {
    display: flex;
    align-items: center;
    margin: 20px 0;
    max-width: 100%;
  }

  .termin .image-container {
    margin-right: 20px;
  }

  .termin .info-container {
    flex: 1;
    margin-bottom: 30px;
    max-width: 800px;
  }

  .termin .image-container img {
    max-width: 300px;
    height: auto;
    display: block;
  }
}

@media (max-width: 599px) {
  .termin section {
    margin: 40px auto 20px auto;
    max-width: 100%;
  }

  .termin img {
    width: 100%;
    margin: 0 auto 30px auto;
  }

  .termin .plakate {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
    box-sizing: border-box;
    margin: 30px auto 30px auto;
  }

  .termin .plakate a {
    flex: 0 0 47.5%;
    box-sizing: border-box;
  }

  .termin .plakate a img {
    display: block;
    width: 100%;
    height: auto;
    box-sizing: border-box;
  }
}

.termin-back-btn-container {
  margin-top: 30px;
}

.termin .calendar__date {
  font-size: 16px;
}


/* Article / news detail */
.article-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.article-title {
  margin: 0;
  flex: 1 1 auto;
}

.article-date {
  flex: 0 0 auto;
  margin-left: auto;
}

@media (max-width: 999px) {
  .article-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .article-date {
    margin-left: 0;
  }
}


/* Search page (suche) - scoped to avoid overriding werkverzeichnis/kalender/publikationen */
body#suche-page #searchAndFilter {
  position: sticky;
  top: 0;
  left: 0;
  margin-bottom: 20px;
  background: #fff;
  padding-bottom: 10px;
  max-width: 100%;
}

body#suche-page #searchContainer {
  border: 1px solid #e9e9e9;
  background-color: #e9e9e9;
  box-sizing: border-box;
  z-index: 1;
  display: flex;
  align-items: center;
  max-width: 100%;
  margin-bottom: 10px;
}

body#suche-page #searchInput2 {
  width: calc(100% - 25px);
  padding: 10px;
  font-size: 14px;
  box-sizing: border-box;
  border: none;
  outline: none;
  position: relative;
  background-color: #e9e9e9;
}

body#suche-page #clearButton {
  position: absolute;
  right: 10px;
  top: 20px;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  display: none;
}

body#suche-page #filterContainer select {
  border: none;
  background: #fff;
  appearance: none;
  font-size: 13px;
  text-transform: uppercase;
  width: auto;
  display: inline-block;
}

body#suche-page .auto-size-select {
  display: inline-block;
  position: relative;
  margin-right: 5px;
  font-family: sans-serif;
  font-size: 14px;
  margin-bottom: 8px;
}

body#suche-page .auto-size-select .fakeLabel {
  display: inline-block;
  position: relative;
  z-index: 1;
  pointer-events: none;
  padding: 4px 10px 2px 10px;
  background: #ececec;
  white-space: nowrap;
  font-size: 13px;
  letter-spacing: .5px;
}

body#suche-page .auto-size-select .fakeLabel.selected {
  text-decoration: underline;
  background: #f5f5f5;
}

body#suche-page .auto-size-select select {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  color: transparent;
  text-shadow: 0 0 0 transparent;
  outline: none;
}

body#suche-page .auto-size-select select:focus {
  outline: none;
  box-shadow: none;
}

body#suche-page #filterContainer select:focus {
  outline: none;
  box-shadow: none;
}

body#suche-page #filterContainer select:-moz-focusring,
body#suche-page #filterContainer select:-moz-focusring:focus {
  outline: none;
}

body#suche-page #filterContainer select::-moz-focus-inner {
  border: 0;
}

body#suche-page #filterContainer select:focus {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

.werkverzeichnis section {
  margin-bottom: 40px;
}

.werkverzeichnis h2 {
  color: #000;
  font-size: 14px;
  font-weight: 400;
}

.werkverzeichnis ul {
  list-style: none;
  padding-left: 0;
}

.werkverzeichnis li {
  margin: 0;
}

.werkverzeichnis a {
  text-decoration: none;
  color: #000;
  font-size: 14px;
}

.werkverzeichnis a:hover {
  color: #1E0EFF;
}

/* Safari-only: font-weight 200 renders well in Safari, poorly elsewhere */
@supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none) {
  html, body { font-weight: 200; }
  body { font-weight: 200; }
  .desktop-nav { font-weight: 200; }
  .logo { font-weight: 200; }
  .mobile-logo { font-weight: 200; }
  .mobile-nav { font-weight: 200; }
  .publications-list h4 { font-weight: 200; }
  .publications-intro a { font-weight: 200; }
}