/* @override 
	https://start.pincgestaltet.ch/wp-content/themes/bb-theme-child/style.css?* */



/*
Theme Name: Beaver Builder Child Theme
Theme URI: https://www.wpbeaverbuilder.com
Version: 1.0
Description: An example child theme that can be used as a starting point for custom development.
Author: The Beaver Builder Team
Author URI: https://www.fastlinemedia.com
template: bb-theme
*/

/* Add your custom styles here...Remember to change the Version number above! */ 


/* @group Font Reset
------------------------------------------------------------- */

html {
	-webkit-font-smoothing: antialiased!important;
	-moz-osx-font-smoothing: grayscale!important;
	text-rendering: optimizeLegibility!important;
	font-size: 16px;
}

/* @end */



/* @group Custom Properties - General
------------------------------------------------------------- */

/* Generated with https://www.fluid-type-scale.com */
/* Config: https://www.fluid-type-scale.com/calculate?minFontSize=16&minWidth=350&minRatio=1.2&maxFontSize=24&maxWidth=3840&maxRatio=1.728&steps=sm%2Cbase%2Cmd%2Clg%2Cxl%2Cxxl&baseStep=base&prefix=font-size&useContainerWidth=false&includeFallbacks=false&useRems=true&remValue=16&decimals=2&previewFont=Inter&previewText=Almost+before+we+knew+it%2C+we+had+left+the+ground&previewWidth=3840 */

:root {
	/* 16px / 24px */
	--spacing-0-25: calc(var(--spacing-1) * 0.25);
	--spacing-0-5: calc(var(--spacing-1) * 0.5);
	--spacing-1: clamp(1rem, 0.23vi + 0.95rem, 1.5rem);
	--spacing-1-5: calc(var(--spacing-1) * 1.5);
	--spacing-2: calc(var(--spacing-1) * 2);
	--spacing-3: calc(var(--spacing-1) * 3);
	--spacing-4: calc(var(--spacing-1) * 4);
	--spacing-5: calc(var(--spacing-1) * 5);
	
	--row-spacing-y: var(--spacing-3);
	--row-spacing-x: var(--spacing-1);
	--col-spacing-x: var(--spacing-1);
	--module-spacing-y: var(--spacing-1);
	--module-spacing-x: var(--spacing-1);
	
	/* 16px / 24px */
	--font-size-base: clamp(1rem, 0.23vi + 0.95rem, 1.5rem);
	
	--font-size-sm: clamp(1rem, 0.23vi + 0.95rem, 1.5rem);
	--font-size-md: clamp(1rem, 0.23vi + 0.95rem, 1.5rem);
	--font-size-lg: 	clamp(1rem, 0.23vi + 0.95rem, 1.5rem);
	--font-size-xl: 	clamp(1rem, 0.23vi + 0.95rem, 1.5rem);
	--font-size-xxl: clamp(1rem, 0.23vi + 0.95rem, 1.5rem);
	--font-size-xxxl: clamp(1rem, 0.23vi + 0.95rem, 1.5rem);
	
	--line-height-base: 1.4;
	
	--line-height-sm: 1.4;
	--line-height-md: 1.4;
	--line-height-lg: 1.4;
	--line-height-xl: 1.4;
	--line-height-xxl: 1.4;
	--line-height-xxxl: 1.4;

	--font-family: Helvetica, Arial, sans-serif;
	--font-weight: 400;
	--font-style: normal;
	--letter-spacing: 0;
	--word-spacing: 0;
		
	--color-black: #000000;
	--color-white: #ffffff;
	--color-accent: rgba(255, 255, 255, 1);
}

	@media all and (max-width: 1500px) {

	}
	
	@media all and (max-width: 1200px) {

	}
	
	@media all and (max-width: 900px) {

	}
	
	@media all and (max-width: 600px) {

	}

/* @end */



/* @group Typography - General
------------------------------------------------------------- */

body {
	font-family: var(--font-family);
	font-weight: var(--font-weight);
	font-style: var(--font-style);
	font-size: var(--font-size-base);
	line-height: var(--line-height-base);
}

p,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
p.lead,
p.small {
	font-family: var(--font-family);
	font-weight: var(--font-weight);
	font-style: var(--font-style);
	letter-spacing: var(--letter-spacing);
	word-spacing: var(--word-spacing);
}

p {
	font-size: var(--font-size-base);
	line-height: var(--line-height-base);
}

h1 {
	font-size: var(--font-size-xxl);
	line-height: var(--line-height-xxl);	
}

h2 {
	font-size: var(--font-size-xl);
	line-height: var(--line-height-xl);
}

