/* Design-System (aus den globalen Elementor-Klassen übernommen). Nicht pro Seite – gilt überall.
 * Reihenfolge = globale Elementor-Reihenfolge (spätere Klasse gewinnt). */

/* desktop */
.z-flush {
	min-width:0px;
	padding-block-start:0px;
	padding-block-end:0px;
	padding-inline-start:0px;
	padding-inline-end:0px;
}
.x-logo {
	overflow:hidden;
	position:relative;
	isolation: isolate;
&::after {
content: "";
position: absolute;
right: -60px;
top: 50%;
width: 440px;
height: 440px;
transform: translateY(-50%) rotate(-8deg);
background-color: var(--akzent, var(--ga_petrol));
opacity: 0.07;
-webkit-mask-image: url("../img/Sprachtherapie-Logo_bild.svg");
mask-image: url("../img/Sprachtherapie-Logo_bild.svg");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-position: center;
mask-position: center;
z-index: -1;
pointer-events: none;
}

}
.x-waves {
	/* === 1. SICHTBARKEIT STEUERN === */
/* 0% (unsichtbar) bis 100% (voll deckend) */
--wave-opacity: 5%;

/* === 2. MENGE DER WELLEN STEUERN === */
/* Halbiere die Werte für doppelt so viele Wellen im Container */
--wave-width: 40px;  /* Original war 80px */
--wave-height: 28px; /* Original war 56px */

/* Farb-Mix berechnet sich nun automatisch aus der Sichtbarkeit */
--wave-color: color-mix(in srgb, var(--akzent, var(--ga_petrol)) var(--wave-opacity), transparent);

background-repeat: repeat;
background-size: var(--wave-width) var(--wave-height);

/* Die Pixelwerte sind jetzt relativ (Prozent), sodass das Muster beim Verkleinern nicht bricht */
background-image: 
  radial-gradient(ellipse 25% 18% at 25% 100%, transparent 86%, var(--wave-color) 88%, var(--wave-color) 100%, transparent 103%), 
  radial-gradient(ellipse 25% 18% at 75% 0%, transparent 86%, var(--wave-color) 88%, var(--wave-color) 100%, transparent 103%);

}
.x-soundwaves {
	background-repeat: no-repeat; background-image: radial-gradient(circle at 100% 50%, transparent 0 58px, color-mix(in srgb, var(--akzent, var(--ga_petrol)) 20%, transparent) 58px 60px, transparent 60px 98px, color-mix(in srgb, var(--akzent, var(--ga_petrol)) 17%, transparent) 98px 100px, transparent 100px 138px, color-mix(in srgb, var(--akzent, var(--ga_petrol)) 14%, transparent) 138px 140px, transparent 140px 178px, color-mix(in srgb, var(--akzent, var(--ga_petrol)) 11%, transparent) 178px 180px, transparent 180px 218px, color-mix(in srgb, var(--akzent, var(--ga_petrol)) 8%, transparent) 218px 220px, transparent 220px 258px, color-mix(in srgb, var(--akzent, var(--ga_petrol)) 6%, transparent) 258px 260px, transparent 260px 298px, color-mix(in srgb, var(--akzent, var(--ga_petrol)) 4%, transparent) 298px 300px, transparent 300px);

}
.x-mesh {
	background-repeat: no-repeat; background-image: radial-gradient(at 0% 0%, color-mix(in srgb, var(--akzent, var(--ga_petrol)) 20%, transparent) 0, transparent 55%), radial-gradient(at 100% 0%, color-mix(in srgb, var(--ga_sand) 95%, transparent) 0, transparent 50%), radial-gradient(at 100% 100%, color-mix(in srgb, var(--ga_eis) 95%, transparent) 0, transparent 55%), radial-gradient(at 0% 100%, color-mix(in srgb, var(--ga_petrol_hell) 14%, transparent) 0, transparent 50%), radial-gradient(at 55% 45%, color-mix(in srgb, var(--ga_creme) 85%, transparent) 0, transparent 60%);

}
.x-circles {
	background-repeat: no-repeat; background-image: radial-gradient(circle at 4% 18%, color-mix(in srgb, var(--akzent, var(--ga_petrol)) 10%, transparent) 0 70px, transparent 71px), radial-gradient(circle at 11% 64%, color-mix(in srgb, var(--akzent, var(--ga_petrol)) 8%, transparent) 0 34px, transparent 35px), radial-gradient(circle at -3% 94%, color-mix(in srgb, var(--akzent, var(--ga_petrol)) 10%, transparent) 0 120px, transparent 121px), radial-gradient(circle at 97% 10%, color-mix(in srgb, var(--akzent, var(--ga_petrol)) 10%, transparent) 0 130px, transparent 131px), radial-gradient(circle at 89% 52%, color-mix(in srgb, var(--akzent, var(--ga_petrol)) 8%, transparent) 0 26px, transparent 27px), radial-gradient(circle at 100% 86%, color-mix(in srgb, var(--akzent, var(--ga_petrol)) 10%, transparent) 0 64px, transparent 65px);

}
.s-icon {
	height:auto;
	min-height:1em;
	display:flex;
	flex:0 0 auto;
	justify-content:center;
	align-items:center;
	align-self:stretch;& svg { display: block; }

}
.a-eis {
	--akzent: var(--ga_eis_rand); --akzent-soft: var(--ga_eis_hell);

}
.a-sand {
	--akzent: #D9CBB8; --akzent-soft: var(--ga_sand);

}
.a-dunkel {
	--akzent: var(--ga_petrol_dunkel); --akzent-soft: var(--ga_eis_hell);

}
.a-petrol {
	--akzent: var(--ga_petrol); --akzent-soft: var(--ga_eis);

}
.s-wrap {
	width:100%;
	max-width:var(--gs_wrap);
}
.s-gap-xl {
	gap:75px;
}
.s-gap-lg {
	gap:50px;
}
.s-gap-md {
	gap:30px;
}
.s-gap-sm {
	gap:10px;
}
.s-gap-xs {
	gap:5px;
}
.s-card {
	padding-block-start:30px;
	padding-block-end:30px;
	padding-inline-start:30px;
	padding-inline-end:30px;
	border-radius:var(--gs_radius);
	border-width:1px;
	border-color:var(--ga_eis_rand);
	border-style:solid;
	background-color:var(--ga_eis_hell);
	flex-direction:column;
	gap:var(--small);
	align-items:start;
}
.s-card:hover,.s-card:focus-visible {
	box-shadow:0px 11px 10px 2px rgba(19, 19, 19, 0.11);
}
.s-section {
	padding-block-start:75px;
	padding-block-end:75px;
	padding-inline-start:20px;
	padding-inline-end:20px;
}
.s-hero {
	padding-block-start:160px;
	padding-block-end:75px;
	padding-inline: 20px;

}
.b-secondary {
	width:auto;
	font-weight:600;
	color:var(--ga_petrol_dunkel);
	text-align:center;
	text-decoration:none;
	text-transform:uppercase;
	padding-block-start:10px;
	padding-block-end:10px;
	padding-inline-start:20px;
	padding-inline-end:20px;
	border-radius:var(--gs_radius_pill);
	border-width:0px;
	border-color:#62A8AF;
	border-style:solid;
	background-color:var(--ga_weiss);
	display:inline-flex;
	flex-direction:row;
	gap:var(--small);
	justify-content:center;
	align-items:center;
}
.b-secondary:hover,.b-secondary:focus-visible {
	color:var(--footer);
	border-color:var(--ga_petrol_hell);
	background-image:linear-gradient(180deg, rgba(255, 255, 255, 0) 22%,#25b8a60d 100%);
	background-repeat:repeat;
	background-attachment:scroll;
	background-size:auto auto;
	background-position:0% 0%;
	box-shadow:1px 3px 4px 0px rgba(0, 0, 0, 0.07);
	transform:translate3d(2px, -2px, 0px);
}
.b-primary {
	width:auto;
	font-weight:600;
	color:var(--ga_weiss);
	text-align:center;
	text-decoration:none;
	text-transform:uppercase;
	padding-block-start:10px;
	padding-block-end:10px;
	padding-inline-start:20px;
	padding-inline-end:20px;
	border-radius:var(--gs_radius_pill);
	border-width:0px;
	border-color:#2C6770;
	border-style:solid;
	background-color:var(--ga_petrol_dunkel);
	display:inline-flex;
	flex-direction:row;
	gap:var(--small);
	justify-content:center;
	align-items:center;
}
.b-primary:hover,.b-primary:focus-visible {
	border-color:#1E2A32;
	background-image:linear-gradient(180deg, rgba(0, 0, 0, 0) 20%,#0d1f2221 100%);
	background-repeat:repeat;
	background-attachment:scroll;
	background-size:auto auto;
	background-position:0% 0%;
	box-shadow:1px 3px 4px 0px rgba(0, 0, 0, 0.07);
	transform:translate3d(2px, -2px, 0px);
}
.x-bubble {
	overflow:visible;
	position:relative;&::after { content: ""; position: absolute; left: 36px; bottom: -14px; width: 28px; height: 15px; background: inherit; clip-path: polygon(0 0, 100% 0, 0 100%); pointer-events: none; }

}
.x-frame {
	position:relative;
	isolation: isolate; &::before { content: ""; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border-width: 0px; border-radius: inherit; background: inherit; opacity: 1; mix-blend-mode: normal; z-index: -1; pointer-events: none; } &::after { content: ""; position: absolute; inset: 14px -14px -14px 14px; border: 2px solid var(--akzent, var(--ga_petrol)); border-radius: inherit; z-index: -2; pointer-events: none; }

}
.x-label {
	position:relative;&::after { content: "SPRACHTHERAPIE"; position: absolute; left: 12px; bottom: 24px; transform: rotate(-90deg); transform-origin: left bottom; font-family: nunito, sans-serif; font-size: 11px; font-weight: 500; line-height: 1; letter-spacing: 3px; color: var(--akzent, var(--ga_petrol)); opacity: 0.8; pointer-events: none; white-space: nowrap; }

}
.x-tab {
	padding-inline-end:38px;
	border-radius:0px;
	clip-path:polygon(0 0, 100% 0, calc(100% - 18px) 100%, 0 100%);
}
.x-diagonal {
	background-image: linear-gradient(115deg, var(--akzent-soft, var(--ga_eis)) 0 52%, transparent 52.1%);

}
.x-bar {
	&::before { content: ""; position: static; top: auto; left: auto; display: block; width: 120px; height: 6px; border-width: 0px; border-radius: 50px; opacity: 1; mix-blend-mode: normal; background-color: var(--akzent, var(--ga_petrol)); margin-block-end: 24px; flex-shrink: 0; }

}
.c-weiss {
	color:var(--ga_weiss);
}
.c-eis-hell {
	color:var(--ga_eis_hell);
}
.c-eis {
	color:var(--ga_eis);
}
.c-sand {
	color:var(--ga_sand);
}
.c-creme {
	color:var(--ga_creme);
}
.c-petrol-dunkel {
	color:var(--ga_petrol_dunkel);
}
.c-petrol-hell {
	color:var(--ga_petrol_hell);
}
.c-petrol {
	color:var(--ga_petrol);
}
.c-grau {
	color:var(--ga_grau);
}
.c-text {
	color:var(--ga_text);
}
.c-tinte {
	color:var(--ga_tinte);
}
.t-italic {
	font-style:italic;
}
.t-script {
	font-weight:400;
}
.t-eyebrow {
	text-transform:uppercase;
}
.t-xsmall {
	font-weight:400;
}
.t-small {
	font-weight:400;
}
.t-normal {
	font-weight:400;
}
.h-medium {
	font-weight:600;
}
.h-large {
	font-weight:600;
}
.h-xlarge {
	font-weight:600;
}
.h-xxlarge {
	font-weight:600;
	letter-spacing:-0.25px;
}
.h-xxxlarge {
	font-weight:600;
	letter-spacing:-0.5px;
}
.icon_text {
	gap:10px;
}
.flexbox0 {
	padding:0px;
	margin-block-start:0px;
	margin-block-end:0px;
	margin-inline-start:0px;
	margin-inline-end:0px;
	gap:var(--small);
}
.text {
	font-family:var(--nunito);
}
.button_ablauf {
	padding-block-start:0px;
	padding-block-end:0px;
	padding-inline-start:20px;
	padding-inline-end:20px;
	border-radius:var(--large);
	background-color:var(--Prime1);
}
.w-gap-xs {
	margin-block-end:5px;
}
.w-gap-sm {
	margin-block-end:10px;
}
.w-gap-md {
	margin-block-end:30px;
}
.w-gap-lg {
	margin-block-end:50px;
}
.w-gap-xl {
	margin-block-end:75px;
}
.img_high {
	height:clamp(250px, 50vw, 550px);
}

/* laptop */
@media (max-width: 1366px) {
	.s-gap-xl {
		gap:60px;
	}
	.s-gap-lg {
		gap:44px;
	}
	.s-gap-md {
		gap:28px;
	}
	.s-gap-sm {
		gap:10px;
	}
	.s-gap-xs {
		gap:5px;
	}
	.s-card {
		padding-block-start:30px;
		padding-block-end:30px;
		padding-inline-start:30px;
		padding-inline-end:30px;
	}
	.s-section {
		padding-block-start:64px;
		padding-block-end:64px;
		padding-inline-start:20px;
		padding-inline-end:20px;
	}
	.s-hero {
		padding-block-start:160px;
		padding-block-end:64px;
		padding-inline: 20px;
	
	}
	.w-gap-md {
		margin-block-end:28px;
	}
	.w-gap-lg {
		margin-block-end:44px;
	}
	.w-gap-xl {
		margin-block-end:60px;
	}
}

/* tablet */
@media (max-width: 1024px) {
	.s-gap-xl {
		gap:44px;
	}
	.s-gap-lg {
		gap:36px;
	}
	.s-gap-md {
		gap:24px;
	}
	.s-gap-sm {
		gap:10px;
	}
	.s-gap-xs {
		gap:5px;
	}
	.s-card {
		padding-block-start:24px;
		padding-block-end:24px;
		padding-inline-start:24px;
		padding-inline-end:24px;
	}
	.s-section {
		padding-block-start:52px;
		padding-block-end:52px;
		padding-inline-start:16px;
		padding-inline-end:16px;
	}
	.s-hero {
		padding-block-start:160px;
		padding-block-end:52px;
		padding-inline: 16px;
	
	}
	.b-secondary {
		padding-block-start:12px;
		padding-block-end:12px;
		padding-inline-start:26px;
		padding-inline-end:26px;
	}
	.b-primary {
		padding-block-start:12px;
		padding-block-end:12px;
		padding-inline-start:26px;
		padding-inline-end:26px;
	}
	.x-diagonal {
		background-image: linear-gradient(170deg, var(--akzent-soft, var(--ga_eis)) 0 58%, transparent 58.1%);
	
	}
	.w-gap-md {
		margin-block-end:24px;
	}
	.w-gap-lg {
		margin-block-end:36px;
	}
	.w-gap-xl {
		margin-block-end:44px;
	}
}

/* mobile */
@media (max-width: 767px) {
	.x-logo {
		&::after { width: 260px; height: 260px; right: -50px; }
	
	}
	.x-circles {
		background-image: radial-gradient(circle at 0% 8%, color-mix(in srgb, var(--akzent, var(--ga_petrol)) 10%, transparent) 0 60px, transparent 61px), radial-gradient(circle at 100% 50%, color-mix(in srgb, var(--akzent, var(--ga_petrol)) 8%, transparent) 0 44px, transparent 45px), radial-gradient(circle at 4% 96%, color-mix(in srgb, var(--akzent, var(--ga_petrol)) 10%, transparent) 0 36px, transparent 37px);
	
	}
	.s-wrap {
		max-width:100%;
	}
	.s-gap-xl {
		gap:32px;
	}
	.s-gap-lg {
		gap:28px;
	}
	.s-gap-md {
		gap:20px;
	}
	.s-gap-sm {
		gap:10px;
	}
	.s-gap-xs {
		gap:5px;
	}
	.s-card {
		padding-block-start:20px;
		padding-block-end:20px;
		padding-inline-start:20px;
		padding-inline-end:20px;
	}
	.s-section {
		padding-block-start:40px;
		padding-block-end:40px;
		padding-inline-start:16px;
		padding-inline-end:16px;
	}
	.s-hero {
		padding-block-start:160px;
		padding-block-end:40px;
		padding-inline: 16px;
	
	}
	.b-secondary {
		padding-block-start:12px;
		padding-block-end:12px;
		padding-inline-start:24px;
		padding-inline-end:24px;
	}
	.b-primary {
		padding-block-start:12px;
		padding-block-end:12px;
		padding-inline-start:24px;
		padding-inline-end:24px;
	}
	.x-frame {
		&::after { inset: 8px -8px -8px 8px; }
	
	}
	.x-label {
		&::after { display: none; }
	
	}
	.w-gap-md {
		margin-block-end:20px;
	}
	.w-gap-lg {
		margin-block-end:28px;
	}
	.w-gap-xl {
		margin-block-end:32px;
	}
}