@import url("https://use.typekit.net/sbk0xyr.css");


body {
	  font-weight: 900;
	    font-family: "adelle-sans", sans-serif;
	overflow-x: hidden;
}
html {
  scroll-behavior: smooth;
}
.teaser .textbox {
	padding-bottom: 200px !important;
}

@property --a {
    syntax: "<percentage>";
    initial-value: 0%;
    inherits: true;
}
.teaser .blubb {
		right: 130px;
	bottom: 100px;
}

.footer .blubb {
		right: 100px;

}

a {
	color: #fff;
	text-decoration: none;
}
 a.blubb {
	  font-weight: 900;
	    font-family: "adelle-sans", sans-serif;

}
.blubb {

    --a: 0%;
    --hue: 170deg;
    --x: 50;
    --y: 50;
    --button: hsl(var(--hue), 66%, 66%);
    --edge: 20px;
    --size: 2em;
    	position: absolute;
    background: transparent;
    color: hsla(var(--hue), 80%, 30%, 0.7);
   font-size: clamp(16px, 2vw, 25px);
   

	text-decoration: none;
    padding: calc(var(--size)) calc(var(--size)*1.5);
    -webkit-animation: color 20s linear infinite both;
            animation: color 20s linear infinite both;
    transition: 
        --a .5s ease-in-out, 
        scale var(--spring-duration) var(--spring-easing);
    scale: 1;
    isolation: isolate;
    &:hover {
        --a: 100%;
        transition-duration: .5s, 1s;
        box-shadow: none;
        opacity: 1;
        scale: 1.2;
		
    }
}

.blubb:before {
    content: "";
    position: absolute;
    inset: 0em;
    /** here's the magic. A blur and a svg filter */
    filter: blur(12px) url(#goo); 
    /** followed by a radial-gradient which causes the
    gooey effect to follow mouse-position */
    background-image:
        linear-gradient(0deg,var(--button),var(--button)),
        radial-gradient(
            40% 70% at calc(var(--x) * 1%) calc(var(--y) * 1%),
            hsla(var(--hue), 77%, 77%, var(--a)) 0%,
            transparent 90%
        );
    /** and finally a background-clip so the radial-gradient
    is larger than the linear-gradient */
    background-clip: content-box, border-box;
    padding: 24px;
    z-index: -1;
    border: inherit;
    -webkit-animation: color 20s linear infinite both;
            animation: color 20s linear infinite both;
}

.blubb {
    --a: 0%;
    --button: hsl(0deg, 0%, 0%); /* Schwarz */
    color: white; /* Weißer Text */
}

.blubb:before {
    background-image:
        linear-gradient(0deg, var(--button), var(--button)),
        radial-gradient(
            40% 70% at calc(var(--x) * 1%) calc(var(--y) * 1%),
            hsla(0deg, 0%, 40%, var(--a)) 0%,  /* Helleres Grau */
            transparent 90%
        );
}



@property --hue {
    syntax: "<angle>";
    initial-value: 170deg;
    inherits: false;
}

@-webkit-keyframes color {
    from {
        --hue: 170deg;
    }
    to {
        --hue: 530deg;
    }
}

@keyframes color {
    from {
        --hue: 170deg;
    }
    to {
        --hue: 530deg;
    }
}



:root {
    --spring-easing: linear(
    0, 0.002, 0.01 0.9%, 0.038 1.8%, 0.156, 0.312 5.8%, 0.789 11.1%, 1.015 14.2%,
    1.096, 1.157, 1.199, 1.224 20.3%, 1.231, 1.231, 1.226, 1.214 24.6%,
    1.176 26.9%, 1.057 32.6%, 1.007 35.5%, 0.984, 0.968, 0.956, 0.949 42%,
    0.946 44.1%, 0.95 46.5%, 0.998 57.2%, 1.007, 1.011 63.3%, 1.012 68.3%,
    0.998 84%, 1
  );
    --spring-duration: 1.66s;
}







body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100vw;

font-family: "adelle-sans-ultra-thin", sans-serif;
  font-size: 12px;
  text-decoration: none;

	box-sizing: border-box;
	border: 0px solid #fff;
	overflow-x: hidden;
		background-color: #fff;
	display: block;
}




.weiss {
	width: 20px;
	background-color: #fff;
	height: 100%;
	display: block;
	position: absolute;
	z-index: 199;
}
.more-pens {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 10;
}
#balloon-container canvas {
  background: transparent !important;
}


h1, .hh1 {
	font-family: "adelle-sans", sans-serif;
font-weight: 700;
font-style: normal;
}



h2 {
	font-family: "pt-serif-pro", sans-serif;
font-weight: 700;
font-style: italic;
}

