/* alegreya-sc-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Alegreya SC';
  font-style: normal;
  font-weight: 400;
  src: url('./fonts/alegreya-sc-v26-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url('./fonts/inter-v20-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  src: url('./fonts/inter-v20-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/******************************************************************************/
/*  Reset styles															  */
/******************************************************************************/

html,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,
del,dfn,em,img,ins,kbd,q,s,samp,
small,strike,sub,sup,tt,var,
b,u,i,center,
dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,canvas,details,embed, 
figure,figcaption,footer,header,hgroup, 
menu,nav,output,ruby,section,summary,
time,mark,audio,video 
{
	border:0px;
	margin:0px;
	padding:0px;
	vertical-align:baseline;
}

/******************************************************************************/
/*  Base styles																  */
/******************************************************************************/

*, *::before, *::after {
  box-sizing: border-box;
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* https://bdlibraries.com/app/font-clamp-generator/?srsltid=AU7gw4Xuo0UI2Ml2WU6u0J3kEckvCnGjuqF0DFEm3eHN_nrd0cXpsvtV */
/* @link https://utopia.fyi/space/calculator?c=360,20,1.618,1240,60,1.618,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
  --font-size-0: clamp(1.0625rem, 0.7708rem + 0.7292vw, 1.5rem); /*18/24*/
  --font-size-1: clamp(1.3125rem, 1.0625rem + 0.625vw, 1.6875rem); /*21/27*/
  --font-size-2: clamp(1.5rem, 1.1667rem + 0.8333vw, 2rem); /*21/32*/
  --font-size-3: clamp(1.5rem, 0.75rem + 1.875vw, 2.625rem); /*24/42*/
  --font-size-4: clamp(2.625rem, 1.375rem + 3.125vw, 4.5rem); /*42/72*/
  --font-size-6: clamp(3rem, 1rem + 5vw, 6rem); /*48/96*/
  --font-size-7: clamp(3.25rem, 0.75rem + 6.25vw, 7rem); /*52/112*/

	--space-3xs: clamp(0.3125rem, 0.0568rem + 1.1364vw, 0.9375rem);
	--space-2xs: clamp(0.625rem, 0.1136rem + 2.2727vw, 1.875rem);
	--space-xs: clamp(0.9375rem, 0.1705rem + 3.4091vw, 2.8125rem);
	--space-s: clamp(1.25rem, 0.2273rem + 4.5455vw, 3.75rem);
	--space-m: clamp(1.875rem, 0.3409rem + 6.8182vw, 5.625rem);
	--space-l: clamp(2.5rem, 0.4545rem + 9.0909vw, 7.5rem);
	--space-xl: clamp(3.75rem, 0.6818rem + 13.6364vw, 11.25rem);

	--color-1: #ffffff;
	--color-2: #2f3237;
	--color-3: #bd9b16;

}
.contact a {
	color: var(--color-2);
}
.foot,
.foot a {
	color: var(--color-1);
	text-decoration: none;
}
.foot a:not(.active):hover {
	opacity: 0.5;
}
.foot a.active {
	color: var(--color-3);
}
.flex {
	display: flex;
	justify-content: space-between;
}

body {
	margin:0px;
	padding:0px;
	background-color: var(--color-1);
	font-family: 'Inter', sans-serif;
	font-weight: 400;
	font-size: var(--font-size-0);
	line-height: 1.4;
	color: var(--color-2);
}
section {
/*	min-height: 100vh;
	min-height: 100dvh;*/
	display: grid;
	align-content: center;
}
section.head {
	min-height: inherit;
	height: 50vh;
	height: 50dvh;
}
.head {
	position: relative;
	background-size: cover;
	background-position: center center;
}
.hero-1 {
	background-image: url(../img/hero.jpg);
}
.hero-2 {
	background-image: url(../img/hero2.jpg);
}
.hero-3 {
	background-image: url(../img/hero3.jpg);
}
.head:after {
	content: "";
	position: absolute;
	display: block;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: var(--color-1);
	opacity: .75;
	backdrop-filter: blur(100px);
}
.head .row {
	position: relative;
	z-index: 5;
}

