@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/Montserrat/Montserrat-VariableFont_wght.ttf') format('truetype');
}

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

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

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

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

@font-face {
  font-family: 'SegoeUI';
  src: url('/fonts/SegoeUI/Segoeuil.ttf') format('truetype');
}

@font-face {
  font-family: 'Josefin_Sans';
  src: url('/fonts/Josefin_Sans/static/JosefinSans-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Open Sans';
  src: url('/fonts/Open_Sans/static/OpenSans-Regular.ttf') format('truetype');
}

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



@font-face {
  font-family: 'RobotoCondensed';
  src: url('/fonts/Roboto_Condensed/static/RobotoCondensed-Light.ttf') format('truetype');
  /* src:url('/fonts/Roboto_Condensed/static/RobotoCondensed-Medium.ttf') format('truetype'); */
  /* src:url('/fonts/Roboto_Condensed/static/RobotoCondensed-Regular.ttf') format('truetype'); */
}

@font-face {
  font-family: 'NotoSans';
  /* src: url('/fonts/Noto_Sans/static/NotoSans_Condensed-Light.ttf') format('truetype'); */
  src: url('/fonts/Noto_Sans/static/NotoSans_Light.ttf') format('truetype');
  /* src: url('/fonts/Noto_Sans/static/NotoSans-ExtraLight.ttf') format('truetype'); */
}

/*
Standart Schriftgröße: 			    16px;		  // Browserdefault, 16px  
@phoneLandscapeViewportWidth: 	30em;		  // 480px
@tabletViewportWidth: 			    48em; 		// 768px
@tabletLandscapeViewportWidth: 	64em; 		// 1024px
@desktopViewportWidth: 			    78.75em; 	// 1260px

uk-visible@s 	  Only affects device widths of 640px and larger  	= 40em
uk-visible@m 	  Only affects device widths of 960px and larger.		= 60em
uk-visible@l 	  Only affects device widths of 1200px and larger.	= 75em
uk-visible@xl 	Only affects device widths of 1600px and larger.	= 100em

Breiten: 
font-size: 16px;   Browserdefault, 16px  
.uk-width-*@s 	640px 		40em
.uk-width-*@m 	960px		  60em
.uk-width-*@l 	1200px 		75em
.uk-width-@xl 	1600px 		100em
*/


:root {
  --color-green: #31cd1c;
  --color-green_hover: #2ab119;

  --schrift_size: 16px;
  --color-text: rgba(102, 102, 102, 1.0);
  --color-hover: rgb(46, 47, 33);
  /* --color-hover: rgba(0, 0, 0, 0.5); */

  --color-rot_hell: #FF1E0A;
  --color-rot: #c00000;
  --color-rot_dunkel: #7b0606;

  --color-h1: #444444;
  --color-bg: #f3f3f4;

  --color-button: var(--color-rot);
  --color-button-hover: var(--color-rot_dunkel);
  --color-link: var(--color-text);
  --color-link-hover: var(--color-hover);

  /* Footer */
  --color-footer-bg-oben: rgba(73, 80, 97, 1.0);
  --color-footer-bg-unten: rgba(73, 80, 97, 1.0);
  --color-footer-bg-unten_rechts: rgba(0, 0, 0, 0.15);

  /* Kontakt Seite */
  --color-bg-view-1: #f3efe6;
  --color-bg-view-2: #ffffff;


  --font_text: 'Montserrat', 'dejavu_sansbook', 'Raleway', 'Open Sans', Helvetica, Arial, sans-serif;
  --font_title: 'Luckiest_Guy', 'Cormorant', Helvetica, Arial, sans-serif;
  --font_title_2: 'Luckiest_Guy', 'Permanent Marker', 'Covered By Your Grace', 'Meow Script', 'Modak', 'Rock Salt', 'Spicy Rice', 'Titan One', 'Cormorant Garamond', Helvetica, Arial, sans-serif;
  --font_logo: 'Luckiest_Guy', 'im_fell_english_c', 'afton_james', 'Cormorant', Helvetica, Arial, sans-serif;

  --uk_s: 40em;
  --uk_m: 60em;
  --uk_l: 75em;
  --uk_xl: 100em;
}


html,
body {
  width: 100%;
  margin: 0;
  padding: 0;
  transition: background-color 1s ease;
}

html {
  height: 100%;
  font-family: 'Raleway', 'Open Sans', Arial, Helvetica, sans-serif;
  font-family: var(--font_text);
  font-size: 16px;
  font-size: var(--schrift_size);
  font-weight: 400;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  color: #666;
  color: var(--color-text);
  background-color: #fff;
  background-color: var(--color-bg);
}


a:link,
a:visited {
  text-decoration: none;
  color: #222222;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 20px 0;
  font-family: var(--font_title);
  font-weight: 400;
  color: var(--color-h1);
  text-transform: none;
}

p {
  font-family: var(--font_text);
  color: var(--color-text);
  font-size: 1em;
}

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



/* ==========================================================================
Olox allgemeine Classes
========================================================================== */
.display_no {
  display: none;
  visibility: hidden;
  opacity: 0;
}

.display_hidden {
  visibility: hidden;
  opacity: 0;
}

.nicht_aktiv {
  opacity: 0.5;
}

.opacity_50 {
  opacity: 0.5;
}

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

.error_text {
  color: var(--color-rot_dunkel);
}



.olox_fehler {
  font-size: 2.5em;
  color: var(--color-rot_dunkel);
  text-align: center;
  line-height: 1em;
}

.olox_h {
  font-family: var(--font_title);
  font-size: 3.5rem;
  font-weight: 100;
  color: #000;
  margin-bottom: 30px;
}


/* ==========================================================================
UI-Kit Abpassungen
========================================================================== */
.uk-checkbox.uk-form-danger,
.uk-radio.uk-form-danger {
  border: 1px solid var(--color-rot);
}

.uk-button-primary {
  background-color: var(--color-button);
  color: #fff;
  border: 1px solid transparent;
}

.uk-button-primary:hover {
  background-color: var(--color-button-hover);
  color: #fff;
}

.uk-input,
.uk-select,
.uk-textarea {
  background: #fff;
  color: #666;
  border: 1px solid #e5e5e5;
  border: 1px solid #d7d7d7;
}

.uk-input:focus,
.uk-select:focus,
.uk-textarea:focus {
  outline: 0;
  background-color: #fff;
  color: #666;
  border-color: var(--color-bg);
}

.uk-select:not([multiple]):not([size]) option {
  color: var(--color-text);
}

select option:enabled:hover {
  background-color: var(--color-hover);
}

select:hover option:hover {
  background-color: var(--color-hover);
}

.uk-select option:hover {
  background-color: var(--color-hover);
}

.uk-text-danger {
  color: var(--color-rot) !important;
}


/* ==========================================================================
Anmeldeformular
========================================================================== */
#anmeldung {
  background: #e9e9e9
}

