/* Header (full-width bar, content flex) */
.site-topbar{
  position:sticky; top:0; z-index:1200;
  background:var(--tiamo-red); color:#fff;
}

/* grid header: left logo, center nav, right placeholder */
.container.nav{
  display:grid;
  grid-template-columns: 1fr auto 1fr; /* forces the middle to be true center */
  align-items:center;
  gap:1rem;
  padding:.75rem 0;
}

/* logo stays left, no auto-enlarge */
.logo{ justify-self:start; }
.logo img{
  height: clamp(56px, 7vw, 96px);
  width:auto; display:block;
}

/* centered nav */
.main-nav{
  justify-self:center;
  display:flex; gap: clamp(.6rem, 2.2vw, 1.4rem); flex-wrap:wrap;
}
.main-nav a{
  color:#fff; text-decoration:none; font-weight:600; padding:.35rem .2rem; border-radius:8px;
}
.main-nav a:hover, .main-nav a[aria-current="page"]{ background:rgba(255,255,255,.15); }

/* right slot balances the grid; keep empty or use for actions later */
.right-slot{ justify-self:end; }


/* Hero */
.hero{
  position:relative; color:#fff; min-height:60vh;
  display:flex; flex-direction:column; justify-content:center;
  background:
    linear-gradient(to bottom,rgba(0,0,0,.58),rgba(0,0,0,.45)),
    var(--hero-img, url("../img/hero/innenraum.webp")) center/cover no-repeat;
  padding: clamp(3rem, 8vh, 6rem) 0;
}
.hero h1{ font-size: clamp(2.2rem, 4.5vw, 4.4rem); line-height:1.1; letter-spacing:-0.01em; margin:0 0 .5rem; }
.hero p{ max-width:48ch; margin:.75rem 0 0; }

/* Flex rows (universal) */
.grid{ display:flex; flex-wrap:wrap; gap: var(--space); }
.grid-2 > *{ flex: 1 1 min(100%, calc(50% - var(--space))); }

/* Footer */
.footer{ padding:2rem 0; color:var(--ink-soft); background:rgba(0,0,0,.02); border-top:1px solid #e6e6e6; }
.footer .container{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; align-items:center; }

/* --- site width constraint (append to the end of layout.css) --- */
:root{
  --site-max-width: 1200px; /* adjust to taste: 1100–1280px recommended */
}

.container{
  max-width: var(--site-max-width);
  width: 100%;
  margin-inline: auto;    /* centers when at max width */
  padding-inline: clamp(16px, 2vw, 24px);
  box-sizing: border-box;
}
