.ac-widget {
  bottom: 150px !important;
  top: auto !important;
  box-shadow: 0 1px 0 3px white, 0 0 0 4px hsl(0deg 0% 90%), -2px -4px 12px rgb(0 0 0 / 20%) !important;
  background-color: #fff !important;
}
@media (max-width: 768px) {
  .ac-widget {
    display: none !important;
  }
}

/* Grundkonfiguration */
:root {
    --nav-height: 80px;
    --bracket-height: 45px; /* Höhe deiner SVG Kurve */
}

.sticky-top {
    z-index: 1020;
}

/* Das Logo skalieren */
.main-logo {
    height: 70px;
    transition: height 0.3s ease;
}

/* Die Klammer/Kurve */
.header-bracket {
    width: 100%;
    height: var(--bracket-height);
    background-color: var(--mdb-metropol); /* bg-metropol */
    /* Die Maske wird hier auf die Unterkante angewendet */
    mask-image: url('https://update.metropol.wien/_assets/1d8b030044eb15ec5a0d41f0a17df739/Images/Metropol_BracketTop.svg');
    mask-size: 100%;
    mask-repeat: no-repeat;
    mask-position: left bottom;
    -webkit-mask-image: url('https://update.metropol.wien/_assets/1d8b030044eb15ec5a0d41f0a17df739/Images/Metropol_BracketTop.svg');
    -webkit-mask-size: 100%;
    margin-top: -1px; /* Verhindert feine weiße Linien */
    /* margin-bottom: -85px; */
}

/* Slider Korrektur */
#eventSlider {
    /* Statt negativem Margin oben, nutzen wir Padding, 
       um den Content unter das sticky Menü zu schieben */
    margin-top: -110px !important;
    padding-top: 0;
}

/* Mobile Optimierung */
@media (max-width: 991.98px) {

    /* Untermenüs im mobilen Zustand weiß färben */
    .navbar-collapse .dropdown-menu {
        background-color: #ffffff !important;
        border-radius: 0.5rem;
        margin-top: 10px;
        padding: 10px;
    }
    
    .navbar-collapse .dropdown-item {
        color: #333 !important;
    }
}

.bracket-height{
  height: 125px !important;
} @media (max-width: 768px) {
  .bracket-height {
    height: 125px !important;
  }
} @media (max-width: 1440px) {
  .bracket-height {
    height: 100px !important;
  }
} @media (max-width: 1440px) {
  .bracket-height {
    height: 100px !important;
  }
} @media (min-width: 1930px) {
  .bracket-height {
    height: 160px !important;
  }
}

/* Event Calendar */
@media (min-width: 992px) {
    .days-navigator {
        justify-content: space-between;
        overflow-x: visible !important; /* Kein Scrollen auf Desktop */
    }
    .day-item {
        flex: 1 1 0; /* Gleichmäßige Verteilung */
        min-width: auto !important;
    }
}

.clickable {
  cursor: pointer;
}

.header-note a {
  color: var(--mdb-white);
  text-decoration: underline;
}

.navbar-brand img {
    height: 70px;
    width: auto;
    margin-bottom: -30px
}@media (max-width: 992px) {
  .navbar-brand img {
    height: 60px;
    width: auto;
    margin-bottom: -10px;
  }
}

.navbar-toggler.collapsed .close {
  display: none;
}

.navbar-toggler:not(.collapsed) .open {
  display: none;
}

#eventSlider .carousel-inner {
  height: calc(100vh - 45px);
}

@media (max-width: 992px) {
  #eventSlider .carousel-inner {
    height: calc(60vh - 100px);
  }
}

.bracket-bottom-container .bracket-bottom {
  height: 155px;
}

.bracket-bottom-container .bg-metropol {
  height: 55px;
}

@media (max-width: 992px) {
  .bracket-bottom-container .bracket-bottom {
    height: 180px;
  }

  .bracket-bottom-container .bg-metropol {
    height: 80px;
  }
}

.bracket-top {
    background: url(../Images/Metropol_BracketTop_Shadow.png);
    background-position: top left;
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
    height: 85px;
    pointer-events: none;
    position: relative;
    z-index: -1 !important;
}

.bracket-bottom {
    background: url(../Images/Metropol_BracketBottom.png);
    background-position: bottom right;
    background-repeat: no-repeat;
    background-size: contain;
    height: 100px;
    position: relative;
    z-index: -1 !important;
}

.bg-slider {
    background: linear-gradient(to bottom, rgba(0,0,0, 0) 66%, rgba(0,0,0, 0.9) 100%) !important;
}

.text-shadow {
    text-shadow: 0 0 10px var(--mdb-dark) !important;
}

.text-shadow-sm {
    text-shadow: 0 0 5px var(--mdb-dark) !important;
}

.text-shadow-lg {
    text-shadow: 0 0 20px var(--mdb-dark) !important;
}

#eventSliderCaptions a.active img {
    border-color: var(--mdb-metropol) !important;
}


/* ICONS */

.icon {
    position: relative;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    height: var(--s-d);
    width: var(--s-d);
    margin-bottom: calc(var(--sn-d)*0.13);
}

.icon img, .icon svg {
    display: block;
    height: 100%;
    width: 100%;
    transform: translate3d(0,0,0);
}

h1 .icon,
.h1 .icon {
  height: var(--s-h1) !important;
  width: var(--s-h1) !important;
  margin-bottom: calc(var(--sn-h1)*0.13);
}

h2 .icon,
.h2 .icon {
  height: var(--s-h2) !important;
  width: var(--s-h2) !important;
  margin-bottom: calc(var(--sn-h2)*0.13);
}

h3 .icon,
.h3 .icon {
  height: var(--s-h3) !important;
  width: var(--s-h3) !important;
  margin-bottom: calc(var(--sn-h3)*0.13);
}

h4 .icon,
.h4 .icon {
  height: var(--s-h4) !important;
  width: var(--s-h4) !important;
  margin-bottom: calc(var(--sn-h4)*0.13);
}

h5 .icon,
.h5 .icon {
  height: var(--s-h5) !important;
  width: var(--s-h5) !important;
  margin-bottom: calc(var(--sn-h5)*0.13);
}

h6 .icon,
.h6 .icon {
  height: var(--s-h6) !important;
  width: var(--s-h6) !important;
  margin-bottom: calc(var(--sn-h6)*0.13);
}

.icon-markup {
    position: absolute;
    display: block;
    text-align: center;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

/* ALERTS */
ul.typo3-messages {
    list-style-type: none;
    padding-left: 0;
}