/* Setze die CSS-Eigenschaft pointer-events: none; für die überlagernden Elemente, damit diese keine Klicks mehr registrieren. */
.anmelden_btn_text {
  pointer-events: none;
}

#anmeldung .olox_h {
  margin-bottom: 0px;
}

#ws_error .uk-card-body {
  border: 2px solid var(--color-rot);
}

.form_fehler {
  border: 1px solid var(--color-rot);
  background: #f1c5c7;
}

.form_checkbox_partner {
  margin-top: 5px;
}

.buchung_erfolg,
.buchung_erfolg h2 {
  color: var(--color-rot_dunkel);
}

#fehlermeldung {
  font-size: 1.2em;
  color: var(--color-rot_dunkel);
  font-weight: 400;
  line-height: 1.5em;
  padding: 0.5em;
  background-color: #f1c5c7;
  margin: 30px 0;
}

#reservierung_form .uk-card-default {
  background: #f3f3f4;
  color: #666;
  box-shadow: 0 0px 0px rgba(0, 0, 0, .08);
}

/* ==========================================================================
Zeiten Tabelle
========================================================================== */
.uk-table.vertikale_trennung td:not(:last-child) {
  border-right: solid 1px lightgrey;
}

/* ==========================================================================
SVG Bilder
========================================================================== */
.bild_svg {
  width: 120px;
  height: 120px;
}

