/* 
Theme Name: Inversi Theme
Description: Hello Elementor Child
Author: Inversi Design Team
Author URI: https://inversi-design.de/
Template: hello-elementor
Version: 3.1.0
*/

/* Add your custom styles here */

:root {
  /* =================================
     PROJECT SETTINGS
  ================================= */

  /* viewport */
  --screen-min: 20rem;   /* 320px */
  --screen-max: 120rem;  /* 1920px */

  /* typography */
  /* Скорректировано под Figma-макет Lohnstube (node 1:10, desktop 1440px)
     — только размеры (max = фактический px из Figma); шрифты/цвета не
     менялись. */
  --p-min: 1rem;        /* 16px */
  --p-max: 1.125rem;    /* 18px — базовый параграф/подпись (Figma) */

  --fs1-min: 2rem;      /* 32px */
  --fs1-max: 3rem;      /* 48px — заголовок секции (H2, напр. «In drei Schritten…») */

  --fs2-min: 1.875rem;  /* 30px */
  --fs2-max: 2.75rem;   /* 44px — hero-заголовок (H1) */

  --fs3-min: 1.75rem;   /* 28px */
  --fs3-max: 2.5rem;    /* 40px — заголовок карточки (uppercase) */

  --fs4-min: 1.5rem;    /* 24px */
  --fs4-max: 2rem;      /* 32px — цитата / подзаголовок карточки */

  --fs5-min: 1rem;      /* 16px */
  --fs5-max: 1.25rem;   /* 20px — eyebrow-лейбл */

  --fs6-min: 0.875rem;  /* 14px */
  --fs6-max: 1rem;      /* 16px — FAQ-вопрос / мелкий заголовок */

  --fsbtn-min: 0.9375rem; /* 15px */
  --fsbtn-max: 1rem;      /* 16px — текст кнопки (Figma) */

  /* text width */
  --text-width: 65ch;

  /* container / boxed width (Elementor) */
  --site-max-width-min: 71.25rem; /* 1140px — Elementor default */
  --site-max-width-max: 87.5rem;  /* 1400px */

  /* spacing */
  --space-min: 1rem;
  --space-max: 4rem;

  /* =================================
     FLUID ENGINE
  ================================= */

  --fluid: clamp(
    0,
    calc((100vw - var(--screen-min)) / (var(--screen-max) - var(--screen-min))),
    1
  );

  /* =================================
     CONTAINER WIDTH
     Overrides Elementor's --container-max-width
     (used by .e-con for its Boxed max-width)
  ================================= */

  --site-max-width: clamp(
    var(--site-max-width-min),
    calc(var(--site-max-width-min) + (var(--site-max-width-max) - var(--site-max-width-min)) * var(--fluid)),
    var(--site-max-width-max)
  );

  --container-max-width: var(--site-max-width);

  /* =================================
     TYPOGRAPHY SCALE
  ================================= */

  --fs-p: clamp(
    var(--p-min),
    calc(var(--p-min) + (var(--p-max) - var(--p-min)) * var(--fluid)),
    var(--p-max)
  );

  --fs-1: clamp(
    var(--fs1-min),
    calc(var(--fs1-min) + (var(--fs1-max) - var(--fs1-min)) * var(--fluid)),
    var(--fs1-max)
  );

  --fs-2: clamp(
    var(--fs2-min),
    calc(var(--fs2-min) + (var(--fs2-max) - var(--fs2-min)) * var(--fluid)),
    var(--fs2-max)
  );

  --fs-3: clamp(
    var(--fs3-min),
    calc(var(--fs3-min) + (var(--fs3-max) - var(--fs3-min)) * var(--fluid)),
    var(--fs3-max)
  );

  --fs-4: clamp(
    var(--fs4-min),
    calc(var(--fs4-min) + (var(--fs4-max) - var(--fs4-min)) * var(--fluid)),
    var(--fs4-max)
  );

  --fs-5: clamp(
    var(--fs5-min),
    calc(var(--fs5-min) + (var(--fs5-max) - var(--fs5-min)) * var(--fluid)),
    var(--fs5-max)
  );

  --fs-6: clamp(
    var(--fs6-min),
    calc(var(--fs6-min) + (var(--fs6-max) - var(--fs6-min)) * var(--fluid)),
    var(--fs6-max)
  );

  --fs-btn: clamp(
    var(--fsbtn-min),
    calc(var(--fsbtn-min) + (var(--fsbtn-max) - var(--fsbtn-min)) * var(--fluid)),
    var(--fsbtn-max)
  );

  /* =================================
     SPACING SCALE
  ================================= */

  --sp-0: 0;

  --sp-1: clamp(
    calc(var(--space-min) * 0.25),
    calc(
      (var(--space-min) * 0.25) +
      ((var(--space-max) * 0.25 - var(--space-min) * 0.25) * var(--fluid))
    ),
    calc(var(--space-max) * 0.25)
  );

  --sp-2: clamp(
    calc(var(--space-min) * 0.5),
    calc(
      (var(--space-min) * 0.5) +
      ((var(--space-max) * 0.5 - var(--space-min) * 0.5) * var(--fluid))
    ),
    calc(var(--space-max) * 0.5)
  );

  --sp-3: clamp(
    calc(var(--space-min) * 0.75),
    calc(
      (var(--space-min) * 0.75) +
      ((var(--space-max) * 0.75 - var(--space-min) * 0.75) * var(--fluid))
    ),
    calc(var(--space-max) * 0.75)
  );

  --sp-4: clamp(
    var(--space-min),
    calc(var(--space-min) + (var(--space-max) - var(--space-min)) * var(--fluid)),
    var(--space-max)
  );

  --sp-5: clamp(
    calc(var(--space-min) * 1.5),
    calc(
      (var(--space-min) * 1.5) +
      ((var(--space-max) * 1.5 - var(--space-min) * 1.5) * var(--fluid))
    ),
    calc(var(--space-max) * 1.5)
  );

  --sp-6: clamp(
    calc(var(--space-min) * 2),
    calc(
      (var(--space-min) * 2) +
      ((var(--space-max) * 2 - var(--space-min) * 2) * var(--fluid))
    ),
    calc(var(--space-max) * 2)
  );

  /* line-height */
  --lh-body: 1.5;
  --lh-heading: 1.1;
}

