/* =====================
   FONTS
   ===================== */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

@font-face{
font-family:'Neue Haas Grotesk';
src:url('/img/other/fonts/neue-haas-grotesk-font-fanily/neuehaasgrottext-55roman-trial.otf') format('opentype');
font-weight:400;
font-style:normal;
}

@font-face{
font-family:'Neue Haas Grotesk';
src:url('/img/other/fonts/neue-haas-grotesk-font-fanily/neuehaasgrottext-65medium-trial.otf') format('opentype');
font-weight:500;
font-style:normal;
}

@font-face{
font-family:'Neue Haas Grotesk';
src:url('/img/other/fonts/neue-haas-grotesk-font-fanily/neuehaasgrottext-75bold-trial.otf') format('opentype');
font-weight:700;
font-style:normal;
}

/* =====================
   COLOR TOKENS
   ===================== */

:root{
--bg:          #0e1828;
--surface:     #15243a;
--surface-2:   #1c2f4a;
--accent:      #E8522A;
--accent-2:    #C6D62E;
--text:        #ffffff;
--text-strong: #e8eaf0;
--text-body:   #c4cad8;
--text-sub:    #8d99b0;
--text-muted:  #6b7a94;
--text-faint:  #4e5e78;
--text-ghost:  #3a4a62;
--text-dim:    #2c3c54;
--border:      #1e2f48;
--border-mid:  #2d4060;
--sh-sm:       rgba(0,0,0,0.30);
--sh-md:       rgba(0,0,0,0.55);
--sh-lg:       rgba(0,0,0,0.45);
--sh-xl:       rgba(0,0,0,0.40);
}

/* =====================
   BASE
   ===================== */

*{
box-sizing:border-box;
}

body{
margin:0;
min-height:100vh;
display:flex;
flex-direction:column;
background:var(--bg);
color:var(--text);
font-family:'Neue Haas Grotesk', Arial, sans-serif;
}

main{
flex:1;
}

/* =====================
   UC OVERLAY
   Remove .uc-overlay block from HTML to launch the site.
   ===================== */

.uc-overlay{
position:fixed;
inset:0;
background:var(--bg);
z-index:100;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
padding:20px;
}

.uc-overlay-controls{
position:absolute;
top:20px;
right:24px;
display:flex;
align-items:center;
gap:8px;
}

/* UC ADMIN */

.uc-admin{
margin-top:32px;
display:flex;
flex-direction:column;
align-items:center;
gap:10px;
}

.uc-admin-btn{
background:none;
border:none;
font-size:12px;
font-family:'Neue Haas Grotesk', sans-serif;
color:var(--text-dim);
cursor:pointer;
letter-spacing:0.5px;
padding:4px 8px;
transition:color 0.2s;
}

.uc-admin-btn:hover{
color:var(--text-muted);
}

.uc-admin-form{
display:none;
align-items:center;
gap:8px;
}

.uc-admin-form.visible{
display:flex;
}

.uc-admin-input{
border:1px solid var(--border-mid);
border-radius:8px;
padding:8px 14px;
font-size:14px;
font-family:inherit;
background:var(--surface);
color:var(--text);
outline:none;
transition:border-color 0.2s;
width:180px;
}

.uc-admin-input:focus{
border-color:var(--accent);
}

.uc-admin-submit{
background:var(--accent);
color:#fff;
border:none;
border-radius:8px;
width:34px;
height:34px;
font-size:16px;
font-family:'Neue Haas Grotesk', sans-serif;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
transition:background 0.2s;
flex-shrink:0;
}

.uc-admin-submit:hover{
background:#d44720;
}

.uc-admin-error{
display:none;
font-size:12px;
font-family:'Neue Haas Grotesk', sans-serif;
color:#e55;
}

.uc-admin-error.visible{
display:block;
}

/* CARD */

.card{
width:100%;
max-width:900px;
background:var(--surface);
border-radius:10px;
padding:80px 60px;
text-align:center;
position:relative;
box-shadow:0 20px 40px var(--sh-md);
}

/* layered cards */

.card::before{
content:"";
position:absolute;
width:95%;
height:100%;
left:2.5%;
bottom:-20px;
background:var(--surface);
border-radius:10px;
z-index:-1;
box-shadow:0 20px 30px var(--sh-lg);
}

.card::after{
content:"";
position:absolute;
width:90%;
height:100%;
left:5%;
bottom:-40px;
background:var(--surface);
border-radius:10px;
z-index:-2;
box-shadow:0 20px 30px var(--sh-xl);
}

/* SITE NAME */

