/*
Theme Name: Immobilien Premium
Theme URI: https://mehranr.de
Author: Mehran Rajabi
Author URI: https://mehranr.de
Description: A premium, highly-customizable WordPress theme designed specifically for real estate agencies, property brokers, and Realtors. "Immobilien Premium" features a modern, clean design with rich aesthetics, smooth micro-animations, and a fully responsive layout. Built with a custom property management system, it allows you to effortlessly showcase houses, apartments, and commercial spaces with detailed specifications like Objekt ID, Zimmer, Wohnfläche, and Kaufpreis. Includes a built-in Customizer for dynamic hero images, custom logos, and custom pages for "Über uns" and Contact. Give your real estate business the stunning digital presence it deserves. Developed by Mehran Rajabi (mr.mehran75@gmail.com).
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: immobilien-premium
Tags: real-estate, property-listings, custom-background, custom-logo, portfolio, two-columns, responsive-layout, translation-ready, modern, clean, premium, immomakler
*/

/* Reset & Variables */
html {
  scroll-behavior: smooth;
}

:root {
  --color-primary: #2b4c7e; /* Elegant deep blue */
  --color-primary-light: #3a62a1;
  --color-secondary: #f4f6f8; /* Soft light gray for backgrounds */
  --color-text: #333333;
  --color-text-muted: #666666;
  --color-white: #ffffff;
  --color-whatsapp: #25d366;
  --color-whatsapp-hover: #128c7e;
  
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  
  --shadow-sm: 0 2px 4px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.05);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
  --shadow-hover: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
  
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-family);
  color: var(--color-text);
  background-color: var(--color-secondary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a:hover {
  color: var(--color-primary-light);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Header & Navigation */
.site-header {
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 0;
  z-index: 100;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80px;
}

.logo-link {
  display: flex;
  align-items: center;
  gap: 10px;
}

.custom-logo {
  max-height: 50px;
  width: auto;
}

.site-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.site-description {
  font-size: 0.9rem;
  color: #666;
  font-weight: 400;
  margin-left: 5px;
  text-transform: none;
  letter-spacing: 0;
  border-left: 1px solid #ccc;
  padding-left: 15px;
}

.main-navigation ul {
  list-style: none;
  display: flex;
  gap: 2rem;
}

.main-navigation a {
  color: var(--color-text);
  font-weight: 500;
  font-size: 1rem;
}

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

.menu-toggle-checkbox, .menu-toggle-label {
  display: none;
}

@media (max-width: 768px) {
  .menu-toggle-label {
    display: block;
    font-size: 2rem;
    cursor: pointer;
    color: var(--color-primary);
  }
  
  .main-navigation {
    position: absolute;
    top: 80px;
    left: 0;
    width: 100%;
    background: var(--color-white);
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transform: translateY(-150%);
    transition: transform 0.3s ease-in-out;
    z-index: -1;
  }
  
  .main-navigation ul {
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
  }
  
  .menu-toggle-checkbox:checked ~ .main-navigation {
    transform: translateY(0);
  }
  
  .site-title {
    font-size: 1.2rem;
  }
  
  .site-description {
    display: none;
  }
}

/* Hero Section */
.hero-section {
  background: linear-gradient(rgba(43, 76, 126, 0.8), rgba(43, 76, 126, 0.8)), url('https://images.unsplash.com/photo-1600596542815-ffad4c1539a9?auto=format&fit=crop&q=80&w=2075') center/cover no-repeat;
  color: var(--color-white);
  padding: 40px 20px;
  text-align: center;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.hero-section h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
  font-weight: 700;
  letter-spacing: -0.5px;
}

.hero-section p {
  font-size: 1.25rem;
  max-width: 600px;
  margin: 0 auto;
  opacity: 0.9;
}

/* Property Grid */
.properties-section {
  padding: 60px 0;
}

.section-title {
  text-align: center;
  font-size: 2rem;
  color: var(--color-primary);
  margin-bottom: 40px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.property-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 30px;
}

.property-card {
  background: var(--color-white);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: var(--transition);
  display: flex;
  flex-direction: column;
}

.property-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-hover);
}

.property-image {
  height: 250px;
  overflow: hidden;
  position: relative;
}

.property-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.property-card:hover .property-image img {
  transform: scale(1.05);
}

.property-price-badge {
  position: absolute;
  bottom: 15px;
  right: 15px;
  background: var(--color-primary);
  color: var(--color-white);
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 1.1rem;
  box-shadow: var(--shadow-sm);
}

