/*
 * Grundlegendes Styling für blacklist.immo.
 * Das Design ist minimalistisch und seriös, um Vertrauen zu schaffen.
 */

:root {
  --primary-color: #333;
  --secondary-color: #0066cc;
  --danger-color: #cc0000;
  --warning-color: #e6b800;
  --success-color: #2ca02c;
  --bg-color: #f5f5f5;
  --text-color: #333;
  /* Zusätzliche Farben für dynamische Elemente */
  --header-bg: #ffffff;
  --footer-bg: #333333;
  --footer-text: #f5f7fa;
  --card-bg: #ffffff;
  --card-border: #ddd;
}

/* Dunkler Modus: Wenn das body‑Element data-theme="dark" trägt,
   überschreiben diese Variablen die Standardwerte oben. */
body[data-theme="dark"] {
  --bg-color: #1e1e1e;
  --text-color: #e5e7eb;
  --primary-color: #dbeafe;
  --secondary-color: #60a5fa;
  --danger-color: #f87171;
  --warning-color: #fbbf24;
  --success-color: #34d399;
  --header-bg: #27272a;
  --footer-bg: #1f2937;
  --footer-text: #e5e7eb;
  --card-bg: #2e2e32;
  --card-border: #3f3f46;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  margin: 0;
  padding: 0;
  background-color: var(--bg-color);
  color: var(--text-color);
  line-height: 1.6;
  /* Ensure that the footer stays at the bottom of the viewport when the page
     content is shorter than the viewport height. The flex container allows
     the main content to grow and push the footer down. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

header {
  background-color: var(--header-bg);
  border-bottom: 1px solid #eee;
  padding: 1rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

header h1 {
  font-size: 1.5rem;
  margin: 0;
}

header nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 0.5rem;
}

header nav a {
  margin-right: 1rem;
  color: var(--secondary-color);
  text-decoration: none;
  font-weight: 500;
}

/* Buttons im Header: Burger für das mobile Menü und Toggle für den
   Dark‑Mode. Standardmäßig werden sie nicht angezeigt. */
header .burger,
header .theme-toggle {
  background: none;
  border: none;
  color: var(--secondary-color);
  font-size: 1.5rem;
  cursor: pointer;
  margin-left: 0.5rem;
}

header .burger {
  display: none;
}

/* Navigation im mobilen Kontext: auf schmalen Bildschirmen wird die
   Navigation per Burger-Icon ein- und ausgeblendet. */
@media (max-width: 700px) {
  header nav {
    width: 100%;
    flex-direction: column;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
  header nav.open {
    max-height: 500px;
  }
  header .burger {
    display: block;
  }
  /* Links im mobilen Menü füllen die Breite aus und
     erhalten zusätzlichen Abstand. */
  header nav a {
    padding: 0.5rem 0;
    margin-right: 0;
  }
}

.container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 1rem;
  /* Allow the container to grow and occupy available vertical space, pushing
     the footer to the bottom when content is minimal. */
  flex: 1 0 auto;
}

.hero {
  text-align: center;
  padding: 2rem 0;
}

.hero h2 {
  font-size: 2rem;
  margin: 0.5rem 0;
}

.hero p {
  font-size: 1.1rem;
  line-height: 1.5;
  max-width: 600px;
  margin: 0.5rem auto 0;
}

.search-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
  justify-content: center;
}

.search-filter input[type="text"],
.search-filter select {
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  flex: 1 1 200px;
  max-width: 250px;
  box-sizing: border-box;
}

/*
 * Layout für die Bewertungsseite. Die "ratings-layout" nutzt Flexbox,
 * um eine Filterleiste links und eine Ergebnisliste rechts darzustellen.
 * Auf kleineren Bildschirmen wird die Richtung automatisch auf
 * "column" umgestellt, sodass die Filter über den Ergebnissen
 * erscheinen.
 */
