:root{
  --bg1:#0b0b0c;
  --bg2:#1a0c0c;
  --primary:#c00000;
  --primary-2:#ff2727;
  --text:#f2f2f3;
  --muted:#b8bcc4;
  --radius:16px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --container:1200px;
  --nav-bg: rgba(0,0,0,.55);
  --nav-hover: rgba(255,255,255,.12);
  --banner-h: 340px;
  --slot-space: 18px; /* hoogte van lege ruimteblokken */
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family: 'Be Vietnam Pro', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 10% 0%, #1c0000 0%, transparent 60%),
    linear-gradient(180deg, var(--bg1) 0%, #000 100%);
}

/* Container */
.container{max-width:var(--container);margin-inline:auto;padding-inline:18px}

/* Header / Hero */
.header{position:relative;background:linear-gradient(180deg,#140202 0%, #070606 100%);border-bottom:1px solid #ffffff18;text-align:center}
.header .banner-wrap{position:relative;height:var(--banner-h);overflow:hidden}
.header .banner{width:100%;height:100%;object-fit:cover}
.header .banner-wrap::after{content:"";position:absolute;inset:0;background: radial-gradient(80% 80% at 50% 30%, transparent 0%, rgba(0,0,0,.5) 60%, rgba(0,0,0,.8) 100%)}
.header .header-inner{padding:18px 0 22px}
.header .site-title a{color:#fff;text-decoration:none;letter-spacing:.5px;text-transform:uppercase}
.header .site-description{opacity:.8;margin:.2rem 0 0}

/* Topnav */
.topnav{position:sticky;top:0;z-index:1000;background:var(--nav-bg);backdrop-filter:blur(8px);border-bottom:1px solid #ffffff14}
.topnav .container{display:flex;gap:0;align-items:center;min-height:54px}
.topnav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap}
.topnav li{margin:0}
.topnav a{display:block;padding:14px 18px;color:#fff;text-decoration:none}
.topnav a:hover{background:var(--nav-hover)}

/* Layout */
.row{background:transparent;padding:0;margin:18px 0}
.column{float:left;padding:10px;background:transparent}
.column.side{width:25%}
.column.middle{width:50%}
.row::after{content:"";display:table;clear:both}

/* Space blocks (always visible, no link) */
.space-block{min-height:var(--slot-space);background:transparent;border-radius:12px;margin:6px 0;}
.space-block.solid{background:rgba(255,255,255,.06);border:1px solid #ffffff1a;box-shadow:var(--shadow)}

/* Banner slots (optional widgets) */
.banner-slot{margin:12px 0}
.banner-slot img{max-width:100%;height:auto;border-radius:12px;box-shadow:var(--shadow)}

/* Cards */
.card{background:linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.03) 100%);border:1px solid #ffffff1a;border-radius:var(--radius);box-shadow:var(--shadow);padding:16px}

/* Footer */
.footer{background:linear-gradient(180deg,#0b0b0c 0%, #050505 100%);border-top:1px solid #ffffff14;color:var(--muted);text-align:center;padding:18px;margin-top:24px}
.footer .copyright{opacity:.9}

@media (max-width:800px){
  .column.side,.column.middle{width:100%}
}