.elementor-kit-9{--e-global-color-primary:#F7F5F3;--e-global-color-secondary:#EDEAE6;--e-global-color-text:#211F1D;--e-global-color-accent:#9FA4B4;--e-global-color-e82aef0:#AB9E8E;--e-global-color-d0c42c5:#473936;--e-global-typography-primary-font-family:"Mona Sans Regular";--e-global-typography-primary-font-size:3.5rem;--e-global-typography-primary-font-weight:400;--e-global-typography-secondary-font-family:"Host Grotesk Regular";--e-global-typography-secondary-font-size:1.6rem;--e-global-typography-secondary-font-weight:400;--e-global-typography-secondary-text-transform:uppercase;--e-global-typography-secondary-letter-spacing:1px;--e-global-typography-text-font-family:"Host Grotesk Light";--e-global-typography-text-font-size:1.3rem;--e-global-typography-text-font-weight:300;--e-global-typography-accent-font-family:"Host Grotesk Regular";--e-global-typography-accent-font-size:1.3rem;--e-global-typography-accent-font-weight:400;--e-global-typography-accent-text-transform:uppercase;--e-global-typography-accent-letter-spacing:1px;--e-global-typography-1c6326f-font-family:"Mona Sans Regular";--e-global-typography-1c6326f-font-size:2.5rem;--e-global-typography-6123fd0-font-family:"Host Grotesk Regular";--e-global-typography-6123fd0-font-size:1.3rem;--e-global-typography-6123fd0-font-weight:400;--e-global-typography-6123fd0-text-transform:uppercase;--e-global-typography-6123fd0-letter-spacing:1px;background-color:var( --e-global-color-primary );}.elementor-kit-9 e-page-transition{background-color:#FFBC7D;}.elementor-kit-9 button,.elementor-kit-9 input[type="button"],.elementor-kit-9 input[type="submit"],.elementor-kit-9 .elementor-button{color:var( --e-global-color-text );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1366px){.elementor-kit-9{--e-global-typography-primary-font-size:3rem;--e-global-typography-secondary-font-size:1.4rem;--e-global-typography-text-font-size:1.1rem;--e-global-typography-accent-font-size:1.2rem;--e-global-typography-1c6326f-font-size:2.2rem;--e-global-typography-6123fd0-font-size:1.1rem;}}@media(max-width:1024px){.elementor-kit-9{--e-global-typography-primary-font-size:2.6rem;--e-global-typography-secondary-font-size:1.3rem;--e-global-typography-text-font-size:1rem;--e-global-typography-accent-font-size:1.2rem;--e-global-typography-1c6326f-font-size:2rem;--e-global-typography-6123fd0-font-size:1.2rem;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-9{--e-global-typography-primary-font-size:2rem;--e-global-typography-primary-line-height:1.1em;--e-global-typography-secondary-font-size:1.1rem;--e-global-typography-text-font-size:0.95rem;--e-global-typography-accent-font-size:1rem;--e-global-typography-1c6326f-font-size:1.4rem;--e-global-typography-6123fd0-font-size:1rem;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ==========================================================
   BUTTON: Linien-Animation mit Pfeil ("btn-line")
   Verwendung: Beim Elementor-Button unter
   Erweitert → CSS-Klassen "btn-line" eintragen.
   Effekt beim Hover: Unterstrich verschwindet kurz und
   zeichnet sich von links neu, Pfeil schiebt nach rechts.
   ========================================================== */

/* Grundaufbau: Text links, Pfeil rechts, kein Hintergrund/Rahmen */
.btn-line a {
  position: relative !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 40px; /* Abstand zwischen Text und Pfeil */
  padding: 6px 0 !important;
  background: transparent !important;
  border: none !important;
  overflow: visible !important; /* verhindert, dass der Pfeil abgeschnitten wird */
}

/* Unterstrich (nimmt automatisch die Textfarbe an) */
.btn-line a::after {
  content: "" !important;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px; /* Linienstärke */
  background: currentColor;
  transform-origin: left;
}

/* Hover: Linie neu zeichnen */
.btn-line a:hover::after {
  animation: btnLine .6s cubic-bezier(.65,0,.35,1); /* .6s = Dauer */
}

/* Pfeil: weiche Bewegung vorbereiten */
.btn-line .elementor-button-icon,
.btn-line svg,
.btn-line i {
  transition: transform .4s cubic-bezier(.22,1,.36,1);
}

/* Hover: Pfeil schiebt 6px nach rechts */
.btn-line a:hover .elementor-button-icon,
.btn-line a:hover > svg,
.btn-line a:hover > i {
  transform: translateX(6px);
}

/* Ablauf der Linien-Animation:
   0–15 %  Linie unsichtbar (kurze Pause)
   15–100 % Linie zeichnet sich von links nach rechts */
@keyframes btnLine {
  0%   { transform: scaleX(0); }
  15%  { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}

/* ===== Ende Button btn-line ===== */


/* Peek-Karussell bei Leistungen – Mobile */
@media (max-width: 767px) {
  .peek-carousel .swiper,
  .peek-carousel .elementor-swiper .swiper-container {
    padding-right: 18%;
  }
}

/* Peek-Karussell bei Leistungen – Tablet Hochformat */
@media (min-width: 768px) and (max-width: 1024px) {
  .peek-carousel .swiper,
  .peek-carousel .elementor-swiper .swiper-container {
    padding-right: 10%;
  }
}

/* ===== Ende Peek-Karussell bei Leistungen ===== */


/* =========================================
   PROJEKT-KACHEL Desktop & Laptop – Hover-Effekt
   Klassen: projekt-kachel (Container),
            projekt-titel (Überschrift),
            projekt-button (Button)
   ========================================= */

/* Kachel quadratisch */
.projekt-kachel {
  aspect-ratio: 1 / 1;
}

/* --- Titel & Button: Ausgangszustand --- */
.projekt-kachel .projekt-titel,
.projekt-kachel .projekt-button {
  opacity: 0;
  transition: opacity .5s ease, transform .5s ease;
}
.projekt-kachel .projekt-titel  { transform: translateY(-20px); }
.projekt-kachel .projekt-button { transform: translateY(20px); }

/* --- Titel & Button: beim Hover über die Kachel --- */
.projekt-kachel:hover .projekt-titel,
.projekt-kachel:hover .projekt-button {
  opacity: 1;
  transform: translateY(0);
}
.projekt-kachel:hover .projekt-button {
  transition-delay: .1s;
}

/* --- Button: volle Breite, kein Hintergrund/Rahmen --- */
.projekt-button a {
  display: flex !important;
  width: 100%;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  overflow: visible !important;
}

/* Innenbereich (Text + Pfeil): Text links, Pfeil rechts */
.projekt-button .elementor-button-content-wrapper {
  position: relative;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 6px 0;
}

/* Pfeil ohne Zusatzabstand */
.projekt-button .elementor-button-icon {
  margin: 0 !important;
}
.projekt-button .elementor-button-icon svg {
  display: block;
}

/* Unterstrich: endet genau am Pfeil */
.projekt-button .elementor-button-content-wrapper::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform-origin: left;
}

/* Linie zeichnet sich beim Kachel-Hover neu */
.projekt-kachel:hover .projekt-button .elementor-button-content-wrapper::after {
  animation: btnLine .6s cubic-bezier(.65,0,.35,1) .3s backwards;
}

/* Pfeil: weiche Bewegung vorbereiten */
.projekt-button .elementor-button-icon,
.projekt-button svg,
.projekt-button i {
  transition: transform .4s cubic-bezier(.22,1,.36,1);
}

/* Pfeil schiebt beim Kachel-Hover 6px nach rechts */
.projekt-kachel:hover .projekt-button .elementor-button-icon {
  transform: translateX(6px);
  transition-delay: .3s;
}


/* ===== Ende Projekt-Kachel Desktop & Laptop ===== */



/* =========================================
   PROJEKT-KACHEL MOBIL – Tablet & Smartphone
   Klassen: projekt-kachel-mobil (Container),
            projekt-titel-mobil (Überschrift),
            projekt-button-mobil (Button)
   Overlay: in Elementor (Normal = grau, Hover = transparent)
   ========================================= */

/* Kachel quadratisch */
.projekt-kachel-mobil {
  aspect-ratio: 1 / 1;
}

/* --- Titel & Button: immer sichtbar --- */
.projekt-kachel-mobil .projekt-titel-mobil,
.projekt-kachel-mobil .projekt-button-mobil {
  opacity: 1;
  transform: none;
}

/* --- Button: volle Breite, kein Hintergrund/Rahmen --- */
.projekt-button-mobil a {
  display: flex !important;
  width: 100%;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  overflow: visible !important;
}

/* Innenbereich (Text + Pfeil): Text links, Pfeil rechts */
.projekt-button-mobil .elementor-button-content-wrapper {
  position: relative;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 6px 0;
}

/* Pfeil ohne Zusatzabstand */
.projekt-button-mobil .elementor-button-icon {
  margin: 0 !important;
}
.projekt-button-mobil .elementor-button-icon svg {
  display: block;
}

/* Unterstrich: immer sichtbar, endet genau am Pfeil */
.projekt-button-mobil .elementor-button-content-wrapper::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform-origin: left;
}

