/* Root CSS-Klassen */

:root {
    --primary-color: #C42E72;
    --primary-color-40perc: #C42E723D;
    --secondary-color: #81BEBF;
    --secondary-color-40perc: #81BEBF3D;
    --tertiary-color: #443188;
    --contrast-primary: #242424;
    --contrast-secondary: #DAD9D9;
    --success: #3CB74A;
}

/* Fonts */

/* Mulish Medium */
@font-face {
    font-family: 'Mulish-Medium';
    src: url('../../assets/fonts/Mulish/Mulish-Medium.ttf') format('truetype');
  }
  
/* Mulish Bold */
@font-face {
    font-family: 'Mulish-Bold';
    src: url('../../assets/fonts/Mulish/Mulish-Bold.ttf') format('truetype');
}

/* Mulish Regular */
@font-face {
    font-family: 'Mulish-Regular';
    src: url('../../assets/fonts/Mulish/Mulish-Regular.ttf') format('truetype');
}

/* Mulish SemiBold */
@font-face {
    font-family: 'Mulish-SemiBold';
    src: url('../../assets/fonts/Mulish/Mulish-SemiBold.ttf') format('truetype');
}

/* Mulish SemiBoldItalic */
@font-face {
    font-family: 'Mulish-SemiBoldItalic';
    src: url('../../assets/fonts/Mulish/Mulish-SemiBoldItalic.ttf') format('truetype');  
}


/* CSS RESET / HAUPT KLASSEN */

*, *::before, *::after {
    box-sizing: border-box;
  }
  
* {
    margin: 0;
    font-family: 'Mulish-Regular' 'Cambria' 'Sans Serif' 'Calibri';
}

html {
    scroll-behavior: smooth;
}

body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}

input, button, textarea, select {
    font: inherit;
}

nav button {
    border: none!important;
}

p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}

p {
    text-wrap: pretty;
}

p {
    font-size: 20px;
    line-height: 28px;
}

h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
}

#root, #__next {
    isolation: isolate;
}

label {
    display: block;
}

button {
    max-width: 430px;
}

/* STARTSEITE SLIDER */

.slider {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.slider-track {
    display: flex;
    width: max-content;
    animation: slide 20s ease-in-out infinite;
}
  
.slide {
    min-width: 100vw;
    height: 875px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1000;
}

@keyframes slide {
    0%, 20% {
        transform: translateX(0);
    }
    25%, 45% {
        transform: translateX(-100vw);
    }
    50%, 70% {
        transform: translateX(-200vw);
    }
    75%, 95% {
        transform: translateX(-300vw);
    }
}

/* FORMULAR  */

.form-input {
    border: 2px solid #81BEBF;
    border-radius: 0;
    height: 61px;
    padding-left: 15px;
}
  
.form-input::placeholder {
    font-family: 'Mulish-Medium';
    font-size: 16px;
    color: #A09D9D80;
}
  
.form-block-m {
    width: 49%;
}
  
.form-block-sm {
    width: 24.5%;
}
  
.form-block-lg {
    width: 73.5%;
}

.form-label-gap {
    margin-top: 15px;
}


/* FARBEN */

.bg-secondary-40perc {
    background-color: var(--secondary-color-40perc);
}

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

.bg-primary {
    background-color: var(--primary-color)!important;
}

.bg-transparent {
    background-color: transparent;
}

.bg-footer {
    background-color: var(--contrast-primary);
}

.clr-primary {
    color: var(--primary-color);
}

.clr-tertiary {
    color: var(--tertiary-color);
}

.clr-success {
    color: var(--success);
}

.border-primary-1 {
    border: 1px solid var(--primary-color);
}

.border-tertiary-1 {
    border: 1px solid var(--tertiary-color);
}

.border-success {
    border: 1px solid var(--success)!important;
}
  
.clr-white {
    color: #FFF;
}
  
.clr-black {
    color: #000;
}

.bg-black {
    background-color: #000;
}

.bg-white {
    background-color: #FFF;
}

/* TXT */

.quote-txt {
    font-size: 30px;
    line-height: 35px;
}

.bold {
    font-family: 'Mulish-Bold';
}

.semibold {
    font-family: 'Mulish-SemiBold';
}

.medium {
    font-family: 'Mulish-Medium';
}

.semibolditalic {
    font-family: 'Mulish-SemiBoldItalic';
}

h1 {
    margin:0;
    padding:0;
    font-size: 60px;
}

h2 {
    font-size: 35px;
}

h3 {
    font-size: 28px;
    line-height: 20px;
}

.p-sm-btn {
    font-size:18px;
}

.p-mw {
    max-width: 644px;
}

.p-ticket {
    font-size: 22px;
}

.p-small {
    font-size: 16px;
    line-height: 15px;
}

/* LAYOUT */

.rooms-header {
    height:858px; 
}

.building-layout-plan {
    height:609px; 
    top: 64px;
}

.img-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
    grid-template-areas:
      "item1 item2 item2"
      "item3 item3 item4";
}
  
