@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');

:root {
  --primary: rgb(247, 174, 30);
  --text: #1f1f1f;
  --bg-light: #f8f5f0;
  --bg-dark: #333;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: Lato, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  list-style: none;
}

html,
body {
  width: 100%;
  height: 100%;
}

html {
  scroll-behavior: smooth;
}

body {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* Prevent horizontal scrollbars */
  background-color: var(--bg-light);
}

/* ================================================== */
/* ============= BASE / DESKTOP STYLES ============== */
/* ================================================== */

/*--------------- HEADER AND NAVIGATION ---------------- */
.header-container {
  position: sticky;
  top: 0;
  z-index: 1000;
}

.nav {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 12px 10px;
  background-color: var(--primary);
  border-bottom: 2px solid rgb(36, 36, 36);
  box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px,
    rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
  box-sizing: border-box;
}

.nav-logo {
  display: flex;
  align-items: center;
}

.nav-logo > img[src*="logo"] {
  margin-left: 10px;
  width: 70px;
  height: 77px;
}

/*.nav-logo > img[src*="text"] {
  margin-left: 15px;
  margin-top: 20px;
  width: 72px;
  height: 40px;
}*/

.nav-logo > img[src*="text"] {
  margin-left: 0px;
  margin-top: 3px;
  width: 128px;
  height: 70px;
}

.nav-links {
  display: flex;
  justify-content: space-between;
  margin: 10px 10px;
  width: 750px;
  padding: 0;
  list-style: none;
}
.nav-links a {
  text-decoration: none;
  color: rgb(255, 255, 255);
  font-size: 16px;
  font-weight: 600;
  position: relative;
  padding-bottom: 5px;
}
.nav-links a:hover {
  color: rgb(255, 224, 195);
  transition: color 0.5s ease;
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0px;
  width: 0;
  height: 2px;
  background-color: rgb(255, 224, 195);
  transition: width 0.3s ease;
}

.nav-links a:hover::after {
  width: 100%;
}

.nav-login {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  right: 15px;
  bottom: 15px;
}

.nav-toggle {
  display: none; /* Hidden by default on desktop */
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/*--------------- FILM STRIP IMAGE SLIDER ---------------- */
/* Overall slider layout */
/* --- BASE DESKTOP STYLES --- */

/* Overall slider layout */
/* --- BASE DESKTOP STYLES --- */

/* --- BASE DESKTOP STYLES (Infinite Loop Ready) --- */

.hero-slider {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.slider-container {
  position: relative;
  width: 100%;
  overflow: hidden; /* Crucial for infinite loop illusion */
  height: 500px;
  background-color: #000000;
  background-image: url("https://www.transparenttextures.com/patterns/black-twill.png");
}

.slider-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0) 15%,
    rgba(0, 0, 0, 0) 85%,
    rgba(0, 0, 0, 1) 100%
  );
  z-index: 5;
  pointer-events: none;
}

#imageSlider {
  display: flex;
  height: 100%;
  /* Width is determined by content (all slides + clones) */
  align-items: center;
  padding: 10px 0; /* Vertical padding */
  box-sizing: border-box;
  /* Transition is now controlled by JS (added/removed) */
  /* transition: transform 0.5s ease; --- REMOVED from here */
  flex-wrap: nowrap;
}

.slide-item {
  flex: 0 0 57.66%; /* Adjust as needed */
  height: 100%;
  margin: 0 15px; /* Spacing */
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: filter 0.3s ease, opacity 0.3s ease;
  overflow: hidden;
  opacity: 0.5; /* Default inactive style */
  filter: blur(1px) grayscale(30%); /* Default inactive style */
  flex-shrink: 0; /* Prevent shrinking */
}

.slide-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Or 'fill' */
  user-select: none;
  -webkit-user-drag: none;
}

.slide-item.active {
  opacity: 1;
  filter: none;
  z-index: 2;
}

/* --- Controls and Indicators Styling (Unchanged) --- */
.slider-controls {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  pointer-events: none;
  z-index: 10;
}

.slider-btn {
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  cursor: pointer;
  border-radius: 50%;
  pointer-events: all;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
}
.slider-btn:disabled { /* Style for disabled buttons */
    cursor: default;
    opacity: 0.5;
}

.slider-btn i {
  font-size: 18px;
  line-height: 1;
}

.slider-btn:hover:not(:disabled) {
  background-color: rgba(0, 0, 0, 0.8);
}

.slider-indicators {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 10;
  padding: 5px;
}

