/* Immobi.Chat – statische Marketing-Site
   Gemeinsames Stylesheet: Base, Header/Nav, Buttons, Footer, Platzhalter, Animationen. */

/* ---------- Schriftart (selbst gehostet, kein Google-Server) ----------
   Manrope Variable Font (SIL Open Font License). Eine Datei je Subset deckt
   alle Schnitte 200–800 ab; genutzt werden 400/600/700/800. */
@font-face{
  font-family:'Manrope';
  font-style:normal;
  font-weight:200 800;
  font-display:swap;
  src:url('/assets/fonts/manrope-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Manrope';
  font-style:normal;
  font-weight:200 800;
  font-display:swap;
  src:url('/assets/fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
body{margin:0;background:#eceae4;font-family:Manrope,system-ui,-apple-system,sans-serif;color:#0b1512}
img{max-width:100%}
a{color:#0fae7d;text-decoration:none}
a:hover{color:#0b8a63;text-decoration:underline}

/* Vollbreite Bühne: container-type sorgt dafür, dass die cqw-Einheiten der
   Inhalte gegen die (volle) Seitenbreite auflösen – wie im Design gedacht. */
.frame{width:100%;max-width:100%;margin:0 auto;container-type:inline-size;background:#fff;
  font-family:Manrope,system-ui,-apple-system,sans-serif;color:#0b1512}

/* ---------- Hero (Startseite) ----------
   Zwei Layer: Abdunkelungs-Gradient über dem Foto. Auf schmalen Displays wird
   das Foto horizontal nach links verschoben, damit das Gesicht im Bild bleibt
   (es sitzt bei ca. 25–45 % der Bildbreite, nicht in der Mitte). */
.hero{
  background-image:linear-gradient(180deg,rgba(4,18,13,.4) 0%,rgba(4,18,13,.72) 100%),
                   url('/assets/img/wohnungssuche-per-whatsapp-hero.jpg');
  background-position:center center, center center;
  background-size:cover, cover;
  background-repeat:no-repeat, no-repeat;
}
@media (max-width:700px){
  .hero{background-position:center center, 32% center}
}

/* ---------- Header / Navigation ---------- */
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 0;
  max-width:1240px;margin:0 auto}
.nav__logo{flex:none;display:block}
.nav__logo img{height:30px;display:block}
.nav__links{display:flex;align-items:center;gap:30px;font-size:14.5px;font-weight:600}
.nav__actions{display:flex;align-items:center;gap:10px}
.nav__cta{display:inline-block;background:#fff;color:#0b1512;border-radius:999px;padding:10px 22px;
  font-size:14px;font-weight:700;white-space:nowrap}
.nav__cta:hover{background:rgba(255,255,255,.85)!important;color:#0b1512;text-decoration:none}

/* Nav-Textfarben je nach Hintergrund */
.nav--light .nav__link{color:rgba(255,255,255,.85)}
.nav--dark  .nav__link{color:rgba(11,21,18,.85)}
.nav__link{font-weight:600}
.nav__link:hover{text-decoration:none;opacity:.85}
.nav--light .nav__link--active{color:#fff;border-bottom:2px solid #fff;padding-bottom:2px}
.nav--dark  .nav__link--active{color:#0b1512;border-bottom:2px solid #0b1512;padding-bottom:2px}
.nav__link--active:hover{text-decoration:none}

/* Burger */
.burger{display:none;flex-direction:column;justify-content:center;align-items:center;gap:4.5px;
  width:42px;height:42px;border-radius:12px;border:0;cursor:pointer;flex:none;padding:0}
.nav--light .burger{background:rgba(255,255,255,.18)}
.nav--dark  .burger{background:rgba(11,21,18,.14)}
.burger span{width:18px;height:2px;border-radius:2px;display:block}
.nav--light .burger span{background:#fff}
.nav--dark  .burger span{background:#0b1512}

/* Mobiles Dropdown-Menü */
.mobile-menu{display:none;flex-direction:column;background:#0b1512;border-radius:18px;padding:8px;margin-top:2px}
.mobile-menu.is-open{display:flex}
.mm-link{color:#fff;font-size:15px;font-weight:600;padding:13px 16px;border-radius:12px}
.mm-link:hover{background:rgba(255,255,255,.08)!important;color:#fff;text-decoration:none}
.mm-link--active{color:#35e0a8;font-weight:700}
.mm-cta{background:#fff;color:#0b1512;font-weight:700;padding:13px 16px;border-radius:12px;
  margin-top:6px;text-align:center}
.mm-cta:hover{background:rgba(255,255,255,.85)!important;color:#0b1512;text-decoration:none}

/* Umschaltpunkt Desktop <-> Mobil */
@media (max-width:900px){
  .nav__links{display:none}
  .nav__cta{display:none}
  .burger{display:flex}
}

/* ---------- Landingpage-Kopf (Ads) ----------
   Nur Logo + ein CTA, kein Menü. Der CTA muss deshalb auch mobil sichtbar
   bleiben – die allgemeine Regel blendet ihn unter 900px aus (Burger-Ersatz). */
.nav--lp .nav__cta{display:inline-block}
@media (max-width:520px){
  .nav--lp .nav__cta{padding:9px 16px;font-size:13px}
  .nav--lp .nav__logo img{height:26px}
}

/* ---------- Buttons / Hover-Utilities ---------- */
.btn-green:hover{background:#35e0a8!important;color:#fff;text-decoration:none}
.btn-dark:hover{background:#1d2b26!important;color:#fff;text-decoration:none}
.btn-white:hover{background:rgba(255,255,255,.85)!important;color:#0b1512;text-decoration:none}
.lift{transition:transform .18s ease,background .18s ease}
.lift:hover{transform:translateY(-2px)}

/* Footer-Links */
.f-link{color:rgba(11,21,18,.7)}
.f-link:hover{color:#0aa574!important;text-decoration:none}
.f-link--active{color:#0aa574;font-weight:700}
.f-link--active:hover{text-decoration:none}

/* Inline-Textlinks in Fließtext */
.tlink{color:#0b1512;font-weight:700;text-decoration:underline}
.tlink:hover{color:#0aa574}

/* ---------- Bild-Platzhalter (Screenshots kommen später) ---------- */
.ph{position:absolute;inset:0;width:100%;height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:12px;text-align:center;padding:20px;
  background:linear-gradient(135deg,#eafaf3,#d3f8e8);border:2px dashed rgba(18,190,135,.5);
  color:#0b8a63}
.ph svg{opacity:.8}
.ph__label{font-size:13px;font-weight:700;letter-spacing:.01em;line-height:1.4;max-width:90%}
.ph--radius{border-radius:inherit}

/* ---------- Slideshow (Für Vermieter) ---------- */
.slides{position:relative}
.slide{display:none}
.slide.is-active{display:block}
.slide-arrow{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;
  border-radius:50%;background:rgba(11,21,18,.55);display:flex;align-items:center;justify-content:center;
  cursor:pointer;border:0}
.slide-arrow:hover{background:rgba(11,21,18,.8)}
.slide-arrow--prev{left:12px}
.slide-arrow--next{right:12px}
.dots{display:flex;justify-content:center;gap:10px;margin-top:20px}
.dot{width:10px;height:10px;border-radius:50%;background:rgba(11,21,18,.2);cursor:pointer;
  transition:background .2s;border:0;padding:0}
.dot.is-active{background:#12be87}

/* ---------- Animationen ---------- */
@keyframes im-bubble{from{opacity:0;transform:translateY(12px) scale(.95)}to{opacity:1;transform:none}}
@keyframes im-matchpulse{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(18,190,135,.55)}
  50%{transform:scale(1.06);box-shadow:0 0 0 16px rgba(18,190,135,0)}}
@keyframes im-pop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
@keyframes im-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes im-typing{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

/* ---------- Cookie-Consent ---------- */
@keyframes im-cc-rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.cc-wrap{position:fixed;left:0;right:0;bottom:0;z-index:9999;padding:clamp(12px,2.5vw,28px)}
.cc-card{max-width:1120px;margin:0 auto;background:#0b1512;border:1px solid rgba(53,224,168,.18);
  border-radius:22px;padding:clamp(22px,3vw,32px);box-shadow:0 24px 60px rgba(5,25,18,.4);
  display:flex;flex-wrap:wrap;align-items:center;gap:clamp(20px,3vw,40px);
  animation:im-cc-rise .5s cubic-bezier(.2,.75,.3,1) both}
.cc-text{flex:1 1 380px;min-width:min(100%,280px)}
.cc-title{display:flex;align-items:center;gap:11px}
.cc-title h2{margin:0;color:#fff;font-weight:800;letter-spacing:-0.02em;font-size:clamp(19px,2.1vw,24px)}
.cc-ico{width:40px;height:40px;border-radius:12px;background:#12be87;display:flex;align-items:center;justify-content:center;flex:none}
.cc-text p{margin:14px 0 0;color:rgba(255,255,255,.7);font-size:clamp(13.5px,1.4vw,15px);line-height:1.6}
.cc-text a{color:#35e0a8;text-decoration:underline}
.cc-text a:hover{color:#12be87}
.cc-actions{flex:0 0 auto;display:flex;flex-wrap:wrap;gap:12px;align-items:center;width:100%;justify-content:flex-end}
.cc-btn{border-radius:999px;font-family:inherit;cursor:pointer;white-space:nowrap;flex:1 1 auto}
.cc-btn-decline{min-width:150px;background:transparent;color:rgba(255,255,255,.85);
  border:1.5px solid rgba(255,255,255,.3);padding:15px 30px;font-size:15px;font-weight:700}
.cc-btn-decline:hover{border-color:rgba(255,255,255,.6);color:#fff}
.cc-btn-accept{min-width:180px;background:#12be87;color:#fff;border:none;padding:16px 34px;
  font-size:15.5px;font-weight:800;box-shadow:0 8px 24px rgba(18,190,135,.4)}
.cc-btn-accept:hover{background:#35e0a8}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important}
}