/* =================================
   BASE
================================= */

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  font-size: var(--fs-p);
  line-height: var(--lh-body);
}

p,
li {
  font-size: var(--fs-p);
  line-height: var(--lh-body);
}

h1 {
  line-height: 1;
}

h2 {
  line-height: var(--lh-heading);
  font-weight: 400;
}

h3 {
  line-height: var(--lh-heading);
  font-weight: 700;
}

h4 {
  line-height: var(--lh-heading);
}

h5 {
  line-height: var(--lh-heading);
}

h6 {
  line-height: var(--lh-heading);
}

.elementor-heading-title {
  line-height: var(--lh-heading);
}

/* =================================
   TEXT WIDTH
================================= */

.tw :where(.elementor-heading-title, p, ul, ol, li) {
  max-width: var(--text-width);
}

.tw-center :where(.elementor-heading-title, p, ul, ol, li) {
  max-width: var(--text-width);
  margin-inline: auto;
}

/* =================================
   TYPOGRAPHY OVERRIDES
   Elementor widgets
================================= */

.fs-1,
.fs-1 .elementor-heading-title {
  font-size: var(--fs-1);
}

.fs-2,
.fs-2 .elementor-heading-title {
  font-size: var(--fs-2);
}

.fs-3,
.fs-3 .elementor-heading-title {
  font-size: var(--fs-3);
}

.fs-4,
.fs-4 .elementor-heading-title {
  font-size: var(--fs-4);
}

.fs-5,
.fs-5 .elementor-heading-title {
  font-size: var(--fs-5);
}

.fs-6,
.fs-6 .elementor-heading-title {
  font-size: var(--fs-6);
}

.fs-p .elementor-text-editor,
.fs-p .elementor-text-editor p,
.fs-p .elementor-text-editor li {
  font-size: var(--fs-p);
  line-height: var(--lh-body);
}

.fs-btn,
.fs-btn .elementor-button,
.fs-btn .elementor-button-text {
  font-size: var(--fs-btn);
}

/* =================================
   SPAN COLOR IN HEADINGS
   На реальном сайте это не класс на виджете, а голый <span> без атрибутов
   вокруг нужного фрагмента текста — контент-редактор просто оборачивает
   часть текста в <span> в редакторе Elementor, цвет красится глобально
   по тегу. Пример из реального экспорта (h1.elementor-heading-title,
   виджет с классом fs-3, БЕЗ отдельного цветового класса):
     <span>Die professionelle Lohn- und Gehaltsabrechnung für
     Unternehmen und Steuerberater.</span> Persönlich betreut, ...
================================= */

.elementor-heading-title span,
.elementor-text-editor span {
  color: var(--e-global-color-7fd8e2e);
}


/* =================================
   SPACING
================================= */

/* padding */

.p0 { padding: var(--sp-0); }
.p1 { padding: var(--sp-1); }
.p2 { padding: var(--sp-2); }
.p3 { padding: var(--sp-3); }
.p4 { padding: var(--sp-4); }
.p5 { padding: var(--sp-5); }
.p6 { padding: var(--sp-6); }

@media (max-width: 47.9375rem) {
  .p5 { padding: 1.5rem; }
}

/* padding x */

.px0 { padding-inline: var(--sp-0); }
.px1 { padding-inline: var(--sp-1); }
.px2 { padding-inline: var(--sp-2); }
.px3 { padding-inline: var(--sp-3); }
.px4 { padding-inline: var(--sp-4); }
.px5 { padding-inline: var(--sp-5); }
.px6 { padding-inline: var(--sp-6); }

/* padding y */