.indicator {
  width: 30px;
  height: 4px;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.indicator.active {
  background-color: rgba(255, 255, 255, 1);
}

/* --- MEDIA QUERIES --- */
/* IMPORTANT: You will need to adjust the media query logic. */
/* The infinite scroll (cloning/jumping) is complex and might be */
/* best disabled on mobile where the layout changes significantly. */
/* Consider using window.matchMedia in the JS to conditionally */
/* enable/disable the cloning and infinite jump logic based on screen size. */

/* --- MEDIA QUERY FOR TABLETS / SMALL DESKTOPS (max-width: 1028px) --- */
@media (max-width: 1028px) {
  .slider-container {
    height: 450px; /* Slightly reduce height */
  }

  /* Adjust the wrapper for sizing and spacing */
  .slide-item {
    flex-basis: 65%; /* Increase item width slightly relative to container */
    margin: 0 10px; /* Reduce margin between items */
    /* Height remains 100% of parent */
    /* Base opacity, filter, transitions remain */
  }
  /* .slide-item img styles remain as base (object-fit: cover) */
  /* .slide-item.active styles remain as base */

  .slider-controls {
    padding: 0 15px; /* Reduce padding */
  }

  .slider-btn {
    width: 38px; /* Slightly smaller buttons */
    height: 38px;
  }

  .slider-btn i {
    font-size: 16px; /* Slightly smaller icon */
  }

  .slider-indicators {
     /* Position remains same */
     gap: 9px; /* Slightly adjust gap */
  }

  .indicator {
    width: 25px; /* Slightly smaller indicator */
  }
}

/* --- MEDIA QUERY FOR PHONES (max-width: 768px) --- */
/* REQUIRES JS CHANGES TO DISABLE TRANSFORM POSITIONING & CLONING */
@media (max-width: 768px) {
  .slider-container {
    height: 300px; /* Reduce height significantly */
    background-color: transparent; /* Remove background color */
    background-image: none; /* Remove background image */
  }

  .slider-container::before {
    /* Hide the gradient overlay */
    display: none; /* Or opacity: 0; pointer-events: none; */
  }

  #imageSlider {
    padding: 0; /* Remove vertical padding */
    /* Ensure JS doesn't fight this CSS */
    /* Consider adding transform: none !important; if JS cannot be modified */
    /* transform: none !important; */ /* Use only if JS absolutely cannot be changed */
  }

  /* Change layout to stack items, show only active */
  .slide-item {
    position: absolute; /* Stack all items */
    top: 0;
    left: 0;
    width: 100%; /* Item takes full width */
    height: 100%; /* Item takes full height */
    flex-basis: auto; /* Override desktop flex-basis */
    margin: 0; /* Remove margins */
    opacity: 0; /* Hide non-active items */
    filter: none; /* Remove filter effects */
    z-index: 1; /* Base stack level */
    /* Override desktop transitions, only transition opacity */
    transition: opacity 0.5s ease-in-out;
    /* display: flex might not be needed */
  }

  /* Explicitly hide cloned elements if JS still renders them */
  .slide-item[data-clone="true"] {
      display: none;
      opacity: 0; /* Ensure hidden */
      pointer-events: none;
  }

  .slide-item.active {
    opacity: 1; /* Make active item visible */
    z-index: 2; /* Bring active item to front */
  }

  /* Image fills the container */
  .slide-item img {
    object-fit: cover; /* Ensure image covers the area */
  }

  /* Adjust controls */
  .slider-controls {
    padding: 0 10px; /* Reduce padding */
  }

  .slider-btn {
    width: 35px; /* Smaller buttons */
    height: 35px;
  }

  .slider-btn i {
    font-size: 16px; /* Icon size */
  }

  /* Adjust indicators */
  .slider-indicators {
    bottom: 8px; /* Move slightly up */
    gap: 8px; /* Reduce gap */
  }

  .indicator {
    width: 20px; /* Smaller indicators */
  }
}

/*--------------- UPCOMING CONTAINER (Nächste Vorstellung) ---------------- */
.upcoming-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  color: rgb(0, 0, 0);
  background-color: #1f1f1f;
  background-image: url("https://www.transparenttextures.com/patterns/black-twill.png");
  min-height: 450px;
  padding-top: 25px;
  padding-bottom: 25px;
  border-top: 5px solid var(--primary);
  z-index: 5;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px,
    rgba(0, 0, 0, 0.22) 0px 15px 12px;
  box-sizing: border-box;
}

.upcoming-main {
  width: 100%; /* Ensure container takes width */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.upcoming-main > h2 {
  color: rgb(255, 255, 255);
  font-size: 30px;
  font-weight: 600;
  display: flex; /* Already flex, ensure centering */
  justify-content: center;
  align-items: center;
  margin-bottom: 50px;
  position: relative;
  padding-top: 30px;
  text-align: center; /* Ensure text centers if it wraps */
}

.upcoming-main > h2::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%) scaleX(0.2);
  transform-origin: center;
  width: 80%;
  max-width: 200px;
  height: 3px;
  background-color: var(--primary);
  transition: transform 0.3s ease;
  border-radius: 10px;
}

.upcoming-container:hover .upcoming-main > h2::after {
  transform: translateX(-50%) scaleX(1);
}

.a1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  width: 300px;
  min-height: 220px;
  background-color: #fff;
  border-top: 5px solid var(--primary);
  border-radius: 5px;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px,
    rgba(0, 0, 0, 0.22) 0px 15px 12px;
  padding: 20px 15px;
  margin-bottom: 25px;
  box-sizing: border-box;
}

.show-date,
.show-title,
.show-location {
  color: var(--text);
  word-wrap: break-word;
  overflow-wrap: break-word;
  width: 100%;
}

.show-date {
  font-size: 16px;
  font-weight: 600;
  margin-top: 15px;
  margin-bottom: 10px;
}

.show-title {
  font-size: 20px;
  font-weight: bold;
  padding-top: 10px;
  margin-bottom: 10px;
}

.show-location {
  font-size: 16px; /* Added style from mobile section for consistency */
  margin-top: 15px;
}

.btn {
  display: inline-flex; /* Changed from flex to inline-flex */
  align-items: center;
  justify-content: center;
  padding: 15px 27px;
  background-color: var(--primary);
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
  text-transform: uppercase;
  border-radius: 5px;
  margin-top: 20px;
  border: none; /* Added */
  cursor: pointer; /* Added */
  text-align: center; /* Added */
  line-height: 1.2; /* Added */
}
.btn:hover {
  background-color: #e7a828;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.btn:active {
  background-color: #e7a828;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  transform: scale(0.995);
}

.star {
  position: absolute;
  top: 40px;
  left: 15px;
  width: 50px;
  height: 50px;
  fill: rgba(247, 174, 30, 0.3);
}

/*--------------- UPCOMING PERFORMANCES ---------------- */
.upcoming-performances-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  /* height: 100%; Removed fixed height */
  background-color: #f8f5f0; /* Moved from upcoming-performances */
  padding: 50px 0; /* Moved from upcoming-performances */
}