.row {
	width: 80%;
	margin: 0 auto;
}
section.foot {
	background: #2f3237;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #2f3237, #000000);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #2f3237, #000000); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
	padding: var(--space-xs) 0;
}
.legal section.head,
.legal section.text,
.legal section.foot {
	min-height: inherit;
}
.legal section.text {
	padding: var(--space-m) 0;
	background-color: var(--color-1);
}
.legal section.head {
	padding: var(--space-m) 0;
}
.grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-m);
}
.facts .grid {
	grid-template-columns: 1fr 1fr 1fr 1fr;
}
.contact .grid {
	grid-template-columns: 1fr 3fr;
	align-items: center;
}
.contact img {
	display: block;
	max-width: 100%;
}
section.facts,
section.head,
section.leistungen,
section.osteopathie,
section.contact {
	padding: var(--space-l) 0;
}
section.facts {
	position: relative;
}
section.typo {
	padding: var(--space-xl) 0;
	font-size: var(--font-size-7);
	font-weight: 400;
	line-height: 1;
	color: var(--color-3);
	text-align: center;
	font-family: 'Alegreya SC', serif;
	position: relative;
}
section.facts:before,
section.facts:after,
section.typo:before,
section.typo:after {
	content:"";
	display: block;
	position: absolute;
	left: 0;
	bottom: 0;
	height: 2px;
	width: 100%;
	background: #2f3237;
	background: linear-gradient(90deg,rgba(67, 67, 67, 1) 0%, rgba(67, 67, 67, 1) 50%, rgba(252, 163, 17, 1) 50%, rgba(252, 163, 17, 1) 100%);
}
section.facts:before,
section.typo:before {
	top: 0;
}

.logo {
    font-family: 'Alegreya SC', serif;
    font-size: var(--font-size-6);
    line-height: 1;
    letter-spacing: 5px;
    text-align: center;
    position: relative;
}
.logo:after {
    content: "";
    display: block;
    position: absolute;
    height: 4px;
    width: 20%;
    background: var(--color-3);
    bottom: -15px;	
    left: 40%;
}
a[href^="tel:"],
.logo a {
	color: var(--color-2);
	text-decoration: none;
}

.tel {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' width='36' height='36' viewBox='0 0 36 36'%3E%3Cpath fill='%23bd9b16' d='M35.999 28.477h-.013a2.39 2.39 0 0 0-1.157-2.047l-6.928-5.312a2.46 2.46 0 0 0-3.205-.214l-1.938 1.916a1.63 1.63 0 0 1-1.215.543c-.553 0-1.338-.688-1.338-.688s-5.077-4.169-7.015-6.808c.019-.012-.652-.819-.652-1.372 0-.494 2.503-3.114 2.503-3.114.312-.402.502-.901.502-1.45a2.4 2.4 0 0 0-.719-1.711L9.438 1.389a2.4 2.4 0 0 0-.339-.43A2.46 2.46 0 0 0 7.363.25C4.091.25 0 4.043 0 8.722a8.34 8.34 0 0 0 .832 3.618l-.027.027c4.923 9.667 13.105 17.736 22.909 22.59l.027-.025a8.6 8.6 0 0 0 3.669.818c4.744 0 8.591-4.034 8.591-7.262z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  padding-left: calc(var(--font-size-0) + 6px);
  background-size: var(--font-size-0) auto;
  background-position: 0 2px;
}

section.typo .btn.btn-tel {
	background: var(--color-3) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' width='36' height='36' viewBox='0 0 36 36'%3E%3Cpath fill='%23ffffff' d='M35.999 28.477h-.013a2.39 2.39 0 0 0-1.157-2.047l-6.928-5.312a2.46 2.46 0 0 0-3.205-.214l-1.938 1.916a1.63 1.63 0 0 1-1.215.543c-.553 0-1.338-.688-1.338-.688s-5.077-4.169-7.015-6.808c.019-.012-.652-.819-.652-1.372 0-.494 2.503-3.114 2.503-3.114.312-.402.502-.901.502-1.45a2.4 2.4 0 0 0-.719-1.711L9.438 1.389a2.4 2.4 0 0 0-.339-.43A2.46 2.46 0 0 0 7.363.25C4.091.25 0 4.043 0 8.722a8.34 8.34 0 0 0 .832 3.618l-.027.027c4.923 9.667 13.105 17.736 22.909 22.59l.027-.025a8.6 8.6 0 0 0 3.669.818c4.744 0 8.591-4.034 8.591-7.262z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	padding-left: calc(var(--font-size-2) + var(--space-xs));
	background-size: var(--font-size-2) auto;
	background-position: var(--font-size-2) center;
}
section.typo .btn.btn-tel:hover {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' width='36' height='36' viewBox='0 0 36 36'%3E%3Cpath fill='%23bd9b16' d='M35.999 28.477h-.013a2.39 2.39 0 0 0-1.157-2.047l-6.928-5.312a2.46 2.46 0 0 0-3.205-.214l-1.938 1.916a1.63 1.63 0 0 1-1.215.543c-.553 0-1.338-.688-1.338-.688s-5.077-4.169-7.015-6.808c.019-.012-.652-.819-.652-1.372 0-.494 2.503-3.114 2.503-3.114.312-.402.502-.901.502-1.45a2.4 2.4 0 0 0-.719-1.711L9.438 1.389a2.4 2.4 0 0 0-.339-.43A2.46 2.46 0 0 0 7.363.25C4.091.25 0 4.043 0 8.722a8.34 8.34 0 0 0 .832 3.618l-.027.027c4.923 9.667 13.105 17.736 22.909 22.59l.027-.025a8.6 8.6 0 0 0 3.669.818c4.744 0 8.591-4.034 8.591-7.262z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	padding-left: calc(var(--font-size-2) + var(--space-xs));
	background-size: var(--font-size-2) auto;
	background-position: var(--font-size-2) center;
}