.svg_img {
  width: 120px;
  height: 150px;
}

.svg_img svg {
  height: 150px;
  width: auto;
}

@media screen and (min-width: 55em) {
  .svg_img {
    float: right;
  }
}


/* ==========================================================================
map
========================================================================== */
#map {
  height: 100%;
  height: 60vh;
  margin-top: 2em;
  background-color: #fff;
}

#map_essen,
#map_dinner {
  height: 100%;
  height: 60vh;
  background-color: #fff;
}

.switcher-container>:not(.uk-active) {
  display: none;
}

.cafe_div .uk-text-meta {
  display: block;
}

@media screen and (min-width: 55em) {
  .cafe_div .uk-text-meta {
    display: inline;
  }
}

.div_text_essen {
  margin-top: 4.0em;
}

.map_essen_text {
  height: calc(60vh - 20px);
  padding: 10px;
  border: 1px solid #e5e5e5;
  overflow: auto;
}

.cafe_div {
  padding: 1em;
  cursor: help;
}

.cafe_div:hover {
  background-color: rgb(228, 228, 228);
}

/* ==========================================================================
gsap Text reval
https://codepen.io/sedlukha/pen/eRoYMZ
========================================================================== */
.text_reval p {
  /*display: inline-block;*/
  display: block;
  line-height: 1.205;
  margin: 0;
  font-family: var(--font_title);
  color: #000;
  font-size: 2rem;
  font-weight: 700;
}

.text_reval p.schrift_dick_2 {
  font-family: var(--font_title_2);
  font-size: 3.5em;
  color: #c00000;
}

.text__first,
.text__second,
.text__dj,
.text__spezial {
  position: relative;
}

.text__word {
  opacity: 0;
}

.text__first-bg,
.text__second-bg,
.text__dj-bg,
.text__spezial-bg {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 100;
  transform-origin: left;
  transform: scaleX(0);
  background-color: #c00000;
}

/*
.text__first-bg {
  background-color: #c00000;
}
.text__second-bg {
  background-color: #c00000;
} */

p.text__second {
  margin-left: 20vmin;
}

p.text__dj {
  font-size: 1.2em;
  margin-left: 10vmin;
  margin-top: 0.5em;
}

p.text__spezial {
  transform: rotate(-5deg);
  text-align: center;
  color: #c00000;
  margin-top: 1em;
}

p.text__ausgebucht {
  transform: rotate(-5deg);
  text-align: center;
  color: #c00000;
  margin-top: 0.8em;
  /*margin-left: 1em;*/
  font-size: 3em;
  width: 100%;
}

.text__ausgebucht_p {
  display: block;
  font-size: 1.2rem;
}

@media screen and (min-width: 55em) {
  .text_reval p.schrift_dick_2 {
    font-size: 8em;
  }

  .text_reval p {
    font-size: 4rem;
    font-weight: 100;
  }

  p.text__dj {
    font-size: 2.8em;
    margin-left: 18vmin;
  }

  p.text__ausgebucht {
    margin-top: 0.5em;
    margin-left: 0;
    font-size: 7em;
    width: 100%;
  }

  .text__ausgebucht_p {
    font-size: 2rem;
  }
}

.dreihundert_div {
  display: flex;
  align-items: center;
  justify-content: center;
}

.dreihundert_btn {
  width: 70px;
}

.dreihundert_text {
  margin-left: 2em;
}

/* ==========================================================================
Page Loader
========================================================================== */
.loading main {
  opacity: 0;
}

main {
  opacity: 1;
}

.js .loading::before,
.js .loading::after {
  content: '';
  position: fixed;
  z-index: 1000;
}

.js .loading::before {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color-bg);
}

.js .loading::after {
  top: 50%;
  left: 50%;
  width: 60px;
  height: 60px;
  margin: -30px 0 0 -30px;
  border-radius: 50%;
  opacity: 0.4;
  background: var(--color-link);
  animation: loaderAnim 0.7s linear infinite alternate forwards;
}


@keyframes loaderAnim {
  to {
    opacity: 1;
    transform: scale3d(0.5, 0.5, 1);
  }
}




