/* 
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
*/

/* ==========================================================================
   Heading Customization
   - Adds margin-top to Heading widget
   ========================================================================== */
   .elementor-widget-heading {
    margin-top: 20px;
  }
  
  
  /* ==========================================================================
     Elementor Text Editor - UL Bullet Customization
     - Limits styling to Text Editor widget
     - Prevents conflicts with Icon List, Nav Menu, and other UL components
     ========================================================================== */
  .elementor-widget-text-editor ul {
    list-style: none;
    /* remove default bullets */
    margin-left: 0;
    padding-left: 0;
  }
  
  .elementor-widget-text-editor ul li {
    position: relative;
    padding-left: 20px;
    /* spacing between bullet and text */
    margin-left: 15px;
  }
  
  .elementor-widget-text-editor ul li::before {
    content: "•";
    position: absolute;
    left: 0;
    top: 0;
    font-size: 21px;
    /* bullet size */
    line-height: normal;
    color: currentColor;
    /* follow text color */
  }
  
  
  /* ==========================================================================
     Accordion Customization
     - Custom styles for Elementor Accordion behavior when <details> is open
     - Scoped to .blaek-accordion to avoid affecting other accordions globally
     ========================================================================== */
  .blaek-accordion .e-n-accordion-item[open] .e-n-accordion-item-title {
    border-bottom: 0px !important;
  }
  
  
  /* ==========================================================================
     Glass Background Utility
     - Provides backdrop blur (glassmorphism effect)
     - Background styling (color, opacity, border, shadow) 
       is controlled via Elementor
     - Responsive variants included
     ========================================================================== */
  
  /* ================================
     Global (Desktop + Mobile)
     ================================ */
  .bg-glass {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background-color: #FFFFFFCC;
  }

  .page-content a{
    text-decoration: none;
  }
  
  /* ================================
     Desktop Only (≥ 768px)
     ================================ */
  @media (min-width: 768px) {
    .bg-glass--desktop {
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      background-color: #FFFFFFCC;
    }
  }
  
  /* ================================
     Mobile Only (≤ 1024px)
     ================================ */
  @media (max-width: 1024px) {
    /* Combined selectors for blur/overlay backgrounds on mobile */
    div[data-elementor-type="single-post"],
    body:not(.home) .page-content,
    body.search-results div[data-elementor-type="search-results"],
    body.post-type-archive-blaek_job .elementor-location-archive {
      position: relative;
    }

    div[data-elementor-type="single-post"]::before,
    body:not(.home) .page-content::before,
    body.search-results div[data-elementor-type="search-results"]::before,
    body.post-type-archive-blaek_job .elementor-location-archive::before {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border-radius: inherit;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      /* Use background-color for single-post, rgba for page/search */
      background-color: #FFFFFFCC;
      /* Fallback for specific overlays */
    }
    body:not(.home) .page-content::before,
    body.search-results div[data-elementor-type="search-results"]::before {
      background-color: unset;
      background: rgba(255, 255, 255, 0.7);
    }

    .bg-glass--mobile {
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      background-color: #FFFFFFCC;
    }
  
    .bg-glass--mobile-2 {
      position: relative;
    }
  
    .bg-glass--mobile-2::before {
      content: '';
      position: absolute;
      inset: 0;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      background-color: #FFFFFFCC;
      pointer-events: none;
      border-radius: inherit;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
    }
  
  }
  
  
  /* ==========================================================================
     Video Play Button Customization
     - Styles Elementor custom embed play button
     - Adds glassmorphism background effect
     - Centers icon and improves click area
     ========================================================================== */
  .video-play-icon .elementor-custom-embed-play {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px 23px 22px 34px;
    background: rgb(255 255 255 / 70%);
    border-radius: 100px;
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
  }
  
  
  /* ==========================================================================
     Elementor Button Customization
     - Adjusts button icon size for better visual balance
     - Slight vertical alignment tweak for button text
     - Scoped to Elementor button component only
     ========================================================================== */
  .elementor-button .elementor-button-icon i {
    font-size: 16px;
  }
  
  .elementor-button .elementor-button-text {
    position: relative;
    bottom: -1.5px;
  }
  
  /* Icon box Animate */
  .icon-box-animate:hover a.elementor-button {
    color: var(--e-global-color-accent) !important;
  }
  
  /* ==========================================================================
     Tabs Overflow – Ellipsis & Dropdown
     Fixes vs previous version:
     - Dropdown z-index erhöht (Elementor-Widgets nutzen hohe z-index-Ebenen)
     - Dropdown position: fixed statt absolute bei Elementor-Overflow-Kontexten
       → NEIN: bleibt absolute, aber jetzt am Ellipsis-Button verankert (via JS)
     - Ellipsis-Button: :focus-visible statt :focus (kein Outline-Verlust)
     - Ellipsis-Button zeigt nur "…" (kein Badge/Count)
     - .is-open State auf Ellipsis-Button für visuelle Rückmeldung
     - Dropdown-Item: :focus Style für Keyboard-Navigation
     - Dropdown-Item .is-active State (aktiver Tab im Dropdown hervorgehoben)
     ========================================================================== */
  
  /* --- --- */
  .blaek-tablaschen .e-n-tabs-content {
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
    background-color: #FFF;
  }
  
  .blaek-tablaschen .e-n-tabs-heading {
    /* z-index: -1; */
  }
  
  .blaek-tablaschen .e-n-tabs-heading .e-n-tab-title {
    /* background-color: ; */
  }
  
  /* ── Tab-Bar: einzeilig, kein Wrap, Overflow verbergen ──────────────────── */
  .blaek-tablaschen .e-n-tabs-heading,
  .blaek-tablaschen .e-n-tabs__heading {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
    align-items: center !important;
    position: relative;
    /* Kein gap hier – Abstände kommen vom padding der Buttons */
  }
  
  /* ── Alle Tab-Buttons: nicht schrumpfen, nicht wachsen ──────────────────── */
  .blaek-tablaschen .e-n-tabs-heading .e-n-tab-title,
  .blaek-tablaschen .e-n-tabs__heading .e-n-tab-title {
    display: inline-flex;
    flex: 0 0 auto !important;
    margin: 0 !important;
    white-space: nowrap !important;
    float: none !important;
    align-items: center;
    justify-content: center;
  }
  
  /* ── Ellipsis-Button (…) ────────────────────────────────────────────────── */
  .blaek-tablaschen .e-n-tab-title.tab-overflow-ellipsis.is-arrow {
    flex: 0 0 auto !important;
    cursor: pointer;
    user-select: none;
    order: 1000 !important;
    /* Immer ganz rechts in der Flex-Row */
    margin-left: auto;
    color: var(--n-tabs-title-color);
    background-color: var(--n-tabs-title-background-color);
    border-radius: var(--n-tabs-title-border-radius);
    border: none;
    padding-block-end: var(--n-tabs-title-padding-block-end);
    padding-block-start: var(--n-tabs-title-padding-block-start);
    padding-inline-end: var(--n-tabs-title-padding-inline-end);
    padding-inline-start: var(--n-tabs-title-padding-inline-start);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-family: var(--e-global-typography-d679c58-font-family), Sans-serif;
    font-weight: var(--e-global-typography-d679c58-font-weight);
    line-height: var(--e-global-typography-d679c58-line-height);
    transition: background-color 0.15s ease;
  }
  
  .blaek-tablaschen .e-n-tab-title.tab-overflow-ellipsis.is-arrow:hover,
  .blaek-tablaschen .e-n-tab-title.tab-overflow-ellipsis.is-arrow.is-open {
    background-color: #0f2064 !important;
    color: #fff !important;
  }
  
  .blaek-tablaschen .e-n-tab-title.tab-overflow-ellipsis.is-arrow:focus {
    outline: none;
  }
  
  .blaek-tablaschen .e-n-tab-title.tab-overflow-ellipsis.is-arrow:focus-visible {
    outline: 2px solid #0f2064;
    outline-offset: 2px;
  }
  
  /* ── Dropdown ───────────────────────────────────────────────────────────── */
  /*
    Dropdown wird an document.body angehängt (via JS).
    position:fixed → unabhängig von Scroll und Elementor-Stacking-Contexts.
    top/left werden per JS mit getBoundingClientRect() (Viewport-Koordinaten)
    berechnet. z-index:99999 liegt über allen Elementor-Ebenen.
  */
  .tab-overflow-dropdown {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    min-width: 150px;
    max-height: 280px;
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid #d0d4db;
    border-radius: 0px;
    box-shadow:
      0 2px 8px rgba(0, 0, 0, 0.08),
      0 8px 24px rgba(0, 0, 0, 0.12);
    z-index: 99999;
    padding: 0;
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition:
      opacity 0.15s ease,
      transform 0.15s ease;
  }
  
  .tab-overflow-dropdown.is-open {
    display: block;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  
  /* ── Dropdown-Items ─────────────────────────────────────────────────────── */
  .tab-overflow-dropdown-item {
    display: block;
    width: 100%;
    padding: 14px 20px;
    cursor: pointer;
    white-space: nowrap;
    font-size: inherit;
    color: inherit;
    background: transparent;
    border: none;
    text-align: left;
    line-height: 1.4;
    transition: background 0.1s ease;
  }
  
  .tab-overflow-dropdown-item:hover {
    background: #f0f2f5;
  }
  
  /* Keyboard-Fokus im Dropdown */
  .tab-overflow-dropdown-item:focus {
    outline: none;
    background: #e8edf5;
  }
  
  .tab-overflow-dropdown-item:focus-visible {
    background: #e8edf5;
    outline: 2px solid #0f2064;
    outline-offset: -2px;
  }
  
  /* Aktiver Tab im Dropdown hervorgehoben */
  .tab-overflow-dropdown-item[aria-selected="true"],
  .tab-overflow-dropdown-item.is-active {
    background: #e8eaed;
    font-weight: 600;
    color: #0f2064;
  }
  
  .tab-overflow-dropdown-item[aria-selected="true"]:hover,
  .tab-overflow-dropdown-item.is-active:hover {
    background: #dde0e7;
  }
  
  /* ── Scrollbar im Dropdown ──────────────────────────────────────────────── */
  .tab-overflow-dropdown::-webkit-scrollbar {
    width: 4px;
  }
  
  .tab-overflow-dropdown::-webkit-scrollbar-track {
    background: transparent;
  }
  
  .tab-overflow-dropdown::-webkit-scrollbar-thumb {
    background: #c4cad3;
    border-radius: 2px;
  }
  
  /* ── Full-Width Fix für Post-Content unter .blaek-tablaschen ────────────── */
  body:has(.blaek-tablaschen) .elementor-widget-theme-post-content {
    width: 100%;
  }
  
  
  /* ==========================================================================
     Kontakformular
     ========================================================================== */
  
  .elementor-form-fields-wrapper input[type=date],
  .elementor-form-fields-wrapper input[type=email],
  .elementor-form-fields-wrapper input[type=number],
  .elementor-form-fields-wrapper input[type=password],
  .elementor-form-fields-wrapper input[type=search],
  .elementor-form-fields-wrapper input[type=tel],
  .elementor-form-fields-wrapper input[type=text],
  .elementor-form-fields-wrapper input[type=url],
  .elementor-form-fields-wrapper select,
  .elementor-form-fields-wrapper textarea {
    padding: 15px 20px 12px 20px;
  }
  
  .elementor-form-fields-wrapper input[type=checkbox] {
    width: 21px;
    height: 21px;
    border-radius: 0;
    border: 1.5px solid #979797;
  }
  
  .elementor-field-type-acceptance span.elementor-field-option {
    display: grid;
    grid-template-columns: 21px auto;
    align-items: center;
    gap: 20px;
  }
  
  .elementor-field-type-acceptance label a {
    color: #085A9C;
  }
  
  .elementor-field-type-acceptance label a::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 12px;
    margin-bottom: 1.5px;
    margin-left: 4px;
    background-image: url("data:image/svg+xml,%0A%3Csvg width='5.76776695px' height='9.69880144px' viewBox='0 0 5.76776695 9.69880144' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' stroke-linecap='square'%3E%3Cg id='blaek-module' transform='translate(-1204.1161, -29667.1161)' stroke='%23085A9C'%3E%3Cg id='Group' transform='translate(344, 28923)'%3E%3Cg id='Group-Copy-192' transform='translate(863, 749) scale(-1, 1) rotate(-180) translate(-863, -749)translate(861, 745)' stroke-width='1.25'%3E%3Cline x1='0.0689655172' y1='0.0689655172' x2='3.93103448' y2='3.93103448' id='Line-2'%3E%3C/line%3E%3Cline x1='0' y1='8' x2='4' y2='4' id='Line-2'%3E%3C/line%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    margin-right: 6px;
    vertical-align: middle;
  }
  
  .elementor-field-type-acceptance label a:hover {
    text-decoration: underline;
  }
  
  /* Image Widget Style */
  figcaption.widget-image-caption {
    font-style: normal;
  }
  
  /* Table of Content */
  .toc-content {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background-color: #FFFFFFCC !important;
    box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.1);
  }
  
  .toc-content .elementor-toc__list-item-text-wrapper {
    align-items: flex-start;
  }
  
  .toc-content .elementor-toc__list-item-text-wrapper svg,
  .toc-content .elementor-toc__list-item-text-wrapper i {
    flex-shrink: 0;
    margin-top: 13px;
  }
  
  .toc-content .elementor-toc__header {
    padding-bottom: 0;
    margin-bottom: 20px;
  }
  
  .toc-content .elementor-toc__body {
    padding-top: 0;
  }
  
  .toc-content .elementor-toc__list-item a,
  .toc-content .elementor-toc__list-item svg {
    transition: all 0.3s ease;
  }
  
  .toc-content .elementor-toc__list-item:hover svg {
    fill: var(--item-text-hover-color, #ff5000) !important;
  }
  
  .toc-content .elementor-toc__list-item:hover a {
    text-decoration: none !important;
    color: var(--item-text-hover-color, #ff5000) !important;
  }
  
  /* ==========================================================================
     Breadcrumbs
     ========================================================================== */
  .uc-breadcrumbs a {
    font-size: inherit !important;
  }
  
  .uc-breadcrumbs a:hover {
    color: var(--e-global-color-accent) !important;
  }
  
  body.page .page-header {
    display: none;
  }
  
  @media screen and (max-width: 1440px) and (min-width: 768px) {
    .elementor-widget-ucaddon_breadcrumbs_widget{
      padding-inline: 40px !important;
    }
  
    .elementor-widget-ucaddon_breadcrumbs_widget > .elementor-widget-container{
      padding-inline: 0 !important;
    }
  }
  
  @media screen and (max-width: 767px) {
    .elementor-widget-ucaddon_breadcrumbs_widget{
      padding-inline: 20px !important;
    }
  
    .elementor-widget-ucaddon_breadcrumbs_widget > .elementor-widget-container{
      padding-inline: 0 !important;
    }
  }
  
  /* ==========================================================================
     3 Background Diamonds
     ========================================================================== */
  @media (max-width: 1024px) {
  
    .three-bg-diamonds {
      overflow-x: hidden;
    }
  
    .three-bg-diamonds::before {
      content: "";
      position: absolute;
      top: 0;
      left: -10%;
      width: 120%;
      height: 120%;
      z-index: 2;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      background-color: rgb(255 255 255 / 50%);
    }
  
  }
  
  /** Footer Customization
  ================================================== */
  
  main#content .page-content {
    padding-bottom: 40px !important;
  }

/* Tagembed Style
================================================== */

#tagembed-placeholder{
  background-color: transparent !important;
}


/* SL-n2g-brevonator
================================================== */

.sl-brev-submit,
.sl-brev-submit:hover {
  background-color: var(--e-global-color-f733163, #0f7dc8);
  color: var(--e-global-color-c4adccb, #ffffff);
  padding: 12px;
  font-size: inherit;
  border: 0;
}