:root{
      --brand: #0C5589;
      --brand-2: #0a4772;
      --ink: #000;
      --muted: #475569;
      --bg: #f6f8fb;
      --card: #ffffff;
      --line: rgba(15, 23, 42, .10);
    }

    /* Bootstrap Primary überschreiben */
    .btn-primary{
      --bs-btn-bg: var(--brand);
      --bs-btn-border-color: var(--brand);
      --bs-btn-hover-bg: var(--brand-2);
      --bs-btn-hover-border-color: var(--brand-2);
      --bs-btn-active-bg: var(--brand-2);
      --bs-btn-active-border-color: var(--brand-2);
      --bs-btn-focus-shadow-rgb: 12, 85, 137;
    }
    .text-primary{ color: var(--brand) !important; }
    .bg-primary{ background-color: var(--brand) !important; }

    body{
      background: radial-gradient(1200px 500px at 10% 0%, rgba(12,85,137,.12), transparent 55%),
                  radial-gradient(900px 500px at 90% 10%, rgba(12,85,137,.08), transparent 55%),
                  var(--bg);
      color: #000!important;
      
    }

    /* Smooth scrolling + better anchor offset under sticky nav */
   a{
    color:#000;
   }

    /* Navbar */
    .navbar{
      backdrop-filter: blur(10px);
      background: rgba(246,248,251,.85);
      border-bottom: 1px solid var(--line);
    }
    .brand-badge{
      width: 38px; height: 38px; border-radius: 14px;
      background: url('');
      box-shadow: 0 16px 30px rgba(12,85,137,.18);
      border: 1px solid rgba(12,85,137,.25);
      overflow:hidden;
    }

    /* ScrollSpy active styling */
    .navbar .nav-link{
      border-radius: 999px;
      padding: .5rem .8rem;
    }
    .navbar .nav-link.active{
      color: var(--brand) !important;
      background: rgba(12,85,137,.08);
      border: 1px solid rgba(12,85,137,.18);
    }

    /* Hero */
    .hero{ padding-top: 4.5rem; padding-bottom: 2.5rem; }
    .hero-card{
      border: 1px solid var(--line);
      border-radius: 1.25rem;
      background: linear-gradient(180deg, rgba(255,255,255,1), rgba(255,255,255,.92));
      box-shadow: 0 18px 50px rgba(15, 23, 42, .08);
      overflow: hidden;
    }
    .hero-visual{
      min-height: 360px;
      border-radius: 1.25rem;
      border: 1px solid var(--line);
      background:
        radial-gradient(900px 320px at 20% 10%, rgba(12,85,137,.16), transparent 55%),
        linear-gradient(135deg, rgba(12,85,137,.10), rgba(255,255,255,1));
      position: relative;
      box-shadow: 0 18px 50px rgba(15, 23, 42, .08);
    }
    .hero-visual::after{
      content:"Stolberger Str. 309 | Köln";
      position:absolute;
      right: 16px; bottom: 14px;
      font-size:.85rem;
      color: rgba(15,23,42,.55);
      background: rgba(255,255,255,.85);
      border: 1px solid var(--line);
      padding: .35rem .6rem;
      border-radius: 999px;
    }

    .eyebrow{
      display:inline-flex; gap:.5rem; align-items:center;
      padding:.4rem .75rem;
      border: 1px solid rgba(12,85,137,.18);
      background: rgba(12,85,137,.06);
      border-radius: 999px;
      font-weight: 600;
      color: var(--brand);
      font-size: .9rem;
    }
    .dot{
      width: .55rem; height:.55rem; border-radius:999px;
      background: var(--brand);
      box-shadow: 0 0 0 5px rgba(12,85,137,.10);
    }

    /* Cards / sections */
    .section-title{ letter-spacing: -.02em; }
    .soft-card{
      border: 1px solid var(--line);
      border-radius: 1.25rem;
      background: var(--card);
      box-shadow: 0 16px 40px rgba(15, 23, 42, .07);
    }
    .thumb{
      height: 180px;
      background:
        radial-gradient(900px 300px at 20% 10%, rgba(12,85,137,.18), transparent 55%),
        linear-gradient(135deg, rgba(12,85,137,.08), rgba(255,255,255,1));
      border-bottom: 1px solid var(--line);
      border-top-left-radius: 1.25rem;
      border-top-right-radius: 1.25rem;
      position: relative;
    }
    .thumb::after{
      content:"Raumfoto";
      position:absolute;
      right: 14px; bottom: 12px;
      font-size:.85rem;
      color: rgba(15,23,42,.55);
      background: rgba(255,255,255,.85);
      border: 1px solid var(--line);
      padding: .35rem .6rem;
      border-radius: 999px;
    }
    .pill{
      border: 1px solid var(--line);
      background: rgba(12,85,137,.04);
      color: rgba(15,23,42,.72);
      border-radius: 999px;
      padding: .25rem .6rem;
      font-size: .82rem;
      display:inline-flex;
      align-items:center;
      gap:.45rem;
    }

    .icon-tile{
      width: 44px; height: 44px; border-radius: 16px;
      background: rgba(12,85,137,.08);
      border: 1px solid rgba(12,85,137,.18);
      display:grid; place-items:center;
      flex: 0 0 auto;
      font-size: 1.05rem;
      color: var(--brand);
    }

    .i{ margin-right: .45rem; }

    /* Footer */
    footer{
      border-top: 1px solid var(--line);
      background: rgba(255,255,255,.75);
    }
    .map-card{
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
}

