/*FONTS*/

/*font-family: 'Lora', serif;
font-family: 'Open Sans', sans-serif;
font-family: "Marhey", sans-serif;Marhey*/


@font-face {
  font-family: 'Open Sans Variable';
  src: url('fonts/Open_Sans/OpenSans-VariableFont_wdth,wght.ttf') format('truetype-variations');
  font-weight: 300 800;       /* Open Sans Gewichtsbereich */
  font-stretch: 75% 100%;    /* Open Sans Breitenbereich (wdth) */
  font-style: normal;
  font-display: swap;
}

/* 2. Kursiver Stil (Italic) */
@font-face {
  font-family: 'Open Sans Variable';
  src: url('fonts/Open_Sans/OpenSans-Italic-VariableFont_wdth,wght.ttf') format('truetype-variations');
  font-weight: 300 800;
  font-stretch: 75% 100%;
  font-style: italic;        /* Weist diese Datei Kursiv-Anfragen zu */
  font-display: swap;
}

@font-face {
  font-family: 'Lora Variable';
  src: url('fonts/Lora/Lora-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 400 700;       /* Lora deckt meist den Bereich 400 bis 700 ab */
  font-style: normal;
  font-display: swap;
}

/* 2. Lora Italic */
@font-face {
  font-family: 'Lora Variable';
  src: url('fonts/Lora/Lora-Italic-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 400 700;
  font-style: italic;        /* Aktiviert diese Datei bei kursivem Text */
  font-display: swap;
}

@font-face {
    font-family: 'Marhey';
    src: url('fonts/Marhey/Marhey-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900; /* Variable Font Bereich */
    font-style: normal;
    font-display: swap; /* Empfohlen für bessere Ladezeiten */
}

/*ROOT-VARIABLEN*/



:root {
	
    --step--3: clamp(0.651rem, 0.6104rem + 0.2034vi, 0.768rem);
     --step--2: clamp(0.7813rem, 0.7191rem + 0.3109vi, 0.96rem);
     --step--1: clamp(0.9375rem, 0.8462rem + 0.4565vi, 1.2rem);
     --step-0: clamp(1.125rem, 0.9946rem + 0.6522vi, 1.5rem);
     --step-1: clamp(1.35rem, 1.1674rem + 0.913vi, 1.875rem);
     --step-2: clamp(1.62rem, 1.3683rem + 1.2587vi, 2.3438rem);
     --step-3: clamp(1.944rem, 1.6012rem + 1.7142vi, 2.9297rem);
	 --step-3a: clamp(1.728rem, 1.4037rem + 1.2971vw, 2.4414rem);
	 
     --step-4: clamp(2.3328rem, 1.8704rem + 2.3118vi, 3.6621rem);
	 --step-4a: clamp(1.296rem, 0.7585rem + 2.8665vw, 3.0518rem);
	 --step-4a: clamp(1.8144rem, 1.4356rem + 2.0202vw, 3.0518rem);
     --step-5: clamp(2.7994rem, 2.1808rem + 3.0927vi, 4.5776rem);
     --step-6: clamp(3.3592rem, 2.5374rem + 4.1092vi, 5.722rem);
     --step-7: clamp(4.0311rem, 2.9453rem + 5.4287vi, 7.1526rem);
     --step-8: clamp(4.8373rem, 3.41rem + 7.1364vi, 8.9407rem);
     --step-9: clamp(5.8048rem, 3.9365rem + 9.3411vi, 11.1759rem);
     --step-10: clamp(6.9657rem, 4.5295rem + 12.1811vi, 13.9698rem);
	  
	  
	  --mainColor:#ccb594;
	  --titleColor: #a2927b;
	  --navigationColor:#392509;
	  --footerBackground:rgba(183, 177, 170, 0.16);
	  --borderImage: conic-gradient(var(--mainColor))fill 0//0 100vw;
	  --backgroundColor:#f8f8f6;
	  --textColor:#555;
	  --sreenBreite: 60rem;
	  --scrollTop:50vh;
	  
}

html,body {max-width: 100dvw}
html {height:100%; width:100dvw; font-size:100%; font-size:16px; scroll-behavior: smooth; background:var(--backgroundColor); scroll-padding-top:var(--navHeight,5rem);}

body {background:var(--backgroundColor);min-height:100vh;  font-family: 'Open Sans', sans-serif; line-height:1.5; margin:0; padding:0;  color:var(--textColor);  font-size:1rem; overflow-X:hidden;
	 display:grid; gap:0; 
	 grid-template-columns: minmax(1.5rem,1fr) minmax(auto,var(--sreenBreite)) minmax(1.5rem,1fr); 
	 
	 grid-template-areas: ". header ."
	 	 					". navigation . "
							".  spezial  ."
	 						". main ."
							". footer . ";

	  align-items:start;
	  grid-template-rows:auto auto auto auto auto auto auto;}


*, *:before, *:after {box-sizing:border-box; margin:0; padding:0;  quotes: "»" "«"; hyphens:auto;}


img {width:100%; display:block; height:auto;}

h2, h3 {font-family: 'Lora', serif; color:var(--titleColor);}

p {font-size:var(--step-0); line-height:1.2; margin:0 0 1em; text-align:justify;}

a {color:var(--titleColor); text-decoration:underline .08em; transition:all 0.5s ease-in-out;}
a:hover {color:var(--mainColor);}

header {grid-area:header;}
nav {grid-area:navigation;}
div.background {grid-area:spezial;}
main {grid-area:main; }
footer {grid-area:footer;}

::selection {background:var(--mainColor); color:white;}


/*HEADER*/
header, nav {border-image: var(--borderImage)}


	
	header {display:grid; gap:var(--step-0);justify-items:center; padding:var(--step-1) 0; z-index:10;

		h1 {font-size:var(--step-4); /*font-family: "Marhey", sans-serif; */ font-family:'Lora', serif;  color:white; font-weight:200; hyphens:none; text-wrap:balance; text-align:center; line-height:.9; font-variant:small-caps; }
		h2 {font-size:var(--step-2); font-weight:400; color:var(--navigationColor);font-family: 'Open Sans', sans-serif; line-height:1; margin-top:-.25em;}
	}/*ENDE HEADER*/
		
		
	nav {position:sticky; top:0; display:grid; justify-content:center; z-index:100; padding:var(--step-0) 0;
		ul { display:grid; grid-template-columns:auto auto auto; grid-row:auto; list-style-type:none;
			li {
				a {hyphens:none; color:white; font-size:var(--step-0); padding:.5em .5em; text-decoration:none; font-family:'Lora', serif; font-weight:600; transition:all .5s ease-in-out; font-variant:small-caps;
			
				&:hover {color:#6a440f;}
				&.active {color:#6a440f;}
				
				
				}/*Ende a*/
				
			
			}/*ENDE li*/
		
		}/*ENDE UL*/
	
	
		}/*ENDE NAV*/
		
	
		
	div.background {display:grid; grid-template-rows:repeat(5, minmax(30px,100%));margin-top:-1px;;
		
		img {grid-row:1/5; z-index:20;}
		
		div.backgroundColor {grid-row:1/3; z-index:10;border-image: conic-gradient(var(--mainColor))fill 0//0 100vw; }
 
	}/*Ende background*/
	


/*Main und Sections*/ 
	
	main {display:grid; gap:var(--step-3); gap:var(--step-2);}


/*section Angebot*/
	section#Angebot{ display:grid; gap:1rem; margin-top:var(--step-2);
		h2 {justify-self:center;  font-size:var(--step-3);}
		
		
		figure {display:grid; grid-template-columns: repeat(auto-fit, minmax(min(20rem,100%), 1fr));gap:1rem;}
		h3 {font-family:'Lora', serif; font-size:var(--step-2); color:var(--textColor); line-height:2.5;}
		p {margin:0 0 var(--step-1);}
		
		
		
		}/*ENDE SECTION ANGEBOT*/


/*section UeberMich*/
	section#UeberMich{ display:grid; gap:1rem;
		h2 {justify-self:center;  font-size:var(--step-3);}
		figure { display:grid; grid-template-columns:1fr 2fr; gap:1rem;

		}
		
		
		
		
	}/*ENDE SECTION ANGEBOT*/

/*section Kontakt*/
	
	section#Kontakt{ display:grid; gap:1rem;
		h2 {justify-self:center;  font-size:var(--step-3);}
		p {font-size:var(--step--1); padding:.2rem; margin-top:1em;}
		
		form {
			fieldset {display:grid; grid-template-columns:1fr; grid-template-rows:auto; gap:.75em; border:none; max-width:30em;
				div {}
				
				div.test {display:grid; grid-template-columns:auto 1fr; grid-gap:1rem; color:var(--titleColor);}
				div.submitbox {display:grid; grid-template-columns:1fr 1fr; grid-gap:1rem; margin-top:1rem;}
				
				div.submitbox {display:grid; grid-template-columns:1fr 1fr; grid-gap:1rem; margin-top:1rem;}

				input, textarea {padding:.2rem; width:100%; border:1px dotted var(--mainColor); border-radius:.25rem; display:grid; background-color:white; height:2.5rem; font-size:1rem; color:var(--titleColor);}
				textarea {height:5rem;}
				input::placeholder, textarea::placeholder {font-size:1rem; font-family: 'Open Sans', sans-serif; color:#777;/*rgba(65,105,225,1)*/ align-self:end;}
				label.none {display:none;}

				input, label { display:flex; align-items:center; justify-content:center; }
				input.absenden, input.abbrechen {background:white; cursor:pointer;text-align:center; color:var(--titleColor);font-size:1.1rem;}

				
			
			
				}/*END FILDSET*/
				
		}/**END FORM*/
		


	#output {background:var(--footerBackground);  margin:2rem auto;}
	#output.output {border:.2rem dotted var(--mainColor);}
	
	}/*ENDE SECTION Kontakt*/




/*Footer*/ 

footer { display:grid;justify-content:center; margin:2rem 0; gap:var(--step-1); border-image: var(--borderImage); padding:2rem 0; margin-bottom:0;
	
	 h2 {font-size:var(--step-4); /*font-family: "Marhey", sans-serif; */ font-family:'Lora', serif;  color:white; font-weight:200; hyphens:none; text-wrap:balance; text-align:center; line-height:.9; font-variant:small-caps; }
	 h3{ justify-self:center; text-align:center; font-size:var(--step-2); font-weight:400; color:var(--navigationColor);font-family: 'Open Sans', sans-serif; line-height:1; margin-top:-.25em;}
	
	
	
}