/**

* Cinema Website Global Styles
* Global styling for the cinema website, including typography, colors, spacing, and base styles

* Author: ticket international
*
* Version: 1.0.0
*
* Copyright: 2024 ticket. international GmbH & Co. KG
*
* Released on: 23.02.2024
*
* Updated on: [Date Updated]

*/

/* Reset or Normalize */
@import url("assets/css/normalize.css");

/***** FONTS *****/
/* Roboto */
@font-face {
  font-family: "Roboto-Black";
  src: url("assets/fonts/roboto/Roboto-Black.ttf");
}

@font-face {
  font-family: "Roboto-BlackItalic";
  src: url("assets/fonts/roboto/Roboto-BlackItalic.ttf");
}

@font-face {
  font-family: "Roboto-Bold";
  src: url("assets/fonts/roboto/Roboto-Bold.ttf");
}

@font-face {
  font-family: "Roboto-BoldItalic";
  src: url("assets/fonts/roboto/Roboto-BoldItalic.ttf");
}

@font-face {
  font-family: "Roboto-Italic";
  src: url("assets/fonts/roboto/Roboto-Italic.ttf");
}

@font-face {
  font-family: "Roboto-Light";
  src: url("assets/fonts/roboto/Roboto-Light.ttf");
}

@font-face {
  font-family: "Roboto-LightItalic";
  src: url("assets/fonts/roboto/Roboto-LightItalic.ttf");
}

@font-face {
  font-family: "Roboto-Medium";
  src: url("assets/fonts/roboto/Roboto-Medium.ttf");
}

@font-face {
  font-family: "Roboto-MediumItalic";
  src: url("assets/fonts/roboto/Roboto-MediumItalic.ttf");
}

@font-face {
  font-family: "Roboto-Regular";
  src: url("assets/fonts/roboto/Roboto-Regular.ttf");
}

@font-face {
  font-family: "Roboto-Thin";
  src: url("assets/fonts/roboto/Roboto-Thin.ttf");
}

@font-face {
  font-family: "Roboto-ThinItalic";
  src: url("assets/fonts/roboto/Roboto-ThinItalic.ttf");
}

/* Roboto Condensed */
@font-face {
  font-family: "RobotoCondensed-Black";
  src: url("assets/fonts/roboto/RobotoCondensed-Black.ttf");
}

@font-face {
  font-family: "RobotoCondensed-BlackItalic";
  src: url("assets/fonts/roboto/RobotoCondensed-BlackItalic.ttf");
}

@font-face {
  font-family: "RobotoCondensed-Bold";
  src: url("assets/fonts/roboto/RobotoCondensed-Bold.ttf");
}

@font-face {
  font-family: "RobotoCondensed-BoldItalic";
  src: url("assets/fonts/roboto/RobotoCondensed-BoldItalic.ttf");
}

@font-face {
  font-family: "RobotoCondensed-Italic";
  src: url("assets/fonts/roboto/RobotoCondensed-Italic.ttf");
}

@font-face {
  font-family: "RobotoCondensed-Light";
  src: url("assets/fonts/roboto/RobotoCondensed-Light.ttf");
}

@font-face {
  font-family: "RobotoCondensed-LightItalic";
  src: url("assets/fonts/roboto/RobotoCondensed-LightItalic.ttf");
}

@font-face {
  font-family: "RobotoCondensed-Medium";
  src: url("assets/fonts/roboto/RobotoCondensed-Medium.ttf");
}

@font-face {
  font-family: "RobotoCondensed-MediumItalic";
  src: url("assets/fonts/roboto/RobotoCondensed-MediumItalic.ttf");
}

@font-face {
  font-family: "RobotoCondensed-Regular";
  src: url("assets/fonts/roboto/RobotoCondensed-Regular.ttf");
}

@font-face {
  font-family: "RobotoCondensed-Thin";
  src: url("assets/fonts/roboto/RobotoCondensed-Thin.ttf");
}

@font-face {
  font-family: "RobotoCondensed-ThinItalic";
  src: url("assets/fonts/roboto/RobotoCondensed-ThinItalic.ttf");
}

/* Font Awesome */
@font-face {
  font-family: "FontAwesome-Brands";
  src: url("assets/fonts/font-awesome-6-4/webfonts/fa-brands-400.ttf");
}

@font-face {
  font-family: "FontAwesome-Regular";
  src: url("assets/fonts/font-awesome-6-4/webfonts/fa-regular-400.ttf");
}