/* Beim Antippen/Hover: Linie zeichnet sich neu */
.projekt-kachel-mobil:hover .projekt-button-mobil .elementor-button-content-wrapper::after {
  animation: btnLine .6s cubic-bezier(.65,0,.35,1) .1s backwards;
}

/* Pfeil: weiche Bewegung */
.projekt-button-mobil .elementor-button-icon,
.projekt-button-mobil svg,
.projekt-button-mobil i {
  transition: transform .4s cubic-bezier(.22,1,.36,1);
}
.projekt-kachel-mobil:hover .projekt-button-mobil .elementor-button-icon {
  transform: translateX(6px);
}

/* ===== Ende Projekt-Kachel Mobil & Smartphone ===== */


/* =========================================
   GANZE KACHEL KLICKBAR (Stretched Link)
   Der Button-Link wird über die ganze Kachel gelegt
   ========================================= */

/* Kachel ist Bezugsrahmen für den Link */
.projekt-kachel,
.projekt-kachel-mobil {
  position: relative;
  cursor: pointer;
}

/* Zwischen-Ebenen dürfen keinen eigenen Bezugsrahmen bilden */
.projekt-kachel .projekt-button,
.projekt-kachel .projekt-button .elementor-widget-container,
.projekt-kachel .projekt-button a,
.projekt-kachel-mobil .projekt-button-mobil,
.projekt-kachel-mobil .projekt-button-mobil .elementor-widget-container,
.projekt-kachel-mobil .projekt-button-mobil a {
  position: static !important;
}

