/*
Theme Name: Amadeus Immo
Theme URI: https://example.com/
Description: Individuelles WordPress‑Theme, das das mitgelieferte HTML‑Design von amadeus.immo nachbildet. Das Theme ist eigenständig, Elementor‑ready und stellt einen Custom Post Type für Projekte mitsamt Filterseite bereit. Die Stile orientieren sich an Montserrat und Open Sans sowie den Farben der Vorlage.
Author: Hafner Jonas
Version: 1.6.0
Text Domain: amadeus-immo
*/

/*
 * Basisvariablen und allgemeine Styles
 * Die folgenden CSS‑Regeln bilden das Design der gelieferten HTML‑Vorlage nach,
 * ohne dabei auf die Tailwind‑CDN zurückzugreifen. Die Farben, Abstände und
 * Typografie entsprechen so nah wie möglich dem Original. Dieser CSS‑Block
 * wird zusammen mit Google Fonts (Montserrat und Open Sans) in functions.php
 * enqueued. Falls Sie Dark‑Mode implementieren möchten, können Sie auf
 * :root.dark mit entsprechenden Anpassungen zurückgreifen.
 */

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

:root {
  /* Farbvariablen des Designsystems */
  --primary: #A64444;
  --muted-red: #A64444;
  --anthracite: #2D2D2D;
  --warm-off-white: #F9F8F6;
  --stone-gray: #EBE9E4;
  --status-blue: #7D8A94;
  --status-orange: #D96C5B;
  --status-dark: #4A4A4A;
  /* Abgeleitete Variablen */
  --background-light: var(--warm-off-white);
  --text-dark: var(--anthracite);
  --text-muted: #806b6b;
  --border-light: #e3dede;
  --badge-dark: #161313;
}

/*
 * Utility classes für Typografie
 *
 * Diese Klassen orientieren sich an den in der HTML‑Vorlage verwendeten Tailwind‑Klassen.
 * Sie können in Elementor‑Templates verwendet werden, um eine konsistente Typografie
 * ohne Inline‑Styles oder komplexe Einstellungen zu erzielen. Die Fonts
 * Montserrat (für Display‑Schriften) und Open Sans (für Fließtexte) werden über
 * den @import‑Aufruf am Anfang dieses Stylesheets geladen.
 */

/* Schriftfamilien */
.font-display {
  font-family: 'Montserrat', sans-serif;
}
.font-sans {
  font-family: 'Open Sans', sans-serif;
}

/* Schriftgewichte */
.font-normal {
  font-weight: 400;
}
.font-semibold {
  font-weight: 600;
}
.font-bold {
  font-weight: 700;
}

/* Großschreibung */
.uppercase {
  text-transform: uppercase;
}

/* Farbklassen (Designsystem)
 * Diese Utility‑Klassen erleichtern die Verwendung der im Designsystem definierten
 * Farben innerhalb von Elementor‑Templates oder klassischem PHP‑Markup. Sie
 * orientieren sich an der Tailwind‑Notation (z.B. bg-primary, text-muted-red).
 */
.bg-primary { background-color: var(--primary); }
.bg-muted-red { background-color: var(--muted-red); }
.bg-anthracite { background-color: var(--anthracite); }
.bg-warm-off-white { background-color: var(--warm-off-white); }
.bg-stone-gray { background-color: var(--stone-gray); }
.bg-status-blue { background-color: var(--status-blue); }
.bg-status-orange { background-color: var(--status-orange); }
.bg-status-dark { background-color: var(--status-dark); }

.text-primary { color: var(--primary); }
.text-muted-red { color: var(--muted-red); }
.text-anthracite { color: var(--anthracite); }
.text-warm-off-white { color: var(--warm-off-white); }
.text-stone-gray { color: var(--stone-gray); }
.text-status-blue { color: var(--status-blue); }
.text-status-orange { color: var(--status-orange); }
.text-status-dark { color: var(--status-dark); }

/* Laufweiten (letter-spacing) */
.tracking-tight {
  letter-spacing: -0.02em;
}
.tracking-wide {
  letter-spacing: 0.05em;
}
.tracking-wider {
  letter-spacing: 0.1em;
}
.tracking-widest {
  letter-spacing: 0.15em;
}

/* Textgrößen (weitgehend angelehnt an die Tailwind‑Skala) */
.text-xs {
  font-size: 0.75rem;
}
.text-sm {
  font-size: 0.875rem;
}
.text-base {
  font-size: 1rem;
}
.text-lg {
  font-size: 1.125rem;
}
.text-xl {
  font-size: 1.25rem;
}
.text-2xl {
  font-size: 1.5rem;
}
.text-3xl {
  font-size: 1.875rem;
}
.text-4xl {
  font-size: 2.25rem;
}
.text-5xl {
  font-size: 3rem;
}
.text-6xl {
  font-size: 3.75rem;
}
.text-7xl {
  font-size: 4.5rem;
}

