/* #region GLOBAL STYLES */

body {
  font-family: Arial, sans-serif;
  margin: 0;
  line-height: 1.6;
  background-color: #f5f5f5;
  color: #333;
}

/* Zentrierte Container */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px;
}

/* #endregion GLOBAL STYLES */

/* #region HEADER + INNERER KASTEN */

/* Header-Hintergrund über volle Breite */
.header {
  background: #E1D9CB;
  padding: 32px 32px 0;   /* oben 32, rechts 32, unten 0, links 32 */
}

/* Innerer Kasten */
.header > .container {
  max-width: none;        /* Limit aufheben */
  width: 100%;
  margin: 0;
  box-sizing: border-box; /* padding in Breite einrechnen */

  /* Kasten-Design */
  background: linear-gradient(to bottom, #F5F3EF 0%, #E1D9CB 100%);
  border-radius: 48px 48px 0 0;
  padding: 32px 32px 30px;
  height: 580px;

  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

/* #endregion HEADER + INNERER KASTEN */

/* #region NAVIGATION / MENÜ */

/* Basis-Navigation */
.menu {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: flex-start; /* Items standardmäßig links */
  align-self: flex-start;      /* hebt Parent-Zentrierung auf (cross-axis) */
  width: 100%;                 /* damit margin-left:auto wirken kann */
  margin-top: 0;
}

.menu a {
  text-decoration: none;
  color: #333;
  font-weight: 500;
  padding: 8px 0;
}

.menu a:hover {
  color: #ff9800;
}

/* Logo wie gehabt */
.menu .logo img {
  height: 40px;
  width: auto;
  display: block;
}

/* Nur wenn ein Link ein Button sein soll */
.menu a.btn-primary {
  margin-left: auto; /* schiebt den Button ganz nach rechts */
  background-color: #609b67;
  color: white;
  padding: 10px 18px;
  border-radius: 6px;
  font-weight: bold;
  transition: background 0.3s;
}

.menu a.btn-primary:hover {
  background-color: #2e5032;
}

.hero {
  display: flex;
  align-items: center;   /* vertikale Ausrichtung */
  gap: 40px;             /* Abstand zwischen Text und Bild */
  margin-top: 40px;      /* Abstand zur NavBar */
}

.hero-text {
  flex: 2;               /* nimmt 2/3 der Breite ein */
}

.hero-text h1 {
  font-size: 2.5rem;
  margin-bottom: 20px;
}

.hero-text h2 {
  font-size: 1.5rem;
  margin-bottom: 30px;
  font-weight: normal;
  color: #555;
}

.hero-image {
  flex: 1;               /* nimmt 1/3 der Breite ein */
}

.hero-image img {
  width: 100%;           /* passt sich der Spaltenbreite an */
  height: auto;
  border-radius: 12px;   /* optional: abgerundete Ecken */
}

/* #endregion NAVIGATION / MENÜ */

/* #region BUTTON STYLES (allgemein) */

.btn-primary {
  background-color: #609b67;
  color: white;
  padding: 12px 25px;
  border-radius: 5px;
  text-decoration: none;
  font-weight: bold;
  transition: background 0.3s;
}

.btn-primary:hover {
  background-color: #2e5032;
}

/* #endregion BUTTON STYLES (allgemein) */

/* #region SECTIONS: BENEFITS */

.benefits {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin: 40px 0;
}

.benefit {
  flex: 1 1 250px;
  background: white;
  margin: 10px;
  padding: 20px;
  text-align: center;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* #endregion SECTIONS: BENEFITS */

/* #region CALL TO ACTION */

.cta {
  background-color: #ff9800;
  text-align: center;
  padding: 50px 20px;
  color: white;
}

/* #endregion CALL TO ACTION */

/* #region FOOTER */
.footer {
  background: #333;
  color: white;
  text-align: center;
  padding: 15px 0;
}

/* #endregion FOOTER */