.weissbig {
	font-size: clamp(16px, 3.25vw,45px);
		color: #fff;
}
.footer .hh1 span {
	color: #fff;
}
.footer .hh1 span.bold {
  font-weight: 900;
	    font-family: "adelle-sans", sans-serif;
}
.blubb a {
	text-decoration: none;
	color: #fff;
	    font-family: "adelle-sans", sans-serif;
	text-transform: uppercase;
	font-weight: 900;
	padding: 0 10px
}.blubb a {
  pointer-events: auto;
}
.title h1,
.hh1{
  position: relative;
  color: #FFFFFF;
  font-weight: 900;
font-size: clamp(32px, 6.5vw, 90px);
  padding: 0;
  margin: 0;
  line-height: 1;
	text-transform: uppercase;
}
.weiss { color: #fff; }
.title h1 span,
.hh1 span{
 font-family: "adelle-sans-ultra-thin", sans-serif;
font-weight: 200;
  padding: 0;
  margin: 0;
  line-height: 1;
}
.title h3 {
  font-weight: 200;
  font-size: 20px;
  padding: 0;
  margin: 0;
  line-height: 1;
  color: #FFFFFF;
  letter-spacing: 2px;
}


#change-button, #change-button_ {
  position: relative;
  color: #FFFFFF;
  font-weight: 900;
font-size: clamp(16px, 2vw, 25px);
  padding: 10px 20px;
  margin: 0;
  line-height: 1;
	text-transform: uppercase;
	background-color: transparent;
	border: 2px solid #fff;
	outline: none;
	border-radius: 4px;
	margin-left: 5px;

}
#change-button:hover, #change-button_:hover {
  position: relative;
  color: #fff;
  font-weight: 900;

  padding: 10px 20px;

  line-height: 1;
	text-transform: uppercase;
	background-color: #000;
	border: 2px solid #fff;
	outline: none;
	border-radius: 4px;
}






a.white-mode, a.white-mode:link, a.white-mode:visited, a.white-mode:active {
  font-family: "Montserrat";
  font-size: 12px;
  text-decoration: none;
  background: #212121;
  padding: 4px 8px;
  color: #f7f7f7;
}
a.white-mode:hover, a.white-mode:link:hover, a.white-mode:visited:hover, a.white-mode:active:hover {
  background: #edf3f8;
  color: #212121;
}

#balloon-container {

	box-sizing: border-box;
	border: 20px solid #fff;
	
	position: relative;
	z-index: 2;
	pointer-events: none;
	height: 100dvh; 
	width: 100%; /* oder jede gewünschte Breite */

	
}
.header-con {	
	background-color: #92d5f6;
	height: 100dvh; 
	width: 100%; /* oder jede gewünschte Breite */
	position: relative;
	
}
.footer {
		box-sizing: border-box;
	border: 20px solid #fff;
	background-color: #92d5f6;
	min-height: 800px
}
#balloon-container canvas {
	margin-left: -80px;
	 width: calc(100% + 160px);
	
}
img {
	width: 100%;
	height: auto;
}

.portrait {
	position: relative;
	overflow: visible;
	z-index: 11;
}

.portrait img:nth-child(1) {
	position: absolute;
	bottom: 0;
	right: 100px;
	width: 60%;
	
}
.portrait img:nth-child(2) {
	box-sizing: border-box;
	padding:0  20px  20px  20px ;
	opacity: 0;
	
}

.textbox {

	padding: 100px 50px 100px  100px;
	box-sizing: border-box;
	position: relative;
	
}
.teaser {
	background-color: #efeeee;

	
}

.textbox h3 {
	font-size: clamp(24px, 4.5vw, 90px);
	color: #fff;
  text-shadow:
	   -4px 4px 8px  rgba(0, 0, 0, 0.25), 
	    -14px 12px 18px  rgba(0, 0, 0, 0.1), 
	  -31px 26px 24px  rgba(0, 0, 0, 0.05);
	

    font-family: "adelle-sans", sans-serif;
	font-weight: 700;
}

.title.first {
  z-index: 12;
  position: absolute;
	box-sizing: border-box;



  text-align: left;

	display: block;

	
}

.title {
  z-index: 1;
  position: absolute;
	box-sizing: border-box;



  text-align: left;
  width: 100%;

	left: 00px;
	top: 00px;
	padding: 100px 50px 0 100px;
	display: block;
	
}

.novis {
	opacity: 0;
}



.codepen-promotion:active, .codepen-promotion:hover, .codepen-promotion:link, .codepen-promotion:visited {
  position: absolute;
  display: block;
  width: 200px;
  z-index: 111;
  right: 40px;
  bottom: 40px;
}

.codepen-promotion__image {
  width: 100%;
}


@media only screen and (max-width: 800px) {

	.title {
    z-index: 1;
    position: absolute;
    box-sizing: border-box;
    text-align: left;
    width: 100%;
    left: 00px;
    top: 00px;
    padding: 40px 40px 40px 40px;
    display: block;
}
.textbox {
    padding: 40px 20px 40px 20px;
    box-sizing: border-box;
    position: relative;
}
	
	#balloon-container canvas {
     margin-left: 0px; 
     width: 100%; 
}
	
	
}