@charset "utf-8";
@import url('/assets/css/style.css');
@import url('/assets/css/nav.css');
@import url('/assets/css/form.css');
@import url('/assets/css/button.css');
@import url('/order/css/domaincheck.css');
@import url('/assets/css/slick.css');
@import url('/assets/css/slick-theme.css');
@import url('/assets/css/justified.css');
@import url('/assets/css/lightcase.css');
@import url('/assets/fontawesome/css/all.min.css');
@import url('/assets/css/coco.min.css');

/* Hier @font-face - Schriften einfügen */

@font-face {
	font-family: 'Figtree';
	font-style: normal;
	font-weight: 300 900;
	font-display: swap;
	src: url(/assets/fonts/Figtree.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Fester';
	font-style: normal;
	font-weight: 200;
	font-display: swap;
	src: url(/assets/fonts/Fester.woff2) format('woff2');
}

/* Grundeinstellungen */

*																					{ margin: 0; padding: 0; box-sizing: border-box; }
::selection																{ background: #9d2c79; color: #ffffff; /* WebKit/Blink Browsers */ }
::-moz-selection													{ background: #9d2c79; color: #ffffff; /* Gecko Browsers */ }

html								        							{ color: #282320; font-family: 'Figtree', sans-serif; font-size: 16px; font-weight: 300; line-height: 1.35; }

h1																				{ color: #e14d28; font-family: 'Fester', sans-serif; font-size: 2.5rem; font-weight: 700; margin: 0 0 2rem; }
h2																				{ font-size: 1.625rem; font-weight: 700; margin: 0 0 2rem; text-align: center; text-transform: uppercase; }
h2:after																	{ background: linear-gradient(110deg, #e14d28 0%, #e14d28 65%, #cd1150 65%, #cd1150 80%, #9d2c79 80%); border-radius: 0.5rem 0; content: ""; display: block; height: 0.5rem; margin: 0.5rem auto 0.75rem; transform: skew(-30deg); width: 4rem; }
h3																				{ color: #9d2c79; font-size: 1.75rem; font-weight: 500; letter-spacing: 0.5px; margin: 0 0 1.25rem; }
h4																				{ color: #cd1150; font-size: 1.675rem; font-weight: 500; margin: 0 0 2rem; }
h5																				{ font-size: 1.375rem; font-weight: 500; margin: 0 0 1rem; }


a																					{ break-inside: avoid; cursor: pointer; font-size: 1.25rem; text-decoration: none; }
button																		{ background: transparent; border: none; cursor: pointer; font-family: 'Figtree', sans-serif; font-size: 1.25rem; text-align: center; }
p																					{ break-inside: avoid; font-size: 1.25rem; margin: 0 0 1.6875rem; }
strong																		{ font-weight: 500; }

br																				{ }
hr																				{ border: none; margin: 0.5rem 0; }
.trenner																	{ clear: both; width: 100%; border: none; color: transparent; }
.line																			{ clear: both; width: 100%; border-top: 1px solid #cd1150; border-right: none; border-bottom: none; border-left: none; color: transparent; }
img																				{ display: block; max-width: 100%; }

ul																				{ font-size: 1.25rem; margin: 0 0 1rem; }
ul li																			{ list-style: none; }

section																		{ padding: 3rem 0; }	

main p a																	{ border-bottom: solid transparent 0.125rem; color: #cd1150; font-weight: 500; text-decoration: none; }
main p a:hover														{ border-bottom: solid #cd1150 0.125rem; color: #cd1150; text-decoration: none; }
main ul																		{ list-style: none; margin: 0 0 1.75rem; }
main ul li																{ margin: 0 0 0 1.5rem; }
main ul li:before													{ content: '◼'; color: #e14d28; display: inline-block; font-size: 1rem; margin: 0 0.5rem 0 -1.5rem; width: 1rem; }
main ul li a															{ color: #282320; }
main ul li a:hover												{ color: #cd1150; }

#matomo-opt-out														{ padding: 1.000rem; border: 1px solid #cd1150; }

/* Farben global */

.light																		{ background: #f8f3ec; /* background: url('/assets/img/site/waves.webp'); */ color: #282320; }
.dark																			{ background: #282320; color: #f8f3ec; }

.gradient																	{ background: #e14d28; background: linear-gradient(120deg, #e14d28 0%, #e14d28 80%, #cd1150 80%, #cd1150 90%, #9d2c79 90%);  }

.color-1																	{ background: #e14d28; color: #f8f3ec; }
.color-2																	{ background: #cd1150; color: #f8f3ec; }
.color-3																	{ background: #9d2c79; color: #f8f3ec; }

/* Abstände und Flexboxen */

.content																	{ margin: 0 auto; max-width: 1280px; width: 96%; }

.flex																			{ display: flex; flex-wrap: wrap; }
.flexalign																{ display: flex; flex-wrap: wrap; align-content: center; }
.flexstart																{ display: flex; flex-wrap: wrap; align-content: flex-start; }
.flexspace																{ display: flex; flex-wrap: wrap; justify-content: space-between; }
.flexaround																{ display: flex; flex-wrap: wrap; justify-content: space-around; }
.flexcenter																{ display: flex; flex-wrap: wrap; justify-content: center; }
.flexend																	{ display: flex; flex-wrap: wrap; justify-content: flex-end; }

.full																			{ width: 100%; }
.fourfifth																{ width: 80%; }
.threequarter															{ width: 75%; }
.twothird																	{ width: 66.666%; }
.half																			{ width: 50%; }
.third																		{ width: 33.333%; }
.quarter																	{ width: 25%; }
.fifth																		{ width: 20%; }
.sixth																		{ width: 16.666%; }
.tenth																		{ width: 10%; }

.space																		{ padding: 1.5rem; }


/* Allgemein */

.accent																		{ color: #cd1150; }
.bold																			{ font-weight: 700; }
.border																		{ border-image: linear-gradient(110deg, #e14d28 0%, #e14d28 80%, #cd1150 80%, #cd1150 90%, #9d2c79 90%); border-image-slice: 1; border-style: solid; border-width: 0.0625rem;}
.divider:after														{ background: linear-gradient(110deg, #e14d28 0%, #e14d28 80%, #cd1150 80%, #cd1150 90%, #9d2c79 90%); border-radius: 0.5rem 0 0.5rem 0; content: ""; display: block; height: 0.375rem; width: 100%; }
.centered																	{ margin: 0 auto; }
.note																			{ font-size: 0.875rem; }

.button																		{ background: linear-gradient(90deg, #e14d28 0%, #e14d28 70%, #cd1150 70%, #cd1150 85%, #9d2c79 85%); border-radius: 1rem 0; transform: skew(-30deg); max-width: 22rem; width: 80%; }
.button button														{ width: 100%; }
.button .btn-text													{ color: #ffffff; padding: 1rem; text-transform: uppercase; transform: skew(30deg)!important; }

.intro																		{ text-align: left; }
.intro p:last-child												{ margin: 0; }
.center																		{ text-align: center; }
.right																		{ text-align: right; }

.visual																		{ margin: 0 0 3rem; }

.back-to-top															{ background: #9d2c79; bottom: 0; color: #f8f3ec; font-size: 2rem; left: 50%; padding: 0.25rem 2rem; position: fixed; transform: translate(-50%, 0); z-index: 999; }

/* */

.top																			{ margin: 0 auto;width: 96%; }
.logo																			{  }
.logo img																	{ height: 10rem; margin: 0 auto; }


.services > a:nth-child(1) .tile					{ background: #e14d28; color: #f8f3ec; }
.services > a:nth-child(2) .tile					{ background: #cd1150; color: #f8f3ec; }
.services > a:nth-child(3) .tile					{ background: #9d2c79; color: #f8f3ec; }
.services .tile														{ cursor: pointer; height: 100%; min-height: 15rem; padding: 20% 1rem; transition: 0.5s all ease; }
.services .space														{ height: 100%; }
.services .tile:hover											{ transform: scale(1.1); transition: 0.5s all ease; }
.services .tile .title										{ display: block; font-size: 1.375rem; margin: 0 0 1rem; text-transform: uppercase; }
.services .tile .description							{ font-size: 1.125rem; }

.feature																	{ cursor: default; padding: 2rem 1rem; min-height: 15rem; transition: 0.5s all ease; text-align: center; }
.feature .icon														{ color: #cd1150; display: block; font-size: 3rem; margin: 0 0 2rem; }
.feature .title														{ display: block; font-size: 1.75rem; font-weight: 500; margin: 0 0 1rem; text-transform: uppercase; }
.feature .description											{ font-size: 1.125rem; }

.contact a.icon														{ color: #9d2c79; margin: 0 1rem 0; }
.contact a.icon:hover											{ border-bottom: none; color: #f8f3ec; }

.references .title												{ color: #cd1150; font-size: 1.375rem; font-weight: 500; margin: 0 0 2rem; }
.references .entry .location							{ color: #282320; font-size: 1rem; font-weight: 500; text-transform: uppercase; }
.references .entry p											{ font-size: 1rem; }
.references .entry a											{ border-bottom: 0.125rem solid transparent; color: #cd1150; font-size: 1rem; font-weight: 500; text-transform: uppercase; }
.references .entry a:hover								{ border-bottom: 0.125rem solid #cd1150; color: #cd1150; }
.references .tags													{ margin: 2rem 0 1rem; }
.references .tags span										{ border: 0.0625rem solid #cd1150; color: #cd1150; cursor: default; display: inline-block;  margin: 0 0 0.25rem; padding: 0.5rem 0.625rem; }

.entry																		{  }
.entry .headline													{ font-size: 1.675rem; font-weight: 500; margin: 0 0 2rem; text-align: center; }
.entry .headline:after										{ background: linear-gradient(90deg, #e14d28 0%, #e14d28 70%, #cd1150 70%, #cd1150 85%, #9d2c79 85%); content: ""; display: block; height: 0.125rem; margin: 0.75rem auto; width: 100%; }
.entry .details > span										{ display: block; margin: 0 0 0.5rem; }
.entry .price															{ font-size: 1.675rem; font-weight: 500; margin: 2rem 0 1rem; text-align: center; }
.entry .price:before											{ background: linear-gradient(90deg, #e14d28 0%, #e14d28 70%, #cd1150 70%, #cd1150 85%, #9d2c79 85%); content: ""; display: block; height: 0.125rem; margin: 0.75rem auto; width: 100%; }
.entry .info															{ display: block; font-size: 0.875rem; line-height: 1.5;}

.domains																	{ }
.domains .head														{ background: #e14d28!important; color: #ffffff; font-weight: 500; text-align: right; text-transform: uppercase; }
.domains .head .accent										{ color: #f8f3ec; text-align: right; }
.domains > div:hover											{ background: #f8f3ec; }
.domains .ending													{ color: #cd1150; font-weight: 700; }
.domains .price														{ font-weight: 500; text-align: right; }

.services .entry:not(.entry:last-child):after
{ background: linear-gradient(110deg, #e14d28 0%, #e14d28 65%, #cd1150 65%, #cd1150 80%, #9d2c79 80%); border-radius: 0.5rem 0; content: ""; display: block; height: 0.5rem; margin: 1.5rem auto; transform: skew(-35deg); width: 4rem; }
.services .entry a												{ border-bottom: 0.125rem solid transparent; color: #cd1150; font-size: 1rem; font-weight: 500; text-transform: uppercase; }
.services .entry a:hover									{ border-bottom: 0.125rem solid #cd1150; color: #cd1150; }
.services .entry a.icon										{ margin: 0 0.675rem 0 0; }
.services .entry a.icon:hover							{ border-bottom: none; color: #e14d28; }

.card img																	{ margin: 0 0 2rem; }
.card a																		{ border-bottom: 0.125rem solid transparent; color: #cd1150; font-size: 1rem; font-weight: 500; text-transform: uppercase; }
.card a:hover															{ border-bottom: 0.125rem solid #cd1150; color: #cd1150; }

.legal																		{ padding: 1rem; }
.legal a																	{ color: #f8f3ec; display: inline-block; margin: 0 1rem; }
.legal a:hover														{ color: #ffffff; }
.est																			{ color: #f8f3ec; font-size: 0.875rem; padding: 1rem; }





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

	.sixth											{ width: 33.333%; }

}

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

	.threequarter .quarter			{ width: 33.333%; }

}

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

	.threequarter								{ width: 60%; }
	.twothird										{ width: 70%; }
	.threequarter .third,
	.half .third,
	.third											{ width: 33.333%; }
	.quarter										{ width: 50%; }
	.fifth											{ width: 25%; }

}

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

	.half												{ width: 100%; }
	.threequarter								{ width: 100%; }
	.twothird										{ width: 100%; }
	.threequarter .third,
	.third											{ width: 100%; }
	.half .third								{ width: 33.333%; }

}

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

	.quarter										{ width: 50%; }
	.fifth											{ width: 33.333%; }
	.sixth											{ width: 33.333%; }

	.intro											{ column-count: 1; column-gap: 3rem; }

	.tile												{ padding: 15% 1rem; min-height: 10rem; }

}

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

	.threequarter								{ width: 100%; }
	.twothird										{ width: 100%; }
	.third											{ width: 100%; }
	.half .third								{ width: 33.333%; }
	.quarter										{ width: 100%; }
	.fifth											{ width: 50%; }
	.sixth											{ width: 50%; }

}