.upcoming-performances {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* justify-content: center; */ /* Removed */
  width: 100%;
  max-width: 1200px; /* Added max-width for content */
  color: rgb(0, 0, 0);
  /* background-color: #f8f5f0; Moved to container */
  /* min-height: 300px; Removed */
  /* padding-top: 50px; Moved to container */
  /* padding-bottom: 25px; Moved to container */
  border-top: 10px solid var(--primary);
  border-bottom: 10px solid var(--primary);
  border-image-source: linear-gradient(
    to right,
    rgba(255, 255, 255, 0),
    var(--primary),
    rgba(255, 255, 255, 0)
  );
  border-image-slice: 1;
  /* margin-top: 80px; Removed */
  /* padding: 50px 0; Moved to container */
  padding: 30px 20px; /* Add internal padding */
  box-sizing: border-box;
}

.upcoming-performances > h2 {
  /* flex-direction: column; Removed */
  color: rgb(29, 29, 29);
  font-size: 30px;
  font-weight: 600;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 50px;
  position: relative;
  text-align: center; /* Ensure centering */
}

.upcoming-performances > h2::after {
  content: "";
  position: absolute;
  /* top: 50px; */ /* Use bottom instead */
  bottom: -10px; /* Position below text */
  left: 50%;
  transform: translateX(-50%) scaleX(0.2);
  transform-origin: center;
  /* bottom: -2px; Removed */
  width: 80%; /* Relative width */
  max-width: 200px; /* Max width */
  height: 3px;
  background-color: var(--primary);
  transition: transform 0.3s ease;
  border-radius: 10px;
}

.upcoming-performances:hover > h2::after {
  transform: translateX(-50%) scaleX(1);
}

.upcoming-performances-grid {
  display: flex;
  flex-direction: column;
  gap: 30px; /* Increased gap slightly */
  width: 100%; /* Ensure grid takes width */
  padding-bottom: 30px;
}

.upcoming-performances-grid > p {
  display: flex;
  justify-content: center;
}

.perf-card {
  display: flex;
  align-items: stretch; /* Make children same height */
  /* justify-content: flex-start; Removed */
  width: 100%;
  /* min-width: 1200px; Removed, let it be flexible */
  /* max-width: 1200px; Let parent handle max-width */
  background-color: #fff;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
    rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
  flex-wrap: nowrap; /* Prevent wrapping */
}

.perf-date {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  background-color: var(--primary);
  padding: 20px 30px; /* Increased padding */
  flex-shrink: 0;
  text-align: center;
}

.perf-day {
  font-size: 18px;
}

.perf-time {
  font-size: 14px;
  opacity: 0.9;
  margin-top: 5px; /* Added margin */
}

.perf-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center; /* Center content vertically */
  padding: 25px 30px; /* Increased padding */
  flex: 1; /* Allow this section to grow */
  /* width: auto; Removed */
  overflow: hidden; /* Prevent content overflow */
}

.perf-title {
  font-size: 20px;
  font-weight: bold; /* Added */
  color: var(--text);
  margin-bottom: 10px; /* Reduced margin */
}

.perf-desc {
  font-size: 16px;
  color: var(--text);
  margin-bottom: 10px; /* Reduced margin */
  word-wrap: break-word;
  line-height: 1.5; /* Added */
}
.perf-actors {
  font-size: 15px; /* Slightly smaller */
  font-style: italic;
  color: #7a7a7a;
  margin-bottom: 15px; /* Reduced margin */
}

.perf-btn {
  display: inline-flex; /* Changed to inline-flex */
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  background-color: var(--primary);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  text-transform: uppercase;
  border-radius: 5px;
  transition: 0.3s ease-in-out;
  margin-top: auto; /* Push button to bottom if space allows */
  border: none; /* Added */
  cursor: pointer; /* Added */
}
.perf-btn:hover {
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 2px, rgba(0, 0, 0, 0.16) 0px 2px 4px,
    rgba(0, 0, 0, 0.16) 0px 4px 8px, rgba(0, 0, 0, 0.16) 0px 8px 16px,
    rgba(0, 0, 0, 0.16) 0px 8px 16px, rgba(0, 0, 0, 0.16) 0px 8px 16px;
  transform: scale(1.005); /* Reduced scale slightly */
  background-color: #e7a828; /* Added hover color */
}
.perf-btn:active {
  background-color: #e7a828;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  transform: scale(0.995);
}
.hidden {
  display: none !important;
}

/*--------------- CONTACT SECTION ---------------- */
.contact-container {
  display: flex;
  flex-direction: column; /* Stack h2 and card */
  align-items: center;
  justify-content: flex-start; /* Align from top */
  width: 100%;
  color: rgb(0, 0, 0);
  background-color: #f1f1f1;
  background-image: url("https://www.transparenttextures.com/patterns/debut-light.png");
  padding: 70px 20px; /* Increased vertical padding */
}