h2,
h3 {
	font-weight: 400;
}
strong {
	font-weight: 700;
}
section.typo .buttons {
	display: flex;
	font-family: 'Inter', sans-serif;
	font-size: var(--font-size-2);
	justify-content: center;
	gap: var(--space-xs);
	margin-top: var(--space-s);
}
.contact .btn,
section.typo .btn,
section.typo .btn-out {
	text-decoration: none;
	padding: var(--space-2xs);
	display: inline-block;
	text-decoration: none;
}
.contact .btn {
	padding: var(--space-3xs);
	margin-top: var(--space-xs);
}
.contact .btn,
section.typo .btn {
	transition: background .3s ease-out;
	background: var(--color-3);
	color: var(--color-1);
	border: 1px solid var(--color-3);
}
.contact .btn:hover,
section.typo .btn:hover {
	background: var(--color-1);
	color: var(--color-3);
	border: 1px solid var(--color-3);
}

section.typo .btn-out {
	transition: background .3s ease-out;
	border: 1px solid var(--color-3);
	background: var(--color-1);
	color: var(--color-3);
}
section.typo .btn-out:hover {
	background: var(--color-3);
	color: var(--color-1);
}

h1 {
	font-size: var(--font-size-3);
	color: var(--color-2);
	text-align: center;
	margin: 30px 0 0 0;
}
a.active {
	text-decoration: none;
}
.legal .text h1 {
	text-align: left;
	margin: 0 0 var(--space-xs) 0;
}
h2, h3 {
	color: var(--color-3);
	font-size: var(--font-size-3);
	margin: 0 0 var(--space-3xs) 0;
}
h4 {
	font-size: var(--font-size-1);
	color: var(--color-3);
	margin: var(--space-xs) 0 var(--space-3xs) 0;
}
h5 {
	color: var(--color-3);
	margin: var(--space-2xs) 0 var(--space-3xs) 0;
}
.legal h2 {
	margin: 0 0 var(--space-xs) 0;
	font-size:var(--font-size-4);
}
ul + p,
p + ul,
li + li,
p + p {
	margin: var(--space-3xs) 0 0 0;
}
p + h3 {
	margin: var(--space-xs) 0 var(--space-3xs) 0;
}
ul {
	list-style: none;
	padding-left: var(--space-2xs);
}

.legal main a {
	color: var(--color-3);
}
.legal main a:hover {
	text-decoration: none;
}
ul li {
	position: relative;
}
ul li:before {
	/*content: "\2765";*/
	content: "–";
	position: absolute;
	left: calc(var(--space-2xs) * -1);
	top: 0;
	color: var(--color-3);
}

.facts-icon {
	margin-bottom: var(--space-2xs);
}


@media screen and (max-width:1620px) {
.row {
	width: 90%;
}
}

/******************************************************************************/
/*  Content-Animation                                                        */
/*  1) Header (.fade-in-element): Fade-in beim Laden der Seite              */
/*  2) Restlicher Content: fährt beim Scrollen leicht von unten rein         */
/*     (animation-timeline: view() – Scroll-Driven Animations)              */
/*  3) Facts-Items zusätzlich zeitlich versetzt                             */
/******************************************************************************/

