/* Site-Overrides — kleine Korrekturen ohne Original-CSS anzufassen */

/* Original verwendete <button>/<div>-Tags (kein Default-Underline + kein blau-color).
   Wir nutzen <a> für saubere Navigation — daher Browser-Defaults unterdrücken
   für ALLE Link-Klassen die wir aus <button>/<div> portiert haben. */
.nav-link,
a.nav-left,
.philosophie-button-contact,
.button-offices, .button-apartments, .button-parking, .button-storage,
.responsive-filter a.link,
.footer-link,
.footer-social-icon,
.footer-copyright-right,
.hidden-link,
.responsive-gallery-title .social {
  text-decoration: none;
  color: inherit;
}

/* nav-left ist <a> Wrapper um Logo + Title — color muss schwarz sein (wie Original-<div>) */
a.nav-left,
a.nav-left * {
  color: black;
  text-decoration: none;
  border-color: black;
}

/* Original-CSS für button > b + button > masked-icon (greift nur auf <button>).
   Wir mappen auf <a> mit gleichen Properties damit Layout pixel-identisch ist. */

/* Schaff-dir-Platz-Banner Buttons */
.responsive-categories > .top > a[class*="button-"] > b {
  font-family: Arial;
  float: left;
  letter-spacing: 0.23px;
  margin-top: 2px;
  margin-left: 15px;
}

/* Kategorie-Sektionen "Zeig mir mehr!"-Button (Büroräume, Wohnungen...) */
.responsive-filter > div > a.link {
  color: rgb(52, 143, 169); /* Türkis wie im Original (cadetblue-200) */
  text-decoration: none;
}
.responsive-filter > div > a.link > b {
  font-family: Arial;
  letter-spacing: 0.23px;
  float: left;
}
.responsive-filter > div > a.link > .masked-icon {
  font-family: Arial;
  color: rgb(52, 143, 169);
  height: 32px;
  margin-top: -4.5px;
  float: right;
}

/* Category-Page: Title-Farbe (war weiß auf weiß) */
.category-title-txt b,
.category-title-txt > * {
  color: #1e83a0;
}

/* === Listing-Card: als zusammenhängende Box mit runden Ecken === */
a.category-listing {
  display: block;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  background-color: #348fa9;
  position: relative;
}
a.category-listing:hover {
  text-decoration: none;
  transform: translateY(-2px);
  transition: transform 0.15s;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

/* Image: keine separaten Border-Margins die Card auseinander reißen */
a.category-listing > .listing-image {
  border: 0;
  margin: 0;
  border-radius: 0;
}

/* Data-Bereich: keine separate Border, passt nahtlos in die Card */
a.category-listing > .listing-data {
  border: 0;
  margin: 0;
  border-radius: 0;
  background-color: #348fa9;
}

/* Placeholder-Image: zentriert + großzügiges Padding */
a.category-listing > .listing-image[src*="_no_image"] {
  object-fit: contain;
  padding: 40px 80px;
  background: #1e83a0;
}

/* Listing-Cards: Text-Bereich vergrößern, damit Title + Adresse + Preis reinpassen.
   Original-CSS rechnet text-height (125-240px) je nach Screen-Breite, aber unsere Cards
   im Demo werden bei 3-Spalten-Layout zu schmal — Adressen wrappen auf 2-3 Zeilen. */
:root {
  --listing-text-height: 175px;
  --listing-height: 560px;
}
.listing-title {
  font-size: 19px;
  line-height: 1.25;
  word-wrap: break-word;
}
.listing-data-left {
  font-size: 16px;
  width: calc(70% - 48px) !important;
  max-width: calc(70% - 48px) !important;
}
.listing-address {
  font-size: 14px;
  line-height: 18px;
  margin-top: 6px;
}
.listing-data-right {
  font-size: 15px;
}

/* === Schaff-dir-Platz Banner: Buttons als <a> stylen wie <button> im Original ===
   Original-CSS adressiert nur ".top > button" (direkter button-Child).
   Da wir <a> für saubere Navigation nutzen, müssen wir den gleichen Style nochmal mappen. */
.responsive-categories > .top > a.link[class*="button-"] {
  position: absolute;
  font-size: var(--font-size-4xl);
  color: white;
  background-color: var(--color-cadetblue-200);
  border: 1px solid var(--color-cadetblue-200);
  border-radius: 20px;
  cursor: pointer;
  padding: 0 50px;
  width: 300px;
  height: 70px;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 15px;
  box-sizing: border-box;
}
.responsive-categories > .top > a.link[class*="button-"]:hover {
  text-decoration: none;
  background-color: var(--color-cadetblue-400);
}
.responsive-categories > .top > a.link[class*="button-"] > img {
  height: 32px;
  width: auto;
  flex: 0 0 auto;
}
.responsive-categories > .top > a.link[class*="button-"] > b {
  letter-spacing: 0.23px;
  flex: 1 1 auto;
}

/* Burger-Menu auf Mobile sichtbar */
@media (max-width: 720px) {
  .nav-menu.open {
    display: flex !important;
    flex-direction: column;
    position: absolute;
    top: 100%;
    right: 0;
    background: white;
    padding: 12px 20px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  }
}

/* ===== Self-Storage-Demo — Direktlink-Leiste (nexcraft-labs.com) ===== */
.ss-demobar{
  background:#131b3f; color:#fff; font-size:13px;
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 22px;
  padding:9px 24px;
}
.ss-demobar-label{ font-weight:700; color:#7fc4d6; text-transform:uppercase; letter-spacing:.5px; }
.ss-demobar a{ color:#fff; text-decoration:none; font-weight:600; padding:3px 0; border-bottom:2px solid transparent; }
.ss-demobar a:hover{ border-bottom-color:#1e83a0; text-decoration:none; }


.nav-admin-lock:hover,
.nav-admin-lock:focus { opacity: 1; }

/* Brand-Block (Logo + PLATZQUARTIER) weiter nach links */
.nav-left { margin-left: 20px !important; }



/* Dezenter Admin-Login (kaum sichtbar, hover-aufdeckend) */
.navbar { position: relative; }
#NavBar, #NavSpace { position: relative; }
.nav-admin-lock {
  position: absolute;
  top: 12px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  color: #1a1a1a;
  opacity: 0.18;
  text-decoration: none;
  transition: opacity 0.2s, color 0.2s;
  z-index: 9999;
  line-height: 1;
}
.nav-admin-lock:hover,
.nav-admin-lock:focus { opacity: 0.85; color: #1e83a0; }
.nav-admin-lock svg { display: block; }
.nav-admin-lock:hover,
.nav-admin-lock:focus { opacity: 1; }