.contact {
  width: 100%;
  max-width: 900px; /* Set max width for the content area */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.contact > h2 {
  /* flex-direction: column; Removed */
  color: rgb(36, 36, 36);
  font-size: 30px;
  font-weight: 600;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 50px;
  position: relative;
  text-align: center;
}

.contact > h2::after {
  content: "";
  position: absolute;
  /* top: 50px; */ /* Use bottom */
  bottom: -10px; /* Position below text */
  left: 50%;
  transform: translateX(-50%) scaleX(0.2);
  transform-origin: center;
  /* bottom: -2px; Removed */
  width: 80%; /* Relative width */
  max-width: 200px; /* Max width */
  height: 3px;
  background-color: var(--primary);
  transition: transform 0.3s ease;
  border-radius: 10px;
}

.contact-container:hover .contact > h2::after {
  transform: translateX(-50%) scaleX(1);
}

.contact-card {
  display: flex;
  align-items: stretch; /* Make columns equal height */
  /* justify-content: center; Removed */
  width: 100%; /* Take full width of parent .contact */
  /* height: auto; Removed */
  background-color: #fff;
  border-radius: 10px;
  /* margin-bottom: 20px; Removed, handled by container padding */
  padding: 30px; /* Increased padding */
  gap: 30px; /* Increased gap */
  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
    rgba(60, 64, 67, 0.15) 0px 2px 6px 2px; /* Added shadow */
  box-sizing: border-box;
}

.contact-info,
.tickets-info,
.about-info {
  flex: 1 1 45%; /* Allow shrinking/growing */
  padding: 0; /* Remove padding, handled by card */
}

.contact-info h3,
.tickets-info h3,
.about-info h3 {
  color: var(--primary);
  font-size: 22px; /* Adjusted size */
  margin-bottom: 15px; /* Adjusted margin */
  padding-bottom: 0; /* Removed padding */
}

.contact-info p,
.tickets-info p {
  font-size: 16px;
  color: #333;
  line-height: 1.6;
  margin-bottom: 15px; /* Increased margin */
  display: flex; /* Align icon and text */
  align-items: flex-start; /* Align icon to top of text */
}

.about-info p {
  font-size: 16px;
  color: #333;
  line-height: 1.6;
  margin-bottom: 15px; /* Increased margin */
}

.contact-info svg,
.tickets-info svg {
  width: 18px; /* Adjusted size */
  height: 18px; /* Adjusted size */
  margin-right: 12px; /* Adjusted margin */
  fill: var(--primary);
  /* vertical-align: middle; Removed */
  flex-shrink: 0; /* Prevent icon shrinking */
  margin-top: 4px; /* Align icon better with text */
}

.alert {
  margin-top: 20px;
  padding: 15px; /* Increased padding */
  background-color: #fff3cd;
  color: #856404;
  border: 1px solid #ffeeba;
  border-radius: 5px;
  font-size: 14px;
}

#rights_title > p {
  padding-bottom: 20px;
  margin-bottom: -15px;
}

#rights_title > h3 {
  padding-bottom: 20px;
}
/*--------------- FOOTER ---------------- */
footer {
  background: var(--bg-dark);
  color: white;
  padding: 70px 20px 20px 20px; /* Added horizontal padding */
  position: relative;
}

footer:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: var(--primary);
}

.footer-content {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  margin: 0 auto 40px auto; /* Center content horizontally */
  justify-content: space-between; /* Space out columns */
  max-width: 1200px; /* Max width for content */
}

.footer-logo,
.footer-links,
.footer-contact,
.footer-social {
  flex: 1; /* Allow flex items to grow/shrink */
  min-width: 200px; /* Minimum width before wrapping */
}

.footer-logo img {
  width: 90px;
  filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.3));
  transition: transform 0.3s;
  cursor: pointer;
  display: block; /* Ensure it behaves like a block */
  margin-bottom: 20px; /* Add space below logo */
}

.footer-logo img:hover {
  transform: rotate(5deg);
}

.footer-links h3,
.footer-contact h3,
.footer-social h3 {
  margin-bottom: 20px;
  color: var(--primary);
  font-size: 1.3em;
  position: relative;
  padding-bottom: 10px;
  display: inline-block; /* Ensure underline only covers text */
}

.footer-links h3:after,
.footer-contact h3:after,
.footer-social h3:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 3px;
  background: var(--primary);
}

.footer-links ul {
  padding: 0; /* Reset padding */
  list-style: none; /* Reset list style */
}

.footer-links ul li {
  margin-bottom: 12px;
}

.footer-links a {
  color: white;
  transition: all 0.3s;
  display: inline-block;
  text-decoration: none;
}

.footer-links a:hover {
  color: var(--primary);
  transform: translateX(5px);
}

.footer-contact p {
  margin-bottom: 10px; /* Add space between contact lines */
  line-height: 1.6;
}

.social-links {
  display: flex;
  gap: 15px;
  margin-top: 10px; /* Add space above icons */
}

.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  transition: all 0.3s;
  font-size: 1.2em;
  text-decoration: none; /* Ensure no underline */
}

.social-link:hover {
  background: var(--primary);
  color: white;
  transform: translateY(-5px);
}

.footer-bottom {
  text-align: center;
  padding-top: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 40px; /* Add space above bottom text */
}

.footer-bottom a {
  color: var(--primary);
  text-decoration: none;
  transition: all 0.3s;
}
.footer-bottom a:hover {
  text-decoration: underline;
}

/*--------------- GALLERY (Homepage Section) ---------------- */
.gallery-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* justify-content: center; Removed */
  width: 100%;
  color: rgb(0, 0, 0);
  background-color: var(--bg-dark);
  min-height: 400px;
  padding: 80px 20px 60px 20px; /* Added horizontal padding, increased bottom */
  box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px,
    rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}

.gallery-container > .star {
  /* Consider removing or adjusting positioning for responsiveness */
  position: absolute;
  top: 70px;
  left: 40px; /* Adjusted position */
  width: 50px;
  height: 50px;
  fill: rgba(247, 174, 30, 0.3);
}

.gallery-main {
  width: 100%;
  max-width: 1000px; /* Max width for gallery content */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.gallery-main > h2 {
  /* flex-direction: column; Removed */
  color: rgb(255, 255, 255);
  font-size: 30px;
  font-weight: 600;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 50px;
  position: relative;
  text-align: center;
}

/* Add h2::after style if desired, similar to other sections */

.grid {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(180px, 1fr)
  ); /* Responsive columns */
  /* grid-template-columns: repeat(4, 1fr); */ /* Original fixed columns */
  /* grid-template-rows: repeat(2, 1fr); Removed fixed rows */
  gap: 20px;
  width: 100%; /* Take full width of parent */
}

.grid-card {
  /* height: 200px; Removed fixed height */
  /* width: 200px; Removed fixed width */
  aspect-ratio: 1 / 1; /* Make cards square */
  background-color: #fff;
  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* Added shadow transition */
  overflow: hidden; /* Ensure image stays within bounds */
}
.grid-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px; /* Keep radius */
  display: block; /* Remove potential bottom space */
  transition: transform 0.3s ease; /* Keep image transition */
}

