/* RESET-ish */
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Inter,system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;line-height:1.55;background:#cbb89c;color:#e9edf1}
img{max-width:100%;display:block}
a{color:inherit}

/* THEME */
:root{
  --bg:#0f1115; --panel:#161a21; --muted:#8b93a7; --text:#e9edf1;
  --brand:#2d6cdf; --brand2:#12d3a1;
  --radius:14px; --radius-sm:10px; --container:1180px;
  --s1:6px; --s2:10px; --s3:16px; --s4:24px; --s5:36px; --s6:56px;
  --shadow:0 10px 30px rgba(0,0,0,.25);
}
.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--s4)}
.skip-link{position:absolute;left:-9999px;top:auto}
.skip-link:focus{left:16px;top:16px;background:var(--brand);color:#fff;padding:8px 12px;border-radius:8px;z-index:1000}

/* HEADER */
.site-header{position:sticky;top:0;z-index:50;background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,0));backdrop-filter:blur(8px)}
.header-inner{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--s3);padding:var(--s3) 0}
.brand{display:flex;flex-direction:column;gap:2px}
.brand strong{font-size:20px}
.brand .tagline{color:var(--text);font-size:13px}
.site-nav{display:flex;flex-wrap:wrap;gap:var(--s2);justify-content:flex-end}
.nav-btn{appearance:none;border:1px solid rgba(255,255,255,.15);background:transparent;color:var(--text);padding:10px 14px;border-radius:999px;font-weight:600;cursor:pointer;transition:all .2s ease}
.nav-btn:hover,.nav-btn[aria-selected='true']{background:var(--brand);border-color:var(--brand);color:#fff}

/* MAIN */
.site-main{padding-top:var(--s5);padding-bottom:var(--s6)}
.section{display:none;animation:fade .25s ease}
.section.is-active{display:block}
@keyframes fade{from{opacity:.001;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* HERO */
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--s5);align-items:center;background:linear-gradient(135deg,rgba(45,108,223,.15),rgba(18,211,161,.10));padding:var(--s5);border-radius:var(--radius);box-shadow:var(--shadow)}
.hero h1{margin:0 0 var(--s3);font-size:clamp(30px,5vw,44px);line-height:1.15}
.cta-row{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s3)}
.btn{display:inline-block;text-decoration:none;font-weight:800;padding:12px 18px;border-radius:12px;border:1px solid currentColor}
.btn.primary{background:var(--brand);color:#fff;border-color:var(--brand)}
.btn.ghost{background:transparent;color:var(--text)}

/* FEATURES */
.features{display:grid;gap:var(--s3);grid-template-columns:repeat(3,minmax(0,1fr));margin-top:var(--s4)}
.card{background:var(--panel);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);padding:var(--s4)}

