/* 
Theme Name: Rennbahn Halle
Theme URI: https://github.com/elementor/hello-theme/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: webdesire
Author URI: https://www.webdesire.de
Template: hello-elementor
Version: 1.0.1
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
*/

/*
    Add your custom styles here
*/


/* #4100B1 lila */
/* #68DF77 grün */

/* SIDE-BUTTONS *********************************************************************************** */
/* ################################################################################################ */

.side-buttons {
  position: fixed !important;
  right: 0;
  top: 275px;
  transform: translateY(-50%);
  z-index: 10 !important;
}


/* FAQ ******************************************************************************************** */
/* ################################################################################################ */

/* Trennlinie nur zwischen FAQ-Items */
.faq-separator .e-n-accordion-item{
  border: 0 !important;
  border-bottom: 1px solid #111 !important;
}

.faq-separator .e-n-accordion-item:last-child{
  border-bottom: 0 !important;
}

/* Mehr Abstand zwischen Titel und Trennlinie */
.faq-separator .e-n-accordion-item{
  padding-bottom: 14px; /* Abstand zur Linie */
}

/* Optional: mehr Luft oberhalb */
.faq-separator .e-n-accordion-item{
  padding-top: 14px;
}

/* Alternativ/zusätzlich: Header/Titel-Zeile luftiger machen */
.faq-separator .e-n-accordion-item-title,
.faq-separator .e-n-accordion-item-title button{
  padding: 18px 0;
}



/* HINTERGRUND MOBIL ****************************************************************************** */
/* ################################################################################################ */

@media (max-width: 767px){
   
   .bg-change-mobile  {
      background: #ECEAEAA1;
   }
}



/* KNUBBEL ZWISCHEN ELEMENTEN ********************************************************************* */
/* ################################################################################################ */

/*  Version 1 (blau) */
/* ---------------------------------------------------- */

.elementor-element.circle-top-v1::before{
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 32px;
  height: 44px;
  border-radius: 9999px;
  transform: translate(-50%, -50%);
  z-index: 999;
  pointer-events: none;

  /* oben (außerhalb) / unten (innerhalb) */
  background: linear-gradient(
  to bottom,
  rgba(65, 0, 177,0.9) 0 50%,
  rgba(65, 0, 177,0.8) 50% 100%
);
}

/*  Version 1b (heller) */
/* ---------------------------------------------------- */

.elementor-element.circle-top-v1b::before{
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 32px;
  height: 44px;
  border-radius: 9999px;
  transform: translate(-50%, -50%);
  z-index: 999;
  pointer-events: none;

  /* oben (außerhalb) / unten (innerhalb) */
  background: linear-gradient(
  to bottom,
  rgba(65, 0, 177,0.5) 0 50%,
  rgba(65, 0, 177,0.5) 50% 100%
);
}


/*  Version 2 (grün) */
/* ---------------------------------------------------- */

.elementor-element.circle-top-v2::before{
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 32px;
  height: 44px;
  border-radius: 9999px;
  transform: translate(-50%, -50%);
  z-index: 999;
  pointer-events: none;

  /* oben (außerhalb) / unten (innerhalb) */
  background: linear-gradient(
  to bottom,
  rgba(104, 223, 119,0.9) 0 50%,
  rgba(255, 255, 255,0.5) 50% 100%
);
}



/*  Version 4 */
/* ---------------------------------------------------- */

.elementor-element.circle-top-v4::before{
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 32px;
  height: 44px;
  border-radius: 9999px;
  transform: translate(-50%, -50%);
  z-index: 999;
  pointer-events: none;

  /* oben (außerhalb) / unten (innerhalb) */
  background: linear-gradient(
  to bottom,
  rgba(104, 223, 119,0.9) 0 50%,
  rgba(104, 223, 119,0.9) 0 50%
);
}

/*  Version 4b (grün, keine Transparenz) */
/* ---------------------------------------------------- */

