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

/* Add your custom styles here */

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

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

  /* 8px at the default 16px root size; scales with user text preferences. */
  --grid: 0.5rem;

  /* typography */
  /* -min values follow iOS HIG text styles (Large size class) */
  --p-min: 1.0625rem;  /* 17px — Body */
  --p-max: 1.2rem;

  --fs1-min: 2.125rem; /* 34px — Large Title */
  --fs1-max: 3.815rem;

  --fs2-min: 1.75rem;  /* 28px — Title 1 */
  --fs2-max: 3.052rem;

  --fs3-min: 1.375rem; /* 22px — Title 2 */
  --fs3-max: 1.6rem;

  --fs4-min: 1.25rem;  /* 20px — Title 3 */
  --fs4-max: 1.953rem;

  --fs5-min: 1rem;     /* 16px — Callout */
  --fs5-max: 1.563rem;

  --fs6-min: 0.9375rem; /* 15px — Subheadline */
  --fs6-max: 1.25rem;

  --fsbtn-min: 1.0625rem; /* 17px — Body/Headline */
  --fsbtn-max: 1.125rem;

  --fs7-min: 1.125rem;  /* 18px — Section header */
  --fs7-max: 1.375rem;

  --fs8-min: 0.875rem;  /* 14px — Score label */
  --fs8-max: 1rem;

  --fs9-min: 0.8125rem; /* 13px — Metadata / location */
  --fs9-max: 0.9375rem;

  --fs10-min: 0.75rem;  /* 12px — Badge / tag */
  --fs10-max: 0.875rem;

  --fs11-min: 0.6875rem; /* 11px — Tab label / Fine print */
  --fs11-max: 0.8125rem;

  /* Unitless line-height factors, constant across viewport widths.
     Override per scale on :root or on an fs-* widget/container.
     Use --lh-factor for a shared local override, e.g. selector { --lh-factor: 1.2; }. */
  --lh-factor-1: 1;
  --lh-factor-2: 1;
  --lh-factor-3: 1;
  --lh-factor-4: 1;
  --lh-factor-5: 1;
  --lh-factor-6: 1;
  --lh-factor-7: 1.2;
  --lh-factor-8: 1.2;
  --lh-factor-9: 1.2;
  --lh-factor-10: 1.2;
  --lh-factor-11: 1.2;
  --lh-factor-body: 1.2;
  --lh-factor-btn: 1.2;

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

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

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

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

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

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

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

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

  --sp-0: 0;

  /* Stepped spacing keeps the rhythm on the grid between breakpoints too.
     Mobile → desktop: 8→16, 8→32, 16→48, 16→64, 24→96, 32→128px. */
  --sp-1: round(nearest, clamp(
    0.5rem,
    calc(0.5rem + 0.5rem * var(--fluid)),
    1rem
  ), var(--grid));

  --sp-2: round(nearest, clamp(
    0.5rem,
    calc(0.5rem + 1.5rem * var(--fluid)),
    2rem
  ), var(--grid));

  --sp-3: round(nearest, clamp(
    1rem,
    calc(1rem + 2rem * var(--fluid)),
    3rem
  ), var(--grid));

  --sp-4: round(nearest, clamp(
    1rem,
    calc(1rem + 3rem * var(--fluid)),
    4rem
  ), var(--grid));

  --sp-5: round(nearest, clamp(
    1.5rem,
    calc(1.5rem + 4.5rem * var(--fluid)),
    6rem
  ), var(--grid));

  --sp-6: round(nearest, clamp(
    2rem,
    calc(2rem + 6rem * var(--fluid)),
    8rem
  ), var(--grid));

  /* Unitless aliases for the global scale; no viewport formula or grid rounding. */
  --lh-1: var(--lh-factor-1);
  --lh-2: var(--lh-factor-2);
  --lh-3: var(--lh-factor-3);
  --lh-4: var(--lh-factor-4);
  --lh-5: var(--lh-factor-5);
  --lh-6: var(--lh-factor-6);
  --lh-body: var(--lh-factor-body);
  --lh-btn: var(--lh-factor-btn);
  --lh-7: var(--lh-factor-7);
  --lh-8: var(--lh-factor-8);
  --lh-9: var(--lh-factor-9);
  --lh-10: var(--lh-factor-10);
  --lh-11: var(--lh-factor-11);
}

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

html {
  box-sizing: border-box;
}

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

/* p, li inherit font-size/line-height from body on purpose — setting it
   directly on the tag would block inheritance from ancestors (Elementor's
   own per-widget Typography controls, .fs-N, etc.), since a direct value
   on an element always wins over an inherited one, regardless of specificity. */
body {
  font-size: var(--fs-p);
  line-height: var(--lh-factor, var(--lh-factor-body));
}

h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
  text-wrap: balance;
}

h2, h3 {
  font-weight: 700;
}

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

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

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