/* Unsichtbare Klickfläche über die ganze Kachel */
.projekt-kachel .projekt-button a::before,
.projekt-kachel-mobil .projekt-button-mobil a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
}

/* Wichtig (Desktop): Beim Hover "transform: none" statt translateY(0),
   sonst bleibt die Klickfläche auf den Button beschränkt */
.projekt-kachel:hover .projekt-button {
  transform: none;
}

/* ===== Ende Ganze Kachel klickbar ===== */


/* ==========================================================
   MENÜ: Linien-Animation ("menu-line")
   ========================================================== */

/* Abstand zwischen den Menüpunkten (nur hier anpassen) */
.menu-line {
  --menu-gap: 20px;
}

/* Menü-Liste: rechtsbündig, Abstand nur zwischen den Punkten.
   margin-right gleicht das unsichtbare letzte Element aus */
.menu-line .elementor-nav-menu--main .elementor-nav-menu {
  gap: var(--menu-gap);
  justify-content: flex-end !important;
  margin: 0 calc(var(--menu-gap) * -1) 0 auto !important;
  padding: 0 !important;
}

/* Elementors eigene Abstände der Menüpunkte entfernen */
.menu-line .elementor-nav-menu--main .elementor-nav-menu > li {
  margin: 0 !important;
  padding: 0 !important;
}

