/* ============================================================
   DECO NIGHTS — Navy + Gold Theme fuer lux-cy.com
   Uebersteuert style.css; style.css bleibt unveraendert,
   damit das Theme jederzeit durch Entfernen dieses <link> faellt.
   ============================================================ */
/* ============================================================
   DECO NIGHTS — Vorschau-Theme (übersteuert style.css)
   Navy + Gold, wie die QR-Karte. Gilt fuer alle Seiten (nach style.css eingebunden).
   ============================================================ */
:root{
  --d-navy:#0a1f3a;
  --d-navy-2:#0d2647;
  --d-navy-3:#12305a;
  --d-gold:#d6af6a;
  --d-gold-2:#b8914d;
  --d-cream:#fdfbf5;
  --d-text:#e8e2d4;
  --d-muted:#a9b5c6;
}

/* Kein position:fixed-Overlay und kein zweiter Blur-Layer: beides muesste bei
   jedem Scroll-Frame neu gerastert werden (spuerbares Ruckeln auf dem Handy).
   Stattdessen EIN gestapelter Hintergrund direkt auf dem Body. */
body{
  color:var(--d-text);
  background-color:var(--d-navy);
  background-image:
    linear-gradient(180deg,rgba(18,48,90,.55) 0%,rgba(10,31,58,.93) 46%,rgba(8,26,48,.97) 100%),
    url('../img/deco-tile.jpg');
  background-size:auto,620px;
  background-repeat:no-repeat,repeat;
  background-attachment:scroll,scroll;
}

