/* ====== Globals ====== */
:root{
  --container: 1200px;
  --space-x: clamp(16px, 4vw, 40px);
  --space-y: clamp(32px, 8vh, 160px);
  --radius: 16px;
  --shadow: 0 10px 20px rgba(0,0,0,.25);

  /* Fluid Typo */
  --h1: clamp(40px, 6vw, 96px);
  --h2: clamp(28px, 4.5vw, 56px);
  --h3: clamp(20px, 3vw, 32px);
  --lead: clamp(16px, 1.8vw, 20px);
}
h1{font-size:var(--h1); line-height:1.05}
h2{font-size:var(--h2); line-height:1.15}
h3{font-size:var(--h3); line-height:1.2}
p{font-size:var(--lead); line-height:1.6}
html,body{overflow-x:hidden}
:target{scroll-margin-top:80px}

/* ====== Header (kommt gleich als Template) ====== */
.nav-sticky{position:sticky; top:0; z-index:9999; isolation:isolate; backdrop-filter:blur(8px)}

/* ====== HERO (#welcome) ====== */
#welcome{
  position:relative; min-height:100svh;
  padding:var(--space-y) var(--space-x);
  display:grid; place-items:center; background:#000;
}
#welcome .video-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-1; filter:brightness(.35)}
/* Letters (L U K A) */
#welcome .hero-letters{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(12px,2vw,32px); justify-items:center; align-items:center}
#welcome .hero-letter{font-size:clamp(64px,12vw,240px); line-height:1; text-align:center}
@media (max-width:768px){ #welcome .hero-letters{grid-template-columns:repeat(2,1fr)} }
/* Buttons einheitlich */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; min-height:44px; padding:.75rem 1.25rem; border-radius:999px; font-weight:600; border:1px solid #fff}
.btn--solid{background:#fff; color:#000}
.btn--ghost{background:transparent; color:#fff}

/* ====== WHAT I DO (#what-i-do) ====== */
#what-i-do > .brxe-container{
  max-width:var(--container); margin:0 auto; padding:var(--space-y) var(--space-x);
  display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(16px,2vw,24px);
}
@media (max-width:991px){ #what-i-do > .brxe-container{grid-template-columns:1fr} }
#what-i-do .card{
  position:relative; border-radius:var(--radius); overflow:hidden;
  aspect-ratio:16/9; box-shadow:var(--shadow); transition:.2s transform,.2s box-shadow;
}
#what-i-do .card:hover{transform:translateY(-4px); box-shadow:0 14px 28px rgba(0,0,0,.3)}
#what-i-do .card img{width:100%; height:100%; object-fit:cover; display:block}
#what-i-do .card::after{content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,0) 60%)}
#what-i-do .card__content{position:absolute; left:0; right:0; bottom:0; padding:20px; color:#fff}

/* ====== THIS IS ME (#this-is-me) ====== */
#this-is-me > .brxe-container{
  max-width:var(--container); margin:0 auto; padding:var(--space-y) var(--space-x);
  display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(24px,4vw,48px); align-items:center;
}
@media (max-width:991px){ #this-is-me > .brxe-container{grid-template-columns:1fr; text-align:center} }
#this-is-me img{width:100%; height:auto; object-fit:cover; border-radius:var(--radius)}