.ratings-layout {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
}
.ratings-layout .filter-sidebar {
  flex: 0 0 220px;
  background-color: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 1rem;
  box-sizing: border-box;
}
.ratings-layout .filter-sidebar h3 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
}
.ratings-layout .filter-sidebar label {
  display: block;
  margin-top: 0.7rem;
  font-weight: bold;
  font-size: 0.9rem;
}
.ratings-layout .filter-sidebar input[type="text"],
.ratings-layout .filter-sidebar select {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-top: 0.3rem;
  box-sizing: border-box;
  background-color: var(--card-bg);
  color: var(--text-color);
}

.ratings-layout .results {
  flex: 1 1 auto;
}

@media (max-width: 700px) {
  .ratings-layout {
    flex-direction: column;
  }
  .ratings-layout .filter-sidebar {
    width: 100%;
    margin-bottom: 1rem;
  }
}


.item-list {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}

.card {
  background-color: var(--card-bg);
  border: 1px solid var(--card-border);
  /* Give the cards slightly more rounded corners for a softer appearance */
  border-radius: 8px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  min-height: 180px;
  transition: box-shadow 0.3s ease;
}

/* On hover, add a subtle shadow to the cards to create depth. */
.card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}


.card h3 {
  margin-top: 0;
  font-size: 1.2rem;
}

.card .badge {
  padding: 0.3rem 0.6rem;
  border-radius: 12px;
  font-size: 0.8rem;
  display: inline-block;
  margin-bottom: 0.5rem;
  font-weight: 500;
}

.badge.vermieter {
  background-color: #e6e6ff;
  color: #333;
}

.badge.investor {
  background-color: #ffe6e6;
  color: #333;
}

.badge.entwickler {
  background-color: #e6ffe6;
  color: #333;
}

.rating {
  margin-top: auto;
}

.rating span {
  font-size: 0.9rem;
  font-weight: bold;
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
}

.rating .green {
  background-color: #d4edda;
  color: #155724;
}

.rating .yellow {
  background-color: #fff3cd;
  color: #856404;
}

.rating .red {
  background-color: #f8d7da;
  color: #721c24;
}

footer {
  /* Der Footer verwendet Farben aus den CSS‑Variablen, sodass er sich
     automatisch an den Dark‑Mode anpasst. */
  background-color: var(--footer-bg);
  color: var(--footer-text);
  margin-top: 3rem;
  padding-top: 3rem;
}

/* Form styles */
form label {
  font-weight: bold;
  display: block;
  margin-bottom: 0.3rem;
}

form input[type="text"],
form input[type="email"],
form input[type="date"],
form select,
form textarea {
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 100%;
  box-sizing: border-box;
}

form textarea {
  resize: vertical;
}


form button {
  background-color: var(--secondary-color);
  color: #fff;
  border: none;
  padding: 0.6rem 1.2rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
}

form button:hover {
  background-color: #004a99;
}


/* Tabellen im Adminbereich */
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
}

th, td {
  border-bottom: 1px solid #ccc;
  padding: 0.5rem;
  text-align: left;
}


@media (max-width: 600px) {
  header {
    flex-direction: column;
    align-items: flex-start;
  }
  header nav {
    margin-top: 0.5rem;
  }
}

/* Footer styles */
footer .footer-top {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  padding: 1rem 0 2rem;
  max-width: 1000px;
  margin: 0 auto;
  /* Ensure that all footer columns align at the top rather than stretching to fill
     the available height. This keeps headings and text aligned across columns. */
  align-items: flex-start;
}

footer .footer-brand h2 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  color: #ffffff;
}

footer .footer-brand p {
  max-width: 300px;
  color: #ccd6e1;
  line-height: 1.4;
}

footer .footer-nav h3,
footer .footer-contact h3 {
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
  color: #ffffff;
}

footer .footer-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

footer .footer-nav li {
  margin-bottom: 0.3rem;
}

footer .footer-nav a,
footer .footer-contact a {
  color: #f5f7fa;
  text-decoration: none;
  font-size: 0.95rem;
}