.site{
letter-spacing:4px;
font-size:14px;
color:var(--text-body);
font-weight:400;
font-family:'Bebas Neue', sans-serif;
text-transform:uppercase;
}

/* card h1 */

.card h1{
font-family:'Bebas Neue', sans-serif;
font-size:72px;
font-weight:400;
letter-spacing:2px;
text-transform:uppercase;
margin:20px 0;
}

/* card p */

.card p{
max-width:420px;
margin:auto;
color:var(--text-body);
line-height:1.6;
font-size:16px;
font-family:'Neue Haas Grotesk', sans-serif;
}

/* =====================
   HEADER
   ===================== */

header{
position:sticky;
top:0;
background:var(--surface);
z-index:10;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 40px;
height:72px;
box-shadow:0 2px 8px var(--sh-sm);
}

.header-right{
display:flex;
align-items:center;
gap:8px;
}

.logo{
display:flex;
align-items:center;
text-decoration:none;
}

.logo-img{
height:52px;
width:52px;
display:block;
object-fit:contain;
}

nav{
display:flex;
gap:32px;
position:absolute;
left:50%;
transform:translateX(-50%);
}

nav a{
text-decoration:none;
color:var(--text-sub);
font-size:14px;
font-weight:500;
letter-spacing:0.3px;
transition:color 0.2s;
font-family:'Neue Haas Grotesk', sans-serif;
}

nav a:hover,
nav a.active{
color:var(--accent);
}

.lang-toggle{
display:flex;
gap:6px;
}

.lang-toggle button{
background:none;
border:1.5px solid var(--border-mid);
border-radius:4px;
padding:4px 10px;
font-size:11px;
font-weight:700;
letter-spacing:1px;
cursor:pointer;
color:var(--text-muted);
transition:0.2s;
font-family:'Bebas Neue', sans-serif;
}

.lang-toggle button.active,
.lang-toggle button:hover{
border-color:var(--accent);
color:var(--accent);
}

/* HAMBURGER */

.hamburger{
display:none;
background:none;
border:none;
cursor:pointer;
color:var(--text-sub);
padding:4px;
align-items:center;
transition:color 0.2s;
}

.hamburger:hover{
color:var(--text);
}

.hamburger-x{ display:none; }
.hamburger-bars{ display:flex; }

.hamburger.open .hamburger-bars{ display:none; }
.hamburger.open .hamburger-x{ display:flex; }

/* MOBILE NAV */

.mobile-nav{
position:fixed;
top:72px;
left:0;
right:0;
background:var(--surface);
box-shadow:0 12px 32px var(--sh-sm);
z-index:9;
display:none;
flex-direction:column;
opacity:0;
pointer-events:none;
transform:translateY(-8px);
transition:opacity 0.22s ease, transform 0.22s ease;
}

.mobile-nav.open{
opacity:1;
pointer-events:all;
transform:translateY(0);
}

.mobile-nav-links{
display:flex;
flex-direction:column;
padding:8px 0;
}

.mobile-nav-links a{
padding:18px 28px;
font-size:18px;
font-weight:500;
font-family:'Neue Haas Grotesk', sans-serif;
letter-spacing:0.2px;
color:var(--text-sub);
text-decoration:none;
transition:color 0.15s, background 0.15s;
}

.mobile-nav-links a:hover{
color:var(--accent);
background:var(--bg);
}

.mobile-nav-links a.active{
color:var(--accent);
font-weight:600;
}

.mobile-nav-footer{
display:flex;
align-items:center;
justify-content:flex-end;
padding:16px 28px;
border-top:1px solid var(--border);
}

/* =====================
   PLACEHOLDER SECTIONS
   ===================== */

.placeholder-section{
margin:24px;
border-radius:10px;
min-height:60vh;
background:var(--surface);
display:flex;
align-items:center;
justify-content:center;
text-align:center;
}

.placeholder-content{
padding:40px;
max-width:640px;
}

.placeholder-content h1{
font-family:'Bebas Neue', sans-serif;
font-size:64px;
font-weight:400;
letter-spacing:1px;
text-transform:uppercase;
margin:0 0 20px;
}

.placeholder-content h2{
font-family:'Bebas Neue', sans-serif;
font-size:40px;
font-weight:400;
letter-spacing:1px;
text-transform:uppercase;
margin:0 0 16px;
}

.placeholder-content p{
color:var(--text-muted);
font-size:16px;
line-height:1.6;
margin:0 0 28px;
}

/* PROJECT GRID */

.project-grid{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:24px;
padding:40px;
width:100%;
max-width:960px;
}

.project-card{
border-radius:10px;
padding:40px 24px;
text-align:center;
color:var(--text-ghost);
}

