/* Mira Vista Residences — Landingpage
   Aufbau wie movein2stay (sticky Topbar, Hero, Karten mit Preis-Badge, Footer
   mit Spalten), Farbwelt der Marke Mira Vista statt Petrol/Gold. */

:root{
  --gold:#C6A86D; --gold-dunkel:#a98d55;
  --ink:#1A1A1C; --ivory:#F0EEEA;
  --muted:#6f6f72; --line:#e3ded3; --bg:#fff;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Georgia,'Times New Roman',serif;color:var(--ink);background:var(--bg);
     font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
.mitte{max-width:1140px;margin:0 auto;padding:0 24px}

/* ---------- Topbar ---------- */
.top{background:var(--ink);color:#fff;padding:11px 4vw;display:flex;align-items:center;gap:16px;
     position:sticky;top:0;z-index:30;box-shadow:0 2px 14px rgba(0,0,0,.18)}
.top .brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:#fff}
.top .brand img{height:34px;width:auto}
.top .brand b{font-size:15px;letter-spacing:.16em;font-weight:400}
.top .brand small{display:block;opacity:.7;font-size:10.5px;letter-spacing:.1em}
.top .spacer{flex:1}
.top nav{display:flex;gap:22px}
.top .nav{color:#fff;text-decoration:none;font-size:12.5px;letter-spacing:.12em;
          text-transform:uppercase;opacity:.85;font-family:system-ui,sans-serif}
.top .nav:hover{opacity:1;color:var(--gold)}
.sprache{display:flex;gap:4px}
.sprache button{border:1px solid rgba(255,255,255,.28);background:none;color:#fff;cursor:pointer;
                font:inherit;font-size:11px;padding:4px 8px;letter-spacing:.08em}
.sprache button.aktiv{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.cta-top{background:var(--gold);color:var(--ink);text-decoration:none;padding:9px 17px;
         font-size:12px;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;
         font-family:system-ui,sans-serif}
.cta-top:hover{background:#fff}

/* ---------- Hero ---------- */
.hero{position:relative;height:86vh;min-height:520px;overflow:hidden;background:var(--ink)}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .schleier{position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(0,0,0,.42) 0%,rgba(0,0,0,.3) 40%,rgba(0,0,0,.72) 100%)}
.heroinhalt{position:relative;height:100%;display:flex;flex-direction:column;justify-content:center;
            align-items:center;text-align:center;color:#fff;padding:24px;max-width:900px;margin:0 auto}
.kicker{font-size:11.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:16px;
        font-family:system-ui,sans-serif}
.hero h1{font-size:clamp(33px,6.2vw,68px);font-weight:400;line-height:1.1;letter-spacing:.01em;margin-bottom:16px}
.heroSub{font-size:clamp(15px,2vw,19px);max-width:640px;color:rgba(255,255,255,.9);margin-bottom:28px}
.heroKnoepfe{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-bottom:30px}
.heroBeweis{display:flex;gap:22px;flex-wrap:wrap;justify-content:center;font-size:12.5px;
            color:rgba(255,255,255,.82);font-family:system-ui,sans-serif}

/* ---------- Knöpfe ---------- */
.knopf{display:inline-block;padding:12px 24px;border:1px solid var(--ink);background:var(--ink);
       color:#fff;text-decoration:none;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
       cursor:pointer;font-family:system-ui,sans-serif;transition:.15s}
.knopf:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.knopf.leer{background:transparent;color:var(--ink)}
.knopf.leer:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.hero .knopf{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.hero .knopf:hover{background:#fff;border-color:#fff}
.hero .knopf.leer{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.7);color:#fff}
.hero .knopf.leer:hover{background:#fff;color:var(--ink)}
.knopf.gross{padding:15px 32px;font-size:13px}
.knopf[disabled]{opacity:.55;cursor:not-allowed}

/* ---------- Abschnitte ---------- */
section{padding:78px 0}
section.band{background:var(--ivory)}
section.dunkel{background:var(--ink);color:#e8e6e1}
.vorspann{font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);
          margin-bottom:9px;font-family:system-ui,sans-serif}
h2{font-size:clamp(24px,3.4vw,38px);font-weight:400;letter-spacing:.01em;margin-bottom:12px}
.einleitung{max-width:660px;color:var(--muted);margin-bottom:38px}
section.dunkel .einleitung{color:#b6b3ac}

/* ---------- Vorteile ---------- */
.vorteile{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:38px}
.vorteil{text-align:center}
.vzahl{font-size:44px;color:var(--gold);line-height:1;margin-bottom:10px}
.vorteil h3{font-size:16px;font-weight:400;letter-spacing:.06em;margin-bottom:7px}
.vorteil p{font-size:14px;color:var(--muted)}

/* ---------- Karten ---------- */
.karten{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:26px}
.karte{background:#fff;border:1px solid var(--line);display:flex;flex-direction:column}
.bildbox{position:relative}
.bildbox img{aspect-ratio:4/3;object-fit:cover;width:100%}
.preisbadge{position:absolute;bottom:0;right:0;background:var(--gold);color:var(--ink);
            padding:7px 14px;font-size:12px;letter-spacing:.06em;font-family:system-ui,sans-serif}
.preisbadge b{font-size:16px}
.preisbadge.grau{background:rgba(26,26,28,.82);color:#fff;text-transform:uppercase;letter-spacing:.14em;font-size:11px}
.karte .text{padding:22px;display:flex;flex-direction:column;flex:1}
.karte h3{font-size:20px;font-weight:400;margin-bottom:8px}
.karte .daten{display:flex;gap:8px;flex-wrap:wrap;font-size:13px;color:var(--muted);
              margin-bottom:12px;font-family:system-ui,sans-serif}
.karte .daten b{color:var(--ink);font-weight:600}
.karte p{font-size:14.5px;color:#555;margin-bottom:18px}
.karte .aktion{margin-top:auto;display:flex;gap:9px;flex-wrap:wrap}
.karte.bald{opacity:.72}

/* ---------- Vlorë ---------- */
.vlorablock{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:start}
.vlorablock p{margin-bottom:14px;color:#c9c6c0}
.tipps{list-style:none;margin-top:18px;font-size:14px}
.tipps li{padding:7px 0 7px 20px;position:relative;border-bottom:1px solid rgba(255,255,255,.1);color:#d8d5cf}
.tipps li::before{content:"›";position:absolute;left:0;color:var(--gold)}
.filmbox video{width:100%;background:#000}
.filmnote{font-size:12.5px;color:#9c9992;margin-top:9px;font-family:system-ui,sans-serif}

/* ---------- Galerie ---------- */
.galerie{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:8px}
.galerie img{aspect-ratio:4/3;object-fit:cover;cursor:pointer;transition:opacity .2s}
.galerie img:hover{opacity:.85}

/* ---------- Lage ---------- */
.lage{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.lage table{width:100%;border-collapse:collapse;font-size:14.5px}
.lage td{padding:10px 0;border-bottom:1px solid var(--line)}
.lage td:last-child{text-align:right;color:var(--muted);white-space:nowrap}
.hinweis{background:#fff;border-left:3px solid var(--gold);padding:16px 19px;font-size:14px}

/* ---------- Buchung ---------- */
.buchung{display:grid;grid-template-columns:1fr 370px;gap:40px;align-items:start}
.feld{margin-bottom:15px}
.feld label{display:block;font-size:11px;letter-spacing:.13em;text-transform:uppercase;
            color:var(--muted);margin-bottom:5px;font-family:system-ui,sans-serif}
.feld input,.feld select,.feld textarea{width:100%;padding:12px 13px;border:1px solid var(--line);
  font:inherit;font-size:15px;background:#fff;color:var(--ink)}
.feld input:focus,.feld select:focus,.feld textarea:focus{outline:2px solid var(--gold);outline-offset:-2px}
.reihe{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.klein{font-size:12.5px;color:var(--muted);margin-top:10px}

.preisbox{background:var(--ivory);padding:26px;position:sticky;top:92px}
.preisbox h3{font-size:16px;font-weight:400;margin-bottom:15px;letter-spacing:.05em}
.pz{display:flex;justify-content:space-between;font-size:14.5px;padding:7px 0}
.pz.summe{border-top:1px solid var(--line);margin-top:9px;padding-top:13px;font-size:19px}
.preisbox .leer{color:var(--muted);font-size:14px}
.sparen{margin-top:14px;padding:11px 13px;background:#fff;border-left:3px solid var(--gold);font-size:13px}

.meldung{padding:13px 16px;font-size:14px;margin-bottom:15px;display:none}
.meldung.sichtbar{display:block}
.meldung.fehler{background:#FDECEA;border-left:3px solid #C0392B}
.meldung.erfolg{background:#EAF5EC;border-left:3px solid #27853C}
.meldung.info{background:#FFF4D6;border-left:3px solid #E0A800}

/* ---------- Lightbox ---------- */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.94);z-index:100;display:none;
          align-items:center;justify-content:center;padding:30px}
.lightbox.auf{display:flex}
.lightbox img{max-width:94vw;max-height:90vh;object-fit:contain}
.lightbox .zu{position:absolute;top:20px;right:28px;color:#fff;font-size:34px;cursor:pointer;
              background:none;border:none;line-height:1}

/* ---------- Footer ---------- */
.foot{background:var(--ink);color:#b9b6b0;padding:52px 0 32px;font-size:13.5px}
.foot .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:32px}
.foot .fbrand{color:#fff;font-size:15px;letter-spacing:.16em;margin-bottom:9px}
.foot h4{color:#fff;font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:400;
         margin-bottom:9px;font-family:system-ui,sans-serif}
.foot a{color:var(--gold);text-decoration:none}
.platzhalter{background:#4a4327;padding:2px 7px;font-size:12px}
.fnote{border-top:1px solid rgba(255,255,255,.12);margin-top:28px;padding-top:16px;
       color:#85827c;font-size:12px}

@media(max-width:880px){
  .vlorablock,.lage,.buchung{grid-template-columns:1fr}
  .preisbox{position:static}
  .top nav{display:none}
  section{padding:52px 0}
  .hero{height:78vh}
}

/* Direktweg WhatsApp/Telefon unter dem Formular.
   In Albanien schreiben viele Gäste lieber kurz, als ein Formular auszufüllen —
   der Weg darf deshalb nicht versteckt sein. */
.direktweg{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);
           display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:14px;color:var(--muted)}
.direktweg .wa{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--gold);padding-bottom:1px}
.direktweg .wa:hover{color:var(--gold)}
.direktweg .wa b{font-weight:400;letter-spacing:.02em}

/* Einheit ohne Fotos: Platzhalter statt leerer Kachel.
   Wichtig für die Übergabe — eine neu angelegte Wohnung sieht sofort ordentlich
   aus, auch bevor der Betreiber Bilder hochgeladen hat. */
.kein-bild{aspect-ratio:4/3;background:var(--ivory);display:flex;align-items:center;
           justify-content:center;color:var(--muted);font-size:13px;letter-spacing:.1em;
           text-transform:uppercase;font-family:system-ui,sans-serif}

/* ---------- KI-Gästeberater ---------- */
.chat-knopf{position:fixed;right:22px;bottom:22px;z-index:60;background:var(--ink);color:#fff;
  border:none;border-radius:30px;padding:13px 20px;cursor:pointer;font-family:system-ui,sans-serif;
  font-size:13.5px;letter-spacing:.06em;display:flex;align-items:center;gap:9px;
  box-shadow:0 6px 22px rgba(0,0,0,.26)}
.chat-knopf:hover{background:var(--gold);color:var(--ink)}
.chat-knopf.offen{display:none}
.chat-punkt{width:8px;height:8px;border-radius:50%;background:var(--gold);
  animation:pulsieren 2s ease-in-out infinite}
.chat-knopf:hover .chat-punkt{background:var(--ink)}
@keyframes pulsieren{0%,100%{opacity:1}50%{opacity:.35}}

/* PFLICHT, sonst laesst sich das Fenster nie schliessen.
   Das hidden-Attribut setzt display:none nur ueber das Standard-Stylesheet des
   Browsers. Jede eigene Regel mit display:flex gewinnt dagegen — das Fenster
   blieb also dauerhaft sichtbar, egal wie oft man auf das x klickte. Erst diese
   Zeile macht hidden wieder wirksam (Klasse + Attribut schlaegt Klasse allein). */
.chat-fenster[hidden],
.chat-uebergabe[hidden]{display:none}

.chat-fenster{position:fixed;right:22px;bottom:22px;z-index:61;width:370px;max-width:calc(100vw - 32px);
  height:540px;max-height:calc(100vh - 44px);background:#fff;border:1px solid var(--line);
  box-shadow:0 10px 40px rgba(0,0,0,.22);display:flex;flex-direction:column}
.chat-kopf{background:var(--ink);color:#fff;padding:13px 16px;display:flex;justify-content:space-between;
  align-items:center;gap:12px}
.chat-kopf strong{font-weight:400;font-size:14.5px;letter-spacing:.04em;display:block}
.chat-kopf small{color:var(--gold);font-size:11px;font-family:system-ui,sans-serif}
/* Schliessen-Knopf: mindestens 44x44 als Trefferflaeche. Vorher waren es
   23x26 — auf dem Handy trifft man das mit dem Daumen nur mit Glueck, und wer
   ein Chatfenster nicht zubekommt, verlaesst die Seite. Das Zeichen bleibt
   optisch gleich gross, nur der klickbare Bereich waechst. */
.chat-kopf button{background:none;border:none;color:#fff;font-size:26px;cursor:pointer;
  line-height:1;padding:0;min-width:44px;min-height:44px;margin:-9px -12px -9px 0;
  display:flex;align-items:center;justify-content:center;border-radius:8px}
.chat-kopf button:hover{background:rgba(255,255,255,.14)}
.chat-kopf button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

.chat-verlauf{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;
  background:var(--ivory)}
.chat-zeile{padding:10px 13px;font-size:14.5px;line-height:1.5;max-width:86%;white-space:pre-wrap}
.chat-zeile.user{background:var(--ink);color:#fff;align-self:flex-end;border-radius:12px 12px 3px 12px}
.chat-zeile.bot{background:#fff;border:1px solid var(--line);align-self:flex-start;
  border-radius:12px 12px 12px 3px}
.chat-zeile.warte{color:var(--muted);font-style:italic}
.chat-zeile.hinweis{background:#EAF5EC;border-color:#bfe0c8;font-size:13px;font-family:system-ui,sans-serif}

.chat-uebergabe{padding:11px 16px;background:#FBF9F4;border-top:1px solid var(--line);
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:13px;font-family:system-ui,sans-serif}
.chat-uebergabe span{color:var(--muted)}
.chat-uebergabe a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--gold);padding-bottom:1px}
.chat-uebergabe a:hover{color:var(--gold)}

.chat-eingabe{display:flex;border-top:1px solid var(--line);background:#fff}
.chat-eingabe input{flex:1;border:none;padding:14px 16px;font:inherit;font-size:14.5px;outline:none}
.chat-eingabe button{border:none;background:var(--gold);color:var(--ink);width:52px;cursor:pointer;
  font-size:19px}
.chat-eingabe button:hover{background:var(--ink);color:#fff}

@media(max-width:520px){
  .chat-fenster{right:8px;left:8px;bottom:8px;width:auto;height:calc(100vh - 90px)}
  .chat-knopf{right:12px;bottom:12px}
}

/* ===================== Belegungskalender ===================== */
/* [hidden] MUSS hier stehen — display:flex wuerde es sonst ueberstimmen und
   das Fenster liesse sich nie schliessen (derselbe Fehler wie beim Chat). */
.kal-box[hidden]{display:none}
.kal-box{position:fixed;inset:0;z-index:80;background:rgba(15,18,20,.62);
  display:flex;align-items:center;justify-content:center;padding:16px;overflow-y:auto}
.kal-fenster{background:var(--ivory);border-radius:14px;width:100%;max-width:760px;
  max-height:92vh;display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.4)}

.kal-kopf{background:var(--ink);color:#fff;padding:15px 18px;display:flex;
  justify-content:space-between;align-items:center;gap:12px}
.kal-kopf strong{display:block;font-weight:400;font-size:16px;letter-spacing:.03em}
.kal-kopf small{color:var(--gold);font-size:11.5px;font-family:system-ui,sans-serif}
.kal-kopf button{background:none;border:none;color:#fff;font-size:26px;cursor:pointer;
  min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;
  border-radius:8px;padding:0;margin:-9px -10px -9px 0}
.kal-kopf button:hover{background:rgba(255,255,255,.14)}

.kal-netz{padding:14px 18px;overflow-y:auto;flex:1}
.kal-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.kal-nav > button{background:#fff;border:1px solid var(--line);border-radius:9px;
  min-width:44px;min-height:44px;font-size:20px;cursor:pointer;color:var(--ink)}
.kal-nav > button:disabled{opacity:.35;cursor:default}
.kal-legende{display:flex;gap:16px;font-size:12.5px;font-family:system-ui,sans-serif;color:var(--muted)}
.kal-legende i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:6px;
  vertical-align:-1px;border:1px solid var(--line)}
.kal-legende i.frei{background:#fff}
.kal-legende i.belegt{background:#E7E2DA;border-color:#d6cfc4}

.kal-monate{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.kal-mtitel{font-size:15px;letter-spacing:.04em;margin-bottom:8px;text-align:center}
.kal-wtage{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:4px}
.kal-wtage span{text-align:center;font-size:10.5px;color:var(--muted);
  font-family:system-ui,sans-serif;letter-spacing:.06em}
.kal-tage{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.kal-leer{aspect-ratio:1}

.kal-tag{aspect-ratio:1;border:1px solid var(--line);background:#fff;border-radius:7px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  cursor:pointer;padding:0;font-family:inherit;color:var(--ink);transition:background .12s}
.kal-tag:hover:not(:disabled){background:var(--gold);border-color:var(--gold)}
.kal-d{font-size:13px;line-height:1}
.kal-p{font-size:9.5px;color:var(--muted);font-family:system-ui,sans-serif;line-height:1}
.kal-tag:hover:not(:disabled) .kal-p{color:var(--ink)}
.kal-tag.vorbei{background:transparent;border-color:transparent;color:#c9c3b8;cursor:default}
.kal-tag.belegt{background:#E7E2DA;border-color:#d6cfc4;color:#a49a8c;cursor:default;
  text-decoration:line-through}
.kal-tag.belegt .kal-p{display:none}
.kal-tag.bereich{background:#F2E7CF;border-color:#e6d5aa}
.kal-tag.rand{background:var(--ink);border-color:var(--ink);color:#fff}
.kal-tag.rand .kal-p{color:var(--gold)}

.kal-fuss{border-top:1px solid var(--line);padding:14px 18px;background:#fff}
.kal-lade{color:var(--muted);font-size:14px;font-family:system-ui,sans-serif}
.kal-warn{color:#9a3412;font-size:13.5px;font-family:system-ui,sans-serif;margin:8px 0 0}
.kal-summe{margin-bottom:12px}
.kal-zeilen > div{display:flex;justify-content:space-between;gap:12px;font-size:14px;
  padding:3px 0;font-family:system-ui,sans-serif}
.kal-zeilen span{color:var(--muted)}
.kal-total{display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--line);
  margin-top:8px;padding-top:9px;font-size:16.5px}
.kal-total b{color:var(--ink)}
.kal-fuss .knopf{width:100%;text-align:center}
.kal-fuss .knopf.aus{opacity:.4;cursor:not-allowed}

@media (max-width:640px){
  .kal-monate{grid-template-columns:1fr}
  .kal-fenster{max-height:96vh}
  .kal-netz{padding:12px}
}