.img-grid-reverse {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
    grid-template-areas:
      "item1 item1 item2"
      "item3 item4 item4";
}
  
.img-item {
    overflow: hidden;
}
  
.img-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border: 1px solid #81BEBF;
}
  
.img-item:nth-child(1) { grid-area: item1; }
.img-item:nth-child(2) { grid-area: item2; }
.img-item:nth-child(3) { grid-area: item3; }
.img-item:nth-child(4) { grid-area: item4; }
  
.square {
  aspect-ratio: 1 / 1;
  min-width: 404px;
}
  
.wide {
 aspect-ratio: 16 / 9;
 max-width: 685px;
 min-height: 404px;
}

.icon-wrapper {
    width: 145px;
    height: 92px;
}

.txt-mw {
    max-width: 733px;
}

.container {
    max-width: 1100px;
    padding-right: 0;
    padding-left: 0;
}

.logo-wrapper {
    width: 131px;
}

.outer-footer-wrapper {
    width: 100px;
    height: 65px;
    padding: 5px 5px;
}

.h1-gap {
    top: 648px;
}

.h1-gap-rooms {
    top: 713px;
}

.section-gap {
    margin-top: 75px;
}

.inner-section-gap {
    padding-top: 70px;
    padding-bottom: 70px;
}

.heading-text-gap {
    margin-top: 18px;
}

.px-lg {
    padding-right: 126px;
    padding-left: 126px;
} 

.mb-xs {
    margin-bottom: 1px;
}

.rooms-img {
    height: 250px;
}

.grnd-img-1 {
    height: 261px;
    width: 28%;
}

.grnd-img-2 {
    height: 261px;
    width: 70%;
}

/* SPECIAL */

.h1-line {
    height: 4px; 
    width: 100px; 
    margin-top: 5px;
    animation: linemovement 0.8s ease-in-out 1;
}
  
.h2-line {
    height:4px; 
    width: 80px;
    margin-top: 10px;
    transition: width 0.5s ease-in-out;
}

.header-stroke-t {
    background-color: var(--primary-color); 
    height: 10px; 
    width:100%
  }

.header-stroke-b {
    background-color: var(--secondary-color); 
    height: 4px; 
    width:100%
}

.quote-box {
    padding: 45px 33px 52px 34px!important; 
    line-height: 23px;
}

.quote-1 { 
    bottom:30px; 
    left:-14px; 
    transform: rotate(3deg);
}

.quote-2 {
    top:30px; 
    right:-14px; 
    transform: rotate(183deg);
}

.quote {
    padding: 5px 0;
    background-color: #FFF; 
    width: 27px; 
    height: 34px;
}

.exclamation-mark {
    width:56px; 
    height:239px; 
    top:16%; 
    right:16%; 
    transform: rotate(6deg); 
    opacity:0.08;
}

.kontur-woman {
    width:291px; 
    height:360px; 
    top:16%; 
    right:7%; 
    opacity:0.08;
}

.header-img-overlay {
    background-color: #000; 
    opacity: 40%;
    width: 100%; 
    height: 100%; 
    top: 0; 
    left: 0; 
    position: absolute;
    transition: opacity 0.3s ease;
}

.short-btn {
    max-width: 220px;
    padding: 0;
}

.short-btn2 {
    max-width: 280px;
    padding: 0;
}

/* Tickets */

.ticket-frame {
    border: 2px solid var(--secondary-color);
}

.ticket-icon {
    height: 159px;
    width: 100%;
}

.ticket-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 16px;
    grid-template-areas:
      "item1 item2";
}

.ticket-grid:nth-child(1) { grid-area: item1; }
.ticket-grid:nth-child(2) { grid-area: item2; }