.project-card h3{
font-family:'Bebas Neue', sans-serif;
font-size:20px;
font-weight:400;
letter-spacing:1px;
text-transform:uppercase;
color:var(--text-dim);
margin:0 0 8px;
}

.project-card p{
font-size:13px;
color:var(--text-dim);
}

/* IMAGE PLACEHOLDER — replace with <img> when ready */

.project-img-placeholder{
width:100%;
aspect-ratio:16/9;
background:var(--surface-2);
border-radius:6px;
margin-bottom:16px;
}

/* =====================
   BUTTON
   ===================== */

.button{
display:inline-block;
margin-top:8px;
padding:12px 36px;
background:var(--accent);
color:#fff;
text-decoration:none;
border-radius:6px;
font-size:18px;
font-family:'Bebas Neue', sans-serif;
letter-spacing:2px;
text-transform:uppercase;
transition:background 0.2s, transform 0.15s;
}

.button:hover{
background:#d44720;
transform:translateY(-2px);
}

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

footer{
display:flex;
justify-content:space-between;
align-items:flex-start;
padding:24px 40px;
box-shadow:0 -2px 8px var(--sh-sm);
font-size:13px;
color:var(--text-faint);
background:var(--surface);
}

.footer-left{
display:flex;
flex-direction:column;
gap:4px;
}

.footer-name{
font-family:'Bebas Neue', sans-serif;
font-weight:400;
font-size:16px;
letter-spacing:1px;
text-transform:uppercase;
color:var(--text);
}

.footer-left a{
color:var(--text-faint);
text-decoration:none;
transition:color 0.2s;
}

.footer-left a:hover{
color:var(--text);
}

.footer-right{
display:flex;
flex-direction:column;
align-items:flex-end;
gap:16px;
}

.footer-social{
display:flex;
gap:16px;
align-items:center;
}

.footer-icon{
color:var(--text-ghost);
text-decoration:none;
display:flex;
align-items:center;
transition:color 0.2s;
}

.footer-icon:hover{
color:var(--accent);
}

.footer-nav{
color:var(--text-sub);
font-size:14px;
font-weight:500;
letter-spacing:0.3px;
text-decoration:none;
font-family:'Neue Haas Grotesk', sans-serif;
transition:color 0.2s;
}

.footer-nav:hover{
color:var(--text);
}

/* CONTACT LINKS */

.contact-links{
display:flex;
flex-direction:column;
gap:16px;
margin-top:32px;
text-align:left;
}

.contact-link{
display:flex;
gap:16px;
align-items:baseline;
text-decoration:none;
color:var(--text);
font-size:15px;
transition:opacity 0.2s;
}

.contact-link:hover{
opacity:0.6;
}

.contact-link-label{
font-family:'Bebas Neue', sans-serif;
font-weight:400;
font-size:13px;
letter-spacing:2px;
text-transform:uppercase;
color:var(--text-faint);
min-width:60px;
}

/* IMPRESSUM */

.impress-content{
text-align:left;
max-width:560px;
}

.impress-block{
margin-bottom:32px;
}

.impress-block h2{
font-family:'Bebas Neue', sans-serif;
font-size:22px;
font-weight:400;
letter-spacing:1px;
text-transform:uppercase;
color:var(--text);
margin:0 0 10px;
}

.impress-block p{
color:var(--text-body);
line-height:1.8;
font-size:15px;
margin:0;
}

.impress-block a{
color:var(--accent);
}

/* FOOTER LINKS */

.footer-links{
display:flex;
gap:24px;
}

.footer-links a{
color:var(--text-faint);
text-decoration:none;
font-size:13px;
transition:color 0.2s;
}

.footer-links a:hover{
color:var(--text);
}

/* =====================
   MOBILE
   ===================== */

@media (max-width:700px){

header{
padding:0 20px;
height:56px;
}

nav{
display:none;
}

.mobile-nav{
display:flex;
top:56px;
}

.hamburger{
display:flex;
}

.header-right .lang-toggle{
display:none;
}

.card{
padding:50px 30px;
}

.card h1{
font-size:48px;
}

.placeholder-content h1{
font-size:44px;
}

.placeholder-content h2{
font-size:28px;
}

.project-grid{
grid-template-columns:1fr;
padding:20px;
}

footer{
align-items:flex-start;
}

}

@media (max-width:480px){

.card{
padding:40px 20px;
}

.card h1{
font-size:36px;
}

.placeholder-content h1{
font-size:34px;
}

.placeholder-section{
margin:12px;
}

footer{
padding:20px 20px;
}

}