.py0 { padding-block: var(--sp-0); }
.py1 { padding-block: var(--sp-1); }
.py2 { padding-block: var(--sp-2); }
.py3 { padding-block: var(--sp-3); }
.py4 { padding-block: var(--sp-4); }
.py5 { padding-block: var(--sp-5); }
.py6 { padding-block: var(--sp-6); }

/* margin */

.m0 { margin: var(--sp-0); }
.m1 { margin: var(--sp-1); }
.m2 { margin: var(--sp-2); }
.m3 { margin: var(--sp-3); }
.m4 { margin: var(--sp-4); }
.m5 { margin: var(--sp-5); }
.m6 { margin: var(--sp-6); }

/* gap */

.g0 { gap: var(--sp-0); }
.g1 { gap: var(--sp-1); }
.g2 { gap: var(--sp-2); }
.g3 { gap: var(--sp-3); }
.g4 { gap: var(--sp-4); }
.g5 { gap: var(--sp-5); }
.g6 { gap: var(--sp-6); }

/* =================================
   IMAGE AS BACKGROUND
================================= */

.img-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.img-bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* =================================
   GRADIENT OVERLAY
================================= */

.overlay-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;

  background: linear-gradient(
    to right,
    rgba(0,0,0,.75) 0%,
    rgba(0,0,0,.55) 25%,
    rgba(0,0,0,.25) 50%,
    rgba(0,0,0,0) 70%
  );
}

.overlay-dark::before {
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.75);
  z-index:1;
  pointer-events:none;
}


/* =================================
   LINKED CARD RESET
================================= */

a.inv-card,
a.inv-card:link,
a.inv-card:visited,
a.inv-card:hover,
a.inv-card:active {
  color: inherit;
  text-decoration: none;
}

/* =================================
   CARDS HOVER
================================= */

.inv-card__more .elementor-heading-title {
  transition: color .25s ease;
}

.inv-card__more .elementor-heading-title::after {
  content: "\2192";
  display: inline-block;
  margin-left: .35em;
  color: currentColor;
  transition: transform .35s cubic-bezier(.4, 0, .2, 1);
}

.inv-card:hover .inv-card__more .elementor-heading-title {
  color: var(--e-global-color-4117d7f);
}

.inv-card:hover .inv-card__more .elementor-heading-title::after {
  transform: translateX(.45em);
}

.dialog-type-lightbox{z-index:98;}

/* Überschrift Gradient */

.inv-headline-color h2{
	background: linear-gradient(90deg, #101828 0%, #007FB3 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* Glass Effects */

.inv-bg-blur {
  background: rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

/* =================================
   LINK WITH ARROW
   Figma: Edelweiss-Website, node 154:56
================================= */

.inv-link-arrow .elementor-heading-title a,
.inv-link-arrow .elementor-heading-title a:link,
.inv-link-arrow .elementor-heading-title a:visited,
.inv-link-arrow .elementor-heading-title a:hover,
.inv-link-arrow .elementor-heading-title a:active {
  display: inline-flex;
  align-items: center;
  gap: 1.25rem; /* 20px */
  color: var(--e-global-color-primary);
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 1rem;
  text-decoration: underline;
  text-underline-position: from-font;
  transition: opacity .25s ease;
}

.inv-link-arrow .elementor-heading-title a:hover {
  opacity: .7;
}

.inv-link-arrow .elementor-heading-title a::after {
  content: "";
  display: inline-block;
  width: 1.375rem;  /* 22px, matches Figma icon frame */
  aspect-ratio: 25 / 23; /* arrow.svg native ratio */
  background: url('/files/arrow.svg') no-repeat center / contain;
  flex-shrink: 0;
  transition: transform .35s cubic-bezier(.4, 0, .2, 1);
}

.inv-link-arrow .elementor-heading-title a:hover::after {
  transform: translateX(.35em);
}

/* Swipe Containers in Grid Elementor */
@media (max-width: 47.9375rem) {
  .mobile-swipe {
    /* Настройки */
    --swipe-card-width: 85%;
    --swipe-gap: 16px;
    --swipe-padding: 16px;

    /* Переключаем Elementor Grid на Flex */
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;

    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;

    gap: var(--swipe-gap) !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    padding-inline: var(--swipe-padding) !important;
    padding-bottom: 10px;

    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--swipe-padding);
    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;
    overscroll-behavior-x: contain;
    overscroll-behavior-inline: contain;
  }

  .mobile-swipe::-webkit-scrollbar {
    display: none;
  }

  /* Только непосредственные контейнеры Elementor */
  .mobile-swipe > .e-con,
  .mobile-swipe > .elementor-element {
    flex: 0 0 var(--swipe-card-width) !important;

    width: var(--swipe-card-width) !important;
    max-width: var(--swipe-card-width) !important;
    min-width: 0 !important;

    /* Сбрасываем настройки Grid Item Elementor */
    grid-column: auto !important;
    grid-row: auto !important;
    grid-column-start: auto !important;
    grid-column-end: auto !important;
    grid-row-start: auto !important;
    grid-row-end: auto !important;

    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
}