/* Farbprofil */
:root{
  --gelb:#cbaf05;
  --grau:#6e6e6e;
  --schwarz:#000000;
}

html, body {
  cursor: url("../img/mouse.png") 0 0, auto;
}
a, button, .btn, .nav-link, [role="button"] {
  cursor: url("../img/mouse.png") 0 0, pointer;
}

.fixed-top {
  position: fixed;
  top: 8%;
  right: 0;
  left: 0;
  z-index: 1030;
  border-bottom: solid 5px #cbaf05;
}

.bg-white {
    background-color: #fff !important;
    height: 206px;
    margin-top: -4%;
    margin-bottom: -8%;
}

/* Basistypo passend zum Logo */
body{font-family: 'Montserrat',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--grau);}
h1,h2,h3,h4,h5{color:#333}
.section-title{font-weight:700;letter-spacing:.5px}
.accent{color:var(--gelb)}

.abstand1 {padding-top:12%;}

/* Navbar */
.bg-black{background:var(--schwarz)!important}

.navbar-brand .brand-logo {
    height: 180px;
    width: auto;
    margin-top: 0%;
}

.navbar-brand .brand-text{font-weight:700;letter-spacing:.1rem;text-transform:uppercase;}

.navbar-expand-lg .navbar-nav .nav-item {
    margin: 0 1.25rem; /* Abstand links/rechts je 1.25rem */
}

.navbar-expand-lg .navbar-nav .nav-link {
    padding-right: .95rem;
    padding-left: .95rem;
    color: #000000;               
    font-weight: 800;            
    letter-spacing: .5px;        
    text-transform: uppercase;   
    transition: color .2s ease;  
}

.navbar-expand-lg .navbar-nav .nav-link:hover,
.navbar-expand-lg .navbar-nav .nav-link:focus {
    color: #FFFFFF;         
    text-decoration: none;
    padding: .4rem 1rem;
    border-radius: 2rem;
    font-weight: 600;
    background: #cbaf05;
}

.navbar-expand-lg .navbar-nav .nav-link.btn {
    padding: .4rem 1rem;         
    border-radius: 2rem;       
    font-weight: 600;
}


.navbar-dark .navbar-toggler{border-color:rgba(255,255,255,.15)}

.navbar-dark .navbar-toggler-icon{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")}


.carousel {
    position: relative;
    margin-top: 11%;
}

/* Buttons */
.btn-primary{background:var(--gelb);border-color:var(--gelb);color:#FFFFFF;}
.btn-primary:hover{filter:brightness(0.9)}
.btn-outline-light{border-color:#fff;color:#fff}
.btn-outline-light:hover{background:#fff;color:#000}

/* Hero / Carousel */
.header-hero{margin-top:72px}
.hero-slide{height:70vh;min-height:420px;background-size:cover;background-position:center;position:relative}
.hero-slide .overlay{position:absolute;inset:0;background:linear-gradient(135deg,rgba(0,0,0,.55),rgba(0,0,0,.25))}
.slide-caption{position:relative;color:#fff;max-width:680px}
.hero-one{background-image:url('https://pyramidenblick.at/assets/img/image00035.jpg')}
.hero-two{background-image:url('https://pyramidenblick.at/assets/img/image00029.jpg')}
.hero-three{background-image:url('https://pyramidenblick.at/assets/img/image00017.jpg')}
.carousel-indicators li{background-color:var(--gelb)}
.carousel-control-prev-icon,.carousel-control-next-icon{filter:drop-shadow(0 0 4px rgba(0,0,0,.6))}

/* Feature cards */
.feature-card{border:0;border-top:6px solid var(--gelb);box-shadow:0 8px 20px rgba(0,0,0,.05)}
.feature-card .card-title{font-weight:600}

/* About list */
.grid-list .icon{color:var(--gelb);margin-right:.5rem}

/* Forms in dark section */
#kontakt label{color:#ddd}
#kontakt .form-control{background:#111;border-color:#222;color:#eee}
#kontakt .form-control::placeholder{color:#888}

/* Footer*/
footer .footer-link {
  color: #333; /* dunkles Grau für gute Lesbarkeit */
  text-decoration: none;
  transition: color .2s ease;
}

footer .footer-link:hover {
  color: var(--gelb); /* Akzentfarbe beim Hover */
  text-decoration: none;
}

footer h6 {
  color: var(--schwarz);
  letter-spacing: 1px;
  font-weight: 700;
}


.btn-primary:hover {
    color: #fff;
    background-color: #6e6e6e;
    border-color: #6e6e6e;
}

.mr-auto, .mx-auto {
    margin-left: -7%;
}

.ml-auto, .mx-auto {
    margin-right: -9% !important;
}

.mb-0, .my-0 {
    margin-bottom: 0 !important;
    padding-bottom: 8%;
    padding-top: 3%;
}

.content-link {
  color: #333; 
  text-decoration: none;
}

.content-link:hover {
  color: #333; 
  text-decoration: none;
}



/* --- Wohnungsfinder Sidebar --- */
.finder-sidebar {
  position: fixed;
  top: 40%;            /* vertikal mittig (anpassen nach Bedarf) */
  right: 0;            /* am rechten Bildschirmrand */
  z-index: 2000;       /* über Content */
}

/* Button selbst */
.finder-link {
  display: flex;
  align-items: center;
  background: var(--gelb);
  color: #FFFFFF;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: .75rem 1rem;
  border-radius: 12px 0 0 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  text-decoration: none;

  /* Eingeklappt: nur Icon sichtbar lassen (~50px) */
  transform: translateX(calc(100% - 50px));
  transition: transform .25s ease;
  min-height: 50px;
}

/* Icon + Text */
.finder-link .icon {
  font-size: 1.2rem;
  margin-right: .6rem;
  color:#FFFFFF;
}
.finder-link .text {
  white-space: nowrap;
  color:#FFFFFF;
}

/* Hover -> ausfahren */
.finder-sidebar:hover .finder-link,
.finder-link:focus {
  transform: translateX(0);
  text-decoration: none;
  outline: none;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
}

/* Hoverfarbe leicht heller */
.finder-link:hover {
  background: #e0c31a;
   color:#FFFFFF;
}



/* Feature-Icons Bereich */
#projekt-ueberblick h2{
  font-weight:700;
}

.feature-box{
  height: 100%;
  text-align: center;
  padding: 1.25rem .75rem;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.06);
  background: #fff;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.feature-box i{
  font-size: 2.4rem;   /* vorher 1.75rem */
  color: #6e6e6e;      /* Icon-Farbe */
  margin-bottom: .75rem;
  transition: color .2s ease, transform .2s ease;
}

.feature-box:hover i{
  color: var(--gelb);
  transform: scale(1.1);
}

.feature-box .label{
  font-size: .95rem;
  color: #333;
  line-height: 1.35;
}

.feature-box:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  border-color: rgba(203,175,5,.35); /* leichtes Gelb */
}

/* Größere Icons – funktioniert für FA (Font), FA (SVG) & Bootstrap Icons */
.feature-box i,
.feature-box .svg-inline--fa,   /* Font Awesome (SVG mit JS) */
.feature-box svg,               /* Fallback für andere SVG-Icons */
.feature-box .bi {              /* Bootstrap Icons */
  font-size: 2.6rem;            /* Icon-Größe */
  height: 2.6rem;               /* für SVG sicherstellen */
  width: 2.6rem;                /* für SVG sicherstellen */
  line-height: 1;               
  color: #6e6e6e;
  margin-bottom: .75rem;
  transition: color .2s ease, transform .2s ease;
}

.feature-box:hover i,
.feature-box:hover .svg-inline--fa,
.feature-box:hover svg,
.feature-box:hover .bi {
  color: var(--gelb);
  transform: scale(1.08);
}




/* Highlight Section in Gold (#cbaf05) */
.highlight-section {
  background-color: var(--gelb); /* #cbaf05 */
  position: relative;
}

.highlight-section .highlight-link {
  color: #fff;
  text-decoration: none;
  transition: opacity .2s ease;
}

.highlight-section .highlight-link:hover {
  opacity: 0.85;
  text-decoration: none;
}

.highlight-section .location-title {
  font-size: 2rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: .5rem;
}

.highlight-section .divider {
  width: 120px;
  height: 3px;
  background: #fff;
  border-radius: 2px;
  margin-top: .5rem;
}

/* Highlight Button */
.btn-highlight {
  display: inline-block;
  background: #fff;         /* Weißer Button auf Gold-Hintergrund */
  color: var(--schwarz);    /* schwarze Schrift */
  font-weight: 700;
  text-transform: uppercase;
  padding: .75rem 1.5rem;
  border-radius: 50px;      /* Pillenform */
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  transition: all .2s ease;
  text-decoration: none;
}

.btn-highlight:hover {
  background: #f4f4f4;      /* leicht graues Hover */
  color: var(--schwarz);
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.2);
}




/* Centered brand with menus on both sides (lg+) */
@media (min-width: 992px){
  .navbar .navbar-brand.centered{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
  }
  .navbar .navbar-collapse{
    width:100%;
    display:flex!important;
    justify-content:space-between;
  }
}


@media (max-width: 768px) and (orientation:portrait) {

.fixed-top {
  position: absolute;
  top: 8%;
  right: 0;
  left: 0;
  z-index: 1030;
  border-bottom: solid 5px #cbaf05;
}
  
.navbar-brand .brand-logo {
  height: 140px;
  width: auto;
  margin-top: 0%;
}

.header-hero {
  margin-top: 10px;
}

/* Hintergrund des Buttons in CI-Gelb */
.navbar-toggler {
  background-color: #cbaf05 !important;
  border-color: #cbaf05 !important;
  padding: .25rem .6rem;
  border-radius: .25rem;
}

/* Drei weiße Striche als CSS-Gradients (robust, kein SVG nötig) */
.navbar-toggler .navbar-toggler-icon,
.navbar-dark .navbar-toggler-icon,
.navbar-light .navbar-toggler-icon {
  width: 1.4rem;
  height: 1.4rem;
  background-color: transparent !important;
  background-image:
    linear-gradient(#fff, #fff),
    linear-gradient(#fff, #fff),
    linear-gradient(#fff, #fff) !important;
  background-repeat: no-repeat;
  background-position: center 6px, center 12px, center 18px; /* y-Positionen der Striche */
  background-size: 20px 2px, 20px 2px, 20px 2px;             /* Länge × Dicke */
  opacity: 1 !important;
}

/* Optional: Hover/Focus-Feedback */
.navbar-toggler:hover,
.navbar-toggler:focus {
  filter: brightness(0.95);
  outline: none;
  box-shadow: 0 0 0 2px rgba(203,175,5,.35);
}

/* Navbar immer über dem Carousel */
.navbar {
  z-index: 1100;
}

.finder-sidebar {
    position: fixed;
    top: 50%;
    right: 0;
    z-index: 2000;
}

.bg-white {
    background-color: #fff !important;
    height: 206px;
    margin-top: -15%;
    margin-bottom: -6%;
}

  :root { --nav-h: 72px; }

  .navbar { z-index: 1200; }

  /* Vollbreites, fixiertes Overlay direkt unter der Navbar */
  .navbar-collapse {
    position: fixed !important;
    top: 205px;
    left: 0;
    right: 0;
    width: 100%;                    /* kein 100vw -> kein Überstand */
    max-height: calc(100vh - var(--nav-h));
    background: #fff;
    color: #000;
    z-index: 1199;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0,0,0,.15);
  }

  /* wenn offen: innen scrollen */
  .navbar-collapse.show {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Übergangszustand von Bootstrap glätten */
  .navbar-collapse.collapsing {
    height: auto !important;
    transition: none !important;
  }

  /* Links im Overlay */
  .navbar-collapse .nav-link {
    color: #000 !important;
    padding: 1rem 1.25rem !important;
    border-bottom: 1px solid rgba(0,0,0,.06);
    margin: 0 !important;
  }

  .navbar-nav .nav-item { margin-left: 0 !important; }

  /* Kein horizontales Scrollen */
  html, body { overflow-x: hidden; }

.mr-auto, .mx-auto {
    margin-left: 0%;
}

.nav-link:hover {
    color: #FFFFFF;
    text-decoration: none;
    padding: .4rem 1rem;
    border-radius: 2rem;
    font-weight: 600;
    background: #cbaf05;
    margin-left: 10px !important;
}

h1 {
  font-size: 1.5rem;
}

.display-4 {
    font-size: 1.8rem;
    font-weight: 300;
    line-height: 1.2;
}

}