/* Grundaufbau: Link so breit wie das Wort (ohne seitliches Padding) */
.menu-line .elementor-nav-menu--main .elementor-item {
  position: relative !important;
  width: fit-content !important;   /* Link nur so breit wie das Wort */
  margin-left: auto !important;    /* vertikal: rechts anordnen */
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Elementors eigene Zeiger-Linie (oben/Rahmen) ausblenden */
.menu-line .elementor-nav-menu--main .elementor-item::before {
  display: none !important;
}

/* Eigener Unterstrich: überschreibt Elementors Zeiger komplett */
.menu-line .elementor-nav-menu--main .elementor-item::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: auto !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;      /* Abstand zum Text, z. B. 4px oder -2px */
  width: auto !important;
  height: 1px !important;    /* Linienstärke */
  margin: 0 !important;
  background: currentColor !important; /* Farbe = Textfarbe */
  border: none !important;
  opacity: 1 !important;
  transform: scaleX(0);
  transform-origin: right;   /* verschwindet nach rechts */
  transition: transform .6s cubic-bezier(.65,0,.35,1) !important; /* .6s = Dauer */
}

/* Hover: Linie zeichnet sich von links nach rechts */
.menu-line .elementor-nav-menu--main .elementor-item:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* ===== Ende Menü menu-line ===== */

/* ==========================================================
   MENÜ: Loop-Widget - Hintergrund Ansicht
   ========================================================== */
   
.e-loop-item .mein-hintergrund { background-size: cover; background-position: center; }

/* ===== Ende Loop-Widget Hintergrund Ansicht ===== */


/* ==========================================================
   MENÜ IM POPUP: Linien-Animation ("menu-line-pop")
   Verwendung: Beim Elementor-Widget "WordPress-Menü" im Popup
   unter Erweitert → CSS-Klassen "menu-line-pop" eintragen.
   Elementors eigener Zeiger wird hier per CSS deaktiviert,
   die Einstellung im Widget spielt keine Rolle.
   Effekt: Hover zeichnet die Linie von links ein und lässt sie
   nach rechts verschwinden. Aktive Menüpunkte bekommen
   keinen dauerhaften Strich.
   Menü ist linksbündig, Linie so lang wie das jeweilige Wort.
   ========================================================== */

/* Abstand zwischen den Menüpunkten (nur hier anpassen) */
.menu-line-pop {
  --menu-gap: 30px;
}

/* Menü-Liste: linksbündig, Abstand nur zwischen den Punkten */
.menu-line-pop .elementor-nav-menu--main .elementor-nav-menu {
  gap: var(--menu-gap);
  justify-content: flex-start !important; /* horizontal: links anordnen */
  align-items: flex-start !important;     /* vertikal: links anordnen */
  margin: 0 !important;
  padding: 0 !important;
}

/* Elementors eigene Abstände der Menüpunkte entfernen */
.menu-line-pop .elementor-nav-menu--main .elementor-nav-menu > li {
  margin: 0 !important;
  padding: 0 !important;
}

/* Grundaufbau: Link so breit wie das Wort (ohne seitliches Padding) */
.menu-line-pop .elementor-nav-menu--main .elementor-item {
  position: relative !important;
  width: fit-content !important;   /* Link nur so breit wie das Wort */
  margin-left: 0 !important;
  margin-right: auto !important;   /* vertikal: links anordnen */
  padding-left: 0 !important;
  padding-right: 0 !important;
  text-align: left !important;
  justify-content: flex-start !important;
}

/* Elementors eigene Zeiger-Linie (oben/Rahmen) ausblenden */
.menu-line-pop .elementor-nav-menu--main .elementor-item::before {
  display: none !important;
}

/* Eigener Unterstrich: überschreibt Elementors Zeiger komplett */
.menu-line-pop .elementor-nav-menu--main .elementor-item::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: auto !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;      /* Abstand zum Text, z. B. 4px oder -2px */
  width: auto !important;
  height: 1px !important;    /* Linienstärke */
  margin: 0 !important;
  background: currentColor !important; /* Farbe = Textfarbe */
  border: none !important;
  opacity: 1 !important;
  transform: scaleX(0);
  transform-origin: right;   /* verschwindet nach rechts */
  transition: transform .6s cubic-bezier(.65,0,.35,1) !important; /* .6s = Dauer */
}

