:root {
  --primary: #004684;
  --secondary: #0E869D;
  --tertiary: #F0C055;
  --dark: #2A2A2A;
  --bright: #ffffff;
  --grey: #e4e2e1;
  --grey-rgb: 228,226,225;
  --padding:10px 20px;
  --radius:10px;
}



body{
	background-color: #faf7f6;
	color: var(--neutral);
	font-family: 'Inter', sans-serif;
	font-weight: 200;
	font-size: clamp(0.95rem, 0.9rem + 0.15vw, 1.05rem);
	line-height: 1.6;
	color: var(--dark);
}

a{
	text-decoration: none;
	color: var(--primary);
}

strong
{
	color:var(--primary);
}

ul
{
	padding: 0 1rem;
	
}
ul li::marker {
  color: var(--primary);
}


h1, h2, h3, h4, h5, h6 {
	font-size: clamp(1.35rem, 1.2rem + 0.7vw, 2rem);
	line-height: 1.15;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.align-items-stretch {
  align-items: stretch !important;
}

.h-100 {
  height: 100% !important;
}

.ts-img-fluid {
  max-width: 100%;
  height: auto;
}

.ts-font-small
{
	font-size: clamp(0.8rem, 0.75rem + 0.1vw, 0.9rem);
	line-height: 1.45;
}

.ts-font-big
{
	font-size: clamp(1.5rem, 1.2rem + 1vw, 2.6rem);
	line-height: 1.15;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.ts-padding
{
	padding: 3rem 3rem;
}

.ts-mb-10
{
	margin-bottom: 6rem;
}

.ul-clear li
{
	list-style: none;
}

.ts-display-ib
{
	display: inline-block;
}

.ts-radius
{
	border-radius: var(--radius);
}

.c-primary
{
	color:var(--primary);
}

.c-bright
{
	color:var(--bright);
}

.bc-bright{
	background-color: var(--bright);
}
.bc-primary{
	background-color: var(--primary);
}
.bc-secondary{
	background-color: var(--secondary);
}

.bc-grey
{
	background-color: var(--grey);
}

.ts-gradient-primary
{
	  background-color: #0c879d;
		background-image:
		  radial-gradient(circle at 10% 20%, rgba(92, 224, 255, 0.22) 0%, transparent 32%),
		  radial-gradient(circle at 80% 48%, rgba(255, 255, 255, 0.06) 0%, transparent 24%),
		  radial-gradient(circle at 95% 85%, rgba(0, 195, 255, 0.10) 0%, transparent 18%);	
}

.ts-gradient-text {
  background-image:
	radial-gradient(circle at 10% 20%, rgba(92, 224, 255, 0.6) 0%, transparent 40%),
	radial-gradient(circle at 10% 28%, rgba(92, 224, 255, 0.8) 0%, transparent 80%),
	radial-gradient(circle at 95% 85%, rgba(0, 195, 255, 0.5) 0%, transparent 30%);

  background-size: cover;

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  color: #0E869D;
}

.ts-text-end
{
	text-align: right;
}

.ts-text-middle
{
	text-align: center;
}

.ts-hero-headline
{
	font-size: clamp(3rem, 2rem + 4vw, 6.5rem);
	line-height: 0.9;
	font-weight: 800;
	letter-spacing: -0.04em;
}

.ts-hero-text
{
	font-size: clamp(1.125rem, 1rem + 0.5vw, 1.6rem);
	line-height: 1.45;
	font-weight: 400;
}



.ts-btn-primary{
	background-color: var(--primary);
	color: var(--bright);
	border-radius: var(--radius);
	border: 0;
	padding: var(--padding);
	transition: background-color 0.6s ease;
}

.ts-btn-primary:hover
{
	background-color: var(--tertiary);
	color: var(--bright);
}

.ts-btn-secondary{
	background-color: var(--secondary);
	color: var(--bright);
	border-radius: var(--radius);
	border: 0;
	padding: var(--padding);
	transition: background-color 0.6s ease;
}

.ts-btn-secondary:hover
{
	background-color: var(--tertiary);
	color: var(--bright);
}

.ts-btn-grey{
	background-color: var(--grey);
	color: var(--dark);
	border-radius: var(--radius);
	border: 0;
	padding: var(--padding);
	transition: background-color 0.6s ease;
}

.ts-btn-grey:hover
{
	background-color: var(--tertiary);
	color: var(--bright);
}

.ts-btn-bright{
	background-color: var(--bright);
	color: var(--primary);
	border-radius: var(--radius);
	border: 0;
	padding: var(--padding);
	transition: background-color 0.6s ease;
}

.ts-btn-bright:hover
{
	background-color: var(--tertiary);
	color: var(--bright);
}

.ts-nav-mobile li
{
	padding: var(--padding);	
	list-style: none;	
}

.ts-nav-mobile li a
{
	color: var(--dark);
}

.ts-nav-mobile li a i
{
	padding: 0 2rem 0 0;
}

.ts-main-nav li
{
	padding: var(--padding);	
	list-style: none;
}

.ts-main-nav li a
{
	color: inherit;
	display: inline-block; /* wichtig für transform */
	transition: transform 0.3s ease, color 0.3s ease;
}

.ts-main-nav li a.active, .ts-main-nav li a:hover
{
	color: var(--primary);
	border-bottom: 2px solid var(--primary);
	padding-bottom: 4px;
	transform: translateY(-4px);
}












.circle-wrap {
  position: relative;
}

/* innerer Kreis */
.circle-wrap::before {
  content: "";
  position: absolute;
  right: 80px;
  top: 50%;
  transform: translateY(-50%);
  
  width: 160px;
  height: 160px;
  border: 2px solid rgba(255,255,255,0.4);
  border-radius: 50%;
}

/* äußerer Kreis */
.circle-wrap::after {
  content: "";
  position: absolute;
  right: 40px;
  top: 50%;
  transform: translateY(-50%);
  
  width: 260px;
  height: 260px;
  border: 2px solid rgba(255,255,255,0.25);
  border-radius: 50%;
}





.scroll-marker
{
	display: inline-block;
	height: 4px;
	width: 5%;
	background-color: var(--grey);
	font-size: 0;
}

.scroll-marker-active
{
	background-color: var(--primary);
}



/* Scroll Container */
.scroll-holder {
  position: relative;
  overflow-x: auto;
  scroll-behavior: smooth;

  /* Scrollbar verstecken */
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* IE / Edge */
}

.scroll-holder::-webkit-scrollbar {
  display: none;                  /* Chrome / Safari */
}

/* Row darf nicht umbrechen */
.scroll-holder .row {
  flex-wrap: nowrap;
}

/* Optional: Snap für nicer UX */
.scroll-holder {
  scroll-snap-type: x mandatory;
}

.scroll-holder .col-4 {
  scroll-snap-align: start;
}

/* Optional: kleiner Abstand zwischen Cards (falls kein g-* genutzt wird) */
.services-scroll .col-4 {
  padding-right: 1rem;
}

/* 🔥 Visueller Hinweis (Fade rechts) */
.scroll-holder::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 60px;
  height: 100%;
  pointer-events: none;

  background: linear-gradient(to right, transparent, #faf7f6);
}

/* Optional: links auch Fade (wenn mittig gescrollt) */
.scroll-holder::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 100%;
  pointer-events: none;

  background: linear-gradient(to left, transparent, #faf7f6);
}



@media (max-width: 768px) {
  .ts-mobile-btn-w-100 {
	width: 100% !important;
	display: block;
	text-align: center;
	margin-bottom: 1rem;
  }
}




#ts-mobile-nav-holder {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 999;

	transform: translateY(100%);
	opacity: 0;
	visibility: hidden;

	transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
}

#ts-mobile-nav-holder.active {
	transform: translateY(0);
	opacity: 1;
	visibility: visible;
}