@keyframes fade-up {
	from {
		opacity: 0;
		transform: translateY(1.5rem);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes fade-up-1 {
	0%, 5%   { opacity: 0; transform: translateY(1.5rem); }
	22%      { opacity: 1; transform: translateY(0); }
	100%     { opacity: 1; transform: translateY(0); }
}
@keyframes fade-up-2 {
	0%, 15%  { opacity: 0; transform: translateY(1.5rem); }
	32%      { opacity: 1; transform: translateY(0); }
	100%     { opacity: 1; transform: translateY(0); }
}
@keyframes fade-up-3 {
	0%, 25%  { opacity: 0; transform: translateY(1.5rem); }
	42%      { opacity: 1; transform: translateY(0); }
	100%     { opacity: 1; transform: translateY(0); }
}
@keyframes fade-up-4 {
	0%, 35%  { opacity: 0; transform: translateY(1.5rem); }
	52%      { opacity: 1; transform: translateY(0); }
	100%     { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: no-preference) {

	/* 1) On load: Kopfbereich (Logo, H1) */
	.fade-in-element {
		animation: fade-up .8s ease-out both;
	}
	.fade-in-element.logo         { animation-delay: .05s; }
	h1.fade-in-element            { animation-delay: .15s; }

	/* Erste Section (i. d. R. ohne Scrollen mit sichtbar) ebenfalls On-Load */
	section.leistungen .grid-item {
		animation: fade-up .8s ease-out both;
	}
	section.leistungen .grid-item:nth-child(1) { animation-delay: .25s; }
	section.leistungen .grid-item:nth-child(2) { animation-delay: .35s; }

	/* 2) Restlicher Content: fährt beim Scrollen rein */
	@supports (animation-timeline: view()) {

		section.facts .grid-item,
		section.osteopathie h2,
		section.osteopathie .grid-item,
		section.typo blockquote,
		section.contact .grid-item {
			animation: fade-up linear both;
			animation-timeline: view();
			/* "cover" bezieht sich auf die gesamte Sichtbarkeitsdauer des Elements
			   (vom Auftauchen bis zum Verlassen des Viewports) statt nur auf die
			   sehr kurze Entry-Phase – bei kompakten Elementen (Footer-Zeile,
			   Zitat) war die Entry-Phase zu kurz, um sichtbar zu sein. */
			animation-range: cover 0% cover 40%;
		}

		/* 3) Facts-Items versetzt: eigene Keyframes pro Item über die volle
		   Sichtbarkeitsdauer (cover), da die Entry-Phase bei so kompakten
		   Elementen zu kurz für einen spürbaren Versatz ist. */
		section.facts .grid-item {
			animation-name: fade-up-1;
			animation-range: cover 0% cover 100%;
		}
		section.facts .grid-item:nth-child(2) { animation-name: fade-up-2; }
		section.facts .grid-item:nth-child(3) { animation-name: fade-up-3; }
		section.facts .grid-item:nth-child(4) { animation-name: fade-up-4; }
	}
}



@media screen and (max-width:1280px) {
	.facts .grid {
		grid-template-columns: 1fr 1fr;
	}
	.contact .grid {
		grid-template-columns: 1fr 2fr;
	}

}

@media screen and (max-width:1024px) {
	.osteopathie .grid,
	.leistungen .grid {
		display: flex;
		flex-flow: column;
		gap: var(--space-s);
	}
	section.head {
		height: 33.333vh;
		height: 33.333dvh;
	}
	.facts-icon img {
		width: 96px;
		height: auto;
	}

}


@media screen and (max-width:760px) {
	section.typo .buttons {
		display: flex;
		flex-flow: column;
	}
	section.typo {
    padding: var(--space-l) 0;
  }

}


@media screen and (max-width:640px) {
	.facts-icon img {
		width: 64px;
		height: auto;
	}
	.contact .grid {
		grid-template-columns: 1fr 1fr;
	}
	.contact .btn {
		padding: 10px 20px;
	}

}

@media screen and (max-width:540px) {
	.contact .grid,
	.facts .grid {
		display: flex;
		flex-flow: column;
		gap: var(--space-s);
	}
	.contact .grid .grid-item {
		width: 100%;
	}
}
@media screen and (max-width:460px) {
	.foot .flex {
		flex-flow: column;
		gap: var(--space-2xs);
	}

}