/*******************************************************
Fonts
*******************************************************/
 @font-face {
     font-family: 'Matter-Light';
     src: url('/wp-content/fonts/Matter-Light.eot');
     src: url('/wp-content/fonts/Matter-Light.woff2') format('woff2'), 
     url('/wp-content/fonts/Matter-Light.woff') format('woff');
     font-display: swap;
}
 @font-face {
     font-family: 'Matter-Regular';
     src: url('/wp-content/fonts/Matter-Regular.eot');
     src: url('/wp-content/fonts/Matter-Regular.woff2') format('woff2'), 
     url('/wp-content/fonts/Matter-Regular.woff') format('woff');
     font-display: swap;
}
 @font-face {
     font-family: 'Matter-Medium';
     src: url('/wp-content/fonts/Matter-Medium.eot');
     src: url('/wp-content/fonts/Matter-Medium.woff2') format('woff2'), 
     url('/wp-content/fonts/Matter-Medium.woff') format('woff');
     font-display: swap;
}/* ================================
   Identity Lab: Fonts (Simple CSS)
   Edit this file in:
   WP Admin → Plugins → Plugin File Editor → Select this plugin → fonts.css
   ================================ */

 @font-face {
     font-family: 'Matter-Light';
     src: url('/wp-content/fonts/Matter-Light.eot');
     src: url('/wp-content/fonts/Matter-Light.woff2') format('woff2'), 
     url('/wp-content/fonts/Matter-Light.woff') format('woff');
     font-display: swap;
}
 @font-face {
     font-family: 'Matter-Regular';
     src: url('/wp-content/fonts/Matter-Regular.eot');
     src: url('/wp-content/fonts/Matter-Regular.woff2') format('woff2'), 
     url('/wp-content/fonts/Matter-Regular.woff') format('woff');
     font-display: swap;
}
 @font-face {
     font-family: 'Matter-Medium';
     src: url('/wp-content/fonts/Matter-Medium.eot');
     src: url('/wp-content/fonts/Matter-Medium.woff2') format('woff2'), 
     url('/wp-content/fonts/Matter-Medium.woff') format('woff');
     font-display: swap;
}
@font-face {
  font-family: 'LazyPen';
  src: url('/wp-content/fonts/LazyPen.woff2') format('woff2'),
       url('/wp-content/fonts/LazyPen.woff') format('woff');
  font-display: swap;
}
.lazy-pen, .lazy-pen p {
	font-family: 'LazyPen';
}
.idl-light, p, li {
	font-family: 'Matter-Light';
}
.idl-regular, .menu li, .kontakt {
	font-family: 'Matter-Regular';
}
.menu ul {
	padding-inline-start: unset;
}
.idl-medium, h2, h3, strong, b {
	font-family: 'Matter-Medium';
	font-weight: unset;	
}
h1 {
	font-weight: unset;
}
h3 {
	letter-spacing: 1px;
    /*text-transform: uppercase;*/
}
.h3-s h3 {
	font-size: var(--s);
}
.lazy-pen h3 {
	text-transform: unset;
	font-family: 'LazyPen' !important;
}
.tier h3 {
	letter-spacing: 1px;
    text-transform: uppercase;
	font-size: var(--xs);
	font-family: 'Matter-Medium' !important;
}
* {
  margin: 0;
}
a {
	text-decoration:none;
	color:unset !important;
}
.menu-section a {
}
.menu-section a:hover {
	/*border-bottom: 1px solid black;*/
}
a.button {
	border-bottom: none;
}
p, ul {
	margin-bottom: var(--s)!important;
}
li p {
	margin-bottom: unset !important;
}
h1 {
	margin: 0 !important;
}
h3 {
	margin-bottom: .4rem;
}
.h3-s {
	font-size: var(--xs);
}
#about h2 {
	font-size: var(--s);
	padding-bottom: var(--xxs);
}
.blog h2 {
	font-size: var(--r);
	margin-top: var(--l);
	margin-bottom: var(--s);
	font-family: 'Matter-Light';
}
.blog h3, h2.about {
	margin-top: var(--l);
	font-size: var(--s);
}
h2.about  {
	margin-top: unset;
}

#dotLabelOverlay {
  /* Stronger pastel gradient, fixed definition */
background-image: radial-gradient(circle at 0% 0%,
  rgba(255, 211, 218, 0.88) 0%,
  rgba(212, 236, 255, 0.88) 35%,
  rgba(234, 255, 211, 0.88) 70%,
  rgba(255, 241, 199, 0.88) 100%
);
	
  background-size: 220% 220%; /* gives room to move */
  animation: pastel-shift 16s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