.property-content {
  background-color: #f4f6f8;
  padding: 20px 0 0 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.property-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 20px 5px 20px;
  color: var(--color-primary);
  line-height: 1.4;
}

.property-address {
  font-size: 1rem;
  color: #111;
  font-weight: 600;
  margin: 0 20px 20px 20px;
}

.property-table {
  border-top: 1px solid rgba(0,0,0,0.08);
  margin-bottom: 20px;
}

.property-row {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.property-label {
  width: 45%;
  font-size: 1rem;
  color: var(--color-text);
}

.property-value {
  width: 55%;
  font-size: 1rem;
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: 8px;
}

.property-icon {
  width: 18px;
  height: 18px;
  stroke: var(--color-text);
}

.property-actions {
  display: flex;
  margin-top: auto;
  padding: 0 20px 20px 20px;
  gap: 15px;
}

.property-actions .btn {
  flex: 1;
  text-align: center;
  padding: 12px 10px;
  font-weight: 600;
  font-size: 0.9rem;
  transition: var(--transition);
}

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

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

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

.btn-anfrage:hover {
  background: rgba(255,255,255,0.8);
  color: var(--color-primary);
}

/* Detail Page */
.detail-section {
  padding: 60px 0;
  background: var(--color-white);
}

.detail-header {
  margin-bottom: 30px;
}

.detail-header h1 {
  color: var(--color-primary);
  font-size: 2.5rem;
  margin-bottom: 10px;
}

.detail-price {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--color-text);
}

.detail-image-gallery {
  margin-bottom: 40px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.detail-image-gallery img {
  width: 100%;
  max-height: 500px;
  object-fit: cover;
}

.detail-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 40px;
}

.detail-content h2 {
  font-size: 1.5rem;
  color: var(--color-primary);
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--color-secondary);
}

.detail-description {
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--color-text);
  margin-bottom: 40px;
}

.detail-specs {
  background: var(--color-secondary);
  padding: 25px;
  border-radius: var(--radius-md);
}

.spec-list {
  list-style: none;
}

.spec-item {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}

.spec-item:last-child {
  border-bottom: none;
}

.spec-label {
  font-weight: 600;
  color: var(--color-text-muted);
}

.spec-value {
  font-weight: 500;
  color: var(--color-text);
}

.contact-box {
  background: var(--color-primary);
  color: var(--color-white);
  padding: 30px;
  border-radius: var(--radius-md);
  text-align: center;
  position: sticky;
  top: 100px;
}

.contact-box h3 {
  margin-bottom: 15px;
  font-size: 1.3rem;
}

.contact-button {
  display: inline-block;
  background: var(--color-white);
  color: var(--color-primary);
  padding: 12px 25px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  margin-top: 20px;
  transition: var(--transition);
}

.contact-button:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
  color: var(--color-primary-light);
}

/* Footer */
.site-footer {
  background: var(--color-primary);
  color: var(--color-white);
  padding: 40px 0;
  text-align: center;
  margin-top: 60px;
}

/* WhatsApp Floating Button */
.whatsapp-float {
  position: fixed;
  bottom: 10px;
  right: 10px;
  background-color: var(--color-whatsapp);
  color: var(--color-white);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  box-shadow: var(--shadow-lg);
  z-index: 1000;
  transition: var(--transition);
  text-decoration: none;
}

.whatsapp-float:hover {
  background-color: var(--color-whatsapp-hover);
  color: var(--color-white);
  transform: scale(1.1);
}

.whatsapp-float svg {
  width: 26px;
  height: 26px;
  fill: currentColor;
}

/* Scroll to Top Button */
.scroll-to-top {
  position: fixed;
  bottom: 75px;
  right: 10px;
  background-color: var(--color-primary);
  color: var(--color-white);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  box-shadow: var(--shadow-md);
  z-index: 1000;
  transition: opacity 0.3s, transform 0.3s;
  text-decoration: none;
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px);
}

.scroll-to-top.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.scroll-to-top:hover {
  background-color: var(--color-primary-light);
  color: var(--color-white);
}

.scroll-to-top svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

@media (max-width: 768px) {
  .detail-grid {
    grid-template-columns: 1fr;
  }
  .main-navigation ul {
    gap: 1rem;
  }
}

