/*@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Fjalla+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Merriweather&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cabin&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bitter&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Muli&display=swap');


// <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 100 to 900

.roboto-condensed-hero {
  font-family: "Roboto Condensed", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

/* Allgemeine Stile */
body {
    font-family: 'Lato', sans-serif;
    background-color: #988c7e; /*#fdf6e3;*/ /* Sanftes Pastell */
	text-shadow: 3px 3px 4px #999;
    color: #333;
    margin: 0;
    padding: 0;
}

/* Container */
.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Header */
header {
	background-image: 
    linear-gradient(hsla(32,30%,70%,0.9) 0%, hsla(215,30%,70%,0) 50%, hsla(32,30%,70%,0.9) 100%), 
    linear-gradient(to right, hsla(32,30%,80%,0.8) 30%, white 50%, hsla(32,30%,80%,0.8) 70%);
    /*background-color: #988c7e;*/
    padding: 20px 0;
    text-align: center;
	text-shadow: 3px 3px 4px #777;
}

header h1 {
    font-size: 2.5rem;
    color: #333;
}

header p {
    font-size: 1.2rem;
    color: #555;
}

header nav ul {
    list-style: none;
    padding: 0;
}

header nav ul li {
    display: inline-block;
    margin: 0 15px;
}

header nav ul li a {
    color: #333;
    text-decoration: none;
    font-size: 1rem;
}

header nav ul li a:hover {
    text-decoration: underline;
}

/* Hero Section */
.hero {
    /* background-color: #efe7e1; */
	background-image:linear-gradient( #988c7e, #efe7e1);
    padding: 60px 0;
	font-family: "Roboto Condensed", sans-serif;
    text-align: center;
}

.hero h2 {
    font-size: 2rem;
    color: #2e7d32;
}

.hero p {
    font-size: 1.2rem;
    color: #666;
    margin: 20px 0;
}

.hero-image {
    max-width: 100%;
    height: auto;
    margin-top: 20px;
	-webkit-box-shadow: 10px 10px 50px grey;
-moz-box-shadow: 10px 10px 50px grey;
box-shadow: 10px 10px 50px grey;
}

/* Features Section */
.features {
    /*background-color: #ffffff;
	
	e4bc99     hsl(28, 58%, 75%) */
	background-image: 
    linear-gradient(hsla(28, 58%, 75%,0.9) 0%, hsla(215,30%,70%,0) 50%, hsla(28,30%,70%,0.9) 100%), 
    linear-gradient(to right, hsla(28,30%,80%,0.8) 30%, white 50%, hsla(28,30%,80%,0.8) 70%);
	
    padding: 60px 0;
	font-family: 'Libre Baskerville', sans-serif;
    text-align: center;
}

.features h2 {
    font-size: 2rem;
    color: #333;
}

.feature-item {
    margin-top: 40px;
}

.feature-item h3 {
    font-size: 1.5rem;
    color: #388e3c;
}

.feature-item p {
    font-size: 1rem;
    color: #555;
}

/* Footer */
footer {
    background-color: #333;
    color: #fff;
    padding: 20px 0;
	font-family: 'Fjalla One', sans-serif;
    text-align: center;
}

footer a {
    color: #f4d03f;
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}