@font-face {
  font-family: "FontAwesome-Solid";
  src: url("assets/fonts/font-awesome-6-4/webfonts/fa-solid-900.ttf");
}

@font-face {
  font-family: "FontAwesome-Compatibility";
  src: url("assets/fonts/font-awesome-6-4/webfonts/fa-v4compatibility.ttf");
}

/* Fonts */
:root {
  --roboto-black: "Roboto-Black";
  --roboto-blackitalic: "Roboto-BlackItalic";
  --roboto-bold: "Roboto-Bold";
  --roboto-bolditalic: "Roboto-BoldItalic";
  --roboto-italic: "Roboto-Italic";
  --roboto-light: "Roboto-Light";
  --roboto-lightitalic: "Roboto-LightItalic";
  --roboto-medium: "Roboto-Medium";
  --roboto-mediumitalic: "Roboto-MediumItalic";
  --roboto-regular: "Roboto-Regular";
  --roboto-thin: "Roboto-Thin";
  --roboto-thinitalic: "Roboto-ThinItalic";

  --roboto-condensed-black: "RobotoCondensed-Black";
  --roboto-condensed-blackitalic: "RobotoCondensed-BlackItalic";
  --roboto-condensed-bold: "RobotoCondensed-Bold";
  --roboto-condensed-bolditalic: "RobotoCondensed-BoldItalic";
  --roboto-condensed-italic: "RobotoCondensed-Italic";
  --roboto-condensed-light: "RobotoCondensed-Light";
  --roboto-condensed: "RobotoCondensed-Light";
  --roboto-condensed-lightitalic: "RobotoCondensed-LightItalic";
  --roboto-condensed-medium: "RobotoCondensed-Medium";
  --roboto-condensed-mediumitalic: "RobotoCondensed-MediumItalic";
  --roboto-condensed-regular: "RobotoCondensed-Regular";
  --roboto-condensed-thin: "RobotoCondensed-Thin";
  --roboto-condensed-thinitalic: "RobotoCondensed-ThinItalic";

  --fontawesome-brands: "FontAwesome-Brands";
  --fontawesome-regular: "FontAwesome-Regular";
  --fontawesome-solid: "FontAwesome-Solid";
  --fontawesome-compatibility: "FontAwesome-Compatibility";
}

/* Colors */
:root {
  --ticket-color: #00aa96;
  --ticket-color-hover: #007769;
  --background-color: #161b21;
  --background-color-transparent: #161b2100;
  --darker-gray-color: #28343f;
  --dark-card-backgroundcolor: #2d3035;
  --disabled-color: #626262;
  --payment-button-background: #566173;
  --fullButtonColor: #fff;
  --SlimButtonColor: #fff;
  --quicklink-color-one: #a50a7c;
  --quicklink-color-two: #fe6f5f;
  /* Card background */
  --light-gray-background-color: #414853;
  /* Anmelden, Registrieren Form */
  --border-tab-color: #566173;
  /* Border, Tabs */
  --text-color: #e6e6e6;
  --text-color-hover: #cccccc;
  --white-color: #ffffff;
  --black-color: #000000;
  /* Filter */
  --yellow-color: #f7941e;
  /* Filmkalender */
  --pink-color: rgba(247, 30, 189, 0.23);
  /* 3D */
  --green-color: rgba(0, 170, 150, 0.23);
  /* ATMOS */
  --gray-color: rgba(56, 61, 73, 0.23);
  /* 2D */
  --brown-color: rgba(225, 72, 38, 0.23);
  /* OV */
  --fsk6-color: #ffe100;
  /* nicht in Vorlage von Herrn Käufer */
  --fsk12-color: #2cc36d;
  --fsk16-color: #2c65c3;
  /* nicht in Vorlage von Herrn Käufer */
  --fsk18-color: #c62c47;
  /* nicht in Vorlage von Herrn Käufer */
  /* Gradient -> private cinema */
  --special-btn-first-color: #a50a7c;
  --special-btn-second-color: #fe6f5f;
  --timeout-color: #e14838;
  /* Online booking */
  --quickticket-color: #fe6f5f;
  --saalplan-darker-color: #39515e;
  --saalplan-dark-color: #547b8d;
  --saalplan-light-color: #6393a8;
  --swiper-chevron-color: #fff;
  --filter-background-color: #000000;
  --password-icon-color: #838c9b;
}