/* --- Single Property Details Page --- */
.property-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 40px;
  margin-top: 30px;
}
@media (max-width: 992px) {
  .property-layout {
    grid-template-columns: 1fr;
  }
}

.section-heading {
  font-size: 1.5rem;
  color: var(--color-primary);
  margin-bottom: 20px;
  border-bottom: 2px solid var(--color-primary);
  padding-bottom: 5px;
  display: inline-block;
}

.details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px;
  background: var(--color-bg-light);
  padding: 20px;
  border-radius: 8px;
}
.detail-row {
  display: flex;
  flex-direction: column;
}
.detail-label {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}
.detail-value {
  font-weight: 600;
  color: var(--color-text);
}

.features-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  list-style: none;
  padding: 0;
}
.features-list li {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Gallery Styles */
.property-gallery-wrapper {
  margin-bottom: 30px;
}
.property-main-slider {
  width: 100%;
  height: 500px;
  border-radius: 8px;
  overflow: hidden;
}
@media(max-width:768px){ .property-main-slider{ height:300px; } }
.property-main-slider img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
}
.video-slide iframe {
  width: 100%;
  height: 100%;
}
.property-thumb-slider {
  height: 80px;
  box-sizing: border-box;
  padding: 10px 0;
}
.property-thumb-slider .swiper-slide {
  width: 25%;
  height: 100%;
  opacity: 0.4;
  cursor: pointer;
  border-radius: 4px;
  overflow: hidden;
}
.property-thumb-slider .swiper-slide-thumb-active {
  opacity: 1;
  border: 2px solid var(--color-primary);
}
.property-thumb-slider img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Inquiry Form */
.sticky-sidebar {
  position: sticky;
  top: 100px;
}
.inquiry-form-container {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 0;
  padding: 0;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  overflow: hidden;
}
.form-title {
  font-size: 1.1rem;
  color: #333;
  background: #f8f9fa;
  margin: 0;
  padding: 15px 25px;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
}
.form-title::before {
  content: '\2709';
  color: #888;
}
.inquiry-form {
  padding: 25px;
}
.form-group {
  margin-bottom: 15px;
}
.form-group label {
  display: block;
  font-size: 0.85rem;
  color: #555;
  margin-bottom: 5px;
}
.inquiry-form input[type="text"],
.inquiry-form input[type="email"],
.inquiry-form select,
.inquiry-form textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 2px;
  font-family: inherit;
  font-size: 0.95rem;
  background: #fff;
  box-sizing: border-box;
  transition: border-color 0.2s;
}
.inquiry-form input:focus,
.inquiry-form select:focus,
.inquiry-form textarea:focus {
  outline: none;
  border-color: #8cb4f5;
  box-shadow: 0 0 0 2px rgba(140,180,245,0.2);
}
.inquiry-form select {
  background-color: #4b668f;
  color: white;
  border-color: #4b668f;
  cursor: pointer;
}
.form-row {
  display: flex;
  gap: 15px;
}
.form-checkboxes {
  margin-top: 25px;
  margin-bottom: 25px;
  border-top: 1px solid #eee;
  padding-top: 20px;
}
.form-checkboxes label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.8rem;
  color: #666;
  margin-bottom: 15px;
  line-height: 1.5;
  cursor: pointer;
}
.form-checkboxes input[type="checkbox"] {
  margin-top: 3px;
  width: 16px;
  height: 16px;
  cursor: pointer;
}
.btn-submit {
  width: 100%;
  padding: 15px;
  background: #8cb4f5; /* Light blue like screenshot */
  color: #fff;
  border: none;
  border-radius: 2px;
  font-weight: 500;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.3s ease;
}
.btn-submit:hover:not(:disabled) {
  background: #7aa5ec;
}
.btn-submit:disabled {
  background: #ccc;
  cursor: not-allowed;
}


/* Property Details Accordion */
.property-section {
    margin-bottom: 50px;
}
.accordion-toggle {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid var(--color-primary);
    padding-bottom: 15px;
    margin-bottom: 20px;
    user-select: none;
}
.accordion-toggle .toggle-icon {
    width: 24px;
    height: 24px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    transition: transform 0.3s ease;
    transform: rotate(180deg); /* Expanded state (up) */
}
.accordion-toggle.closed .toggle-icon {
    transform: rotate(0deg); /* Collapsed state (down) */
}

/* Offset for sticky header smooth scrolling */
#uber-uns, #angebote, #leistungen, #kontakt {
    scroll-margin-top: 100px;
}