.grid-card:hover {
  transform: scale(1.03); /* Slightly reduced scale */
  box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 24px; /* Enhanced shadow */
}

/* Removed hover effect for image scaling as it might interfere with card hover */
/* .grid-card:hover img {
  transform: scale(1.1);
} */

.btn-gal {
  display: inline-flex; /* Changed */
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  padding: 12px 25px; /* Adjusted padding */
  background-color: var(--primary);
  color: #fff;
  font-size: 16px; /* Adjusted size */
  font-weight: 600;
  text-transform: uppercase;
  border-radius: 5px;
  transition: 0.3s ease-in-out;
  /* width: 300px; Removed fixed width */
  /* height: 50px; Removed fixed height */
  margin-top: 40px; /* Adjusted margin */
  border: none; /* Added */
  cursor: pointer; /* Added */
}
.btn-gal:hover {
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 2px, rgba(0, 0, 0, 0.16) 0px 2px 4px,
    rgba(0, 0, 0, 0.16) 0px 4px 8px, rgba(0, 0, 0, 0.16) 0px 8px 16px,
    rgba(0, 0, 0, 0.16) 0px 8px 16px;
  transform: scale(1.03); /* Adjusted scale */
  background-color: #f1af2a;
}
.btn-gal:active {
  background-color: #e7a828;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  transform: scale(0.995);
}

/*--------------- GALLERY PAGE 2 ---------------- */
.gallery-container-2 {
  padding: 70px 20px; /* Added horizontal padding */
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* justify-content: center; Removed */
  background-color: #f1f1f1;
  background-image: url("https://www.transparenttextures.com/patterns/debut-light.png");
  width: 100%; /* Ensure full width */
}

.gallery-container-2 > h2 {
  /* flex-direction: column; Removed */
  color: var(--text);
  font-size: 30px;
  font-weight: 600;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 50px;
  position: relative;
  text-align: center;
}

.gallery-container-2 > h2::after {
  content: "";
  position: absolute;
  /* top: 50px; */ /* Use bottom */
  bottom: -10px; /* Position below text */
  left: 50%;
  transform: translateX(-50%) scaleX(0.2);
  transform-origin: center;
  /* bottom: -2px; Removed */
  width: 80%; /* Relative width */
  max-width: 200px; /* Max width */
  height: 3px;
  background-color: var(--primary);
  transition: transform 0.3s ease;
  border-radius: 10px;
  /* margin-top: -10px; Removed */
}

/* Add hover effect for h2::after if desired */
.gallery-container-2:hover > h2::after {
  transform: translateX(-50%) scaleX(1);
}

.gallery-grid {
  display: grid;
  /* grid-template-columns: repeat(3, minmax(200px, 1fr)); */ /* Original */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsive */
  gap: 20px; /* Increased gap */
  /* margin: 0 150px; Removed fixed margin */
  width: 100%;
  max-width: 1200px; /* Max width for grid */
}

.gallery-item {
  overflow: hidden;
  border-radius: 8px;
  display: flex; /* Keep flex */
  justify-content: center;
  align-items: center;
  /* height: 250px; Removed fixed height */
  aspect-ratio: 4 / 3; /* Example aspect ratio */
  background-color: #ddd; /* Placeholder background */
  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
    rgba(60, 64, 67, 0.15) 0px 1px 3px 1px; /* Added shadow */
}

.gallery-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
  transition: transform 0.3s ease;
  display: block; /* Remove potential bottom space */
}

.gallery-image:hover {
  transform: scale(1.05);
}

/*--------------- MODAL (Image Lightbox) ---------------- */
.modal {
  position: fixed;
  z-index: 1001; /* Ensure above header */
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.9);
  display: none; /* Controlled by JS */
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 20px; /* Add padding for spacing */
  box-sizing: border-box;
}

.modal-content {
  display: block;
  max-width: 90vw; /* Use viewport width */
  max-height: 80vh; /* Use viewport height */
  width: auto; /* Allow image to determine width */
  height: auto; /* Allow image to determine height */
  object-fit: contain;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.7);
  margin-bottom: 15px; /* Space between image and caption */
}

.close {
  position: absolute;
  top: 20px; /* Adjusted */
  right: 30px; /* Adjusted */
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
  line-height: 1; /* Ensure tight bounding box */
  transition: color 0.3s ease; /* Add transition */
}

#caption {
  display: block;
  text-align: center;
  color: #ccc; /* Slightly dimmer color */
  font-size: 16px; /* Adjusted */
  margin-top: 10px; /* Space above caption */
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
}

.back-button {
  display: inline-flex; /* Changed */
  align-items: center;
  justify-content: center;
  padding: 12px 25px; /* Adjusted padding */
  background-color: var(--primary);
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  text-decoration: none;
  border-radius: 5px;
  margin-top: 40px; /* Increased margin */
  /* height: 50px; Removed fixed height */
  /* width: 150px; Removed fixed width */
  transition: background-color 0.3s ease, transform 0.3s ease,
    box-shadow 0.3s ease; /* Added transitions */
  border: none; /* Added */
  cursor: pointer; /* Added */
}

.back-button:hover {
  background-color: #e7a828;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  transform: translateY(-2px); /* Add slight lift */
}

.back-button:active {
  background-color: #e7a828;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  transform: scale(0.99); /* Adjusted scale */
}

/*--------------- FIXED HEIGHTS (Review/Remove if possible) ---------------- */
/* Avoid fixed heights where possible, let content dictate height */
#rights,
#rights_2,
#rights_3,
#rights_4 {
  height: auto; 
  min-height: 500px;
}

#rights_title > h3 {
  padding-top: 20px;
  margin-bottom: -15px;
}