:root :where(.is-layout-constrained)>* {
  margin-top: 0px !important;
}

/* Font Sizes */
:root {
  --text-3xs: 10px;
  --text-xxs: 12px;
  /* Footer */
  --text-xs: 14px;
  /* Footer captions */
  --text-sm: 15px;
  /* Normal font size for text */
  --text-placeholder: 16px;
  --text-btn-lg: 17px;
  --text-md-sm: 18px;
  /* e.g Navbar */
  --text-md: 20px;
  /* Description for Movie in Hero Section */
  --text-md-lg: 21px;
  /* Different Dates / days */
  --text-filter-caption: 24px;
  --text-lg: 25px;
  --text-xl: 30px;
  --text-xxl: 35px;
  --text-3xl: 40px;
  /* Captions for the different sections e.g. "Aktuelles Programm" */
  --text-4xl: 55px;
  /* Movie Title in Hero Section */
}

/* Spacing
:root {
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
} */

/* Border Radius */
:root {
  --border-xs: 2px;
  /* Showtimes */
  --border-sm: 5px;
  /* FSK, purchase icon */
  --border-md: 10px;
  /* Buttons etc. */
  --border-lg: 17px;
  /* Input fields in Form */
  --border-xl: 20px;
  /* method of payment */
}

/* Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: var(--roboto-condensed-regular);
}

.wp-site-blocks>main {
  border-color: #161b21;
}

.contact_form_text span,
.contact_form_text label {
  color: #e6e6e6;
  font-family: var(--roboto-condensed-regular);
  font-weight: 400 !important;
}

.contact_form_button {
  cursor: pointer !important;
  border: none !important;
  background-color: var(--ticket-color) !important;
  color: var(--text-color) !important;
  border-radius: var(--border-md) !important;
}

body {
  background-color: var(--background-color) !important;
  background: var(--background-color) !important;
  font-family: var(--roboto-condensed-regular);
  font-size: 15px;
  line-height: 1.5;
}

p,
h1,
h2,
h3,
h4,
h5,
h6,
div,
button {
  font-family: var(--roboto-condensed-regular) !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: bold;
}

/* p {
  margin: 0 !important;
  padding: 0 !important;
} */

a {
  font-family: var(--roboto-condensed-regular);
  color: var(--white-color) !important;
  font-size: var(--text-md-sm);
  text-decoration: none !important;
  transition: color 0.3s ease;
}

.underline-hover {
  position: relative;
}

.underline-hover::after {
  content: "";
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 100%;
  height: 0.1em;
  background-color: var(--ticket-color);
  opacity: 0;
  transition: opacity 300ms, transform 300ms;
}

.underline-hover:hover::after {
  opacity: 1;
  transform: translate3d(0, 0.2em, 0);
}

.underline-hover::after {
  opacity: 1;
  transform: scale(0);
  transform-origin: center;
}

.underline-hover:hover::after {
  transform: scale(1);
}

.contentAreaOuter {
  width: 1920px;
  background-color: red;
}

.contentAreaInner {
  width: 1450px;
  background-color: skyblue;
}

/***** BUTTONS *****/
.primary-button {
  cursor: pointer;
  border: none;
  background-color: var(--ticket-color);
  color: var(--text-color);
  border-radius: var(--border-md);
  text-transform: uppercase;
  text-align: center;
}

.primary-button:hover {
  background-color: var(--ticket-color-hover);
}

.primary-button:disabled {
  background-color: var(--ticket-color);
  opacity: 0.5;
  cursor: not-allowed;
}

.primary-button.disabled {
  background-color: var(--ticket-color);
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}

.secondary-button {
  cursor: pointer;
  border: 1px solid var(--text-color);
  background-color: transparent;
  color: var(--text-color);
  border-radius: var(--border-md);
  text-transform: uppercase;
  text-align: center;
}

.special-button {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  background: transparent linear-gradient(220deg,
      var(--special-btn-first-color) 0%,
      var(--special-btn-second-color) 100%) 0% 0% no-repeat padding-box !important;
  color: var(--text-color);
  border-radius: var(--border-md);
  text-transform: none;
  text-align: center;
}

.primary-button-outline {
  cursor: pointer;
  border: none;
  background-color: transparent;
  color: var(--text-color);
  border: 1px solid var(--ticket-color);
  border-radius: var(--border-md);
  text-transform: uppercase;
  text-align: center;
}