/* Override --text-width in ch per widget. ch scales with the widget's own
   font-size, so large headings need much smaller N than body text.
   Combine with .tw/.tw-center: class="tw-center tw-24". */
.tw-8   { --text-width: 8ch; }
.tw-10  { --text-width: 10ch; }
.tw-12  { --text-width: 12ch; }
.tw-16  { --text-width: 16ch; }
.tw-20  { --text-width: 20ch; }
.tw-24  { --text-width: 24ch; }
.tw-28  { --text-width: 28ch; }
.tw-32  { --text-width: 32ch; }
.tw-36  { --text-width: 36ch; }
.tw-40  { --text-width: 40ch; }
.tw-45  { --text-width: 45ch; }
.tw-50  { --text-width: 50ch; }
.tw-55  { --text-width: 55ch; }
.tw-60  { --text-width: 60ch; }
.tw-65  { --text-width: 65ch; }
.tw-70  { --text-width: 70ch; }
.tw-80  { --text-width: 80ch; }

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

/* Put the class on a tag or on the Elementor widget (Advanced → CSS Classes).
   Clear widget/global font-size and line-height controls when using this scale.
   Local variables also let a nested fs-* class select its own size and rhythm. */
.fs-1 { --type-size: var(--fs-1); --type-factor: var(--lh-factor-1); }
.fs-2 { --type-size: var(--fs-2); --type-factor: var(--lh-factor-2); }
.fs-3 { --type-size: var(--fs-3); --type-factor: var(--lh-factor-3); }
.fs-4 { --type-size: var(--fs-4); --type-factor: var(--lh-factor-4); }
.fs-5 { --type-size: var(--fs-5); --type-factor: var(--lh-factor-5); }
.fs-6 { --type-size: var(--fs-6); --type-factor: var(--lh-factor-6); }
.fs-7 { --type-size: var(--fs-7); --type-factor: var(--lh-factor-7); }
.fs-8 { --type-size: var(--fs-8); --type-factor: var(--lh-factor-8); }
.fs-9 { --type-size: var(--fs-9); --type-factor: var(--lh-factor-9); }
.fs-10 { --type-size: var(--fs-10); --type-factor: var(--lh-factor-10); }
.fs-11 { --type-size: var(--fs-11); --type-factor: var(--lh-factor-11); }
.fs-p { --type-size: var(--fs-p); --type-factor: var(--lh-factor-body); }
.fs-btn { --type-size: var(--fs-btn); --type-factor: var(--lh-factor-btn); }

/* Covers Heading, legacy/current Text Editor markup and Button widgets.
   Descendant tags need direct values to override theme tag defaults. */
:is(.fs-1, .fs-2, .fs-3, .fs-4, .fs-5, .fs-6, .fs-7, .fs-8, .fs-9, .fs-10, .fs-11, .fs-p, .fs-btn),
:is(.fs-1, .fs-2, .fs-3, .fs-4, .fs-5, .fs-6, .fs-7, .fs-8, .fs-9, .fs-10, .fs-11, .fs-p, .fs-btn)
:is(.elementor-heading-title, .elementor-widget-container, .elementor-text-editor,
    .elementor-button, .elementor-button-text, h1, h2, h3, h4, h5, h6, p, ul, ol, li) {
  font-size: var(--type-size);
  /* A unitless ratio follows the element font-size without grid rounding. */
  line-height: var(--lh-factor, var(--type-factor));
}


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

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

/* =================================
   ASPECT RATIO
   Set the Image widget's Width in Elementor (Style > Image); height is
   derived from the ratio. Only the <img> is styled, not its wrapper div.
================================= */

.aspect-3-4 img,
.aspect-4-3 img,
.aspect-1-2 img,
.aspect-2-1 img,
.aspect-16-9 img,
.aspect-9-16 img {
  /* height derives from width via aspect-ratio below — only the <img>
     is affected, its wrapping div is left untouched */
  height: auto !important;
  object-fit: cover !important;
  display: block;
}

.aspect-3-4  img { aspect-ratio: 3 / 4 !important; }
.aspect-4-3  img { aspect-ratio: 4 / 3 !important; }
.aspect-1-2  img { aspect-ratio: 1 / 2 !important; }
.aspect-2-1  img { aspect-ratio: 2 / 1 !important; }
.aspect-16-9 img { aspect-ratio: 16 / 9 !important; }
.aspect-9-16 img { aspect-ratio: 9 / 16 !important; }

/* =================================
   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-inline-start: var(--grid);
  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(1.25rem);
  backdrop-filter: blur(1.25rem);
}

/* =================================
   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: calc(var(--grid) * 3); /* 24px */
  color: var(--e-global-color-primary);
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: inherit;
  line-height: inherit;
  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: 1rem;
    --swipe-padding: 1rem;

    /* Переключаем 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: var(--grid);

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