/* ===========================================================
   BLACKI.LUC STUDIO
   style.css
=========================================================== */

:root{

    --bg:#0d0d0d;
    --card:#151515;
    --text:#ececec;
    --text-light:#b8b8b8;
    --border:#2c2c2c;

    --radius:18px;

    --transition:.35s;

    --max-width:1150px;

}

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

      margin:0;
      padding:0;

    background:#0d0d0d;

    color:var(--text);

    font-family:"Manrope",sans-serif;

    line-height:1.8;

    overflow-x:hidden;
   

}

/* ===================== HERO ===================== */

.hero{

    display:block;

    background:white;

    width:100%;

    margin:0;

    padding:0;

    min-height:60vh;

}

.hero img{

    width:100%;

    max-width:1900px;

    display:block;

    object-fit:cover;

    animation:heroFade 1.3s ease;

}

/* ===================== CONTAINER ===================== */

.container{

    max-width:var(--max-width);

    margin:auto;

    padding-left:35px;
    padding-right:35px;

}

/* ===================== SECTION ===================== */

section{

    margin-top:150px;

}

section:first-child{

    margin-top:140px;

}

/* ===================== HEADINGS ===================== */

h2{

    font-size:2.1rem;

    letter-spacing:4px;

    text-transform:uppercase;

    font-weight:300;

    margin-bottom:18px;

}

.line{

    width:70px;

    height:2px;

    background:#cfcfcf;

    margin-bottom:60px;

}

p{

    max-width:760px;

    color:var(--text-light);

    font-size:1.05rem;

}

/* ===================== INSTAGRAM ===================== */

.instagram{

    margin-top:45px;

    display:inline-flex;

    align-items:center;

    gap:15px;

    color:white;

    text-decoration:none;

    border:1px solid var(--border);

    border-radius:14px;

    padding:18px 28px;

    transition:var(--transition);

    font-size:1rem;

}

.instagram:hover{

    transform:translateY(-5px);

    border-color:#777;

    box-shadow:0 0 30px rgba(255,255,255,.08);

}

/* ===================== HINWEIS ===================== */

.notice{

    margin-top:45px;

    border:1px solid var(--border);

    border-radius:18px;

    padding:25px;

    background:#111;

}

.notice strong{

    display:block;

    margin-bottom:12px;

}

/* ===================== KARTEN ===================== */

.cards{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}

.card{

    background:var(--card);

    border:1px solid var(--border);

    border-radius:var(--radius);

    padding:40px;

    transition:.35s;

}

.card:hover{

    transform:translateY(-10px);

    border-color:#7b7b7b;

    box-shadow:0 15px 40px rgba(255,255,255,.06);

}

.card h3{

    font-size:1.5rem;

    font-weight:500;

    margin-bottom:20px;

}

.price{

    display:block;

    font-size:2rem;

    margin-bottom:18px;

}

.card small{

    display:block;

    margin-top:30px;

    color:#aaa;

}
/* ===========================================================
   GOOGLE MAPS BUTTON
=========================================================== */

.maps{

    display:inline-block;

    margin-top:40px;
   
   margin-bottom:70px;

    padding:18px 34px;

    border-radius:14px;

    border:1px solid var(--border);

    color:white;

    text-decoration:none;

    transition:var(--transition);

    background:#181818;

    font-weight:500;

}

.maps:hover{

    transform:translateY(-5px);

    border-color:#8a8a8a;

    box-shadow:0 0 35px rgba(255,255,255,.08);

}

/* ===========================================================
   FOOTER
=========================================================== */

footer{

    margin-top:180px;

    padding:50px 25px;

    border-top:1px solid var(--border);

    text-align:center;

    color:#888;

    font-size:.95rem;

}

footer a{

    color:#cfcfcf;

    text-decoration:none;

    transition:.3s;

}

footer a:hover{

    color:white;

}

footer span{

    margin:0 12px;

}

/* ===========================================================
   SCROLL TO TOP
=========================================================== */

#topButton{

    position:fixed;

    right:30px;

    bottom:30px;

    width:52px;

    height:52px;

    border:none;

    border-radius:50%;

    background:#1b1b1b;

    color:white;

    cursor:pointer;

    opacity:0;

    pointer-events:none;

    transition:.35s;

    font-size:20px;

    z-index:999;

    border:1px solid #333;

}

#topButton.show{

    opacity:1;

    pointer-events:auto;

}

#topButton:hover{

    transform:translateY(-5px);

    border-color:#888;

}

/* ===========================================================
   FADE ANIMATION
=========================================================== */

.fade{

    opacity:0;

    transform:translateY(50px);

    transition:

    opacity .9s ease,

    transform .9s ease;

}

.fade.show{

    opacity:1;

    transform:translateY(0);

}

/* ===========================================================
   HERO ANIMATION
=========================================================== */

@keyframes heroFade{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ===========================================================
   RESPONSIVE
=========================================================== */

@media(max-width:1000px){

.cards{

grid-template-columns:1fr;

}

.hero{

min-height:38vh;

}

section{

margin-top:140px;

}

h2{

font-size:1.8rem;

letter-spacing:3px;

}

}

@media(max-width:700px){

.container{

padding-left:25px;

padding-right:25px;

}

.hero{

min-height:32vh;

}

.hero img{

    width:120%;
    max-width:none;
    margin-left:-10%;
    display:block;

}

section{

margin-top:120px;

}

section:first-child{

margin-top:90px;

}

h2{

font-size:1.6rem;

margin-bottom:20px;

}

.line{

margin-bottom:35px;

}

.card{

padding:32px;

}

.instagram{

font-size:1.4rem;

width:100%;

justify-content:center;

}

.maps{

width:100%;

text-align:center;

}

#topButton{

right:20px;

bottom:20px;

}

}

/* ===========================================================
   PARALLAX
=========================================================== */

.hero img{

will-change:transform;

}
/* ===========================
   LEGAL PAGES
=========================== */

.legal{

    padding-top:140px;
    
    padding-bottom:120px;
    
    }
    
    .legal h1{
    
    font-size:3rem;
    
    font-weight:300;
    
    letter-spacing:5px;
    
    margin-bottom:25px;
    
    }
    
    .legal h2{
    
    margin-top:80px;
    
    font-size:1.5rem;
    
    }
    
    .legal p{
    
    margin-top:18px;
    
    max-width:700px;
    
    }