.elementor-element.circle-top-v4b::before{
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 32px;
  height: 44px;
  border-radius: 9999px;
  transform: translate(-50%, -50%);
  z-index: 999;
  pointer-events: none;

  /* oben (außerhalb) / unten (innerhalb) */
  background: #68DF77;
}


/*  Version 3 */
/* ---------------------------------------------------- */

.elementor-element.circle-top-v3{
  position: relative;
  overflow: visible;

  /* Regler */
  --acorn-w: 32px;
  --acorn-h: 44px;
  --acorn-color: rgba(104, 223, 119,1);
  --icon-size: 26px;
  --icon-y: 0px; /* Abstand vom oberen Rand der Eichel nach unten */
  --icon-url: url("/wp-content/uploads/2026/02/icon-event.png");
}

/* Eichel an der Oberkante, halb außerhalb */
.elementor-element.circle-top-v3::before{
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--acorn-w);
  height: var(--acorn-h);
  border-radius: 9999px;
  transform: translate(-50%, -50%); /* halb raus nach oben */
  z-index: 999;
  pointer-events: none;
  background: #68DF77;
   opacity: 1 !important;
}

/* Icon: exakt an die Eichel gekoppelt (gleicher Anker + gleicher Shift) */
.elementor-element.circle-top-v3::after{
  content: "";
  position: absolute;
  top: 0;               /* gleicher Anker wie ::before */
  left: 50%;
  width: var(--icon-size);
  height: var(--icon-size);
  transform: translate(-50%, calc(-50% + var(--icon-y))); /* innerhalb der Eichel */
  z-index: 1000;
  pointer-events: none;

  background-image: var(--icon-url);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}


/*  Version 5 */
/* ---------------------------------------------------- */

.elementor-element.circle-top-v5  {
  position: relative;
  overflow: visible;

  /* Regler */
  --acorn-w: 32px;
  --acorn-h: 44px;
  --acorn-color: rgba(104, 223, 119,0.98);
  --icon-size: 20px;
  --icon-y: 0px; /* Abstand vom oberen Rand nach unten */
  --icon-url: url("/wp-content/uploads/2026/03/icon-wuerfel.png");
}

/* Eichel an der Oberkante, halb außerhalb */
.elementor-element.circle-top-v5::before{
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--acorn-w);
  height: var(--acorn-h);
  border-radius: 9999px;
  transform: translate(-50%, -50%); /* halb raus nach oben */
  z-index: 999;
  pointer-events: none;
  background: var(--acorn-color);
}

.elementor-element.circle-top-v5::after{
  content: "";
  position: absolute;
  top: 0;               /* gleicher Anker wie ::before */
  left: 50%;
  width: var(--icon-size);
  height: var(--icon-size);
  transform: translate(-50%, calc(-50% + var(--icon-y))); /* innerhalb */
  z-index: 1000;
  pointer-events: none;

  background-image: var(--icon-url);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}




.circle-top-v1-html{
  width: 32px;
  height: 44px;
  border-radius: 9999px;
  background: rgba(65, 0, 177, 0.9);
}

 
.white-bubble  {
  width: 32px;
  height: 44px;
  background: #fff;
  border-radius: 9999px;
}

/* PUNKT-STRICH VOR HEADLINE ********************************************************************** */
/* ################################################################################################ */

/* Voraussetzung: CSS-Klasse "dotline-heading" an Headline-Element gesetzt */

.dotline-heading .elementor-heading-title{
  /* Höhe bleibt responsiv */
  --h: clamp(16px, 3vw, 30px);

  /* Abstände */
  --gap-dot: clamp(10px, 2vw, 18px);     /* Punkt -> Linie */
  --gap-text: 30px;   /* Linie -> Text (Desktop) */

  /* Linienlänge fest (Desktop) */
  --line-w: 260px;

  position: relative;
  display: block;

  /* nur erste Zeile nach rechts (Desktop/Tablet) */
  text-indent: calc(var(--h) + var(--gap-dot) + var(--line-w) + var(--gap-text));
  padding-left: 0 !important;
  padding-top: 0;
}

