:root {
      --schwarz: #040404;
      --nachtbraun: #0D0A0A;
      --wuesten-braun: #633412;
      --sahara-gold: #EBAB28;
      --sonnen-gelb: #F8F85A;
      --creme: #FAFAEC;
    }
    body {
      background: linear-gradient(180deg, var(--nachtbraun), var(--schwarz));
      color: var(--creme);
      font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
      margin: 0;
      padding: 0;
      margin-bottom:20px;
    }
    .page-wrapper {
      margin: 0 15%;
      max-width: 70%;
    }
    .navbar {
    font-size:140%;
    font-weight:700;
color: var(--sahara-gold);
    }
    .navbar .nav-link, .navbar-brand { color: var(--creme) !important; }
    .navbar .nav-link:hover {font-weight:700; color: var(--sonnen-gelb) !important; }
    header.hero {
  background: 
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0) %,       /* oben komplett sichtbar */
      rgba(0, 0, 0, 0) 75%,      /* bis 75% keine Veränderung */
      rgba(0, 0, 0, 1) 100%      /* ab 75% nach unten hin schwarz/transparent */
    ),
    url('/design/images/header.jpg') center/cover no-repeat;
      width: 100%;
      aspect-ratio: 16/6;
      display: grid;
      place-items: center;
      text-align: center;
      position: relative;
      isolation: isolate;
      border-radius: 12px;
      overflow: hidden;
    }
/*
    header.hero::after {
      content: "";
      position: absolute; inset: 0;
      background: linear-gradient(180deg, rgba(4,4,4,0.3), rgba(4,4,4,0.7));
      z-index: 0;
    }
*/


    
    header.hero .hero-box {
      z-index: 1;
      background: rgba(13,10,10,0.65);
      border: 1px solid var(--sahara-gold);
      border-radius: 1rem;
      padding: 1.25rem 1.5rem;
      backdrop-filter: blur(10px);
      max-width: 90%;
    }
    .btn-accent {
      background-color: var(--sahara-gold);
      color: var(--nachtbraun);
      border: none;
    }
    .btn-accent:hover { background-color: var(--sonnen-gelb); color: var(--nachtbraun); }
    .card {
      background: rgba(250,250,236,0.05);
      border: 1px solid rgba(250,250,236,0.15);
      border-radius: 1rem;
    }
    .section-alt {
      background: linear-gradient(180deg, rgba(99,52,18,0.35), rgba(13,10,10,0.6));
      border-radius: 12px;
    }
    a { color: var(--sonnen-gelb); }
    a:hover { color: var(--sahara-gold); }
    footer {
      background: var(--nachtbraun);
      color: var(--creme);
      border-top: 2px solid var(--sahara-gold);
      border-radius: 12px 12px 0 0;
    }
    
    
    
    
    
header.hero {
	position: relative;
	background: linear-gradient( to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.46) 100% ), url('/design/images/header.jpg') center/cover no-repeat;
	width: 100%;
	aspect-ratio: 16/6;
	display: grid;
	place-items: center;
	text-align: center;
	border-radius: 12px;
	overflow: hidden;
}

/* Navbar im Hero-Bereich */
.hero-nav {
	position: absolute;
	bottom: 0.1rem;
	left: 2.0rem;
	/* background: transparent; */
	/* border: 1px solid var(--sahara-gold); */
	/* border-radius: 0.75rem; */
	padding: 0.5rem 1rem;
	backdrop-filter: blur(10px);
}

.hero-nav .nav-link {
  color: var(--creme) !important;
  margin-left: 0.75rem;
}

.hero-nav .nav-link:hover {
  color: var(--sonnen-gelb) !important;
}