/*
Theme Name: WP_Julia_Araujo
Author: Christoph Schuetze
Author URI: 
Description: Theme für Julia Araujo
Version: 1.0
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
*/

/* ------------------------
   Basis-Setup
------------------------ */
@font-face {
  font-family: "LexendPeta";
  src: url("/wp-content/themes/WP_Julia_Araujo/assets/fonts/Lexend_Peta/LexendPeta-VariableFont_wght.ttf")
    format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Moderustic";
  src: url("/wp-content/themes/WP_Julia_Araujo/assets/fonts/Moderustic/Moderustic-VariableFont_wght.ttf")
    format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --text-dark: #f4f4f4;
  --text-light: #171717;
  --bg-light: #f4f4f4;
  --bg-dark: #0c0c0c;
  --red: #bb2d38;
  --grey: #a3aaaa;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Moderustic", sans-serif;
  background-color: var(--bg-dark);
  color: var(--text-dark);
  font-size: 16px;
}

p {
  margin-bottom: 16px !important;
}

@media (min-width: 768px) {
  p {
    margin-bottom: 30px !important;
  }
}

.paragraph-s {
  font-size: 14px;
  line-height: 23px;
}

/* ------------------------
   Navbar
------------------------ */

.custom-navbar {
  height: 80px;
  background-color: rgba(12, 12, 12, 0.95);
  position: fixed;
  width: 100%;
  z-index: 1050;
}

#navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  z-index: 1000;
  /* Start dunkel, kein helles Overlay */
  background-color: rgba(12, 12, 12, 0.95);
  background-image: linear-gradient(
    to bottom,
    rgba(244, 244, 244, 0.95) 0%,
    rgba(244, 244, 244, 0.95) 100%
  );
  transition: background-size 0.3s ease;
  background-repeat: no-repeat;
  background-size: 100% 0%; /* zu Beginn keine helle Fläche */
}

/* === Menü versteckt (mobile) === */
.nav-menu {
  position: absolute;
  top: 80px;
  left: 0;
  right: 0;
  background-color: rgba(244, 244, 244, 0.95);
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease;
}

.nav-menu.open {
  max-height: 500px; /* oder auto per JS */
}

/* === Hamburger Button === */
.menu-toggle {
  border: none;
  background: none;
  padding: 3px 18px 0 0;
  cursor: pointer;
  z-index: 1051;
  padding-bottom: 20px;
}

.menu-toggle:focus {
  outline: none;
}

.menu-toggle .line {
  stroke: var(--text-dark);
  transition: transform 0.3s ease, opacity 0.3s ease, stroke 0.3s ease;
  transform-origin: center;
}

/* Aktiviertes Menü -> X Symbol */
.menu-toggle.active .line1 {
  transform: rotate(-45deg) translate(-1px, -12px);
}

.menu-toggle.active .line5 {
  transform: rotate(45deg) translate(0px, 13px);
}

.menu-toggle.active .line2,
.menu-toggle.active .line3,
.menu-toggle.active .line4 {
  opacity: 0;
}

.menu-toggle.active .line {
  stroke: #000;
}

.nav-link {
  color: var(--text-light);
  text-align: center;
  font-family: "LexendPeta";
  font-size: 22px;
  font-style: normal;
  font-weight: 200;
  line-height: normal;
  text-transform: uppercase;
  padding: 0 !important;
  overflow: hidden;
}

.nav-link span {
  transition: letter-spacing 0.3s ease-out;
}

.nav-link span:hover {
  letter-spacing: 3.08px;
}

.navbar-nav .nav-link:hover {
  color: var(--text-light);
}

.navbar-nav .nav-link.active {
  font-weight: 400;
  color: var(--text-light) !important;
}

.navbar-nav .nav-link:focus {
  color: var(--text-light) !important;
}

.brand:hover,
.logo:hover {
  letter-spacing: normal;
}

.brand:focus,
.logo:focus {
  letter-spacing: normal;
}

.brand-mobile {
  text-decoration: none;
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  margin: 0 auto;
  padding-top: 10px;
}

.brand-md {
  text-decoration: none;
  width: 76%;
  height: 118px;
  position: absolute;
  top: 130px;
  right: 0%;
  text-align: center;
  margin: 0 auto;
}

.title,
.subtitle {
  color: var(--red);
  text-align: center;
  font-family: "LexendPeta";
  font-style: normal;
  margin: 0;
}

.title {
  font-size: 22px;
  font-weight: 900;
  line-height: 28px;
}

.subtitle {
  font-size: 17px;
  font-weight: 300;
  line-height: 21px;
  text-transform: uppercase;
  width: 75%;
  position: relative;
  left: 15%;
}

.navbar-nav {
  gap: 21px;
}

.separator {
  display: inline-block;
  width: 1px;
  height: 18px;
  background-color: var(--bg-dark);
  line-height: 0;
  font-size: 0;
  align-self: center;
}

/* ------------------------
   Language-Menu
------------------------ */
.wpml-language-switcher {
  position: absolute;
  display: none;
  top: 55px;
  right: 25px;
  z-index: 1100;
}

.menu-toggle.active ~ .wpml-language-switcher {
  display: block;
}

nav .dropdown-toggle {
  color: var(--text-light);
  text-align: center;
  font-family: "LexendPeta";
  font-size: 17px;
  font-style: normal;
  font-weight: 200;
  line-height: normal;
  text-transform: uppercase;
  padding-bottom: 6px !important;
}

nav .dropdown-menu {
  background-color: transparent;
  border: none;
  min-width: 100%;
  padding: 0 !important;
}

nav .dropdown-menu.show {
  margin-top: -2px !important;
  border-radius: 0;
}

nav .dropdown-item {
  color: var(--text-light);
  text-align: center;
  font-family: "LexendPeta";
  font-size: 17px;
  font-style: normal;
  font-weight: 200;
  line-height: normal;
  text-transform: uppercase;
  width: auto;
  display: inline-block;
}

nav .dropdown-toggle {
}

nav .dropdown-item:hover,
nav .dropdown-toggle:hover {
  color: var(--text-light);
  background-color: transparent;
}

.wpml-language-switcher .nav-link span {
  letter-spacing: normal;
  transition: font-weight 0.3s ease;
}

.wpml-language-switcher .nav-link span:hover {
  font-weight: 400;
}

/* ------------------------------------------------------------------------------------
                                      Frontpage                                       
---------------------------------------------------------------------------------------*/

/* ------------------------
   Header-Section
------------------------ */

.header-bg {
  background-color: #070604;
  overflow: hidden;
}

.header-wrapper {
  position: relative;
  max-width: 2000px;
  left: 50%;
  transform: translateX(-50%);
}

.hero-wrapper {
  position: relative;
  width: 100%;
  height: 620px;
  padding-top: 0; /* Wrapper flexibel, Höhe nur durch Inhalt oder CSS */
  box-sizing: border-box;
  background-color: #070604;
  overflow: hidden;
}