/* Punkt (oben) */
.dotline-heading .elementor-heading-title::before{
  content: "";
  position: absolute;
  left: 0;
  top: 10px;

  width: var(--h);
  height: var(--h);
  background: #000;
  border-radius: 50%;
  pointer-events: none;
}

/* Linie (oben) */
.dotline-heading .elementor-heading-title::after{
  content: "";
  position: absolute;
  left: calc(var(--h) + var(--gap-dot));
  top: 10px;

  width: var(--line-w);
  height: var(--h);
  background: #fff;
  border-radius: 999px;
  pointer-events: none;
}

/* MOBILE: Linie = 80px + Text unter Punkt/Linie */
@media (max-width: 1024px){
  .dotline-heading .elementor-heading-title{
    --line-w: 80px;

    text-indent: 0;                 /* nicht mehr daneben */
    --stack-gap: 10px;              /* Abstand Linie -> Text (Mobile) */
    padding-top: 50px;
  }
}



/* STRICH-PUNKT ALS TRENNER *********************************************************************** */
/* ################################################################################################ */

.line-dot{
  display: inline-flex;
  align-items: center;
  gap: 10px;              /* Lücke zwischen Linie und Punkt */
}

.line-dot::before{
  content: "";
  width: 35px;
  height: 6px;
  background: #000;
  border-radius: 999px;   /* rund an beiden Enden */
}

.line-dot::after{
  content: "";
  width: 5px;
  height: 5px;
  background: #000;
  border-radius: 50%;     /* runder Punkt */
}


/* PUNKT-STRICH ALS TRENNER *********************************************************************** */
/* ################################################################################################ */

/* lila */

.dot-line{
  display: inline-flex;
  align-items: center;
  gap: 10px; /* Lücke */
}

.dot-line::before{
  content: "";
  width: 9px;
  height: 9px;
  background: #4100b1;
  border-radius: 50%; /* Punkt */
}

.dot-line::after{
  content: "";
  width: 30px;
  height: 9px;
  background: #4100b1;
  border-radius: 999px; /* abgerundeter Strich */
}


/* PUNKT-STRICH ALS TRENNER *********************************************************************** */
/* ################################################################################################ */

/* grün */

.dot-line2 {
  display: inline-flex;
  align-items: center;
  gap: 10px; /* Lücke */
}

.dot-line2::before{
  content: "";
  width: 9px;
  height: 9px;
  background: #68DF77;
  border-radius: 50%; /* Punkt */
}

.dot-line2::after{
  content: "";
  width: 30px;
  height: 9px;
  background: #68DF77;
  border-radius: 999px; /* abgerundeter Strich */
}


/* STRICH ALS TRENNER *********************************************************************** */
/* ################################################################################################ */

.simple-line  {
  display: inline-flex;
  align-items: center;
}

.simple-line::after  {
  content: "";
  width: 38px;
  height: 4px;
  background: #333;
  border-radius: 999px;
}

/* STRICH ALS TRENNER *********************************************************************** */
/* ################################################################################################ */

.simple-line2  {
  display: inline-flex;
  align-items: center;
}

.simple-line2::after  {
  content: "";
  width: 38px;
  height: 4px;
  background: #4100B1;
  border-radius: 999px;
}

.simple-line2-white  {
  display: inline-flex;
  align-items: center;
}

.simple-line2-white::after  {
  content: "";
  width: 38px;
  height: 4px;
  background: #fff;
  border-radius: 999px;
}





/* TERMINE-LOOP *********************************************************************************** */
/* ################################################################################################ */


/* 1,3,5,... */
.elementor-loop-container > *:nth-child(odd) .event-card{
   background: none !important;
   border-radius: 0 !important;
}

/* 2,4,6,... */
.elementor-loop-container > *:nth-child(even) .event-card{
   background: #68DF774D !important;
}


/* 4 Zeilen anzeigen, Rest abschneiden */
.event-excerpt  {
  display: -webkit-box;
  -webkit-line-clamp: 4;      /* Anzahl Zeilen */
  -webkit-box-orient: vertical;
  overflow: hidden;
}