h1,h2,h3{color:var(--d-cream)}
h1,h2{font-family:"Playfair Display",Georgia,serif;font-weight:600;letter-spacing:.01em}
p{color:var(--d-text)}
.muted{color:var(--d-muted)}
a{color:var(--d-gold)}
a:hover{color:#e9c98d}

/* ---- Zierrahmen wie auf der Karte ---- */
.deco-frame{position:relative}
.deco-frame::before{
  content:"";position:absolute;inset:26px;pointer-events:none;
  border:1px solid rgba(214,175,106,.55);border-radius:10px;
}
.deco-frame::after{
  content:"";position:absolute;inset:38px;pointer-events:none;
  border:1px solid rgba(214,175,106,.22);border-radius:6px;
}

/* ---- Header ---- */
.site-header{
  background:rgba(8,26,48,.86);
  backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid rgba(214,175,106,.38);
}
.logo{color:var(--d-cream);font-family:"Playfair Display",Georgia,serif;font-weight:600;letter-spacing:2px}
.logo:hover{color:var(--d-cream)}
.logo .dot{color:var(--d-gold)}
.nav-links a{color:var(--d-text)}
.nav-links a:hover{color:var(--d-gold)}
.lang{background:rgba(255,255,255,.06);border-color:rgba(214,175,106,.35);color:var(--d-text)}
.lang option{background:var(--d-navy-2);color:var(--d-text)}
.switch{border-color:rgba(214,175,106,.35)}
.switch button{background:transparent;color:var(--d-muted)}
.switch button.active{background:var(--d-gold);color:#10233d}

/* ---- Buttons ---- */
.btn-primary{
  background:linear-gradient(180deg,#e0bd7d,#c39a52);color:#10233d;
  box-shadow:0 8px 22px rgba(184,145,77,.30);
}
.btn-primary:hover{background:linear-gradient(180deg,#eccb90,#cfa75d);color:#10233d}
.btn-ghost{background:rgba(255,255,255,.05);color:var(--d-cream);border-color:rgba(214,175,106,.45)}
.btn-ghost:hover{border-color:var(--d-gold);background:rgba(214,175,106,.14)}

/* ---- Hero ---- */
.hero{
  background:
    linear-gradient(180deg,rgba(8,26,48,.62) 0%,rgba(8,26,48,.70) 55%,rgba(10,31,58,.94) 100%),
    url('../img/deco-hero.jpg') center 42%/cover no-repeat;
  padding:78px 0 0;
}
@media (max-width:760px){
  .hero{background:
    linear-gradient(180deg,rgba(8,26,48,.66) 0%,rgba(10,31,58,.95) 100%),
    url('../img/deco-hero.jpg') center 42%/cover no-repeat}
}
.hero h1{color:var(--d-cream);text-shadow:0 2px 26px rgba(0,0,0,.45)}
.hero .lead{color:#dfe6ef}
.pill{
  background:rgba(214,175,106,.13);border:1px solid rgba(214,175,106,.55);
  color:#eccf95;backdrop-filter:blur(4px);
}
.pill svg{fill:var(--d-gold)}

/* Goldene Trennlinie mit Punkt – wie auf der Karte */
.deco-rule{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 0 26px}
.deco-rule i{display:block;height:1px;width:64px;background:linear-gradient(90deg,transparent,var(--d-gold))}
.deco-rule i+i{background:linear-gradient(90deg,var(--d-gold),transparent)}
.deco-rule b{width:7px;height:7px;border-radius:50%;background:var(--d-gold)}

/* ---- Suchleiste ---- */
.searchbar{
  background:rgba(12,34,62,.80);
  border:1px solid rgba(214,175,106,.42);
  box-shadow:0 24px 60px rgba(0,0,0,.45);
  backdrop-filter:blur(10px);
}
.field label{color:#c6b48c}
.field input,.field select{
  background:rgba(255,255,255,.94);border-color:rgba(214,175,106,.30);color:#10233d;
}
.field input:focus,.field select:focus{border-color:var(--d-gold);box-shadow:0 0 0 3px rgba(214,175,106,.25)}

/* ---- Sektionen ---- */
.section.soft{background:rgba(6,20,38,.55)}

/* ---- Apartment-Karten: helle Kacheln wie die QR-Kacheln ---- */
.card{
  background:var(--d-cream);
  border:1px solid rgba(214,175,106,.40);
  box-shadow:0 14px 34px rgba(0,0,0,.34);
}
.card:hover{box-shadow:0 22px 52px rgba(0,0,0,.48);border-color:var(--d-gold)}
.card h3{color:#10233d;font-family:"Playfair Display",Georgia,serif;font-weight:600}
.card .loc{color:#6b7385}
.card .price{color:#10233d}
.card .price span:last-child{color:#6b7385}
.badge{background:#0f2a4d;color:#e6c88e;letter-spacing:.06em}
.cover-soon{background:linear-gradient(135deg,#0d2647 0%,#153a6b 55%,#8a6a10 165%)}

/* ---- Trust ---- */
.trust .ico{background:rgba(214,175,106,.14);border:1px solid rgba(214,175,106,.40)}
.trust .ico svg{stroke:var(--d-gold)}
.trust .item h3{color:var(--d-cream);font-size:18px}

/* ---- FAQ ---- */
.faq details{
  background:rgba(12,34,62,.62);
  border:1px solid rgba(214,175,106,.28);
}
.faq summary{color:var(--d-cream)}
.faq summary::after{color:var(--d-gold)}
.faq details p{color:var(--d-muted)}

/* ---- Footer ---- */
.site-footer{
  background:#061426;
  border-top:1px solid rgba(214,175,106,.38);
  color:var(--d-muted);margin-top:0;
}
.site-footer .logo{color:var(--d-cream)}
.site-footer h3{color:var(--d-cream)}
.site-footer a{color:var(--d-muted)}
.site-footer a:hover{color:var(--d-gold)}
.fine{border-top:1px solid rgba(214,175,106,.18);color:#8494a8}

/* ---- Detailseiten ----------------------------------------------------
   Diese Bausteine kommen nur auf den Apartment-Seiten vor und standen
   noch auf den hellen Werten aus style.css: dunkelgraue Schrift und
   navyblaue Icons auf navyblauem Grund = praktisch unlesbar.
   Fliesstext bekommt zusaetzlich etwas mehr Gewicht, weil dieselbe
   Strichstaerke auf dunklem Grund duenner wirkt als auf hellem.       */
body{font-weight:450}
p,li,.muted,.fine,label,summary,.lead{font-weight:450}

.amenities li{color:var(--d-cream);font-weight:500;letter-spacing:.005em}
.am-ico{color:var(--d-gold)}
.am-ico use,.am-ico svg{color:var(--d-gold)}
svg.ico-svg{stroke:var(--d-gold)}

.divider{border-top-color:rgba(214,175,106,.30)}
hr{border-color:rgba(214,175,106,.30)}

/* Platzhalterflaechen (Karte, „mehr Fotos") */
.ph{background:rgba(12,34,62,.55);border:1px dashed rgba(214,175,106,.35);color:var(--d-muted)}
.smoobu-slot{background:rgba(12,34,62,.55);border-color:rgba(214,175,106,.40);color:var(--d-muted)}

/* Buchungsbox rechts */
.booking{background:rgba(12,34,62,.86);border-color:rgba(214,175,106,.42);
  box-shadow:0 24px 60px rgba(0,0,0,.45)}
.booking .price{color:var(--d-cream)}
.booking h3{color:var(--d-cream)}
.resform label,.bookform label{color:#c6b48c;font-weight:600}
.resform input,.resform select,.resform textarea,
.bookform input,.bookform select{background:rgba(255,255,255,.95);color:#10233d;
  border-color:rgba(214,175,106,.30)}
.resform input:focus,.resform select:focus,.resform textarea:focus,
.bookform input:focus,.bookform select:focus{border-color:var(--d-gold);
  box-shadow:0 0 0 3px rgba(214,175,106,.25)}

/* Galerie + mobile Buchungsleiste */
.gallery img,.gallery .ph{background:rgba(12,34,62,.6)}
.mobile-book{background:rgba(8,26,48,.94);border-top:1px solid rgba(214,175,106,.38)}
.mobile-book strong{color:var(--d-cream)}

/* Preis-/Verfuegbarkeitskalender (rates-widget) */
#rates-cal,.rates-cal{color:var(--d-text)}
.rates-cal .rc-month,.rc-month{color:var(--d-cream)}
.rates-cal .rc-day,.rc-day{color:var(--d-text)}
.rates-cal .rc-dow,.rc-dow{color:var(--d-muted)}