/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

:root {
  /* Event Kategorie Farben */
  --einzeltrainings-color: #b89f99;
  --welpenschule-color: #8fdbe0;
  --beschaeftigungskurse-color: #d4b612;
  --gruppentraining-color: #b8724e;
  --beratungstermin-color: #bfbfbf;
  --urlaub-color: #d03f3f;

  /* Farben für Farblegende */
  --purple-color: #ab6cb8;
  --yellow-color: #fdbe5c;
  --green-color: #93d8ab;
  --brown-color: #cc9494;

  /* --e-global-color-f0561b9 */

  --border-radius-xxsmall: 2px;
  --border-radius-xsmall: 4px;
  --border-radius-small: 8px;
  --border-radius-medium: 12px;
  --border-radius-large: 16px;

  --padding-xsmall: 0.25rem;
  --padding-small: 0.5rem;
  --padding-medium: 1rem;
  --padding-large: 1.5rem;
  --padding-xlarge: 2rem;
  --padding-xxlarge: 3rem;

  --card-padding: var(--padding-medium);
  --card-border-radius: var(--border-radius-xsmall);
  --card-border: solid 1px grey;
  --card-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.color-legend {
  display: flex;
  flex-flow: row wrap;
  gap: 1rem;
}

.color-legend__item {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.color-field {
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 4px;
  display: inline-block;
  border: 1px solid #ccc;
}
.color-field__purple {
  background-color: var(--purple-color);
}
.color-field__yellow {
  background-color: var(--yellow-color);
}
.color-field__green {
  background-color: var(--green-color);
}
.color-field__brown {
  background-color: var(--brown-color);
}
#espresso_calendar:not(.ui-widget) .fc-event {
  background-color: var(--brown-color) !important;
}

/* Spezielle Events überschreiben die Standardfarbe mit ihrer eigenen Variable */
#espresso_calendar:not(.ui-widget) .freistunde {
  background-color: var(--green-color) !important;
}

#espresso_calendar:not(.ui-widget) .natascha-training {
  background-color: var(--purple-color) !important;
}

#espresso_calendar:not(.ui-widget) .grossweismannsdorf {
  background-color: var(--brown-color) !important;
}

#espresso_calendar:not(.ui-widget) .ohne-passwort {
  background-color: var(--yellow-color) !important;
}




/*

########################################
Events Seite Custom CSS
########################################
*/

/* Hintergrundfarbe des Containers anpassen für mobile ansicht da über elementor nur bilder für bestimmte breakpoints auswählbar sind aber keine farben.... 
   Betrifft die kurzen Abschnitte über dem Menü
*/
@media only screen and (max-width: 767px) {
  .elementor-element-71a6134,
  .elementor-element-5b69a64 {
    background-color: #2e0500 !important;
  }
}

.elementor-image-box-img {
  max-height: 400px !important;
}

#ticket-selector-submit-10493-btn {
  background-color: #fe9f5b;
}

#ticket-selector-submit-10493-btn:hover {
  background-color: #ffffff;
  color: #fe9f5b;
  transform: scale(1.08);
  border: solid 2px #fe9f5b;
}

/* CSS Template Classes */

.info-card {
  color: var(--e-global-color-202c3c1);
  background-color: var(--e-global-color-d15f8e3);
  border-radius: var(--card-border-radius);
  border: var(--card-border);
  padding: var(--card-padding);
  box-shadow: var(--card-box-shadow);
  hyphens: auto;
}

/* Man kann irgendwie nicht die height im Editor einstellen, deswegen hier. */
.page-header-background {
  height: 100%;
}