/* ============================================================
   QUOIN Real Estate – Geteilte Basisstyles für alle Subpages
   Eingebunden von: auftrags-investment-prinzip.html,
   ueber-mich.html, dienstleistungen.html, impressum.html,
   datenschutz.html, verbraucherinformation.html
   ============================================================ */

/* ── SCHRIFTEN ────────────────────────────────────────────── */
@font-face { font-family:'Cinzel'; src:url('/assets/fonts/Cinzel-Regular.ttf') format('truetype'); font-weight:400; font-display:swap; }
@font-face { font-family:'Cinzel'; src:url('/assets/fonts/Cinzel-SemiBold.ttf') format('truetype'); font-weight:600; font-display:swap; }
@font-face { font-family:'Cinzel'; src:url('/assets/fonts/Cinzel-Bold.ttf') format('truetype'); font-weight:700; font-display:swap; }
@font-face { font-family:'Montserrat'; src:url('/assets/fonts/Montserrat-Light.ttf') format('truetype'); font-weight:300; font-display:swap; }
@font-face { font-family:'Montserrat'; src:url('/assets/fonts/Montserrat-LightItalic.ttf') format('truetype'); font-weight:300; font-style:italic; font-display:swap; }
@font-face { font-family:'Montserrat'; src:url('/assets/fonts/Montserrat-Regular.ttf') format('truetype'); font-weight:400; font-display:swap; }
@font-face { font-family:'Montserrat'; src:url('/assets/fonts/Montserrat-Medium.ttf') format('truetype'); font-weight:500; font-display:swap; }
@font-face { font-family:'Montserrat'; src:url('/assets/fonts/Montserrat-SemiBold.ttf') format('truetype'); font-weight:600; font-display:swap; }

/* ── CI VARIABLEN ─────────────────────────────────────────── */
:root {
  --gold:           #D4AF37;
  --gold-light:     #E8C97A;
  --gold-dark:      #B8860B;
  --gold-logo:      #A78651;
  --anthrazit:      #2B2B2B;
  --anthrazit-mid:  #222222;
  --anthrazit-light:#333333;
  --tiefschwarz:    #111111;
  --creme:          #F8F4E6;
  --text-light:     #C8C0AD;
  --border:         rgba(212,175,55,.15);
}

/* ── RESET ────────────────────────────────────────────────── */
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; overflow-x:hidden; }
body {
  background:var(--anthrazit);
  color:var(--creme);
  font-family:'Montserrat', sans-serif;
  font-weight:300;
  overflow-x:hidden;
  line-height:1.7;
}

/* ── FADE-UP ──────────────────────────────────────────────── */
.fade-up { opacity:0; transform:translateY(28px); transition:opacity .8s ease, transform .8s ease; }
.fade-up.visible { opacity:1; transform:translateY(0); }
.fade-up.d1 { transition-delay:.12s; }
.fade-up.d2 { transition-delay:.24s; }
.fade-up.d3 { transition-delay:.36s; }
.fade-up.d4 { transition-delay:.48s; }

/* ── NAV ──────────────────────────────────────────────────── */
nav {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding:0 60px; height:80px;
  display:flex; align-items:center; justify-content:space-between;
  background:rgba(34,34,34,.97);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
}
@media(max-width:768px){ nav { padding:0 24px; } }
.nav-logo { display:flex; align-items:center; gap:14px; text-decoration:none; }
.nav-logo-icon {
  width:42px; height:42px; flex-shrink:0; display:block;
  background:url('/assets/quoin-logo-icon.png') center/contain no-repeat;
}
.nav-logo-text { display:flex; flex-direction:column; }
.nav-logo-text span:first-child {
  font-family:'Cinzel', serif; font-size:15px; font-weight:600;
  letter-spacing:.2em; color:var(--gold-logo);
}
.nav-logo-text span:last-child {
  font-size:9px; font-weight:400;
  letter-spacing:.35em; color:var(--text-light); text-transform:uppercase;
}
.nav-links { display:flex; align-items:center; gap:40px; list-style:none; }
.nav-links a {
  font-size:10px; font-weight:500;
  letter-spacing:.25em; color:var(--text-light);
  text-decoration:none; text-transform:uppercase;
  position:relative; padding-bottom:4px;
  transition:color .3s;
}
.nav-links a::after {
  content:''; position:absolute; bottom:0; left:0;
  width:0; height:1px; background:var(--gold);
  transition:width .3s;
}
.nav-links a:hover { color:var(--gold); }
.nav-links a:hover::after { width:100%; }
@media(max-width:900px){ .nav-links { display:none; } }
.nav-back {
  padding:10px 24px;
  border:1px solid var(--gold); color:var(--gold);
  font-size:10px; font-weight:500;
  letter-spacing:.25em; text-transform:uppercase;
  text-decoration:none; transition:background .4s, color .4s;
}
.nav-back:hover { background:var(--gold); color:var(--anthrazit); }