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

/* ================================
   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) {
  .bg-glass--mobile {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background-color: #FFFFFFCC;
  }
}


/* ==========================================================================
   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;
}

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

footer[data-elementor-type="footer"] {
  padding-top: 40px !important;
}