@font-face {
	  font-family: 'SweeebFontBold';
	  src: url('https://cdn.sweeeb.com/SweeebFontBold.otf?v=1742917266') format('opentype');
	}
	
	@font-face {
	  font-family: 'SweeebFontLight';
	  src: url('https://cdn.sweeeb.com/SweeebFontLight.otf?v=1742917271') format('opentype');
	}
	
	@font-face {
	  font-family: 'SweeebFontThin';
	  src: url('https://cdn.sweeeb.com/SweeebFontThin.otf?v=1742917277') format('opentype');
	}
	
	body, html {
		height: 100vh;
  		margin: 0;
  		padding: 0;
  		font-family: 'SweeebFontLight', sans-serif; /*'Lexend Exa' */
  		color: #333333;
  		background-color: #FFFFFF;
  		text-decoration-thickness: from-font;
  		width: 100%;
  		/*color-scheme: light dark;*/
  		/*letter-spacing: 3px;*/ /*SweeebFont*/
  		line-height: 1.6; /*SweeebFont*/
	}
	
	.fc {
	  	/* Standard-Zustand */
	  	--fc-button-bg-color: #333333;           /* Deine Wunsch-Hintergrundfarbe */
	  	--fc-button-border-color: #333333;       /* Rahmenfarbe */
	  	--fc-button-text-color: #ffffff;         /* Schriftfarbe */
	
	  	/* Hover-Zustand (Mauszeiger drüber) */
	  	--fc-button-hover-bg-color: #000000;
	  	--fc-button-hover-border-color: #000000;
	  	--fc-button-hover-text-color: #ffffff;
	
	  	/* Aktiver / Gedrückter Zustand (z.B. die aktive Ansicht) */
	  	--fc-button-active-bg-color: #000000;
	  	--fc-button-active-border-color: #000000;
	  	--fc-button-active-text-color: #ffffff;
	}
	
	/* Den ausgegrauten / deaktivierten Button anpassen */
	.fc .fc-button-primary:disabled {
  		background-color: #EEEEEE; /* Deine Wunsch-Hintergrundfarbe für deaktiviert */
  		border-color: #EEEEEE;     /* Rahmenfarbe */
  		color: #000000;            /* Schriftfarbe */
  
  		/* FullCalendar setzt standardmäßig opacity: 0.65. 
     		Mit 'opacity: 1' verhinderst du, dass der Button zusätzlich transparent wird. */
  		opacity: 0.6;                
	}

	
	.container {
		display: flex;
	}
	
	.darkbox {
		background-color: #000000;
		border-radius: 30px;
		color: #FFFFFF;
		
		border: 3px solid transparent; /* necessary so border-box exists */
		background: linear-gradient(#000000, #000000) padding-box, linear-gradient(90deg, #FF9900, #FF99FF, #0099FF, #FF99FF, #FF9900) border-box;
		background-size: 300%;
	}
	
	.graybox {
		background-color: #EEEEEE;
		border-radius: 30px;
		color: #333333;
		
		border: 3px solid transparent; /* necessary so border-box exists */
		background: linear-gradient(#EEEEEE, #EEEEEE) padding-box, linear-gradient(90deg, #FF9900, #FF99FF, #0099FF, #FF99FF, #FF9900) border-box;
		background-size: 300%;
	}
	
	.lightbox {
		background-color: #FFFFFF;
		border-radius: 30px;
		
		border: 3px solid transparent; /* necessary so border-box exists */
		background: linear-gradient(#FFFFFF, #FFFFFF) padding-box, linear-gradient(90deg, #FF9900, #FF99FF, #0099FF, #FF99FF, #FF9900) border-box;
		background-size: 300%;
	}
	
	.menubox {
		z-index: 6;
		
		/*width: 100%;
		background-color: #000000;
		position: sticky;
		top: 0;*/
		
		width: 100%;
	    background-color: #FFFFFF;
	    position: sticky;
	    top: 0;
	    
	    /* Neue Regeln für das Nebeneinander: */
	    display: flex;
	    align-items: flex-end; /* Zentriert Logo und Text vertikal */
	    justify-content: space-between; /* Logo links, Nav rechts */
	    
	    /*box-sizing: border-box;*/
	}
	
	/* Damit die Links im Nav-Tag auch nebeneinander bleiben */
	.menubox nav {
		display: flex;
		/*gap: 120px;*/ /* Abstand zwischen den Links */
		gap: clamp(12px, 6vw, 120px);
		white-space: nowrap; /* Verhindert Zeilenumbruch bei langen Wörtern */
	}
	
	/* Verkleinert das Logo auf dem Handy, damit Platz bleibt */
	/*.menubox img.logo {
		max-height: 30px; 
	  	width: auto;
	}*/
	
	.footerbox {
		width: 100%;
		background-color: #333333;
	}
	
	.footerbox .text, .footerbox .title {
		color: #FFFFFF;
	}
	
	.footerbox .graybox .text {
		color: #333333;
	}
	
	.footerbox a {
		background: -webkit-gradient(linear, 0 100%, 0 0, from(#FF9900), color-stop(0.25, #FF99FF), color-stop(0.5, #0099FF), color-stop(0.75, #FF99FF), to(#FF9900));
		background: -webkit-linear-gradient(90deg, #FF9900, #FF99FF, #0099FF, #FF99FF, #FF9900);
		background: -moz-linear-gradient(90deg, #FF9900, #FF99FF, #0099FF, #FF99FF, #FF9900);
		background: -o-linear-gradient(90deg, #FF9900, #FF99FF, #0099FF, #FF99FF, #FF9900);
		background: linear-gradient(90deg, #FF9900, #FF99FF, #0099FF, #FF99FF, #FF9900);
		
		/*background: linear-gradient(90deg, #FF9900, #FF99FF, #0099FF, #FF99FF, #FF9900);*/
    	background-size: 300%;
    	/*text-fill-color: transparent;
    	-webkit-text-fill-color: transparent;*/
    	color: transparent;
    	background-clip: text;
    	-webkit-background-clip: text;
    	
    	text-decoration-color: #333333;
    	
    	text-decoration: underline;
	}
	
	.footerbox a:hover {
		color: #FFFFFF;
		text-decoration: none;
	}
	
	.content {
		position: relative;
	}
	
	.carousel-container {
		display: flex;
		overflow-x: auto;
		gap: 12px;
	}
	
	.grid {
		/*display: grid;*/
		
		display: flex;
		flex-wrap: wrap;
		
    	/*grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));*/
    	gap: 12px;
    	width: 100%;
    	box-sizing: border-box;
    	
    	justify-content: center;
	}
	
	.box {
		background-color: #000000;
		border-radius: 30px;
		
		border: 3px solid transparent; /* necessary so border-box exists */
		background: linear-gradient(#FFFFFF, #FFFFFF) padding-box, linear-gradient(90deg, #FF9900, #FF99FF, #0099FF, #FF99FF, #FF9900) border-box;
		background-size: 300%;
		
		flex: 1 1 600px;
		min-width: 30%;
	}

	
	.glass {
		backdrop-filter: blur(12px); /*6px*/
      	-webkit-backdrop-filter: blur(12px); /*6px*/
      	background: rgba(255, 255, 255, 0.6); /*0.3*/
      	color: #333333;
      	border-radius: 30px;
      	
      	
	    
	    /* Abgerundete Ecken */
	    /*border-radius: 16px;*/
	}
	
	input {
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
	}
	
	.button, input[type=button], input[type=submit] {
		font-family: 'SweeebFontBold', sans-serif; /*'Lexend Exa'*/
		letter-spacing: 6px; /* DELETE ??? */
		/*background-color: #FF9900;*/
		color: #FFFFFF;
		border: 3px solid transparent;
  		/*padding: 30px;*/
  		white-space: nowrap;
  		text-align: center;
  		text-decoration: none;
  		/*width: 600px;
  		max-width: 80%;*/
  		/*margin-left: auto;
  		margin-right: auto;
  		display: block;*/
  		font-size: 26px;
  		cursor: pointer;
  		border-radius: 15px;
  		margin-bottom: 30px;
  		font-weight: 300;
  		padding: 12px;
  		
  		/*background: linear-gradient(90deg, #FF9900, #FF6E56, #EA94D0, #B089CA, #5ECAFF, #75D97F, #FF9900);*/
  		background-image: linear-gradient(90deg, #FF9900, #FF99FF, #0099FF, #FF99FF, #FF9900);
    	background-size: 200%;
	}

	.button:hover, input[type=button]:hover, input[type=submit]:hover {
  		/*background: linear-gradient(90deg, #FF9900, #FF6E56, #EA94D0, #B089CA, #5ECAFF, #75D97F, #FF9900);*/
  		background: linear-gradient(90deg, #FF9900, #FF99FF, #0099FF, #FF99FF, #FF9900);
    	background-size: 300%;
    	text-fill-color: transparent;
    	-webkit-text-fill-color: transparent;
    	background-clip: text;
    	-webkit-background-clip: text;
    	text-decoration: none;
    	border: 3px solid #000000;
	}
	
	.title {
		font-family: 'SweeebFontBold', sans-serif; /*'Lexend Giga'*/
		/*letter-spacing: 6px;*/
		margin: 0;
		padding: 0;
		/*font-size: 60px;*/
		font-size: clamp(1.3rem, 3vw, 3.6rem);
		font-weight: 600;
	}
	
	.subtitle {
		font-family: 'SweeebFontBold', sans-serif; /*'Lexend Giga'*/
		letter-spacing: 6px;
		margin: 0;
		padding: 0;
		font-size: 36px;
		font-weight: 600;
	}
	
	.text {
		font-family: 'SweeebFontLight', sans-serif; /*'Lexend Exa'*/
		/*letter-spacing: 3px;*/
		margin: 0;
		padding: 0;
		font-size: clamp(0.8rem, 1.6vw, 3.3rem);
		font-weight: 300;
	}
	
	.smallText {
		font-family: 'SweeebFontThin', sans-serif; /*'Lexend Exa'*/
		letter-spacing: normal;
		margin: 0;
		padding: 0;
		font-size: 20px;
	}
	
	.coloredText {
		/*background: -webkit-gradient(linear, 0 100%, 0 0, from(#FF9900), color-stop(0.25, #FF99FF), color-stop(0.5, #0099FF), color-stop(0.75, #FF99FF), to(#FF9900));
		background: -webkit-linear-gradient(90deg, #FF9900, #FF99FF, #0099FF, #FF99FF, #FF9900);
		background: -moz-linear-gradient(90deg, #FF9900, #FF99FF, #0099FF, #FF99FF, #FF9900);
		background: -o-linear-gradient(90deg, #FF9900, #FF99FF, #0099FF, #FF99FF, #FF9900);
		background: linear-gradient(90deg, #FF9900, #FF99FF, #0099FF, #FF99FF, #FF9900);*/
		
		background: linear-gradient(90deg, #FF9900, #FF99FF, #0099FF);
    	background-size: 100%;
    	/*text-fill-color: transparent;
    	-webkit-text-fill-color: transparent;*/
    	color: transparent;
    	background-clip: text;
    	-webkit-background-clip: text;
    	
    	text-decoration-color: #333333;
    	
    	/*font-size: 30px;*/
    	/*font-weight: 600;*/
	}
	
	.logo {  		
  		height: clamp(60px, 6vw, 100px);
  		
  		/*height: 100px;*/
		display: block;
		margin-left: auto;
		margin-right: auto;
		margin-top: 0;
		margin-bottom: 0;
		
		padding-top: 6px;
		padding-bottom: 6px;
  		
		/*display: block;*/
		/*margin-left: auto;
		margin-right: auto;
		margin-top: 0;
		margin-bottom: 0;*/
		
		/*padding-top: 6px;
		padding-bottom: 6px;*/
		
		/*padding-top: 30px;
		padding-bottom: 30px;
		padding-left: 30px;
		padding-right: 30px;*/
		
		/*position: sticky;
		position: -webkit-sticky;
   		top: 0;*/
	}
	
	.image {
  		width: 100%;
  		border-radius: 30px;
  		/*display: block;*/
  		/*margin: auto;*/
  		
  		border: 3px solid transparent;
		background: linear-gradient(#FFFFFF, #FFFFFF) padding-box, linear-gradient(90deg, #FF9900, #FF99FF, #0099FF, #FF99FF, #FF9900) border-box;
		background-size: 300%;
		
		/*display: block;
  		box-sizing: border-box;
  		padding: 3px;
  		border-radius: 30px;
		background: linear-gradient(90deg, #FF9900, #FF99FF, #0099FF, #FF99FF, #FF9900) border-box;
		background-size: 300%;
		overflow: hidden;*/
	}
	
	.carousel {
	  	overflow: auto;
	  	white-space: nowrap;
	  	display: flex;
	  	
	  	-ms-overflow-style: none;  /* IE and Edge */
  		scrollbar-width: none;  /* Firefox */
	}
	
	.carousel::-webkit-scrollbar {
  		display: none;
	}
	
	.paddingLeft {
		padding-left: 60px;
	}
	
	.paddingRight {
		padding-right: 60px;
	}
	
	.paddingTop {
		padding-top: 30px;
	}
	
	.paddingBottom {
		padding-bottom: 30px;
	}
	
	.marginLeft {
		margin-left: 60px;
	}
	
	.marginRight {
		margin-right: 60px;
	}
	
	.marginTop {
		margin-top: 30px;
	}
	
	.marginBottom {
		margin-bottom: 30px;
	}
	
	.alignLeft {
		text-align: left;
	}
	
	.alignRight {
		text-align: right;
	}
	
	.alignCenter {
		text-align: center;
	}
	
	.alignJustify {
    text-align: justify;
    text-justify: inter-word; /* Verbessert die Verteilung der Abstände */
    
    /* Silbentrennung aktivieren */
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;

    /* Verhindert extrem große Lücken */
    word-break: break-word; 
    
    /* Optional: Falls du verhindern willst, dass das letzte Wort 
       einer Box alleine steht (sieht bei Blocksatz oft besser aus) */
    text-align-last: left;
}
	
	.center {
		margin-left: auto;
		margin-right: auto;
		width: fit-content;
		max-width: 100%;
	}
	
	.fit {
		width: fit-content;
		max-width: 100%;
	}
	
	.bold {
		font-family: 'SweeebFontBold', sans-serif;
	}
	
	.menubox .text {
		word-spacing: 30px;
	}
	
	.menubox a {
		color: #FFFFFF;
		text-decoration: underline;
	}
	
	.menubox a:hover {
		color: #FFFFFF;
		text-decoration: none;
	}
	
	a {
		color: #000000;
		text-decoration: underline;
	}
	
	a:hover {
		color: #333333;
		text-decoration: none;
	}
	
	ul {
		margin: 0;
		padding: 0;
	 	list-style-position: outside;
	  	flex-direction: column;
	}
	
	li {
		margin: 0 0 12px 0;
		padding: 0;
	}
	
	.smallLogo {
		height: 60px;
	}
	
	.video {
  		display: block;
  		margin: auto;
  		width: 100%;
  		max-width: 600px;
  		border-radius: 30px;
	}
	
	input[type=text], input[type=email], input[type=tel], input[type=url], input[type=date], input[type=month], input[type=number], input[type=search], input[type=password], textarea, .input {
		font-family: 'SweeebFontLight', sans-serif; /*'Lexend Exa'*/
		width: 600px;
  		max-width: 80%;
  		margin-bottom: 30px;
		padding: 12px;
		border-style: solid;
  		border-width: 3px;
		border-radius: 6px;
		border-color: #333333;
		box-sizing: border-box;
		resize: none;
		background-color: #FFFFFF;
		color: #333333;
		caret-color: #333333;
		font-size: 26px;
	}
	
	select {
		font-family: 'SweeebFontLight', sans-serif; /*'Lexend Exa'*/
		border-style: solid;
  		border-width: 3px;
		border-color: #333333;
		border-radius: 6px;
		color: #333333;
		font-size: 26px;
		background-color: #FFFFFF;
		margin-right: 10px;
		margin-bottom: 30px;
		padding: 12px;
	}
	
	*:focus {
		outline: none;
	}

	::selection {
  		color: #FFFFFF;
 		background: #333333;
	}
	
	::-moz-selection { /* Code for Firefox */
  		color: #FFFFFF;
  		background: #333333;
	}
	
	::placeholder {
  		color: #666666;
  		opacity: 1; /* Firefox */
	}

	:-ms-input-placeholder { /* Internet Explorer 10-11 */
 		color: #666666;
	}

	::-ms-input-placeholder { /* Microsoft Edge */
 		color: #666666;
	}
	
	.space {
		/*height: 30vh;*/
		height: clamp(30px, 12vh, 60px);
	}
	
/*@media (prefers-reduced-motion: no-preference) {
	.coloredText, .lightbox, .darkbox, .box, .image, .footerbox a {
		animation: animateColor 60s linear infinite;
	}
	
	.button, input[type=button], input[type=submit] {
		animation: animateColor 30s linear infinite;
	}
	
	.button:hover, input[type=button]:hover, input[type=submit]:hover {
		animation: animateColor 15s linear infinite;
	}
	
	@keyframes animateColor {
		from{
			background-position: 300%;
		}

		to{
			background-position: 0%;
		}
	}
}*/
	
@media(prefers-reduced-motion) {
	* {
    	transition: none;
    	-webkit-transition: none;
    	-moz-transition: none;
    	-ms-transition: none;
    	-o-transition: none;
    }
}
	
@media screen and (max-width: 1024px) {
	/*.logo {
		height: 100px;
	}*/
	
	/*.title {
		font-size: 66px;
	}*/
	
	.subtitle {
		font-size: 60px;
	}
	
	/*.text {
		font-size: 36px;
	}*/
	
	.smallText {
		font-size: 26px;
	}
	
	.smallLogo {
		height: 60px;
	}
	
	input[type=text], input[type=email], input[type=tel], input[type=url], input[type=date], input[type=month], input[type=number], input[type=search], textarea {
		font-size: 30px;
	}
	
	.button, input[type=button], input[type=submit] {
		font-size: 30px;
	}
	
	select {
		font-size: 30px;
	}
}

@media screen and (max-width: 960px) {
    
    /*.title {
		font-size: 60px;
	}*/
	
	.subtitle {
		font-size: 36px;
	}
	
	/*.text {
		font-size: 30px;
	}*/
	
	.smallText {
		font-size: 20px;
	}
	
	.smallLogo {
		height: 36px;
	}
	
	input[type=text], input[type=email], input[type=tel], input[type=url], input[type=date], input[type=month], input[type=number], input[type=search], textarea {
		font-size: 26px;
	}
	
	.button, input[type=button], input[type=submit] {
		font-size: 26px;
	}
}

@media screen and (max-width: 540px) {
    /*.logo {
    	height: 60px;
    }*/
    
    .title {
    	/*font-size: 26px;*/
    	/*padding-left: 0;
    	padding-right: 0;
    	padding-bottom: 30px;*/
    }
    
    .subtitle {
    	font-size: 18px;
    	/*padding-top: 30px;
    	padding-left: 15px;
    	padding-right: 15px;*/
    }
    
    .text {
    	/*font-size: 15px;*/
    	/*padding-left: 15px;
    	padding-right: 15px;
    	padding-top: 18px;*/
    }
    
    /*.space {
		height: 15vh;
	}*/
    
    .smallText {
		font-size: 12px;
	}
    
    .smallLogo {
		height: 30px;
	}
	
	.paddingLeft {
		padding-left: 30px;
	}
	
	.paddingRight {
		padding-right: 30px;
	}
	
	.paddingTop {
		padding-top: 15px;
	}
	
	.paddingBottom {
		padding-bottom: 15px;
	}
	
	.marginLeft {
		margin-left: 30px;
	}
	
	.marginRight {
		margin-right: 30px;
	}
	
	.marginTop {
		margin-top: 15px;
	}
	
	.marginBottom {
		margin-bottom: 15px;
	}
	
	input[type=text], input[type=email], input[type=tel], input[type=url], input[type=date], input[type=month], input[type=number], input[type=search], textarea {
		font-size: 15px;
	}
    
    .button, input[type=button], input[type=submit] {
    	font-size: 15px;
    }
    
    select {
		font-size: 15px;
	}
}

/*@media (prefers-color-scheme: dark) {
	body, html {
  		background-color: #000000;
  		color: #EEEEEE;
	}
	
	a {
		color: #FFFFFF;
	}
}*/