/* =======================
   --- Base Layout ---
======================= */
body {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    background-color: #111; /* Schwarz / Anthrazit */
    color: #fff;
}

a {
    text-decoration: none;
    color: inherit;
}
/*
img {
    max-width: 100%;
    display: block;
}
*/
/* =======================
   --- Header / Navigation ---
======================= */
#header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    background-color: rgba(0,0,0,0.85);
    backdrop-filter: blur(6px);
}

.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 40px;
}

.navbar .navbar-brand {
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    color: #fff;
    font-size: 1.8rem;
}

.navbar-nav {
    display: flex;
    gap: 25px;
}

.nav-item a {
    color: #fff;
    font-weight: 500;
    transition: all 0.3s ease;
}

.nav-item a:hover {
    color: #D9984B; /* Ocker */
}

/* =======================
   --- Hero Sections ---
======================= */
.animus-hero{

position:relative;
height:100vh;

display:flex;
align-items:center;
justify-content:center;

overflow:hidden;

}

/* Background */

.hero-bg-container{

position:absolute;
top:0;
left:0;

width:100%;
height:100%;

z-index:1;

}

.hero-bg{

width:100%;
height:100%;

object-fit:cover;
object-position:center;

transform:scale(1.05);

}

/* Cinematic Overlay */

.hero-overlay{

position:absolute;
inset:0;

background:linear-gradient(
to bottom,
rgba(0,0,0,.3),
rgba(0,0,0,.65)
);

}

.hero-overlay::after{

content:"";

position:absolute;
inset:0;

background-image:url("/wp-content/uploads/grain.png");

opacity:.05;

}

/* Content */

.hero-content{

position:relative;
z-index:2;

text-align:center;
max-width:900px;

animation:heroFade 1.8s ease;

}

.hero-title{

font-size:72px;
font-weight:700;

}

.hero-subtitle{

font-size:22px;
margin:20px 0;

color:#D19A3F;

}

/* Fade Animation */

@keyframes heroFade{

from{

opacity:0;
transform:translateY(40px);

}

to{

opacity:1;
transform:translateY(0);

}

}

.section-title{

text-align:center;
font-size:42px;
margin-bottom:60px;

}
/* =======================
   --- Feature ---
======================= */
.featured-project{

padding:120px 40px;
background:#111;

}

.featured-container{

max-width:1400px;
margin:auto;

display:grid;
grid-template-columns:1.4fr 1fr;

gap:80px;
align-items:center;

}

.featured-image img{

width:100%;
height:520px;
object-fit:cover;
border-radius:8px;

}

.featured-text h2{

font-size:42px;
margin-bottom:20px;

}

.featured-text p{

font-size:18px;
opacity:.85;
margin-bottom:30px;

}

/* =======================
   --- Buttons ---
======================= */
.btn {
    padding: 12px 28px;
    border-radius: 6px;
    font-weight: 600;
    text-transform: uppercase;
    transition: all 0.3s ease;
    cursor: pointer;
}

.btn-primary {
    background-color: #D9984B; /* Ocker */
    color: #fff;
    border: none;
}

.btn-primary:hover {
    background-color: #40C0C0; /* Türkis */
    transform: scale(1.05);
}

.btn-secondary {
    background-color: transparent;
    border: 2px solid #40C0C0; /* Türkis */
    color: #40C0C0;
}

.btn-secondary:hover {
    background-color: #40C0C0;
    color: #fff;
    transform: scale(1.05);
}

/* =======================
   --- Services Grid ---
======================= */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px,1fr));
    gap: 30px;
    padding: 80px 20px;
    margin-top: 20px;
}

.service-item {
    background: #1e1e1e;
    padding: 25px;
    border-radius: 10px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-item img {
    width: 100%;
    height: auto;
    border-radius: 6px;
    margin-bottom: 15px;
}

.service-item h3 {
    margin: 12px 0;
    color: #D9984B; /* Ocker */
}

.service-item p {
    color: #fff;
    opacity: 0.85;
}

.service-item:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}

/* =======================
   --- Portfolio Grid ---
======================= */
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
    gap: 30px;
    padding: 80px 40px;
}

.portfolio-container{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
}

.project-card{

position:relative;
overflow:hidden;
border-radius:8px;

}

.project-card img{

width:100%;
height:420px;
object-fit:cover;

transition:transform .6s ease;

}

.project-overlay{

position:absolute;
inset:0;

display:flex;
flex-direction:column;
justify-content:center;
align-items:center;

background:rgba(0,0,0,.6);

opacity:0;

transition:opacity .4s ease;

}

.project-overlay h3{

color:#D19A3F;
font-size:22px;

transform:translateY(20px);
transition:.4s;

}

.project-card:hover img{

transform:scale(1.08);

}

.project-card:hover .project-overlay{

opacity:1;

}

.project-card:hover h3{

transform:translateY(0);

}

/* =======================
   --- ARTIST ---
======================= */
.artist-container{

display:grid;
grid-template-columns:1fr 1fr;

gap:60px;

max-width:1200px;
margin:auto;

align-items:center;

}

.artist-image img{

width:100%;
border-radius:8px;

}
/* =======================
   --- CTA ---
======================= */
.contact-cta{

text-align:center;

padding:140px 40px;

background:#0e0e0e;

}

.contact-cta h2{

font-size:38px;
margin-bottom:30px;

}
/* =======================
   --- DIVIDER ---
======================= */
.visual-break{

height:60vh;
overflow:hidden;

}

.visual-break img{

width:100%;
height:100%;
object-fit:cover;

filter:brightness(.8);

}

/* =======================
   --- SINGLE PROJECT ---
======================= */
.single-project{
background:#000;
color:#fff;
}

/* HERO */

/* PROJECT PAGE */

.project-page{
background:#000;
color:#fff;
}

/* HERO */

.project-hero{
position:relative;
height:80vh;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
overflow:hidden;
}

.project-hero-bg img{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
object-fit:cover;
z-index:1;
}

.project-hero-content{
position:relative;
z-index:2;
max-width:700px;
}

.project-title{
font-size:64px;
margin-bottom:20px;
}

.project-subtitle{
font-size:20px;
opacity:.85;
}

/* NAVIGATION */

.project-navigation{
display:flex;
justify-content:space-between;
max-width:1200px;
margin:auto;
padding:80px 40px;
}

.project-navigation a{
color:#D1A25A;
text-decoration:none;
font-weight:600;
}

/* =======================
   --- Contact Section ---
======================= */
.contact-section {
    padding: 80px 20px;
    background-color: #111;
    color: #fff;
    text-align: center;
}

/* =======================
   --- Responsive ---
======================= */
@media (max-width: 1024px) {
    .hero-home h1,
    .hero-services h1,
    .hero-portfolio h1 { font-size: 2.8rem; }
}

@media (max-width: 768px) {
    .hero-home h1,
    .hero-services h1,
    .hero-portfolio h1 { font-size: 2.2rem; }
}

@media (max-width: 480px) {
    .hero-home h1,
    .hero-services h1,
    .hero-portfolio h1 { font-size: 1.8rem; }
}