/* ========================================================== */
/* ============= TABLET / SMALL DESKTOP STYLES ============== */
/* ========================================================== */
@media (max-width: 1024px) {
  main {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: #f1f1f1;
    background-image: url("https://www.transparenttextures.com/patterns/debut-light.png");
  }

  /* --- Header --- */
  .nav {
    padding: 10px 20px; /* Adjust padding */
  }
  .nav-links {
    width: auto; /* Allow flexible width */
    max-width: none; /* Remove max-width if needed */
    justify-content: flex-start;
    gap: 25px; /* Adjust gap */
    margin: 10px 0 10px 20px; /* Adjust margin */
  }
  .nav-links a {
    font-size: 15px;
  }
  .nav-login {
    right: 20px; /* Adjust position */
    bottom: 12px;
  }
  .nav-logo > img[src*="logo"] {
    width: 60px;
    height: auto; /* Maintain aspect ratio */
  }
  .nav-logo > img[src*="text"] {
    width: 65px;
    height: auto; /* Maintain aspect ratio */
    margin-top: 0; /* Adjust alignment */
    vertical-align: middle;
  }

  /* --- Slider --- */
  .slider-container {
    height: 450px; /* Slightly reduce height */
  }

  /* Adjust the wrapper, not the image directly */
  .slide-item {
    flex-basis: 65%; /* Increase item width slightly */
    margin: 0 10px; /* Reduce margin between items */
    /* Height remains 100% */
    /* Opacity, filter etc. remain as base */
  }
  /* .slide-item img styles remain as base (using object-fit: contain) */

  .slider-controls {
    padding: 0 15px; /* Reduce padding */
  }

  .slider-btn {
    width: 38px; /* Slightly smaller */
    height: 38px;
  }

  .slider-btn i {
    font-size: 16px; /* Slightly smaller icon */
  }

  .slider-indicators {
    /* Position remains same */
    gap: 9px; /* Slightly adjust gap */
  }

  .indicator {
    width: 25px; /* Slightly smaller indicator */
  }

  /* --- Upcoming Container --- */
  .upcoming-container {
    padding: 50px 20px;
    margin-bottom: -55px; /* Adjust overlap */
  }
  .a1 {
    width: clamp(280px, 80%, 350px); /* Responsive width with min/max */
    padding: 20px;
  }

  /* --- Performance Cards --- */
  .upcoming-performances-container {
    padding: 0; /* Reduce padding */
    margin-top: 120px;
  }
  .upcoming-performances {
    padding: 30px 15px; /* Adjust padding */
    border-width: 8px; /* Thinner border */
  }
  .upcoming-performances-grid {
    gap: 25px; /* Adjust gap */
  }
  .perf-info {
    padding: 20px 25px; /* Adjust padding */
  }

  /* --- Contact Card --- */
  .contact-container {
    padding: 60px 20px;
  }
  .contact {
    max-width: 90%; /* Allow slightly more width */
  }
  .contact-card {
    gap: 25px; /* Adjust gap */
    padding: 25px;
    flex-direction: column; /* Stack columns earlier */
  }
  .contact-info,
  .tickets-info,
  .about-info {
    flex-basis: auto; /* Reset basis */
    width: 100%; /* Full width when stacked */
  }

  /* --- Footer --- */
  .footer-content {
    gap: 30px; /* Reduce gap */
    padding: 0 20px; /* Add padding */
    justify-content: space-around; /* Adjust justification */
  }
  .footer-logo,
  .footer-links,
  .footer-contact,
  .footer-social {
    min-width: 180px; /* Adjust min-width */
  }

  /* --- Gallery Grids --- */
  .gallery-container {
    padding: 70px 20px 50px 20px;
  }
  .gallery-container > .star {
    left: 20px; /* Adjust star position */
    top: 60px;
  }
  .grid {
    /* 4-col becomes 3-col */
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 15px;
    /* max-width: 95%; Removed */
  }
  .gallery-container-2 {
    padding: auto 20px;
  }
  .gallery-grid {
    /* 3-col stays 3-col or becomes 2? */
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* Keep 3 */
    gap: 15px;
    /* max-width: 95%; Removed */
  }
  .gallery-item {
    aspect-ratio: 1 / 1; /* Make square */
  }

  /* --- Modal --- */
  .modal-content {
    max-width: 90vw;
    max-height: 85vh;
  }

  footer {
    flex-shrink: 0;
  }

  #rights_title > p {
    margin-top: 20px;
  }
}

