/*
Theme Name: Uncode Child
Description: Child theme for Uncode theme
Author: Undsgn™
Author URI: http://www.undsgn.com
Template: uncode
Version: 1.0.0
Text Domain: uncode
*/


/* --- Content
	
	
	
	
*/


/* --- Tests */
.page .uncell.single-block-padding {
	border-radius: 6px;
x	box-shadow: 0px 0px 20px rgba(0,0,0,0.2);
}

.page .single-block-padding {
	padding: 22px 27px;
	outline: 0px dashed orange;
}

h1, h2, h3, h4, h5, h6, p {
	cursor: default;
}

.page p {
	line-height: 155%;
} 

a.wplab--link-internal {
	border-bottom: 0px dotted #aaa;
	padding: 0.25em 0.5em 0.2em 0.5em;
	background-color: #fafafa;
	border-radius: 3px;
	transition: ease 300ms;
}
a.wplab--link-internal:before {
	content: "› ";
}
a.wplab--link-internal:hover {
	background-color: #eee;
}

a.wplab--link-external {
	border-bottom: 0px dotted #aaa;
	padding: 0.25em 0.5em 0.2em 0.5em;
	background-color: #fafafa;
	border-radius: 3px;
	transition: ease 300ms;
}
a.wplab--link-external:after {
	content: " ›";
}
a.wplab--link-external:hover {
	background-color: #eee;
}


/* --- External Links automatically */
a:not[href*="meiio.net"] {
	border-bottom: 1px dotted orange !important;
	background-color: orange !important;
}


/* --- Text Helper */
h1:not(:first-child) {
	color: red !important;
}
h1:not(:first-child)::after {
	content: " (Doppelte h1!)";
}


/* --- Scrollbar UI */
html, body * {
	scrollbar-width: thin;
	scrollbar-color: #ffffff #cf5015;
	-webkit-scrollbar-color: #ffffff #cf5015;
}


/* --- Breakpoints */
/* Breakpoints:
	Smartphone | Tablet
	569px | 570px
	
	Tablet | Desktop
	959px | 960px
	
	Additional optional breakpoint:
	Desktop | Desktop XL
	1399px | 1400px
*/

/* Desktop XL */
/* Desktop */
/* Tablet */
/* Tablet Portrait */
/* Tablet Landscape*/
/* Tablet + Smartphone */
/* Smartphone */

/* Breakpoints WPBakery Page Builder -- uncode:
	XS
	- 576 -- 570
	SM
	- 768 -- x
	MD
	- 992 -- 960
	LG
	- 1200 -- x
	XL
	- 1400 -- x
	XXL
*/


/* Desktop XL */
@media screen (min-width: 1400px) {
  
}

/* Desktop = LG + XL + XXL */
@media screen (min-width: 960px) {
  
}

/* Tablet = SM + MD */
@media screen (min-width: 570px) and (max-width: 959px) {
  
}

/* Tablet Portrait */

/* Tablet Landscape*/

/* Tablet + Smartphone = XS + SM + MD */
@media screen (max-width: 959px) {
  
}

/* Smartphone = XS */
@media screen (max-width: 569px) {
  
}


/* --- Show div classes inside page content */
/*
article div {
	outline: 1px solid rgba(0, 0, 0, 0.02);
	transition: all 400ms ease;
	position: relative;
}
article div:after {
	content: attr(class);
	position: absolute;
	display: none;
	top: 5px;
	left: 5px;
	max-width: 150px;
	background: rgba(0, 0, 0, 0.8);
	color: rgba(255, 255, 255, 0.8);
	font-size: 12px;
	padding: 2px 4px;
	border-radius: 3px;
	z-index: 1000;
	pointer-events: none;
}

article div:hover {
	outline: 1px solid rgba(200, 40, 40, 0.8);
}
article div:hover::after {
	background: rgba(0, 0, 0, 1);
	color: rgba(255, 255, 255, 1);
	display: block;
}
*/



/* --- Show Breakpoints */

.dev-breakpoints-width-is-xxl { display: none; }
.dev-breakpoints-width-is-xl { display: none; }
.dev-breakpoints-width-is-lg { display: none; }
.dev-breakpoints-width-is-md { display: none; }
.dev-breakpoints-width-is-sm { display: none; }
.dev-breakpoints-width-is-xs { display: none; }

@media screen and (max-width: 569px) {
	.dev-breakpoints-width-is-smartphone { display: block; }
	.dev-breakpoints-width-is-tablet { display: none; }
	.dev-breakpoints-width-is-desktop { display: none; }
}
@media screen and (min-width: 570px) and (max-width: 959px) {
	.dev-breakpoints-width-is-smartphone { display: none; }
	.dev-breakpoints-width-is-tablet { display: block; }
	.dev-breakpoints-width-is-desktop { display: none; }
}
@media screen and (min-width: 960px) {
	.dev-breakpoints-width-is-smartphone { display: none; }
	.dev-breakpoints-width-is-tablet { display: none; }
	.dev-breakpoints-width-is-desktop { display: block; }
}


