/*
  Gemeinsames Stylesheet für die Website gluecklich.jetzt
  Farbpalette und Typografie sind auf ein warmes, spirituelles Erscheinungsbild abgestimmt.
*/

/* Google Fonts import */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Open+Sans:wght@400;600&display=swap');

:root {
  --primary-color: #F7E7C7; /* sanftes Gold */
  --secondary-color: #4B3F72; /* warmes Violett */
  --accent-color: #d5a021; /* Gold für Buttons */
  --text-color: #333333;
  --background-color: #ffffff;
  --light-background: #fdf8f0;
}

body {
  margin: 0;
  font-family: 'Open Sans', sans-serif;
  color: var(--text-color);
  background-color: var(--background-color);
  line-height: 1.6;
}

header {
  background-color: var(--light-background);
  padding: 1rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #eee;
  /* Positionierung für das mobile Dropdown-Menü: macht nav ul relativ zum Header */
  position: relative;
}

.logo {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  color: var(--secondary-color);
  text-decoration: none;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1.5rem;
}

nav a {
  text-decoration: none;
  color: var(--secondary-color);
  font-weight: 600;
  transition: color 0.2s ease;
}

nav a:hover {
  color: var(--accent-color);
}

/* Hero-Bereich: neue Grafik mit goldenem Buch und Mondsichel */
.hero {
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('hero2.png') center/cover no-repeat;
  color: #fff;
  padding: 6rem 2rem;
  text-align: center;
}

.hero h1 {
  font-family: 'Playfair Display', serif;
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}

.hero p {
  max-width: 600px;
  margin: 0 auto 1.5rem;
  font-size: 1.2rem;
  margin-bottom: 2rem;
}

.btn-primary {
  background-color: var(--accent-color);
  color: #fff;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 4px;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

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

section {
  padding: 3rem 2rem;
}

section h2 {
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
  color: var(--secondary-color);
  margin-bottom: 1rem;
}

.features {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: space-between;
}

/*
  Feature-Karten: flexible Angebote auf Start- und Angebotsseiten.
  Die Karten haben eine Mindesthöhe, damit der Button unter dem Text bleibt und
  nicht mit dem Inhalt kollidiert. Auf schmalen Bildschirmen stapeln sie sich
  untereinander. Die Höhe wurde leicht erhöht, um mehr Raum für längere
  Beschreibungen zu schaffen.
*/
.feature {
  flex: 1 1 30%;
  background-color: var(--light-background);
  padding: 1.5rem;
  border-radius: 8px;
  border: 1px solid #eee;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
  /* erhöhte Mindesthöhe für gleichmäßige Ausrichtung und Platz für Button */
  min-height: 380px;
}

/* Bild in Feature-Karte */
.feature img {
  width: 80px;
  height: auto;
  border-radius: 6px;
  flex-shrink: 0;
}

.feature h3 {
  margin-top: 0;
  font-family: 'Playfair Display', serif;
  color: var(--secondary-color);
}

.feature p {
  margin-bottom: 0;
}

.about {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: center;
}

.about img {
  max-width: 300px;
  border-radius: 8px;
}

.about-text {
  flex: 1;
}

.testimonials {
  background-color: var(--light-background);
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}

.testimonial {
  margin-bottom: 1.5rem;
}

.testimonial strong {
  display: block;
  margin-top: 0.5rem;
  color: var(--secondary-color);
}

footer {
  background-color: var(--light-background);
  padding: 1.5rem 2rem;
  text-align: center;
  border-top: 1px solid #eee;
  font-size: 0.9rem;
}

/* Kontaktformular */
.contact-form {
  max-width: 600px;
  margin: 0 auto;
}

.contact-form label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 0.5rem;
  margin-bottom: 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-family: 'Open Sans', sans-serif;
}

.contact-form button {
  background-color: var(--accent-color);
  color: #fff;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.contact-form button:hover {
  background-color: #c8931b;
}

@media (max-width: 768px) {
  .features {
    flex-direction: column;
  }
  .feature {
    flex: 1 1 100%;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .feature img {
    width: 100px;
    margin-bottom: 1rem;
  }
  .about {
    flex-direction: column;
  }
  .about img {
    margin: 0 auto;
  }
}

/* Papier-Karte für Beispieltexte */
.paper-card {
  background-image: url('paper.png');
  background-size: cover;
  background-position: center;
  padding: 2rem;
  margin-bottom: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  color: #4b3f2d;
}

.paper-card h3 {
  margin-top: 0;
  font-family: 'Playfair Display', serif;
  color: #4b3f72;
}

/* Kapitel-Liste mit goldenen Sternen als Symbol */
.chapter-list {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}

.chapter-list li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: 0.5rem;
}

.chapter-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.3rem;
  width: 1.2rem;
  height: 1.2rem;
  background: url('star.png') no-repeat center/contain;
}

/* Layout für Wissensrubrik */
.knowledge-item {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-bottom: 3rem;
}

.knowledge-item img {
  width: 300px;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  flex-shrink: 0;
}

.knowledge-item .knowledge-text {
  flex: 1 1 300px;
}

/* Aktionsbereich für mehrere Buttons */
.actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-top: 1rem;
  flex-wrap: wrap;
}
.actions .btn-primary {
  margin-top: 0;
}

/* Seelen‑Kompass Teaser auf der Startseite */
.test-teaser {
  background-color: var(--light-background);
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 2rem;
  text-align: center;
  margin: 2rem 0;
}
.test-teaser h2 {
  margin-top: 0;
  font-family: 'Playfair Display', serif;
  color: var(--secondary-color);
  font-size: 2rem;
}
.test-teaser p {
  max-width: 600px;
  margin: 0 auto 1.5rem;
}

/* Quiz-Layout */
.quiz-question {
  margin-bottom: 1rem;
}
.quiz-question label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
}
.quiz-question .options {
  display: flex;
  gap: 0.5rem;
}
.quiz-question .options label {
  font-weight: normal;
}

/* Feature-Content: sorgt dafür, dass der Button am Ende steht */
.feature-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.feature-content p {
  flex-grow: 1;
}
.feature-content .btn-primary {
  margin-top: 1rem;
  align-self: flex-start;
}

/* Responsive Anpassungen */
@media (max-width: 600px) {
  /* Staple Buttons im Aktionsbereich untereinander auf sehr kleinen Bildschirmen */
  .actions {
    flex-direction: column;
    align-items: center;
  }
  .actions .btn-primary {
    width: 100%;
    margin-top: 0.5rem;
  }
}

/*
  Hamburger-Menü: mobile Navigation
  Auf kleinen Bildschirmen erscheint ein Menü-Icon. Bei Klick darauf klappt das Navigationsmenü aus.
*/
.menu-toggle {
  display: none;
  font-size: 2rem;
  cursor: pointer;
  color: var(--secondary-color);
}

@media (max-width: 768px) {
  nav ul {
    flex-direction: column;
    position: absolute;
    right: 0;
    top: 100%;
    background-color: var(--light-background);
    width: 220px;
    border: 1px solid #eee;
    display: none;
    padding: 1rem;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  }
  nav.active ul {
    display: block;
  }
  .menu-toggle {
    display: block;
  }
}