/* HAUPTMENÜ ************************************************************************************** */
/* ################################################################################################ */


.custom-desktop-menu .sub-menu {
    background: transparent;
  transform: translateX(15px);
}

.custom-desktop-menu .sub-menu a.elementor-sub-item {
    background: #fff;
    border-radius: 18px;
   margin-bottom: 10px;
    display: inline-block;
   padding: 6px 10px 6px 5px!important;
}

.custom-desktop-menu .sub-menu a.elementor-sub-item:hover {
    background: #68DF77;
   color: #000 !important;
}




/* Standard: Burger-Button ausblenden */
#mobile-menu-button {
    display: none !important;
}

/* Standard: originales Menü anzeigen */
.custom-desktop-menu {
    display: block!important;
}

/* Unter 1000px: Burger anzeigen, Desktop-Menü ausblenden */
@media (max-width: 1300px) {
    #mobile-menu-button {
        display: block!important;
    }

    .custom-desktop-menu {
        display: none !important;
    }
}








/* TIMELINE *************************************************************************************** */
/* ################################################################################################ */


/* Basis: Jahreszahl mit Linie */
#eael-content-timeline-a61fd93 .eael-content-timeline-block .eael-timeline-excerpt strong {
  display: inline-block;
  position: relative;
  line-height: 1.2;
  padding-bottom: 38px;
}

/* Grundlinie: mobil standardmäßig linksbündig */
#eael-content-timeline-a61fd93 .eael-content-timeline-block .eael-timeline-excerpt strong::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 20px;
  width: 44px;
  height: 4px;
  background: #68df77;
}

/* Mobil alles links */
#eael-content-timeline-a61fd93 .eael-content-timeline-block .eael-timeline-excerpt {
  text-align: left;
}

/* Ab 900px abwechselnd rechts / links */
@media (min-width: 992px) {
  /* ungerade Blöcke rechts */
  #eael-content-timeline-a61fd93 .eael-content-timeline-block:nth-of-type(odd) .eael-timeline-excerpt {
    text-align: right;
  }

  #eael-content-timeline-a61fd93 .eael-content-timeline-block:nth-of-type(odd) .eael-timeline-excerpt strong::after {
    left: auto;
    right: 0;
  }

  /* gerade Blöcke links */
  #eael-content-timeline-a61fd93 .eael-content-timeline-block:nth-of-type(even) .eael-timeline-excerpt {
    text-align: left;
  }

  #eael-content-timeline-a61fd93 .eael-content-timeline-block:nth-of-type(even) .eael-timeline-excerpt strong::after {
    left: 0;
    right: auto;
  }
}



.eael-content-timeline-block, .eael-date  {
   padding: 0 !important;
}




/* NEWS ******************************************************************************************* */
/* ################################################################################################ */

/* Überschriften über den Listen */

.elementor-widget-wp-widget-recent-posts .elementor-widget-container > h5,
.elementor-widget-wp-widget-archives .elementor-widget-container > h5
{
   font-family: "Roboto Slab";
   font-weight: bold;
}



/* Neueste Artikel-Links */

.artikel-liste ul,
.artikel-liste ol {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}

.artikel-liste li {
  display: block !important;
  width: fit-content !important;
  max-width: max-content !important;
  list-style: none !important;
  margin: 0 10px 18px 0 !important;
  /*padding: 8px 17px 8px 17px !important;*/
  font-family: "Roboto Slab";
  /*font-weight: bold;*/
  /* background: #fff !important; */
   line-height: normal;
  border-radius: 999px !important;
}

.artikel-liste li a {
  display: inline !important;
  width: auto !important;
  text-decoration: none;
  color: inherit;
}

.artikel-liste li a:hover {
  color: #4100B1;
}

.artikel-liste li::marker,
.artikel-liste li::before {
  content: none !important;
  display: none !important;
}

/* Monatsarchiv-Links */

.monats-liste ul,
.monats-liste ol {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}