/* uncode: Breite des Satzspiegels = z.B. 1080px */
/* Beite wird ab Breakpoint MD/LG = 960px gesetzt: 
  	.limit-width { max-width: 1280px; }
	
	Hack: Weiterer Breakpoint bei 1400px –> Breite = 1280px
*/

@media (min-width: 1400px) {
	.limit-width {
		max-width: 1280px;
		margin: auto;
	}
}



/* ---  Grid flow test -- -- -- */
.dev--col-text-test {
	outline: 1px solid rgba(0, 0, 0, 0.2);
}

/* Desktop XL */
@media (min-width: 1440px) {
	.dev--col-text-test { 
		column-count: 4; 
		column-gap: 36px;
	}
}

/* Desktop */
@media (min-width: 960px) and (max-width: 1439px) {
	.dev--col-text-test { 
		column-count: 3; 
		column-gap: 36px;
	}
}

/* Tablet */
@media (min-width: 570px) and (max-width: 959px) {
	.dev--col-text-test { 
		column-count: 2; 
		column-gap: 36px;
	}
}

/* Smartphone */
@media (max-width: 569px) {
	.dev--col-text-test { column-count: 1; }
}



/* ---  Grid flow test mit Feature Liste #1 -- -- -- */
/* Das div wird innen in Spalten umbrochen */
.dev--col-featurelist-test {
	background-color: rgba(0, 0, 0, 0.1);
	border-radius: 18px;
	padding: 18px;
	padding: 36px 36px 36px 27px;
	outline: 0px solid rgba(0, 0, 0, 0.2);
}

.dev--col-featurelist-test ul {
	list-style: none;
	padding: 0;
	position: relative;
	outline: 0px solid rgba(0, 0, 0, 0.2);
}

.dev--col-featurelist-test ul li {
	line-height: 1.33;
	margin-left: 0;
	padding: 0.5rem 0 0.5rem 0.0rem;
	position: relative;
	display: inline-block;
	width: 100%;
	
	border-top:    1px solid gray;
	border-bottom: 1px solid gray;
	
	margin-top: -1px;
	
	outline: 0px solid rgba(0, 0, 0, 0.2);
}

.dev--col-featurelist-test ul li::before {
	content: '';
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: orange;
	position: absolute;
	top: 0.9rem;
	left: -1rem;
}


.dev--col-featurelist-test {
	column-gap: 36px !important;
}

/* Desktop XL */
@media (min-width: 1440px) {
	.dev--col-featurelist-test { 
		column-count: 4; 
	}
}

/* Desktop */
@media (min-width: 960px) and (max-width: 1439px) {
	.dev--col-featurelist-test { 
		column-count: 3; 
	}
}

/* Tablet */
@media (min-width: 570px) and (max-width: 959px) {
	.dev--col-featurelist-test { 
		column-count: 2; 
	}
}

/* Smartphone */
@media (max-width: 569px) {
	.dev--col-featurelist-test { column-count: 1; }
}



/* ---  Grid flow test mit Feature Liste #2 -- -- -- */
/* Das div wird innen in Spalten umbrochen */
.dev--col-featurelist-test-2 {
	background-color: rgba(0, 0, 0, 0.1);
	border-radius: 18px;
	padding: 36px;
	outline: 0px solid rgba(0, 0, 0, 0.2);
}

.dev--col-featurelist-test-2 ul {
	list-style: none;
	padding: 0;
	padding-left: 0 !important;
	padding-bottom: 20px !important;
	position: relative;
	overflow: visible !important;
	outline: 0px dotted rgba(0, 0, 0, 0.2);
}

.dev--col-featurelist-test-2 ul li {
	line-height: 1.33;
	margin-left: 0;
	padding: 0.5rem 0 0.5rem 1.25rem;
	position: relative;
	display: inline-block;
	width: 100%;
	
	border-top:    1px solid gray;
	border-bottom: 1px solid gray;
	margin-top: -1px;
	translate: 0 1px;
	/* Hack, damit auf dem iPhone Landscape die Trennlinien oben am Kopf der Spalten angezeigt werden */
	/* Variante: Bei iPhone Landscape auf 1 Kolumne stellen */
	
	outline: 0px solid rgba(0, 0, 0, 0.2);
}



.dev--col-featurelist-test-2 ul li::before {
	content: '';
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: orange;
	position: absolute;
	top: 0.9rem;
	top: calc(50% - 4px);
	left: 0rem;
}


.dev--col-featurelist-test-2 ul {
	column-gap: 36px !important;
}

/* Desktop XL */
@media (min-width: 1440px) {
	.dev--col-featurelist-test-2 ul { 
		column-count: 4; 
	}
}

/* Desktop */
@media (min-width: 960px) and (max-width: 1439px) {
	.dev--col-featurelist-test-2 ul { 
		column-count: 3; 
	}
}

/* Tablet */
@media (min-width: 570px) and (max-width: 959px) {
	.dev--col-featurelist-test-2 ul { 
		column-count: 2; 
	}
}

/* Smartphone */
@media (max-width: 569px) {
	.dev--col-featurelist-test-2 ul { column-count: 1; }
}