/* ==========================================================================
Kontakt SVG
========================================================================== */
.view--2 {
  background: var(--color-bg-view-2);
  color: #c00000;
  pointer-events: none;
  opacity: 0;
  display: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* .view.view--open {
  pointer-events: auto;
  opacity: 1;
  display: block;
  position: absolute;
  z-index: 2200;
  width: 100%;
  height: 100%;
  overflow: hidden;
} */
.view.view--open {
  pointer-events: auto;
  opacity: 1;
  display: flex;
  position: relative;

  /* z-index: 2200; */
  /* width: 100%; */
  /* height: 100%; */
  /* top: 0px; */
  overflow: hidden;
}

.kontakt_overlay {
  position: absolute;
  z-index: 3000;
  pointer-events: none;
  width: 100%;
  height: 100%;
  top: 0px;
}

.view--kontakt {
  position: absolute;
  z-index: 2000;
  width: 100%;
  height: 100%;
  display: none;
}

.view--kontakt.open {
  display: block;
}

.frame--view-open {
  overflow: hidden;
}

.button--close {
  position: absolute;
  right: 20px;
  top: 20px;
}

.kontakt_div {
  padding: 25px;
  flex-direction: column;
}

.kontakt_titel {
  font-family: var(--font_logo);
  font-size: 2.5rem;
}

.kontakt_untertitel {
  font-size: 1.5rem;
}

.kontakt_text {
  font-size: 1.0rem;
  line-height: 1.5;
}

.moin_logo_kontakt {
  width: 50vw;
  max-height: 300px;
  margin-bottom: 20px;
  padding-right: 20px;
}

@media (min-width: 800px) {
  .kontakt_div {
    padding: 0px;
    flex-direction: row;
  }

  .kontakt_titel {
    font-size: 5.5rem;
  }

  .kontakt_untertitel {
    font-size: 2.5rem;
  }

  .kontakt_text {
    font-size: 1.0rem;
    line-height: 1.5;
  }

  .moin_logo_kontakt {
    width: 20vW;
    margin-bottom: 0;
  }
}



/* ==========================================================================
Hero Splitting letters
========================================================================== */
.whitespace {
  width: 0.15em;
}

#hero .hero_header {
  font-size: 3em;
  color: #fff;
  font-family: "Cormorant Garamond", serif;
  font-family: var(--font_logo);
  font-weight: 900;
  font-weight: 100;
  opacity: 0;
  overflow: hidden;
}

#hero .hero_header>span {
  line-height: 1.2;
  overflow: hidden;
  display: inline-block;
  margin-bottom: 0;
}

#hero .hero_header>span>span {
  display: inline-block;
  -webkit-transform: translateY(100%);
  -ms-transform: translateY(100%);
  transform: translateY(100%);
  opacity: 1;
}

#hero .hero_text {
  opacity: 0;
  color: #fff;
  font-size: 1.2em;
  font-weight: 300;
}

@media screen and (min-width: 55em) {
  #hero .hero_header {
    font-size: 4em;
  }

  #hero .hero_text {
    font-size: 1.5em;
  }
}

/* ==========================================================================
   Moin Section Essen 
   gsap Image parallax 2025
   ========================================================================== */
.image_cont {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.image_cont img {
  position: absolute;
  top: 0;
  width: 100%;
  height: 110%;
  object-fit: cover;
}

@media screen and (min-width: 55em) {
  .image_cont {
    max-height: 400px;
  }
}

/* ==========================================================================
   Maps 2025
   ========================================================================== */
.location-item {
  padding: 10px;
  cursor: pointer;
  border-bottom: 1px solid #eee;
  transition: background-color 0.2s;
}

.location-item:hover {
  background-color: #f0f0f0;
}

.custom-marker img {
  width: 30px;
  display: block;
  cursor: pointer;
}

@keyframes bounce {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-30px);
  }

  100% {
    transform: translateY(0);
  }
}

.marker-bounce {
  animation: bounce 1s infinite;
}

/* ==========================================================================
   Bye bye
   ========================================================================== */
#bye .bild {
  display: flex;
  justify-content: flex-end;
}

#bye .bild img {
  max-height: 500px;
}