.formli-embedded-form label
{
	font-size: clamp(0.8rem, 0.75rem + 0.1vw, 0.9rem);
	line-height: 1.45;
	font-weight: 200;

}


.ts-form {
	max-width: 600px;
	margin: auto;
}

.ts-field {
	margin-bottom: 18px;
}



.ts-input,
.ts-select,
.ts-textarea {
	width: 100%;
	padding: 16px 18px;
	/* border: 1px solid rgba(14, 134, 157, 0.12); */
	border: 3px solid white;
	
	border-radius: var(--radius);
	background-color: #faf7f6;
	/* backdrop-filter: blur(10px); */
	/* -webkit-backdrop-filter: blur(10px); */
	/* box-shadow: 0 8px 25px rgba(0,0,0,0.05); */
	font-weight: 200;
	font-size: clamp(0.8rem, 0.75rem + 0.1vw, 0.9rem);
	/* color: var(--neutral); */
	/* transition: all 0.25s ease;
	appearance: none;
	-webkit-appearance: none; */
}

.ts-input::placeholder,
.ts-textarea::placeholder {
	color: rgba(42,42,42,0.5);
}

.ts-input:focus,
.ts-select:focus,
.ts-textarea:focus {
	outline: none;
	
	border-color: rgba(14, 134, 157, 0.45);
	background: rgba(255,255,255,0.92);
	/* box-shadow: 0 10px 30px rgba(14, 134, 157, 0.14); */
	/* transform: translateY(-10px); */
}