.map-placeholder{
  position:relative;
  height:300px;
 
  background-size:cover;
  background-position:center;
}

.map-button{
  position:absolute;
  inset:0;
  margin:auto;
  width:220px;
  height:48px;
  border-radius:999px;
  border:none;
  background:#2e7d32;
  color:#fff;
  font-size:16px;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
}

.map-button:hover{
  background:#256628;
}
html {
  scroll-behavior: smooth;

}
:target{
  scroll-margin-top: 100px !important;
  
}

/* =========================
   Footer
   ========================= */

.site-footer {
  background-color: #0C5589;
  color: #ffffff;
}

.site-footer a {
  color: #ffffff;
  text-decoration: none;
  opacity: 0.9;
  transition: opacity .2s ease, transform .2s ease;
}

.site-footer a:hover,
.site-footer a:focus {
  opacity: 1;
  transform: translateX(2px);
  text-decoration: underline;
}

.site-footer .i {
  opacity: 0.85;
}

.site-footer .brand-badge img {
  filter: brightness(0) invert(1); /* Logo auf dunkel sauber */
}

.site-footer .opacity-75 {
  opacity: .75;
}


/* =========================
   Footer mit CTA
   ========================= */

.site-footer {
  background-color: #024F95;
  color: #ffffff;
}

.site-footer a {
  color: #ffffff;
  text-decoration: none;
  opacity: 0.9;
  transition: opacity .2s ease, transform .2s ease;
}

.site-footer a:hover,
.site-footer a:focus {
  opacity: 1;
 
  text-decoration: none;
}

.site-footer .btn-light {
  color: #0154A0;
  font-weight: 600;
}

.site-footer .btn-outline-light {
  border-color: rgba(255,255,255,.7);
  color: #ffffff;
}

.site-footer .btn-outline-light:hover {
  background-color: rgba(255,255,255,.1);
}

.footer-cta {
  padding-right: 1rem;
}

.site-footer .i {
  opacity: .85;
}

.site-footer .opacity-75 {
  opacity: 1;
}

/* =========================
   Pre-Footer Container
   ========================= */

.pre-footer {

  padding-top: 4rem;
  padding-bottom: 0;            /* wichtig: sitzt direkt auf Footer */
}

.pre-footer-image {
  position: relative;
  top: 0;
  max-width:400px;                       /* KEIN Abstand zum Footer */
}

.pre-footer-image img {
  width: 100%;
  height: auto;
  display: block;

}

/* Footer darf KEINE obere Abrundung haben */
.footer-main {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* Mobile */
@media (max-width: 991px) {
  .pre-footer {
    padding-top: 2rem;
  }


}
.text-secondary{
  color:#000!important;
}
.btn-outline-secondary{
  color:#000;
}

/* FAQ – Fragen hellblau */
.accordion .accordion-button {
    background-color: #e6f2ff;   /* hellblau */
    color: #0c5589;              /* optional: dunkler Text */
}

/* Wenn geöffnet */
.accordion .accordion-button:not(.collapsed) {
    background-color: #cfe5ff;   /* etwas kräftiger */
    color: #0c5589;
    box-shadow: none;
}
.hausstattung h2{
  font-size:28px;
}
.navbar-nav {
  margin-left: auto;
}


/* =========================================
   Aktiver Menüpunkt – ovaler Button hellblau
   ========================================= */

/* Top-Level */
.navbar .navbar-nav > .nav-item > .nav-link.active,
.navbar .navbar-nav > .nav-item > .nav-link[aria-current="page"] {

  background-color: #d9efff;      /* hellblau */
  color: #0c5589;                 /* dunkles Blau für Text */
  border-radius: 999px;           /* oval */
  padding: 0.45rem 1.1rem;
  font-weight: 500;

  transition: background-color .2s ease, color .2s ease;
}

/* Hover bleibt leicht sichtbar */
.navbar .navbar-nav > .nav-item > .nav-link.active:hover,
.navbar .navbar-nav > .nav-item > .nav-link[aria-current="page"]:hover {
  background-color: #c6e6ff;
  color: #083d63;
}

/* Focus (WCAG wichtig!) */
.navbar .navbar-nav > .nav-item > .nav-link.active:focus-visible {
  outline: 2px solid #0c5589;
  outline-offset: 2px;
}


/* =========================================
   Dropdown-Items (Submenu)
   ========================================= */

.dropdown-menu .dropdown-item.active,
.dropdown-menu .dropdown-item[aria-current="page"] {
  background-color: #d9efff;
  color: #0c5589;
  border-radius: 0.5rem;
}

.dropdown-menu .dropdown-item.active:hover {
  background-color: #c6e6ff;
}