.hero-bg {
  position: absolute; /* Bild liegt über/unter Wrapper */
  top: 12px;
  left: 38%;
  transform: translateX(-50%);
  width: 589px; /* volle Breite */
  height: 883px; /* feste Höhe */
  background-image: url("https://dev.juliaaraujoofficial.com/wp-content/themes/WP_Julia_Araujo/assets/images/titleimage.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

.title-text {
  position: absolute;
  right: clamp(14px, calc(14px + ((100vw - 320px) * 0.42013)), 202px);
  bottom: 14px;
  text-align: center;
  font-weight: 300;
  font-size: 40px;

  /* Headings/H1 A –S */
  font-family: "Moderustic";
}

/* ------------------------
   About-Section
------------------------ */

.about-teaser-wrapper {
  gap: 30px;
  background-color: var(--bg-light);
  color: var(--text-light);
  padding: 20px 20px 50px 23px;
}

.about-teaser-text {
  max-width: 400px;
}

.about-teaser-button {
  display: flex;
  max-width: 450px;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  color: var(--red);
  font-weight: 500;
  font-size: 15px;
  line-height: 19px;
  text-decoration: none;
  font-family: "LexendPeta";
  width: 100%;
}

.about-teaser-button-wrapper {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  justify-content: end;
}

.arrow {
  overflow: visible;
}

.arrow .line {
  transform-origin: right center; /* Ursprung rechts, damit die Spitze fix bleibt */
  transform: scaleX(1);
  transition: transform 0.3s ease;
}

.about-teaser-button-wrapper:hover .arrow .line {
  transform: scaleX(1.5); /* Linie wächst nach links */
}

.read-more-text {
  width: 200px;
}

/* ------------------------
   Events-Section
------------------------ */

.bg-events {
  background-color: #d1d1cf;
  overflow: hidden;
}

.events-bg-image-wrapper {
  background: #d1d1cf;
  max-width: 2000px;
  left: 50%;
  transform: translateX(-50%);
  position: relative;
}

.events-teaser-wrapper {
  display: flex;
  padding: 55px 0 69px 0;
  flex-direction: column;
  align-items: center;
  gap: 50px;
  background: var(--red);
  justify-content: center;
}

.events-teaser-headline {
  color: var(--text-dark);
  text-align: center;

  /* Headings/H2 –S */
  font-family: "Moderustic";
  font-size: 22px;
  font-style: normal;
  font-weight: 400;
  line-height: 25px; /* 113.636% */
}

.events-container {
  display: flex;
  max-width: 770px;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.calendar-box {
  background: var(--bg-light);
  display: flex;
  width: 320px;
  padding: 0 10px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.calendar-box:nth-of-type(n + 3) {
  display: none;
}

.calendar-text {
  display: flex;
  padding: 20px 0 32px 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
}

.event-typo {
  display: flex;
  color: #000;
  font-family: "Moderustic";
  text-align: center;
  flex-direction: column;
  justify-content: center;
  font-style: normal;
  line-height: normal;
}

.event-date {
  height: 57px;

  /* Calendar/Date Calendar –S */
  font-family: "LexendPeta";
  font-size: 32px;
  font-weight: 800;
}

.event-place {
  height: 65px;

  /* Calendar/Location Calendar –S */
  font-size: 18px;
  font-weight: 300;
}

.event-title {
  height: 75px;

  /* Calendar/Production Calendar –S */
  font-size: 18px;
  font-weight: 500;
}

.event-role {
  height: 39px;

  /* Calendar/Role Calendar –S */
  font-size: 14px;
  font-weight: 300;
}

.events-button {
  align-items: center;
  color: var(--text-dark);
}

.events-button-wrapper {
  justify-content: center;
}

/* ------------------------
   Reviews-Section
------------------------ */

.bg-reviews {
  background-color: var(--grey);
}

.reviews-wrapper {
  display: flex;
  padding: 90px 13px 50px 13px;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  background-color: var(--grey);
  position: relative;
}

.quote-symbol {
  width: 263px;
  color: #000;
  text-align: center;
  font-family: "LexendPeta";
  font-size: 160px;
  font-style: normal;
  font-weight: 900;
  line-height: 38px; /* 23.75% */
}

#reviewsCarousel p,
.reviewsCarousel p {
  margin: 0;
}

.review-slide {
  opacity: 0;
  transition: opacity 1s ease-in-out;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
  pointer-events: none;
  padding-bottom: 53px;
}

.reviews-overlay {
  position: relative;
}

.review-text-wrapper {
  display: flex;
  max-width: 430px;
  flex-direction: column;
  align-items: center;
  gap: 33px;
}

.review-typo {
  color: #000;
  text-align: center;
  font-family: "Moderustic";
  font-style: normal;
}

.review-text {
  /* Review/Paragraph  review Teaser –S */
  font-size: 15px;
  font-weight: 400;
  line-height: 23px; /* 153.333% */
}

.review-author {
  /* Paragraph S Link */
  font-size: 13px;
  font-weight: 300;
  line-height: 23px;
  padding-top: 6px;
  display: inline-block;
}

a > .review-author {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: 1.5%;
  text-underline-offset: 16.5%;
  text-underline-position: from-font;
}

#reviewsCarousel a,
.reviewsCarousel a {
  text-decoration: none;
  color: inherit;
}

.review-title {
  /* Review/Title review teaser –S */
  font-family: "LexendPeta";
  font-size: 17px;
  font-weight: 800;
  line-height: 24px; /* 141.176% */
}

.review-place {
  /* Review/Location review teaser –S */
  font-size: 13px;
  font-weight: 300;
  line-height: 18px;
  padding-top: 15px;
}

.sliderpoints {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 28px;
  position: absolute;
  z-index: 2;
  bottom: 30px;
}

.arrow-left {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: -53px;
}

.arrow-right {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: -53px;
}

.sliderpoint.active {
  opacity: 1;
  z-index: 1;
}

.sliderpoints svg:hover {
  cursor: pointer;
}

.sliderpoint svg {
  width: 13px;
  height: 13px;
  aspect-ratio: 1/1;
  stroke-width: 1px;
  stroke: var(--0, #171717);
  display: block;
}

.sliderpoint.active circle {
  fill: #171717;
}

.review-slide.active {
  opacity: 1;
  position: relative;
  z-index: 2;
  pointer-events: all;
}

/* ------------------------
   Gallery-Section
------------------------ */

.bg-gallery {
  background-color: #171717;
}

.gallery-wrapper {
  padding: 12px 0 60px;
}

.gallery-grid {
  max-width: 700px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: auto; /* Höhe wird dynamisch gesetzt */
}

.gallery-tile {
  position: absolute;
  transition: transform 0.5s ease, width 0.5s ease, height 0.5s ease;
  overflow: hidden;
}

.gallery-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.img-overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.caption {
  color: #0c0c0c;
  background-color: rgba(244, 244, 244, 0.7);
  padding: 0 6px;
  font-family: "Moderustic";
  font-size: 13px;
  font-style: normal;
  font-weight: 300;
  line-height: normal;
  position: absolute;
  bottom: 8px;
  left: 15px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.img-overlay:hover .caption {
  opacity: 1;
}

.gallery-button {
  padding-top: 30px;
  width: 100% !important;
  max-width: 100% !important;
}
/* ------------------------
   Footer-Section
------------------------ */

.site-footer {
  background-color: var(--text-light);
  display: flex;
  min-width: 320px;
  padding-top: 12px;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.footer-icons-wrapper {
  display: flex;
  align-items: center;
  gap: 30px;
}

.instagram-icon svg {
  width: 38px;
  height: 38px;
}

.instagram-icon,
.mail-icon {
  transition: transform 0.3s ease;
}

.instagram-icon:hover,
.mail-icon:hover {
  transform: scale(1.2);
}

.mail-icon svg {
  width: 38px;
  height: 38px;
}

.footer-nav {
  padding: 8px 20px 21px 20px;
  gap: 14px;
  align-self: stretch;
  list-style: none;
  margin: 0;
}

.footer-nav .nav-link {
  color: #f1f1f1;
  text-align: right;
  font-family: "Moderustic";
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: none;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
}

.copyright {
  color: var(--Wei, #f1f1f1);
  font-family: Moderustic;
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

/* ------------------------
   Tablet-Styles
------------------------ */

@media (min-width: 768px) {
  .paragraph-m {
    font-size: 16px;
    line-height: 25px;
  }

  /* ------------------------
   Navbar
------------------------ */

  #navbar {
    background: linear-gradient(
      180deg,
      rgba(12, 12, 12, 0.95) 0px,
      rgba(12, 12, 12, 0.95) 50px,
      rgba(12, 12, 12, 0.7) 100%
    );
    background-size: 100% 100%; /* Gradient direkt sichtbar */
    transition: none; /* keine Animation auf Desktop */
  }

  .nav-menu {
    position: static;
    max-height: none;
    background: transparent;
    flex-direction: row;
    justify-content: center;
    overflow: visible;
    transition: none;
  }

  .nav-menu,
  .navbar-nav {
    flex-direction: row !important;
  }

  .navbar-nav {
    gap: 24px;
  }

  .navbar-nav:lang(es) {
    gap: 16px;
  }

  .logo {
    padding-right: 48px !important;
  }

  .logo:lang(es) {
    padding-right: 16px !important;
  }

  .nav-link {
    color: #fff;
    text-align: center;
    font-family: "LexendPeta";
    font-size: 16px;
    font-style: normal;
    font-weight: 200;
    line-height: 20px;
    text-transform: uppercase;
  }
  .separator {
    background-color: var(--bg-light);
  }

  .navbar-nav .nav-link:hover,
  .navbar-nav .nav-link.active,
  .navbar-nav .nav-link:focus {
    color: var(--text-dark) !important;
  }

  .navbar-collapse {
    padding-top: 0px;
    padding-bottom: 0px;
  }

  .title-text {
    right: clamp(21px, calc(21px + ((100vw - 768px) * 0.31537)), 220px);
    bottom: 293px;
    font-size: 50px;
  }

  .title {
    font-size: 27px;
  }

  .subtitle {
    font-size: 19px;
    line-height: 24px;
    text-transform: uppercase;
    width: 34.36%;
    position: relative;
    left: 30%;
  }

  /* ------------------------
   Language-Menu
------------------------ */

  nav .dropdown-toggle {
    color: #fff;
    padding-right: 10px !important;
  }

  nav .dropdown-item {
    color: #fff;
  }

  nav .dropdown-menu.show {
    display: flex;
    flex-direction: column;
  }

  nav .dropdown-menu {
    background-color: rgba(12, 12, 12, 0.7);
  }

  nav .dropdown-item:hover,
  nav .dropdown-toggle:hover {
    color: #fff;
  }

  /* ------------------------
   Header-Section
------------------------ */

  .hero-wrapper {
    height: 760px;
  }

  .hero-bg {
    position: absolute; /* Bild liegt über/unter Wrapper */
    top: 43px;
    width: 533px; /* volle Breite */
    height: 816px; /* feste Höhe */
  }

  /* ------------------------
   About-Section
------------------------ */

  .about-teaser-wrapper {
    padding: 68px 50px 75px 50px;
  }

  .about-teaser-text {
    max-width: 900px;
  }

  .read-more-text {
    width: auto;
  }

  .about-teaser-button {
    max-width: 900px;
  }

  /* ------------------------
   Events-Section
------------------------ */

  .events-bg-image-wrapper {
    display: flex;
    padding: 0;
    flex-direction: column;
    align-items: center;
    gap: 76px;
    align-self: stretch;
    position: relative;
  }

  .events-teaser-wrapper {
    min-height: 690px;
    width: 44.9%;
    z-index: 2;
  }

  .events-container {
    padding: 0 20px;
    flex-direction: row;
    justify-content: space-between;
  }

  .events-teaser-headline {
    /* Headings/H2 –S */
    font-size: 28px;
    line-height: 31px; /* 113.636% */
  }

  .calendar-box {
    width: 350px;
    padding: 0 15px;
  }

  .calendar-text {
    padding: 40px 0;
    gap: 0px;
  }

  .event-date {
    height: 50px;

    /* Calendar/Date Calendar –S */
    font-family: "LexendPeta";
    font-size: 49px;
    font-weight: 800;
    line-height: 61px;
  }

  .event-place {
    height: 74px;
  }
  .event-title {
    height: 90px;

    /* Calendar/Production Calendar –S */
    font-size: 24px;
  }
  .event-role {
    height: 27px;
  }

  .bg-image-events {
    position: absolute; /* Bild liegt über/unter Wrapper */
    top: -277px;
    right: -411px;
    width: 968px; /* volle Breite */
    height: 1454px; /* feste Höhe */
    aspect-ratio: 484/727;
    background-image: url("https://dev.juliaaraujoofficial.com/wp-content/themes/WP_Julia_Araujo/assets/images/events_image.jpg");
    background-repeat: no-repeat;
    background-size: cover;
  }

  /* ------------------------
   Reviews-Section
------------------------ */

  .reviews-wrapper {
    padding: 120px 30px 55px 30px;
    gap: 29px;
  }

  .quote-symbol-left {
    font-size: 210px;
  }

  .review-text-wrapper {
    max-width: 1000px;
    gap: 49px;
  }

  .review-slide {
    padding-bottom: 79px;
  }

  .review-text {
    font-size: 20px;
    line-height: 32px; /* 153.333% */
  }

  .review-author {
    font-size: 18px;
    line-height: 38px;
    padding-top: 13px;
  }

  .review-title {
    font-size: 27px;
    line-height: 31px; /* 141.176% */
  }

  .review-place {
    font-size: 21px;
    line-height: 28px;
    padding-top: 15px;
  }

  .sliderpoints {
    bottom: 55px;
  }

  .arrow-left {
    left: -83px;
  }

  .arrow-right {
    right: -83px;
  }

  .sliderpoint svg {
    width: 18px;
    height: 18px;
  }

  /* ------------------------
   Gallery-Section
------------------------ */

  .gallery-wrapper {
    padding: 80px 0 110px;
  }

  .gallery-grid {
    max-width: 740px;
  }

  .gallery-tile {
    transition: transform 1s ease, width 1s ease, height 1s ease;
  }

  .gallery-button {
    padding-top: 53px;
  }

  /* ------------------------
   Footer-Section
------------------------ */

  .site-footer {
    min-width: 768px;
    padding-top: 0px;
    gap: 10px;
    position: relative;
    flex-direction: row;
    justify-content: center;
    padding-bottom: 10px;
  }

  .footer-icons-wrapper {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    gap: 40px;
  }

  .footer-nav {
    min-width: 768px;
    max-width: 1400px;
    padding: 21px 20px;
    gap: 14px;
    align-self: stretch;
    list-style: none;
    flex: 1;
  }
}

/* ------------------------
   Desktop-Styles
------------------------ */

@media (min-width: 1400px) {
  .paragraph-l {
    font-size: 20px;
    line-height: 38px;
  }

  /* ------------------------
   Navbar
------------------------ */
  .navbar-nav {
    gap: 40px;
  }

  .navbar-nav:lang(es) {
    gap: 40px;
  }

  .logo {
    padding-right: 80px !important;
  }

  .logo:lang(es) {
    padding-right: 80px !important;
  }
  
  .title {
    font-size: 38px;
    line-height: 48px;
  }
  .subtitle {
    font-size: 26px;
    line-height: 33px;
    width: 51.17%;
    left: 22%;
  }

  .brand-l {
    width: 123.28%;
    right: -40.92%;
    top: 373px;
  }

  .nav-link {
    color: #fff;
    text-align: center;
    font-family: "LexendPeta";
    font-size: 22px;
    font-style: normal;
    font-weight: 200;
    line-height: 28px;
    text-transform: uppercase;
    transition: letter-spacing 0.3s ease-out;
  }

  /* ------------------------
   Language-Menu
------------------------ */
  .wpml-language-switcher {
    color: #fff;
    top: 28px;
    right: clamp(6px, calc(6px + ((100vw - 1400px) * 0.2467)), 154px);
  }

  /* ------------------------
   Header-Section
------------------------ */

  .hero-wrapper {
    height: 1020px;
  }
  .hero-bg {
    background-image: url("https://dev.juliaaraujoofficial.com/wp-content/themes/WP_Julia_Araujo/assets/images/titleimage.jpg");
    position: absolute; /* Bild liegt über/unter Wrapper */
    top: 43px;
    left: 50%;
    width: 852px; /* volle Breite */
    height: 1303px; /* feste Höhe */
    transform: translateX(-50%);
  }

  .title-text {
    text-align: center;
    position: absolute;
    left: clamp(30px, calc(30px + ((100vw - 1400px) * 0.4666667)), 310px);
    bottom: auto;
    right: auto;
    top: 544px;
  }

  .about-teaser-wrapper {
    padding: 68px 250px 75px 300px;
  }

  .about-teaser-button {
    max-width: 1000px;
  }

  .about-teaser-text {
    max-width: 1000px;
  }

  /* ------------------------
   Events-Section
------------------------ */

  .events-teaser-headline {
    /* Headings/H2 –S */
    font-size: 38px;
    line-height: 44px; /* 113.636% */
  }

  .events-container {
    max-width: 1500px;
    padding: 0 107px;
  }

  .calendar-box {
    width: 381px;
    padding: 0 15px;
  }

  .calendar-box:nth-of-type(n + 3) {
    display: flex;
  }

  .event-role {
    height: 27px;
  }

  /* ------------------------
   Reviews-Section
------------------------ */

  .reviews-wrapper {
    padding: 100px 40px 90px 40px;
    gap: 0px;
    flex-direction: row;
    justify-content: space-between;
    max-width: 2000px;
    left: 50%;
    transform: translateX(-50%);
  }

  .quote-symbol-left {
    font-size: 240px;
    padding-right: 40px;
  }

  .quote-symbol-right {
    width: 263px;
    font-size: 240px;
    padding-left: 40px;
  }

  .review-text-wrapper {
    max-width: 1300px;
    gap: 46px;
  }
  .review-slide {
    padding-bottom: 76px;
  }
  .review-text {
    font-size: 26px;
    line-height: 38px; /* 153.333% */
  }

  .review-author {
    font-size: 18px;
    line-height: 38px;
    padding-top: 13px;
  }

  .review-title {
    font-size: 33px;
    line-height: 38px; /* 141.176% */
  }

  .review-place {
    font-size: 21px;
    line-height: 27px;
    padding-top: 22px;
  }

  .sliderpoints {
    left: 50%;
    transform: translateX(-50%);
  }

  /* ------------------------
   Gallery-Section
------------------------ */

  .gallery-wrapper {
    padding: 138px 0 130px;
  }
  .gallery-grid {
    max-width: 1360px;
  }

  /* ------------------------
   Footer-Section
------------------------ */

  .copyright {
    font-size: 11px;
  }

  .footer-nav .nav-link {
    font-size: 11px;
  }
}

/* ------------------------------------------------------------------------------------
                                      About-Page                                      
---------------------------------------------------------------------------------------*/

body.page-template-about {
  background-color: var(--bg-light);
}

/* ------------------------
   Navbar
------------------------ */

body.page-template-about .custom-navbar {
  background-color: rgba(244, 244, 244, 0.95);
}

body.page-template-about #navbar {
  /* Start dunkel, kein helles Overlay */
  background-color: rgba(244, 244, 244, 0.95);
}

body.page-template-about .menu-toggle svg line {
  stroke: #171717;
}

body.page-template-about .navbar-nav .nav-link,
body.page-template-about .logo,
body.page-template-about .wpml-language-switcher {
  color: var(--text-light);
}

body.page-template-about nav .dropdown-item,
body.page-template-about nav .dropdown-toggle {
  color: var(--text-light);
}

body.page-template-about nav .dropdown-item:hover,
body.page-template-about nav .dropdown-toggle:hover {
  color: var(--text-light);
}

body.page-template-about .separator {
  background-color: var(--bg-dark);
}

/* ------------------------
   Header
------------------------ */

.header-about-wrapper {
  display: flex;
  padding-top: 80px;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  overflow: hidden;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.about-image-wrapper {
  height: 540px;
  position: relative;
  width: 100%;
}

.image-about {
  position: absolute; /* Bild liegt über/unter Wrapper */
  top: -40px;
  left: clamp(
    -62px,
    calc(-62px + (162 + 62) * ((100vw - 320px) / (768 - 320))),
    162px
  );
  width: 531px; /* volle Breite */
  height: 812px; /* feste Höhe */
  background-image: url("https://dev.juliaaraujoofficial.com/wp-content/themes/WP_Julia_Araujo/assets/images/header_about.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

.title-about {
  position: absolute;
  left: 11%;
  bottom: 14px;
  color: var(--text-light);
  text-align: center;

  /* Headings/H1 B –S */
  font-family: "Moderustic";
  font-size: 40px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

/* ------------------------
   Content
------------------------ */

body.page-template-about p {
  margin-bottom: 16px;
}

.about-content-bg {
  background-color: var(--red);
}

.about-content-wrapper {
  display: flex;
  padding: 26px 20px 40px 23px;
  flex-direction: column;
  align-items: center;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.about-title {
  color: var(--text-dark);

  /* Headings/H2 –S */
  font-family: "Moderustic";
  font-size: 22px;
  font-weight: 400;
  line-height: 25px; /* 113.636% */
  padding: 0 0 16px 0;
  margin: 0;
}

.about-content {
  color: var(---1, #f4f4f4);
  font-family: "Moderustic";
  font-style: normal;
  font-weight: 400;
  max-width: 400px;
  padding: 0;
  margin: 0;
}

/* ------------------------
   About-Gallery
------------------------ */

.bg-about-gallery {
  background-color: var(--grey);
}

.about-gallery-wrapper {
  padding: 5px 0 90px 0;
}

.about-gallery-grid {
  max-width: 700px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: auto; /* Höhe wird dynamisch gesetzt */
}

/* ------------------------
   Tablet-Styles
------------------------ */

@media (min-width: 768px) {
  /* ------------------------
   Navbar
------------------------ */

  body.page-template-about #navbar {
    background: linear-gradient(
      180deg,
      rgba(244, 244, 244, 0.95) 0px,
      rgba(244, 244, 244, 0.95) 50px,
      rgba(244, 244, 244, 0.7) 100%
    );
  }

  body.page-template-about .separator {
    background-color: var(--bg-dark);
  }

  body.page-template-about .navbar-nav .nav-link:hover,
  body.page-template-about .navbar-nav .nav-link.active,
  body.page-template-about .navbar-nav .nav-link:focus {
    color: var(--text-light) !important;
  }

  body.page-template-about nav .dropdown-menu {
    background-color: rgba(244, 244, 244, 0.7);
  }

  /* ------------------------
   Header
------------------------ */

  .about-image-wrapper {
    height: 760px;
  }

  .image-about {
    top: 0px;
    left: clamp(
      194px,
      calc(194px + (510 - 194) * ((100vw - 768px) / (1399 - 768))),
      510px
    );
    width: 574px; /* volle Breite */
    height: 879px; /* feste Höhe */
  }

  .title-about {
    left: 7%;
    font-size: 50px;
    bottom: 22px;
  }

  body.page-template-about .brand-md {
    width: 77.5%;
    left: -8.5%;
    right: auto;
    margin: 0;
  }

  /* ------------------------
   Content
------------------------ */

  body.page-template-about p {
    margin-bottom: 30px;
  }

  .about-content-wrapper {
    padding: 50px 90px 60px 80px;
  }

  .about-content {
    max-width: 800px;
  }

  .about-title {
    font-size: 28px;
    line-height: 31px; /* 110.714% */
    padding: 0 0 30px 0;
  }

  /* ------------------------
   About-Gallery
------------------------ */
  .about-gallery-wrapper {
    padding: 40px 0 110px 0;
  }

  .about-gallery-grid {
    max-width: 740px;
  }
}

/* ------------------------
   Desktop-Styles
------------------------ */

@media (min-width: 1400px) {
  .header-about-wrapper {
    max-width: 2000px;
  }

  .about-image-wrapper {
    height: 1020px;
  }

  .image-about {
    top: -80px;
    left: clamp(
      194px,
      calc(219px + (519 - 219) * ((100vw - 1400px) / (2000 - 1400))),
      519px
    );
    width: 968px; /* volle Breite */
    height: 1454px; /* feste Höhe */
  }

  .title-about {
    left: 120px;
    font-size: 80px;
    bottom: 562px;
  }

  body.page-template-about .brand-md {
    left: clamp(
      194px,
      calc(468px + (669 - 468) * ((100vw - 1400px) / (2000 - 1400))),
      669px
    );
    width: 86.3%;
    top: 256px;
  }

  /* ------------------------
   Content
------------------------ */

  .about-content-wrapper {
    padding: 80px 250px 70px 300px;
    max-width: 2000px;
  }

  .about-content {
    max-width: 1400px;
  }

  .about-title {
    font-size: 38px;
    line-height: 44px; /* 110.714% */
  }

  /* ------------------------
   About-Gallery
------------------------ */
  .about-gallery-wrapper {
    padding: 70px 0 120px 0;
  }

  .about-gallery-grid {
    max-width: 1360px;
  }
}

/* ------------------------------------------------------------------------------------
                                      Media-Page                                      
---------------------------------------------------------------------------------------*/

body.page-template-media {
  background-color: var(--bg-light);
}

/* ------------------------
   Navbar
------------------------ */

body.page-template-media .custom-navbar {
  background-color: rgba(244, 244, 244, 0.95);
}

body.page-template-media #navbar {
  /* Start dunkel, kein helles Overlay */
  background-color: rgba(244, 244, 244, 0.95);
}

body.page-template-media .menu-toggle svg line {
  stroke: #171717;
}

body.page-template-media .navbar-nav .nav-link,
body.page-template-media .logo,
body.page-template-media .wpml-language-switcher {
  color: var(--text-light);
}

body.page-template-media nav .dropdown-item,
body.page-template-media nav .dropdown-toggle {
  color: var(--text-light);
}

body.page-template-media nav .dropdown-item:hover,
body.page-template-media nav .dropdown-toggle:hover {
  color: var(--text-light);
}

body.page-template-media .separator {
  background-color: var(--bg-dark);
}

/* ------------------------
   Header
------------------------ */

.header-media-wrapper {
  display: flex;
  padding-top: 80px;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  overflow: hidden;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.media-image-wrapper {
  height: 540px;
  position: relative;
  width: 100%;
}

.image-media {
  position: absolute; /* Bild liegt über/unter Wrapper */
  top: -40px;
  left: clamp(
    -62px,
    calc(-62px + (162 + 62) * ((100vw - 320px) / (768 - 320))),
    162px
  );
  width: 531px; /* volle Breite */
  height: 812px; /* feste Höhe */
  background-image: url("https://dev.juliaaraujoofficial.com/wp-content/themes/WP_Julia_Araujo/assets/images/header_about.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

.title-media {
  position: absolute;
  left: clamp(28px, calc(28px + ((100vw - 320px) * 0.33557)), 178px);
  bottom: 14px;
  color: var(--text-light);
  text-align: center;
  margin: 0px;

  /* Headings/H1 B –S */
  font-family: "Moderustic";
  font-size: 40px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

/* ------------------------
   Content
------------------------ */

.media-content-bg {
  background-color: var(--red);
}

.media-content-wrapper {
  display: flex;
  padding: 26px 20px 40px 23px;
  flex-direction: column;
  align-items: center;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.media-title {
  color: var(--text-dark);

  /* Headings/H2 –S */
  font-family: "Moderustic";
  font-size: 22px;
  font-weight: 400;
  line-height: 25px; /* 113.636% */
  padding: 0 0 16px 0;
  margin: 0;
}

.media-content {
  color: var(---1, #f4f4f4);
  font-family: "Moderustic";
  font-style: normal;
  font-weight: 400;
  max-width: 400px;
  padding: 0;
  margin: 0;
}

/* ------------------------
   Media-Gallery
------------------------ */

.bg-media-gallery {
  background-color: var(--grey);
}

.media-gallery-wrapper {
  padding: 12px 0 90px 0;
}

.media-gallery-grid {
  max-width: 700px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: auto; /* Höhe wird dynamisch gesetzt */
}

/* [1] The container */
.img-hover-zoom {
  overflow: hidden; /* [1.2] Hide the overflowing of child elements */
}

/* [2] Transition property for smooth transformation of images */
.img-hover-zoom img {
  transition: transform 0.5s ease !important;
}

/* [3] Finally, transforming the image when container gets hovered */
.img-hover-zoom:hover img {
  transform: scale(1.1);
}

/* ------------------------
   Tablet-Styles
------------------------ */

@media (min-width: 768px) {
  /* ------------------------
   Navbar
------------------------ */

  body.page-template-media #navbar {
    background: linear-gradient(
      180deg,
      rgba(244, 244, 244, 0.95) 0px,
      rgba(244, 244, 244, 0.95) 50px,
      rgba(244, 244, 244, 0.7) 100%
    );
  }

  body.page-template-media .separator {
    background-color: var(--bg-dark);
  }

  body.page-template-media .navbar-nav .nav-link:hover,
  body.page-template-media .navbar-nav .nav-link.active,
  body.page-template-media .navbar-nav .nav-link:focus {
    color: var(--text-light) !important;
  }

  body.page-template-media nav .dropdown-menu {
    background-color: rgba(244, 244, 244, 0.7);
  }

  /* ------------------------
   Header
------------------------ */

  .media-image-wrapper {
    height: 760px;
  }

  .image-media {
    top: 0px;
    left: clamp(
      194px,
      calc(194px + (510 - 194) * ((100vw - 768px) / (1399 - 768))),
      510px
    );
    width: 574px; /* volle Breite */
    height: 879px; /* feste Höhe */
  }

  .title-media {
    left: clamp(87px, calc(87px + ((100vw - 768px) * 0.2092)), 219px);
    font-size: 50px;
    bottom: 22px;
  }

  body.page-template-media .brand-md {
    width: 77.5%;
    left: -8.5%;
    right: auto;
    margin: 0;
  }

  /* ------------------------
   Content
------------------------ */

  .media-content-wrapper {
    padding: 50px 90px 25px 80px;
  }

  .media-content {
    max-width: 800px;
  }

  .media-title {
    font-size: 28px;
    line-height: 31px; /* 110.714% */
    padding: 0 0 30px 0;
  }

  /* ------------------------
   Media-Gallery
------------------------ */
  .media-gallery-wrapper {
    padding: 75px 0 140px 0;
  }

  .media-gallery-grid {
    max-width: 740px;
  }
}

/* ------------------------
   Desktop-Styles
------------------------ */

@media (min-width: 1400px) {
  .header-media-wrapper {
    max-width: 2000px;
  }

  .media-image-wrapper {
    height: 1020px;
  }

  .image-media {
    top: -80px;
    left: clamp(
      194px,
      calc(219px + (519 - 219) * ((100vw - 1400px) / (2000 - 1400))),
      519px
    );
    width: 968px; /* volle Breite */
    height: 1454px; /* feste Höhe */
  }

  .title-media {
    left: 134px;
    font-size: 80px;
    bottom: 562px;
  }

  body.page-template-media .brand-md {
    left: clamp(
      194px,
      calc(468px + (669 - 468) * ((100vw - 1400px) / (2000 - 1400))),
      669px
    );
    width: 86.3%;
    top: 256px;
  }

  /* ------------------------
   Content
------------------------ */
  .media-content-wrapper {
    padding: 80px 250px 30px 300px;
    max-width: 2000px;
  }

  .media-content {
    max-width: 1400px;
  }

  .media-title {
    font-size: 38px;
    line-height: 44px; /* 110.714% */
  }

  /* ------------------------
   Media-Gallery
------------------------ */
  .media-gallery-wrapper {
    padding: 130px 0 200px 0;
  }

  .media-gallery-grid {
    max-width: 1360px;
  }
}

/* ------------------------------------------------------------------------------------
                                      Events-Page                                      
---------------------------------------------------------------------------------------*/

body.page-template-events {
  background-color: var(--bg-light);
}

h2 {
  margin: 0;
}

/* ------------------------
   Navbar
------------------------ */

body.page-template-events .custom-navbar {
  background-color: rgba(244, 244, 244, 0.95);
}

body.page-template-events #navbar {
  /* Start dunkel, kein helles Overlay */
  background-color: rgba(244, 244, 244, 0.95);
}

body.page-template-events .menu-toggle svg line {
  stroke: #171717;
}

body.page-template-events .navbar-nav .nav-link,
body.page-template-events .logo,
body.page-template-events .wpml-language-switcher {
  color: var(--text-light);
}

body.page-template-events nav .dropdown-item,
body.page-template-events nav .dropdown-toggle {
  color: var(--text-light);
}

body.page-template-events nav .dropdown-item:hover,
body.page-template-events nav .dropdown-toggle:hover {
  color: var(--text-light);
}

body.page-template-events .separator {
  background-color: var(--bg-dark);
}

/* ------------------------
   Header
------------------------ */

.header-events-wrapper {
  display: flex;
  padding-top: 80px;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  overflow: hidden;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.events-image-wrapper {
  height: 540px;
  position: relative;
  width: 100%;
  overflow: hidden;
}

.image-events {
  position: absolute; /* Bild liegt über/unter Wrapper */
  top: -111px;
  left: clamp(
    0px,
    calc(0px + (224 - 0) * ((100vw - 320px) / (768 - 320))),
    224px
  );
  width: 569px; /* volle Breite */
  height: 870px; /* feste Höhe */
  background-image: url("https://dev.juliaaraujoofficial.com/wp-content/themes/WP_Julia_Araujo/assets/images/events_image.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

.title-events {
  width: 81.25%;
  position: absolute;
  left: clamp(
    -60px,
    /* minimaler Wert */ calc(-25px + (100vw - 320px) * (-35 / 448)),
    -25px /* maximaler Wert */
  );
  bottom: 14px;
  color: var(--text-light);
  text-align: center;
  margin: 0;

  /* Headings/H1 B –S */
  font-family: "Moderustic";
  font-size: 40px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

/* ------------------------
   Content
------------------------ */

.events-separator-bg {
  background-color: var(--red);
  padding: 26px 20px 25px 23px;
  height: 135px;
}

.events-content-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.events-title {
  font-size: 22px;
  line-height: 35px; /* 110.714% */
  font-family: "Moderustic";
  font-size: 22px;
  font-weight: 400;
  line-height: 25px; /* 113.636% */
  margin: 0;
  position: absolute;
  left: 17px;
  top: -50px;
}

.events-list {
  display: flex;
  max-width: 560px;
  padding-bottom: 130px;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.events-box {
  display: flex;
  padding: 0 15px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-self: stretch;
}

.events-page-text {
  display: flex;
  padding: 13px 0 24px 0;
  flex-direction: column;
  align-items: center;
}

.events-page-typo {
  display: flex;
  color: #000;
  font-family: "Moderustic";
  text-align: center;
  flex-direction: column;
  justify-content: center;
  font-style: normal;
  line-height: normal;
}

.events-page-date {
  /* Calendar/Date Calendar –S */
  font-family: "LexendPeta";
  font-size: 32px;
  font-weight: 800;
  padding: 5px 0;
}

.events-page-optional {
  color: var(--red);
  text-align: center;

  /* Calendar/Role Calendar –M */
  font-family: "Moderustic";
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.events-page-place {
  /* Calendar/Location Calendar –S */
  font-size: 18px;
  font-weight: 300;
  padding: 12px 0;
}

.events-page-title {
  /* Calendar/Production Calendar –S */
  font-size: 18px;
  font-weight: 500;
  padding: 12px 0;
}

#events-content a {
  text-decoration: none;
}

a > .events-page-title {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: 1.5%;
  text-underline-offset: 16.5%;
  text-underline-position: from-font;
}

.events-page-role {
  /* Calendar/Role Calendar –S */
  font-size: 14px;
  font-weight: 300;
  padding: 4px 0;
}

.reviews-button {
  padding-top: 30px;
  color: #171717;
  font-family: "LexendPeta";
  font-size: 11px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.performances-button {
  padding: 16px 0 16px 25px;
}

.accordion-wrapper-more,
.accordion-wrapper-all {
  width: 100%;
}

.accordion-wrapper-more .arrow,
.accordion-wrapper-all .arrow,
.accordion-wrapper-reviews .arrow {
  transition: transform 0.3s ease;
}

.accordion-wrapper-more .events-box {
  padding: 0;
}

/* Wenn Accordion geöffnet */
.performances-button:not(.collapsed) .arrow {
  transform: rotate(90deg);
}

.performances-button:hover .arrow .line {
  transform: scaleX(1); /* Linie wächst nach links */
}

.performances-button:not(.collapsed) .arrow .line {
  transform: scaleX(0.7);
}

.line-separator {
  width: 100%;
  height: 1px;
  background: #000;
}

.all-events-button {
  padding: 100px 25px 16px 0;
}

/* ------------------------
   Tablet-Styles
------------------------ */

@media (min-width: 768px) {
  /* ------------------------
   Navbar
------------------------ */

  body.page-template-events #navbar {
    background: linear-gradient(
      180deg,
      rgba(244, 244, 244, 0.95) 0px,
      rgba(244, 244, 244, 0.95) 50px,
      rgba(244, 244, 244, 0.7) 100%
    );
  }

  body.page-template-events .separator {
    background-color: var(--bg-dark);
  }

  body.page-template-events .navbar-nav .nav-link:hover,
  body.page-template-events .navbar-nav .nav-link.active,
  body.page-template-events .navbar-nav .nav-link:focus {
    color: var(--text-light) !important;
  }

  body.page-template-events nav .dropdown-menu {
    background-color: rgba(244, 244, 244, 0.7);
  }

  /* ------------------------
   Header
------------------------ */

  .events-image-wrapper {
    height: 760px;
  }

  .image-events {
    top: -110px;
    left: clamp(
      194px,
      calc(194px + (510 - 194) * ((100vw - 768px) / (1399 - 768))),
      510px
    );
    width: 574px; /* volle Breite */
    height: 879px; /* feste Höhe */
  }

  .title-events {
    width: 31.51%;
    left: 6.7708%;
    font-size: 50px;
    bottom: 37px;
  }

  body.page-template-events .brand-md {
    width: 1082.04px;
    left: clamp(
      -361px,
      calc(-361px + (-45 + 361) * ((100vw - 768px) / (1399 - 768))),
      -45px
    );
    right: auto;
    margin: 0;
    top: 175px;
  }

  /* ------------------------
   Content
------------------------ */

  .events-separator-bg {
    padding: 68px 110px 40px 36px;
    height: 133px;
  }

  .events-title {
    font-size: 22px;
    line-height: 35px; /* 110.714% */
    font-family: "Moderustic";
    font-size: 22px;
    font-weight: 400;
    line-height: 25px; /* 113.636% */
    margin: 0;
    position: absolute;
    left: 43px;
    top: -50px;
  }

  .events-list {
    padding: 0 20px 90px 0;
    max-width: 1100px;
    width: 100%;
  }

  .events-box {
    display: flex;
    padding: 0 0 0 30px;
    width: 100%;
  }

  .accordion-wrapper-more .events-box {
    padding: 0;
  }

  .events-page-text {
    display: flex;
    padding: 0 16px;
    flex-direction: row;
    align-items: center;
    width: 100%;
    justify-content: space-between;
  }

  .events-page-typo {
    text-align: left;
  }

  .events-page-date {
    display: flex;
    height: 124px;
    flex-direction: column;
    justify-content: center;
    font-size: 16px;
    width: 95px;
    gap: 10px;
  }

  .events-page-place {
    display: flex;
    height: 124px;
    flex-direction: column;
    justify-content: center;
    font-size: 16px;
    width: 204px;
  }

  .events-page-title {
    display: flex;
    height: 124px;
    flex-direction: column;
    justify-content: center;
    font-size: 16px;
    width: 269px;
  }

  .events-page-role {
    display: flex;
    height: 124px;
    flex-direction: column;
    justify-content: center;
    font-size: 14px;
    text-align: right;
    width: 124px;
  }

  .reviews-button-wrapper {
    justify-content: end;
  }

  .show-more-text {
    white-space: nowrap;
  }

  .performances-button {
    padding: 16px 0 16px 40px;
  }

  .performances-button-wrapper {
    justify-content: start;
  }

  .all-events-button-wrapper {
    justify-content: center;
    padding-left: 0;
  }
}

/* ------------------------
   Desktop-Styles
------------------------ */

@media (min-width: 1400px) {
  .header-events-wrapper {
    max-width: 2000px;
  }

  .events-image-wrapper {
    height: 1020px;
  }

  .image-events {
    top: -170px;
    left: clamp(
      290px,
      calc(290px + (590 - 290) * ((100vw - 1400px) / (2000 - 1400))),
      590px
    );
    width: 968px; /* volle Breite */
    height: 1454px; /* feste Höhe */
  }

  .title-events {
    width: 23.15%;
    left: 112px;
    font-size: 80px;
    bottom: 40px;
  }

  body.page-template-events .brand-md {
    left: -20px;
    width: 53.9%;
    top: 221px;
  }

  /* ------------------------
   Content
------------------------ */

  .events-separator-bg {
    padding: 82px 400px 60px 290px;
    height: 186px;
  }

  .events-title {
    font-size: 22px;
    line-height: 35px; /* 110.714% */
    font-family: "Moderustic";
    font-size: 22px;
    font-weight: 400;
    line-height: 25px; /* 113.636% */
    margin: 0;
    position: absolute;
    left: 0px;
    top: -60px;
  }

  .events-list {
    padding: 0 0 130px 0;
    max-width: 1268px;
  }

  .events-box {
    padding: 0;
  }

  .events-page-text {
    padding: 0;
  }

  .events-page-date {
    height: 170px;
    font-size: 24px;
    width: 164px;
  }

  .events-page-optional {
    font-size: 22px;
  }

  .events-page-place {
    height: 170px;
    font-size: 24px;
    width: 350px;
  }

  .events-page-title {
    height: 170px;
    font-size: 24px;
    width: 480px;
  }

  .events-page-role {
    height: 170px;
    font-size: 24px;
    width: 220px;
  }

  .reviews-button {
    padding-top: 10px;
  }

  .show-more-text {
    font-size: 15px;
  }
}

/* ------------------------------------------------------------------------------------
                                      Press-Page                                      
---------------------------------------------------------------------------------------*/

body.page-template-press {
  background-color: var(--bg-light);
}

h2 {
  margin: 0;
}

/* ------------------------
   Navbar
------------------------ */
body.page-template-press main {
  overflow: hidden;
}

body.page-template-press .custom-navbar {
  background-color: rgba(244, 244, 244, 0.95);
}

body.page-template-press #navbar {
  /* Start dunkel, kein helles Overlay */
  background-color: rgba(244, 244, 244, 0.95);
}

body.page-template-press .menu-toggle svg line {
  stroke: #171717;
}

body.page-template-press .navbar-nav .nav-link,
body.page-template-press .logo,
body.page-template-press .wpml-language-switcher {
  color: var(--text-light);
}

body.page-template-press nav .dropdown-item,
body.page-template-press nav .dropdown-toggle {
  color: var(--text-light);
}

body.page-template-press nav .dropdown-item:hover,
body.page-template-press nav .dropdown-toggle:hover {
  color: var(--text-light);
}

body.page-template-press .separator {
  background-color: var(--bg-dark);
}

/* ------------------------
   Header
------------------------ */

.header-press-wrapper {
  display: flex;
  padding-top: 80px;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  overflow: hidden;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.press-image-wrapper {
  height: 540px;
  position: relative;
  width: 100%;
  overflow: hidden;
}

.image-press {
  position: absolute; /* Bild liegt über/unter Wrapper */
  top: 0px;
  left: min(
    7px,
    /* Maximalwert */
      max(
        -217px,
        /* Minimalwert */
          calc(-217px + ((100vw - 320px) / (768 - 320)) * (7 - (-217)))
          /* Linear interpoliert */
      )
  );
  width: 812px; /* volle Breite */
  height: 540px; /* feste Höhe */
  background-image: url("https://dev.juliaaraujoofficial.com/wp-content/themes/WP_Julia_Araujo/assets/images/header_press.jpeg");
  background-repeat: no-repeat;
  background-size: cover;
}

/* ------------------------
   Content
------------------------ */

.press-separator-bg {
  background-color: var(--red);
}

.title-press {
  width: 463px;
  position: absolute;
  left: min(
    143px,
    /* Maximalwert */
      max(
        -81px,
        /* Minimalwert */
          calc(-81px + ((100vw - 320px) / (768 - 320)) * (143 - (-81)))
          /* Linear interpoliert */
      )
  );
  top: 10px;
  color: var(--text-dark);
  text-align: center;
  margin: 0;

  /* Headings/H1 B –S */
  font-family: "Moderustic";
  font-size: 40px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.press-title-wrapper {
  display: flex;
  height: 70px;
  padding: 26px 20px 25px 23px;
  flex-direction: column;
  align-items: center;
  position: relative;
  max-width: 2000px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.reviews-list {
  display: flex;
  padding: 60px 10px 100px 10px;
  flex-direction: column;
  align-items: center;
  gap: 60px;
}

body.page-template-press .accordion-body {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.reviews-box {
  max-width: 570px;
}

.reviews-page-typo {
  color: #000;
  text-align: center;
  font-family: "Moderustic";
  font-style: normal;
}

.reviews-page-title {
  font-family: "LexendPeta";
  font-size: 24px;
  font-weight: 800;
  line-height: 27px; /* 112.5% */
  margin-bottom: 12px;
}

.reviews-page-place {
  font-size: 18px;
  font-weight: 300;
  line-height: 20px;
  margin-bottom: 28px;
}

.reviews-page-text {
  font-size: 12px;
  font-weight: 400;
  line-height: 21px;
  margin-bottom: 10px;
}

.reviews-page-author {
  font-size: 13px;
  font-weight: 300;
  line-height: 23px;
  margin-bottom: 30px;
}

body.page-template-press .reviews-box a {
  text-decoration: none;
}

body.page-template-press .sliderpoints,
body.page-template-press .arrow-left,
body.page-template-press .arrow-right {
  position: static;
}

body.page-template-press .sliderpoints {
  left: 0%;
  transform: translateX(0%);
}

a > .reviews-page-author {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: 1.5%;
  text-underline-offset: 16.5%;
  text-underline-position: from-font;
}

.all-reviews-button {
  padding: 0 0px 100px 0;
}

/* ------------------------
   Tablet-Styles
------------------------ */

@media (min-width: 768px) {
  /* ------------------------
   Navbar
------------------------ */

  body.page-template-press #navbar {
    background: linear-gradient(
      180deg,
      rgba(244, 244, 244, 0.95) 0px,
      rgba(244, 244, 244, 0.95) 50px,
      rgba(244, 244, 244, 0.7) 100%
    );
  }

  body.page-template-press .separator {
    background-color: var(--bg-dark);
  }

  body.page-template-press .navbar-nav .nav-link:hover,
  body.page-template-press .navbar-nav .nav-link.active,
  body.page-template-press .navbar-nav .nav-link:focus {
    color: var(--text-light) !important;
  }

  body.page-template-press nav .dropdown-menu {
    background-color: rgba(244, 244, 244, 0.7);
  }

  /* ------------------------
   Header
------------------------ */

  .press-image-wrapper {
    height: 760px;
  }

  .image-press {
    left: min(
      262px,
      /* Maximalwert */
        max(
          -54px,
          /* Minimalwert */
            calc(-54px + ((100vw - 768px) / (1400 - 768)) * (262 - (-54)))
            /* Linear interpoliert */
        )
    );
    width: 1143.481px; /* volle Breite */
    height: 761px; /* feste Höhe */
  }

  body.page-template-press .brand-md {
    width: 164.9543%;
    left: min(
      -456px,
      /* maximal weiter rechts */
        max(
          -831px,
          /* minimal weiter links */
            calc(-456px + ((100vw - 768px) / (1400 - 768)) * (-375))
        )
    );
    right: auto;
    margin: 0;
    top: 218px;
  }

  /* ------------------------
   Content
------------------------ */

  .press-title-wrapper {
    height: 133px;
    padding: 68px 110px 40px 36px;
  }

  .title-press {
    left: min(
      450px,
      /* Maximalwert */
        max(
          134px,
          /* Minimalwert */
            calc(134px + ((100vw - 768px) / (1400 - 768)) * (450 - (134)))
            /* Linear interpoliert */
        )
    );
    top: 39px;
    font-size: 50px;
  }

  .reviews-list {
    padding: 70px 40px 120px 40px;
    gap: 80px;
  }

  .reviews-box {
    max-width: 840px;
  }

  .reviews-page-title {
    font-size: 29px;
    line-height: 36px; /* 112.5% */
    margin-bottom: 0px;
  }

  .reviews-page-place {
    font-size: 25px;
    line-height: 36px;
  }

  .reviews-page-text {
    font-size: 16px;
    line-height: 25px;
  }

  .reviews-page-author {
    font-size: 16px;
    line-height: 25px;
  }
}

/* ------------------------
   Desktop-Styles
------------------------ */

@media (min-width: 1400px) {
  .header-press-wrapper {
    max-width: 2000px;
  }

  .press-image-wrapper {
    height: 1020px;
  }

  .image-press {
    left: min(
      286px,
      /* Maximalwert */
        max(
          -14px,
          /* Minimalwert */
            calc(-14px + ((100vw - 1400px) / (2000 - 1400)) * (286 - (-14)))
            /* Linear interpoliert */
        )
    );
    width: 1537px; /* volle Breite */
    height: 1022px; /* feste Höhe */
  }

  .title-press {
    left: min(
      750px,
      /* Maximalwert */
        max(
          450px,
          /* Minimalwert */
            calc(450px + ((100vw - 1400px) / (2000 - 1400)) * (750 - (450)))
            /* Linear interpoliert */
        )
    );
    font-size: 80px;
    top: 36px;
  }

  body.page-template-press .brand-md {
    left: min(
      -375px,
      /* Wert bei 768px */
        max(
          -536px,
          /* Wert bei 1400px */
            calc(-375px + ((100vw - 1400px) / (2000 - 1400)) * (-161))
        )
    );
    width: 90.95%;
    top: 326px;
  }

  /* ------------------------
   Content
------------------------ */

  .press-title-wrapper {
    height: 167px;
    padding: 82px 400px 60px 317px;
  }

  .title-press {
    left: min(
      750px,
      /* Maximalwert */
        max(
          450px,
          /* Minimalwert */
            calc(450px + ((100vw - 1400px) / (2000 - 1400)) * (750 - (450)))
            /* Linear interpoliert */
        )
    );
    top: 73px;
    font-size: 50px;
  }

  .reviews-list {
    padding: 90px 0px 130px 0px;
    gap: 100px;
  }

  .reviews-box {
    max-width: 1075px;
  }

  .reviews-page-title {
    font-size: 32px;
    line-height: 38px; /* 112.5% */
  }

  .reviews-page-place {
    font-size: 27px;
    line-height: 38px;
  }

  .reviews-page-text {
    font-size: 20px;
    line-height: 38px;
  }

  .reviews-page-author {
    font-size: 18px;
    line-height: 38px;
  }
}

/* ------------------------------------------------------------------------------------
                                      Privacy-Page                                      
---------------------------------------------------------------------------------------*/

.privacy-wrapper {
  display: flex;
  padding: 120px 20px 50px 23px;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}

.privacy-content {
  max-width: 400px;
}

.privacy-content h1 {
  color: var(--text-dark);
  font-family: "Moderustic";
  font-size: 30px;
  font-style: normal;
  font-weight: 300;
  line-height: normal;
  margin-bottom: 16px !important;
}

.privacy-content h2 {
  color: var(--text-dark);

  /* Headings/H2 –S */
  font-family: "Moderustic";
  font-size: 22px;
  font-style: normal;
  font-weight: 400;
  line-height: 29px;
  margin-bottom: 16px !important;
}

.privacy-content h3 {
  color: var(--text-dark);
  font-family: "Moderustic";
  font-size: 18px;
  font-style: normal;
  font-weight: 300;
  line-height: 23px;
  margin-bottom: 16px !important;
}

.privacy-content h4 {
  color: var(--text-dark);

  /* Paragraph S */
  font-family: "Moderustic";
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 23px;
  margin-bottom: 16px !important;
}

/* ------------------------
   Tablet-Styles
------------------------ */

@media (min-width: 768px) {
  .privacy-wrapper {
    padding: 120px 50px 50px 50px;
  }

  .privacy-content {
    max-width: 1000px;
  }

  .privacy-content h1 {
    font-size: 50px;
    margin-bottom: 30px !important;
  }

  .privacy-content h2 {
    font-size: 28px;
    margin-bottom: 30px !important;
    line-height: 34px;
  }

  .privacy-content h3 {
    font-size: 23px;
    margin-bottom: 30px !important;
    line-height: 31px;
  }

  .privacy-content h4 {
    font-size: 16px;
    margin-bottom: 30px !important;
    line-height: 25px;
  }
}

/* ------------------------
   Desktop-Styles
------------------------ */

@media (min-width: 1400px) {
  .privacy-content {
    max-width: 1200px;
  }

  .privacy-content h1 {
    font-size: 54px;
  }

  .privacy-content h2 {
    font-size: 38px;
    line-height: 44px;
  }

  .privacy-content h3 {
    font-size: 30px;
    line-height: 40px;
  }

  .privacy-content h4 {
    font-size: 20px;
    line-height: 38px;
  }
}