/*
Theme Name: Qualitaetswohnbau
Theme URI: https://www.qualitaetswohnbau.de/
Author: Qualitaetswohnbau GmbH (automatisch generiert)
Description: Ein modernes, dynamisches und responsives WordPress‑Theme für die Qualitätswohnbau GmbH. Dieses Theme basiert auf dem bestehenden CI (Farben, Schriften, Logo) und strukturiert die Inhalte in klare Sektionen, die leicht über den Gutenberg‑Editor angepasst werden können.
Version: 1.0
*/

/*
 * CSS‑Variablen zur Anpassung des Farbschemas. Passen Sie diese Werte
 * an die tatsächlichen CI‑Farben an, um eine nahtlose Integration zu gewährleisten.
 */
:root {
  --primary-color: #002e5d;     /* dunkles Blau wie im CI */
  --secondary-color: #007bba;   /* helleres Blau für Akzente */
  --accent-color: #e6b400;      /* warmes Gelb für Highlights */
  --text-color: #333333;
  --background-color: #ffffff;
  --font-family-base: 'Arial', sans-serif;
  --max-width: 1200px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-family-base);
  color: var(--text-color);
  background-color: var(--background-color);
  line-height: 1.6;
}

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

a:hover {
  text-decoration: underline;
}

/* Header Navigation */
header.site-header {
  background-color: var(--primary-color);
  color: #fff;
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 1000;
}

header.site-header .header-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0.5rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

header.site-header .logo img {
  max-height: 60px;
}

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

nav.main-nav li {
  margin: 0;
}

nav.main-nav a {
  color: #fff;
  font-weight: 600;
  padding: 0.5rem 0.75rem;
  border-radius: 4px;
  transition: background-color 0.2s ease-in-out;
}

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

/* Hero section */
section.hero {
  position: relative;
  /* Entfernt das vordefinierte Hintergrundbild. Sie können später im
     Editor ein Bild als Block hinzufügen. Als Fallback wird die
     Primärfarbe verwendet. */
  background-color: var(--primary-color);
  color: #fff;
  background-size: cover;
  background-position: center;
  text-align: left;
  padding: 4rem 1rem;
  display: flex;
  align-items: center;
  min-height: 60vh;
}

section.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
}

section.hero .hero-content {
  position: relative;
  max-width: var(--max-width);
  margin: 0 auto;
}

section.hero h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  line-height: 1.2;
}

section.hero p {
  font-size: 1.25rem;
  margin-bottom: 2rem;
}

.btn {
  background-color: var(--accent-color);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: 4px;
  font-weight: bold;
  display: inline-block;
  transition: background-color 0.2s ease-in-out;
}

.btn:hover {
  background-color: #cc9e00; /* leicht dunklere Variante des Akzents */
}

/* Globale Sektionen */
section {
  padding: 4rem 1rem;
}

section .section-inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

section h2 {
  font-size: 2rem;
  margin-bottom: 2rem;
  color: var(--primary-color);
}

/* Services */
section.services .service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

section.services .service-item {
  text-align: center;
}

section.services .service-item img {
  width: 100%;
  border-radius: 8px;
  margin-bottom: 1rem;
}

section.services .service-item h3 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
  color: var(--primary-color);
}

section.services .service-item p {
  font-size: 1rem;
  margin-bottom: 1rem;
}

/* Projekte */
section.projects .project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

section.projects .project-item img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 0.75rem;
}

/* Footer */
footer.site-footer {
  background-color: var(--primary-color);
  color: #fff;
  padding: 2rem 1rem;
}

footer .footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

footer p {
  margin: 0.5rem 0;
}

/* Header images on content pages */
.header-image img {
  width: 100%;
  border-radius: 8px;
  margin-bottom: 1.5rem;
  object-fit: cover;
}

/* Kontaktformular */
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-bottom: 1rem;
}

.contact-form button {
  border: none;
  cursor: pointer;
}

.contact-success {
  background-color: #e6f4ea;
  color: #2f693e;
  padding: 1rem;
  border-radius: 4px;
  margin-bottom: 1rem;
}

@media screen and (max-width: 768px) {
  section.hero {
    padding: 3rem 1rem;
  }
  section.hero h1 {
    font-size: 2rem;
  }
  section.hero p {
    font-size: 1rem;
  }
}