/*
  Allgemeine Gestaltung für die Website von Constantin Consulting.
  Das Farbschema basiert auf einem dunklen Rotton und hellen Akzenten
  und greift die Farbwelt des über 20 Jahre alten Logos modern auf. Die
  Schriftwahl ist schlicht und lesbar. Das Layout ist responsive und
  funktioniert auf Desktops, Tablets und Smartphones.
*/

:root {
  --primary-color: #8b1e23; /* dunkles Rot für starke Akzente */
  --secondary-color: #d32f2f; /* helleres Rot für Hovereffekte */
  --accent-color: #f4c542; /* warme Gelbnuance als feiner Akzent, inspiriert vom klassischen Logo */
  --light-color: #ffffff; /* Weiß für Hintergrundflächen und Texte auf dunklem Grund */
  --dark-color: #1a1a1a; /* sehr dunkles Grau für Footer */
  --text-color: #333333; /* Standardtextfarbe */
  --bg-color: #f7f7f7; /* Heller Hintergrund für Abschnitte */
  --max-width: 1140px;
  --radius: 4px;
  --transition: 0.3s ease;
  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Grundlayout */
body {
  margin: 0;
  font-family: var(--font-family);
  color: var(--text-color);
  background-color: var(--bg-color);
  line-height: 1.6;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
}

/* Header */
.site-header {
  background-color: var(--light-color);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
}

.logo a {
  font-size: 1.4rem;
  font-weight: bold;
  color: var(--primary-color);
  text-decoration: none;
  letter-spacing: 0.02em;
}

/* Symbol für das Firmenlogo in der Kopfzeile */
.logo-symbol {
  height: 32px;
  width: auto;
  margin-right: 8px;
  vertical-align: middle;
}

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

.main-nav a {
  color: var(--text-color);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--transition);
}

.main-nav a:hover {
  color: var(--primary-color);
}

/* Hero */
/* Hero‑Bereich mit Landschaftsfoto der Mosel */
.hero {
  position: relative;
  /* Stimmungsvolles Foto aus der Moselregion als Hintergrund */
  background-image: url('assets/mosel_banner.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed; /* Parallax‑Effekt für den Hero‑Bereich */
  color: var(--light-color);
  min-height: 60vh;
  display: flex;
  align-items: center;
  /* Abstand zur festen Navigationsleiste, damit der Text nicht verdeckt wird */
  padding-top: 80px;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Höhere Deckkraft für bessere Lesbarkeit auf dem Foto */
  background: rgba(0, 0, 0, 0.5);
}

.hero-content {
  position: relative;
  text-align: center;
  max-width: 700px;
}

.hero h1 {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}

.hero p {
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
}

.btn {
  display: inline-block;
  padding: 0.7rem 1.4rem;
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 600;
  transition: background-color var(--transition), color var(--transition);
}

.btn-primary {
  background-color: var(--primary-color);
  color: var(--light-color);
}

.btn-primary:hover {
  background-color: var(--secondary-color);
  color: var(--light-color);
}

.btn-secondary {
  background-color: transparent;
  color: var(--primary-color);
  border: 2px solid var(--primary-color);
}

.btn-secondary:hover {
  background-color: var(--primary-color);
  color: var(--light-color);
}

/* Abschnitte */
.section {
  padding: 60px 0;
}

.about-section {
  background-color: var(--light-color);
}

.about-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.about-content h2 {
  margin-top: 0;
  color: var(--primary-color);
}

.about-content p {
  margin-bottom: 1rem;
  font-size: 1rem;
}

/* Leistungen */
.services-section {
  background-color: var(--bg-color);
}

.services-section h2 {
  text-align: center;
  color: var(--primary-color);
  margin-bottom: 40px;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 30px;
}

.service-item {
  background-color: var(--light-color);
  border-radius: var(--radius);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  padding: 20px;
  transition: transform var(--transition), box-shadow var(--transition);
}

.service-item h3 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  color: var(--primary-color);
}