/* Hover: Linie zeichnet sich von links nach rechts */
.menu-line-pop .elementor-nav-menu--main .elementor-item:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* ===== Ende Menü menu-line-pop ===== */




/* ===== Elementor Lightbox – Custom Pfeile ===== */

/* Standard-Pfeile ausblenden */
.elementor-lightbox .elementor-swiper-button i,
.elementor-lightbox .elementor-swiper-button svg {
  display: none !important;
}

/* Abstand der Pfeile zum Rand */
.elementor-lightbox .elementor-swiper-button-prev {
  left: 20px !important;
  padding: 0 !important;
}

.elementor-lightbox .elementor-swiper-button-next {
  right: 20px !important;
  padding: 0 !important;
}

/* Eigene Pfeile */
.elementor-lightbox .elementor-swiper-button-prev::before,
.elementor-lightbox .elementor-swiper-button-next::before {
  content: "";
  display: block;
  width: 40px;
  height: 40px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.elementor-lightbox .elementor-swiper-button-prev::before {
  background-image: url("https://www.carlssonhomestaging.at/wp-content/uploads/2026/10/CH_Icon_SliderpfeilLinks.svg");
}

.elementor-lightbox .elementor-swiper-button-next::before {
  background-image: url("https://www.carlssonhomestaging.at/wp-content/uploads/2026/10/CH_Icon_SliderpfeilRechts.svg");
}

/* Mobil: kleinere Pfeile & weniger Abstand */
@media (max-width: 767px) {
  .elementor-lightbox .elementor-swiper-button-prev {
    left: 12px !important;
  }

  .elementor-lightbox .elementor-swiper-button-next {
    right: 12px !important;
  }

  .elementor-lightbox .elementor-swiper-button-prev::before,
  .elementor-lightbox .elementor-swiper-button-next::before {
    width: 28px;
    height: 28px;
  }
}


/* ===== Elementor Lightbox – Custom Pfeile ===== *//* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Mona Sans Regular';
	font-style: normal;
	font-weight: 400;
	font-display: auto;
	src: url('https://www.carlssonhomestaging.at/wp-content/uploads/2026/10/MonaSans-Regular.woff2') format('woff2'),
		url('https://www.carlssonhomestaging.at/wp-content/uploads/2026/10/MonaSans-Regular.woff') format('woff'),
		url('https://www.carlssonhomestaging.at/wp-content/uploads/2026/10/MonaSans-Regular.ttf') format('truetype'),
		url('https://www.carlssonhomestaging.at/wp-content/uploads/2026/10/MonaSans-Regular.svg#MonaSansRegular') format('svg');
}
/* End Custom Fonts CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Host Grotesk Regular';
	font-style: normal;
	font-weight: 400;
	font-display: auto;
	src: url('https://www.carlssonhomestaging.at/wp-content/uploads/2026/10/HostGrotesk-Regular.woff2') format('woff2'),
		url('https://www.carlssonhomestaging.at/wp-content/uploads/2026/10/HostGrotesk-Regular.woff') format('woff'),
		url('https://www.carlssonhomestaging.at/wp-content/uploads/2026/10/HostGrotesk-Regular.ttf') format('truetype'),
		url('https://www.carlssonhomestaging.at/wp-content/uploads/2026/10/HostGrotesk-Regular.svg#HostGroteskRegular') format('svg');
}
/* End Custom Fonts CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Host Grotesk Light';
	font-style: normal;
	font-weight: 300;
	font-display: auto;
	src: url('https://www.carlssonhomestaging.at/wp-content/uploads/2026/10/HostGrotesk-Light.woff2') format('woff2'),
		url('https://www.carlssonhomestaging.at/wp-content/uploads/2026/10/HostGrotesk-Light.woff') format('woff'),
		url('https://www.carlssonhomestaging.at/wp-content/uploads/2026/10/HostGrotesk-Light.ttf') format('truetype'),
		url('https://www.carlssonhomestaging.at/wp-content/uploads/2026/10/HostGrotesk-Light.svg#HostGroteskLight') format('svg');
}
/* End Custom Fonts CSS */