/* Reset */
*, *::before, *::after {
  box-sizing: border-box;
}

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

h1, h2, h3, h4, h5, h6 {
  font-family: 'Montserrat', sans-serif;
  margin: 0;
  color: var(--text-dark);
}

a {
  color: inherit;
  text-decoration: none;
}

/* Header */
.header {
  width: 100%;
  background: rgba(248, 247, 247, 0.9);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-light);
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
}
.header .logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 1.25rem;
  text-transform: uppercase;
  color: var(--primary);
}
.header nav {
  display: none;
}
.header nav.menu-active {
  display: flex;
}
.header nav a {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-left: 2rem;
  white-space: nowrap;
}
.header nav a:hover {
  color: var(--primary);
}
.header .cta {
  background: var(--primary);
  color: #fff;
  padding: 0.625rem 1.5rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: bold;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: inline-block;
  transition: background 0.3s ease;
}
.header .cta:hover {
  /* Hoverfarbe für die CTA‑Buttons: dunklere Variante der Primärfarbe */
  background: #8D3939;
}

/*
 * Mobile Navigation
 *
 * Um das mobile Menü anzuzeigen, nutzen wir einen Toggle‑Button. Auf
 * mobilen Geräten wird das Navigationsmenü zunächst ausgeblendet. Bei
 * Klick auf den Toggle wird die Klasse `menu-active` gesetzt, sodass
 * das Menü vertikal ausklappt. Auf Desktops wird der Toggle
 * ausgeblendet und das Menü immer angezeigt.
 */
.header .menu-toggle {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  margin-right: 0.5rem;
}
.header .menu-toggle .material-symbols-outlined {
  font-size: 1.5rem;
  line-height: 1;
}
/* Verstecke das Schließen‑Icon standardmäßig */
.header .menu-toggle .menu-icon-close {
  display: none;
}
/* Wenn das Menü geöffnet ist, Icons vertauschen */
.header .menu-toggle[aria-expanded="true"] .menu-icon-open {
  display: none;
}
.header .menu-toggle[aria-expanded="true"] .menu-icon-close {
  display: inline;
}

@media (max-width: 768px) {
  /* Navigationsmenü als Overlay unterhalb des Headers */
  .header nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(248, 247, 247, 0.95);
    backdrop-filter: blur(8px);
    flex-direction: column;
    align-items: center;
    padding: 1rem 0;
    border-bottom: 1px solid var(--border-light);
  }
  .header nav .menu-items {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    gap: 1rem;
  }
  .header nav a {
    margin-left: 0;
  }
  .header nav {
    display: none;
  }
  .header nav.menu-active {
    display: flex;
  }
  .header .menu-toggle {
    display: inline-flex;
  }
  .header .cta {
    margin-left: auto;
  }
}

@media (min-width: 769px) {
  .header nav {
    display: flex !important;
  }
  .header .menu-toggle {
    display: none;
  }
}

/*
 * Dark‑Mode Unterstützung
 *
 * Über das Medienquery `prefers-color-scheme: dark` sowie über die Klasse
 * `.dark` am <html>‑ oder <body>‑Element können alternative Farben
 * aktiviert werden. Diese überschreiben die Basis‑Variablen. Falls Sie einen
 * manuellen Dark‑Mode‑Toggle implementieren möchten, fügen Sie einfach die
 * Klasse `.dark` zum <body> hinzu.
 */
@media (prefers-color-scheme: dark) {
  :root {
    --background-light: #161313;
    --text-dark: #f8f7f7;
    --text-muted: #a69999;
    --primary: #d75a5a;
    --stone-gray: #2a2a2a;
    --border-light: #3a2a2a;
    --badge-dark: #ffffff;
  }
}

:root.dark {
  --background-light: #161313;
  --text-dark: #f8f7f7;
  --text-muted: #a69999;
  --primary: #d75a5a;
  --stone-gray: #2a2a2a;
  --border-light: #3a2a2a;
  --badge-dark: #ffffff;
}

/* Container utility */
.container {
  width: min(1200px, 100%);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Hero */
.hero {
  padding: 3rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;
  align-items: center;
}
.hero-text {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.hero-text .eyebrow {
  color: var(--primary);
  font-size: 0.75rem;
  font-weight: bold;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.hero-text h2 {
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1.1;
}
.hero-text p {
  color: var(--text-muted);
  font-size: 1.125rem;
  line-height: 1.5;
  max-width: 40rem;
}
.hero-text .buttons {
  display: flex;
  gap: 1rem;
}
.hero-text .buttons .btn-primary {
  background: var(--primary);
  color: #fff;
  padding: 1rem 2rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: bold;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: background 0.3s ease;
}
.hero-text .buttons .btn-primary:hover {
  /* Hoverfarbe für Primärbuttons im Hero */
  background: #8D3939;
}
.hero-image {
  flex: 1 1 50%;
  border-radius: 0.25rem;
  overflow: hidden;
  box-shadow: 0 10px 30px -12px rgba(160, 64, 64, 0.08);
  background-color: var(--stone-gray);
  aspect-ratio: 4/5;
}
.hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}
.hero-image:hover img {
  transform: scale(1.05);
}

/* Trust icons */
.trust-section {
  background: #ffffff;
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  padding: 3rem 0;
}
.trust-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
}
.trust-item {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}
.trust-item .icon {
  color: var(--primary);
  font-size: 2rem;
  line-height: 1;
}
.trust-item h3 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}
.trust-item p {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin: 0;
}