h3 {
	font-size: var(--font-size-lg);
	line-height: var(--line-height-lg);
}

h4 {
	font-size: var(--font-size-md);
	line-height: var(--line-height-md);
}

h5 {
	font-size: var(--font-size-base);
	line-height: var(--line-height-base);
}

h6 {
	font-size: var(--font-size-sm);
	line-height: var(--line-height-sm);
}

p.lead {
	font-size: var(--font-size-md);
	line-height: var(--line-height-md);
}

p.small {
	font-size: var(--font-size-sm);
	line-height: var(--line-height-sm);
}

/* @end */



/* @group Typography - Spacing
------------------------------------------------------------- */

p,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
p.lead,
p.small {
	margin: var(--spacing-1) 0 0 0;
}

h1 {
	margin: var(--spacing-2) 0 0 0;
}

h2 {
	margin: var(--spacing-2) 0 0 0;
}

h3 {
	margin: var(--spacing-2) 0 0 0;
}

p:first-child,
h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child,
ul:first-child,
ol:first-child,
p.lead:first-child,
p.small:first-child {
	margin-top: 0;
}

/* @end */



/* @group Typography - Lists
------------------------------------------------------------- */

.fl-rich-text > ul {
	margin: var(--spacing-1) 0 0 0;
	padding: 0;
	display: table;
}

.fl-rich-text > ul li {
	list-style: none;
    display: table-row;
}

.fl-rich-text > ul li::before {
	content: "–";
	padding: var(--spacing-0-5) var(--spacing-1) 0 0;
	display: table-cell;
}

.fl-rich-text > ul li:first-child::before {
	padding-top: 0;
}

/* @end */



/* @group Typography - Links
------------------------------------------------------------- */

.fl-rich-text > * > a {
	position: relative;
	text-decoration: none;
	color: inherit;
}

.fl-rich-text > * > a::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background-color: currentColor;
}

/* @end */



/* @group Layout - Posts Full Width Fix
------------------------------------------------------------- */

.single-post.fl-builder .fl-page-content .container { width: 100%; max-width: 100%; padding-right: 0; padding-left: 0; }
.single-post.fl-builder .fl-page-content .row {	margin-right: 0; margin-left: 0; }
.single-post.fl-builder .fl-page-content .fl-content { margin: 0; padding-right: 0; padding-left: 0; }

/* @end */



/* @group Layout - Row
------------------------------------------------------------- */

.fl-row {
	max-width: 100%;
}

.fl-row.fl-row-full-width .fl-row-content.fl-row-full-width {
	max-width: 100%;
}

.fl-row.fl-row-full-width .fl-row-content.fl-row-fixed-width {
	max-width: 960px;
}

/* @end */



/* @group Layout - Row Content Wrap
------------------------------------------------------------- */

.fl-row-content-wrap {
	padding: var(--row-spacing-y) var(--row-spacing-x);
}

.fl-row.fl-row-bg-none + .fl-row.fl-row-bg-none .fl-row-content-wrap {
	padding-top: 0;
	margin-top: calc( -1 * var(--module-spacing-y) );
}

.fl-row.fl-row-bg-color + .fl-row.fl-row-bg-color .fl-row-content-wrap {
	padding-top: 0;
	margin-top: calc( -1 * var(--module-spacing-y) );
}

	@media all and (max-width: 600px) {
		:root {
			--row-spacing-x: 0;
		}
	}

/* @end */



/* @group Layout - Columns
------------------------------------------------------------- */

.fl-col-group {
	margin-left: calc(-1 * var(--col-spacing-x));
	margin-right: calc(-1 * var(--col-spacing-x));
}

.fl-col-group > .fl-col > .fl-col-content {
	margin-left: var(--col-spacing-x);
	margin-right: var(--col-spacing-x);
}

.fl-col-group-nested {
	margin-left: calc(-1 * var(--col-spacing-x));
	margin-right: calc(-1 * var(--col-spacing-x));
}

.fl-col-group-nested > .fl-col > .fl-col-content {
	margin-left: var(--col-spacing-x);
	margin-right: var(--col-spacing-x);
}

	@media all and (max-width: 600px) {
		:root {
			--col-spacing-x: 0;
		}
	}

/* @end */



/* @group Layout - Module
------------------------------------------------------------- */

.fl-module {
	margin: var(--module-spacing-y) var(--module-spacing-x);
}

/* @end */


/* @group Module – Button
------------------------------------------------------------- */