.service-item p {
  margin: 0;
  font-size: 0.95rem;
}

.service-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Banner‑Abschnitt mit Weinfässern */
.banner-section {
  position: relative;
  /* Das abstrakte Muster wird durch ein atmosphärisches Foto von Weinfässern ersetzt */
  background-image: url('assets/wine_barrels.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed; /* Parallax‑Effekt für den Banner‑Bereich */
  color: var(--light-color);
  min-height: 40vh;
  display: flex;
  align-items: center;
  /* Abstand zur festen Navigationsleiste */
  padding-top: 60px;
}

.banner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Weniger Deckkraft, damit das Foto der Fässer sichtbar bleibt */
  background: rgba(0, 0, 0, 0.35);
}

.banner-content {
  position: relative;
  text-align: center;
  width: 100%;
}

.banner-content h2 {
  font-size: 2.2rem;
  margin-bottom: 0.5rem;
  color: var(--light-color);
}

.banner-content p {
  font-size: 1rem;
  max-width: 600px;
  margin: 0 auto;
}


/* Abschnittsüberschriften: kleiner Akzentstrich in Gelb unterhalb */
.section h2 {
  position: relative;
  margin-top: 0;
  color: var(--primary-color);
  text-align: left;
}

.section h2::after {
  content: '';
  display: block;
  width: 60px;
  height: 4px;
  background-color: var(--accent-color);
  margin: 0.5rem 0;
  border-radius: 2px;
}

/* CTA Abschnitt */
.cta-section {
  background-color: var(--primary-color);
  color: var(--light-color);
  text-align: center;
}

.cta-section h2 {
  margin-top: 0;
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.cta-section p {
  margin-bottom: 1.5rem;
}

.cta-section .btn-secondary {
  border-color: var(--light-color);
  color: var(--light-color);
}

.cta-section .btn-secondary:hover {
  background-color: var(--light-color);
  color: var(--primary-color);
}

/* Kontaktabschnitt */
.contact-section h2 {
  text-align: left;
  color: var(--primary-color);
  margin-bottom: 40px;
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 40px;
}

.contact-details p {
  margin: 0 0 0.5rem 0;
  font-size: 0.95rem;
}

.contact-details a {
  color: var(--primary-color);
  text-decoration: none;
}

.contact-details a:hover {
  text-decoration: underline;
}

.contact-form form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group label {
  margin-bottom: 0.3rem;
  font-weight: 500;
}

.form-group input,
.form-group textarea {
  padding: 0.6rem;
  border: 1px solid #ccc;
  border-radius: var(--radius);
  font-size: 1rem;
  resize: vertical;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(139, 30, 35, 0.1);
}

.contact-form button {
  align-self: flex-start;
}

/* Footer */
.site-footer {
  background-color: var(--dark-color);
  color: var(--light-color);
  padding: 40px 0;
}

.footer-content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.footer-left p {
  margin: 0.2rem 0;
  font-size: 0.85rem;
}

.footer-left a {
  color: var(--light-color);
  text-decoration: underline;
}

.footer-right {
  display: flex;
  justify-content: flex-start;
}

.footer-nav {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.footer-nav a {
  color: var(--light-color);
  text-decoration: none;
  font-size: 0.85rem;
  transition: color var(--transition);
}

.footer-nav a:hover {
  color: var(--secondary-color);
}

/* Dezentes Logo im Footer */
.footer-logo {
  font-size: 1.1rem;
  font-weight: bold;
  color: var(--secondary-color);
  margin-top: 0.5rem;
}

/* Responsive Anpassungen */
@media (max-width: 768px) {
  .hero h1 {
    font-size: 2rem;
  }
  .hero p {
    font-size: 1rem;
  }
  .header-content {
    flex-direction: column;
    align-items: flex-start;
  }
  .main-nav ul {
    flex-wrap: wrap;
    gap: 1rem;
  }
  .footer-content {
    flex-direction: column;
    align-items: flex-start;
  }
}