/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jun 22 2025 | 13:53:06 */
/*--------------------------------------------------------------
# Imports
--------------------------------------------------------------*/
@import url("https://fonts.cdnfonts.com/css/br-sonoma");
@import url("https://fonts.cdnfonts.com/css/against-2");

/*--------------------------------------------------------------
# Root Variables
--------------------------------------------------------------*/
:root {
  /* Purple Shades */
  --purple-50: #f5f3ff;
  --purple-100: #ede9fe;
  --purple-200: #ddd6fe;
  --purple-300: #c4b5fd;
  --purple-400: #a78bfa;
  --purple-500: #8b5cf6;
  --purple-600: #7c3aed;
  --purple-700: #6d28d9;
  --purple-800: #5b21b6;
  --purple-900: #4c1d95;

  /* Gray Shades */
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;

  /* Light Mode */
  --bg-color-light: var(--purple-50);
  --text-color-light: var(--gray-900);
  --border-color-light: var(--purple-200);
  --navbar-bg-light: rgba(221, 214, 254, 0.8);
  --element-bg-light: rgba(255, 255, 255, 0.95);
  --primary-light: var(--purple-600);
  --primary-light-rgb: 124, 58, 237;
  --secondary-light: var(--purple-500);
  --accent-light: var(--purple-700);
  --headline-light: var(--purple-800);

  /* Dark Mode */
  --bg-color-dark: var(--gray-900);
  --text-color-dark: var(--gray-100);
  --border-color-dark: var(--purple-800);
  --navbar-bg-dark: rgba(30, 27, 75, 0.8);
  --element-bg-dark: rgba(17, 24, 39, 0.95);
  --primary-dark: var(--purple-400);
  --primary-dark-rgb: 167, 139, 250;
  --secondary-dark: var(--purple-300);
  --accent-dark: var(--purple-200);
  --headline-dark: var(--purple-100);

  /* Gradients */
  --bg-gradient-light-1: var(--purple-100);
  --bg-gradient-light-2: var(--purple-200);
  --bg-gradient-light-3: var(--purple-300);
  --bg-gradient-light-4: var(--purple-100);

  --bg-gradient-dark-1: var(--purple-900);
  --bg-gradient-dark-2: var(--purple-800);
  --bg-gradient-dark-3: var(--gray-800);
  --bg-gradient-dark-4: var(--purple-900);
}

/*--------------------------------------------------------------
# Reset & Base Styles
--------------------------------------------------------------*/
html {
  scroll-behavior: smooth;
	height: auto !important;
	overflow-x: hidden;
}
* {
  margin: 0;
  padding: 0;
}
body {
  font-family: "Br Sonoma", sans-serif !important;
  overflow-x: hidden;
  background-color: var(--bg-color-light);
	background-image:
    radial-gradient(at 62% 38%, var(--bg-gradient-light-1) 0, transparent 50%),
    radial-gradient(at 0% 1%, var(--bg-gradient-light-2) 0, transparent 50%),
    radial-gradient(at 100% 100%, var(--bg-gradient-light-3) 0, transparent 50%),
    radial-gradient(at 36% 65%, var(--bg-gradient-light-4) 0, transparent 50%);
    background-attachment: fixed !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
  transition: all 0.5s ease;
}

.dark-mode body {
  background-color: var(--bg-color-dark);
  color: var(--text-color-dark);
  background-image:
    radial-gradient(at 62% 38%, var(--bg-gradient-dark-1) 0, transparent 50%),
    radial-gradient(at 0% 1%, var(--bg-gradient-dark-2) 0, transparent 50%),
    radial-gradient(at 100% 100%, var(--bg-gradient-dark-3) 0, transparent 50%),
    radial-gradient(at 36% 65%, var(--bg-gradient-dark-4) 0, transparent 50%);text-color-light);
}