.ts-textarea {
	min-height: 140px;
	resize: vertical;
}

.ts-select {
	background-image:
		linear-gradient(45deg, transparent 50%, var(--primary) 50%),
		linear-gradient(135deg, var(--primary) 50%, transparent 50%);
	background-position:
		calc(100% - 22px) calc(50% - 3px),
		calc(100% - 16px) calc(50% - 3px);
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	padding-right: 46px;
}

/* Checkbox + Radio Wrapper */
.ts-choice {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 14px;
	cursor: pointer;
}

.ts-choice input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.ts-choice-box,
.ts-radio-box {
	flex: 0 0 auto;
	position: relative;
	width: 22px;
	height: 22px;
	margin-top: 2px;
	border: 1px solid rgba(14, 134, 157, 0.18);
	background: rgba(255,255,255,0.72);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0 6px 18px rgba(0,0,0,0.05);
	transition: all 0.25s ease;
}

.ts-choice-box {
	border-radius: 8px;
}

.ts-radio-box {
	border-radius: 50%;
}

.ts-choice-text {
	font-size: 0.98rem;
	line-height: 1.45;
	color: var(--neutral);
}

/* Hover */
.ts-choice:hover .ts-choice-box,
.ts-choice:hover .ts-radio-box {
	border-color: rgba(14, 134, 157, 0.35);
	transform: translateY(-1px);
}

/* Focus sichtbar */
.ts-choice input:focus-visible + .ts-choice-box,
.ts-choice input:focus-visible + .ts-radio-box {
	outline: 2px solid rgba(14, 134, 157, 0.25);
	outline-offset: 3px;
}

/* Checkbox checked */
.ts-choice input:checked + .ts-choice-box {
	background: linear-gradient(135deg, var(--primary), #20c4cb);
	border-color: transparent;
}

.ts-choice input:checked + .ts-choice-box::after {
	content: "";
	position: absolute;
	left: 7px;
	top: 3px;
	width: 6px;
	height: 11px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* Radio checked */
.ts-choice input:checked + .ts-radio-box {
	border-color: var(--primary);
	background: rgba(255,255,255,0.95);
}

.ts-choice input:checked + .ts-radio-box::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--primary);
	transform: translate(-50%, -50%);
}

.ts-button {
	width: 100%;
	padding: 16px 18px;
	border-radius: 14px;
	border: none;
	background: linear-gradient(135deg, #20c4cb, #0ea5e9);
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	box-shadow: 0 10px 25px rgba(14, 134, 157, 0.22);
	transition: all 0.3s ease;
	cursor: pointer;
}

.ts-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 30px rgba(14, 134, 157, 0.28);
}

.ts-button:focus-visible {
	outline: 2px solid rgba(14, 134, 157, 0.25);
	outline-offset: 3px;
}