/*

.fl-builder-content a.fl-button,
.fl-builder-content a.fl-button:visited {
	border-radius: 0px;
	font-size: var(--font-size-base);
	font-weight: var(--font-weight);
	line-height: var(--line-height-base);
	padding: var(--spacing-0-5) var(--spacing-1);
	background: var(--color-black);
  	color: var(--color-white);
  	border: 1px solid var(--color-black);
}

.fl-builder-content a.fl-button:hover {
	
}

.fl-builder-content a.fl-button *,
.fl-builder-content a.fl-button:visited * {
	color: var(--color-white);
}

.fl-builder-content .fl-button:active {
	top: 0px;
	transform: translateY(1px);
}       

.fl-builder-content .fl-button i {
	font-size: var(--font-size-base);
	height: auto;
	margin-right: 8px;
	vertical-align: middle;
	width: auto;
}

.fl-builder-content .fl-button i.fl-button-icon-before {
	margin-left: 0;
	margin-right: var(--spacing-0-25);
}

.fl-builder-content .fl-button i.fl-button-icon-after {
	margin-left: var(--spacing-0-25);
	margin-right: 0;
}

.fl-builder-content  .fl-button.fl-button-icon-animation i {
	width: auto;
	opacity: 0;
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
}

.fl-builder-content .fl-button.fl-button-icon-animation:hover i {
	opacity: 1;
}

.fl-builder-content .fl-button.fl-button-icon-animation i.fl-button-icon-before {
	margin-right: 0;
}

.fl-builder-content .fl-button.fl-button-icon-animation:hover i.fl-button-icon-before {
	margin-right: var(--spacing-0-25);
	margin-left: -10px;
}

.fl-builder-content .fl-button.fl-button-icon-animation i.fl-button-icon-after {
	margin-left: 0;
}

.fl-builder-content .fl-button.fl-button-icon-animation:hover i.fl-button-icon-after {
	margin-left: var(--spacing-0-25);
	margin-right: -10px;
}

*/









/* Moderne Button-Styles mit Flexbox */
.fl-builder-content a.fl-button,
.fl-builder-content a.fl-button:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-0-25);
	
	/* Styling */
	border-radius: 0px;
	font-size: var(--font-size-base);
	font-weight: var(--font-weight);
	line-height: var(--line-height-base);
	padding: var(--spacing-0-5) var(--spacing-1);
	
	/* Colors */
	background: var(--color-black);
	color: var(--color-white);
	border: 1px solid var(--color-black);
	
	/* Transitions */
	transition: color 0.3s ease, background-color 0.3s ease;
	text-decoration: none;
	cursor: pointer;
	
	/* Verhindert Text-Auswahl */
	user-select: none;
	-webkit-user-select: none;
}

.fl-builder-content a.fl-button:hover {
	background: var(--color-white);
	color: var(--color-black);
	border-color: var(--color-black);
}

.fl-builder-content a.fl-button:active {
	transform: translateY(1px);
}

/* Text und Icon Farben */
.fl-builder-content a.fl-button *,
.fl-builder-content a.fl-button:visited * {
	color: var(--color-white);
	transition: color 0.3s ease;
}

.fl-builder-content a.fl-button:hover * {
	color: var(--color-black);
}

/* Icons */
.fl-builder-content .fl-button i {
	font-size: var(--font-size-base);
	height: auto;
	width: auto;
	vertical-align: middle;
	flex-shrink: 0;
}

/* Icon-Positionen - werden durch Flexbox gap gehandhabt */
.fl-builder-content .fl-button i.fl-button-icon-before {
	order: -1;
	margin: 0;
}

.fl-builder-content .fl-button i.fl-button-icon-after {
	order: 1;
	margin: 0;
}

/* Animierte Icons - Ein-/Ausblenden bei Hover */
.fl-builder-content .fl-button.fl-button-icon-animation i {
	opacity: 0;
	transition: opacity 0.3s ease;
	width: 0;
	margin: 0;
}

.fl-builder-content .fl-button.fl-button-icon-animation:hover i {
	opacity: 1;
	width: auto;
}

.fl-builder-content .fl-button.fl-button-icon-animation:hover i.fl-button-icon-before {
	margin-right: var(--spacing-0-25);
}

.fl-builder-content .fl-button.fl-button-icon-animation:hover i.fl-button-icon-after {
	margin-left: var(--spacing-0-25);
}

/* Responsive Design */
@media (max-width: 768px) {
	.fl-builder-content a.fl-button {
		padding: var(--spacing-0-75) var(--spacing-1-25);
		font-size: calc(var(--font-size-base) * 0.9);
	}
}


/* @end */