/* ========================================================== */
/* ==================== MOBILE STYLES ======================= */
/* ========================================================== */
@media (max-width: 768px) {
  /* --- Base Adjustments --- */
  h2 {
    font-size: 24px !important; /* Use !important carefully if needed */
  }
  h3 {
    font-size: 18px !important; /* Use !important carefully if needed */
  }
  body {
    font-size: 15px;
  }

  /* --- Header --- */
  .nav {
    padding: 10px 15px;
    min-height: 60px;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    position: relative;
  }
  .nav-logo {
    width: auto;
    margin-bottom: 0; /* Override potential bottom margin */
  }
  .nav-logo > img[src*="logo"] {
    width: 50px;
    height: auto;
    margin-left: 0;
    vertical-align: middle;
  }
  .nav-logo > img[src*="text"] {
    width: 55px;
    height: auto;
    margin: 0 0 0 10px;
    vertical-align: middle;
  }
  .nav-toggle {
    display: block;
    /* transform: none; Reset from tablet if needed */
    order: 3; /* Place after logo/login */
    margin-left: 10px;
    cursor: pointer;
    background: none;
    border: none;
    color: white;
    font-size: 28px;
    padding: 0 5px;
    line-height: 1;
    position: relative; /* Ensure stacking context */
    z-index: 15; /* Higher than dropdown */
  }
  .nav-links {
    display: flex; /* Keep flex for layout */
    flex-direction: column;
    align-items: center;
    order: 4; /* Appear last */
    width: 100%;
    margin: 0; /* Reset margin */
    background-color: var(--primary);
    position: absolute;
    top: 100%; /* Position below nav */
    left: 0;
    padding: 10px 0;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 8px 16px 0px;
    gap: 0; /* Reset gap */
    list-style: none;
    /* Animation Properties */
    opacity: 0;
    transform: translateY(-10px);
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out,
      visibility 0.3s ease-in-out;
    z-index: 10; /* Below toggle */
  }
  .nav-links.nav-links-open {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
  }
  .nav-links li {
    position: relative;
    width: 100%;
    text-align: center;
  }
  .nav-links li:not(:last-child)::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 20px;
    width: calc(100% - 40px);
    height: 1px;
    background-color: rgba(255, 224, 195, 0.5);
  }
  .nav-links a {
    padding: 16px 20px;
    width: 100%;
    box-sizing: border-box;
    color: rgb(255, 255, 255);
    text-decoration: none;
    display: inline-block; /* Allow padding and width */
  }
  .nav-links a::after {
    /* Hide hover underline effect on mobile */
    display: none;
  }
  .nav-login {
    position: static; /* Back in flow */
    order: 2; /* Before toggle */
    margin: 0;
    padding-left: 10px;
  }

  /* --- Slider (Mobile Override) --- */
  .slider-container {
    height: 300px; /* Reduce height significantly */
    background-color: transparent; /* REMOVE background color */
    background-image: none; /* REMOVE background image */
  }

  .slider-container::before {
    /* HIDE the gradient overlay */
    opacity: 0;
    pointer-events: none; /* Ensure it doesn't interfere */
  }

  #imageSlider {
    padding: 0; /* Remove vertical padding */
    /* justify-content: center; becomes irrelevant with absolute positioning */
    /* align-items: center; becomes irrelevant */
  }

  /* Change layout completely: Stack items, show only active */
  .slide-item {
    position: absolute; /* Stack all items */
    top: 0;
    left: 0;
    width: 100%; /* Item takes full width */
    height: 100%; /* Item takes full height */
    flex-basis: auto; /* Override desktop flex-basis */
    margin: 0; /* REMOVE margins */
    opacity: 0; /* Hide non-active items */
    filter: none; /* REMOVE filter effects */
    z-index: 1; /* Base stack level */
    transition: opacity 0.5s ease-in-out; /* Fade transition */
    /* display: flex properties are still useful if needed, but less critical */
  }

  .slide-item.active {
    opacity: 1; /* Make active item visible */
    z-index: 2; /* Bring active item to front */
    /* It inherits position: absolute, width: 100%, height: 100% */
  }

  /* Change how the image fits within the item */
  .slide-item img {
    object-fit: cover; /* Make image COVER the container area */
  }

  /* Adjust controls */
  .slider-controls {
    padding: 0 10px; /* Reduce padding */
    /* z-index: 10; remains */
  }

  .slider-btn {
    width: 35px; /* Smaller buttons */
    height: 35px;
  }

  .slider-btn i {
    font-size: 16px; /* Icon size */
  }

  /* Adjust indicators */
  .slider-indicators {
    bottom: 8px; /* Move slightly up */
    gap: 8px; /* Reduce gap */
    /* z-index: 10; remains */
  }

  .indicator {
    width: 20px; /* Smaller indicators */
  }

  /* --- Upcoming Container (Nächste Vorstellung) --- */
  .upcoming-container {
    padding: 40px 15px;
    margin-bottom: -65px; /* Adjust overlap */
    min-height: auto; /* Remove min height */
  }
  .upcoming-main {
    /* display: flex; Already flex */
    /* flex-direction: column; Already column */
    /* align-items: center; Already center */
    width: 100%;
  }
  .upcoming-main > h2 {
    margin-bottom: 30px;
    text-align: center;
  }
  .upcoming-main > h2::after {
    /* top: 115%; Use bottom */
    bottom: -8px; /* Adjust position */
    max-width: 100px;
  }
  .a1 {
    width: 90%;
    max-width: 350px;
    padding: 20px;
    height: auto; /* Auto height */
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
  .show-title {
    font-size: 18px;
    margin-top: 15px;
  }
  .show-date,
  .show-location {
    font-size: 14px;
    margin-top: 15px;
  }

  .btn {
    /* General Button Style */
    padding: 12px 22px;
    font-size: 15px;
    margin-top: 20px;
    /* Inherits most styles */
  }
  .star {
    display: none; /* Hide decorative star */
  }

  /* --- Upcoming Performances --- */
  .upcoming-performances-container {
    padding: 0; /* Reduce padding */
    margin-top: 120px;
  }
  .upcoming-performances {
    padding: 20px 15px; /* Adjust padding */
    border-width: 5px; /* Thinner border */
  }
  .upcoming-performances > h2 {
    margin-bottom: 30px;
    margin-top: 10px; /* Reduce top margin */
  }
  .upcoming-performances > h2::after {
    /* top: 115%; Use bottom */
    bottom: -8px; /* Adjust position */
    max-width: 100px;
  }
  .upcoming-performances-grid {
    gap: 20px; /* Reduce gap */
  }

  .perf-card {
    min-width: 0; /* Override base min-width */
    flex-direction: column; /* Stack vertically */
    width: 100%;
    max-width: 400px; /* Add max-width for better readability */
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    overflow: hidden;
  }

  .perf-date {
    width: 100%;
    padding: 15px;
    flex-direction: row; /* Date side-by-side */
    justify-content: center;
    gap: 15px;
    box-sizing: border-box;
  }
  .perf-day {
    font-size: 16px;
  }
  .perf-time {
    font-size: 16px; /* Consistent size */
    margin-top: 0;
  }

  .perf-info {
    width: 100%;
    padding: 20px;
    align-items: center; /* Center content */
    text-align: center;
    box-sizing: border-box;
  }
  .perf-title {
    font-size: 18px;
    margin-bottom: 10px; /* Reduce margin */
  }
  .perf-desc {
    font-size: 15px;
    margin-bottom: 10px; /* Reduce margin */
  }
  .perf-actors {
    font-size: 14px;
    margin-bottom: 15px; /* Reduce margin */
  }

  .perf-btn {
    margin: 15px auto 0 auto; /* Center button */
    max-width: 90%;
    box-sizing: border-box;
    padding: 10px 20px; /* Adjust padding */
    font-size: 14px;
  }

  /* Text wrapping rules for mobile */
  .perf-title,
  .perf-desc,
  .perf-actors {
    overflow-wrap: break-word;
    word-break: break-word; /* fallback */
    max-width: 100%;
  }

  /* --- Contact --- */
  .contact-container {
    padding: 50px 15px;
  }
  .contact {
    width: 100%;
    max-width: 100%; /* Override tablet max-width */
  }
  .contact > h2 {
    margin-bottom: 30px;
  }
  .contact > h2::after {
    /* top: 115%; Use bottom */
    bottom: -8px; /* Adjust position */
    max-width: 100px;
  }
  .contact-card {
    width: 100%;
    flex-direction: column; /* Already column from tablet */
    padding: 20px; /* Adjust padding */
    gap: 0; /* Remove gap, use margin */
  }
  .contact-info,
  .tickets-info,
  .about-info {
    flex-basis: auto;
    width: 100%;
    padding: 20px 0; /* Vertical padding only */
  }
  .contact-info:not(:last-child),
  .about-info:not(:last-child) {
    border-bottom: 1px solid #eee; /* Add separator */
    margin-bottom: 20px; /* Space below separator */
    padding-bottom: 20px; /* Space above separator */
  }
  .contact-info h3,
  .tickets-info h3,
  .about-info h3 {
    /* font-size: 20px; Use base h3 */
    margin-bottom: 10px;
  }
  .contact-info p,
  .tickets-info p,
  .about-info p {
    /* font-size: 15px; Use base body */
    margin-bottom: 10px;
  }

  /* --- Footer --- */
  footer {
    padding: 50px 15px 20px 15px; /* Adjust padding */
  }
  .footer-content {
    flex-direction: column; /* Stack columns */
    align-items: center; /* Center items */
    text-align: center; /* Center text */
    gap: 30px;
    width: 100%;
    padding: 0; /* Remove padding, container handles it */
  }
  .footer-logo {
    flex-basis: auto;
    margin-bottom: 10px;
    order: -1; /* Logo first */
    display: flex;
    text-align: center; /* Center logo */
    justify-content: center;
    align-items: center; /* Center logo */
  }
  .footer-links,
  .footer-contact,
  .footer-social {
    width: 100%;
    min-width: unset;
    align-items: center; /* Center content */
    text-align: center; /* Ensure text centers */
  }
  .footer-links h3,
  .footer-contact h3,
  .footer-social h3 {
    display: block; /* Ensure heading takes full width */
  }
  .footer-links h3:after,
  .footer-contact h3:after,
  .footer-social h3:after {
    left: 50%; /* Center underline */
    transform: translateX(-50%);
    width: 40px; /* Shorter underline */
  }
  .footer-links ul {
    padding-left: 0; /* Remove indent */
  }
  .social-links {
    justify-content: center; /* Center social icons */
    margin-top: 5px; /* Adjust space */
  }
  .footer-bottom {
    width: 100%;
    padding: 20px 15px 0 15px;
    margin-top: 30px; /* Adjust space */
  }

  /* --- Gallery --- */
  .gallery-container {
    padding: 50px 15px 30px 15px;
  }
  .gallery-container > .star {
    display: none; /* Hide star */
  }
  .gallery-main {
    max-width: 100%; /* Override tablet max-width */
  }
  .gallery-main > h2 {
    margin-bottom: 30px;
  }
  .gallery-main > h2::after {
    /* Add underline style if desired */
    /* top: 115%; Use bottom */
    bottom: -8px;
    max-width: 100px;
  }
  .grid {
    /* 4/3-col becomes 2-col */
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }

  .btn-gal {
    width: 80%;
    max-width: 300px;
    padding: 12px 20px;
    font-size: 15px;
  }

  /* --- Gallery Page 2 --- */
  .gallery-container-2 {
    padding: 50px 15px;
  }
  .gallery-container-2 > h2 {
    margin-bottom: 30px;
  }
  .gallery-container-2 > h2::after {
    /* top: 115%; Use bottom */
    bottom: -8px;
    max-width: 100px;
    /* margin-top: 2px; Removed */
  }
  .gallery-grid {
    /* 3/2-col becomes 2-col */
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    width: 100%;
    max-width: 100%; /* Override tablet max-width */
  }
  .gallery-item {
    /* Aspect ratio handles size */
    aspect-ratio: 1 / 1; /* Square */
  }
  .back-button {
    width: 60%;
    max-width: 200px;
    padding: 12px 20px;
    font-size: 15px;
  }

  /* --- Modal --- */
  .modal-content {
    max-width: 95vw;
    max-height: 75vh;
  }
  #prevArrow, #nextArrow {
    font-size: 23px !important;
    padding: 12px 12px !important;
    background-color: rgba(0,0,0,0.2) !important; 
    border-radius: 50% !important;
  }

  #prevArrow {
    left: 10px !important;
    top: 46% !important;
  }

  #nextArrow {
    right: 10px !important;
    top: 46% !important;
  }
  .close {
    top: 15px;
    right: 20px;
    font-size: 30px;
  }
  #caption {
    font-size: 14px;
  }

  /* --- Fixed Heights (Remove or adjust) --- */
  #rights,
  #rights_2,
  #rights_3,
  #rights_4 {
    height: auto; /* Let content determine height */
    min-height: 300px; /* Optional: Ensure minimum space */
  }

  #rights_title > h3 {
    padding-bottom: 25px;
  }
}