/* Portfolio / projects */
.portfolio-section {
  padding: 6rem 0;
}
.portfolio-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 3rem;
  gap: 1rem;
}
.portfolio-header .eyebrow {
  color: var(--primary);
  font-size: 0.75rem;
  font-weight: bold;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.portfolio-header h2 {
  font-size: 2rem;
  font-weight: 700;
}
.portfolio-header .view-all {
  font-size: 0.75rem;
  font-weight: bold;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--primary);
  padding-bottom: 0.25rem;
  transition: color 0.3s ease;
}
.portfolio-header .view-all:hover {
  color: var(--primary);
}
.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}
.project-card {
  background: #ffffff;
  border-radius: 0.25rem;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  box-shadow: 0 10px 30px -12px rgba(160, 64, 64, 0.08);
  display: flex;
  flex-direction: column;
}
.project-card:hover {
  box-shadow: 0 20px 40px -15px rgba(160, 64, 64, 0.12);
  transform: translateY(-2px);
}
.project-image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3/4;
}
.project-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.project-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  padding: 0.25rem 0.75rem;
  font-size: 0.625rem;
  font-weight: bold;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border-radius: 0.25rem;
}
.project-badge.light {
  background: rgba(255, 255, 255, 0.9);
  color: var(--text-dark);
  backdrop-filter: blur(4px);
}
.project-badge.primary {
  background: var(--primary);
  color: #ffffff;
}
.project-badge.dark {
  background: var(--badge-dark);
  color: #ffffff;
}
.project-info {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.project-info .location {
  font-size: 0.625rem;
  color: var(--primary);
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}
.project-info h3 {
  font-size: 1.25rem;
  font-weight: 700;
}
.project-info .description {
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* CTA / Grundstück form section */
.cta-section {
  background: var(--stone-gray);
  padding: 6rem 0;
}
.cta-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 4rem;
  align-items: center;
}
.cta-text {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.cta-text .eyebrow {
  color: var(--primary);
  font-size: 0.75rem;
  font-weight: bold;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.cta-text h2 {
  font-size: 2rem;
  font-weight: 700;
}
.cta-text p {
  font-size: 1rem;
  color: var(--text-muted);
}
.cta-text .contact-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: bold;
}
.cta-form {
  flex: 1 1 50%;
  background: #ffffff;
  padding: 2rem;
  border-radius: 0.25rem;
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.05);
}
.cta-form form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.cta-form label {
  font-size: 0.625rem;
  font-weight: bold;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.cta-form input,
.cta-form textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border-light);
  border-radius: 0.25rem;
  font-size: 0.875rem;
  font-family: 'Open Sans', sans-serif;
}
.cta-form button {
  width: 100%;
  background: var(--primary);
  color: #fff;
  padding: 1rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: bold;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  margin-top: 1rem;
  transition: background 0.3s ease;
}
.cta-form button:hover {
  /* Hoverfarbe für Formularbuttons */
  background: #8D3939;
}

/* Footer */
.footer {
  background: #ffffff;
  border-top: 1px solid var(--border-light);
  padding-top: 4rem;
  padding-bottom: 2rem;
}
.footer .footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 3rem;
  margin-bottom: 3rem;
}
.footer h4 {
  font-size: 0.75rem;
  font-weight: bold;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}
.footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer ul li {
  margin-bottom: 1rem;
  font-size: 0.875rem;
  color: var(--text-muted);
}
.footer ul li a {
  color: var(--text-muted);
  transition: color 0.3s ease;
}
.footer ul li a:hover {
  color: var(--primary);
}
.footer .bottom-bar {
  border-top: 1px solid var(--border-light);
  padding-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  font-size: 0.625rem;
  font-weight: bold;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.footer .bottom-bar a {
  margin-left: 2rem;
  color: var(--text-muted);
  transition: color 0.3s ease;
}
.footer .bottom-bar a:hover {
  color: var(--primary);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .header nav {
    display: none;
  }
  .hero {
    padding: 2rem 0;
  }
  .hero-text h2 {
    font-size: 2rem;
  }
  .hero-image {
    aspect-ratio: 3/4;
  }
  .cta-grid {
    flex-direction: column;
  }
  .cta-text, .cta-form {
    flex: 1 1 100%;
  }
  .portfolio-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .portfolio-header .view-all {
    margin-top: 1rem;
  }
}