.pastel, .dot-label, .card-mask:hover {
  /* Stronger pastel gradient, fixed definition */
background-image: radial-gradient(circle at 0% 0%,
  rgba(255, 211, 218, 1) 0%,
  rgba(212, 236, 255, 1) 35%,
  rgba(234, 255, 211, 1) 70%,
  rgba(255, 241, 199, 1) 100%
);
	
  background-size: 220% 220%; /* gives room to move */
  animation: pastel-shift 16s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

/* Only animate background-position → fully interpolable → seamless */
@keyframes pastel-shift {
  0% {
    background-position: 0% 0%;
  }
  18% {
    background-position: 50% 20%;
  }
  46% {
    background-position: 80% 80%;
  }
  72% {
    background-position: 20% 80%;
  }
  100% {
    background-position: 0% 0%; /* exactly same as 0% → no cut */
  }
}

/* ===========================
   Dot Menu
=========================== */
.dot-menu {
  position: fixed;
  right: var(--l);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: var(--r);
  z-index: 1000;
}

@media (max-width: 767px) {
  .dot-menu {
    right: var(--s)!important;
  }
}

.button:hover, .button2:hover {
	background-color: var(--black);
	background-image:unset;
}

.dot-menu::before {
  content: "";
  position: absolute;
  width: 0;
  background-color: var(--black);
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 0;
}

.dot {
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  z-index: 9999; 
  background: #ffb1b1;
}

.dot:hover,
.dot.active {
  background-color: var(--black);
	opacity: 1;
}

.dot-label {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-size: 12px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.dot-menu {
  position: fixed;
  right: var(--l);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: var(--r);
  z-index: 1000;
}

@media (max-width: 767px) {
  .dot-menu {
    right: var(--s)!important;
  }
}

.dot-menu::before {
  content: "";
  position: absolute;
  width: 0;
  background-color: var(--black);
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 0;
}

.dot:hover,
.dot.active {
  background-color: var(--black);
	opacity: 1;
}

#dotLabelOverlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: var(--l);
  white-space: nowrap;

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 999;
}

#dotLabelOverlay.is-visible {
  opacity: 1;
}

.dot:hover .dot-label {
  opacity: 1;
}

.dot.is-active {
  background-color: var(--black);
  opacity: 1;
}

/* smooth fade baseline */
body > * {
  transition: opacity 0.3s ease-in-out;
}

/* dim everything when a dot is hovered */
body:has(.dot:hover) > * {
  /*opacity: 0.05;*/
}

/* keep dot menu fully visible */
body:has(.dot:hover) .dot-menu {
  opacity: 1;
}
.dot:active .dot-label {
  opacity: 0;
}

/* disable dimming */
body.dot-clicked > * {
  opacity: 1 !important;
}

/* hide labels */
body.dot-clicked .dot-label {
  opacity: 0 !important;
}

.dot-menu.dotmenu-hide {
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}

/* Page Edits */
  body {
  background-color: #fff; /* default */
  transition: background-color 0.3s ease-in-out;
}

.section-reset {
  min-height: 100vh;
  width: 100%;
  position: relative;
}
.home .container-r {
	left: -2rem;
	position: relative;
}
.video-scroll-wrapper {
}
.home #video-fader {
    left: -3rem;
}
#video-fader, #video-environment {
  position: fixed;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 100;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  z-index: 0;
  mix-blend-mode: multiply;
}
.video-layer {
  position: absolute;
  width: 66%;
  height: auto;
  z-index: 1;
  transition: opacity 0.4s ease-in-out;
  max-height: 100%;
  max-width: 1200px;
}
.video-mobile, #video-logo {
  position: relative;
  max-width: 400px;
  height: auto;
  z-index: 1;
  transition: opacity 0.4s ease-in-out;
  max-height: 100%;
  padding: 0 var(--xxl);
}
#video-logo {
  max-width: 200px;
  padding:unset;
}
@media screen and (max-width: 1023px) {
  #blend-stage, #dotMenu {
    display: none;
  }
  #first-section {
    padding-top:0 !important;
  }
  .home .container-r {
	left: unset;
	}
}
@media screen and (max-width: 767px) {
  .section-reset {
    height: unset;
    padding: var(--xxl) 0;
  }
}
.block-margin p {
	margin-bottom: 0 !important;
}