footer .footer-nav a:hover,
footer .footer-contact a:hover {
  text-decoration: underline;
}

footer .footer-contact p {
  margin: 0.2rem 0;
  color: #ccd6e1;
  font-size: 0.95rem;
}

footer .legal-note {
  background-color: #fff3cd;
  color: #856404;
  border: 1px solid #ffeeba;
  border-radius: 4px;
  padding: 1rem;
  margin: 1rem auto;
  max-width: 1000px;
  box-sizing: border-box;
  font-size: 0.9rem;
}

footer .footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 1rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  max-width: 1000px;
  margin: 0 auto;
  color: var(--footer-text);
  font-size: 0.9rem;
}

footer .footer-bottom nav a {
  margin-left: 1rem;
  color: var(--footer-text);
  text-decoration: none;
}

footer .footer-bottom nav a:first-child {
  margin-left: 0;
}

footer .footer-bottom nav a:hover {
  text-decoration: underline;
}

/* ---------- Erweiterungen für neue Funktionen ---------- */

/* Hero-Suchfeld und CTA auf der Startseite */
.home-search {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin: 1.5rem auto;
  max-width: 600px;
}
.home-search input[type="text"] {
  flex: 1 1 auto;
  padding: 0.8rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
  background-color: var(--card-bg);
  color: var(--text-color);
}
.home-search button {
  padding: 0.8rem 1.2rem;
  border: none;
  border-radius: 4px;
  background-color: var(--secondary-color);
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
}
.home-search button:hover {
  background-color: #004a99;
}

.cta-container {
  margin-top: 1rem;
}
.cta-btn {
  display: inline-block;
  background-color: var(--secondary-color);
  color: #fff;
  padding: 0.7rem 1.4rem;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 500;
}
.cta-btn:hover {
  background-color: #004a99;
}

/* Abschnitte für neueste Einträge und Top-Kategorien */
.latest-entries,
.top-categories {
  margin-top: 3rem;
}
.latest-entries h3,
.top-categories h3 {
  margin-bottom: 1rem;
}

/* Kategorie-Boxen für die Top-Kategorien */
.category-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.category-card {
  background-color: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 1rem;
  flex: 1 1 calc(33.333% - 1rem);
  box-sizing: border-box;
  text-align: center;
  transition: box-shadow 0.3s ease;
  cursor: pointer;
}
.category-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.category-card h4 {
  margin: 0 0 0.3rem;
  font-size: 1.1rem;
}
.category-card p {
  margin: 0;
  font-size: 0.9rem;
  color: #666;
}
@media (max-width: 700px) {
  .category-card {
    flex: 1 1 calc(50% - 1rem);
  }
}
@media (max-width: 500px) {
  .category-card {
    flex: 1 1 100%;
  }
}

/* Vertrauenshinweis bei Karten */
.trust-label {
  font-size: 0.75rem;
  color: #666;
  margin-top: 0.4rem;
}

/* Filterleiste auf der Bewertungsseite */
.ratings-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
  justify-content: center;
}
.ratings-filter input[type="text"],
.ratings-filter select {
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  flex: 1 1 200px;
  max-width: 250px;
  box-sizing: border-box;
}

/* Mehrstufiges Formular im Meldebereich */
.progress {
  font-weight: bold;
  margin-bottom: 1rem;
}
.form-step {
  display: none;
}
.form-step.active {
  display: block;
}
.step-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 1rem;
}
.char-counter {
  font-size: 0.8rem;
  text-align: right;
  color: #666;
  margin-top: 0.2rem;
}

/* Richtlinienliste mit Icons */
.guidelines-list {
  list-style: none;
  padding-left: 0;
}
.guidelines-list li {
  margin-bottom: 0.8rem;
  line-height: 1.5;
  display: flex;
  align-items: flex-start;
}
.guidelines-list .icon {
  color: var(--secondary-color);
  margin-right: 0.6rem;
  font-size: 1rem;
  line-height: 1.2;
  flex-shrink: 0;
  margin-top: 0.2rem;
}