/*--------------------------------------------------------------
# Scrollbar
--------------------------------------------------------------*/
/* Base Styles */
::-webkit-scrollbar {
  width: 14px;
  height: 14px;
  background-color: transparent;
}

/* Track - Light Mode */
::-webkit-scrollbar-track {
  background-color: var(--purple-50);
  border-radius: 8px;
  margin: 4px;
  border: 2px solid var(--purple-100);
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.05);
}

/* Thumb - Light Mode */
::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, var(--purple-400), var(--purple-500));
  border-radius: 8px;
  border: 2px solid var(--purple-100);
  box-shadow: 
    0 2px 4px rgba(0, 0, 0, 0.1),
    inset 0 0 0 1px rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
}

/* Hover Effects - Light Mode */
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, var(--purple-500), var(--purple-600));
  box-shadow: 
    0 3px 6px rgba(0, 0, 0, 0.15),
    inset 0 0 0 1px rgba(255, 255, 255, 0.3);
  transform: scale(1.02);
}

/* Active State - Light Mode */
::-webkit-scrollbar-thumb:active {
  background: linear-gradient(135deg, var(--purple-600), var(--purple-700));
}

/* Corner */
::-webkit-scrollbar-corner {
  background-color: transparent;
}

/* Dark Mode */
.dark-mode ::-webkit-scrollbar-track {
  background-color: var(--gray-800);
  border: 2px solid var(--purple-900);
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.3);
}

.dark-mode ::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, var(--purple-600), var(--purple-700));
  border: 2px solid var(--purple-800);
  box-shadow: 
    0 2px 4px rgba(0, 0, 0, 0.3),
    inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.dark-mode ::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, var(--purple-500), var(--purple-600));
  box-shadow: 
    0 3px 6px rgba(0, 0, 0, 0.4),
    inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

.dark-mode ::-webkit-scrollbar-thumb:active {
  background: linear-gradient(135deg, var(--purple-700), var(--purple-800));
}

/* Firefox Support */
html {
  scrollbar-width: auto;
  scrollbar-color: var(--purple-400) var(--purple-50);
}

.dark-mode {
  scrollbar-color: var(--purple-600) var(--gray-800);
}

/* Optional: Animated glow effect on active scroll */
@keyframes scroll-glow {
  0% { box-shadow: 0 0 0 rgba(124, 58, 237, 0); }
  50% { box-shadow: 0 0 8px rgba(124, 58, 237, 0.4); }
  100% { box-shadow: 0 0 0 rgba(124, 58, 237, 0); }
}

::-webkit-scrollbar-thumb:active {
  animation: scroll-glow 1.5s ease-out;
}

/*--------------------------------------------------------------
# Layout
--------------------------------------------------------------*/
#home, #about, #creations, #imprint, #data-protection {
  padding-top: 17.5vh;
}

#home {
  height: 100vh;
  width: 100%;
}

#creations {
	padding-top: 5vh !important;
}

.wp-block-kadence-rowlayout .kt-row-column-wrap.kb-theme-content-width {
  margin: 0 !important;
}

.kt-row-column-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  overflow: visible !important;
}

.kt-inside-inner-col {
  flex-wrap: nowrap !important;
}

.kb-row-layout-id8_8ded88-bf {
  margin: auto !important;
}