.monats-liste li {
  display: inline-block !important;
  width: fit-content !important;
  max-width: max-content !important;
  list-style: none !important;
  margin: 0 10px 18px 0 !important;
  padding: 8px 17px 5px 17px !important;
  font-weight: bold;
  background: #fff !important;
  border-radius: 999px !important;
}

.monats-liste li a {
  display: inline !important;
  width: auto !important;
  text-decoration: none;
  color: inherit;
}

.monats-liste li::marker,
.monats-liste li::before {
  content: none !important;
  display: none !important;
}


@media (max-width: 767px) {
   
   .artikel-liste li, .monats-liste li  {
     padding: 8px 25px 5px 25px !important;
}
   
}





/* RENNTAG **************************************************************************************** */
/* ################################################################################################ */

/* Toggle (einzelne Rennen) */

.e-con.ec-container,
.elementor-section.ec-container {
  position: relative !important;
  overflow: hidden !important;
}

.e-con.ec-container.collapsed,
.elementor-section.ec-container.collapsed {
  max-height: 102px !important;
  padding-bottom: 12px !important;
}

@media (max-width: 768px) {
  .e-con.ec-container.collapsed,
  .elementor-section.ec-container.collapsed {
    max-height: 120px !important;
  }
}

.ec-toggle {
  position: absolute !important;
  top: 0px !important;
  right: -4px !important;
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  background: #000000 !important;
  border: 6px solid #fff !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 9999 !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
  font-size: 22px !important;
  font-weight: 300 !important;
  color: #ffffff !important;
  font-family: Arial, sans-serif !important;
  text-align: center !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

.ec-toggle span {
  display: block !important;
  transform: translate(1px, 1px) !important;
}

.ec-container.collapsed .ec-inner {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.3s !important;
}



/* Badge in Übersichtsblock */

.renntagoption-badge p {
   display: inline-block !important;
   width: fit-content !important;
   max-width: max-content !important;
   padding: 5px 15px 4px 15px !important;
   background: #fff !important;
   border-radius: 999px !important;
   color: #4100B1;
   font-size: 13px;
   font-weight: bold;
   line-height: normal !important;
}

/* Badge in Rennteilnehmer */

.rennteilnehmer-badge p {
   display: inline-block !important;
   width: fit-content !important;
   max-width: max-content !important;
   padding: 4px 15px 4px 15px !important;
   background: #000 !important;
   border-radius: 999px !important;
   color: #fff;
   font-size: 14px;
   font-weight: 500;
   font-style: italic;
   line-height: normal !important;
   text-transform:uppercase;
   letter-spacing: 1px;
}



/* Badge Renn-Nummer */

.rennen-badge {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  padding: 5px 10px 5px 25px;
  background: #fff;
  border-radius: 999px;
  color: #000;
}

.rennen-badge-number {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #000;
  color: #fff;
  border-radius: 50%;
}

/* Badge Startzeit */

.startzeit-badge p {
   display: inline-block !important;
   width: fit-content !important;
   max-width: max-content !important;
   padding: 5px 15px 4px 15px !important;
   margin: 0;
   background: #4100B1 !important;
   border-radius: 999px !important;
}


/* Badge in Übersichtsblock */

.rennenoption-badge p {
   display: inline-block !important;
   width: fit-content !important;
   max-width: max-content !important;
   padding: 5px 15px 5px 15px !important;
   background: #ebe5f7 !important;
   border-radius: 999px !important;
}



/* Favoriten-Bubble */

.svg-favoriten {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #68DF77;
  background-image: url("/wp-content/uploads/2026/03/icon-favoriten.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px 24px;
}



/* COMLIANZ-BUTTON ******************************************************************************** */
/* ################################################################################################ */

.cmplz-accept-service  {
   border: none !important;
   padding: 4px 14px 5px 17px!important;
   font-size: 1rem !important;
}



.page-id-13 h2, .page-id-30 h2, .page-id-28 h2  {
   margin: 2.3rem 0 2rem 0;
}

.page-id-13 h3, .page-id-30 h3, .page-id-28 h3  {
   margin: 2.1rem 0 1.8rem 0;
}