.ticket-header {
    height: 215px; 
    padding-top: 16px; 
    padding-bottom: 22px;
}

.ticket-body {
    background-color: var(--secondary-color-40perc); 
    padding: 20px 22px;
}

.ticket-input {
    width: 55px !important; 
    border: none; 
    border: 1px solid #000;
}

.ticket-notice {
    width:4px; 
    height: 20px;
}

/* HOVER */ 

.navbar-toggler:focus {
    box-shadow: 0 0 0 2px var(--primary-color);
}

.img-item img:hover {
    border: 2px solid var(--primary-color);
    cursor: pointer;
}

@keyframes linemovement {
    0% {
       width: 1px;
    }

    100% {
       width: 100px;
    }
}

#muse:hover .h2-line {
    width: 100px;
}

#kuenstlerinnen:hover .h2-line {
    width: 100px;
}

#tickets:hover .h2-line {
    width: 100px;
}

#confirm-choice:hover {
    background-color: var(--primary-color)!important;
    transition: background-color 0.3s ease-in-out;
}

#confirm-choice:hover p {
    color: #FFF;
    transition: color 0.3s ease-in-out;
}

.form-input:focus {
    outline: 2px solid var(--primary-color);
    border: 1px solid var(--primary-color);
}

.ticket-input:focus {
    outline: none;
    border: 1px solid var(--primary-color);
}

#finalbtn:hover {
    background-color: var(--success)!important;
    transition: background-color 0.3s ease-in-out;
}

#finalbtn:hover p {
    color: #FFF;
    transition: color 0.3s ease-in-out;
}

#r1:hover polygon{
    opacity: 100%;
}

#r2:hover polygon{
    opacity: 100%;
}

#r3:hover polygon{
    opacity: 100%;
}

#r4:hover polygon{
    opacity: 100%;
}

#raum1:hover .h2-line{
    width: 100px;
}

#raum2:hover .h2-line{
    width: 100px;
}

#raum3:hover .h2-line{
    width: 100px;
}

#raum4:hover .h2-line{
    width: 100px;
}

.short-btn:hover, .short-btn2:hover {
    background-color: var(--primary-color)!important;
    transition: background-color 0.3s ease-in-out;
}

.short-btn:hover p, .short-btn2:hover p{
    color: #FFF;
}

@media (min-width: 1400px) {
    #grnd-img-2 img {
        object-position: 0 28%;
    }
    
}

@media (max-width: 1400px) {
    
    .slide {
        height: 500px;
    }
    .container {
        max-width: 644px;
        padding-right: 15px;
        padding-left: 15px;
    }
    .px-lg {
        padding-right: 66px;
        padding-left: 66px;
    }
    .quote-txt {
        font-size: 25px;
        line-height: 30px;
    } 
    h1 {
        font-size: 40px;
    }
      
    h2 {
        font-size: 32px;
        font-family: 'Mulish-SemiBold';
    }
      
    p {
        font-size: 18px;
        line-height: 25px;
    }
      
    h3 {
        font-size: 24px;
        line-height: 20px;
        font-family: 'Mulish-SemiBold';
    }
      
    .p-small {
        font-size: 14px;
        line-height: 15px;
    }

    .img-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-gap: 8px;
        grid-template-areas:
          "item1 item1 item2 item2"
          "item1 item1 item4 item4"
          "item3 item3 item4 item4";
    }
      
    .img-grid-reverse {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-gap: 8px;
        grid-template-areas:
          "item1 item1 item2 item2"
          "item3 item3 item2 item2"
          "item3 item3 item4 item4";
    }
    .p-mw {
        max-width: 493px;
    }

    .wide {
        aspect-ratio: 16 / 9;
        min-width: 100%;
        min-height: 100%;
    }

    .square {
        min-width: 100%;
    }

    .exclamation-mark {
        width:48px; 
        height:206px; 
        right:8%; 
        top: 24%;
    }

    .kontur-woman {
        width:274px; 
        height:339px; 
        top:17%; 
        right:0%; 
        opacity:0.08;
    }

    .ticket-notice {
        width:20px; 
        height: 4px;
    }

    .section-gap {
        margin-top: 50px;
    }    
    
    .form-label-gap {
        margin-top: 15px;
    }

    .icon-wrapper {
        width: 98px;
        height: 63px;
    }

    .text-w {
        max-width: 100%;
    }

    .h1-gap {
        top: 360px;
    }

    .rooms-header {
        height:500px; 
    }

    .h1-gap-rooms {
        top: 400px;
    }

    .building-layout-plan {
        height:371px; 
        top: 20px;
        pointer-events: auto;
    }

    .rooms-img {
        height: 150px;
    }

    .ticket-icon {
        height: 120px;
        width: 100%;
    }

    .ticket-header {
        height: 150px;
    }
    
}