/*--------------------------------------------------------------
# Headline
--------------------------------------------------------------*/
.headline {
  height: 50vh !important;
  min-height: 500px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.headlinetext {
  font-family: "against", sans-serif;
  font-size: 20vh !important;
  line-height: 1.1;
  white-space: nowrap;
  color: var(--text-light);
  overflow: visible !important;
  z-index: 1 !important;
}

.headlinetext-right, .ho_text_left {
  width: 100%;
  text-align: center;
}

.headlinetext-right {
  margin-left: 15%;
}

.ho_text_left {
	padding-left: 7%;
}

.dark-mode .headlinetext {
  color: var(--text-dark);
}
.headline-shape {
  width: 100%;
  fill: var(--headline-light);
}
.dark-mode .headline-shape {
  fill: var(--headline-dark);
}

/*--------------------------------------------------------------
# Headline Images
--------------------------------------------------------------*/
.headline-image {
  width: 25vw !important;
  position: absolute !important;
  overflow: visible !important;
  filter: drop-shadow(0 0 1vw #282829);
}
.headline-image-right {
  right: 0;
  left: auto;
	
}
.headline-image-portrait {
  display: flex;
  left: 4px;
  width: 30vw !important;
}
.headlineimage-rotated {
  rotate: 45deg;
}
.svgcontainer {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 25vw;
  z-index: 2 !important;
  overflow: visible;
}

.headlinesvg {
  width: 25vw;
  fill: var(--headline-light);
  filter: drop-shadow(0 0 1vw #282829);
	opacity: 0.5 !important;
}
.glass {
      position: absolute;
      width: 384px;
      height: 384px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      backdrop-filter: blur(15px) saturate(1.3);
      -webkit-backdrop-filter: blur(15px) saturate(1.3);
      mask: url(#mask);
      -webkit-mask: url(#mask);
      mask-type: alpha;
      animation: wobble 6s ease-in-out infinite alternate;
    }

    @keyframes wobble {
      0%   { transform: translate(-50%, -50%) scale(1); }
      50%  { transform: translate(-50%, -50%) scale(1.02) rotate(0.3deg); }
      100% { transform: translate(-50%, -50%) scale(0.98) rotate(-0.3deg); }
    }

.abstractsvg g path {
	overflow: hidden;
}

.dark-mode .headlinesvg {
  fill: var(--headline-dark);
}

.creationsimg {
	rotate: -15deg;
}


.creationsimg svg {
	overflow: visible !important;
}

.glow-path {
  pointer-events: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.svgcontainer2 {
	transform: none;
	margin-left: 35% !important;
	top: auto !important;
  left: auto !important;
}

/*--------------------------------------------------------------
# Headlinetext Wrappers
--------------------------------------------------------------*/
.ho_text, .ho_text2 {
  width: 50%;
  flex-wrap: nowrap !important;
  will-change: transform;
  overflow: visible !important;
}
.ho_text {
  margin: 0 10% 15vh 0;
}
.ho_text2 {
  margin: 15vh 0 0 10%;
}
.ho_text_right, .ho_text_left {
  flex-direction: column;
}
.ho_text_right {
  justify-content: center;
  padding: 0 7.5%;
}


/*--------------------------------------------------------------
# Main Content
--------------------------------------------------------------*/
.main-content {
  margin: 0 3vw 0 12vw !important;
  transition: all 0.3s ease !important;
}
.main-content.expanded {
  margin: 0 0 0 15vw;
  transition: transform 0.4s ease-out;
}

/*--------------------------------------------------------------
# Underheadline
--------------------------------------------------------------*/
.underheadline{
	font-size: 4vh;
	font-weight: 700;
	margin-top: 5vh;
}

/*--------------------------------------------------------------
# Text and Accordion Styles
--------------------------------------------------------------*/
.text, .kt-blocks-accordion-title {
  color: var(--text-color-light);
  font-family: "Br Sonoma", sans-serif;
  text-align: center;
  font-size: 2.5vh;
  transition: transform 0.3s ease-in-out;
}
.dark-mode .text, .dark-mode .kt-blocks-accordion-title {
  color: var(--text-color-dark);
}

.text-left {
	text-align: left;
}

/* Base Button Styles */
.button {
  color: var(--text-color-light) !important;
	background-color: var(--purple-500) !important;
  cursor: pointer;
  font-size:16px;
  width: 100% !important; 
	  overflow: hidden;
  position: relative;
  span {
    z-index: 20;
  }
  &:after {
    background: #fff;
    content: "";
    height: 155px;
    left: -75px;
    opacity: .2;
    position: absolute;
    top: -50px;
    transform: rotate(35deg);
    transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
    width: 50px;
    z-index: -10;
  }
}

.dark-mode .button {
	color: var(--text-color-dark) !important;
	background-color: var(--purple-600) !important;
}

.button:hover {
  &:after {
    left: 120%;
    transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
  }
}


.kt-acccordion-button-label-show,
.kt-accordion-panel-inner {
  background-color: rgba(var(--primary-light-rgb), 0.5) !important;
  backdrop-filter: blur(5px);
}
.dark-mode .kt-acccordion-button-label-show,
.dark-mode .kt-accordion-panel-inner {
  background-color: rgba(var(--primary-dark-rgb), 0.5) !important;
}
.kt-accordion-panel-inner {
  margin-top: 10px;
}
.kt-blocks-accordion-icon-trigger::before,
.kt-blocks-accordion-icon-trigger::after {
  background-color: var(--text-color-light) !important;
  border-radius: 100%;
}
.dark-mode .kt-blocks-accordion-icon-trigger::before,
.dark-mode .kt-blocks-accordion-icon-trigger::after {
  background-color: var(--text-color-dark) !important;
}

/*--------------------------------------------------------------
# StackBlitz Embed
--------------------------------------------------------------*/
iframe {
	outline-width: 0 !important;
	border: 0 !important;
	border-width: 0 !important;
	margin: 14px !important;
	border-radius: 6px !important;
	width: calc(100% - 28px) !important;
	display: block !important;
}

/*--------------------------------------------------------------
# Focus & A11y
--------------------------------------------------------------*/
:where(.wp-site-blocks :focus) {
  outline-width: 0 !important;
}

/*--------------------------------------------------------------
# About Contents
--------------------------------------------------------------*/
.about-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  padding: 3rem 2rem;
  max-width: 100%;
  margin: 4rem auto;
}

.about-line {
  position: relative;
  padding: 1.25rem 1rem;
	margin-bottom: 14px;
  border-radius: 20px;
  background: var(--element-bg-light);
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.4s ease-in-out;
  filter: blur(6px) grayscale(100%);
  transform: scale(0.98);
}

.about-line:hover,
.about-line.revealed {
  filter: none !important; /* 🛠 Force clear all filters */
  transform: scale(1);
  background: linear-gradient(135deg, var(--primary-light), var(--accent-light));
  color: var(--bg-color-light);
}


body.dark-mode .about-line {
  background: var(--element-bg-dark);
  border-color: var(--border-color-dark);
  filter: blur(6px) grayscale(80%);
}

body.dark-mode .about-line:hover,
body.dark-mode .about-line.revealed {
  filter: none !important;
  background: linear-gradient(135deg, var(--primary-dark), var(--accent-dark));
  color: var(--bg-color-dark);
}


/*--------------------------------------------------------------
# Dot Animation
--------------------------------------------------------------*/
#dot-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
}
.dot {
  position: absolute;
  width: 0.5vw;
  height: 1vh;
  background-color: var(--primary-light);
  border-radius: 50%;
  pointer-events: none;
  box-shadow: 0 0 10px var(--primary-light);
}
.dark-mode .dot {
  background-color: var(--primary-dark);
  box-shadow: 0 0 10px var(--primary-dark);
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.footer {
  background-color: rgba(var(--primary-light-rgb), 0.5) !important;
  backdrop-filter: blur(5px);
	border-radius: 20px;
}

.dark-mode .footer {
  background-color: rgba(var(--primary-dark-rgb), 0.5) !important;
}

.logosvg {
  width: 3vw;
	padding-right: 10px;
  fill: var(--headline-light);
  filter: drop-shadow(0 0 1vw #282829);
}

.dark-mode .logosvg {
  fill: var(--headline-dark);
}
.footerbutton {
	 width: 40% !important;
}

.footer .kt-row-column-wrap {
	justify-content: start !important;
}