/* APARTMENTS */
.cards{display:grid;gap:var(--s3)}
.cards.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.apt{background:var(--panel);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
.apt img{width:100%;height:220px;object-fit:cover}
.apt-body{padding:var(--s4);display:flex;flex-direction:column;gap:var(--s2)}
.meta{display:flex;flex-wrap:wrap;gap:10px;color:var(--muted);padding:0;margin:0;list-style:none}

/* GRID/TABLE */
.grid{display:grid;gap:var(--s3)}
.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
table.price{width:100%;border-collapse:collapse}
.price th,.price td{border-bottom:1px solid rgba(255,255,255,.12);padding:10px 6px;text-align:left}
.muted{color:var(--muted)}

/* MAP */
.map-wrap{border-radius:var(--radius);overflow:hidden;border:1px solid rgba(255,255,255,.08);margin-top:var(--s3)}
.map{display:block;width:100%;height:420px}

/* FORM */
.contact-form{background:var(--panel);padding:var(--s4);border-radius:var(--radius);border:1px solid rgba(255,255,255,.08);max-width:760px}
.form-row{display:grid;gap:8px;margin-bottom:var(--s3)}
input,textarea{width:100%;padding:12px 14px;background:#0c0f14;color:var(--text);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-sm)}
input:focus,textarea:focus{outline:2px solid rgba(45,108,223,.5);outline-offset:1px}
.form-actions{display:flex;gap:var(--s2);margin-top:var(--s2)}
.form-note{color:var(--muted);font-size:14px}

/* FOOTER */
.site-footer{border-top:1px solid rgba(255,255,255,.08);padding:var(--s4) 0 var(--s5)}
.footer-inner{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);justify-content:space-between}
.footer-nav{display:flex;flex-wrap:wrap;gap:var(--s2)}
.footer-nav a{text-decoration:none;color:var(--muted)}

/* RESPONSIVE */
@media (max-width:980px){
  .hero{grid-template-columns:1fr}
  .features{grid-template-columns:1fr}
  .cards.three{grid-template-columns:1fr}
  .grid.two{grid-template-columns:1fr}
  .site-nav{justify-content:center}
  .header-inner{grid-template-columns:auto 1fr;row-gap:var(--s2)}
}

/* === FULL-WIDTH HERO (oberhalb vom Main) === */
.hero-full{
  position: relative;
  min-height: 100vh;          /* volle Höhe */
  width: 100%;
  overflow: hidden;
  display: grid;
  place-items: center;
  text-align: center;
  color: #fff;
  /* Abstand unter sticky Header (der ist halbtransparent) */
  padding-top: clamp(80px, 10vh, 140px);
}

/* Hintergrundbild: passe den Pfad an, z. B. assets/hero.jpg */
.hero-full__bg{
  position: absolute; inset: 0;
  background: url("assets/hero.jpg") center center / cover no-repeat;
  transform: scale(1.02);
}

/* Abdunkelung für Lesbarkeit */
.hero-full__overlay{
  position: absolute; inset: 0;
  background:
    radial-gradient(transparent 35%, rgba(0,0,0,.55) 85%),
    linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,.65));
  pointer-events: none;
}

.hero-full__content{
  position: relative; z-index: 1;
  max-width: 900px;
  padding: 0 var(--s4);
}
.hero-full__content h1{
  margin: 0 0 var(--s3);
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1.1;
}
.hero-full__content p{
  font-size: clamp(16px, 2.2vw, 20px);
  margin: 0 0 var(--s4);
  opacity: .95;
}

/* Scroll-Hinweis unten */
.hero-full__cue{
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
  background: transparent; border: 0; color: #fff; font-size: 22px; opacity: .85; cursor: pointer;
  animation: hero-bob 1.8s infinite;
}
@keyframes hero-bob { 0%,100%{ transform: translate(-50%,0);} 50%{ transform: translate(-50%,8px);} }

/* Sanftes Scrollen (falls noch nicht gesetzt) */
html { scroll-behavior: smooth; }

/* Responsiv: auf kleineren Screens kein Scale-Effekt nötig */
@media (max-width: 980px){
  .hero-full{ padding-top: clamp(72px, 9vh, 120px); }
  .hero-full__bg{ transform: none; }
}
@media (prefers-reduced-motion: reduce){
  .hero-full__cue{ animation: none; }
  .hero-full__bg{ transform: none; }
}
/* === FINAL MOBILE HEADER FIX === */
@media (max-width: 768px) {
  .header-inner {
    display: flex !important;             /* überschreibt das Grid */
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: var(--s2) !important;
  }

  .site-header img {
    margin: 0 auto !important;
    display: block !important;
  }

  .brand {
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .brand strong {
    font-size: 18px !important;
    line-height: 1.2 !important;
    margin-bottom: 2px !important; /* kleiner Abstand zum Untertitel */
  }

  .brand .tagline {
    font-size: 13px !important;
    color: var(--text) !important; /* wieder weiß */
    opacity: 0.95 !important;      /* leicht weicher */
    margin-top: 0 !important;      /* gleicht den Abstand aus */
  }

  .site-nav {
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: var(--s2) !important;
  }
}