@media (max-width: 575px) {

    .kontur-woman {
        width:274px; 
        height:339px; 
        top:17%; 
        right:3%; 
        opacity:0.08;
    }

    .building-layout-plan {
        pointer-events: none;
    }

    .container {
        max-width: 408px;
    }
    .slide {
        height: 423px;
    }
    .quote-txt {
        font-size: 18px;
        line-height: 23px;
    }  
    h1 {
        font-size: 36px;
    }
      
    h2 {
        font-size: 30px;
        font-family: 'Mulish-SemiBold';
    }
      
    p {
        font-size: 16px;
        line-height: 23px;
    }
      
    h3 {
        font-size: 20px;
        line-height: 20px;
        font-family: 'Mulish-SemiBold';
    }
      
    .p-small {
        font-size: 11px;
        line-height: 15px;
    }

    .section-gap {
        margin-top: 35px;
    }

    .rooms-img {
        height: 100px;
    }

    .rooms-header {
        height:421px; 
    }

    .h1-gap-rooms {
        top: 260px;
    }

    .h1-gap {
        top: 270px;
    }

    .building-layout-plan {
        height:241px; 
        top: 13px;
    }

    .quote-box {
        padding: 45px 33px 52px 34px!important; 
        line-height: 23px;
    }
    
    .quote-1 { 
        bottom:30px; 
        left:-16px; 
        transform: rotate(3deg);
    }
    
    .quote-2 {
        top:30px; 
        right:-16px; 
        transform: rotate(183deg);
    }
    
    .quote {
        padding: 5px 0;
        background-color: #FFF; 
        width: 30px; 
        height: 25px;
    }

    .px-lg {
        padding-right: 28px;
        padding-left: 28px;
    } 

    .img-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-gap: 4px;
        grid-template-areas:
          "item1 item1 item2 item2"
          "item1 item1 item4 item4"
          "item3 item3 item4 item3";
      }
      
      .img-grid-reverse {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-gap: 4px;
        grid-template-areas:
          "item1 item1 item2 item2"
          "item3 item3 item2 item2"
          "item3 item3 item4 item4";
      }
        

    .ticket-frame {
        border: 2px solid var(--secondary-color);
    }
    
    .ticket-grid {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-gap: 16px;
        grid-template-areas:
          "item1" 
          "item2";
    }
    
    .ticket-grid:nth-child(1) { grid-area: item1; }
    .ticket-grid:nth-child(2) { grid-area: item2; }
    
    .ticket-header {
        height: 215px; 
        padding-top: 16px; 
        padding-bottom: 22px;
    }
    
    .ticket-body {
        background-color: var(--secondary-color-40perc); 
        padding: 20px 22px;
    }
    
    .ticket-input {
        width: 95px !important; 
        border: none; 
        border-bottom: 1px solid #000;
    }
    
    .ticket-notice {
        width:4px; 
        height: 20px;
    }

    .form-input {
        height: 36px;
        padding-left: 6px;
    }
      
    .form-input::placeholder {
        font-family: 'Mulish-Medium';
        font-size: 16px;
        color: #A09D9D80;
    }
      
    .form-block-m {
        width: 49%;
    }
      
    .form-block-sm {
        width: 24.5%;
    }
      
    .form-block-lg {
        width: 73.5%;
    }
    
    .form-label-gap {
        margin-top: 6px;
    }

    .heading-text-gap {
        margin-top: 12px;
    }
    .grnd-img-1 {
        height: 161px;
        width: 28%;
    }
    
    .grnd-img-2 {
        height: 161px;
        width: 70%;
    }

    .icon-wrapper {
        width: 60px;
        height: 37px;
    }

    .ticket-icon {
        height: 160px;
        width: 100%;
    }

}

@media (max-width: 420px) {
    .container {
        padding-right: 15px;
        padding-left: 15px;
        max-width: none;
    }
    
}