.primary-button-outline:hover {
  background-color: var(--ticket-color-hover);
}

.drp-apply-btn {
  border: 0;
  width: 0;
}

.drp-cancel-btn {
  width: 100%;
}

.drp-cancel-btn::before {
  font: var(--fa-font-solid);
  content: "\f077";
  color: var(--text-color);
  display: flex;
  justify-content: center;
  align-items: center;
}

.aktuelles-programm__showtime-button {
  width: 64px;
  height: 22px;
  cursor: pointer;
  border-radius: var(--border-md);
  border: 1px solid var(--border-tab-color);
  color: var(--text-color);
}

.aktuelles-programm__moredays-button {
  width: 145px;
  height: 24px;
  cursor: pointer;
  border-radius: var(--border-md);
  border: 1px solid var(--ticket-color);
  color: var(--ticket-color);
}

/***** END BUTTONS *****/

/* Header */

/* End Header */

/***** HERO SECTION *****/

.hero-section__image {
  width: 441px;
  height: 659px;
  object-fit: cover;
  object-position: top;
  box-shadow: 0px 3px 15px #00000091;
}

/***** END HERO SECTION *****/

/***** AKTUELLES PROGRAMM *****/
.aktuelles-prgramm-section {
  width: 100%;
  height: 607px;
  display: flex;
  flex-direction: row;
  gap: 38px;
  background: transparent linear-gradient(180deg, var(--background-color) 0%, #161b2100 100%) 0% 0% no-repeat padding-box;
}

.aktuelles-programm-section__card {
  width: 254px;
  height: 399px;
  border-radius: var(--border-md);
  background-color: var(--dark-card-backgroundcolor);
}

.aktuelles-programm-section__card__image {
  width: 100%;
  height: 379px;
  object-fit: cover;
}

/* END AKTUELLES PROGRAMM */

/***** NEUIGKEITEN *****/
.news-section {
  width: 100%;
  height: 651px;
}

.news-section__card {
  width: 337px;
  height: 516px;
}

.news-section__card__image {
  width: 100%;
  height: 166px;
  object-fit: cover;
}

/***** END NEUIGKEITEN *****/

/***** RECTANGLES *****/
.rectangles-section {
  width: 100%;
  height: 292px;
}

.rectangles-section__image {
  width: 351px;
  height: 292px;
  object-fit: cover;
}

/***** END RECTANGLES *****/

/***** EVENTS / PREVIEWS / FILMAUSLESE *****/
.filmauslese-section {
  width: 100%;
  height: xxx;
}

.filmauslese-section__card {
  width: 351px;
  height: 788px;
  background-color: var(--dark-card-backgroundcolor);
  box-shadow: 0px 3px 10px #0000005c;
  padding: 31px 25px;
}

/***** END EVENTS / PREVIEWS / FILMAUSLESE *****/

/* Filmkalender */

/* End Filmkalender */

/***** ONLINE BOOKING *****/
.online-booking__card {
  width: 490px;
  height: 653px;
  border-radius: var(--border-md);
  background-color: var(--dark-card-backgroundcolor);
  padding: 33px 68px;
}

/***** END ONLINEBOOKING*****/

/* Text */
.hero-movie-title {
  font-size: var(--text-4xl);
  color: var(--text-color);
  font-family: var(--roboto-bold);
  text-transform: uppercase;
}

.hero-movie-desc {
  font-size: var(--text-md);
  color: var(--text-color);
  font-family: var(--roboto-condensed-regular);
}

.caption {
  font-family: var(--roboto-condensed-bold);
  font-size: var(--text-3xl);
  color: var(--text-color);
  text-transform: uppercase;
}

.subcaption {
  font-family: var(--roboto-condensed-regular);
  font-size: var(--text-3xl);
  color: var(--text-color);
  text-transform: uppercase;
}

.card-caption {
  font-family: var(--roboto-condensed-bold);
  font-size: var(--text-sm);
  color: var(--text-color);
  text-transform: uppercase;
}

.card-text {
  font-family: var(--roboto-condensed-regular);
  font-size: var(--text-sm);
  color: var(--text-color);
}

.footer-caption {
  font-family: var(--roboto-condensed-thin);
  font-size: var(--text-xxs);
  color: var(--ticket-color);
  text-transform: uppercase;
}

.frames-caption {
  color: var(--darker-gray-color);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Small devices (sm) - 640px */
@media (min-width: 640px) {
  /* Your styles for small devices here */
}

/* Medium devices (md) - 768px */
@media (min-width: 768px) {
  /* Your styles for medium devices here */
}

/* Large devices (lg) - 1024px */
@media (min-width: 1024px) {
  /* Your styles for large devices here */
}

/* Extra-large devices (xl) - 1280px */
@media (min-width: 1280px) {
  /* Your styles for extra-large devices here */
}

/* Double extra-large devices (2xl) - 1536px */
@media (min-width: 1536px) {
  /* Your styles for double extra-large devices here */
}

/***** EXPORT CLASSES *****/
/* Colors */
.ticket-color {
  color: var(--ticket-color);
}

.ticket-background-color {
  background-color: var(--ticket-color);
}

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

.darker-gray-color {
  background-color: var(--darker-gray-color);
}

.dark-card-backgroundcolor {
  background-color: var(--dark-card-backgroundcolor);
}

.light-gray-background-color {
  background-color: var(--light-gray-background-color);
}

.border-tab-color {
  color: var(--border-tab-color);
}

.border-tab-background-color {
  background-color: var(--border-tab-color);
}

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

.white-color {
  color: var(--white-color);
}

.black-color {
  background-color: var(--black-color);
}

.yellow-color {
  background-color: var(--yellow-color);
}

.pink-color {
  background-color: var(--pink-color);
}

.green-color {
  background-color: var(--green-color);
}

.gray-color {
  background-color: var(--gray-color);
}

.brown-color {
  background-color: var(--brown-color);
}

.fsk6-color {
  color: var(--fsk6-color);
}

.fsk12-color {
  color: var(--fsk12-color);
}

.fsk16-color {
  color: var(--fsk16-color);
}

.fsk18-color {
  color: var(--fsk18-color);
}

.timeout-color {
  background-color: var(--timeout-color);
}

.quickticket-color {
  background-color: var(--quickticket-color);
}

.saalplan-darker-color {
  background-color: var(--saalplan-darker-color);
}

.saalplan-dark-color {
  background-color: var(--saalplan-dark-color);
}

.saalplan-light-color {
  background-color: var(--saalplan-light-color);
}

/* Font Size */
.text-xxs {
  font-size: var(--text-xxs);
}

.text-xs {
  font-size: var(--text-xs);
}

.text-sm {
  font-size: var(--text-sm);
}

.text-placeholder {
  font-size: var(--text-placeholder);
}

.text-btn-lg {
  font-size: var(--text-btn-lg);
}

.text-md-sm {
  font-size: var(--text-md-sm);
}

.text-md {
  font-size: var(--text-md);
}

.text-md-lg {
  font-size: var(--text-md-lg);
}

.text-filter-caption {
  font-size: var(--text-filter-caption);
}

.text-lg {
  font-size: var(--text-lg);
}

.text-xl {
  font-size: var(--text-xl);
}

.text-xxl {
  font-size: var(--text-xxl);
}

.text-3xl {
  font-size: var(--text-3xl);
}

.text-4xl {
  font-size: var(--text-4xl);
}

/* Border Radius */
.border-xs {
  border-width: var(--border-xs);
}

.border-sm {
  border-width: var(--border-sm);
}

.border-md {
  border-width: var(--border-md);
}

.border-lg {
  border-width: var(--border-lg);
}

.border-xl {
  border-width: var(--border-xl);
}

/***** END EXPORT CLASSES *****/

/***** UTILITIES *****/
/* Flexbox & Grid */
.flex-row {
  flex-direction: row;
}

.flex-row-reverse {
  flex-direction: row-reverse;
}

.flex-col {
  flex-direction: column;
}

.flex-col-reverse {
  flex-direction: column-reverse;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-wrap-reverse {
  flex-wrap: wrap-reverse;
}

.flex-nowrap {
  flex-wrap: nowrap;
}

.justify-normal {
  justify-content: normal;
}

.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

.justify-evenly {
  justify-content: space-evenly;
}

.justify-stretch {
  justify-content: stretch;
}

.justify-items-start {
  justify-items: start;
}

.justify-items-end {
  justify-items: end;
}

.justify-items-center {
  justify-items: center;
}

.justify-items-stretch {
  justify-items: stretch;
}

.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

.items-center {
  align-items: center;
}

.items-baseline {
  align-items: baseline;
}

.items-stretch {
  align-items: stretch;
}

.grow {
  flex-grow: 1;
  /* Use grow to allow a flex item to grow to fill any available space */
}

.grow-0 {
  flex-grow: 0;
  /* Use grow-0 to prevent a flex item from growing */
}

.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid-cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.grid-cols-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

/* Typography */
.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-justify {
  text-align: justify;
}

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

/* Transform */
.text-uppercase {
  text-transform: uppercase;
}

.text-lowercase {
  text-transform: lowercase;
}

.text-capitalize {
  text-transform: capitalize;
}

/* Font Weight */
.font-thin {
  font-weight: 100;
}

.font-extralight {
  font-weight: 200;
}

.font-light {
  font-weight: 300;
}

.font-normal {
  font-weight: 400;
}

.font-medium {
  font-weight: 500;
}

.font-semibold {
  font-weight: 600;
}

.font-bold {
  font-weight: 700;
}

.font-extrabold {
  font-weight: 800;
}

.font-black {
  font-weight: 900;
}

/* Decoration */
.underline {
  text-decoration-line: underline;
}

.overline {
  text-decoration-line: overline;
}

.line-through {
  text-decoration-line: line-through;
}

.no-underline {
  text-decoration-line: none;
}

/* Display and Visibility */
.d-flex {
  display: flex;
}

.d-grid {
  display: grid;
}

.d-block {
  display: block;
}

.d-inline {
  display: inline;
}

.d-inline-block {
  display: inline-block;
}

.d-none {
  display: none;
}

.invisible {
  visibility: hidden;
}

.visible {
  visibility: visible;
}

/* Overflow */
.overflow-auto {
  overflow: auto;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-visible {
  overflow: visible;
}

.overflow-scroll {
  overflow: scroll;
}

/* Positioning */
.position-static {
  position: static;
}

.position-relative {
  position: relative;
}

.position-absolute {
  position: absolute;
}

.position-fixed {
  position: fixed;
}

.preisliste-table table {
  margin-left: auto;
  margin-right: auto;
  width: 60%;
  border-style: none;
  color: var(--text-color);
  border: 0px !important;
}

.kinoinfos {
  width: 60%;
  max-width: 60%;
  color: var(--text-color);
}

.unserkino {
  width: 85%;
  max-width: 85%;
  color: var(--text-color);
}

.kinoinfos-spacer {
  height: 150px;
}

.header_spacer {
  height: 150px;
}

.impressumheadline {
  margin-top: 25px;
}

@media (max-width: 768px) {
  .wp-block-spacer{
    height: 100px!important;
  }
  .preisliste-table table {
    width: 85%;
  }

  .header_spacer {
    height: 75px;
  }

  .kinoinfos {
    width: 85%;
    max-width: 85%;
  }

  .unserkino {
    width: 100%;
    max-width: 100%;
  }

  .kinoinfos-spacer {
    height: 30px;
  }

  .banner-spacer {
    display: none;
  }
}

.preisliste-table th,
.preisliste-table td {
  border: 0px !important;
}

.shadow-effect-left {
  pointer-events: none;
  z-index: 10;
  top: 0;
  bottom: 0;
  position: absolute;
  left: 0;
  width: 490px;
  height: 100%;
  background: transparent linear-gradient(90deg,
      var(--background-color) 0%,
      var(--background-color-transparent) 100%) 0% 0% no-repeat padding-box;
}

.shadow-effect-right {
  pointer-events: none;
  z-index: 3;
  top: 0;
  bottom: 0;
  position: absolute;
  right: 0;
  width: 490px;
  height: 100%;
  background: transparent linear-gradient(270deg,
      var(--background-color) 0%,
      var(--background-color-transparent) 100%) 0% 0% no-repeat padding-box;
}

.btn-nostyle {
  border: 0 !important;
  background-color: unset;
  margin: unset;
  line-height: unset;
  text-transform: unset;
}

.loading-animation {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

#errorMessageBox {
  display: none;
  padding: 20px;
  height: fit-content;
  width: 40vw;
  top: 25vh;
  border: 3px #ff0000 solid;
  position: fixed;
  margin-left: auto !important;
  margin-right: auto !important;
  z-index: 555;
  text-align: center;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 10px;
  color: var(--text-color);
  background: var(--background-color);
}

@media screen and (max-width: 767px) {
  #errorMessageBox {
    width: 80vw;
  }
}